@wakastellar/ui 3.5.0 → 4.0.0-dev.0

package/src/components/command/Command.stories.tsx

@@ -15,8 +15,12 @@ import {
   Calculator,
   Calendar,
   CreditCard,
+  FileText,
+  Folder,
+  Code2,
   Settings,
   Smile,
+  Sun,
   User,
 } from 'lucide-react'
 import * as React from 'react'
@@ -32,18 +36,14 @@ const meta: Meta<typeof Command> = {
       },
     },
   },
-  tags: ['autodocs'],
 }
 
 export default meta
 type Story = StoryObj<typeof Command>
 
 export const Default: Story = {
-  args: {
-    className: 'rounded-lg border shadow-md w-[400px]',
-  },
-  render: (args) => (
-    <Command {...args}>
+  render: () => (
+    <Command className="rounded-lg border shadow-md w-[400px]">
       <CommandInput placeholder="Type a command or search..." />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
@@ -205,3 +205,97 @@ export const Simple: Story = {
     </Command>
   ),
 }
+
+export const ProjectSwitcher: Story = {
+  render: () => (
+    <Command className="w-[420px] rounded-lg border shadow-md">
+      <CommandInput placeholder="Switch project..." />
+      <CommandList>
+        <CommandEmpty>No project found.</CommandEmpty>
+        <CommandGroup heading="Recent">
+          <CommandItem>
+            <Folder className="mr-2 h-4 w-4 text-blue-500" />
+            <span>WakaStart core</span>
+            <CommandShortcut>1</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <Folder className="mr-2 h-4 w-4 text-emerald-500" />
+            <span>Apollo dashboard</span>
+            <CommandShortcut>2</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <Folder className="mr-2 h-4 w-4 text-rose-500" />
+            <span>Internal tools</span>
+            <CommandShortcut>3</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Actions">
+          <CommandItem>
+            <FileText className="mr-2 h-4 w-4" />
+            <span>Create new project</span>
+          </CommandItem>
+          <CommandItem>
+            <Code2 className="mr-2 h-4 w-4" />
+            <span>Import from GitHub</span>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  ),
+}
+
+export const QuickActions: Story = {
+  render: () => (
+    <Command className="w-[400px] rounded-lg border shadow-md">
+      <CommandInput placeholder="What do you want to do?" />
+      <CommandList>
+        <CommandEmpty>No action found.</CommandEmpty>
+        <CommandGroup heading="Theme">
+          <CommandItem>
+            <Sun className="mr-2 h-4 w-4" />
+            <span>Switch to light mode</span>
+          </CommandItem>
+          <CommandItem>
+            <Settings className="mr-2 h-4 w-4" />
+            <span>Open theme editor</span>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Help">
+          <CommandItem>
+            <FileText className="mr-2 h-4 w-4" />
+            <span>Documentation</span>
+            <CommandShortcut>?</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <Code2 className="mr-2 h-4 w-4" />
+            <span>Report an issue</span>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  ),
+}
+
+export const NoResults: Story = {
+  render: () => (
+    <Command className="w-[400px] rounded-lg border shadow-md" shouldFilter={false}>
+      <CommandInput placeholder="No results scenario" value="zzzzz" onValueChange={() => {}} />
+      <CommandList>
+        <CommandEmpty className="py-8 text-center text-sm text-muted-foreground">
+          <p className="font-medium">No results for &quot;zzzzz&quot;</p>
+          <p className="mt-1 text-xs">Try another keyword or browse the docs.</p>
+        </CommandEmpty>
+      </CommandList>
+    </Command>
+  ),
+}
+
+/**
+ * Playground — generated to make the Storybook Controls panel functional.
+ * Exposes a default arg set wired to the component via {...args}.
+ */
+export const Playground: Story = {
+  render: (args) => <Command {...args} />,
+}

package/src/components/context-menu/ContextMenu.mdx

@@ -0,0 +1,77 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './ContextMenu.stories'
+
+<Meta of={Stories} />
+
+# ContextMenu
+
+Right-click context menu with submenus, separators, and keyboard navigation.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { ContextMenu } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add context-menu`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Simple
+
+<Canvas of={Stories.Simple} />
+
+### With Checkboxes
+
+<Canvas of={Stories.WithCheckboxes} />
+
+### With Radio Group
+
+<Canvas of={Stories.WithRadioGroup} />
+
+### File Explorer
+
+<Canvas of={Stories.FileExplorer} />
+
+### Row Actions
+
+<Canvas of={Stories.RowActions} />
+
+### Disabled
+
+<Canvas of={Stories.Disabled} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/context-menu.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/context-menu/ContextMenu.stories.tsx

@@ -27,7 +27,6 @@ const meta: Meta<typeof ContextMenu> = {
       },
     },
   },
-  tags: ['autodocs'],
 }
 
 export default meta
@@ -218,3 +217,38 @@ export const FileExplorer: Story = {
     </ContextMenu>
   ),
 }
+
+export const RowActions: Story = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex w-[420px] items-center justify-between rounded-md border px-3 py-2 text-sm">
+        <span>invoice-2026-04.pdf</span>
+        <span className="text-xs text-muted-foreground">2.1 MB</span>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>Preview</ContextMenuItem>
+        <ContextMenuItem>Download</ContextMenuItem>
+        <ContextMenuItem>Copy link</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem className="text-destructive">Delete</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-[140px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground">
+        Right click — read-only target
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>Copy</ContextMenuItem>
+        <ContextMenuItem disabled>Cut</ContextMenuItem>
+        <ContextMenuItem disabled>Paste</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem disabled>Delete</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+}

package/src/components/dialog/Dialog.mdx

@@ -0,0 +1,81 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './Dialog.stories'
+
+<Meta of={Stories} />
+
+# Dialog
+
+Modal dialog with focus trap, ESC to close, and Radix-driven a11y semantics.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { Dialog } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add dialog`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Simple
+
+<Canvas of={Stories.Simple} />
+
+### Custom Width
+
+<Canvas of={Stories.CustomWidth} />
+
+### With Form
+
+<Canvas of={Stories.WithForm} />
+
+### Confirmation
+
+<Canvas of={Stories.Confirmation} />
+
+### Scrollable
+
+<Canvas of={Stories.Scrollable} />
+
+### No Close Button
+
+<Canvas of={Stories.NoCloseButton} />
+
+### Full Screen Mobile
+
+<Canvas of={Stories.FullScreenMobile} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/dialog.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/dialog/Dialog.stories.tsx

@@ -24,16 +24,14 @@ const meta: Meta<typeof Dialog> = {
       },
     },
   },
