@boostdev/design-system-components 0.1.1

package/src/components/interaction/Command/Command.tsx

@@ -0,0 +1,161 @@
+import { useState, useEffect, useRef, useId, KeyboardEvent, useMemo } from 'react';
+import css from './Command.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+export interface CommandItem {
+  id: string;
+  label: string;
+  description?: string;
+  group?: string;
+  shortcut?: string;
+  onSelect: () => void;
+}
+
+interface CommandProps {
+  isOpen: boolean;
+  onClose: () => void;
+  items: CommandItem[];
+  placeholder?: string;
+  className?: string;
+}
+
+export function Command({
+  isOpen,
+  onClose,
+  items,
+  placeholder = 'Search commands…',
+  className,
+}: Readonly<CommandProps>) {
+  const [query, setQuery] = useState('');
+  const [activeIndex, setActiveIndex] = useState(0);
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listboxId = useId();
+
+  const filtered = useMemo(() => {
+    const q = query.toLowerCase().trim();
+    return q ? items.filter(item =>
+      item.label.toLowerCase().includes(q) ||
+      item.description?.toLowerCase().includes(q)
+    ) : items;
+  }, [query, items]);
+
+  const groups = useMemo(() => {
+    const map = new Map<string, CommandItem[]>();
+    filtered.forEach(item => {
+      const g = item.group ?? '';
+      const list = map.get(g) ?? [];
+      list.push(item);
+      map.set(g, list);
+    });
+    return map;
+  }, [filtered]);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (isOpen) {
+      dialog.showModal();
+      setQuery('');
+      setActiveIndex(0);
+      setTimeout(() => inputRef.current?.focus(), 0);
+    } else if (dialog.open) {
+      dialog.close();
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [query]);
+
+  const handleCancel = (e: React.SyntheticEvent) => {
+    e.preventDefault();
+    onClose();
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActiveIndex(i => Math.min(i + 1, filtered.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActiveIndex(i => Math.max(i - 1, 0));
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      filtered[activeIndex]?.onSelect();
+      onClose();
+    } else if (e.key === 'Escape') {
+      onClose();
+    }
+  };
+
+  const selectItem = (item: CommandItem) => {
+    item.onSelect();
+    onClose();
+  };
+
+  return (
+    <dialog
+      ref={dialogRef}
+      className={cn(css.dialog, className)}
+      aria-label="Command palette"
+      onCancel={handleCancel}
+    >
+      <div className={css.palette} onKeyDown={handleKeyDown}>
+        <div className={css.searchRow}>
+          <svg aria-hidden="true" className={css.searchIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <circle cx="11" cy="11" r="8" />
+            <path strokeLinecap="round" d="M21 21l-4.35-4.35" />
+          </svg>
+          <input
+            ref={inputRef}
+            type="search"
+            role="combobox"
+            aria-expanded={filtered.length > 0}
+            aria-controls={listboxId}
+            aria-autocomplete="list"
+            aria-activedescendant={filtered[activeIndex] ? `cmd-${filtered[activeIndex].id}` : undefined}
+            className={css.search}
+            placeholder={placeholder}
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+          />
+          <kbd className={css.escHint}>Esc</kbd>
+        </div>
+
+        {filtered.length > 0 ? (
+          <ul id={listboxId} role="listbox" className={css.list} aria-label="Commands">
+            {Array.from(groups.entries()).map(([group, groupItems]) => (
+              <li key={group} role="presentation">
+                {group && <div className={css.group} role="presentation">{group}</div>}
+                <ul role="group" aria-label={group || undefined} className={css.groupList}>
+                  {groupItems.map(item => {
+                    const flatIndex = filtered.indexOf(item);
+                    const isActive = flatIndex === activeIndex;
+                    return (
+                      <li
+                        key={item.id}
+                        id={`cmd-${item.id}`}
+                        role="option"
+                        aria-selected={isActive}
+                        className={cn(css.item, isActive && css.itemActive)}
+                        onPointerDown={e => e.preventDefault()}
+                        onClick={() => selectItem(item)}
+                      >
+                        <span className={css.itemLabel}>{item.label}</span>
+                        {item.description && <span className={css.itemDesc}>{item.description}</span>}
+                        {item.shortcut && <kbd className={css.shortcut}>{item.shortcut}</kbd>}
+                      </li>
+                    );
+                  })}
+                </ul>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <div className={css.empty} aria-live="polite">No results for &ldquo;{query}&rdquo;</div>
+        )}
+      </div>
+    </dialog>
+  );
+}

package/src/components/interaction/Command/index.ts

@@ -0,0 +1,2 @@
+export { Command } from './Command';
+export type { CommandItem } from './Command';

package/src/components/interaction/Dialog/Dialog.module.css

@@ -0,0 +1,39 @@
+@layer component {
+  .dialog {
+    display: grid;
+    gap: var(--grid_gap);
+    font-size: var(--font_size--body--s);
+    border: 2px solid currentcolor;
+    background-color: var(--color_grey--subtle);
+    color: var(--color_on-grey--subtle);
+    border-radius: var(--border_radius--m);
+    padding: var(--space_l);
+    overflow: visible;
+    max-width: 90svw;
+  }
+
+  .closeForm {
+    position: absolute;
+    inset-block-start: -1em;
+    inset-inline-end: -1em;
+  }
+
+  .closeButton {
+    all: unset;
+    width: 2em;
+    height: 2em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: var(--color_bg);
+    color: var(--color_on-bg);
+    border: 2px solid currentcolor;
+    cursor: pointer;
+  }
+
+  .closeButton svg {
+    width: 1.25em;
+    height: 1.25em;
+  }
+}

package/src/components/interaction/Dialog/Dialog.spec.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Dialog } from './Dialog';
+
+beforeEach(() => {
+  // jsdom doesn't implement showModal/close — mock them and simulate the open attribute
+  HTMLDialogElement.prototype.showModal = vi.fn(function (this: HTMLDialogElement) {
+    this.setAttribute('open', '');
+  });
+  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
+    this.removeAttribute('open');
+  });
+});
+
+describe('Dialog', () => {
+  it('renders children', () => {
+    render(<Dialog isVisible><p>Dialog content</p></Dialog>);
+    expect(screen.getByText('Dialog content')).toBeInTheDocument();
+  });
+
+  it('calls showModal when isVisible becomes true', () => {
+    render(<Dialog isVisible><span>Content</span></Dialog>);
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalled();
+  });
+
+  it('renders a close button with aria-label', () => {
+    render(<Dialog isVisible><span>Content</span></Dialog>);
+    expect(screen.getByRole('button', { name: /close dialog/i })).toBeInTheDocument();
+  });
+
+  it('calls handleClose when close button is clicked', async () => {
+    const user = userEvent.setup();
+    const handleClose = vi.fn();
+    render(<Dialog isVisible handleClose={handleClose}><span>Content</span></Dialog>);
+    await user.click(screen.getByRole('button', { name: /close dialog/i }));
+    expect(handleClose).toHaveBeenCalled();
+  });
+
+  it('does not call showModal when isVisible is false', () => {
+    render(<Dialog isVisible={false}><span>Content</span></Dialog>);
+    expect(HTMLDialogElement.prototype.showModal).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Dialog } from './Dialog';
+import { Button } from '../Button/Button';
+
+const meta = {
+  title: 'Interaction/Dialog',
+  component: Dialog,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    isVisible: true,
+    children: <p>This is dialog content.</p>,
+  },
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+        <Dialog isVisible={open} handleClose={() => setOpen(false)}>
+          <h2>Dialog Title</h2>
+          <p>This is the dialog body content.</p>
+          <Button onClick={() => setOpen(false)}>Close</Button>
+        </Dialog>
+      </>
+    );
+  },
+};

package/src/components/interaction/Dialog/Dialog.tsx

@@ -0,0 +1,42 @@
+import { ReactNode, useEffect, useRef } from 'react';
+import css from './Dialog.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface DialogProps {
+  children: ReactNode;
+  className?: string;
+  isVisible?: boolean;
+  handleClose?: () => void;
+}
+
+export function Dialog({ children, isVisible = false, className, handleClose }: DialogProps) {
+  const dialogRef = useRef<HTMLDialogElement | null>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (isVisible) {
+      dialog.showModal();
+    } else if (dialog.open) {
+      dialog.close();
+    }
+  }, [isVisible]);
+
+  return (
+    <dialog ref={dialogRef} className={cn(className, css.dialog)}>
+      <form method="dialog" className={css.closeForm}>
+        <button
+          type="submit"
+          className={css.closeButton}
+          onClick={handleClose}
+          aria-label="Close dialog"
+        >
+          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M18 6L6 18M6 6l12 12" />
+          </svg>
+        </button>
+      </form>
+      {children}
+    </dialog>
+  );
+}

