open-ds 0.0.0-stage → 0.1.0

package/assets/stories/carousel.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  Card,
+  CardContent,
+} from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "carousel", situations: [] } },
+  title: "Components/Carousel",
+  component: Carousel,
+} satisfies Meta<typeof Carousel>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <Show component="carousel">
+      {(s) => (
+        <Carousel {...args} className="mx-12 max-w-sm">
+          <CarouselContent>
+            {s.metrics.map((m) => (
+              <CarouselItem key={m.label}>{m.label}</CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+      )}
+    </Show>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="carousel">
+      {(s) => (
+        <Carousel className="mx-12 max-w-sm">
+          <CarouselContent>
+            {s.metrics.map((m) => (
+              <CarouselItem key={m.label}>
+                <Card>
+                  <CardContent className="flex flex-col gap-[var(--space-gap-tight)] p-[var(--card-padding)]">
+                    <span className="text-[var(--color-text-secondary)]">{m.label}</span>
+                    <span className="[font-family:var(--type-display-font-family)] text-[length:var(--type-display-font-size)]">
+                      {m.value}
+                    </span>
+                  </CardContent>
+                </Card>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/chart.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@open-ds/ui";
+import { Bar, BarChart, XAxis } from "recharts";
+import type { Samples } from "../src/samples";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "chart", situations: ["number-in-table"] } },
+  title: "Components/Chart",
+  component: ChartContainer,
+  args: { config: { value: { label: "Value", color: "var(--chart-1)" } }, children: <></> },
+} satisfies Meta<typeof ChartContainer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <ChartContainer {...args} className="h-48 max-w-lg">
+      <BarChart
+        data={[
+          { name: "A", value: 3 },
+          { name: "B", value: 5 },
+          { name: "C", value: 2 },
+        ]}
+      >
+        <XAxis dataKey="name" />
+        <Bar dataKey="value" fill="var(--color-value)" />
+      </BarChart>
+    </ChartContainer>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="chart">
+      {(s) => (
+        <ChartContainer config={{ value: { label: valueLabel(s), color: "var(--chart-1)" } }} className="h-56 max-w-lg">
+          <BarChart data={chartRows(s)}>
+            <XAxis dataKey="name" tickLine={false} axisLine={false} />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <Bar dataKey="value" fill="var(--color-value)" radius={2} />
+          </BarChart>
+        </ChartContainer>
+      )}
+    </Show>
+  ),
+};
+
+// Rows of the scheme's own figures: the table's number column when it has one, otherwise its figures.
+function chartRows(s: Samples) {
+  const t = s.table;
+  const col = t ? t.columns.findIndex((c) => c.numeric) : -1;
+  const toNumber = (v: string) => Number.parseFloat(v.replace(/[^0-9.]/g, "")) || 0;
+  return t && col >= 0
+    ? t.rows.slice(0, 8).map((r) => ({ name: r.cells[0], value: toNumber(r.cells[col]) }))
+    : s.metrics.map((m) => ({ name: m.label, value: toNumber(m.value) }));
+}
+function valueLabel(s: Samples) {
+  const col = s.table?.columns.find((c) => c.numeric);
+  return col?.label ?? s.screen;
+}

package/assets/stories/checkbox.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Checkbox, Label } from "@open-ds/ui";
+import { Show, toneOf } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "checkbox", situations: ["smallest-target", "keyboard-focus"] } },
+  title: "Components/Checkbox",
+  component: Checkbox,
+} satisfies Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = { args: { defaultChecked: true, disabled: false } };
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="checkbox">
+      {(s) => (
+        <div className="grid gap-[var(--space-gap-default)]">
+          {s.checkbox!.map((label, i) => (
+            <Label key={label}>
+              <Checkbox defaultChecked={i === 0} disabled={i === 2} /> {label}
+            </Label>
+          ))}
+        </div>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/collapsible.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Collapsible, CollapsibleTrigger, CollapsibleContent, Button } from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "collapsible", situations: [] } },
+  title: "Components/Collapsible",
+  component: Collapsible,
+} satisfies Meta<typeof Collapsible>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <Collapsible {...args}>
+      <CollapsibleTrigger asChild>
+        <Button variant="ghost">Show more</Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent>More detail.</CollapsibleContent>
+    </Collapsible>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="collapsible">
+      {(s) => (
+        <Collapsible defaultOpen className="max-w-md">
+          <CollapsibleTrigger asChild>
+            <Button variant="ghost">{s.card?.title ?? s.screen}</Button>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="px-[var(--space-inset-control-x)] text-[var(--color-text-secondary)]">
+            {s.card?.description ?? s.field.hint}
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/combobox.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Combobox, ComboboxInput, ComboboxContent, ComboboxEmpty, ComboboxList, ComboboxItem } from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "combobox", situations: ["field-label", "error-message"] } },
+  title: "Components/Combobox",
+  component: Combobox,
+} satisfies Meta<typeof Combobox>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: () => (
+    <Show component="combobox">
+      {(s) => (
+        <Combobox items={s.table?.rows.map((r) => r.cells[0]) ?? s.metrics.map((m) => m.label)}>
+          <ComboboxInput placeholder={s.field.label} />
+          <ComboboxContent>
+            <ComboboxEmpty>No match.</ComboboxEmpty>
+            <ComboboxList>
+              {(item: string) => (
+                <ComboboxItem key={item} value={item}>
+                  {item}
+                </ComboboxItem>
+              )}
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+      )}
+    </Show>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="combobox">
+      {(s) => (
+        <div className="max-w-sm">
+          <Combobox items={s.table?.rows.map((r) => r.cells[0]) ?? s.metrics.map((m) => m.label)}>
+            <ComboboxInput placeholder={s.table?.columns[0].label ?? s.field.label} />
+            <ComboboxContent>
+              <ComboboxEmpty>No match.</ComboboxEmpty>
+              <ComboboxList>
+                {(item: string) => (
+                  <ComboboxItem key={item} value={item}>
+                    {item}
+                  </ComboboxItem>
+                )}
+              </ComboboxList>
+            </ComboboxContent>
+          </Combobox>
+        </div>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/command.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+} from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "command", situations: ["menu-or-dialog", "keyboard-focus"] } },
+  title: "Components/Command",
+  component: Command,
+} satisfies Meta<typeof Command>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <Command
+      {...args}
+      className="max-w-md rounded-[var(--radius-container)] border border-[var(--color-border-default)]"
+    >
+      <CommandInput placeholder="Search" />
+      <CommandList>
+        <CommandEmpty>No match.</CommandEmpty>
+      </CommandList>
+    </Command>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="command">
+      {(s) => (
+        <Command className="max-w-md rounded-[var(--radius-container)] border border-[var(--color-border-default)]">
+          <CommandInput placeholder={s.icon_action ?? s.field.label} />
+          <CommandList>
+            <CommandEmpty>No match.</CommandEmpty>
+            <CommandGroup heading={s.screen}>
+              <CommandItem>
+                {s.actions.primary}
+                <CommandShortcut>Enter</CommandShortcut>
+              </CommandItem>
+              <CommandItem>{s.actions.secondary}</CommandItem>
+            </CommandGroup>
+            <CommandGroup heading={s.table?.caption ?? s.metrics[0].label}>
+              {(s.table?.rows.map((r) => r.cells[0]) ?? s.metrics.map((m) => m.label)).slice(0, 6).map((x) => (
+                <CommandItem key={x}>{x}</CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/context-menu.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+} from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "context-menu", situations: ["row-action", "menu-or-dialog"] } },
+  title: "Components/Context menu",
+  component: ContextMenu,
+} satisfies Meta<typeof ContextMenu>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <ContextMenu {...args}>
+      <ContextMenuTrigger className="flex h-24 max-w-sm items-center justify-center rounded-[var(--radius-container)] border border-dashed border-[var(--color-border-strong)]">
+        Right-click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>Item</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="context-menu">
+      {(s) => (
+        <ContextMenu>
+          <ContextMenuTrigger className="flex h-24 max-w-sm items-center justify-center rounded-[var(--radius-container)] border border-dashed border-[var(--color-border-strong)]">
+            {s.table?.rows[0].cells.join(" · ") ?? s.screen}
+          </ContextMenuTrigger>
+          <ContextMenuContent>
+            {(s.menu?.items ?? [s.actions.primary, s.actions.secondary]).map((x) => (
+              <ContextMenuItem key={x}>{x}</ContextMenuItem>
+            ))}
+            {s.menu && (
+              <>
+                <ContextMenuSeparator />
+                <ContextMenuItem variant="destructive">{s.menu.destructive}</ContextMenuItem>
+              </>
+            )}
+          </ContextMenuContent>
+        </ContextMenu>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/data-table.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Badge, Button, DataTable, dataTableSelectColumn } from "@open-ds/ui";
+import type { ColumnDef } from "@tanstack/react-table";
+import { Show, toneOf } from "../src/samples";
+import type { Samples } from "../src/samples";
+
+const meta = {
+  parameters: {
+    openDs: { component: "data-table", situations: ["number-in-table", "table-row", "selected-row", "row-action"] },
+  },
+  title: "Components/Data table",
+  component: DataTable,
+  args: { columns: [], data: [] },
+} satisfies Meta<typeof DataTable>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+type Row = Record<string, string>;
+
+// The scheme's own rows: its table columns, then the status column, all sortable; status and the
+// second column are filters.
+function tableOf(s: Samples) {
+  const t = s.table!;
+  const keys = t.columns.map((c) => c.label);
+  const data: Row[] = t.rows.map((r) => ({
+    ...Object.fromEntries(keys.slice(0, -1).map((k, i) => [k, r.cells[i]])),
+    [keys.at(-1)!]: r.status,
+  }));
+  const status = keys.at(-1)!;
+  const columns: ColumnDef<Row, unknown>[] = [
+    dataTableSelectColumn<Row>(),
+    ...keys.map((k, i) => ({
+      accessorKey: k,
+      header: k,
+      meta: { label: k, numeric: t.columns[i].numeric },
+      cell: ({ getValue }: { getValue: () => unknown }) =>
+        k === status ? <Badge tone={toneOf(s, String(getValue()))}>{String(getValue())}</Badge> : String(getValue()),
+    })),
+  ];
+  return {
+    data,
+    columns,
+    facets: [
+      { column: status, title: status },
+      { column: keys[1], title: keys[1] },
+    ],
+  };
+}
+
+export const Playground: Story = {
+  render: (args) => (
+    <Show component="data-table">
+      {(s) => {
+        const t = tableOf(s);
+        return <DataTable {...args} columns={t.columns} data={t.data} facets={t.facets} pageSize={5} />;
+      }}
+    </Show>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="data-table">
+      {(s) => {
+        const t = tableOf(s);
+        return (
+          <div className="flex flex-col gap-[var(--space-gap-default)]">
+            <p className="[font-weight:var(--type-heading-font-weight)]">{s.table!.caption}</p>
+            <DataTable
+              columns={t.columns}
+              data={t.data}
+              facets={t.facets}
+              pageSize={8}
+              labels={{ search: s.icon_action ?? "Search" }}
+              bulkActions={() => (
+                <>
+                  <Button variant="secondary" size="compact">
+                    {s.actions.secondary}
+                  </Button>
+                  {s.confirm && (
+                    <Button variant="ghost" size="compact">
+                      {s.confirm.confirm}
+                    </Button>
+                  )}
+                </>
+              )}
+            />
+          </div>
+        );
+      }}
+    </Show>
+  ),
+};

package/assets/stories/date-picker.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { DatePicker, Label } from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "date-picker", situations: ["field-label", "keyboard-focus"] } },
+  title: "Components/Date picker",
+  component: DatePicker,
+  args: { mode: "single", placeholder: "Pick a date" },
+} satisfies Meta<typeof DatePicker>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="date-picker">
+      {(s) => (
+        <div className="grid max-w-sm gap-[var(--space-gap-tight)]">
+          <Label>{s.table?.caption ?? s.screen}</Label>
+          <DatePicker mode="range" defaultValue={{ from: new Date(2026, 9, 5), to: new Date(2026, 9, 11) }} />
+        </div>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/dialog.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@open-ds/ui";
+import { Show, toneOf } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "dialog", situations: ["destructive-action", "menu-or-dialog"] } },
+  title: "Components/Dialog",
+  component: Dialog,
+} satisfies Meta<typeof Dialog>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: { modal: true },
+  render: (args) => (
+    <Show component="dialog">
+      {(s) => (
+        <Dialog {...args}>
+          <DialogTrigger asChild>
+            <Button variant="secondary">{s.confirm!.trigger}</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>{s.confirm!.title}</DialogTitle>
+              <DialogDescription>{s.confirm!.body}</DialogDescription>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      )}
+    </Show>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="dialog">
+      {(s) => (
+        <div>
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="secondary">{s.confirm!.trigger}</Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>{s.confirm!.title}</DialogTitle>
+                <DialogDescription>{s.confirm!.body}</DialogDescription>
+              </DialogHeader>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button variant="secondary">{s.confirm!.cancel}</Button>
+                </DialogClose>
+                <Button>{s.confirm!.confirm}</Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/drawer.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerClose,
+  Button,
+} from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "drawer", situations: ["menu-or-dialog"] } },
+  title: "Components/Drawer",
+  component: Drawer,
+} satisfies Meta<typeof Drawer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <Drawer {...args}>
+      <DrawerTrigger asChild>
+        <Button variant="secondary">Open</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Drawer</DrawerTitle>
+        </DrawerHeader>
+      </DrawerContent>
+    </Drawer>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="drawer">
+      {(s) => (
+        <Drawer>
+          <DrawerTrigger asChild>
+            <Button variant="secondary">{s.actions.secondary}</Button>
+          </DrawerTrigger>
+          <DrawerContent>
+            <DrawerHeader>
+              <DrawerTitle>{s.screen}</DrawerTitle>
+              <DrawerDescription>{s.card?.description ?? s.field.hint}</DrawerDescription>
+            </DrawerHeader>
+            <DrawerFooter>
+              <Button>{s.actions.primary}</Button>
+              <DrawerClose asChild>
+                <Button variant="ghost">{s.confirm?.cancel ?? "Close"}</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+      )}
+    </Show>
+  ),
+};