feat: add datepicker

Author: nifalconi

demo/lib/demo_web/live/odyssey_showcase_live.ex

@@ -15,7 +15,9 @@ defmodule DemoWeb.OdysseyShowcaseLive do
       "time_unit" => "Minutes",
       "view_mode" => "List",
       "discount" => "",
-      "percentage" => ""
+      "percentage" => "",
+      "start_date" => "",
+      "expiration_date" => ""
     }
 
     socket =
@@ -423,6 +425,28 @@ defmodule DemoWeb.OdysseyShowcaseLive do
                     percentage: <strong>{@form_data["percentage"] || ""}</strong>
                   </p>
                 </div>
+
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-2">
+                    Date Pickers (start and expiration)
+                  </label>
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <.odyssey_date_picker
+                      field={@form[:start_date]}
+                      label="Start date"
+                      required
+                    />
+                    <.odyssey_date_picker
+                      field={@form[:expiration_date]}
+                      label="Expiration date"
+                      required
+                    />
+                  </div>
+                  <p class="text-sm text-gray-500 mt-1">
+                    Start date: <strong>{@form_data["start_date"] || ""}</strong>,
+                    expiration date: <strong>{@form_data["expiration_date"] || ""}</strong>
+                  </p>
+                </div>
               </.form>
             </div>
 

lib/peek_app_sdk/ui/odyssey.ex

@@ -12,4 +12,5 @@ defmodule PeekAppSDK.UI.Odyssey do
   defdelegate odyssey_tabs(assigns), to: PeekAppSDK.UI.Odyssey.Tabs
   defdelegate odyssey_toggle_button(assigns), to: PeekAppSDK.UI.Odyssey.ToggleButton
   defdelegate odyssey_prefix_input(assigns), to: PeekAppSDK.UI.Odyssey.PrefixInput
+  defdelegate odyssey_date_picker(assigns), to: PeekAppSDK.UI.Odyssey.DatePicker
 end

lib/peek_app_sdk/ui/odyssey/date_picker.ex

