@ponti-studios/ui 2.0.1 → 3.0.0

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

@@ -1,188 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, userEvent } from "storybook/test";
-import { useState } from "react";
-
-import { DatePicker } from "./date-picker";
-
-const meta = {
-  title: "Forms/DatePicker",
-  component: DatePicker,
-  tags: ["autodocs"],
-} satisfies Meta<typeof DatePicker>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-function dateValue(canvasElement: HTMLElement, name: string): string {
-  const input = canvasElement.querySelector<HTMLInputElement>(`input[name="${name}"]`);
-  return input?.value ?? "";
-}
-
-// The native date input owns the picker UI, so stories assert on the input's
-// "YYYY-MM-DD" value — the same string a form would submit.
-export const Default: Story = {
-  args: {
-    name: "startDate",
-    defaultValue: "2020-01-15",
-    label: "Start date",
-  },
-  play: async ({ canvasElement }) => {
-    const input = canvasElement.querySelector<HTMLInputElement>('input[name="startDate"]');
-    await expect(input?.value).toBe("2020-01-15");
-  },
-};
-
-export const WithDateObjectDefault: Story = {
-  args: {
-    name: "endDate",
-    defaultValue: new Date(2020, 0, 15),
-    label: "End date",
-  },
-  play: async ({ canvasElement }) => {
-    const input = canvasElement.querySelector<HTMLInputElement>('input[name="endDate"]');
-    await expect(input?.value).toBe("2020-01-15");
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [value, setValue] = useState<string | null>("2026-08-20");
-    return (
-      <div className="flex flex-col gap-2">
-        <DatePicker
-          mode="single"
-          label="Due date"
-          value={value}
-          onValueChange={setValue}
-          helpText="Controlled — pick a new date"
-        />
-        <p className="text-sm">value: {value ?? "(none)"}</p>
-      </div>
-    );
-  },
-  play: async ({ canvasElement }) => {
-    await expect(canvasElement.textContent).toContain("2026-08-20");
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    name: "startDate",
-    defaultValue: "2020-01-15",
-    label: "Locked date",
-    disabled: true,
-  },
-  play: async ({ canvasElement }) => {
-    const input = canvasElement.querySelector<HTMLInputElement>('input[name="startDate"]');
-    await expect(input?.disabled).toBe(true);
-    await expect(input?.value).toBe("2020-01-15");
-  },
-};
-
-export const WithHelpText: Story = {
-  args: {
-    name: "startDate",
-    label: "Start date",
-    helpText: "Format is YYYY-MM-DD.",
-  },
-};
-
-export const WithError: Story = {
-  args: {
-    name: "startDate",
-    label: "Start date",
-    error: "A start date is required.",
-  },
-  play: async ({ canvasElement }) => {
-    const input = canvasElement.querySelector<HTMLInputElement>('input[name="startDate"]');
-    await expect(input?.getAttribute("aria-invalid")).toBe("true");
-    await expect(canvasElement.textContent).toContain("A start date is required.");
-  },
-};
-
-export const Range: Story = {
-  args: {
-    mode: "range",
-    startName: "startDate",
-    endName: "endDate",
-    defaultValue: { from: "2020-01-15", to: "2020-06-30" },
-    label: "Active period",
-  },
-  play: async ({ canvasElement }) => {
-    await expect(dateValue(canvasElement, "startDate")).toBe("2020-01-15");
-    await expect(dateValue(canvasElement, "endDate")).toBe("2020-06-30");
-  },
-};
-
-export const RangeEmpty: Story = {
-  args: {
-    mode: "range",
-    startName: "startDate",
-    endName: "endDate",
-    label: "Active period",
-  },
-  play: async ({ canvasElement }) => {
-    await expect(dateValue(canvasElement, "startDate")).toBe("");
-    await expect(dateValue(canvasElement, "endDate")).toBe("");
-  },
-};
-
-export const RangeControlled: Story = {
-  render: () => {
-    const [range, setRange] = useState<{ from: string | null; to: string | null }>({
-      from: "2026-08-01",
-      to: "2026-08-15",
-    });
-    return (
-      <div className="flex flex-col gap-2">
-        <DatePicker
-          mode="range"
-          label="Stay dates"
-          startName="stayStart"
-          endName="stayEnd"
-          value={range}
-          onValueChange={setRange}
-          fromLabel="Check-in"
-          toLabel="Check-out"
-        />
-        <p className="text-sm">
-          from: {range.from ?? "(none)"} · to: {range.to ?? "(none)"}
-        </p>
-      </div>
-    );
-  },
-  play: async ({ canvasElement }) => {
-    await expect(canvasElement.textContent).toContain("from: 2026-08-01");
-    await expect(canvasElement.textContent).toContain("to: 2026-08-15");
-
-    const end = canvasElement.querySelector<HTMLInputElement>('input[name="stayEnd"]');
-    await userEvent.clear(end!);
-    await userEvent.type(end!, "0002-08-01");
-    await expect(end?.value).toBe("0002-08-01");
-    await expect(canvasElement.textContent).toContain("to: 0002-08-01");
-  },
-};
-
-// Two independent fields cross-wired via min/max: the end field can't go
-// before the start, and the start field can't go after the end.
-export const RangeMinMax: Story = {
-  args: {
-    mode: "range",
-    startName: "startDate",
-    endName: "endDate",
-    min: "2026-01-01",
-    max: "2026-12-31",
-    label: "Active period",
-  },
-  play: async ({ canvasElement }) => {
-    const start = canvasElement.querySelector<HTMLInputElement>('input[name="startDate"]');
-    const end = canvasElement.querySelector<HTMLInputElement>('input[name="endDate"]');
-    await expect(start?.min).toBe("2026-01-01");
-    await expect(end?.max).toBe("2026-12-31");
-
-    await userEvent.type(start!, "2026-03-15");
-    await expect(start?.value).toBe("2026-03-15");
-    // End field's floor is now the chosen start date.
-    await expect(end?.min).toBe("2026-03-15");
-  },
-};

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

