open-ds 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@open-ds/ui";
+import { MoreHorizontal } from "lucide-react";
+import { Show, toneOf } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "dropdown-menu", situations: ["row-action", "menu-or-dialog"] } },
+  title: "Components/Dropdown menu",
+  component: DropdownMenu,
+} satisfies Meta<typeof DropdownMenu>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: { modal: true },
+  render: (args) => (
+    <Show component="dropdown-menu">
+      {(s) => (
+        <DropdownMenu {...args}>
+          <DropdownMenuTrigger asChild>
+            <Button variant="secondary">{s.menu!.trigger}</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            {s.menu!.items.map((item) => (
+              <DropdownMenuItem key={item}>{item}</DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </Show>
+  ),
+};
+
+// The destructive action sits last, in the danger tone, because choosing it loses something.
+export const Examples: Story = {
+  render: () => (
+    <Show component="dropdown-menu">
+      {(s) => (
+        <div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" aria-label={s.menu!.trigger}>
+                <MoreHorizontal />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              {s.menu!.items.map((item) => (
+                <DropdownMenuItem key={item}>{item}</DropdownMenuItem>
+              ))}
+              <DropdownMenuSeparator />
+              <DropdownMenuItem tone="danger">{s.menu!.destructive}</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/empty.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, Button } from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "empty", situations: ["empty-words"] } },
+  title: "Components/Empty",
+  component: Empty,
+} satisfies Meta<typeof Empty>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <Empty {...args}>
+      <EmptyHeader>
+        <EmptyTitle>Nothing here yet</EmptyTitle>
+      </EmptyHeader>
+    </Empty>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="empty">
+      {(s) => (
+        <Empty className="max-w-lg border border-dashed border-[var(--color-border-strong)]">
+          <EmptyHeader>
+            <EmptyTitle>{s.messages?.neutral ?? s.screen}</EmptyTitle>
+            <EmptyDescription>{s.field.hint}</EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <Button>{s.actions.primary}</Button>
+          </EmptyContent>
+        </Empty>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/field.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Field, FieldLabel, FieldDescription, FieldError, Input } from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "field", situations: ["field-label", "error-message"] } },
+  title: "Components/Field",
+  component: Field,
+} satisfies Meta<typeof Field>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <Field {...args} className="max-w-sm">
+      <FieldLabel htmlFor="f-play">Label</FieldLabel>
+      <Input id="f-play" />
+      <FieldDescription>A hint.</FieldDescription>
+    </Field>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="field">
+      {(s) => (
+        <div className="grid max-w-sm gap-[var(--space-gap-group)]">
+          <Field>
+            <FieldLabel htmlFor="f-ok">{s.field.label}</FieldLabel>
+            <Input id="f-ok" placeholder={s.field.placeholder || undefined} />
+            <FieldDescription>{s.field.hint}</FieldDescription>
+          </Field>
+          <Field data-invalid>
+            <FieldLabel htmlFor="f-bad">{s.field.label}</FieldLabel>
+            <Input id="f-bad" aria-invalid defaultValue={s.field.invalid} />
+            <FieldError>{s.field.error}</FieldError>
+          </Field>
+        </div>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/form.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  Input,
+  Button,
+} from "@open-ds/ui";
+import { useForm } from "react-hook-form";
+import type { Samples } from "../src/samples";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "form", situations: ["field-label", "error-message"] } },
+  title: "Components/Form",
+  component: FormItem,
+} satisfies Meta<typeof FormItem>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = { render: () => <Show component="form">{(s) => <FormExample s={s} />}</Show> };
+
+export const Examples: Story = {
+  render: () => <Show component="form">{(s) => <FormExample s={s} />}</Show>,
+};
+
+// A form wired to react-hook-form: the field shows the scheme's error when the value is empty.
+function FormExample({ s }: { s: Samples }) {
+  const form = useForm<{ value: string }>({ defaultValues: { value: "" } });
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(() => undefined)} className="grid max-w-sm gap-[var(--space-gap-group)]">
+        <FormField
+          control={form.control}
+          name="value"
+          rules={{ required: s.field.error }}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{s.field.label}</FormLabel>
+              <FormControl>
+                <Input placeholder={s.field.placeholder || undefined} {...field} />
+              </FormControl>
+              <FormDescription>{s.field.hint}</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">{s.actions.primary}</Button>
+      </form>
+    </Form>
+  );
+}

