makeplane / makeplane/plane

🛠️ Improvement: Add story generator script and fix Storybook standalone build for propel

Open
#9,519 0 comments 0 reactions 0 assignees View on GitHub

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.)
  • 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

  • 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 workflow scope is available

References

  • PR: #9518

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.