@boostdev/design-system-components 0.1.1

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

@@ -0,0 +1,74 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DropdownMenu } from './DropdownMenu';
+
+const items = [
+  { id: 'edit', label: 'Edit', onClick: vi.fn() },
+  { id: 'duplicate', label: 'Duplicate', onClick: vi.fn() },
+  { id: 'delete', label: 'Delete', onClick: vi.fn(), disabled: true },
+];
+
+describe('DropdownMenu', () => {
+  it('renders the trigger', () => {
+    render(<DropdownMenu trigger={<button type="button">Actions</button>} items={items} />);
+    expect(screen.getByRole('button', { name: 'Actions' })).toBeInTheDocument();
+  });
+
+  it('does not show the menu by default', () => {
+    render(<DropdownMenu trigger={<button type="button">Actions</button>} items={items} />);
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+  });
+
+  it('shows the menu when trigger is clicked', async () => {
+    const user = userEvent.setup();
+    render(<DropdownMenu trigger={<button type="button">Actions</button>} items={items} />);
+    await user.click(screen.getByRole('button', { name: 'Actions' }));
+    expect(screen.getByRole('menu')).toBeInTheDocument();
+  });
+
+  it('renders all menu items', async () => {
+    const user = userEvent.setup();
+    render(<DropdownMenu trigger={<button type="button">Actions</button>} items={items} />);
+    await user.click(screen.getByRole('button', { name: 'Actions' }));
+    expect(screen.getByRole('menuitem', { name: 'Edit' })).toBeInTheDocument();
+    expect(screen.getByRole('menuitem', { name: 'Duplicate' })).toBeInTheDocument();
+  });
+
+  it('calls onClick and closes the menu when a menu item is clicked', async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <DropdownMenu
+        trigger={<button type="button">Actions</button>}
+        items={[{ id: 'edit', label: 'Edit', onClick }]}
+      />
+    );
+    await user.click(screen.getByRole('button', { name: 'Actions' }));
+    await user.click(screen.getByRole('menuitem', { name: 'Edit' }));
+    expect(onClick).toHaveBeenCalledOnce();
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+  });
+
+  it('disables a menu item when disabled is set', async () => {
+    const user = userEvent.setup();
+    render(<DropdownMenu trigger={<button type="button">Actions</button>} items={items} />);
+    await user.click(screen.getByRole('button', { name: 'Actions' }));
+    expect(screen.getByRole('menuitem', { name: 'Delete' })).toBeDisabled();
+  });
+
+  it('closes the menu when Escape is pressed', async () => {
+    const user = userEvent.setup();
+    render(<DropdownMenu trigger={<button type="button">Actions</button>} items={items} />);
+    await user.click(screen.getByRole('button', { name: 'Actions' }));
+    await user.keyboard('{Escape}');
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+  });
+
+  it('navigates items with arrow keys', async () => {
+    const user = userEvent.setup();
+    render(<DropdownMenu trigger={<button type="button">Actions</button>} items={items} />);
+    await user.click(screen.getByRole('button', { name: 'Actions' }));
+    await user.keyboard('{ArrowDown}');
+    expect(screen.getByRole('menuitem', { name: 'Duplicate' })).toHaveFocus();
+  });
+});

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

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DropdownMenu } from './DropdownMenu';
+
+const meta = {
+  title: 'Interaction/DropdownMenu',
+  component: DropdownMenu,
+  tags: ['autodocs'],
+  decorators: [
+    Story => (
+      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '2rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DropdownMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    items: [
+      { id: 'edit', label: 'Edit' },
+      { id: 'duplicate', label: 'Duplicate' },
+      { id: 'delete', label: 'Delete' },
+    ],
+  },
+  render: args => (
+    <DropdownMenu {...args} trigger={<button type="button">Actions ▾</button>} />
+  ),
+};
+
+export const WithDisabledItem: Story = {
+  render: () => (
+    <DropdownMenu
+      trigger={<button type="button">Options ▾</button>}
+      items={[
+        { id: 'view', label: 'View' },
+        { id: 'edit', label: 'Edit' },
+        { id: 'delete', label: 'Delete (unavailable)', disabled: true },
+      ]}
+    />
+  ),
+};
+
+export const WithSeparator: Story = {
+  render: () => (
+    <DropdownMenu
+      trigger={<button type="button">File ▾</button>}
+      items={[
+        { id: 'new', label: 'New' },
+        { id: 'open', label: 'Open' },
+        { id: 'save', label: 'Save', separator: true },
+        { id: 'export', label: 'Export' },
+      ]}
+    />
+  ),
+};
+
+export const AlignedEnd: Story = {
+  render: () => (
+    <DropdownMenu
+      trigger={<button type="button">⋮</button>}
+      items={[{ id: 'copy', label: 'Copy link' }, { id: 'report', label: 'Report' }]}
+      placement="bottom-end"
+    />
+  ),
+};

