@boostdev/design-system-components 0.1.1

package/src/components/ui/Table/Table.module.css

@@ -0,0 +1,111 @@
+@layer component {
+  .wrapper {
+    width: 100%;
+    overflow-x: auto;
+    border-radius: var(--border_radius--s);
+    border: 1px solid var(--color_bg--subtle);
+  }
+
+  .table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--font_size--body);
+    font-family: var(--font_family--body);
+  }
+
+  .caption {
+    caption-side: top;
+    text-align: start;
+    padding: var(--space_s) var(--space_m);
+    font-weight: var(--font_weight--semibold);
+    color: var(--color_on-bg);
+  }
+
+  .thead {
+    background-color: var(--color_bg--subtle);
+  }
+
+  .th {
+    padding: var(--space_s) var(--space_m);
+    text-align: start;
+    font-weight: var(--font_weight--semibold);
+    font-size: var(--font_size--body--s);
+    color: var(--color_on-bg--subtle);
+    white-space: nowrap;
+    border-bottom: 1px solid var(--color_bg--subtle);
+  }
+
+  .th.--sortable {
+    padding: 0;
+  }
+
+  .sortButton {
+    all: unset;
+    display: flex;
+    align-items: center;
+    gap: var(--space_xxs);
+    padding: var(--space_s) var(--space_m);
+    width: 100%;
+    cursor: pointer;
+    color: var(--color_on-bg--subtle);
+    font-weight: var(--font_weight--semibold);
+    font-size: var(--font_size--body--s);
+    transition: var(--animation_transition);
+    box-sizing: border-box;
+  }
+
+  .sortButton:focus-visible {
+    outline: var(--outline_default);
+    outline-offset: calc(var(--outline_offset) * -1);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .sortButton:hover {
+      color: var(--color_on-bg);
+    }
+  }
+
+  .sortIcon {
+    width: 1rem;
+    height: 1rem;
+    opacity: 0.4;
+    transition: transform var(--animation_transition-duration) var(--animation_easing),
+      opacity var(--animation_transition-duration) var(--animation_easing);
+  }
+
+  .sortIcon.--sort-active {
+    opacity: 1;
+    color: var(--color_interactive);
+  }
+
+  .sortIcon.--sort-desc {
+    transform: rotate(180deg);
+  }
+
+  .tbody .tr {
+    border-bottom: 1px solid var(--color_bg--subtle);
+    transition: var(--animation_transition);
+  }
+
+  .tbody .tr:last-child {
+    border-bottom: none;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .tbody .tr:hover {
+      background-color: var(--color_bg--subtle);
+    }
+  }
+
+  .td {
+    padding: var(--space_s) var(--space_m);
+    color: var(--color_on-bg);
+    vertical-align: middle;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sortIcon {
+      transition: none;
+    }
+  }
+}

package/src/components/ui/Table/Table.spec.tsx

