Skip to content

Conversation

valentinpalkovic
Copy link
Contributor

Closes #

What I did

Implemented the "Ghost Stories" feature, which introduces a custom Storybook indexer and Vite plugin to automatically generate virtual stories for components that lack existing .stories files. This involves detecting component exports, analyzing their TypeScript props, generating fake default values, and creating interactive stories with controls. These virtual stories are prefixed with "V:" in the sidebar and can be saved as real story files using the save-from-controls feature.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

  1. Integrate the Ghost Stories indexer and Vite plugin into a Storybook project (refer to code/core/src/ghost-stories/README.md for setup instructions).
  2. Ensure your project has components with TypeScript interfaces but no corresponding .stories files.
  3. Run Storybook, e.g., yarn task --task sandbox --start-from auto --template react-vite/default-ts.
  4. Open Storybook in your browser.
  5. Observe the sidebar for new stories prefixed with "V:" (e.g., "V:Button").
  6. Click on a virtual story. Verify that controls are generated based on the component's props and that default fake values are applied.
  7. Interact with the controls and confirm the component updates.
  8. (Optional) Use the "Create new story" feature (if save-from-controls is enabled) to save a virtual story as a real .stories file.

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Checklist for Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

  • Make sure this PR contains one of the labels below:

    Available labels
    • bug: Internal changes that fixes incorrect behavior.
    • maintenance: User-facing maintenance tasks.
    • dependencies: Upgrading (sometimes downgrading) dependencies.
    • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
    • cleanup: Minor cleanup style change. Will not show up in release changelog.
    • documentation: Documentation only changes. Will not show up in release changelog.
    • feature request: Introducing a new feature.
    • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
    • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>


Open in Cursor Open in Web

This commit introduces the Ghost Stories feature, which automatically generates virtual stories for component files. It includes component detection, prop analysis, virtual module handling via Vite, and integration with Storybook's indexer API.

Co-authored-by: dev <[email protected]>
Copy link

cursor bot commented Sep 25, 2025

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
Learn more about Cursor Agents

Copy link
Contributor

coderabbitai bot commented Sep 25, 2025

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch cursor/create-virtual-stories-indexer-and-save-feature-d363

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

Fails
🚫

PR is not labeled with one of: ["cleanup","BREAKING CHANGE","feature request","bug","documentation","maintenance","build","dependencies"]

🚫

PR is not labeled with one of: ["ci:normal","ci:merged","ci:daily","ci:docs"]

🚫 PR title must be in the format of "Area: Summary", With both Area and Summary starting with a capital letter Good examples: - "Docs: Describe Canvas Doc Block" - "Svelte: Support Svelte v4" Bad examples: - "add new api docs" - "fix: Svelte 4 support" - "Vue: improve docs"

Generated by 🚫 dangerJS against 5e37c11

Copy link

nx-cloud bot commented Sep 25, 2025

View your CI Pipeline Execution ↗ for commit 5e37c11

Command Status Duration Result
nx run-many -t build --parallel=3 ✅ Succeeded 49s View ↗

☁️ Nx Cloud last updated this comment at 2025-09-25 08:03:00 UTC

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants