ai-design-system 0.1.0

package/components/primitives/Command/Command.stories.tsx

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+  CommandDialog,
+} from "./Command";
+import { useState } from "react";
+
+const meta: Meta<typeof Command> = {
+  title: "Primitives/Command",
+  component: Command,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A command menu component with fuzzy search and keyboard navigation. Perfect for command palettes.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Command>;
+
+export const Default: Story = {
+  render: () => (
+    <Command className="rounded-lg border shadow-md w-[450px]">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>Calendar</CommandItem>
+          <CommandItem>Search Emoji</CommandItem>
+          <CommandItem>Calculator</CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem>Profile</CommandItem>
+          <CommandItem>Billing</CommandItem>
+          <CommandItem>Settings</CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  ),
+};
+
+export const WithIcons: Story = {
+  render: () => (
+    <Command className="rounded-lg border shadow-md w-[450px]">
+      <CommandInput placeholder="Search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Actions">
+          <CommandItem>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+              <circle cx="12" cy="7" r="4" />
+            </svg>
+            <span>Profile</span>
+          </CommandItem>
+          <CommandItem>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <path d="M12 16v-4" />
+              <path d="M12 8h.01" />
+            </svg>
+            <span>Help</span>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  ),
+};
+
+export const WithShortcuts: Story = {
+  render: () => (
+    <Command className="rounded-lg border shadow-md w-[450px]">
+      <CommandInput placeholder="Search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="File">
+          <CommandItem>
+            <span>New File</span>
+            <CommandShortcut>⌘N</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <span>Save</span>
+            <CommandShortcut>⌘S</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <span>Print</span>
+            <CommandShortcut>⌘P</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  ),
+};
+
+export const AsDialog: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <>
+        <button
+          onClick={() => setOpen(true)}
+          className="px-4 py-2 bg-primary text-primary-foreground rounded-md"
+        >
+          Open Command Menu (⌘K)
+        </button>
+        <CommandDialog open={open} onOpenChange={setOpen}>
+          <CommandInput placeholder="Type a command or search..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Suggestions">
+              <CommandItem onSelect={() => setOpen(false)}>Calendar</CommandItem>
+              <CommandItem onSelect={() => setOpen(false)}>Search Emoji</CommandItem>
+              <CommandItem onSelect={() => setOpen(false)}>Calculator</CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </CommandDialog>
+      </>
+    );
+  },
+};