@@ -0,0 +1,69 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Table } from './Table';
+
+const columns = [
+  { key: 'name', header: 'Name' },
+  { key: 'role', header: 'Role', sortable: true },
+  { key: 'status', header: 'Status', render: (row: Record<string, unknown>) => <span>{String(row.status)}</span> },
+];
+
+const rows = [
+  { name: 'Alice', role: 'Admin', status: 'Active' },
+  { name: 'Bob', role: 'User', status: 'Inactive' },
+];
+
+describe('Table', () => {
+  it('renders a table element', () => {
+    render(<Table columns={columns} rows={rows} />);
+    expect(screen.getByRole('table')).toBeInTheDocument();
+  });
+
+  it('renders column headers', () => {
+    render(<Table columns={columns} rows={rows} />);
+    expect(screen.getByRole('columnheader', { name: 'Name' })).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: /Role/i })).toBeInTheDocument();
+  });
+
+  it('renders row data', () => {
+    render(<Table columns={columns} rows={rows} />);
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+  });
+
+  it('uses custom render function', () => {
+    render(<Table columns={columns} rows={rows} />);
+    expect(screen.getByText('Active')).toBeInTheDocument();
+  });
+
+  it('renders a caption when provided', () => {
+    render(<Table columns={columns} rows={rows} caption="Team members" />);
+    expect(screen.getByText('Team members')).toBeInTheDocument();
+  });
+
+  it('renders a sort button for sortable columns', () => {
+    render(<Table columns={columns} rows={rows} onSort={() => {}} />);
+    expect(screen.getByRole('button', { name: /Role/i })).toBeInTheDocument();
+  });
+
+  it('calls onSort when a sortable column header is clicked', async () => {
+    const user = userEvent.setup();
+    const onSort = vi.fn();
+    render(<Table columns={columns} rows={rows} onSort={onSort} />);
+    await user.click(screen.getByRole('button', { name: /Role/i }));
+    expect(onSort).toHaveBeenCalledWith('role', 'asc');
+  });
+
+  it('toggles sort direction on second click', async () => {
+    const user = userEvent.setup();
+    const onSort = vi.fn();
+    render(<Table columns={columns} rows={rows} sortKey="role" sortDirection="asc" onSort={onSort} />);
+    await user.click(screen.getByRole('button', { name: /Role/i }));
+    expect(onSort).toHaveBeenCalledWith('role', 'desc');
+  });
+
+  it('sets aria-sort on the active sorted column', () => {
+    render(<Table columns={columns} rows={rows} sortKey="role" sortDirection="asc" onSort={() => {}} />);
+    expect(screen.getByRole('columnheader', { name: /Role/i })).toHaveAttribute('aria-sort', 'ascending');
+  });
+});

