Graham McIntire
85abdedf8b
Replace black ring border with lighter zinc-200/zinc-700 border on all tables for better visual consistency across the application. Also update tbody dividers to match the new border styling.
586 lines
20 KiB
Elixir
586 lines
20 KiB
Elixir
defmodule ToweropsWeb.CoreComponents do
|
||
@moduledoc """
|
||
Provides core UI components.
|
||
|
||
At first glance, this module may seem daunting, but its goal is to provide
|
||
core building blocks for your application, such as tables, forms, and
|
||
inputs. The components consist mostly of markup and are well-documented
|
||
with doc strings and declarative assigns. You may customize and style
|
||
them in any way you want, based on your application growth and needs.
|
||
|
||
The foundation for styling is Tailwind CSS, a utility-first CSS framework.
|
||
Here are useful references:
|
||
|
||
* [Tailwind CSS](https://tailwindcss.com) - the foundational framework
|
||
we build on. You will use it for layout, sizing, flexbox, grid, and
|
||
spacing.
|
||
|
||
* [Heroicons](https://heroicons.com) - see `icon/1` for usage.
|
||
|
||
* [Phoenix.Component](https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html) -
|
||
the component system used by Phoenix. Some components, such as `<.link>`
|
||
and `<.form>`, are defined there.
|
||
|
||
"""
|
||
use Phoenix.Component
|
||
use Gettext, backend: ToweropsWeb.Gettext
|
||
|
||
alias Phoenix.HTML.Form
|
||
alias Phoenix.HTML.FormField
|
||
alias Phoenix.LiveView.JS
|
||
|
||
@doc """
|
||
Renders flash notices.
|
||
|
||
## Examples
|
||
|
||
<.flash kind={:info} flash={@flash} />
|
||
<.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>
|
||
"""
|
||
attr :id, :string, doc: "the optional id of flash container"
|
||
attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
|
||
attr :title, :string, default: nil
|
||
attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
|
||
attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"
|
||
|
||
slot :inner_block, doc: "the optional inner block that renders the flash message"
|
||
|
||
def flash(assigns) do
|
||
assigns = assign_new(assigns, :id, fn -> "flash-#{assigns.kind}" end)
|
||
|
||
~H"""
|
||
<div
|
||
:if={msg = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)}
|
||
id={@id}
|
||
phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
|
||
role="alert"
|
||
class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-50"
|
||
{@rest}
|
||
>
|
||
<div class="flex w-full flex-col items-center space-y-4 sm:items-end">
|
||
<div class={[
|
||
"pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5",
|
||
@kind == :info && "bg-blue-50 dark:bg-blue-950",
|
||
@kind == :error && "bg-red-50 dark:bg-red-950"
|
||
]}>
|
||
<div class="p-4">
|
||
<div class="flex items-start">
|
||
<div class="flex-shrink-0">
|
||
<.icon
|
||
:if={@kind == :info}
|
||
name="hero-information-circle"
|
||
class="h-6 w-6 text-blue-600 dark:text-blue-400"
|
||
/>
|
||
<.icon
|
||
:if={@kind == :error}
|
||
name="hero-exclamation-circle"
|
||
class="h-6 w-6 text-red-600 dark:text-red-400"
|
||
/>
|
||
</div>
|
||
<div class="ml-3 w-0 flex-1 pt-0.5">
|
||
<p
|
||
:if={@title}
|
||
class={[
|
||
"text-sm font-medium",
|
||
@kind == :info && "text-blue-900 dark:text-blue-100",
|
||
@kind == :error && "text-red-900 dark:text-red-100"
|
||
]}
|
||
>
|
||
{@title}
|
||
</p>
|
||
<p class={[
|
||
"text-sm",
|
||
@title && "mt-1",
|
||
@kind == :info && "text-blue-700 dark:text-blue-200",
|
||
@kind == :error && "text-red-700 dark:text-red-200"
|
||
]}>
|
||
{msg}
|
||
</p>
|
||
</div>
|
||
<div class="ml-4 flex flex-shrink-0">
|
||
<button
|
||
type="button"
|
||
class={[
|
||
"inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2",
|
||
@kind == :info &&
|
||
"text-blue-500 hover:text-blue-600 focus:ring-blue-500 dark:text-blue-400",
|
||
@kind == :error &&
|
||
"text-red-500 hover:text-red-600 focus:ring-red-500 dark:text-red-400"
|
||
]}
|
||
aria-label={gettext("close")}
|
||
>
|
||
<.icon name="hero-x-mark" class="h-5 w-5" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
"""
|
||
end
|
||
|
||
@doc """
|
||
Renders a button with navigation support.
|
||
|
||
## Examples
|
||
|
||
<.button>Send!</.button>
|
||
<.button phx-click="go" variant="primary">Send!</.button>
|
||
<.button navigate={~p"/"}>Home</.button>
|
||
"""
|
||
attr :rest, :global, include: ~w(href navigate patch method download name value disabled)
|
||
attr :class, :any
|
||
attr :variant, :string, values: ~w(primary danger)
|
||
slot :inner_block, required: true
|
||
|
||
def button(%{rest: rest} = assigns) do
|
||
variants = %{
|
||
"primary" => "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600",
|
||
"danger" => "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 dark:bg-red-500 dark:hover:bg-red-600",
|
||
nil =>
|
||
"bg-white text-zinc-900 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-50 focus:ring-blue-500 dark:bg-zinc-800 dark:text-zinc-100 dark:ring-zinc-700 dark:hover:bg-zinc-700"
|
||
}
|
||
|
||
assigns =
|
||
assign_new(assigns, :class, fn ->
|
||
[
|
||
"inline-flex items-center gap-2 rounded-lg px-3.5 py-2.5 text-sm font-semibold shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
|
||
Map.fetch!(variants, assigns[:variant])
|
||
]
|
||
end)
|
||
|
||
if rest[:href] || rest[:navigate] || rest[:patch] do
|
||
~H"""
|
||
<.link class={@class} {@rest}>
|
||
{render_slot(@inner_block)}
|
||
</.link>
|
||
"""
|
||
else
|
||
~H"""
|
||
<button class={@class} {@rest}>
|
||
{render_slot(@inner_block)}
|
||
</button>
|
||
"""
|
||
end
|
||
end
|
||
|
||
@doc """
|
||
Renders an input with label and error messages.
|
||
|
||
A `Phoenix.HTML.FormField` may be passed as argument,
|
||
which is used to retrieve the input name, id, and values.
|
||
Otherwise all attributes may be passed explicitly.
|
||
|
||
## Types
|
||
|
||
This function accepts all HTML input types, considering that:
|
||
|
||
* You may also set `type="select"` to render a `<select>` tag
|
||
|
||
* `type="checkbox"` is used exclusively to render boolean values
|
||
|
||
* For live file uploads, see `Phoenix.Component.live_file_input/1`
|
||
|
||
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
|
||
for more information. Unsupported types, such as radio, are best
|
||
written directly in your templates.
|
||
|
||
## Examples
|
||
|
||
```heex
|
||
<.input field={@form[:email]} type="email" />
|
||
<.input name="my-input" errors={["oh no!"]} />
|
||
```
|
||
|
||
## Select type
|
||
|
||
When using `type="select"`, you must pass the `options` and optionally
|
||
a `value` to mark which option should be preselected.
|
||
|
||
```heex
|
||
<.input field={@form[:user_type]} type="select" options={["Admin": "admin", "User": "user"]} />
|
||
```
|
||
|
||
For more information on what kind of data can be passed to `options` see
|
||
[`options_for_select`](https://hexdocs.pm/phoenix_html/Phoenix.HTML.Form.html#options_for_select/2).
|
||
"""
|
||
attr :id, :any, default: nil
|
||
attr :name, :any
|
||
attr :label, :string, default: nil
|
||
attr :value, :any
|
||
|
||
attr :type, :string,
|
||
default: "text",
|
||
values: ~w(checkbox color date datetime-local email file month number password
|
||
search select tel text textarea time url week hidden)
|
||
|
||
attr :field, FormField, doc: "a form field struct retrieved from the form, for example: @form[:email]"
|
||
|
||
attr :errors, :list, default: []
|
||
attr :checked, :boolean, doc: "the checked flag for checkbox inputs"
|
||
attr :prompt, :string, default: nil, doc: "the prompt for select inputs"
|
||
attr :options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2"
|
||
attr :multiple, :boolean, default: false, doc: "the multiple flag for select inputs"
|
||
attr :class, :any, default: nil, doc: "the input class to use over defaults"
|
||
attr :error_class, :any, default: nil, doc: "the input error class to use over defaults"
|
||
|
||
attr :rest, :global, include: ~w(accept autocomplete capture cols disabled form list max maxlength min minlength
|
||
multiple pattern placeholder readonly required rows size step)
|
||
|
||
def input(%{field: %FormField{} = field} = assigns) do
|
||
errors = if Phoenix.Component.used_input?(field), do: field.errors, else: []
|
||
|
||
assigns
|
||
|> assign(field: nil, id: assigns.id || field.id)
|
||
|> assign(:errors, Enum.map(errors, &translate_error(&1)))
|
||
|> assign_new(:name, fn -> if assigns.multiple, do: field.name <> "[]", else: field.name end)
|
||
|> assign_new(:value, fn -> field.value end)
|
||
|> input()
|
||
end
|
||
|
||
def input(%{type: "hidden"} = assigns) do
|
||
~H"""
|
||
<input type="hidden" id={@id} name={@name} value={@value} {@rest} />
|
||
"""
|
||
end
|
||
|
||
def input(%{type: "checkbox"} = assigns) do
|
||
assigns =
|
||
assign_new(assigns, :checked, fn ->
|
||
Form.normalize_value("checkbox", assigns[:value])
|
||
end)
|
||
|
||
~H"""
|
||
<div class="mb-4">
|
||
<label class="flex items-center gap-3">
|
||
<input
|
||
type="hidden"
|
||
name={@name}
|
||
value="false"
|
||
disabled={@rest[:disabled]}
|
||
form={@rest[:form]}
|
||
/>
|
||
<input
|
||
type="checkbox"
|
||
id={@id}
|
||
name={@name}
|
||
value="true"
|
||
checked={@checked}
|
||
class={
|
||
@class ||
|
||
"h-4 w-4 rounded border-zinc-300 text-blue-600 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800"
|
||
}
|
||
{@rest}
|
||
/>
|
||
<span class="text-sm font-medium text-zinc-900 dark:text-zinc-100">{@label}</span>
|
||
</label>
|
||
<.error :for={msg <- @errors}>{msg}</.error>
|
||
</div>
|
||
"""
|
||
end
|
||
|
||
def input(%{type: "select"} = assigns) do
|
||
~H"""
|
||
<div class="mb-4">
|
||
<label>
|
||
<span :if={@label} class="block text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-2">
|
||
{@label}
|
||
</span>
|
||
<select
|
||
id={@id}
|
||
name={@name}
|
||
class={[
|
||
@class ||
|
||
"block w-full rounded-lg border-0 py-2 px-3 text-zinc-900 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6 dark:bg-zinc-800 dark:text-zinc-100",
|
||
@errors == [] &&
|
||
"ring-zinc-300 focus:ring-blue-600 dark:ring-zinc-700 dark:focus:ring-blue-500",
|
||
@errors != [] &&
|
||
(@error_class ||
|
||
"ring-red-300 focus:ring-red-500 dark:ring-red-700 dark:focus:ring-red-500")
|
||
]}
|
||
multiple={@multiple}
|
||
{@rest}
|
||
>
|
||
<option :if={@prompt} value="">{@prompt}</option>
|
||
{Phoenix.HTML.Form.options_for_select(@options, @value)}
|
||
</select>
|
||
</label>
|
||
<.error :for={msg <- @errors}>{msg}</.error>
|
||
</div>
|
||
"""
|
||
end
|
||
|
||
def input(%{type: "textarea"} = assigns) do
|
||
~H"""
|
||
<div class="mb-4">
|
||
<label>
|
||
<span :if={@label} class="block text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-2">
|
||
{@label}
|
||
</span>
|
||
<textarea
|
||
id={@id}
|
||
name={@name}
|
||
class={[
|
||
@class ||
|
||
"block w-full rounded-lg border-0 py-2 px-3 text-zinc-900 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6 dark:bg-zinc-800 dark:text-zinc-100",
|
||
@errors == [] &&
|
||
"ring-zinc-300 focus:ring-blue-600 dark:ring-zinc-700 dark:focus:ring-blue-500",
|
||
@errors != [] &&
|
||
(@error_class ||
|
||
"ring-red-300 focus:ring-red-500 dark:ring-red-700 dark:focus:ring-red-500")
|
||
]}
|
||
{@rest}
|
||
>{Phoenix.HTML.Form.normalize_value("textarea", @value)}</textarea>
|
||
</label>
|
||
<.error :for={msg <- @errors}>{msg}</.error>
|
||
</div>
|
||
"""
|
||
end
|
||
|
||
# All other inputs text, datetime-local, url, password, etc. are handled here...
|
||
def input(assigns) do
|
||
~H"""
|
||
<div class="mb-4">
|
||
<label>
|
||
<span :if={@label} class="block text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-2">
|
||
{@label}
|
||
</span>
|
||
<input
|
||
type={@type}
|
||
name={@name}
|
||
id={@id}
|
||
value={Phoenix.HTML.Form.normalize_value(@type, @value)}
|
||
class={[
|
||
@class ||
|
||
"block w-full rounded-lg border-0 py-2 px-3 text-zinc-900 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6 dark:bg-zinc-800 dark:text-zinc-100",
|
||
@errors == [] &&
|
||
"ring-zinc-300 focus:ring-blue-600 dark:ring-zinc-700 dark:focus:ring-blue-500",
|
||
@errors != [] &&
|
||
(@error_class ||
|
||
"ring-red-300 focus:ring-red-500 dark:ring-red-700 dark:focus:ring-red-500")
|
||
]}
|
||
{@rest}
|
||
/>
|
||
</label>
|
||
<.error :for={msg <- @errors}>{msg}</.error>
|
||
</div>
|
||
"""
|
||
end
|
||
|
||
# Helper used by inputs to generate form errors
|
||
defp error(assigns) do
|
||
~H"""
|
||
<p class="mt-2 flex gap-2 items-center text-sm text-red-600 dark:text-red-400">
|
||
<.icon name="hero-exclamation-circle" class="h-5 w-5 flex-shrink-0" />
|
||
{render_slot(@inner_block)}
|
||
</p>
|
||
"""
|
||
end
|
||
|
||
@doc """
|
||
Renders a header with title.
|
||
"""
|
||
slot :inner_block, required: true
|
||
slot :subtitle
|
||
slot :actions
|
||
|
||
def header(assigns) do
|
||
~H"""
|
||
<header class={[@actions != [] && "flex items-center justify-between gap-6", "mb-8"]}>
|
||
<div>
|
||
<h1 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100">
|
||
{render_slot(@inner_block)}
|
||
</h1>
|
||
<p :if={@subtitle != []} class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
|
||
{render_slot(@subtitle)}
|
||
</p>
|
||
</div>
|
||
<div class="flex-none">{render_slot(@actions)}</div>
|
||
</header>
|
||
"""
|
||
end
|
||
|
||
@doc """
|
||
Renders a table with generic styling.
|
||
|
||
## Examples
|
||
|
||
<.table id="users" rows={@users}>
|
||
<:col :let={user} label="id">{user.id}</:col>
|
||
<:col :let={user} label="username">{user.username}</:col>
|
||
</.table>
|
||
"""
|
||
attr :id, :string, required: true
|
||
attr :rows, :list, required: true
|
||
attr :row_id, :any, default: nil, doc: "the function for generating the row id"
|
||
attr :row_click, :any, default: nil, doc: "the function for handling phx-click on each row"
|
||
|
||
attr :row_item, :any,
|
||
default: &Function.identity/1,
|
||
doc: "the function for mapping each row before calling the :col and :action slots"
|
||
|
||
slot :col, required: true do
|
||
attr :label, :string
|
||
end
|
||
|
||
slot :action, doc: "the slot for showing user actions in the last table column"
|
||
|
||
def table(assigns) do
|
||
assigns =
|
||
with %{rows: %Phoenix.LiveView.LiveStream{}} <- assigns do
|
||
assign(assigns, row_id: assigns.row_id || fn {id, _item} -> id end)
|
||
end
|
||
|
||
~H"""
|
||
<div class="overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-700">
|
||
<table class="min-w-full divide-y divide-zinc-200 dark:divide-zinc-700">
|
||
<thead class="bg-zinc-50 dark:bg-zinc-900">
|
||
<tr>
|
||
<th
|
||
:for={col <- @col}
|
||
class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-700 dark:text-zinc-300"
|
||
>
|
||
{col[:label]}
|
||
</th>
|
||
<th :if={@action != []} class="px-6 py-3">
|
||
<span class="sr-only">{gettext("Actions")}</span>
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody
|
||
id={@id}
|
||
phx-update={is_struct(@rows, Phoenix.LiveView.LiveStream) && "stream"}
|
||
class="divide-y divide-zinc-200 bg-white dark:divide-zinc-700 dark:bg-zinc-950"
|
||
>
|
||
<tr
|
||
:for={row <- @rows}
|
||
id={@row_id && @row_id.(row)}
|
||
class="hover:bg-zinc-50 dark:hover:bg-zinc-900"
|
||
>
|
||
<td
|
||
:for={col <- @col}
|
||
phx-click={@row_click && @row_click.(row)}
|
||
class={[
|
||
"px-6 py-4 whitespace-nowrap text-sm text-zinc-900 dark:text-zinc-100",
|
||
@row_click && "cursor-pointer"
|
||
]}
|
||
>
|
||
{render_slot(col, @row_item.(row))}
|
||
</td>
|
||
<td :if={@action != []} class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||
<div class="flex gap-4 justify-end">
|
||
<%= for action <- @action do %>
|
||
{render_slot(action, @row_item.(row))}
|
||
<% end %>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
"""
|
||
end
|
||
|
||
@doc """
|
||
Renders a data list.
|
||
|
||
## Examples
|
||
|
||
<.list>
|
||
<:item title="Title">{@post.title}</:item>
|
||
<:item title="Views">{@post.views}</:item>
|
||
</.list>
|
||
"""
|
||
slot :item, required: true do
|
||
attr :title, :string, required: true
|
||
end
|
||
|
||
def list(assigns) do
|
||
~H"""
|
||
<div class="overflow-hidden bg-white shadow rounded-lg divide-y divide-zinc-200 dark:bg-zinc-900 dark:divide-zinc-800">
|
||
<div :for={item <- @item} class="px-6 py-4">
|
||
<dt class="text-sm font-medium text-zinc-900 dark:text-zinc-100">{item.title}</dt>
|
||
<dd class="mt-1 text-sm text-zinc-700 dark:text-zinc-300">{render_slot(item)}</dd>
|
||
</div>
|
||
</div>
|
||
"""
|
||
end
|
||
|
||
@doc """
|
||
Renders a [Heroicon](https://heroicons.com).
|
||
|
||
Heroicons come in three styles – outline, solid, and mini.
|
||
By default, the outline style is used, but solid and mini may
|
||
be applied by using the `-solid` and `-mini` suffix.
|
||
|
||
You can customize the size and colors of the icons by setting
|
||
width, height, and background color classes.
|
||
|
||
Icons are extracted from the `deps/heroicons` directory and bundled within
|
||
your compiled app.css by the plugin in `assets/vendor/heroicons.js`.
|
||
|
||
## Examples
|
||
|
||
<.icon name="hero-x-mark" />
|
||
<.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />
|
||
"""
|
||
attr :name, :string, required: true
|
||
attr :class, :any, default: "size-4"
|
||
|
||
def icon(%{name: "hero-" <> _} = assigns) do
|
||
~H"""
|
||
<span class={[@name, @class]} />
|
||
"""
|
||
end
|
||
|
||
## JS Commands
|
||
|
||
def show(js \\ %JS{}, selector) do
|
||
JS.show(js,
|
||
to: selector,
|
||
time: 300,
|
||
transition:
|
||
{"transition-all ease-out duration-300", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
|
||
"opacity-100 translate-y-0 sm:scale-100"}
|
||
)
|
||
end
|
||
|
||
def hide(js \\ %JS{}, selector) do
|
||
JS.hide(js,
|
||
to: selector,
|
||
time: 200,
|
||
transition:
|
||
{"transition-all ease-in duration-200", "opacity-100 translate-y-0 sm:scale-100",
|
||
"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
|
||
)
|
||
end
|
||
|
||
@doc """
|
||
Translates an error message using gettext.
|
||
"""
|
||
def translate_error({msg, opts}) do
|
||
# When using gettext, we typically pass the strings we want
|
||
# to translate as a static argument:
|
||
#
|
||
# # Translate the number of files with plural rules
|
||
# dngettext("errors", "1 file", "%{count} files", count)
|
||
#
|
||
# However the error messages in our forms and APIs are generated
|
||
# dynamically, so we need to translate them by calling Gettext
|
||
# with our gettext backend as first argument. Translations are
|
||
# available in the errors.po file (as we use the "errors" domain).
|
||
if count = opts[:count] do
|
||
Gettext.dngettext(ToweropsWeb.Gettext, "errors", msg, msg, count, opts)
|
||
else
|
||
Gettext.dgettext(ToweropsWeb.Gettext, "errors", msg, opts)
|
||
end
|
||
end
|
||
|
||
@doc """
|
||
Translates the errors for a field from a keyword list of errors.
|
||
"""
|
||
def translate_errors(errors, field) when is_list(errors) do
|
||
for {^field, {msg, opts}} <- errors, do: translate_error({msg, opts})
|
||
end
|
||
end
|