package/assets/stories/input-group.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "@open-ds/ui";
+import { Search } from "lucide-react";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "input-group", situations: ["field-label", "error-message"] } },
+  title: "Components/Input group",
+  component: InputGroup,
+} satisfies Meta<typeof InputGroup>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <InputGroup {...args} className="max-w-sm">
+      <InputGroupAddon>
+        <Search />
+      </InputGroupAddon>
+      <InputGroupInput placeholder="Search" />
+    </InputGroup>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="input-group">
+      {(s) => (
+        <InputGroup className="max-w-sm">
+          <InputGroupAddon>
+            <Search />
+          </InputGroupAddon>
+          <InputGroupInput aria-label={s.field.label} placeholder={s.field.placeholder || s.field.label} />
+          <InputGroupAddon align="inline-end">
+            <InputGroupText>{s.table?.rows.length ?? s.metrics.length}</InputGroupText>
+          </InputGroupAddon>
+        </InputGroup>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/input-otp.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "input-otp", situations: ["field-label", "error-message"] } },
+  title: "Components/Input otp",
+  component: InputOTPGroup,
+} satisfies Meta<typeof InputOTPGroup>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: () => (
+    <InputOTP maxLength={6}>
+      <InputOTPGroup>
+        {[0, 1, 2, 3, 4, 5].map((i) => (
+          <InputOTPSlot key={i} index={i} />
+        ))}
+      </InputOTPGroup>
+    </InputOTP>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="input-otp">
+      {(s) => (
+        <div className="flex flex-col gap-[var(--space-gap-default)]">
+          <p className="text-[var(--color-text-secondary)]">{s.field.hint}</p>
+          <InputOTP maxLength={6} aria-label={s.field.label}>
+            <InputOTPGroup>
+              {[0, 1, 2].map((i) => (
+                <InputOTPSlot key={i} index={i} />
+              ))}
+            </InputOTPGroup>
+            <InputOTPSeparator />
+            <InputOTPGroup>
+              {[3, 4, 5].map((i) => (
+                <InputOTPSlot key={i} index={i} />
+              ))}
+            </InputOTPGroup>
+          </InputOTP>
+        </div>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/input.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Input, Label } from "@open-ds/ui";
+import { Show, toneOf } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "input", situations: ["field-label", "error-message", "keyboard-focus"] } },
+  title: "Components/Input",
+  component: Input,
+} satisfies Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = { args: { placeholder: "Type here", disabled: false } };
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="input">
+      {(s) => (
+        <div className="grid max-w-sm gap-[var(--space-gap-tight)]">
+          <Label htmlFor="field">{s.field.label}</Label>
+          <p className="text-[var(--color-text-secondary)]">{s.field.hint}</p>
+          <Input id="field" placeholder={s.field.placeholder || undefined} />
+          <Label htmlFor="field-bad">{s.field.label}</Label>
+          <Input id="field-bad" aria-invalid aria-describedby="field-error" defaultValue={s.field.invalid} />
+          <p id="field-error" className="text-[var(--color-status-danger)]">
+            {s.field.error}
+          </p>
+        </div>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/kbd.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Kbd, KbdGroup } from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "kbd", situations: ["keyboard-focus"] } },
+  title: "Components/Kbd",
+  component: Kbd,
+  args: { children: "K" },
+} satisfies Meta<typeof Kbd>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="kbd">
+      {(s) => (
+        <p className="flex items-center gap-[var(--space-gap-default)]">
+          {s.icon_action ?? s.actions.primary}
+          <KbdGroup>
+            <Kbd>Ctrl</Kbd>
+            <Kbd>K</Kbd>
+          </KbdGroup>
+        </p>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/label.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Input, Label } from "@open-ds/ui";
+import { Show, toneOf } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "label", situations: ["field-label"] } },
+  title: "Components/Label",
+  component: Label,
+} satisfies Meta<typeof Label>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = { args: { children: "Label" } };
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="label">
+      {(s) => (
+        <div className="grid max-w-sm gap-[var(--space-gap-tight)]">
+          <Label htmlFor="labelled">{s.field.label}</Label>
+          <Input id="labelled" placeholder={s.field.placeholder || undefined} />
+        </div>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/native-select.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { NativeSelect, NativeSelectOption, Label } from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "native-select", situations: ["field-label", "error-message"] } },
+  title: "Components/Native select",
+  component: NativeSelect,
+} satisfies Meta<typeof NativeSelect>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <NativeSelect {...args} aria-label="Choice">
+      <NativeSelectOption value="a">A</NativeSelectOption>
+      <NativeSelectOption value="b">B</NativeSelectOption>
+    </NativeSelect>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="native-select">
+      {(s) => (
+        <div className="grid max-w-sm gap-[var(--space-gap-tight)]">
+          <Label htmlFor="native">{s.select?.label ?? s.field.label}</Label>
+          <NativeSelect id="native" defaultValue={s.select?.value}>
+            {(s.select?.options ?? s.checkbox ?? s.statuses.map((x) => x.label)).map((o) => (
+              <NativeSelectOption key={o} value={o}>
+                {o}
+              </NativeSelectOption>
+            ))}
+          </NativeSelect>
+        </div>
+      )}
+    </Show>
+  ),
+};

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

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuLink } from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "navigation-menu", situations: ["link", "keyboard-focus"] } },
+  title: "Components/Navigation menu",
+  component: NavigationMenu,
+} satisfies Meta<typeof NavigationMenu>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <NavigationMenu {...args}>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#">Link</NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="navigation-menu">
+      {(s) => (
+        <NavigationMenu>
+          <NavigationMenuList>
+            {(s.tabs?.map((t) => t.label) ?? s.metrics.map((m) => m.label)).map((x) => (
+              <NavigationMenuItem key={x}>
+                <NavigationMenuLink href="#">{x}</NavigationMenuLink>
+              </NavigationMenuItem>
+            ))}
+          </NavigationMenuList>
+        </NavigationMenu>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/pagination.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+} from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "pagination", situations: ["link", "keyboard-focus"] } },
+  title: "Components/Pagination",
+  component: Pagination,
+} satisfies Meta<typeof Pagination>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <Pagination {...args}>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            1
+          </PaginationLink>
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="pagination">
+      {(s) => (
+        <div className="flex flex-col items-start gap-[var(--space-gap-default)]">
+          <p className="text-[var(--color-text-secondary)]">{s.table?.caption ?? s.screen}</p>
+          <Pagination className="mx-0 justify-start">
+            <PaginationContent>
+              <PaginationItem>
+                <PaginationPrevious href="#" />
+              </PaginationItem>
+              {[1, 2, 3].map((n) => (
+                <PaginationItem key={n}>
+                  <PaginationLink href="#" isActive={n === 1}>
+                    {n}
+                  </PaginationLink>
+                </PaginationItem>
+              ))}
+              <PaginationItem>
+                <PaginationNext href="#" />
+              </PaginationItem>
+            </PaginationContent>
+          </Pagination>
+        </div>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/popover.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Popover, PopoverTrigger, PopoverContent, Button } from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "popover", situations: ["menu-or-dialog"] } },
+  title: "Components/Popover",
+  component: Popover,
+} satisfies Meta<typeof Popover>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <Popover {...args}>
+      <PopoverTrigger asChild>
+        <Button variant="secondary">Open</Button>
+      </PopoverTrigger>
+      <PopoverContent>Details.</PopoverContent>
+    </Popover>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="popover">
+      {(s) => (
+        <Popover defaultOpen>
+          <PopoverTrigger asChild>
+            <Button variant="secondary">{s.card?.title ?? s.actions.secondary}</Button>
+          </PopoverTrigger>
+          <PopoverContent>{s.card?.description ?? s.field.hint}</PopoverContent>
+        </Popover>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/progress.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Progress } from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "progress", situations: ["reduced-motion"] } },
+  title: "Components/Progress",
+  component: Progress,
+  args: { value: 40 },
+} satisfies Meta<typeof Progress>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = { render: (args) => <Progress {...args} className="max-w-sm" /> };
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="progress">
+      {(s) => (
+        <div className="grid max-w-sm gap-[var(--space-gap-tight)]">
+          <p className="flex justify-between">
+            <span>{s.metrics[0].label}</span>
+            <span className="[font-family:var(--type-data-font-family)]">{s.metrics[0].value}</span>
+          </p>
+          <Progress value={50} aria-label={s.metrics[0].label} />
+        </div>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/radio-group.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { RadioGroup, RadioGroupItem, Label } from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "radio-group", situations: ["field-label", "error-message"] } },
+  title: "Components/Radio group",
+  component: RadioGroup,
+} satisfies Meta<typeof RadioGroup>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <RadioGroup {...args} defaultValue="a">
+      <Label>
+        <RadioGroupItem value="a" /> A
+      </Label>
+      <Label>
+        <RadioGroupItem value="b" /> B
+      </Label>
+    </RadioGroup>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="radio-group">
+      {(s) => (
+        <fieldset className="grid gap-[var(--space-gap-default)]">
+          <legend className="mb-[var(--space-gap-default)] [font-weight:var(--type-label-font-weight)]">
+            {s.select?.label ?? s.field.label}
+          </legend>
+          <RadioGroup defaultValue={s.select?.value ?? (s.checkbox ?? s.statuses.map((x) => x.label))[0]}>
+            {(s.select?.options ?? s.checkbox ?? s.statuses.map((x) => x.label)).map((o) => (
+              <Label key={o}>
+                <RadioGroupItem value={o} /> {o}
+              </Label>
+            ))}
+          </RadioGroup>
+        </fieldset>
+      )}
+    </Show>
+  ),
+};