-  tags: ['autodocs'],
 }
 
 export default meta
 type Story = StoryObj<typeof Dialog>
 
 export const Default: Story = {
-  args: {},
-  render: (args) => (
-    <Dialog {...args}>
+  render: () => (
+    <Dialog>
       <DialogTrigger asChild>
         <Button variant="outline">Open Dialog</Button>
       </DialogTrigger>
@@ -155,3 +153,140 @@ export const WithForm: Story = {
     </Dialog>
   ),
 }
+
+export const Confirmation: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="destructive">Delete project</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete &quot;Apollo&quot;?</DialogTitle>
+          <DialogDescription>
+            This will permanently remove the project, including all branches, builds and
+            invoices. There is no way to recover.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="rounded-md border bg-muted/40 p-3 text-xs text-muted-foreground">
+          Type <span className="font-mono font-semibold">apollo</span> to confirm.
+        </div>
+        <Input placeholder="Project name" className="font-mono" />
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Keep project</Button>
+          </DialogClose>
+          <Button variant="destructive" disabled>
+            Delete forever
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+}
+
+export const Scrollable: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">View terms</Button>
+      </DialogTrigger>
+      <DialogContent className="max-h-[80vh] sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Terms of service</DialogTitle>
+          <DialogDescription>Last updated: April 2026</DialogDescription>
+        </DialogHeader>
+        <div className="max-h-[400px] space-y-4 overflow-y-auto pr-2 text-sm leading-relaxed text-muted-foreground">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <p key={i}>
+              <span className="font-semibold text-foreground">{i + 1}. Section.</span> By using
+              the WakaStart platform you agree to abide by the rules of fair use, including but
+              not limited to data residency, audit retention and rate limiting policies. The
+              platform is provided &quot;as-is&quot; with the warranties described in the master
+              agreement.
+            </p>
+          ))}
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="ghost">Close</Button>
+          </DialogClose>
+          <Button>Accept</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+}
+
+export const NoCloseButton: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Show critical action</Button>
+      </DialogTrigger>
+      <DialogContent
+        showCloseButton={false}
+        onPointerDownOutside={(e) => e.preventDefault()}
+        onEscapeKeyDown={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle>Migration in progress</DialogTitle>
+          <DialogDescription>
+            Please wait while we finish migrating your workspace. This dialog cannot be
+            dismissed until completion.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center justify-center py-6">
+          <div className="h-10 w-10 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+        </div>
+        <DialogFooter>
+          <Button variant="outline" disabled>
+            Migrating&hellip;
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+}
+
+export const FullScreenMobile: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Open settings</Button>
+      </DialogTrigger>
+      <DialogContent className="h-[85vh] max-w-md sm:h-auto">
+        <DialogHeader>
+          <DialogTitle>Workspace settings</DialogTitle>
+          <DialogDescription>
+            Adjust the configuration that applies to all members.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="ws-name">Workspace name</Label>
+            <Input id="ws-name" defaultValue="WakaStart Engineering" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="ws-domain">Custom domain</Label>
+            <Input id="ws-domain" placeholder="acme.example.com" />
+          </div>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button>Save</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+}
+
+/**
+ * Playground — generated to make the Storybook Controls panel functional.
+ * Exposes a default arg set wired to the component via {...args}.
+ */
+export const Playground: Story = {
+  render: (args) => <Dialog {...args} />,
+}

