Components Library (Frontend Standard)

This document defines how to structure the reusable UI library under src/components/.

Organization (required)

Components must be organized by component type at the top level:

• src/components/buttons/
• src/components/fields/
• src/components/modals/
• src/components/tables/
• src/components/layout/

Each component may use a subfolder when needed:

src/components/buttons/
  Button/
    Button.tsx
    Button.test.tsx
    index.ts

Placement rule (required)

• Reused across 2+ features ⇒ src/components/
• Otherwise ⇒ keep it in the feature module

API surface (required)

• Each component folder should expose a clear public API via index.ts.
• Do not export internal subcomponents unless they are part of the intended public API.

Accessibility (required)

Reusable components must meet accessibility expectations:

• keyboard navigation (tab order, focus)
• correct semantic elements (button, label, etc.)
• ARIA only when necessary (don’t replace semantics with ARIA)

Projects should add a lightweight accessibility checklist for each component type in their component library docs.