Skip to content
Lathe

Quality bar

A component is not finished when its demo looks good. This is the review every component goes through before it is listed, and the checks that keep it true.

Definition of done

Behavior

  • Works controlled and uncontrolled.
  • Every action is possible with the keyboard alone, and focus is always visible.
  • Focus goes somewhere sensible when things open, close or are removed.
  • Works with touch: targets are large enough, drags do not fight scrolling, nothing depends on hover.
  • Disabled, loading, empty and error states exist where they apply, and are shown in an example.
  • Long text, missing data, zero items and very many items do not break the layout.

Appearance

  • Uses only theme tokens. No fixed colors.
  • Correct in light and dark, and text meets WCAG AA contrast in both.
  • Holds together from a 320px-wide screen upward.
  • Motion uses the shared springs and durations and follows the reduced-motion rule.

Documentation

  • Preview, installation, usage, examples, props, keyboard, accessibility, motion and customization are all present.
  • The props table matches the TypeScript types, including defaults.
  • Declared dependencies match the imports in the source.

Automated checks

One command runs everything. It has to pass before a component is added or changed.

pnpm check
  • Registry check. Fails if a source file imports a package or a Lathe item that its doc does not declare, if a declared dependency is unused, or if a doc is missing examples, props, accessibility notes or customization.
  • Types and lint. tsc in strict mode and ESLint, including the React hooks rules.
  • Accessibility scan. Every component page is loaded in a real browser and scanned with axe, in light and in dark, and fails on any violation or console error.
  • Interaction tests. Keyboard and pointer tests for the behavior each page promises: arrow keys, Escape, focus return, limits, drag to dismiss.
  • Layout check. Every page is loaded at 320px wide and fails if it scrolls sideways.

Manual review

Some things still need a person. Before a component is listed, someone:

  • Uses it with a screen reader, and listens for names, roles, states and announcements.
  • Uses it on a phone, with a thumb.
  • Turns on reduced motion and checks nothing essential is lost.
  • Interrupts every animation halfway through.
  • Reads the page top to bottom and checks each sentence against what the component does.

Adding a component

Each component is three things in three folders. The generator wires up the rest.

src/registry/lathe/
  ui/rating.tsx              # the component
  demos/rating/default.tsx   # one file per example
  docs/rating.ts             # the page, as typed data

The doc file drives the docs page, the registry entry, the catalog, the search index and the test suite, so there is one place to keep accurate.