package/src/components/interaction/Dialog/index.ts

@@ -0,0 +1 @@
+export { Dialog } from './Dialog';

package/src/components/interaction/Drawer/Drawer.module.css

@@ -0,0 +1,98 @@
+@layer component {
+  .drawer {
+    position: fixed;
+    inset: 0;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    border: none;
+    background: transparent;
+    overflow: hidden;
+  }
+
+  .drawer::backdrop {
+    background: rgb(0 0 0 / 50%);
+  }
+
+  .panel {
+    position: absolute;
+    inset-block: 0;
+    display: flex;
+    flex-direction: column;
+    width: min(28rem, 90vw);
+    height: 100%;
+    background-color: var(--color_bg);
+    color: var(--color_on-bg);
+    box-shadow: var(--shadow_xl);
+    overflow: hidden;
+    transition: transform var(--animation_transition-duration) var(--animation_easing);
+  }
+
+  .--side_right .panel {
+    inset-inline-end: 0;
+  }
+
+  .--side_left .panel {
+    inset-inline-start: 0;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space_m) var(--space_l);
+    border-block-end: 1px solid var(--color_bg--subtle);
+    flex-shrink: 0;
+  }
+
+  .title {
+    margin: 0;
+    font-size: var(--font_size--heading--s);
+    font-weight: var(--font_weight--semibold);
+    line-height: var(--font_line-height--heading);
+  }
+
+  .closeButton {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    cursor: pointer;
+    color: var(--color_on-bg);
+    transition: var(--animation_transition);
+  }
+
+  .closeButton svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .closeButton:focus-visible {
+    outline: var(--outline_default);
+    outline-offset: var(--outline_offset);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .closeButton:hover {
+      background-color: var(--color_bg--subtle);
+    }
+  }
+
+  .body {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space_l);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .panel {
+      transition: none;
+    }
+  }
+}

