🛠️ Improvement: Add story generator script and fix Storybook standalone build for propel
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 59.6k
- Forks
- 5.8k
- Avg merge
- 1d 22h
- Merged PRs (30d)
- 49
Description
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.) AllVariantsandAllSizesrender stories- Full
argTypeswithselect/boolean/textcontrols - 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
- Unit tests for
generate-story.mjs(parsing CVA variants, type alias resolution) - Unit tests for
audit.mjs - Workflow file in a follow-up PR once
workflowscope is available
References
- PR: #9518
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with PR #9518 and inspect the referenced generate-story.mjs and audit.mjs scripts in packages/propel, along with the Storybook Vite configuration. The implementation is already under review; remaining work mentioned by the issue includes unit tests and the .github/workflows/ds-story-coverage.yml follow-up.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- node.js, typescript, vite
- Domain
- build-system, frontend, tooling
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 15/100