Show every component state in a catalogue

How to do it

Use a catalogue tool, such as Storybook, Histoire or Ladle, or a pattern library page for server-rendered templates. Write one story per state with fixed sample data. The same stories feed the visual tests and the accessibility scan.

Example

// OrderTable.stories.tsx
import type { Meta, StoryObj } from '@storybook/react-vite';
import { OrderTable } from './OrderTable';

const meta: Meta<typeof OrderTable> = { component: OrderTable };
export default meta;

export const Loaded: StoryObj<typeof OrderTable> = { args: { state: { status: 'success', orders: sampleOrders } } };
export const Loading: StoryObj<typeof OrderTable> = { args: { state: { status: 'loading' } } };
export const Empty: StoryObj<typeof OrderTable> = { args: { state: { status: 'success', orders: [] } } };
export const Failed: StoryObj<typeof OrderTable> = { args: { state: { status: 'error', reference: 'ERR-7F3C' } } };

import pathlib
import sys

components = pathlib.Path("src/ui").glob("*.tsx")
missing = [
    str(path) for path in components
    if not path.name.endswith(".stories.tsx")
    and not path.with_name(path.stem + ".stories.tsx").exists()
]
print("\n".join(missing) or "every component has stories")
sys.exit(1 if missing else 0)

How to check

A script lists every component file without a stories file next to it. The list is empty.