LiveUI

Set of macros for building Phoenix.LiveView modules to help manage database records.

This is done by configuring default implementation of LiveUI for a given Ecto.Schema struct and initializing basic Index and Show live modules. This will in turn build the infrastructure for displaying and processing data without need to write boilerplate code associated with m:Phoenix.LiveView#callbacks callbacks and HEEX templates.

LiveUI has the following features:

autogenerated views for CRUD operations
basic protocol implementation with sensible defaults
sortable tables with pagination
advanced search form
format values with css, functions and components
handles ownership to current user
handles relations
handles file uploads
support to override functions for data processing
support to override live view callbacks
custom actions for operations on single and multiple records
audit with record versioning
dark and light mode
debug mode that displays socket assigns

LiveUI is possible because of these libraries:

Cldr
Ecto
Faker
Flop
LiveInspect
LiveSelect
PaperTrail
PetalComponents
Phoenix

Installation

add entry to content list in assets/tailwind.config.js - ../lib/live_ui/**/*.*ex
add line to assets/css/app.css - @import '../../../live_ui/lib/live_ui/assets/default.css'
modify root.html.heex template - <body class="bg-amber-50 dark:bg-gray-900 antialiased">
add js-cookie to js/vendor for theme switcher - https://github.com/js-cookie/js-cookie

add theme switcher hook to assets/js/app.js

const ColorSchemeHook = {
  deadViewCompatible: true,
  mounted() {
    this.init()
  },
  updated() {
    this.init()
  },
  init() {
    initScheme()
    this.el.addEventListener("click", window.toggleScheme)
  },
}

add switcher code to head in root.html.heex - <LiveUI.Components.Core.color_scheme_switch_js />
add switcher icon to body in root.html.heex - <LiveUI.Components.Core.color_scheme_switch />

Cldr

Add Cldr module:

  defmodule MyApp.Cldr do
    use Cldr,
      default_locale: "en",
      otp_app: :my_app,
      providers: [Cldr.Number, Money, Cldr.Calendar, Cldr.DateTime],
      gettext: MyAppWeb.Gettext
  end

LiveSelect

Add hook to assets/js/app.js - https://hexdocs.pm/live_select/readme.html#javascript-hooks

Petal components

Instalation guide - https://petal.build/components#install_petal_components

Configuration

# live ui
config :live_ui,
  debug: true,
  repo: MyApp.Repo,
  cldr: MyApp.Cldr,
  ignored_fields: [:token, :hashed_password, :first_version_id, :current_version_id]

# petal components
config :petal_components, :error_translator_function, {MyAppWeb.CoreComponents, :translate_error}

# flop
config :flop, repo: MyApp.Repo, default_limit: 10, max_limit: 100

# cldr
config :ex_cldr, default_backend: LiveUI.Cldr
config :my_app, LiveUI.Cldr, locales: ["en"]

# paper trail (optional)
config :paper_trail,
  repo: MyApp.Repo,
  originator: [name: :user, model: MyApp.User],
  strict_mode: true

There is a sample aplication bundled with the project that has all these set up, just run mix ecto.setup to generate some random data and start the server with iex -S mix phx.server. Admin credentials are admin@example.com/password.

Minimal setup

Ecto schema:

defmodule MyApp.User do
  use Ecto.Schema

  schema "users" do
    field :name, :string
    field :email, :string
    timestamps()
  end
end

Router entry:

scope "/", MyAppWeb do
  live_ui("/users", UserLive, MyApp.User)
end

Protocol file:

defimpl LiveUI, for: MyApp.User do
  use LiveUI.Protocol
end

Live modules:

defmodule MyAppWeb.UserLive.Index do
  use LiveUI.Views.Index, for: MyApp.User
end

defmodule MyAppWeb.UserLive.Show do
  use LiveUI.Views.Show, for: MyApp.User
end

Is it any good?

Yes

damir/live_ui