@@ -0,0 +1,97 @@
+defmodule PeekAppSDK.UI.Odyssey.DatePicker do
+  @moduledoc """
+  A date picker input component for selecting dates.
+
+  Provides both standalone usage and convenient integration with
+  `Phoenix.HTML.Form` via the `:field` attribute.
+  """
+
+  use Phoenix.Component
+
+  import PeekAppSDK.UI.Odyssey.Icon
+
+  @doc """
+  Renders a date input with a calendar icon.
+
+  ## Examples
+
+      <.odyssey_date_picker field={@form[:expiration_date]} label="Expiration Date" />
+      <.odyssey_date_picker field={@form[:start_date]} label="Start Date" required />
+  """
+  attr :id, :any, default: nil
+  attr :name, :any
+  attr :label, :string, default: nil
+  attr :value, :any
+  attr :errors, :list, default: []
+  attr :class, :string, default: nil, doc: "additional classes for the input"
+
+  attr :field, Phoenix.HTML.FormField,
+    doc: "a form field struct retrieved from the form, for example: @form[:expiration_date]"
+
+  attr :rest, :global, include: ~w(autocomplete disabled form max min readonly required step)
+
+  def odyssey_date_picker(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
+    errors = if Phoenix.Component.used_input?(field), do: field.errors, else: []
+    simple_errors = Enum.map(errors, fn {msg, _opts} -> msg end)
+
+    assigns
+    |> assign(field: nil, id: assigns.id || field.id)
+    |> assign_new(:errors, fn -> simple_errors end)
+    |> assign_new(:name, fn -> field.name end)
+    |> assign_new(:value, fn -> field.value end)
+    |> odyssey_date_picker()
+  end
+
+  def odyssey_date_picker(assigns) do
+    ~H"""
+    <fieldset class="fieldset mb-2">
+      <span :if={@label} class="label !mb-0 block">{@label}</span>
+      <div class="relative inline-block w-[200px]">
+        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none z-10">
+          <.odyssey_icon name="hero-calendar-days" class="size-5 text-neutrals-300" />
+        </div>
+        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none z-10">
+          <.odyssey_icon name="hero-chevron-down" class="size-5 text-interaction-300" />
+        </div>
+        <input
+          type="date"
+          name={@name}
+          id={@id}
+          value={Phoenix.HTML.Form.normalize_value("date", @value)}
+          class={[
+            "input pl-11 pr-10 w-[200px] cursor-pointer !outline-none",
+            "before:absolute before:left-11 before:top-1/2 before:-translate-y-1/2",
+            "before:text-neutrals-300 before:pointer-events-none",
+            "[&::-webkit-calendar-picker-indicator]:opacity-0",
+            "[&::-webkit-calendar-picker-indicator]:absolute",
+            "[&::-webkit-calendar-picker-indicator]:inset-0",
+            "[&::-webkit-calendar-picker-indicator]:w-full",
+            "[&::-webkit-calendar-picker-indicator]:h-full",
+            "[&::-webkit-calendar-picker-indicator]:cursor-pointer",
+            "[&::-webkit-datetime-edit]:text-neutrals-300",
+            "[&::-webkit-datetime-edit]:relative",
+            "[&::-webkit-datetime-edit]:left-[32px]",
+            "[&:not(:focus):invalid::-webkit-datetime-edit]:opacity-0",
+            "[&:not(:focus):invalid]:before:block",
+            "[&:focus]:before:hidden",
+            "[&:valid]:before:hidden",
+            @errors != [] && "input-error",
+            @class
+          ]}
+          {@rest}
+        />
+      </div>
+      <.error :for={msg <- @errors}>{msg}</.error>
+    </fieldset>
+    """
+  end
+
+  defp error(assigns) do
+    ~H"""
+    <p class="mt-1.5 flex gap-2 items-center text-sm text-error">
+      <.odyssey_icon name="hero-exclamation-circle" class="size-5" />
+      {render_slot(@inner_block)}
+    </p>
+    """
+  end
+end

test/peek_app_sdk/ui/odyssey/date_picker_test.exs

@@ -0,0 +1,63 @@
+defmodule PeekAppSDK.UI.Odyssey.DatePickerTest do
+  use ExUnit.Case, async: true
+
+  import Phoenix.Component
+  import Phoenix.LiveViewTest
+
+  alias PeekAppSDK.UI.Odyssey
+
+  describe "odyssey_date_picker/1" do
+    test "renders standalone date picker with label and icons" do
+      html =
+        render_component(&Odyssey.odyssey_date_picker/1, %{
+          id: "start_date",
+          name: "start_date",
+          value: ~D[2025-01-01],
+          label: "Start date"
+        })
+
+      assert html =~ ~s(<fieldset class="fieldset mb-2">)
+      assert html =~ "Start date"
+      assert html =~ ~s(type="date")
+      assert html =~ ~s(name="start_date")
+      assert html =~ ~s(id="start_date")
+      assert html =~ "2025-01-01"
+      assert html =~ "hero-calendar-days"
+      assert html =~ "hero-chevron-down"
+    end
+
+    test "applies error class and renders error messages" do
+      html =
+        render_component(&Odyssey.odyssey_date_picker/1, %{
+          id: "expiration_date",
+          name: "expiration_date",
+          value: "",
+          label: "Expiration date",
+          errors: ["is required"]
+        })
+
+      assert html =~ "input-error"
+      assert html =~ ~s(class="mt-1.5 flex gap-2 items-center text-sm text-error")
+      assert html =~ "hero-exclamation-circle"
+      assert html =~ "is required"
+    end
+
+    test "integrates with Phoenix.HTML.Form field" do
+      form_data = %{"start_date" => ~D[2025-02-02]}
+      form = to_form(form_data, as: "form")
+
+      html =
+        render_component(&Odyssey.odyssey_date_picker/1, %{
+          field: form[:start_date],
+          label: "Start date",
+          required: true
+        })
+
+      assert html =~ ~s(name="form[start_date]")
+      assert html =~ ~s(id="form_start_date")
+      assert html =~ "2025-02-02"
+      assert html =~ "Start date"
+    end
+  end
+end
+