package/src/components/interaction/Drawer/Drawer.spec.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Drawer } from './Drawer';
+
+// jsdom doesn't implement showModal/close, mock them
+beforeEach(() => {
+  HTMLDialogElement.prototype.showModal = vi.fn().mockImplementation(function (this: HTMLDialogElement) {
+    this.setAttribute('open', '');
+  });
+  HTMLDialogElement.prototype.close = vi.fn().mockImplementation(function (this: HTMLDialogElement) {
+    this.removeAttribute('open');
+  });
+});
+
+describe('Drawer', () => {
+  it('renders title when open', () => {
+    render(<Drawer isOpen title="Settings" onClose={() => {}}>Content</Drawer>);
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+  });
+
+  it('renders children content', () => {
+    render(<Drawer isOpen title="Menu" onClose={() => {}}>Navigation items</Drawer>);
+    expect(screen.getByText('Navigation items')).toBeInTheDocument();
+  });
+
+  it('calls onClose when close button clicked', async () => {
+    const onClose = vi.fn();
+    render(<Drawer isOpen title="Menu" onClose={onClose}>Content</Drawer>);
+    await userEvent.click(screen.getByRole('button', { name: 'Close drawer' }));
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('shows the dialog when isOpen is true', () => {
+    render(<Drawer isOpen title="Open" onClose={() => {}}>Body</Drawer>);
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalled();
+  });
+
+  it('closes the dialog when isOpen is false', () => {
+    const { rerender } = render(<Drawer isOpen title="Test" onClose={() => {}}>Body</Drawer>);
+    rerender(<Drawer isOpen={false} title="Test" onClose={() => {}}>Body</Drawer>);
+    expect(HTMLDialogElement.prototype.close).toHaveBeenCalled();
+  });
+});

package/src/components/interaction/Drawer/Drawer.stories.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Drawer } from './Drawer';
+
+const meta = {
+  title: 'Interaction/Drawer',
+  component: Drawer,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Right: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>Open right drawer</button>
+        <Drawer isOpen={open} onClose={() => setOpen(false)} title="Settings" side="right">
+          <p>Drawer content goes here. You can put any React content inside.</p>
+        </Drawer>
+      </>
+    );
+  },
+};
+
+export const Left: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>Open left drawer</button>
+        <Drawer isOpen={open} onClose={() => setOpen(false)} title="Navigation" side="left">
+          <nav>
+            <ul>
+              <li><a href="#">Home</a></li>
+              <li><a href="#">About</a></li>
+              <li><a href="#">Contact</a></li>
+            </ul>
+          </nav>
+        </Drawer>
+      </>
+    );
+  },
+};

