@ponti-studios/ui 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "private": false,
   "description": "Shared UI component library for Ponti Studios",
   "license": "MIT",

package/src/components/forms/calendar.tsx

@@ -17,7 +17,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         month: "flex flex-col gap-4",
         month_caption: "relative flex h-8 items-center justify-center",
         caption_label: "text-sm font-medium",
-        nav: "absolute inset-x-4 top-4 flex items-center justify-between",
+        nav: "absolute inset-x-4 top-4 z-10 flex items-center justify-between",
         button_previous:
           "inline-flex size-8 p-2 items-center justify-center rounded-full border bg-background text-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
         button_next:

package/src/components/forms/date-field.stories.tsx

@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, screen, userEvent, within } from "storybook/test";
+
+import { DateField } from "./date-field";
+
+const meta = {
+  title: "Forms/DateField",
+  component: DateField,
+  tags: ["autodocs"],
+} satisfies Meta<typeof DateField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function hiddenValue(canvasElement: HTMLElement, name: string): string | null {
+  const input = canvasElement.querySelector(`input[name="${name}"]`) as HTMLInputElement | null;
+  return input?.value ?? null;
+}
+
+async function nextMonth(dialog: HTMLElement) {
+  await userEvent.click(within(dialog).getByRole("button", { name: "Go to the Next Month" }));
+}
+
+// The trigger button's accessible name comes from its <label> (htmlFor), so
+// stories query the button by label and assert the visible date text separately.
+export const WithStringDefaultValue: Story = {
+  args: {
+    name: "startDate",
+    defaultValue: "2020-01-15",
+    label: "Start date",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // The hidden input carries the local "YYYY-MM-DD" value, and the trigger
+    // shows the formatted date.
+    await expect(hiddenValue(canvasElement, "startDate")).toBe("2020-01-15");
+    const trigger = canvas.getByRole("button", { name: "Start date" });
+    await expect(trigger).toHaveTextContent("Jan 15, 2020");
+
+    // The calendar opens on the selected month, not the current one.
+    await userEvent.click(trigger);
+    const dialog = await screen.findByRole("dialog");
+    await expect(within(dialog).getByText("January 2020")).toBeInTheDocument();
+
+    // Real click on the Next chevron navigates the month.
+    await nextMonth(dialog);
+    await expect(within(dialog).getByText("February 2020")).toBeInTheDocument();
+
+    // Picking a day updates the trigger and the hidden input.
+    await userEvent.click(within(dialog).getByText("15"));
+    await expect(canvas.getByRole("button", { name: "Start date" })).toHaveTextContent(
+      "Feb 15, 2020",
+    );
+    await expect(hiddenValue(canvasElement, "startDate")).toBe("2020-02-15");
+  },
+};
+
+export const WithDateDefaultValue: Story = {
+  args: {
+    name: "endDate",
+    defaultValue: new Date(2020, 0, 15),
+    label: "End date",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(hiddenValue(canvasElement, "endDate")).toBe("2020-01-15");
+    await expect(canvas.getByRole("button", { name: "End date" })).toHaveTextContent(
+      "Jan 15, 2020",
+    );
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    name: "startDate",
+    label: "Start date",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(hiddenValue(canvasElement, "startDate")).toBe("");
+    await expect(canvas.getByRole("button", { name: "Start date" })).toHaveTextContent(
+      "Pick a date",
+    );
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    name: "startDate",
+    defaultValue: "2020-01-15",
+    label: "Start date",
+    disabled: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(canvas.getByRole("button", { name: "Start date" })).toBeDisabled();
+    await expect(hiddenValue(canvasElement, "startDate")).toBe("2020-01-15");
+  },
+};
+
+export const WithRangeDefaultValue: Story = {
+  args: {
+    mode: "range",
+    startName: "startDate",
+    endName: "endDate",
+    defaultValue: { from: "2020-01-15", to: "2020-06-30" },
+    label: "Active period",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Both hidden inputs carry local date strings; the trigger shows the range.
+    await expect(hiddenValue(canvasElement, "startDate")).toBe("2020-01-15");
+    await expect(hiddenValue(canvasElement, "endDate")).toBe("2020-06-30");
+    const trigger = canvas.getByRole("button", { name: "Active period" });
+    await expect(trigger).toHaveTextContent("Jan 15, 2020");
+    await expect(trigger).toHaveTextContent("Jun 30, 2020");
+
+    // The range calendar opens on the start month.
+    await userEvent.click(trigger);
+    const dialog = await screen.findByRole("dialog");
+    await expect(within(dialog).getByText("January 2020")).toBeInTheDocument();
+
+    // Real-click the Next chevron, then pick a new from date.
+    await nextMonth(dialog);
+    await expect(within(dialog).getByText("February 2020")).toBeInTheDocument();
+    await userEvent.click(within(dialog).getByText("20"));
+    await expect(canvas.getByRole("button", { name: "Active period" })).toHaveTextContent(
+      "From Feb 20, 2020",
+    );
+    await expect(hiddenValue(canvasElement, "startDate")).toBe("2020-02-20");
+    await expect(hiddenValue(canvasElement, "endDate")).toBe("");
+
+    // Picking an end date fills the second hidden input.
+    await userEvent.click(within(dialog).getByText("25"));
+    await expect(canvas.getByRole("button", { name: "Active period" })).toHaveTextContent(
+      "Feb 20, 2020 – Feb 25, 2020",
+    );
+    await expect(hiddenValue(canvasElement, "startDate")).toBe("2020-02-20");
+    await expect(hiddenValue(canvasElement, "endDate")).toBe("2020-02-25");
+  },
+};
+
+export const EmptyRange: Story = {
+  args: {
+    mode: "range",
+    startName: "startDate",
+    endName: "endDate",
+    label: "Active period",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(hiddenValue(canvasElement, "startDate")).toBe("");
+    await expect(hiddenValue(canvasElement, "endDate")).toBe("");
+    await expect(canvas.getByRole("button", { name: "Active period" })).toHaveTextContent(
+      "Pick a date range",
+    );
+  },
+};

