Skip to content

πŸ› οΈ Improvement: Add story generator script and fix Storybook standalone build for propelΒ #9519

Description

@MartaCondeDesign

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions