Problem
The packages/propel design system has 55+ components but story coverage is incomplete, and adding stories manually for each new component is repetitive and error-prone. Additionally, Storybook fails to start because Vite cannot resolve @plane/constants workspace symlinks at dev time, blocking local design system development.
Proposed solution
1. Story generator script (pnpm generate-story <ComponentName>)
A Node.js script that reads helper.tsx (CVA variants + TypeScript props) and auto-generates a complete .stories.tsx file:
- Per-variant named stories (
Primary, ErrorFill, etc.)
AllVariants and AllSizes render stories
- Full
argTypes with select / boolean / text controls
- Resolves
type TXxx = "a" | "b" aliases for proper select dropdowns
- Safe by default β refuses to overwrite existing stories without
--force
Usage:
cd packages/propel
pnpm generate-story Button # generates button.stories.tsx
pnpm generate-story AIInput # detects AI prefix β "AI Components" category
pnpm generate-story Badge --force # overwrites existing story
2. Audit script (pnpm audit-stories)
Reports story coverage across all propel components:
β
badge β story complete
β
button β story complete
β accordion β no story
β οΈ tooltip β empty story
3. Storybook Vite fix
@plane/constants is a workspace package referenced via symlink. Vite's import analysis fails to resolve it during pnpm storybook. Fix: inline the two values used (EIconSize enum and AXIS_LABEL_CLASSNAME string) directly in the files that need them, removing the external dependency from the Storybook build.
Implementation
Already implemented in PR #9518. The PR passes lint (oxlint) and format (oxfmt) checks via the pre-commit hook.
Not yet included (pending workflow OAuth scope):
.github/workflows/ds-story-coverage.yml β a PR check that comments story coverage delta and fails if a new component folder is added without a .stories.tsx
Checklist
References
Problem
The
packages/propeldesign system has 55+ components but story coverage is incomplete, and adding stories manually for each new component is repetitive and error-prone. Additionally, Storybook fails to start because Vite cannot resolve@plane/constantsworkspace symlinks at dev time, blocking local design system development.Proposed solution
1. Story generator script (
pnpm generate-story <ComponentName>)A Node.js script that reads
helper.tsx(CVA variants + TypeScript props) and auto-generates a complete.stories.tsxfile:Primary,ErrorFill, etc.)AllVariantsandAllSizesrender storiesargTypeswithselect/boolean/textcontrolstype TXxx = "a" | "b"aliases for proper select dropdowns--forceUsage:
2. Audit script (
pnpm audit-stories)Reports story coverage across all propel components:
3. Storybook Vite fix
@plane/constantsis a workspace package referenced via symlink. Vite's import analysis fails to resolve it duringpnpm storybook. Fix: inline the two values used (EIconSizeenum andAXIS_LABEL_CLASSNAMEstring) directly in the files that need them, removing the external dependency from the Storybook build.Implementation
Already implemented in PR #9518. The PR passes lint (oxlint) and format (oxfmt) checks via the pre-commit hook.
Not yet included (pending
workflowOAuth scope):.github/workflows/ds-story-coverage.ymlβ a PR check that comments story coverage delta and fails if a new component folder is added without a.stories.tsxChecklist
generate-story.mjs(parsing CVA variants, type alias resolution)audit.mjsworkflowscope is availableReferences