From 4e65dbc4c24ec663f95707e63d47147416fdad22 Mon Sep 17 00:00:00 2001 From: Meag Harty <149533950+meagharty@users.noreply.github.com> Date: Wed, 5 Jun 2024 13:36:01 -0400 Subject: [PATCH 01/25] fix: commit CoreComponents from a phoenix 7 new app --- lib/arrow_web/components/core_components.ex | 676 ++++++++++++++++++++ 1 file changed, 676 insertions(+) create mode 100644 lib/arrow_web/components/core_components.ex diff --git a/lib/arrow_web/components/core_components.ex b/lib/arrow_web/components/core_components.ex new file mode 100644 index 00000000..bebd1d9c --- /dev/null +++ b/lib/arrow_web/components/core_components.ex @@ -0,0 +1,676 @@ +defmodule ArrowWeb.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 + + alias Phoenix.LiveView.JS + import ArrowWeb.Gettext + + @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 + + @doc """ + Renders flash notices. + + ## Examples + + <.flash kind={:info} flash={@flash} /> + <.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back! + """ + 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""" ++ <.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-4 w-4" /> + <.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" /> + <%= @title %> +
+<%= msg %>
+ +