@mettlecast/domain-cli 0.2.0

package/src/templates/patterns/component/index.ts

@@ -0,0 +1,833 @@
+/**
+ * Atom component template — single design-token usage (Button, Input, Icon).
+ * Uses Tailwind tokens, Radix primitives.
+ */
+export function atomTemplate(
+  name: string
+): { component: string; story: string; test: string } {
+  const componentName = capitalize(name);
+  const camelName = camelize(name);
+
+  return {
+    component: `import { forwardRef } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '@/lib/utils';
+
+/** Props for the ${componentName} atom component. */
+export interface ${componentName}Props extends React.HTMLAttributes<HTMLElement> {
+  /** Render as a different element (e.g. \`asChild\` for link-in-button). */
+  asChild?: boolean;
+  /** Visual variant of the component. */
+  variant?: 'default' | 'outline' | 'ghost';
+  /** Size preset. */
+  size?: 'sm' | 'md' | 'lg';
+  /** Disabled state — prevents interaction and applies muted styling. */
+  disabled?: boolean;
+}
+
+/**
+ * \`${componentName}\` — an atom-level design-system component.
+ *
+ * Uses Tailwind semantic tokens for colours and spacing.
+ * Built on Radix \`Slot\` for polymorphic composition.
+ */
+export const ${componentName} = forwardRef<HTMLElement, ${componentName}Props>(
+  ({ className, variant = 'default', size = 'md', asChild = false, disabled, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'div';
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(
+          // Base styles
+          'inline-flex items-center justify-center gap-2 rounded-md font-medium',
+          'transition-colors duration-150',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          // Size variants
+          size === 'sm' && 'h-8 px-3 text-xs',
+          size === 'md' && 'h-10 px-4 text-sm',
+          size === 'lg' && 'h-12 px-6 text-base',
+          // Style variants
+          variant === 'default' && 'bg-primary text-primary-foreground hover:bg-primary/90',
+          variant === 'outline' && 'border border-border bg-card text-foreground hover:bg-accent hover:text-accent-foreground',
+          variant === 'ghost' && 'text-foreground hover:bg-accent hover:text-accent-foreground',
+          // Disabled
+          disabled && 'pointer-events-none opacity-50',
+          className,
+        )}
+        aria-disabled={disabled}
+        data-slot="${camelName}"
+        {...props}
+      >
+        {children}
+      </Comp>
+    );
+  }
+);
+
+${componentName}.displayName = '${componentName}';
+`,
+
+    story: `import type { Meta, StoryObj } from '@storybook/react';
+import { ${componentName} } from './${camelName}';
+import { Star } from 'lucide-react';
+
+const meta: Meta<typeof ${componentName}> = {
+  title: 'Atoms/${componentName}',
+  component: ${componentName},
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'outline', 'ghost'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    disabled: { control: 'boolean' },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof ${componentName}>;
+
+/** Default variant at medium size. */
+export const Default: Story = {
+  args: {
+    children: '${componentName}',
+    variant: 'default',
+    size: 'md',
+  },
+};
+
+/** Outline variant, a11y-check: contrast ratio for muted borders. */
+export const Outline: Story = {
+  args: {
+    children: '${componentName}',
+    variant: 'outline',
+    size: 'md',
+  },
+};
+
+/** Small ghost variant — icon-only use case. */
+export const GhostSmall: Story = {
+  args: {
+    children: <Star className="h-4 w-4" />,
+    variant: 'ghost',
+    size: 'sm',
+    'aria-label': 'Favorite',
+  },
+};
+
+/** Large with icon + label. */
+export const LargeWithIcon: Story = {
+  args: {
+    children: (
+      <>
+        <Star className="h-5 w-5" />
+        ${componentName}
+      </>
+    ),
+    size: 'lg',
+  },
+};
+
+/** Disabled state. */
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled',
+    disabled: true,
+  },
+};
+`,
+
+    test: `import { test, expect } from '@playwright/test';
+import { runAxe } from '@axe-core/playwright';
+
+test.describe('${componentName}', () => {
+  test('renders with no a11y violations', async ({ page, mount }) => {
+    const component = await mount(
+      <${componentName}>Test ${componentName}</${componentName}>
+    );
+    await expect(component).toBeVisible();
+    const results = await runAxe(page, component);
+    expect(results.violations).toEqual([]);
+  });
+
+  test('handles disabled state', async ({ page, mount }) => {
+    const component = await mount(
+      <${componentName} disabled>Disabled</${componentName}>
+    );
+    await expect(component).toHaveAttribute('aria-disabled', 'true');
+    const results = await runAxe(page, component);
+    expect(results.violations).toEqual([]);
+  });
+
+  test('variant classes are applied', async ({ page, mount }) => {
+    const component = await mount(
+      <${componentName} variant="outline">Outline</${componentName}>
+    );
+    await expect(component).toHaveClass(/border/);
+  });
+});
+`,
+  };
+}
+
+/**
+ * Molecule component template — composition of 2+ atoms (SearchBar, FormField, DataRow).
+ */
+export function moleculeTemplate(
+  name: string
+): { component: string; story: string; test: string } {
+  const componentName = capitalize(name);
+  const camelName = camelize(name);
+
+  return {
+    component: `import { useState, forwardRef, useCallback } from 'react';
+import { Search, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+/** Props for the ${componentName} molecule component. */
+export interface ${componentName}Props {
+  /** Placeholder text for the input. */
+  placeholder?: string;
+  /** Current value (controlled). */
+  value?: string;
+  /** Default value (uncontrolled). */
+  defaultValue?: string;
+  /** Called when the value changes. */
+  onChange?: (value: string) => void;
+  /** Called when the user submits (Enter key). */
+  onSubmit?: (value: string) => void;
+  /** Called when the clear button is pressed. */
+  onClear?: () => void;
+  /** Whether the component is disabled. */
+  disabled?: boolean;
+  /** Additional CSS classes. */
+  className?: string;
+}
+
+/**
+ * \`${componentName}\` — a molecule-level component composing Input + Button atoms.
+ *
+ * Composes Radix-based atoms with Tailwind semantic tokens
+ * to create a search bar with clear and submit behaviours.
+ */
+export const ${componentName} = forwardRef<HTMLDivElement, ${componentName}Props>(
+  (
+    {
+      placeholder = 'Search...',
+      value: controlledValue,
+      defaultValue = '',
+      onChange,
+      onSubmit,
+      onClear,
+      disabled = false,
+      className,
+    },
+    ref,
+  ) => {
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const value = isControlled ? controlledValue : internalValue;
+
+    const handleChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        const next = e.target.value;
+        if (!isControlled) setInternalValue(next);
+        onChange?.(next);
+      },
+      [isControlled, onChange],
+    );
+
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+          onSubmit?.(value);
+        }
+        if (e.key === 'Escape') {
+          onClear?.();
+        }
+      },
+      [value, onSubmit, onClear],
+    );
+
+    const handleClear = useCallback(() => {
+      if (!isControlled) setInternalValue('');
+      onChange?.('');
+      onClear?.();
+    }, [isControlled, onChange, onClear]);
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2',
+          'focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',
+          disabled && 'pointer-events-none opacity-50',
+          className,
+        )}
+        role="search"
+      >
+        <Search className="h-4 w-4 text-muted-foreground shrink-0" aria-hidden="true" />
+        <input
+          type="search"
+          value={value}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          disabled={disabled}
+          aria-label={placeholder}
+          className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+        />
+        {value && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleClear}
+            aria-label="Clear search"
+            className="h-6 w-6 p-0"
+          >
+            <X className="h-3 w-3" />
+          </Button>
+        )}
+      </div>
+    );
+  },
+);
+
+${componentName}.displayName = '${componentName}';
+`,
+
+    story: `import type { Meta, StoryObj } from '@storybook/react';
+import { ${componentName} } from './${camelName}';
+import { userEvent, within } from '@storybook/test';
+
+const meta: Meta<typeof ${componentName}> = {
+  title: 'Molecules/${componentName}',
+  component: ${componentName},
+  tags: ['autodocs'],
+};
+export default meta;
+type Story = StoryObj<typeof ${componentName}>;
+
+/** Default empty state. */
+export const Default: Story = {
+  args: {
+    placeholder: 'Search ${name}...',
+  },
+};
+
+/** With initial value, clear button visible. */
+export const WithValue: Story = {
+  args: {
+    placeholder: 'Search ${name}...',
+    defaultValue: 'example query',
+  },
+};
+
+/** Play function that types and submits. */
+export const WithInteraction: Story = {
+  args: {
+    placeholder: 'Type to search...',
+    onSubmit: (value) => alert('Submitted: ' + value),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole('searchbox');
+    await userEvent.type(input, 'hello{Enter}');
+  },
+};
+`,
+
+    test: `import { test, expect } from '@playwright/test';
+import { runAxe } from '@axe-core/playwright';
+
+test.describe('${componentName}', () => {
+  test('renders with no a11y violations', async ({ page, mount }) => {
+    const component = await mount(
+      <${componentName} placeholder="Search items..." />
+    );
+    await expect(component).toBeVisible();
+    const results = await runAxe(page, component);
+    expect(results.violations).toEqual([]);
+  });
+
+  test('has accessible search role', async ({ page, mount }) => {
+    const component = await mount(
+      <${componentName} placeholder="Search items..." />
+    );
+    await expect(component).toHaveAttribute('role', 'search');
+    const input = component.locator('input[type="search"]');
+    await expect(input).toHaveAttribute('aria-label', 'Search items...');
+  });
+
+  test('clear button appears when value is set', async ({ page, mount }) => {
+    const component = await mount(
+      <${componentName} defaultValue="query" />
+    );
+    const clearBtn = component.locator('button[aria-label="Clear search"]');
+    await expect(clearBtn).toBeVisible();
+  });
+
+  test('calls onChange when typing', async ({ page, mount }) => {
+    let value = '';
+    const component = await mount(
+      <${componentName} onChange={(v) => (value = v)} />
+    );
+    const input = component.locator('input[type="search"]');
+    await input.fill('test');
+    expect(value).toBe('test');
+  });
+});
+`,
+  };
+}
+
+/**
+ * Organism component template — complex section (DataTable, WizardFlow, DashboardWidget).
+ */
+export function organismTemplate(
+  name: string
+): { component: string; story: string; test: string } {
+  const componentName = capitalize(name);
+  const camelName = camelize(name);
+
+  return {
+    component: `import { useState, useCallback, forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  ArrowUpDown,
+  Loader2,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { EmptyState } from '@/components/state/EmptyState';
+import { ErrorState } from '@/components/state/ErrorState';
+import { LoadingState } from '@/components/state/LoadingState';
+
+/** A single column definition for the ${componentName}. */
+export interface ${componentName}Column<T> {
+  key: string;
+  header: string;
+  /** Render function for the cell. */
+  render: (item: T) => React.ReactNode;
+  /** Whether this column is sortable. */
+  sortable?: boolean;
+  /** CSS min-width for this column. */
+  width?: string;
+}
+
+/** Props for the ${componentName} organism component. */
+export interface ${componentName}Props<T> {
+  /** Column definitions. */
+  columns: ${componentName}Column<T>[];
+  /** Row data array. */
+  data: T[];
+  /** Loading state — shows skeleton rows. */
+  isLoading?: boolean;
+  /** Error state — shows error message with retry. */
+  isError?: boolean;
+  /** Error message when isError is true. */
+  errorMessage?: string;
+  /** Retry callback when isError is true. */
+  onRetry?: () => void;
+  /** Click handler for a row. */
+  onRowClick?: (item: T) => void;
+  /** Whether the table is keyboard-navigable. */
+  keyboardSelectable?: boolean;
+  /** Items per page (default: 25). */
+  pageSize?: number;
+  /** Additional CSS classes. */
+  className?: string;
+}
+
+/**
+ * \`${componentName}\` — an organism-level component composing molecule and atom primitives.
+ *
+ * A data table with column sorting, keyboard navigation, loading/empty/error
+ * states, and pagination. Uses Tailwind semantic tokens and follows the
+ * Design System spacing and typography conventions.
+ */
+export function ${componentName}<T extends { id: string }>({
+  columns,
+  data,
+  isLoading = false,
+  isError = false,
+  errorMessage = 'Failed to load data',
+  onRetry,
+  onRowClick,
+  keyboardSelectable = true,
+  pageSize = 25,
+  className,
+}: ${componentName}Props<T>) {
+  const [sortKey, setSortKey] = useState<string | null>(null);
+  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
+  const [page, setPage] = useState(0);
+  const [selectedIdx, setSelectedIdx] = useState<number>(-1);
+
+  const sorted = sortKey
+    ? [...data].sort((a, b) => {
+        const col = columns.find((c) => c.key === sortKey);
+        if (!col) return 0;
+        const aVal = String(col.render(a));
+        const bVal = String(col.render(b));
+        const cmp = aVal.localeCompare(bVal);
+        return sortDir === 'asc' ? cmp : -cmp;
+      })
+    : data;
+
+  const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
+  const paged = sorted.slice(page * pageSize, (page + 1) * pageSize);
+
+  const handleSort = useCallback(
+    (key: string) => {
+      if (sortKey === key) {
+        setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+      } else {
+        setSortKey(key);
+        setSortDir('asc');
+      }
+    },
+    [sortKey],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (!keyboardSelectable) return;
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          setSelectedIdx((i) => Math.min(i + 1, paged.length - 1));
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          setSelectedIdx((i) => Math.max(i - 1, 0));
+          break;
+        case 'Enter':
+          if (selectedIdx >= 0 && onRowClick) {
+            onRowClick(paged[selectedIdx]);
+          }
+          break;
+      }
+    },
+    [keyboardSelectable, paged, selectedIdx, onRowClick],
+  );
+
+  if (isLoading) {
+    return <LoadingState variant="row" rows={5} />;
+  }
+
+  if (isError) {
+    return <ErrorState message={errorMessage} onRetry={onRetry} />;
+  }
+
+  if (!data.length) {
+    return <EmptyState icon={ChevronsLeft} title="No data" description="No items to display." />;
+  }
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      <div className="overflow-x-auto rounded-lg border border-border">
+        <table
+          className="w-full"
+          role="grid"
+          aria-label="${componentName}"
+          onKeyDown={handleKeyDown}
+        >
+          <thead>
+            <tr className="border-b border-border bg-muted/50">
+              {columns.map((col) => (
+                <th
+                  key={col.key}
+                  className={cn(
+                    'px-4 py-3 text-left text-xs font-medium text-muted-foreground',
+                    col.sortable && 'cursor-pointer select-none hover:text-foreground',
+                    col.width && 'min-w-[var(--col-width)]',
+                  )}
+                  style={{ minWidth: col.width }}
+                  onClick={col.sortable ? () => handleSort(col.key) : undefined}
+                  aria-sort={
+                    sortKey === col.key
+                      ? sortDir === 'asc'
+                        ? 'ascending'
+                        : 'descending'
+                      : undefined
+                  }
+                >
+                  <span className="inline-flex items-center gap-1">
+                    {col.header}
+                    {col.sortable && <ArrowUpDown className="h-3 w-3" />}
+                    {sortKey === col.key && (
+                      <Badge variant="info" className="ml-1 h-4 px-1 text-[10px]">
+                        {sortDir === 'asc' ? 'ASC' : 'DESC'}
+                      </Badge>
+                    )}
+                  </span>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {paged.map((item, idx) => (
+              <tr
+                key={item.id}
+                className={cn(
+                  'border-b border-border transition-colors duration-150',
+                  onRowClick && 'cursor-pointer hover:bg-muted/50',
+                  selectedIdx === idx && 'bg-accent',
+                )}
+                onClick={() => onRowClick?.(item)}
+                tabIndex={keyboardSelectable ? 0 : undefined}
+                role="row"
+                aria-selected={selectedIdx === idx}
+              >
+                {columns.map((col) => (
+                  <td key={col.key} className="px-4 py-3 text-sm">
+                    {col.render(item)}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between text-sm">
+          <p className="text-muted-foreground">
+            Showing {page * pageSize + 1}–{Math.min((page + 1) * pageSize, sorted.length)} of{' '}
+            {sorted.length}
+          </p>
+          <div className="flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setPage(0)}
+              disabled={page === 0}
+              aria-label="First page"
+            >
+              <ChevronsLeft className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setPage((p) => Math.max(0, p - 1))}
+              disabled={page === 0}
+              aria-label="Previous page"
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <span className="px-2 text-muted-foreground">
+              {page + 1} / {totalPages}
+            </span>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
+              disabled={page >= totalPages - 1}
+              aria-label="Next page"
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setPage(totalPages - 1)}
+              disabled={page >= totalPages - 1}
+              aria-label="Last page"
+            >
+              <ChevronsRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+${componentName}.displayName = '${componentName}';
+`,
+
+    story: `import type { Meta, StoryObj } from '@storybook/react';
+import { ${componentName}, type ${componentName}Column } from './${camelName}';
+import { Badge } from '@/components/ui/badge';
+
+interface ExampleItem {
+  id: string;
+  name: string;
+  status: string;
+  date: string;
+}
+
+const COLUMNS: ${componentName}Column<ExampleItem>[] = [
+  { key: 'name', header: 'Name', render: (i) => i.name, sortable: true },
+  {
+    key: 'status',
+    header: 'Status',
+    render: (i) => (
+      <Badge variant={i.status === 'active' ? 'success' : 'neutral'}>
+        {i.status}
+      </Badge>
+    ),
+    sortable: true,
+  },
+  {
+    key: 'date',
+    header: 'Date',
+    render: (i) => new Date(i.date).toLocaleDateString(),
+    sortable: true,
+  },
+];
+
+const ITEMS: ExampleItem[] = Array.from({ length: 8 }, (_, i) => ({
+  id: String(i + 1),
+  name: \`Item \${i + 1}\`,
+  status: i % 3 === 0 ? 'inactive' : 'active',
+  date: new Date(2026, 4, i + 1).toISOString(),
+}));
+
+const meta: Meta<typeof ${componentName}> = {
+  title: 'Organisms/${componentName}',
+  component: ${componentName},
+  tags: ['autodocs'],
+};
+export default meta;
+type Story = StoryObj<typeof ${componentName}<ExampleItem>>;
+
+/** Default with 8 rows. */
+export const Default: Story = {
+  args: {
+    columns: COLUMNS,
+    data: ITEMS,
+  },
+};
+
+/** Empty state — no data rows. */
+export const Empty: Story = {
+  args: {
+    columns: COLUMNS,
+    data: [],
+  },
+};
+
+/** Loading state — shimmer rows. */
+export const Loading: Story = {
+  args: {
+    columns: COLUMNS,
+    data: [],
+    isLoading: true,
+  },
+};
+
+/** Error state with retry. */
+export const Error_: Story = {
+  name: 'Error',
+  args: {
+    columns: COLUMNS,
+    data: [],
+    isError: true,
+    errorMessage: 'Network request failed. Please try again.',
+    onRetry: () => alert('Retry clicked'),
+  },
+};
+`,
+
+    test: `import { test, expect } from '@playwright/test';
+import { runAxe } from '@axe-core/playwright';
+
+interface TestItem {
+  id: string;
+  name: string;
+  status: string;
+  date: string;
+}
+
+const COLUMNS = [
+  { key: 'name', header: 'Name', render: (i: TestItem) => i.name },
+  { key: 'status', header: 'Status', render: (i: TestItem) => i.status },
+];
+
+const DATA: TestItem[] = [
+  { id: '1', name: 'Alpha', status: 'active', date: '2026-05-01' },
+  { id: '2', name: 'Beta', status: 'inactive', date: '2026-05-02' },
+  { id: '3', name: 'Gamma', status: 'active', date: '2026-05-03' },
+];
+
+test.describe('${componentName}', () => {
+  test('renders rows with no a11y violations', async ({ page, mount }) => {
+    const component = await mount(
+      <${componentName} columns={COLUMNS} data={DATA} />
+    );
+    await expect(component).toBeVisible();
+    const results = await runAxe(page, component);
+    expect(results.violations).toEqual([]);
+  });
+
+  test('has accessible grid role', async ({ page, mount }) => {
+    const component = await mount(
+      <${componentName} columns={COLUMNS} data={DATA} />
+    );
+    await expect(component.locator('table')).toHaveAttribute('role', 'grid');
+  });
+
+  test('shows empty state when no data', async ({ page, mount }) => {
+    const component = await mount(
+      <${componentName} columns={COLUMNS} data={[]} />
+    );
+    await expect(component).toContainText('No data');
+  });
+
+  test('shows loading state', async ({ page, mount }) => {
+    const component = await mount(
+      <${componentName} columns={COLUMNS} data={[]} isLoading />
+    );
+    await expect(component).not.toContainText('No data'); // loading takes priority
+  });
+
+  test('shows error state', async ({ page, mount }) => {
+    const component = await mount(
+      <${componentName}
+        columns={COLUMNS}
+        data={[]}
+        isError
+        errorMessage="Boom"
+        onRetry={() => {}}
+      />
+    );
+    await expect(component).toContainText('Boom');
+  });
+
+  test('keyboard navigation moves selection', async ({ page, mount }) => {
+    const component = await mount(
+      <${componentName} columns={COLUMNS} data={DATA} keyboardSelectable />
+    );
+    await component.locator('table').focus();
+    await page.keyboard.press('ArrowDown');
+    const secondRow = component.locator('tr[aria-selected="true"]');
+    await expect(secondRow).toBeVisible();
+  });
+});
+`,
+  };
+}
+
+/** Capitalizes the first character of a string. */
+function capitalize(s: string): string {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+/** Converts PascalCase/kebab-case to camelCase. */
+function camelize(s: string): string {
+  return s
+    .replace(/[-_](.)/g, (_, c) => c.toUpperCase())
+    .replace(/^[A-Z]/, (c) => c.toLowerCase());
+}