package/src/components/dropdown-menu/DropdownMenu.mdx

@@ -0,0 +1,77 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './DropdownMenu.stories'
+
+<Meta of={Stories} />
+
+# DropdownMenu
+
+Composable Radix dropdown with submenus, separators, checkbox/radio items, and keyboard nav.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { DropdownMenu } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add dropdown-menu`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### With Checkboxes
+
+<Canvas of={Stories.WithCheckboxes} />
+
+### With Radio Group
+
+<Canvas of={Stories.WithRadioGroup} />
+
+### With Submenu
+
+<Canvas of={Stories.WithSubmenu} />
+
+### Simple
+
+<Canvas of={Stories.Simple} />
+
+### With Destructive Action
+
+<Canvas of={Stories.WithDestructiveAction} />
+
+### Row Actions
+
+<Canvas of={Stories.RowActions} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/dropdown-menu.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/dropdown-menu/DropdownMenu.stories.tsx

@@ -27,7 +27,7 @@ import {
   MessageSquare,
   PlusCircle,
   Plus,
-  Github,
+  Globe,
   LifeBuoy,
   Cloud,
   LogOut,
@@ -46,7 +46,6 @@ const meta: Meta<typeof DropdownMenu> = {
       },
     },
   },
-  tags: ['autodocs'],
 }
 
 export default meta
@@ -190,7 +189,7 @@ export const WithSubmenu: Story = {
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
         <DropdownMenuItem>
-          <Github className="mr-2 h-4 w-4" />
+          <Globe className="mr-2 h-4 w-4" />
           <span>GitHub</span>
         </DropdownMenuItem>
         <DropdownMenuItem>
@@ -223,3 +222,63 @@ export const Simple: Story = {
     </DropdownMenu>
   ),
 }
+
+export const WithDestructiveAction: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Manage workspace</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-60">
+        <DropdownMenuLabel>Acme Corp</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <Settings className="mr-2 h-4 w-4" />
+          Workspace settings
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <Users className="mr-2 h-4 w-4" />
+          Members
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <CreditCard className="mr-2 h-4 w-4" />
+          Plan & billing
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="text-destructive focus:text-destructive">
+          <LogOut className="mr-2 h-4 w-4" />
+          Leave workspace
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+}
+
+export const RowActions: Story = {
+  render: () => (
+    <div className="flex w-[420px] items-center justify-between rounded-md border p-3">
+      <div className="flex items-center gap-3">
+        <Mail className="h-5 w-5 text-muted-foreground" />
+        <div>
+          <p className="text-sm font-medium">marketing@acme.com</p>
+          <p className="text-xs text-muted-foreground">Member · Editor</p>
+        </div>
+      </div>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon">
+            <Plus className="h-4 w-4 rotate-45" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem>Resend invite</DropdownMenuItem>
+          <DropdownMenuItem>Change role</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem className="text-destructive">
+            Remove from team
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  ),
+}