Skip to content

feat: AST-based Storybook story generation with prop controls, variants, and MDX docs#59

Merged
PAMulligan merged 8 commits into
mainfrom
12-storybook-auto-generation-from-component-output
Apr 15, 2026
Merged

feat: AST-based Storybook story generation with prop controls, variants, and MDX docs#59
PAMulligan merged 8 commits into
mainfrom
12-storybook-auto-generation-from-component-output

Conversation

@PAMulligan
Copy link
Copy Markdown
Collaborator

Summary

Closes #12

  • Rewrites generate-stories.sh from bash regex to a Node.js script (generate-stories.js) using ts-morph for TypeScript AST parsing
  • Generates .stories.tsx files with typed argTypes/controls (text, number, boolean, select), action args for on* callbacks, variant stories for string literal unions and boolean props, and default args from parameter destructuring
  • Generates standalone .mdx documentation files with Meta, Canvas, Controls, ArgTypes blocks and embedded variant canvases
  • Adds CLI flags: --force, --dry-run, --no-mdx, --json, --src-dir, --config
  • Adds generateMdx and maxVariantsPerProp config options to pipeline.config.json
  • 22 tests covering backward compatibility, argTypes, actions, variants, defaults, MDX, JSON output, and config cap

Test plan

  • All 22 generate-stories tests pass (pnpm vitest run scripts/__tests__/generate-stories.test.js)
  • Lint and format pass (./scripts/lint-and-format.sh)
  • Shell wrapper (generate-stories.sh) forwards to Node.js script correctly
  • CI passes

🤖 Generated with Claude Code

Paul Mulligan and others added 8 commits April 15, 2026 12:59
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…D phase)

Replace bash-based generate-stories tests with 22 tests targeting the new
Node.js generate-stories.js script using ts-morph AST parsing. Tests cover
backward compatibility, argTypes/controls generation, action args, variant
stories, default values, MDX documentation, JSON output, and maxVariantsPerProp
config. All tests fail as expected since generate-stories.js does not exist yet.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…iants, and MDX docs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Addresses code review findings:
- Single quotes in JSDoc descriptions are now escaped in generated argTypes
- String default values are escaped in generated args
- Variant story names from union values are sanitized to valid JS identifiers
  (handles numeric prefixes like '2xl' and hyphens like 'left-to-right')

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@PAMulligan PAMulligan linked an issue Apr 15, 2026 that may be closed by this pull request
@PAMulligan PAMulligan self-assigned this Apr 15, 2026
@PAMulligan PAMulligan added the pipeline Figma/Canva-to-React conversion pipeline label Apr 15, 2026
@PAMulligan PAMulligan moved this from Todo to Done in PMDS Open Source Roadmap Apr 15, 2026
@PAMulligan PAMulligan added this to the v1.1.0 milestone Apr 15, 2026
@PAMulligan PAMulligan merged commit a5eff6e into main Apr 15, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

pipeline Figma/Canva-to-React conversion pipeline

Projects

Development

Successfully merging this pull request may close these issues.

Storybook auto-generation from component output

1 participant