component-anatomy

Create a PascalCase folder containing the implementation file, a types.ts file, co-located tests, stories, an MDX docs file, and an index.ts barrel exposing the public API. Also re-export the component from the parent Components barrel so it ships from the package root.

Add a barrel when the folder exposes a public API or re-exports several modules, such as component folders and package layer entry points. Skip it for internal helpers with a single implementation file, where consumers import the file directly.

Both require the implementation, types.ts, tests, co-located stories, and an MDX docs file, plus a .figma.tsx file when the component exists in Figma. React Native stories use an rnative-* ID prefix and charts under Components/visualization have exceptions for stories location and Figma coverage.

Utilities and hooks use camelCase folders split by responsibility, while only components use PascalCase. A public utility like useControllableState gets a barrel, but a single-file internal helper like useBaseInputValue does not.

Deep imports bypass the component's public barrel and couple consumers to internal file structure. When a Button/index.ts barrel exists, always import from the folder barrel so the internal layout can change without breaking consumers.