@ponti-studios/ui 1.6.0 → 1.8.0

package/src/components/feedback/file-upload-status.tsx

@@ -1,160 +0,0 @@
-import { XIcon } from "lucide-react";
-import { memo } from "react";
-
-import { ProgressBar } from "./progress-bar";
-
-export interface FileUploadStats {
-  progress?: number;
-  processingTime?: number;
-  total?: number;
-  created?: number;
-  updated?: number;
-  skipped?: number;
-  merged?: number;
-  invalid?: number;
-  errors?: unknown[];
-}
-
-export interface FileUploadState {
-  status: "uploading" | "processing" | "queued" | "done" | "error" | (string & {});
-  error?: string;
-  stats?: FileUploadStats;
-}
-
-export const FileUploadStatus = memo(function FileUploadStatus({
-  uploadStatus,
-}: {
-  uploadStatus?: FileUploadState;
-}) {
-  if (!uploadStatus) return null;
-  const { status, error, stats } = uploadStatus;
-
-  if (status === "uploading" || status === "processing") {
-    const progress = stats?.progress;
-
-    return (
-      <output className="w-full">
-        <div className="mb-1.5 flex items-center justify-between">
-          <span className="text-muted-foreground text-sm font-medium">
-            {status === "uploading" ? "Uploading" : "Processing"}
-          </span>
-          <span className="text-foreground text-sm font-medium">
-            {progress !== undefined ? `${Math.round(progress)}%` : ""}
-          </span>
-        </div>
-        <div className="w-full">
-          {typeof progress === "number" ? (
-            <ProgressBar
-              progress={progress}
-              className="bg-muted h-2"
-              indicatorClassName="border-primary"
-            />
-          ) : (
-            <div className="bg-muted h-2 overflow-hidden">
-              <div className="bg-primary void-anim-breezy-progress h-full" />
-            </div>
-          )}
-        </div>
-      </output>
-    );
-  }
-
-  if (status === "queued") {
-    return (
-      <output className="w-full">
-        <div className="mb-1.5 flex items-center justify-between">
-          <span className="text-muted-foreground text-sm font-medium">Queue position</span>
-        </div>
-        <div className="w-full">
-          <ProgressBar
-            progress={0}
-            className="bg-warning/10 h-2"
-            indicatorClassName="border-warning"
-          />
-        </div>
-      </output>
-    );
-  }
-
-  if (status === "done") {
-    return (
-      <output className="space-y-3">
-        <div className="w-full">
-          <ProgressBar
-            progress={100}
-            className="bg-muted h-2"
-            indicatorClassName="border-primary"
-          />
-        </div>
-        {stats && <ProcessingStats stats={stats} />}
-      </output>
-    );
-  }
-
-  if (status === "error") {
-    return (
-      <output className="mt-2" role="alert">
-        <div className="bg-destructive/10 text-destructive-text flex items-start gap-2 p-3">
-          <XIcon className="mt-0.5 h-5 w-5 shrink-0" aria-hidden="true" />
-          <span className="text-sm">{error}</span>
-        </div>
-      </output>
-    );
-  }
-
-  return <output className="text-muted-foreground text-sm">{status}</output>;
-});
-
-const ProcessingStats = memo(function ProcessingStats({ stats }: { stats: FileUploadStats }) {
-  if (!stats || typeof stats !== "object") return null;
-
-  return (
-    <dl className="divide-border mt-3 divide-y">
-      {stats.processingTime !== undefined && (
-        <div className="py-2 first:pt-0 last:pb-0">
-          <dt className="sr-only">Processing time</dt>
-          <dd className="text-foreground text-sm font-medium">
-            Completed in {(stats.processingTime / 1000).toFixed(1)}s
-          </dd>
-        </div>
-      )}
-      {stats.total !== undefined && Object.values(stats).length ? (
-        <>
-          <ProcessingStat label="Total" value={stats.total} />
-          <ProcessingStat label="Created" value={stats.created} />
-          <ProcessingStat label="Updated" value={stats.updated} />
-          <ProcessingStat label="Skipped" value={stats.skipped} />
-          <ProcessingStat label="Merged" value={stats.merged} />
-          <ProcessingStat label="Invalid" value={stats.invalid} />
-        </>
-      ) : null}
-
-      {stats.errors?.length && stats.errors.length > 0 ? (
-        <div className="py-2">
-          <dt className="text-foreground text-sm font-medium">Errors</dt>
-          <dd className="mt-1">
-            <span className="bg-destructive/10 text-destructive-text inline-flex items-center px-2 py-1 text-xs font-medium">
-              {stats.errors.length} error{stats.errors.length > 1 ? "s" : ""}
-            </span>
-          </dd>
-        </div>
-      ) : null}
-    </dl>
-  );
-});
-
-const ProcessingStat = memo(function ProcessingStat({
-  label,
-  value,
-}: {
-  label: string;
-  value?: number | undefined;
-}) {
-  if (value === undefined) return null;
-  return (
-    <div className="py-2">
-      <dt className="text-muted-foreground text-sm font-medium">{label}</dt>
-      <dd className="text-foreground mt-1 text-sm">{value.toLocaleString()}</dd>
-    </div>
-  );
-});

package/src/components/feedback/progress-bar.stories.tsx

@@ -1,39 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { ProgressBar } from "./progress-bar";
-
-const meta = {
-  title: "Feedback/ProgressBar",
-  component: ProgressBar,
-  tags: ["autodocs"],
-} satisfies Meta<typeof ProgressBar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { progress: 60 },
-  render: (args) => (
-    <div className="w-64">
-      <ProgressBar {...args} />
-    </div>
-  ),
-};
-
-export const Empty: Story = {
-  args: { progress: 0 },
-  render: (args) => (
-    <div className="w-64">
-      <ProgressBar {...args} />
-    </div>
-  ),
-};
-
-export const Complete: Story = {
-  args: { progress: 100 },
-  render: (args) => (
-    <div className="w-64">
-      <ProgressBar {...args} />
-    </div>
-  ),
-};

package/src/components/feedback/progress-bar.tsx

@@ -1,22 +0,0 @@
-import { cn } from "../../lib/utils";
-
-export interface ProgressBarProps {
-  className?: string;
-  indicatorClassName?: string;
-  progress?: number;
-}
-
-/** Thin linear progress indicator, distinct from the Radix-backed `Progress`. */
-export function ProgressBar({ className, indicatorClassName, progress = 0 }: ProgressBarProps) {
-  return (
-    <div className={cn("border-border h-[2px] w-full overflow-hidden border-t", className)}>
-      <div
-        className={cn("border-warning h-full border-t", indicatorClassName)}
-        style={{
-          width: `${Math.min(100, Math.max(0, progress))}%`,
-          opacity: progress === 100 ? 0 : 0.8,
-        }}
-      />
-    </div>
-  );
-}

package/src/components/forms/calendar.stories.tsx

@@ -1,30 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-
-import { Calendar } from "./calendar";
-
-const meta = {
-  title: "Forms/Calendar",
-  component: Calendar,
-  tags: ["autodocs"],
-} satisfies Meta<typeof Calendar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => {
-    const [date, setDate] = useState<Date | undefined>(new Date());
-    return (
-      <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />
-    );
-  },
-};
-
-export const WithoutOutsideDays: Story = {
-  render: () => <Calendar mode="single" showOutsideDays={false} className="rounded-md border" />,
-};
-
-export const RangeMode: Story = {
-  render: () => <Calendar mode="range" className="rounded-md border" />,
-};

package/src/components/forms/calendar.tsx

