Skip to content

WIP: Story inspector #32565

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
yannbf wants to merge 7 commits into from
Closed

WIP: Story inspector #32565

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bf0e4a2
feat(story-inspector): Add addon to visualize and create component st…
cursoragent Sep 24, 2025
bd5fafc
further updates
yannbf Sep 25, 2025
fc54858
fix path handling
yannbf Sep 25, 2025
968d4d5
export vite plugin
yannbf Sep 25, 2025
733974f
UNDO ME LATER
yannbf Sep 26, 2025
e9c5b6a
fix build
yannbf Sep 26, 2025
8f903c5
wip
yannbf Sep 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 79 additions & 78 deletions code/.storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,95 +16,96 @@ const imageContextPath = join(currentDirPath, '../frameworks/nextjs/src/image-co

const config = defineMain({
stories: [
'./bench/*.stories.@(js|jsx|ts|tsx)',
{
directory: '../core/template/stories',
titlePrefix: 'core',
},
{
directory: '../core/src/manager',
titlePrefix: 'manager',
},
{
directory: '../core/src/preview-api',
titlePrefix: 'preview',
},
{
directory: '../core/src/preview',
titlePrefix: 'preview',
},
{
directory: '../core/src/components/brand',
titlePrefix: 'brand',
},
{
directory: '../core/src/components/components',
titlePrefix: 'components',
},
// './bench/*.stories.@(js|jsx|ts|tsx)',
// {
// directory: '../core/template/stories',
// titlePrefix: 'core',
// },
// {
// directory: '../core/src/manager',
// titlePrefix: 'manager',
// },
// {
// directory: '../core/src/preview-api',
// titlePrefix: 'preview',
// },
// {
// directory: '../core/src/preview',
// titlePrefix: 'preview',
// },
// {
// directory: '../core/src/components/brand',
// titlePrefix: 'brand',
// },
// {
// directory: '../core/src/components/components',
// titlePrefix: 'components',
// },
{
directory: '../core/src/component-testing/components',
titlePrefix: 'component-testing',
},
{
directory: '../core/src/controls/components',
titlePrefix: 'controls',
},
{
directory: '../core/src/highlight',
titlePrefix: 'highlight',
},
{
directory: '../addons/docs/src/blocks',
titlePrefix: 'addons/docs/blocks',
},
{
directory: '../addons/a11y/src',
titlePrefix: 'addons/accessibility',
},
{
directory: '../addons/a11y/template/stories',
titlePrefix: 'addons/accessibility',
},
{
directory: '../addons/docs/template/stories',
titlePrefix: 'addons/docs',
},
{
directory: '../addons/links/template/stories',
titlePrefix: 'addons/links',
},
{
directory: '../addons/themes/template/stories',
titlePrefix: 'addons/themes',
},
{
directory: '../addons/onboarding/src',
titlePrefix: 'addons/onboarding',
},
{
directory: '../addons/pseudo-states/src',
titlePrefix: 'addons/pseudo-states',
},
{
directory: '../addons/vitest/src/components',
titlePrefix: 'addons/vitest',
},
{
directory: '../addons/vitest/template/stories',
titlePrefix: 'addons/vitest',
},
{
directory: '../addons/vitest/src',
titlePrefix: 'addons/vitest',
files: 'stories.tsx',
},
// {
// directory: '../core/src/controls/components',
// titlePrefix: 'controls',
// },
// {
// directory: '../core/src/highlight',
// titlePrefix: 'highlight',
// },
// {
// directory: '../addons/docs/src/blocks',
// titlePrefix: 'addons/docs/blocks',
// },
// {
// directory: '../addons/a11y/src',
// titlePrefix: 'addons/accessibility',
// },
// {
// directory: '../addons/a11y/template/stories',
// titlePrefix: 'addons/accessibility',
// },
// {
// directory: '../addons/docs/template/stories',
// titlePrefix: 'addons/docs',
// },
// {
// directory: '../addons/links/template/stories',
// titlePrefix: 'addons/links',
// },
// {
// directory: '../addons/themes/template/stories',
// titlePrefix: 'addons/themes',
// },
// {
// directory: '../addons/onboarding/src',
// titlePrefix: 'addons/onboarding',
// },
// {
// directory: '../addons/pseudo-states/src',
// titlePrefix: 'addons/pseudo-states',
// },
// {
// directory: '../addons/vitest/src/components',
// titlePrefix: 'addons/vitest',
// },
// {
// directory: '../addons/vitest/template/stories',
// titlePrefix: 'addons/vitest',
// },
// {
// directory: '../addons/vitest/src',
// titlePrefix: 'addons/vitest',
// files: 'stories.tsx',
// },
],
addons: [
'@storybook/addon-themes',
'@storybook/addon-docs',
'@storybook/addon-designs',
'@storybook/addon-vitest',
'@storybook/addon-a11y',
'@storybook/addon-story-inspector',
'storybook-addon-pseudo-states',
'@chromatic-com/storybook',
],
Expand Down
41 changes: 22 additions & 19 deletions code/.storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ import addonA11y from '@storybook/addon-a11y';
// TODO add empty preview
// import * as designs from '@storybook/addon-designs/preview';
import addonDocs from '@storybook/addon-docs';
import { DocsContext } from '@storybook/addon-docs/blocks';
// import { DocsContext } from '@storybook/addon-docs/blocks';
import addonInspector from '@storybook/addon-story-inspector';
import addonThemes from '@storybook/addon-themes';
import addonTest from '@storybook/addon-vitest';

Expand Down Expand Up @@ -142,8 +143,8 @@ const ThemedSetRoot = () => {

const loaders = [
/**
* This loader adds a DocsContext to the story, which is required for the most Blocks to work. A
* story will specify which stories they need in the index with:
* // * This loader adds a DocsContext to the story, which is required for the most Blocks to
* work. A story will specify which stories they need in the index with:
*
* ```ts
* parameters: {
Expand Down Expand Up @@ -193,25 +194,26 @@ const loaders = [

const decorators = [
// This decorator adds the DocsContext created in the loader above
(Story, { loaded: { docsContext } }) =>
docsContext ? (
<DocsContext.Provider value={docsContext}>
<Story />
</DocsContext.Provider>
) : (
<Story />
),
// (Story, { loaded: { docsContext } }) =>
// docsContext ? (
// <DocsContext.Provider value={docsContext}>
// <Story />
// </DocsContext.Provider>
// ) : (
// <Story />
// ),
/**
* This decorator adds wrappers that contains global styles for stories to be targeted by.
* Activated with parameters.docsStyles = true
*/ (Story, { parameters: { docsStyles } }) =>
docsStyles ? (
<DocsPageWrapper>
<Story />
</DocsPageWrapper>
) : (
<Story />
),
*/
// (Story, { parameters: { docsStyles } }) =>
// docsStyles ? (
// <DocsPageWrapper>
// <Story />
// </DocsPageWrapper>
// ) : (
// <Story />
// ),
/**
* This decorator renders the stories side-by-side, stacked or default based on the theme switcher
* in the toolbar
Expand Down Expand Up @@ -406,6 +408,7 @@ export default definePreview({
addonA11y(),
addonTest(),
addonPseudoStates(),
addonInspector(),
templatePreview,
],
decorators,
Expand Down
56 changes: 56 additions & 0 deletions code/addons/story-inspector/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
# Storybook Story Inspector

A Storybook addon that helps you visualize which components in your stories have corresponding story files and which don't.

## Features

- 🔍 **Visual Component Inspection**: Highlights components in your stories with color-coded indicators
- ✅ **Story Status Indication**: Green highlights for components that have stories, orange for those that don't
- 🚀 **Quick Navigation**: Click highlighted components with stories to navigate directly to them
- ➕ **Story Creation**: Click highlighted components without stories to automatically create a story file
- 🎯 **Smart Detection**: Uses file path metadata to accurately match components to their story files

## How it works

1. **File Transformation**: A Vite plugin automatically injects component file path metadata into your JSX elements during build
2. **Component Detection**: The addon scans the rendered story for components with this metadata
3. **Story Matching**: Components are matched against the story index to determine if they have stories
4. **Visual Feedback**: Components are highlighted with different colors based on their story status
5. **Interactive Actions**: Click highlights to navigate to stories or create new ones

## Usage

1. Install the addon (it's included as an internal Storybook addon)
2. Click the eye icon in the Storybook toolbar to enable story inspection
3. Components will be highlighted:
- **Green**: Component has stories - click to navigate
- **Orange**: Component has no stories - click to create one

## Highlighting Colors

- 🟢 **Green**: Components that have corresponding story files
- 🟠 **Orange**: Components that don't have story files yet

## Creating Stories

When you click on an orange-highlighted component (one without stories), the addon will:

1. Automatically create a new story file for that component
2. Generate basic story structure with sensible defaults
3. Navigate you to the newly created story
4. Show a success notification

## Technical Details

This addon consists of:

- **Vite Plugin**: Injects component file paths as data attributes
- **Manager Extension**: Provides toolbar controls and highlighting logic
- **Story Matching**: Compares component paths against the story index
- **Story Creation**: Integrates with Storybook's story creation APIs

## Limitations

- Currently optimized for Vite-based Storybook setups
- Works best with React components (JSX/TSX)
- Requires components to be in separate files for accurate detection
Loading