2.5 KiB
core-ui component generator
pnpm turbo gen core-ui-component scaffolds an atomic-design component (atom / molecule / organism) into packages/core-ui/ using the established 4-file pattern.
Prerequisite: packages/core-ui/ must exist. If your project started from the slim template, scaffold core-ui first via pnpm turbo gen core-package ui.
Usage
pnpm turbo gen core-ui-component
# → Tier: (use arrow keys)
# ❯ atom
# molecule
# organism
# → Component name (PascalCase, e.g. Spinner):
# › Spinner
The generator emits 4 files into packages/core-ui/src/<tier>s/<kebab-name>/:
| File | Purpose |
|---|---|
<kebab-name>.tsx |
Component implementation (forwardRef + cn + className passthrough) |
<kebab-name>.stories.tsx |
Storybook stories (Meta + StoryObj + one Default story; tier-prefixed title) |
<kebab-name>.test.tsx |
Vitest + Testing Library smoke tests (renders, className passthrough, ref forwarding) |
index.ts |
Barrel that re-exports the component + Props type |
The new export is also spliced into packages/core-ui/src/<tier>s/index.ts immediately after the // <gen:<tier>s> anchor, so the component is reachable from the tier barrel (and transitively from the root @repo/core-ui export) without any manual wiring.
Generated scaffold (example: pnpm turbo gen core-ui-component → atom → Spinner)
packages/core-ui/src/atoms/spinner/
├── spinner.tsx # forwardRef<HTMLDivElement, SpinnerProps>
├── spinner.stories.tsx # title: "Atoms/Spinner"
├── spinner.test.tsx # 3 smoke tests
└── index.ts # export { Spinner, type SpinnerProps }
And in packages/core-ui/src/atoms/index.ts:
// <gen:atoms>
export { Spinner, type SpinnerProps } from "./spinner/index";
export { Button, type ButtonProps } from "./button/index";
// ...
Customizing the scaffold
The generated component is a minimal <div> passthrough — change the element/type and add variants/sizes to fit. The existing button.tsx in src/atoms/button/ is the canonical reference for a richer component with variant and size props plus variant lookup tables.
Verification
After scaffolding:
pnpm --filter @repo/core-ui lint typecheck test
pnpm dev --filter @repo/storybook # view the new component in Storybook
The Storybook stories glob (packages/core-ui/src/**/*.stories.@(ts|tsx)) picks up the new file automatically — no Storybook config changes needed.