@@ -1,303 +0,0 @@
-import { CalendarIcon } from "lucide-react";
-import { useId, useRef, useState } from "react";
-import type { ChangeEvent, RefObject } from "react";
-
-import { cn } from "../../lib/utils";
-import { formatDateInput } from "./date-utils";
-
-export interface DateRangeValue {
-  from?: Date | string | null;
-  to?: Date | string | null;
-}
-
-interface DatePickerBaseProps {
-  label?: string;
-  helpText?: string;
-  error?: string;
-  id?: string;
-  disabled?: boolean;
-  required?: boolean;
-  className?: string;
-  /** Earliest selectable date, "YYYY-MM-DD". */
-  min?: string;
-  /** Latest selectable date, "YYYY-MM-DD". */
-  max?: string;
-}
-
-export interface SingleDatePickerProps extends DatePickerBaseProps {
-  mode?: "single";
-  /** Form field name — the native input submits "YYYY-MM-DD". */
-  name?: string;
-  value?: Date | string | null;
-  defaultValue?: Date | string | null;
-  onValueChange?: (value: string | null) => void;
-}
-
-export interface RangeDatePickerProps extends DatePickerBaseProps {
-  mode: "range";
-  /** Form field name for the range start — submits "YYYY-MM-DD". */
-  startName?: string;
-  /** Form field name for the range end — submits "YYYY-MM-DD". */
-  endName?: string;
-  value?: DateRangeValue;
-  defaultValue?: DateRangeValue;
-  onValueChange?: (value: { from: string | null; to: string | null }) => void;
-  fromLabel?: string;
-  toLabel?: string;
-}
-
-export type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps;
-
-const LABEL_CLASS = "text-foreground text-sm font-medium";
-const REQUIRED_CLASS = "after:text-destructive-text after:ml-0.5 after:content-['*']";
-const SUBLABEL_CLASS = "text-muted-foreground text-xs font-medium";
-const FIELD_CLASS =
-  "bg-background text-foreground border-input h-10 w-full min-w-0 appearance-none border px-3 py-1 text-sm transition-colors " +
-  "[&::-webkit-calendar-picker-indicator]:appearance-none [&::-webkit-calendar-picker-indicator]:opacity-0 " +
-  "placeholder:text-muted-foreground " +
-  "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none " +
-  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 " +
-  "aria-invalid:ring-destructive/20 aria-invalid:border-destructive";
-
-/**
- * DatePickerIcon — the brand calendar glyph. The browser's own picker
- * indicator is hidden, so this is the visible affordance: clicking it calls
- * the input's `showPicker()` (falling back to focus, which opens the native
- * picker on iOS). It is not a tab stop because the input itself is the
- * focusable control and opens the picker on focus.
- */
-function DatePickerIcon({
-  inputRef,
-  disabled,
-  ariaLabel,
-}: {
-  inputRef: RefObject<HTMLInputElement | null>;
-  disabled?: boolean;
-  ariaLabel: string;
-}) {
-  return (
-    <button
-      type="button"
-      tabIndex={-1}
-      aria-label={ariaLabel}
-      disabled={disabled}
-      onClick={() => {
-        const input = inputRef.current;
-        if (!input) return;
-        try {
-          input.showPicker?.();
-        } catch {
-          input.focus();
-        }
-      }}
-      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 />
-    </button>
-  );
-}
-
-function SingleDatePicker({
-  id,
-  name,
-  label,
-  helpText,
-  error,
-  className,
-  disabled,
-  required,
-  min,
-  max,
-  value: controlledValue,
-  defaultValue,
-  onValueChange,
-}: SingleDatePickerProps) {
-  const generatedId = useId();
-  const inputId = id ?? generatedId;
-  const descriptionId = `${inputId}-description`;
-  const errorId = `${inputId}-error`;
-  const inputRef = useRef<HTMLInputElement>(null);
-  const isControlled = controlledValue !== undefined;
-  const [internalValue, setInternalValue] = useState<string>(() =>
-    formatDateInput(isControlled ? controlledValue : defaultValue),
-  );
-  const inputValue = (isControlled ? formatDateInput(controlledValue) : internalValue) || "";
-
-  function handleChange(event: ChangeEvent<HTMLInputElement>) {
-    const next = event.target.value || null;
-    if (!isControlled) setInternalValue(next ?? "");
-    onValueChange?.(next);
-  }
-
-  return (
-    <div className={cn("flex flex-col gap-1.5", className)}>
-      {label ? (
-        <label htmlFor={inputId} className={cn(LABEL_CLASS, required && REQUIRED_CLASS)}>
-          {label}
-        </label>
-      ) : null}
-      <div className="flex w-full items-center">
-        <DatePickerIcon inputRef={inputRef} disabled={disabled} ariaLabel="Open date picker" />
-        <input
-          ref={inputRef}
-          id={inputId}
-          name={name}
-          type="date"
-          value={isControlled ? inputValue : undefined}
-          defaultValue={isControlled ? undefined : inputValue}
-          onChange={handleChange}
-          disabled={disabled}
-          required={required}
-          min={min}
-          max={max}
-          aria-invalid={error ? true : undefined}
-          aria-describedby={error ? errorId : helpText ? descriptionId : undefined}
-          className={cn(FIELD_CLASS, "rounded-l-none rounded-r-xl border-l-0")}
-        />
-      </div>
-      {error ? (
-        <p id={errorId} role="alert" className="text-destructive-text text-sm">
-          {error}
-        </p>
-      ) : helpText ? (
-        <p id={descriptionId} className="text-muted-foreground text-sm">
-          {helpText}
-        </p>
-      ) : null}
-    </div>
-  );
-}
-
-function RangeDatePicker({
-  id,
-  label,
-  helpText,
-  error,
-  className,
-  disabled,
-  required,
-  min,
-  max,
-  startName,
-  endName,
-  value: controlledValue,
-  defaultValue,
-  onValueChange,
-  fromLabel = "From",
-  toLabel = "To",
-}: RangeDatePickerProps) {
-  const generatedId = useId();
-  const startId = id ?? generatedId;
-  const endId = `${startId}-to`;
-  const descriptionId = `${startId}-description`;
-  const errorId = `${startId}-error`;
-  const startRef = useRef<HTMLInputElement>(null);
-  const endRef = useRef<HTMLInputElement>(null);
-  const isControlled = controlledValue !== undefined;
-  const [internal, setInternal] = useState<{ from: string; to: string }>(() => {
-    const initial = (isControlled ? controlledValue : defaultValue) as DateRangeValue | undefined;
-    return { from: formatDateInput(initial?.from), to: formatDateInput(initial?.to) };
-  });
-  const from = (isControlled ? formatDateInput(controlledValue?.from) : internal.from) || "";
-  const to = (isControlled ? formatDateInput(controlledValue?.to) : internal.to) || "";
-
-  function handleChange(which: "from" | "to") {
-    return (event: ChangeEvent<HTMLInputElement>) => {
-      const nextValue = event.target.value || null;
-      const next = which === "from" ? { from: nextValue, to } : { from, to: nextValue };
-      if (!isControlled) setInternal({ from: next.from ?? "", to: next.to ?? "" });
-      onValueChange?.({ from: next.from, to: next.to });
-    };
-  }
-
-  return (
-    <div className={cn("flex flex-col gap-1.5", className)}>
-      {label ? <span className={cn(LABEL_CLASS, required && REQUIRED_CLASS)}>{label}</span> : null}
-      <div className="grid gap-3 sm:grid-cols-2">
-        <div className="flex min-w-0 flex-col gap-1">
-          <label htmlFor={startId} className={SUBLABEL_CLASS}>
-            {fromLabel}
-          </label>
-          <div className="flex w-full items-center">
-            <DatePickerIcon inputRef={startRef} disabled={disabled} ariaLabel={fromLabel} />
-            <input
-              ref={startRef}
-              id={startId}
-              name={startName}
-              type="date"
-              value={isControlled ? from : undefined}
-              defaultValue={isControlled ? undefined : from}
-              onChange={handleChange("from")}
-              disabled={disabled}
-              required={required}
-              min={min}
-              max={to || max || undefined}
-              aria-invalid={error ? true : undefined}
-              aria-describedby={error ? errorId : helpText ? descriptionId : undefined}
-              className={cn(FIELD_CLASS, "rounded-l-none rounded-r-xl border-l-0")}
-            />
-          </div>
-        </div>
-        <div className="flex min-w-0 flex-col gap-1">
-          <label htmlFor={endId} className={SUBLABEL_CLASS}>
-            {toLabel}
-          </label>
-          <div className="flex w-full items-center">
-            <DatePickerIcon inputRef={endRef} disabled={disabled} ariaLabel={toLabel} />
-            <input
-              ref={endRef}
-              id={endId}
-              name={endName}
-              type="date"
-              value={isControlled ? to : undefined}
-              defaultValue={isControlled ? undefined : to}
-              onChange={handleChange("to")}
-              disabled={disabled}
-              required={required}
-              min={from || min || undefined}
-              max={max}
-              aria-invalid={error ? true : undefined}
-              aria-describedby={error ? errorId : helpText ? descriptionId : undefined}
-              className={cn(FIELD_CLASS, "rounded-l-none rounded-r-xl border-l-0")}
-            />
-          </div>
-        </div>
-      </div>
-      {error ? (
-        <p id={errorId} role="alert" className="text-destructive-text text-sm">
-          {error}
-        </p>
-      ) : helpText ? (
-        <p id={descriptionId} className="text-muted-foreground text-sm">
-          {helpText}
-        </p>
-      ) : null}
-    </div>
-  );
-}
-
-/**
- * DatePicker — native date inputs styled to the design system. The browser
- * owns the picker UI (calendar on desktop, wheel on iOS, etc.) so there is no
- * popover, calendar grid, or positioning layer in the bundle. Both a single
- * date (`name`) and a range (`startName` + `endName`) are supported; the
- * native inputs submit "YYYY-MM-DD" local date strings directly.
- *
- * @example
- * <DatePicker name="startDate" defaultValue="2020-01-15" label="Start date" />
- * <DatePicker
- *   mode="range"
- *   startName="startDate"
- *   endName="endDate"
- *   defaultValue={{ from: "2020-01-15", to: "2020-06-30" }}
- *   label="Active period"
- * />
- */
-function DatePicker(props: DatePickerProps) {
-  if (props.mode === "range") {
-    return <RangeDatePicker {...props} />;
-  }
-  return <SingleDatePicker {...props} />;
-}
-
-export { DatePicker };

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