package/src/components/forms/date-field.tsx

@@ -0,0 +1,174 @@
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { useId, useState } from "react";
+
+import { Popover, PopoverContent, PopoverTrigger } from "../overlays/popover";
+import { Button } from "../primitives/button";
+import { Calendar } from "./calendar";
+import { formatDateInput, parseDateInput } from "./date-utils";
+import { DatePicker, type DatePickerProps } from "./date-picker";
+
+export interface DateRangeValue {
+  from?: Date | string | null;
+  to?: Date | string | null;
+}
+
+interface DateFieldCommonProps {
+  id?: string;
+  label?: string;
+  showLabel?: boolean;
+  placeholder?: string;
+  dateFormat?: string;
+  disabled?: boolean;
+  containerClassName?: string;
+  popoverAlign?: DatePickerProps["popoverAlign"];
+  variant?: DatePickerProps["variant"];
+}
+
+export interface SingleDateFieldProps extends DateFieldCommonProps {
+  mode?: "single";
+  name: string;
+  defaultValue?: Date | string | null;
+}
+
+export interface RangeDateFieldProps extends DateFieldCommonProps {
+  mode: "range";
+  startName: string;
+  endName: string;
+  defaultValue?: DateRangeValue;
+}
+
+export type DateFieldProps = SingleDateFieldProps | RangeDateFieldProps;
+
+const TRIGGER_CLASSES =
+  "border-border bg-background text-foreground placeholder:text-muted-foreground min-h-10 max-h-10 w-full justify-start rounded-l-none rounded-r-xl border-l-0 text-left font-normal";
+
+function SingleDateField({
+  name,
+  defaultValue,
+  id,
+  label,
+  showLabel,
+  placeholder,
+  dateFormat,
+  disabled,
+  containerClassName,
+  popoverAlign,
+  variant,
+}: SingleDateFieldProps) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const [value, setValue] = useState<Date | undefined>(() => parseDateInput(defaultValue));
+
+  return (
+    <div>
+      <DatePicker
+        id={inputId}
+        label={label}
+        showLabel={showLabel}
+        placeholder={placeholder}
+        dateFormat={dateFormat}
+        disabled={disabled}
+        containerClassName={containerClassName}
+        popoverAlign={popoverAlign}
+        variant={variant}
+        value={value}
+        onSelect={setValue}
+      />
+      <input type="hidden" name={name} value={value ? formatDateInput(value) : ""} />
+    </div>
+  );
+}
+
+function RangeDateField({
+  startName,
+  endName,
+  defaultValue,
+  id,
+  label,
+  showLabel = true,
+  placeholder = "Pick a date range",
+  dateFormat = "MMM d, yyyy",
+  disabled = false,
+  containerClassName = "flex-1 min-w-0",
+  popoverAlign = "start",
+  variant = "outline",
+}: RangeDateFieldProps) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const [range, setRange] = useState<{ from?: Date; to?: Date }>(() => ({
+    from: parseDateInput(defaultValue?.from),
+    to: parseDateInput(defaultValue?.to),
+  }));
+
+  const fromLabel = range.from ? format(range.from, dateFormat) : null;
+  const toLabel = range.to ? format(range.to, dateFormat) : null;
+  const triggerLabel = fromLabel
+    ? toLabel
+      ? `${fromLabel} – ${toLabel}`
+      : `From ${fromLabel}`
+    : toLabel
+      ? `Until ${toLabel}`
+      : placeholder;
+
+  return (
+    <div className={containerClassName}>
+      {showLabel && label ? (
+        <label htmlFor={inputId} className="text-foreground mb-2 block text-sm font-medium">
+          {label}
+        </label>
+      ) : null}
+      <Popover>
+        <div className="flex w-full items-center">
+          <div className="border-border bg-background text-foreground flex size-10 shrink-0 items-center justify-center rounded-l-xl border">
+            <CalendarIcon className="size-4" aria-hidden />
+          </div>
+          <PopoverTrigger asChild>
+            <Button id={inputId} variant={variant} disabled={disabled} className={TRIGGER_CLASSES}>
+              {triggerLabel}
+            </Button>
+          </PopoverTrigger>
+        </div>
+        <PopoverContent
+          className="bg-popover w-auto p-0"
+          align={popoverAlign}
+          aria-label={label ?? "Choose a date range"}
+        >
+          <Calendar
+            mode="range"
+            selected={range.from ? { from: range.from, to: range.to } : undefined}
+            defaultMonth={range.from ?? range.to}
+            resetOnSelect
+            onSelect={(next) => setRange({ from: next?.from, to: next?.to })}
+          />
+        </PopoverContent>
+      </Popover>
+      <input type="hidden" name={startName} value={range.from ? formatDateInput(range.from) : ""} />
+      <input type="hidden" name={endName} value={range.to ? formatDateInput(range.to) : ""} />
+    </div>
+  );
+}
+
+/**
+ * DateField — calendar picker backed by hidden inputs that submit "YYYY-MM-DD"
+ * local date strings, so forms never receive UTC-shifted dates. Supports both
+ * a single date (`name`) and a range (`startName` + `endName`).
+ *
+ * @example
+ * <DateField name="startDate" defaultValue="2020-01-15" label="Start date" />
+ * <DateField
+ *   mode="range"
+ *   startName="startDate"
+ *   endName="endDate"
+ *   defaultValue={{ from: "2020-01-15", to: "2020-06-30" }}
+ *   label="Active period"
+ * />
+ */
+function DateField(props: DateFieldProps) {
+  if (props.mode === "range") {
+    return <RangeDateField {...props} />;
+  }
+  return <SingleDateField {...props} />;
+}
+
+export { DateField };