package/src/components/interaction/Drawer/Drawer.tsx

@@ -0,0 +1,71 @@
+import { ReactNode, useEffect, useRef } from 'react';
+import css from './Drawer.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+  side?: 'left' | 'right';
+  className?: string;
+}
+
+export function Drawer({
+  isOpen,
+  onClose,
+  title,
+  children,
+  side = 'right',
+  className,
+}: Readonly<DrawerProps>) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (isOpen) {
+      dialog.showModal();
+    } else if (dialog.open) {
+      dialog.close();
+    }
+  }, [isOpen]);
+
+  // Close on backdrop click
+  const handleClick = (e: React.MouseEvent<HTMLDialogElement>) => {
+    if (e.target === dialogRef.current) onClose();
+  };
+
+  // Close on Escape (dialog handles it natively, but we sync state)
+  const handleCancel = (e: React.SyntheticEvent) => {
+    e.preventDefault();
+    onClose();
+  };
+
+  return (
+    <dialog
+      ref={dialogRef}
+      className={cn(css.drawer, css[`--side_${side}`], className)}
+      aria-label={title}
+      onClick={handleClick}
+      onCancel={handleCancel}
+    >
+      <div className={css.panel}>
+        <div className={css.header}>
+          <h2 className={css.title}>{title}</h2>
+          <button
+            type="button"
+            className={css.closeButton}
+            onClick={onClose}
+            aria-label="Close drawer"
+          >
+            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div className={css.body}>{children}</div>
+      </div>
+    </dialog>
+  );
+}

package/src/components/interaction/Drawer/index.ts

@@ -0,0 +1 @@
+export { Drawer } from './Drawer';

package/src/components/interaction/DropdownMenu/DropdownMenu.module.css

@@ -0,0 +1,68 @@
+@layer component {
+  .wrapper {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .menu {
+    position: absolute;
+    top: calc(100% + var(--space_xxs));
+    z-index: var(--z-index_dropdown);
+    min-width: 10rem;
+    padding: var(--space_xxs) 0;
+    border-radius: var(--border_radius--s);
+    border: 1px solid var(--color_bg--subtle);
+    background-color: var(--color_bg);
+    box-shadow: var(--shadow_m);
+    list-style: none;
+    margin: 0;
+  }
+
+  .--placement_bottom-start { left: 0; }
+  .--placement_bottom-end   { right: 0; }
+
+  .separator {
+    border: none;
+    border-top: 1px solid var(--color_bg--subtle);
+    margin: var(--space_xxs) 0;
+  }
+
+  .item {
+    all: unset;
+    display: flex;
+    align-items: center;
+    gap: var(--space_xs);
+    width: 100%;
+    padding: var(--space_xs) var(--space_m);
+    font-family: var(--font_family--body);
+    font-size: var(--font_size--body);
+    color: var(--color_on-bg);
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: var(--animation_transition);
+  }
+
+  .item:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .item:focus-visible {
+    outline: var(--outline_default);
+    outline-offset: calc(var(--outline_offset) * -1);
+    border-radius: var(--border_radius--xs);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .item:not(:disabled):hover {
+      background-color: var(--color_bg--subtle);
+      color: var(--color_interactive);
+    }
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+}