package/src/components/ui/Table/Table.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Table } from './Table';
+
+type User = { name: string; role: string; status: string; joined: string };
+
+const meta = {
+  title: 'UI/Table',
+  component: Table,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Table<User>>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const rows: User[] = [
+  { name: 'Alice Johnson', role: 'Admin', status: 'Active', joined: '2023-01-15' },
+  { name: 'Bob Smith', role: 'User', status: 'Inactive', joined: '2023-04-22' },
+  { name: 'Carol White', role: 'Editor', status: 'Active', joined: '2024-02-10' },
+];
+
+const columns = [
+  { key: 'name', header: 'Name', sortable: true },
+  { key: 'role', header: 'Role', sortable: true },
+  { key: 'status', header: 'Status', render: (row: User) => (
+    <span style={{ color: row.status === 'Active' ? 'green' : 'grey' }}>{row.status}</span>
+  )},
+  { key: 'joined', header: 'Joined' },
+];
+
+export const Default: Story = { args: { columns, rows } };
+export const WithCaption: Story = { args: { columns, rows, caption: 'Team members' } };
+
+export const Sortable: Story = {
+  render: () => {
+    const [sortKey, setSortKey] = useState<string | undefined>();
+    const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
+    const sorted = [...rows].sort((a, b) => {
+      if (!sortKey) return 0;
+      const v = String(a[sortKey as keyof User]).localeCompare(String(b[sortKey as keyof User]));
+      return sortDir === 'asc' ? v : -v;
+    });
+    return (
+      <Table
+        columns={columns}
+        rows={sorted}
+        sortKey={sortKey}
+        sortDirection={sortDir}
+        onSort={(key, dir) => { setSortKey(key); setSortDir(dir); }}
+      />
+    );
+  },
+};

package/src/components/ui/Table/Table.tsx

@@ -0,0 +1,98 @@
+import { ReactNode } from 'react';
+import css from './Table.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface TableColumn<Row> {
+  key: string;
+  header: ReactNode;
+  sortable?: boolean;
+  render?: (row: Row) => ReactNode;
+}
+
+interface TableProps<Row extends Record<string, unknown>> {
+  columns: TableColumn<Row>[];
+  rows: Row[];
+  caption?: string;
+  sortKey?: string;
+  sortDirection?: 'asc' | 'desc';
+  onSort?: (key: string, direction: 'asc' | 'desc') => void;
+  className?: string;
+}
+
+export function Table<Row extends Record<string, unknown>>({
+  columns,
+  rows,
+  caption,
+  sortKey,
+  sortDirection,
+  onSort,
+  className,
+}: Readonly<TableProps<Row>>) {
+  const handleSort = (key: string) => {
+    if (!onSort) return;
+    const nextDirection = sortKey === key && sortDirection === 'asc' ? 'desc' : 'asc';
+    onSort(key, nextDirection);
+  };
+
+  const getAriaSort = (key: string): 'ascending' | 'descending' | 'none' => {
+    if (sortKey !== key) return 'none';
+    return sortDirection === 'asc' ? 'ascending' : 'descending';
+  };
+
+  return (
+    <div className={cn(css.wrapper, className)}>
+      <table className={css.table}>
+        {caption && <caption className={css.caption}>{caption}</caption>}
+        <thead className={css.thead}>
+          <tr>
+            {columns.map(col => (
+              <th
+                key={col.key}
+                scope="col"
+                aria-sort={col.sortable ? getAriaSort(col.key) : undefined}
+                className={cn(css.th, col.sortable ? css['--sortable'] : undefined)}
+              >
+                {col.sortable ? (
+                  <button
+                    type="button"
+                    className={css.sortButton}
+                    onClick={() => handleSort(col.key)}
+                  >
+                    {col.header}
+                    <svg
+                      aria-hidden="true"
+                      className={cn(
+                        css.sortIcon,
+                        sortKey === col.key ? css['--sort-active'] : undefined,
+                        sortKey === col.key && sortDirection === 'desc' ? css['--sort-desc'] : undefined,
+                      )}
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                    >
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M6 9l6 6 6-6" />
+                    </svg>
+                  </button>
+                ) : (
+                  col.header
+                )}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className={css.tbody}>
+          {rows.map((row, rowIndex) => (
+            <tr key={rowIndex} className={css.tr}>
+              {columns.map(col => (
+                <td key={col.key} className={css.td}>
+                  {col.render ? col.render(row) : String(row[col.key] ?? '')}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/components/ui/Table/index.ts

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

package/src/components/ui/Tabs/Tabs.module.css

@@ -0,0 +1,61 @@
+@layer component {
+  .tabs {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tabList {
+    display: flex;
+    border-bottom: 1px solid var(--color_bg--subtle);
+    gap: var(--space_xxs);
+  }
+
+  .tab {
+    --tab_color:        var(--color_on-bg);
+    --tab_border-color: transparent;
+
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    padding: var(--space_s) var(--space_m);
+    font-family: var(--font_family--body);
+    font-size: var(--font_size--body);
+    font-weight: var(--font_weight--semibold);
+    color: var(--tab_color);
+    border-bottom: 2px solid var(--tab_border-color);
+    margin-bottom: -1px;
+    cursor: pointer;
+    transition: var(--animation_transition);
+  }
+
+  .tab.--active {
+    --tab_color:        var(--color_interactive);
+    --tab_border-color: var(--color_interactive);
+  }
+
+  .tab:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .tab:focus-visible {
+    outline: var(--outline_default);
+    outline-offset: var(--outline_offset);
+    border-radius: var(--border_radius--xs);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .tab:not(:disabled, .--active):hover {
+      --tab_color: var(--color_interactive);
+    }
+  }
+
+  .panel {
+    padding-block-start: var(--space_m);
+  }
+
+  .panel:focus-visible {
+    outline: var(--outline_default);
+    outline-offset: var(--outline_offset);
+  }
+}

package/src/components/ui/Tabs/Tabs.spec.tsx

@@ -0,0 +1,91 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Tabs } from './Tabs';
+
+const tabs = [
+  { id: 'tab1', label: 'First', content: <p>First panel</p> },
+  { id: 'tab2', label: 'Second', content: <p>Second panel</p> },
+  { id: 'tab3', label: 'Third', content: <p>Third panel</p>, disabled: true },
+];
+
+describe('Tabs', () => {
+  it('renders a tablist', () => {
+    render(<Tabs tabs={tabs} />);
+    expect(screen.getByRole('tablist')).toBeInTheDocument();
+  });
+
+  it('renders all tab buttons', () => {
+    render(<Tabs tabs={tabs} />);
+    expect(screen.getAllByRole('tab')).toHaveLength(3);
+  });
+
+  it('renders all tab panels', () => {
+    render(<Tabs tabs={tabs} />);
+    expect(screen.getAllByRole('tabpanel', { hidden: true })).toHaveLength(3);
+  });
+
+  it('shows the first tab as active by default', () => {
+    render(<Tabs tabs={tabs} />);
+    expect(screen.getByRole('tab', { name: 'First' })).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('shows the defaultTab as active when provided', () => {
+    render(<Tabs tabs={tabs} defaultTab="tab2" />);
+    expect(screen.getByRole('tab', { name: 'Second' })).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('shows the first panel content by default', () => {
+    render(<Tabs tabs={tabs} />);
+    expect(screen.getByText('First panel')).toBeVisible();
+  });
+
+  it('hides inactive panels', () => {
+    render(<Tabs tabs={tabs} />);
+    const allPanels = screen.getAllByRole('tabpanel', { hidden: true });
+    expect(allPanels[1]).not.toBeVisible();
+    expect(allPanels[2]).not.toBeVisible();
+  });
+
+  it('switches panel on tab click', async () => {
+    const user = userEvent.setup();
+    render(<Tabs tabs={tabs} />);
+    await user.click(screen.getByRole('tab', { name: 'Second' }));
+    expect(screen.getByText('Second panel')).toBeVisible();
+  });
+
+  it('marks the clicked tab as active', async () => {
+    const user = userEvent.setup();
+    render(<Tabs tabs={tabs} />);
+    await user.click(screen.getByRole('tab', { name: 'Second' }));
+    expect(screen.getByRole('tab', { name: 'Second' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tab', { name: 'First' })).toHaveAttribute('aria-selected', 'false');
+  });
+
+  it('disables a tab when disabled is set', () => {
+    render(<Tabs tabs={tabs} />);
+    expect(screen.getByRole('tab', { name: 'Third' })).toBeDisabled();
+  });
+
+  it('navigates with ArrowRight key', async () => {
+    const user = userEvent.setup();
+    render(<Tabs tabs={tabs} />);
+    screen.getByRole('tab', { name: 'First' }).focus();
+    await user.keyboard('{ArrowRight}');
+    expect(screen.getByRole('tab', { name: 'Second' })).toHaveFocus();
+  });
+
+  it('navigates with ArrowLeft key', async () => {
+    const user = userEvent.setup();
+    render(<Tabs tabs={tabs} defaultTab="tab2" />);
+    screen.getByRole('tab', { name: 'Second' }).focus();
+    await user.keyboard('{ArrowLeft}');
+    expect(screen.getByRole('tab', { name: 'First' })).toHaveFocus();
+  });
+
+  it('links each tab to its panel via aria-controls', () => {
+    render(<Tabs tabs={tabs} />);
+    const firstTab = screen.getByRole('tab', { name: 'First' });
+    const panelId = firstTab.getAttribute('aria-controls');
+    expect(document.getElementById(panelId!)).toBeInTheDocument();
+  });
+});

package/src/components/ui/Tabs/Tabs.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tabs } from './Tabs';
+
+const meta = {
+  title: 'UI/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultTabs = [
+  { id: 'overview', label: 'Overview', content: <p>Overview content goes here.</p> },
+  { id: 'details', label: 'Details', content: <p>Detailed information goes here.</p> },
+  { id: 'history', label: 'History', content: <p>Historical records go here.</p> },
+];
+
+export const Default: Story = { args: { tabs: defaultTabs } };
+
+export const WithDefaultTab: Story = { args: { tabs: defaultTabs, defaultTab: 'details' } };
+
+export const WithDisabledTab: Story = {
+  args: {
+    tabs: [
+      { id: 'active', label: 'Active', content: <p>This tab is active.</p> },
+      { id: 'disabled', label: 'Disabled', content: <p>This tab is disabled.</p>, disabled: true },
+      { id: 'another', label: 'Another', content: <p>Another tab.</p> },
+    ],
+  },
+};
+
+export const RichContent: Story = {
+  args: {
+    tabs: [
+      {
+        id: 'profile',
+        label: 'Profile',
+        content: (
+          <div>
+            <h3>User Profile</h3>
+            <p>Name: Jane Doe</p>
+            <p>Email: jane@example.com</p>
+          </div>
+        ),
+      },
+      {
+        id: 'settings',
+        label: 'Settings',
+        content: (
+          <div>
+            <h3>Account Settings</h3>
+            <p>Manage your preferences here.</p>
+          </div>
+        ),
+      },
+    ],
+  },
+};

package/src/components/ui/Tabs/Tabs.tsx

@@ -0,0 +1,100 @@
+import { KeyboardEvent, ReactNode, useId, useRef, useState } from 'react';
+import css from './Tabs.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface TabItem {
+  id: string;
+  label: ReactNode;
+  content: ReactNode;
+  disabled?: boolean;
+}
+
+interface TabsProps {
+  tabs: TabItem[];
+  defaultTab?: string;
+  className?: string;
+}
+
+export function Tabs({ tabs, defaultTab, className }: Readonly<TabsProps>) {
+  const baseId = useId();
+  const [activeTab, setActiveTab] = useState(defaultTab ?? tabs[0]?.id);
+  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const enabledIndexes = tabs
+    .map((tab, i) => ({ tab, i }))
+    .filter(({ tab }) => !tab.disabled)
+    .map(({ i }) => i);
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {
+    const pos = enabledIndexes.indexOf(index);
+
+    const focusAt = (i: number) => {
+      tabRefs.current[i]?.focus();
+      setActiveTab(tabs[i].id);
+    };
+
+    if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      focusAt(enabledIndexes[(pos + 1) % enabledIndexes.length]);
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      focusAt(enabledIndexes[(pos - 1 + enabledIndexes.length) % enabledIndexes.length]);
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      focusAt(enabledIndexes[0]);
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      focusAt(enabledIndexes[enabledIndexes.length - 1]);
+    }
+  };
+
+  return (
+    <div className={cn(css.tabs, className)}>
+      <div role="tablist" className={css.tabList}>
+        {tabs.map((tab, i) => {
+          const tabId = `${baseId}-tab-${tab.id}`;
+          const panelId = `${baseId}-panel-${tab.id}`;
+          const isActive = activeTab === tab.id;
+
+          return (
+            <button
+              key={tab.id}
+              ref={el => { tabRefs.current[i] = el; }}
+              id={tabId}
+              type="button"
+              role="tab"
+              aria-selected={isActive}
+              aria-controls={panelId}
+              tabIndex={isActive ? 0 : -1}
+              disabled={tab.disabled}
+              className={cn(css.tab, isActive ? css['--active'] : undefined)}
+              onClick={() => setActiveTab(tab.id)}
+              onKeyDown={e => handleKeyDown(e, i)}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+      {tabs.map(tab => {
+        const tabId = `${baseId}-tab-${tab.id}`;
+        const panelId = `${baseId}-panel-${tab.id}`;
+        const isActive = activeTab === tab.id;
+
+        return (
+          <div
+            key={tab.id}
+            id={panelId}
+            role="tabpanel"
+            aria-labelledby={tabId}
+            tabIndex={0}
+            hidden={!isActive}
+            className={css.panel}
+          >
+            {tab.content}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/ui/Tabs/index.ts

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