package/src/components/forms/date-picker.tsx

@@ -55,8 +55,12 @@ export function DatePicker({
             </Button>
           </PopoverTrigger>
         </div>
-        <PopoverContent className="bg-popover w-auto p-0" align={popoverAlign}>
-          <Calendar mode="single" selected={value} onSelect={onSelect} />
+        <PopoverContent
+          className="bg-popover w-auto p-0"
+          align={popoverAlign}
+          aria-label={label ?? "Choose a date"}
+        >
+          <Calendar mode="single" selected={value} defaultMonth={value} onSelect={onSelect} />
         </PopoverContent>
       </Popover>
     </div>

package/src/components/forms/date-utils.ts

@@ -0,0 +1,32 @@
+/**
+ * Parse a date-only string ("YYYY-MM-DD") as a local calendar day instead of
+ * UTC midnight, so negative-UTC-offset timezones don't render the previous day.
+ * Accepts a `Date` (returned as-is when valid) and returns `undefined` for
+ * null/undefined/invalid input.
+ */
+export function parseDateInput(value: Date | string | null | undefined): Date | undefined {
+  if (!value) return undefined;
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? undefined : value;
+  const [year, month, day] = value.split("-").map(Number);
+  if (!year || !month || !day) return undefined;
+  const date = new Date(year, month - 1, day);
+  return Number.isNaN(date.getTime()) ? undefined : date;
+}
+
+/**
+ * Serialize a date to its "YYYY-MM-DD" form using local components, so the
+ * value round-trips without a UTC shift. Returns "" for invalid input.
+ */
+export function formatDateInput(value: Date | string | null | undefined): string {
+  const date = parseDateInput(value);
+  if (!date) return "";
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+/** Today's date as a "YYYY-MM-DD" local string. */
+export function todayDateInput(): string {
+  return formatDateInput(new Date());
+}

package/src/components/forms/index.ts

@@ -2,6 +2,9 @@ export { FilterSelect } from "../filters/filter-select";
 export type { FilterSelectOption, FilterSelectProps } from "../filters/filter-select";
 export { Calendar } from "./calendar";
 export type { CalendarProps } from "./calendar";
+export { DateField } from "./date-field";
+export type { DateFieldProps } from "./date-field";
+export { formatDateInput, parseDateInput, todayDateInput } from "./date-utils";
 export { DateMonthSelect, getCurrentMonthYear } from "./date-month-select";
 export type { DateMonthSelectProps } from "./date-month-select";
 export { DatePicker } from "./date-picker";