@@ -1,37 +0,0 @@
-/**
- * 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;
-  // `new Date(year, month, day)` treats years from 0 through 99 as
-  // 1900-based years. Native date inputs can temporarily expose those years
-  // while a user is editing the year segment, so construct the date first and
-  // set the full year explicitly to avoid turning `0002` into `1902`.
-  const date = new Date(0);
-  date.setFullYear(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 = String(date.getFullYear()).padStart(4, "0");
-  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/drop-zone.stories.tsx

@@ -1,140 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-import { expect, fireEvent, userEvent, within } from "storybook/test";
-
-import { DropZone, type DropZoneFileInfo, type DropZoneStatus } from "./drop-zone";
-
-const meta = {
-  title: "Forms/DropZone",
-  component: DropZone,
-  tags: ["autodocs"],
-  args: {
-    status: "empty",
-    onFiles: () => {},
-  },
-} satisfies Meta<typeof DropZone>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-function DropZonePreview({ initialStatus = "empty" }: { initialStatus?: DropZoneStatus }) {
-  const [status, setStatus] = useState<DropZoneStatus>(initialStatus);
-  const [file, setFile] = useState<DropZoneFileInfo | null>(
-    initialStatus === "empty" ? null : { name: "applications.csv", size: 24_576 },
-  );
-
-  return (
-    <div className="w-96">
-      <DropZone
-        status={status}
-        file={file}
-        accept=".csv"
-        emptyHint="Supported formats: CSV"
-        error={status === "failed" ? "The file could not be processed." : undefined}
-        busyDescription="This usually takes a moment."
-        onFiles={(files) => {
-          const selectedFile = files[0];
-          if (!selectedFile) return;
-          setFile({ name: selectedFile.name, size: selectedFile.size });
-          setStatus("armed");
-        }}
-        onSubmit={() => setStatus("busy")}
-        onCancel={() => setStatus("armed")}
-        onRetry={() => setStatus("busy")}
-        onClear={() => {
-          setFile(null);
-          setStatus("empty");
-        }}
-      />
-    </div>
-  );
-}
-
-export const Default: Story = {
-  render: () => <DropZonePreview />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = canvasElement.querySelector('input[type="file"]') as HTMLInputElement;
-    const file = new File(["name,email\nAda,ada@example.com"], "applications.csv", {
-      type: "text/csv",
-    });
-
-    await expect(canvas.getByText("Drop a file here, or")).toBeInTheDocument();
-    await fireEvent.change(input, { target: { files: [file] } });
-    await expect(canvas.getByText("applications.csv")).toBeInTheDocument();
-    await expect(canvas.getByRole("button", { name: /Upload/ })).toBeInTheDocument();
-
-    await userEvent.click(canvas.getByRole("button", { name: /Upload/ }));
-    await expect(canvas.getByRole("progressbar", { name: "Processing…" })).toBeInTheDocument();
-    await expect(canvas.getByRole("button", { name: /Cancel/ })).toBeInTheDocument();
-  },
-};
-
-export const Armed: Story = {
-  render: () => <DropZonePreview initialStatus="armed" />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    await expect(canvas.getByText("applications.csv")).toBeInTheDocument();
-    await expect(canvas.getByText("24.0 KB")).toBeInTheDocument();
-    await userEvent.click(canvas.getByRole("button", { name: /Use a different file/ }));
-    await expect(canvas.getByText("Drop a file here, or")).toBeInTheDocument();
-  },
-};
-
-export const Busy: Story = {
-  render: () => <DropZonePreview initialStatus="busy" />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    await expect(canvas.getByRole("progressbar", { name: "Processing…" })).toBeInTheDocument();
-    await expect(canvas.getByRole("button", { name: /Cancel/ })).toBeInTheDocument();
-    await expect(canvas.queryByRole("button", { name: /Upload/ })).not.toBeInTheDocument();
-    await userEvent.click(canvas.getByRole("button", { name: /Cancel/ }));
-    await expect(canvas.getByRole("button", { name: /Upload/ })).toBeInTheDocument();
-  },
-};
-
-export const Dragging: Story = {
-  render: () => <DropZonePreview />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const zone = canvas.getByRole("button", { name: "File upload drop zone" });
-    const file = new File(["data"], "applications.csv", { type: "text/csv" });
-
-    await fireEvent.dragEnter(zone);
-    await expect(canvas.getByText("Release to attach")).toBeInTheDocument();
-    await fireEvent.dragLeave(zone);
-    await expect(canvas.getByText("Drop a file here, or")).toBeInTheDocument();
-    const dataTransfer = new DataTransfer();
-    dataTransfer.items.add(file);
-    Object.defineProperty(dataTransfer, "files", { value: [file] });
-    await fireEvent.drop(zone, { dataTransfer });
-    await expect(canvas.getByText("applications.csv")).toBeInTheDocument();
-  },
-};
-
-export const Failed: Story = {
-  render: () => <DropZonePreview initialStatus="failed" />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    await expect(canvas.getByText("The file could not be processed.")).toBeInTheDocument();
-    await expect(canvas.getByRole("button", { name: /Try again/ })).toBeInTheDocument();
-    await userEvent.click(canvas.getByRole("button", { name: /Try again/ }));
-    await expect(canvas.getByRole("progressbar", { name: "Processing…" })).toBeInTheDocument();
-  },
-};
-
-export const Disabled: Story = {
-  args: { status: "empty", disabled: true },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const zone = canvas.getByRole("button", { name: "File upload drop zone" });
-    const input = canvasElement.querySelector('input[type="file"]') as HTMLInputElement;
-
-    await expect(zone).toHaveAttribute("aria-disabled", "true");
-    await expect(zone).toHaveAttribute("tabindex", "-1");
-    await expect(input).toBeDisabled();
-  },
-};