Template

Files

Danijel Martinek f77e6ea881 chore(template): clean-slate template snapshot from bb4a0c7

Curated, product-agnostic snapshot of the post-story-04 tree: demo
content deleted, auth-only reference feature, web-next shell, all gates
green. Product-specific docs, ADRs 027-029, PRDs/epics/archive, editor
library traces, and product naming are curated out; generic template
repairs (coverage provider devDeps, root test:coverage script, live
lint fixes, root-only release-please) are kept. See TEMPLATE.md for
provenance, curation list, and usage.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016j8z4VHjedXDTjEDNg7qHK

2026-07-12 20:40:54 +02:00

2.8 KiB

Raw Blame History

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.

2.8 KiB Raw Blame History Unescape Escape