defmodule PostlandWeb.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 modals, tables, and forms. 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 default components use Tailwind CSS, a utility-first CSS framework. See the [Tailwind CSS documentation](https://tailwindcss.com) to learn how to customize them or feel free to swap in another framework altogether. Icons are provided by [heroicons](https://heroicons.com). See `icon/1` for usage. """ use Phoenix.Component use Phoenix.VerifiedRoutes, endpoint: PostlandWeb.Endpoint, router: PostlandWeb.Router alias Phoenix.LiveView.JS use Gettext, backend: PostlandWeb.Gettext def post_form(assigns) do user = Postland.Accounts.solo_user() ~H"""
<.form class="py-5" phx-submit="create_post" phx-change="change_post">
""" end def post_card(assigns) do author = Postland.Timeline.attribution(assigns.post) || %{} %{host: host} = case author do %{"id" => id} -> URI.parse(id) _ -> %{host: "<>"} end assigns = assigns |> Map.put(:author, author) |> Map.put(:author_host, host) ~H"""
<%= @author["name"] %> @<%= @author["preferredUsername"] %>@<%= @author_host %>
<%= {:safe, Postland.Timeline.html_content(@post)} %>
""" end @doc """ Renders a modal. ## Examples <.modal id="confirm-modal"> This is a modal. JS commands may be passed to the `:on_cancel` to configure the closing/cancel event, for example: <.modal id="confirm" on_cancel={JS.navigate(~p"/posts")}> This is another modal. """ attr :id, :string, required: true attr :show, :boolean, default: false attr :on_cancel, JS, default: %JS{} slot :inner_block, required: true def modal(assigns) do ~H""" """ end def input(%{type: "select"} = assigns) do ~H"""
<.label for={@id}><%= @label %> <.error :for={msg <- @errors}><%= msg %>
""" end def input(%{type: "textarea"} = assigns) do ~H"""
<.label for={@id}><%= @label %> <.error :for={msg <- @errors}><%= msg %>
""" end # All other inputs text, datetime-local, url, password, etc. are handled here... def input(assigns) do ~H"""
<.label for={@id}><%= @label %> <.error :for={msg <- @errors}><%= msg %>
""" end @doc """ Renders a label. """ attr :for, :string, default: nil slot :inner_block, required: true def label(assigns) do ~H""" """ end @doc """ Generates a generic error message. """ slot :inner_block, required: true def error(assigns) do ~H"""

<.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" /> <%= render_slot(@inner_block) %>

""" end @doc """ Renders a header with title. """ attr :class, :string, default: nil slot :inner_block, required: true slot :subtitle slot :actions def header(assigns) do ~H"""

<%= render_slot(@inner_block) %>

<%= render_slot(@subtitle) %>

<%= render_slot(@actions) %>
""" end @doc ~S""" Renders a table with generic styling. ## Examples <.table id="users" rows={@users}> <:col :let={user} label="id"><%= user.id %> <:col :let={user} label="username"><%= user.username %> """ 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"""
<%= col[:label] %> <%= gettext("Actions") %>
<%= render_slot(col, @row_item.(row)) %>
<%= render_slot(action, @row_item.(row)) %>
""" end @doc """ Renders a data list. ## Examples <.list> <:item title="Title"><%= @post.title %> <:item title="Views"><%= @post.views %> """ slot :item, required: true do attr :title, :string, required: true end def list(assigns) do ~H"""
<%= item.title %>
<%= render_slot(item) %>
""" end @doc """ Renders a back navigation link. ## Examples <.back navigate={~p"/posts"}>Back to posts """ attr :navigate, :any, required: true slot :inner_block, required: true def back(assigns) do ~H"""
<.link navigate={@navigate} class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700" > <.icon name="hero-arrow-left-solid" class="h-3 w-3" /> <%= render_slot(@inner_block) %>
""" 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 your `assets/tailwind.config.js`. ## Examples <.icon name="hero-x-mark-solid" /> <.icon name="hero-arrow-path" class="ml-1 w-3 h-3 animate-spin" /> """ attr :name, :string, required: true attr :class, :string, default: nil def icon(%{name: "hero-" <> _} = assigns) do ~H""" """ end ## JS Commands def show(js \\ %JS{}, selector) do JS.show(js, to: selector, transition: {"transition-all transform 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 transform 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", transition: {"transition-all transform ease-out duration-300", "opacity-0", "opacity-100"} ) |> show("##{id}-container") |> 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", transition: {"transition-all transform ease-in duration-200", "opacity-100", "opacity-0"} ) |> hide("##{id}-container") |> 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(PostlandWeb.Gettext, "errors", msg, msg, count, opts) else Gettext.dgettext(PostlandWeb.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