Initial Commit

2026-02-12 17:10:03 -06:00
commit 6992a06105
135 changed files with 18014 additions and 0 deletions
@@ -0,0 +1,173 @@
+defmodule RiverConnectWeb.Components.UI.Alert do
+  @moduledoc """
+  Implementation of alert component for displaying important messages to users.
+
+  Alerts are used to communicate status, warnings, or contextual feedback to users.
+  They can be configured with different variants to indicate severity and typically
+  consist of a title and a description.
+
+  ## Examples:
+
+      <.alert>
+        <.alert_title>Note</.alert_title>
+        <.alert_description>This is a standard informational alert.</.alert_description>
+      </.alert>
+
+      <.alert variant="destructive">
+        <.alert_title>Error</.alert_title>
+        <.alert_description>
+          There was a problem with your request. Please try again.
+        </.alert_description>
+      </.alert>
+
+      <.alert>
+        <span class="mr-3">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24">
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M9 12l2 2l4-4"></path>
+          </svg>
+        </span>
+        <.alert_title>Success</.alert_title>
+        <.alert_description>Your changes have been saved successfully.</.alert_description>
+      </.alert>
+  """
+  use RiverConnectWeb.Components.UI, :component
+
+  @doc """
+  Renders an alert container.
+
+  The alert component displays important messages or feedback to users with styling
+  appropriate for the context.
+
+  ## Options
+
+  * `:variant` - The visual style of the alert. Available variants:
+    * `"default"` - Standard alert styling (default)
+    * `"destructive"` - Red-tinted styling for errors and warnings
+  * `:class` - Additional CSS classes to apply to the alert container.
+
+  ## Examples
+
+      <.alert>
+        <.alert_title>Information</.alert_title>
+        <.alert_description>This is an informational message.</.alert_description>
+      </.alert>
+
+      <.alert variant="destructive" class="mt-4">
+        <.alert_title>Warning</.alert_title>
+        <.alert_description>This action cannot be undone.</.alert_description>
+      </.alert>
+  """
+  attr :variant, :string, default: "default", values: ~w(default destructive)
+  attr :class, :string, default: nil
+  slot :inner_block, required: true
+  attr :rest, :global, default: %{}
+
+  def alert(assigns) do
+    assigns = assign(assigns, :variant_class, variant(assigns))
+
+    ~H"""
+    <div
+      role="alert"
+      data-part="root"
+      class={
+        classes([
+          "relative w-full rounded-lg border p-4 [&>span~*]:pl-7 [&>span+div]:translate-y-[-3px] [&>span]:absolute [&>span]:left-4 [&>span]:top-4",
+          @variant_class,
+          @class
+        ])
+      }
+      {@rest}
+    >
+      {render_slot(@inner_block)}
+    </div>
+    """
+  end
+
+  @doc """
+  Renders an alert title.
+
+  The title component is used to provide a concise heading for the alert message.
+
+  ## Options
+
+  * `:class` - Additional CSS classes to apply to the title.
+
+  ## Examples
+
+      <.alert_title>Success</.alert_title>
+      <.alert_title class="text-primary">Important Notice</.alert_title>
+  """
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(disabled form name value)
+  slot :inner_block, required: true
+
+  def alert_title(assigns) do
+    ~H"""
+    <h5
+      class={
+        classes([
+          "mb-1 font-medium leading-none tracking-tight",
+          @class
+        ])
+      }
+      {@rest}
+    >
+      {render_slot(@inner_block)}
+    </h5>
+    """
+  end
+
+  @doc """
+  Renders an alert description.
+
+  The description provides more detailed information about the alert message.
+
+  ## Options
+
+  * `:class` - Additional CSS classes to apply to the description.
+
+  ## Examples
+
+      <.alert_description>Your account has been updated successfully.</.alert_description>
+      <.alert_description class="text-gray-600">
+        Please review the changes before continuing.
+      </.alert_description>
+  """
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(disabled form name value)
+  slot :inner_block, required: true
+
+  def alert_description(assigns) do
+    ~H"""
+    <div
+      class={
+        classes([
+          "text-sm [&_p]:leading-relaxed",
+          @class
+        ])
+      }
+      {@rest}
+    >
+      {render_slot(@inner_block)}
+    </div>
+    """
+  end
+
+  @variants %{
+    variant: %{
+      "default" => "bg-background text-foreground",
+      "destructive" =>
+        "bg-background border-destructive/50 text-destructive dark:border-destructive [&>span]:text-destructive"
+    }
+  }
+
+  @default_variants %{
+    variant: "default"
+  }
+
+  defp variant(variants) do
+    variants = Map.merge(@default_variants, variants)
+
+    Enum.map_join(variants, " ", fn {key, value} -> @variants[key][value] end)
+  end
+end