package/components/primitives/Command/Command.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import * as React from "react";
+import {
+  Command as ShadcnCommand,
+  CommandDialog as ShadcnCommandDialog,
+  CommandEmpty as ShadcnCommandEmpty,
+  CommandGroup as ShadcnCommandGroup,
+  CommandInput as ShadcnCommandInput,
+  CommandItem as ShadcnCommandItem,
+  CommandList as ShadcnCommandList,
+  CommandSeparator as ShadcnCommandSeparator,
+  CommandShortcut as ShadcnCommandShortcut,
+} from "@/components/ui/command";
+
+/**
+ * Command Primitive
+ *
+ * A command menu component for search and command palette functionality.
+ * Built on cmdk (Command+K) library with full keyboard navigation.
+ *
+ * Features:
+ * - Fast fuzzy search
+ * - Keyboard navigation
+ * - Command groups and shortcuts
+ * - Dialog mode for command palette
+ * - Empty state handling
+ * - WCAG 2.1 Level AA compliant
+ */
+
+export type CommandProps = React.ComponentProps<typeof ShadcnCommand>;
+export type CommandDialogProps = React.ComponentProps<typeof ShadcnCommandDialog>;
+export type CommandInputProps = React.ComponentProps<typeof ShadcnCommandInput>;
+export type CommandListProps = React.ComponentProps<typeof ShadcnCommandList>;
+export type CommandEmptyProps = React.ComponentProps<typeof ShadcnCommandEmpty>;
+export type CommandGroupProps = React.ComponentProps<typeof ShadcnCommandGroup>;
+export type CommandItemProps = React.ComponentProps<typeof ShadcnCommandItem>;
+export type CommandSeparatorProps = React.ComponentProps<typeof ShadcnCommandSeparator>;
+export type CommandShortcutProps = React.ComponentProps<typeof ShadcnCommandShortcut>;
+
+/**
+ * Command - Root command menu component
+ */
+export const Command = React.memo<CommandProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnCommand>, CommandProps>(
+    (props, ref) => {
+      return <ShadcnCommand ref={ref} {...props} />;
+    }
+  )
+);
+Command.displayName = "Command";
+
+/**
+ * CommandDialog - Command menu in a dialog (Command+K style)
+ */
+export const CommandDialog = React.memo<CommandDialogProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnCommandDialog>, CommandDialogProps>(
+    (props, ref) => {
+      return <ShadcnCommandDialog {...props} />;
+    }
+  )
+);
+CommandDialog.displayName = "CommandDialog";
+
+/**
+ * CommandInput - Search input for filtering commands
+ */
+export const CommandInput = React.memo<CommandInputProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnCommandInput>, CommandInputProps>(
+    (props, ref) => {
+      return <ShadcnCommandInput ref={ref} {...props} />;
+    }
+  )
+);
+CommandInput.displayName = "CommandInput";
+
+/**
+ * CommandList - Scrollable list container for command items
+ */
+export const CommandList = React.memo<CommandListProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnCommandList>, CommandListProps>(
+    (props, ref) => {
+      return <ShadcnCommandList ref={ref} {...props} />;
+    }
+  )
+);
+CommandList.displayName = "CommandList";
+
+/**
+ * CommandEmpty - Displayed when no results found
+ */
+export const CommandEmpty = React.memo<CommandEmptyProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnCommandEmpty>, CommandEmptyProps>(
+    (props, ref) => {
+      return <ShadcnCommandEmpty ref={ref} {...props} />;
+    }
+  )
+);
+CommandEmpty.displayName = "CommandEmpty";
+
+/**
+ * CommandGroup - Groups related command items
+ */
+export const CommandGroup = React.memo<CommandGroupProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnCommandGroup>, CommandGroupProps>(
+    (props, ref) => {
+      return <ShadcnCommandGroup ref={ref} {...props} />;
+    }
+  )
+);
+CommandGroup.displayName = "CommandGroup";
+
+/**
+ * CommandItem - Individual command item
+ */
+export const CommandItem = React.memo<CommandItemProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnCommandItem>, CommandItemProps>(
+    (props, ref) => {
+      return <ShadcnCommandItem ref={ref} {...props} />;
+    }
+  )
+);
+CommandItem.displayName = "CommandItem";
+
+/**
+ * CommandSeparator - Visual separator between groups
+ */
+export const CommandSeparator = React.memo<CommandSeparatorProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnCommandSeparator>, CommandSeparatorProps>(
+    (props, ref) => {
+      return <ShadcnCommandSeparator ref={ref} {...props} />;
+    }
+  )
+);
+CommandSeparator.displayName = "CommandSeparator";
+
+/**
+ * CommandShortcut - Displays keyboard shortcut hint
+ */
+export const CommandShortcut = React.memo<CommandShortcutProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnCommandShortcut>, CommandShortcutProps>(
+    (props, ref) => {
+      return <ShadcnCommandShortcut ref={ref} {...props} />;
+    }
+  )
+);
+CommandShortcut.displayName = "CommandShortcut";

package/components/primitives/Command/index.ts

@@ -0,0 +1,20 @@
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+  type CommandProps,
+  type CommandDialogProps,
+  type CommandEmptyProps,
+  type CommandGroupProps,
+  type CommandInputProps,
+  type CommandItemProps,
+  type CommandListProps,
+  type CommandSeparatorProps,
+  type CommandShortcutProps,
+} from "./Command";

package/components/primitives/Dialog/Dialog.stories.tsx