@@ -1,75 +0,0 @@
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
-import type * as React from "react";
-import { DayPicker } from "react-day-picker";
-
-import { cn } from "../../lib/utils";
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
-
-function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("relative w-fit rounded-md p-4", className)}
-      classNames={{
-        root: "text-foreground",
-        months: "flex flex-col gap-4 sm:flex-row",
-        month: "flex flex-col gap-4",
-        month_caption: "relative flex h-8 items-center justify-center",
-        caption_label: "flex items-center gap-1 text-sm font-medium",
-        dropdowns: "flex items-center gap-1",
-        dropdown_root: "relative",
-        dropdown: "absolute inset-0 z-10 cursor-pointer opacity-0",
-        months_dropdown: "",
-        years_dropdown: "",
-        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:
-          "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",
-        month_grid: "w-full border-collapse",
-        weekdays: "flex",
-        weekday:
-          "flex size-8 items-center justify-center text-[0.8rem] font-normal text-muted-foreground",
-        week: "mt-1 flex w-full",
-        day: "relative size-8 p-0 text-center text-lg focus-within:z-20",
-        day_button:
-          "inline-flex size-6 items-center justify-center rounded-md text-sm font-normal disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
-        selected:
-          "[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary/90",
-        today: "[&>button]:bg-primary [&>button]:text-primary-foreground",
-        outside: "text-muted-foreground [&>button]:text-muted-foreground",
-        disabled: "text-muted-foreground opacity-50",
-        range_start:
-          "rounded-l-md bg-primary [&>button]:bg-primary [&>button]:text-primary-foreground",
-        range_middle: "bg-primary [&>button]:rounded-none [&>button]:text-primary-foreground",
-        range_end:
-          "rounded-r-md bg-primary [&>button]:bg-primary [&>button]:text-primary-foreground",
-        hidden: "invisible",
-        ...classNames,
-      }}
-      components={{
-        Chevron: ({ className: iconClassName, orientation, ...iconProps }) => {
-          if (orientation === "left") {
-            return <ChevronLeft className={cn("size-4", iconClassName)} {...iconProps} />;
-          }
-
-          if (orientation === "right") {
-            return <ChevronRight className={cn("size-4", iconClassName)} {...iconProps} />;
-          }
-
-          if (orientation === "up") {
-            return <ChevronUp className={cn("size-4", iconClassName)} {...iconProps} />;
-          }
-
-          return <ChevronDown className={cn("size-4", iconClassName)} {...iconProps} />;
-        },
-      }}
-      {...props}
-    />
-  );
-}
-
-Calendar.displayName = "Calendar";
-
-export { Calendar };

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

@@ -1,202 +0,0 @@
-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");
-  },
-};
-
-// No play function — this one is for manually driving the interaction
-// (e.g. screen recordings), not automated assertions.
-export const DropdownEmpty: Story = {
-  args: {
-    name: "startDate",
-    label: "Start date",
-    captionLayout: "dropdown",
-  },
-};
-
-export const WithDropdownCaption: Story = {
-  args: {
-    mode: "range",
-    startName: "startDate",
-    endName: "endDate",
-    defaultValue: { from: "2018-03-01" },
-    label: "Employment period",
-    captionLayout: "dropdown",
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Jumping back to a date years ago is a month/year select, not repeated
-    // prev-month clicks.
-    const trigger = canvas.getByRole("button", { name: "Employment period" });
-    await userEvent.click(trigger);
-    const dialog = await screen.findByRole("dialog");
-
-    const yearSelect = within(dialog).getByRole("combobox", { name: /year/i });
-    await userEvent.selectOptions(yearSelect, "2009");
-    const monthSelect = within(dialog).getByRole("combobox", { name: /month/i });
-    await userEvent.selectOptions(monthSelect, "May");
-
-    await userEvent.click(within(dialog).getByText("12"));
-    await expect(hiddenValue(canvasElement, "startDate")).toBe("2009-05-12");
-  },
-};
-
-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",
-    );
-  },
-};