Something went wrong. Try again.
annot.at is a service for syncing static websites, such as blogs, to atproto and standard.site annot.at
Something went wrong. Try again.
19 kB · 626 lines
Elixir
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627defmodule AnnotAtWeb.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, augmented with daisyUI, a Tailwind CSS plugin that provides UI components and themes. Here are useful references:
* [daisyUI](https://daisyui.com/docs/intro/) - a good place to get started and see the available components.
* [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: AnnotAtWeb.Gettext
alias Phoenix.HTML.Form alias Phoenix.LiveView.JS
@doc """ Renders flash notices.
## Examples
<.flash kind={:info} flash={@flash} /> <.flash id="welcome-back" kind={:info} phx-mounted={show("#welcome-back") |> JS.remove_attribute("hidden")} hidden > 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="toast toast-top toast-end z-50" {@rest} > <div class={[ "alert w-80 sm:w-96 max-w-80 sm:max-w-96 text-wrap", @kind == :info && "alert-info", @kind == :error && "alert-error" ]}> <.icon :if={@kind == :info} name="hero-information-circle" class="size-5 shrink-0" /> <.icon :if={@kind == :error} name="hero-exclamation-circle" class="size-5 shrink-0" /> <div> <p :if={@title} class="font-semibold">{@title}</p> <p>{msg}</p> </div> <div class="flex-1" /> <button type="button" class="group self-start cursor-pointer" aria-label={gettext("close")}> <.icon name="hero-x-mark" class="size-5 opacity-40 group-hover:opacity-70" /> </button> </div> </div> """ end
attr :rest, :global, include: ~w(href navigate patch method download name value disabled) attr :class, :any, default: nil attr :variant, :string, default: "ghost", values: ~w(primary secondary accent ghost danger) attr :shadow, :string, default: nil attr :size, :string, default: "md", values: ~w(sm md lg) slot :inner_block, required: true
def button(%{rest: rest} = assigns) do variants = %{ "primary" => "bg-ink text-paper", "secondary" => "bg-peach-bold text-ink", "accent" => "bg-sky-bold text-ink", "ghost" => "bg-paper text-ink hover:bg-ink/5", "danger" => "bg-paper hover:text-red-600 hover:bg-red-50" }
shadows = %{ nil => nil, "primary" => "shadow-[4px_4px_0px_0px_var(--color-ink)]", "secondary" => "shadow-[4px_4px_0px_0px_var(--color-peach-bold)]", "accent" => "shadow-[4px_4px_0px_0px_var(--color-sky-bold)]" }
sizes = %{ "sm" => "px-3 py-1.5 text-xs", "md" => "px-5 py-2.5 text-sm", "lg" => "px-6 py-4 text-lg" }
assigns = assign(assigns, :class, [ "inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-xl border-2 border-ink font-bold transition-all active:translate-y-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none", Map.fetch!(sizes, assigns[:size]), Map.fetch!(variants, assigns[:variant]), Map.fetch!(shadows, assigns[:shadow]), assigns[:class] ])
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, Phoenix.HTML.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: %Phoenix.HTML.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="fieldset mb-2"> <label for={@id}> <input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} form={@rest[:form]} /> <span class="label"> <input type="checkbox" id={@id} name={@name} value="true" checked={@checked} class={@class || "checkbox checkbox-sm"} {@rest} />{@label} </span> </label> <.error :for={msg <- @errors}>{msg}</.error> </div> """ end
def input(%{type: "select"} = assigns) do ~H""" <div class="fieldset mb-2"> <label for={@id}> <span :if={@label} class="label mb-1">{@label}</span> <select id={@id} name={@name} class={[@class || "w-full select", @errors != [] && (@error_class || "select-error")]} 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="fieldset mb-2"> <label for={@id}> <span :if={@label} class="label mb-1">{@label}</span> <textarea id={@id} name={@name} class={[ @class || "w-full textarea", @errors != [] && (@error_class || "textarea-error") ]} {@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="fieldset mb-2"> <label for={@id}> <span :if={@label} class="label mb-1">{@label}</span> <input type={@type} name={@name} id={@id} value={Phoenix.HTML.Form.normalize_value(@type, @value)} class={[ @class || "w-full input", @errors != [] && (@error_class || "input-error") ]} {@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-1.5 flex gap-2 items-center text-sm text-error"> <.icon name="hero-exclamation-circle" class="size-5" /> {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", "pb-4"]}> <div> <h1 class="text-lg font-semibold leading-8"> {render_slot(@inner_block)} </h1> <p :if={@subtitle != []} class="text-sm text-base-content/70"> {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""" <table class="table table-zebra"> <thead> <tr> <th :for={col <- @col}>{col[:label]}</th> <th :if={@action != []}> <span class="sr-only">{gettext("Actions")}</span> </th> </tr> </thead> <tbody id={@id} phx-update={is_struct(@rows, Phoenix.LiveView.LiveStream) && "stream"}> <tr :for={row <- @rows} id={@row_id && @row_id.(row)}> <td :for={col <- @col} phx-click={@row_click && @row_click.(row)} class={@row_click && "hover:cursor-pointer"} > {render_slot(col, @row_item.(row))} </td> <td :if={@action != []} class="w-0 font-semibold"> <div class="flex gap-4"> <%= for action <- @action do %> {render_slot(action, @row_item.(row))} <% end %> </div> </td> </tr> </tbody> </table> """ 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""" <ul class="list"> <li :for={item <- @item} class="list-row"> <div class="list-col-grow"> <div class="font-bold">{item.title}</div> <div>{render_slot(item)}</div> </div> </li> </ul> """ 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
attr :label, :string, required: true attr :value, :string, required: true attr :sub, :string, required: true attr :tint, :string, required: true attr :shadow, :string, required: true
def stat_card(assigns) do ~H""" <div class={["rounded-2xl border-2 border-ink p-5", @tint, @shadow]}> <div class="text-xs font-bold text-ink/70">{@label}</div> <div class="mt-2 font-display text-3xl font-bold">{@value}</div> <div class="mt-1 text-xs text-ink/55">{@sub}</div> </div> """ end
@doc """ A modal dialog roughly based on the old Phoenix scaffold.
## Examples
<.button phx-click={show_modal("confirm")}>Open</.button>
<.modal id="confirm"> <h2 class="font-display text-2xl font-bold tracking-tight">Are you sure?</h2> <.button phx-click={hide_modal("confirm")}>Cancel</.button> </.modal> """ attr :id, :string, required: true attr :on_cancel, JS, default: %JS{} slot :inner_block, required: true
def modal(assigns) do ~H""" <div id={@id} class="relative z-50 hidden"> <div id={"#{@id}-bg"} class="fixed inset-0 bg-ink/50" aria-hidden="true" /> <div class="fixed inset-0 flex items-center justify-center p-4"> <.focus_wrap id={"#{@id}-content"} phx-window-keydown={hide_modal(@on_cancel, @id)} phx-key="escape" phx-click-away={hide_modal(@on_cancel, @id)} role="dialog" aria-modal="true" class="relative w-full max-w-lg rounded-2xl border-2 border-ink bg-paper p-6 shadow-[8px_8px_0px_0px_var(--color-ink)]" > {render_slot(@inner_block)} </.focus_wrap> </div> </div> """ end
attr :class, :any, default: nil attr :icon, :any, default: "hero-exclamation-triangle" slot :inner_block, required: true
def banner(assigns) do ~H""" <div role="note" class={[ "flex items-center gap-2.5 rounded-xl border-2 border-ink bg-peach-light px-4 py-2.5 text-sm text-ink", @class ]} > <.icon name={@icon} class="size-4 shrink-0" /> <span class="font-medium leading-none"> {render_slot(@inner_block)} </span> </div> """ 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
def show_modal(js \\ %JS{}, id) when is_binary(id) do js |> JS.show(to: "##{id}") |> JS.show( to: "##{id}-bg", time: 300, transition: {"transition-opacity ease-out duration-300", "opacity-0", "opacity-100"} ) |> show("##{id}-content") |> JS.add_class("overflow-hidden", to: "body") |> JS.focus_first(to: "##{id}-content") end
def hide_modal(js \\ %JS{}, id) do js |> JS.hide( to: "##{id}-bg", time: 200, transition: {"transition-opacity ease-in duration-200", "opacity-100", "opacity-0"} ) |> hide("##{id}-content") |> JS.hide(to: "##{id}", transition: {"block", "block", "hidden"}) |> JS.remove_class("overflow-hidden", to: "body") |> JS.pop_focus() 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(AnnotAtWeb.Gettext, "errors", msg, msg, count, opts) else Gettext.dgettext(AnnotAtWeb.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}) endend