Component checklist

A component or component change is done when every item below arrives in the same change. A half-finished component does not reach the main branch: if time runs out, the remaining items are listed and the component waits for the next change.

Code

• The component is in packages/ui/src/components/<component-name>/<ComponentName>.tsx; its stories sit next to it in <ComponentName>.stories.tsx.
• The look is built only on Base UI primitives with tailwind-variants (tv()). Radix and cva are not used (D-05, D-06).
• There are no raw colour, spacing, duration or curve values; every value comes from a token. If the component needs its own value, a component token bound only to semantic tokens is added.
• The root element carries data-component and inner parts carry data-part.
• The library’s own strings (loading, close, required and so on) come from the ui.* catalogue in packages/ui/src/strings.ts, in Turkish and English; they change with Provider locale and can be overridden with a prop.
• The component is exported from packages/ui/src/index.ts together with its props type.
• Every prop has a TSDoc description; its default is written with @default.

Motion and interaction

• Hover, press, focus, disabled and, where they apply, loading, success, enter and exit are designed. A flat control with no response is not done (D-10).
• Motion comes from the packages/ui/src/motion presets (motion.press, motion.popover and so on); the component writes no transition, duration-* or ease-* classes of its own.
• Only opacity, transform and colour are animated (MOT-02).
• Reduced motion replaces motion with a short opacity change rather than removing it; success marks stay static (MOT-03). Provider reducedMotion="reduce" has the same effect.

Tests

• Tests are written before or with the code and pass with pnpm --filter @bigbang/ui test.
• Tests check the role and accessible name, keyboard interaction, states (disabled, invalid, loading), the data-component and data-part attributes and both languages of the library strings.
• Tests check that the motion preset is applied and changes under reduced motion.
• No test is weakened, skipped or deleted.

Storybook

• A Playground story exposes every prop through controls.
• There is a story for every variant, size and state.
• Stories look right with the toolbar’s brand, light and dark mode, and Turkish and English choices. Demo texts come from .storybook/messages.ts and are neutral (“Primary button”, “Card title”).
• The accessibility add-on (axe) shows no violations in the stories.

Documentation

• The six tabs are written in Turkish and English: Examples, Usage, Specs, Accessibility, Code, Changelog. The required headings are checked by scripts/check-docs.mjs.
• The Examples tab shows the hero example live with StoryEmbed; other examples render statically from src/examples/<component>/{tr,en}/.
• The component is registered in src/data/components.ts with its status, version and hero story, and in src/data/categories.ts with its category, and is added to the sidebar.
• props.json is regenerated with pnpm props; Turkish prop descriptions are written in src/data/props.ts.
• Demo texts are neutral; no customer data or data from real transactions is used.

Release

• A changeset (pnpm changeset) is added; a breaking change carries a migration note. See Versioning.
• The component’s Changelog tab is updated.

Checks

Before the change is sent, these commands finish clean:

pnpm install --frozen-lockfile
pnpm check        # tokens, lint, type check (including astro check), tests
pnpm docs:build   # Storybook build, docs check, site build