package/src/components/interaction/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,137 @@
+import {
+  KeyboardEvent,
+  ReactElement,
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react';
+import css from './DropdownMenu.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface DropdownMenuItem {
+  id: string;
+  label: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  icon?: ReactElement;
+  separator?: boolean;
+}
+
+interface DropdownMenuProps {
+  trigger: ReactElement;
+  items: DropdownMenuItem[];
+  placement?: 'bottom-start' | 'bottom-end';
+  className?: string;
+}
+
+export function DropdownMenu({
+  trigger,
+  items,
+  placement = 'bottom-start',
+  className,
+}: Readonly<DropdownMenuProps>) {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const menuId = useId();
+  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const open = () => {
+    setIsOpen(true);
+  };
+
+  const close = () => setIsOpen(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      itemRefs.current[0]?.focus();
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handlePointerDown = (e: PointerEvent) => {
+      if (!containerRef.current?.contains(e.target as Node)) close();
+    };
+    const handleKeyDown = (e: globalThis.KeyboardEvent) => {
+      if (e.key === 'Escape') close();
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen]);
+
+  const handleItemKeyDown = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {
+    const enabledIndexes = items
+      .map((item, i) => ({ item, i }))
+      .filter(({ item }) => !item.disabled)
+      .map(({ i }) => i);
+    const pos = enabledIndexes.indexOf(index);
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      itemRefs.current[enabledIndexes[(pos + 1) % enabledIndexes.length]]?.focus();
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      itemRefs.current[enabledIndexes[(pos - 1 + enabledIndexes.length) % enabledIndexes.length]]?.focus();
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      itemRefs.current[enabledIndexes[0]]?.focus();
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      itemRefs.current[enabledIndexes[enabledIndexes.length - 1]]?.focus();
+    } else if (e.key === 'Tab') {
+      close();
+    }
+  };
+
+  const triggerEl = isValidElement(trigger)
+    ? cloneElement(trigger as ReactElement<Record<string, unknown>>, {
+        'aria-haspopup': 'menu',
+        'aria-expanded': isOpen,
+        'aria-controls': menuId,
+        onClick: (e: MouseEvent) => {
+          if (isOpen) { close(); } else { open(); }
+          const existingOnClick = (trigger.props as Record<string, unknown>).onClick;
+          if (typeof existingOnClick === 'function') existingOnClick(e);
+        },
+      })
+    : trigger;
+
+  return (
+    <div ref={containerRef} className={cn(css.wrapper, className)}>
+      {triggerEl}
+      {isOpen && (
+        <ul
+          id={menuId}
+          role="menu"
+          className={cn(css.menu, css[`--placement_${placement}`])}
+        >
+          {items.map((item, index) => (
+            <li key={item.id} role="presentation">
+              {item.separator && <hr className={css.separator} role="separator" />}
+              <button
+                ref={el => { itemRefs.current[index] = el; }}
+                type="button"
+                role="menuitem"
+                disabled={item.disabled}
+                className={css.item}
+                onClick={() => { item.onClick?.(); close(); }}
+                onKeyDown={e => handleItemKeyDown(e, index)}
+              >
+                {item.icon && <span className={css.icon} aria-hidden="true">{item.icon}</span>}
+                {item.label}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,39 @@
+@layer component {
+  .wrapper {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .panel {
+    position: absolute;
+    z-index: var(--z-index_popover);
+    min-width: 12rem;
+    padding: var(--space_m);
+    border-radius: var(--border_radius--s);
+    border: 1px solid var(--color_bg--subtle);
+    background-color: var(--color_bg);
+    box-shadow: var(--shadow_m);
+    color: var(--color_on-bg);
+    font-size: var(--font_size--body);
+  }
+
+  .--placement_bottom {
+    top: calc(100% + var(--space_xs));
+    left: 0;
+  }
+
+  .--placement_top {
+    bottom: calc(100% + var(--space_xs));
+    left: 0;
+  }
+
+  .--placement_right {
+    left: calc(100% + var(--space_xs));
+    top: 0;
+  }
+
+  .--placement_left {
+    right: calc(100% + var(--space_xs));
+    top: 0;
+  }
+}

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

@@ -0,0 +1,72 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Popover } from './Popover';
+
+describe('Popover', () => {
+  it('renders the trigger', () => {
+    render(
+      <Popover content={<p>Panel content</p>}>
+        <button type="button">Open</button>
+      </Popover>
+    );
+    expect(screen.getByRole('button', { name: 'Open' })).toBeInTheDocument();
+  });
+
+  it('does not show the panel by default', () => {
+    render(
+      <Popover content={<p>Panel content</p>}>
+        <button type="button">Open</button>
+      </Popover>
+    );
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('shows the panel when trigger is clicked', async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover content={<p>Panel content</p>}>
+        <button type="button">Open</button>
+      </Popover>
+    );
+    await user.click(screen.getByRole('button', { name: 'Open' }));
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText('Panel content')).toBeInTheDocument();
+  });
+
+  it('closes the panel when trigger is clicked again', async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover content={<p>Panel content</p>}>
+        <button type="button">Toggle</button>
+      </Popover>
+    );
+    await user.click(screen.getByRole('button', { name: 'Toggle' }));
+    await user.click(screen.getByRole('button', { name: 'Toggle' }));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('closes the panel when Escape is pressed', async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover content={<p>Panel content</p>}>
+        <button type="button">Open</button>
+      </Popover>
+    );
+    await user.click(screen.getByRole('button', { name: 'Open' }));
+    await user.keyboard('{Escape}');
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('sets aria-expanded on the trigger when open', async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover content={<p>Panel</p>}>
+        <button type="button">Open</button>
+      </Popover>
+    );
+    const trigger = screen.getByRole('button');
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+  });
+});

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

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Popover } from './Popover';
+
+const meta = {
+  title: 'Interaction/Popover',
+  component: Popover,
+  tags: ['autodocs'],
+  argTypes: {
+    placement: { control: 'radio', options: ['top', 'bottom', 'left', 'right'] },
+  },
+  decorators: [
+    Story => (
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '6rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { placement: 'bottom', content: <p style={{ margin: 0 }}>This is a popover with rich content.</p> },
+  render: args => (
+    <Popover {...args}>
+      <button type="button">Open popover</button>
+    </Popover>
+  ),
+};
+
+export const WithForm: Story = {
+  render: () => (
+    <Popover
+      placement="bottom"
+      content={
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+          <strong>Filter options</strong>
+          <label><input type="checkbox" /> Show archived</label>
+          <label><input type="checkbox" /> Show drafts</label>
+        </div>
+      }
+    >
+      <button type="button">Filters</button>
+    </Popover>
+  ),
+};

package/src/components/interaction/Popover/Popover.tsx

@@ -0,0 +1,78 @@
+import {
+  ReactElement,
+  ReactNode,
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react';
+import css from './Popover.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface PopoverProps {
+  children: ReactElement;
+  content: ReactNode;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  className?: string;
+}
+
+export function Popover({
+  children,
+  content,
+  placement = 'bottom',
+  className,
+}: Readonly<PopoverProps>) {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLSpanElement>(null);
+  const panelId = useId();
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handlePointerDown = (e: PointerEvent) => {
+      if (!containerRef.current?.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsOpen(false);
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen]);
+
+  const trigger = isValidElement(children)
+    ? cloneElement(children as ReactElement<Record<string, unknown>>, {
+        'aria-expanded': isOpen,
+        'aria-controls': panelId,
+        onClick: (e: MouseEvent) => {
+          setIsOpen(prev => !prev);
+          const existingOnClick = (children.props as Record<string, unknown>).onClick;
+          if (typeof existingOnClick === 'function') existingOnClick(e);
+        },
+      })
+    : children;
+
+  return (
+    <span ref={containerRef} className={cn(css.wrapper, className)}>
+      {trigger}
+      {isOpen && (
+        <div
+          id={panelId}
+          role="dialog"
+          aria-modal="false"
+          className={cn(css.panel, css[`--placement_${placement}`])}
+        >
+          {content}
+        </div>
+      )}
+    </span>
+  );
+}

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

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

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

@@ -0,0 +1,16 @@
+@layer component {
+  .rating {
+    display: inline-flex;
+    gap: var(--space_xxxs);
+    color: var(--color_bg);
+  }
+
+  .star {
+    width: 1.5em;
+    height: 1.5em;
+  }
+
+  .--filled {
+    color: var(--color_warning);
+  }
+}

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

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import { Rating } from './Rating';
+
+describe('Rating', () => {
+  it('renders with role img', () => {
+    render(<Rating value={3} />);
+    expect(screen.getByRole('img')).toBeInTheDocument();
+  });
+
+  it('has an accessible aria-label with value and max', () => {
+    render(<Rating value={3} max={5} />);
+    expect(screen.getByRole('img')).toHaveAttribute('aria-label', '3 out of 5 stars');
+  });
+
+  it('renders max number of stars', () => {
+    render(<Rating value={2} max={4} />);
+    const container = screen.getByRole('img');
+    expect(container.querySelectorAll('svg')).toHaveLength(4);
+  });
+
+  it('uses default max of 5', () => {
+    render(<Rating value={0} />);
+    expect(screen.getByRole('img')).toHaveAttribute('aria-label', '0 out of 5 stars');
+  });
+
+  it('accepts a custom className', () => {
+    render(<Rating value={3} className="custom" />);
+    expect(screen.getByRole('img')).toHaveClass('custom');
+  });
+});

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

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Rating } from './Rating';
+
+const meta = {
+  title: 'Interaction/Rating',
+  component: Rating,
+  tags: ['autodocs'],
+  argTypes: {
+    value: { control: { type: 'range', min: 0, max: 5, step: 1 } },
+    max: { control: { type: 'number' } },
+  },
+} satisfies Meta<typeof Rating>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ThreeStars: Story = { args: { value: 3, max: 5 } };
+export const FullStars: Story = { args: { value: 5, max: 5 } };
+export const Empty: Story = { args: { value: 0, max: 5 } };
+export const CustomMax: Story = { args: { value: 3, max: 10 } };
+export const AllRatings: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      {[0, 1, 2, 3, 4, 5].map(v => (
+        <Rating key={v} value={v} max={5} />
+      ))}
+    </div>
+  ),
+};

package/src/components/interaction/Rating/Rating.tsx

@@ -0,0 +1,30 @@
+import css from './Rating.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface RatingProps {
+  value: number;
+  max?: number;
+  className?: string;
+}
+
+export function Rating({ value, max = 5, className }: RatingProps) {
+  return (
+    <div
+      className={cn(css.rating, className)}
+      role="img"
+      aria-label={`${value} out of ${max} stars`}
+    >
+      {Array.from({ length: max }).map((_, i) => (
+        <svg
+          key={i}
+          aria-hidden="true"
+          className={cn(css.star, i < value && css['--filled'])}
+          fill="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
+        </svg>
+      ))}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,48 @@
+@layer component {
+  .toastContainer {
+    position: fixed;
+    bottom: var(--space_xl);
+    right: var(--space_xl);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space_m);
+    z-index: var(--z-index_toast);
+  }
+
+  .toast {
+    padding: var(--space_m) var(--space_l);
+    background-color: var(--color_bg);
+    color: var(--color_on-bg);
+    border-radius: var(--border_radius--s);
+    box-shadow: var(--shadow_s);
+    display: flex;
+    align-items: center;
+    gap: var(--space_m);
+    min-width: 300px;
+    animation: slideIn var(--animation_duration--fast) var(--animation_easing);
+  }
+
+  .--variant_success {
+    border-left: 4px solid var(--color_success);
+  }
+
+  .--variant_error {
+    border-left: 4px solid var(--color_error);
+  }
+
+  .--variant_info {
+    border-left: 4px solid var(--color_interactive);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}