@@ -0,0 +1,390 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./Dialog"
+import { Button } from "../Button"
+import { Input } from "../Input"
+
+/**
+ * Dialog Primitive Stories
+ *
+ * The Dialog component provides an accessible modal overlay for focused user interactions.
+ * It's built on Radix UI Dialog primitive with comprehensive keyboard and screen reader support.
+ *
+ * ## Accessibility Features
+ * - Focus is trapped within the dialog when open
+ * - Focus returns to trigger element on close
+ * - Escape key closes the dialog
+ * - Screen reader announces dialog content
+ * - Proper ARIA attributes (role="dialog", aria-labelledby, aria-describedby)
+ *
+ * ## Usage Guidelines
+ * - Always include DialogTitle for accessibility (screen readers)
+ * - Use DialogDescription for additional context
+ * - Keep dialog content focused and concise
+ * - Provide clear action buttons in DialogFooter
+ * - Use for critical actions, confirmations, or complex forms
+ *
+ * ## When to Use
+ * - Collecting user input in a focused context
+ * - Displaying important information that requires user acknowledgment
+ * - Confirming destructive or important actions
+ * - Multi-step workflows that need isolation
+ *
+ * ## When NOT to Use
+ * - For simple notifications (use Toast or Alert instead)
+ * - For irreversible destructive actions (use AlertDialog instead)
+ * - For non-blocking information (use Popover or Tooltip instead)
+ */
+const meta = {
+  title: "Primitives/Dialog",
+  component: Dialog,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A modal dialog component with accessible focus management and keyboard navigation. Built on Radix UI Dialog primitive.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Dialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Default Dialog
+ *
+ * Basic dialog with title, description, and action buttons.
+ * This is the most common dialog pattern.
+ */
+export const Default: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Dialog Title</DialogTitle>
+          <DialogDescription>
+            This is a description that provides additional context about the
+            dialog's purpose.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          <p className="text-sm">
+            Dialog body content goes here. You can include any components or
+            information needed for this interaction.
+          </p>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button>Confirm</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+}
+
+/**
+ * Form Dialog
+ *
+ * Dialog containing a form with input fields.
+ * Useful for collecting structured user input.
+ */
+export const FormDialog: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Create Account</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create Account</DialogTitle>
+          <DialogDescription>
+            Enter your details to create a new account.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <label htmlFor="name" className="text-sm font-medium">
+              Name
+            </label>
+            <Input id="name" placeholder="Enter your name" />
+          </div>
+          <div className="grid gap-2">
+            <label htmlFor="email" className="text-sm font-medium">
+              Email
+            </label>
+            <Input id="email" type="email" placeholder="Enter your email" />
+          </div>
+          <div className="grid gap-2">
+            <label htmlFor="password" className="text-sm font-medium">
+              Password
+            </label>
+            <Input
+              id="password"
+              type="password"
+              placeholder="Enter your password"
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button type="submit">Create Account</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+}
+
+/**
+ * Confirmation Dialog
+ *
+ * Dialog for confirming user actions.
+ * Use clear action verbs in button labels.
+ */
+export const ConfirmationDialog: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Save Changes</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Are you sure?</DialogTitle>
+          <DialogDescription>
+            This will save all your changes and update the document.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          <p className="text-sm text-muted-foreground">
+            Your changes will be saved permanently and cannot be undone.
+          </p>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button>Save Changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+}
+
+/**
+ * No Close Button Dialog
+ *
+ * Dialog without the close button in the top-right corner.
+ * Forces user to use explicit action buttons.
+ */
+export const NoCloseButton: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent showCloseButton={false}>
+        <DialogHeader>
+          <DialogTitle>Action Required</DialogTitle>
+          <DialogDescription>
+            Please make a selection to continue.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          <p className="text-sm">
+            This dialog requires you to make an explicit choice using the
+            buttons below.
+          </p>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Decline</Button>
+          </DialogClose>
+          <DialogClose asChild>
+            <Button>Accept</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+}
+
+/**
+ * Scrollable Content Dialog
+ *
+ * Dialog with long content that requires scrolling.
+ * Content area automatically scrolls while header and footer remain fixed.
+ */
+export const ScrollableContent: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">View Terms</Button>
+      </DialogTrigger>
+      <DialogContent className="max-h-[80vh]">
+        <DialogHeader>
+          <DialogTitle>Terms and Conditions</DialogTitle>
+          <DialogDescription>
+            Please read our terms and conditions carefully.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="overflow-y-auto py-4 max-h-[50vh]">
+          {Array.from({ length: 20 }).map((_, i) => (
+            <p key={i} className="text-sm mb-4">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris.
+            </p>
+          ))}
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Decline</Button>
+          </DialogClose>
+          <Button>Accept</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+}
+
+/**
+ * Custom Width Dialog
+ *
+ * Dialog with custom width using className override.
+ * Default max-width is 'sm:max-w-lg'.
+ */
+export const CustomWidth: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Open Wide Dialog</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>Wide Dialog</DialogTitle>
+          <DialogDescription>
+            This dialog has a custom width to accommodate wider content.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          <p className="text-sm">
+            You can customize the dialog width by passing a className with
+            max-width utilities. This example uses 'sm:max-w-3xl'.
+          </p>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Close</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+}
+
+/**
+ * Controlled Dialog
+ *
+ * Dialog with controlled open state using React state.
+ * Useful when you need to programmatically control the dialog.
+ */
+export const ControlledDialog: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <>
+        <div className="flex gap-2">
+          <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+          <Button
+            variant="outline"
+            onClick={() => setOpen(false)}
+            disabled={!open}
+          >
+            Close Externally
+          </Button>
+        </div>
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Controlled Dialog</DialogTitle>
+              <DialogDescription>
+                This dialog's open state is controlled by React state.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="py-4">
+              <p className="text-sm">
+                You can control this dialog programmatically using the external
+                buttons.
+              </p>
+            </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setOpen(false)}>
+                Close
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </>
+    )
+  },
+}
+
+/**
+ * Dark Mode Dialog
+ *
+ * Dialog appearance in dark mode.
+ * All dialog styles are theme-aware and adapt to dark mode automatically.
+ */
+export const DarkMode: Story = {
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+  render: () => (
+    <div className="dark">
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="outline">Open Dialog</Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Dark Mode Dialog</DialogTitle>
+            <DialogDescription>
+              This dialog automatically adapts to dark mode.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-4">
+            <p className="text-sm">
+              All colors and contrast ratios are optimized for dark mode,
+              ensuring WCAG 2.1 Level AA compliance.
+            </p>
+          </div>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button>Confirm</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  ),
+}