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

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions