Tools Storybook

@vitus-labs/tools-storybook provides a preconfigured Storybook 10 setup with automatic story discovery, rocketstories integration via a custom Vite plugin, and curated addon presets.

Installation

npm install @vitus-labs/tools-storybook

Peer dependencies: react >= 19, react-dom >= 19

For React Native projects, also install: react-native >= 0.74, react-native-web >= 0.19

Quick Start

CLI Commands

Add scripts to your package.json:

{
  "scripts": {
    "stories": "vl_stories",
    "stories:build": "vl_stories-build"
  }
}

For monorepos:

{
  "scripts": {
    "stories": "vl_stories-monorepo",
    "stories:build": "vl_stories-monorepo-build"
  }
}

Storybook Config Files

Create a .storybook/ directory with these files:

// .storybook/main.ts
export { default } from '@vitus-labs/tools-storybook/storybook/main'

// .storybook/preview.ts
export { default } from '@vitus-labs/tools-storybook/storybook/preview'

// .storybook/manager.ts
export { default } from '@vitus-labs/tools-storybook/storybook/manager'

Auto-Discovery System

Components are automatically discovered and turned into stories without writing manual .stories.tsx files. The indexer scans for component files and generates virtual story modules.

Rocketstyle Components

Get stories with dimension exports (states, sizes, variants) and pseudo-state rendering:

// Automatically discovered from component's index.ts
// Generates stories for each dimension: states, sizes, variants

Plain React Components

Get a basic story with title and default render.

Manual Stories

Standard .stories.tsx files are also discovered normally. The CSF indexer is wrapped to skip rocketstories-generated files to avoid conflicts.

src/
├── Button/
│   ├── index.ts                  ← Auto-discovered
│   └── Button.stories.tsx        ← Manual story (also works)
└── Input/
    └── index.ts                  ← Auto-discovered

Frameworks

Three framework options are available:

• vite (default) — uses @storybook/react-vite
• next — uses @storybook/nextjs-vite with next/font mocking
• react-native — uses @storybook/react-vite with react-native-web aliasing and platform-specific extension resolution

React Native Framework

When framework: 'react-native' is set:

• Aliases react-native imports to react-native-web so RN components render in the browser
• Resolves .native.* extensions first (.native.tsx, .native.ts, .native.jsx, .native.js)
• Sets __NATIVE__ to true and __WEB__ to false

For web frameworks (vite, next), .web.* extensions are resolved first instead.

Next.js Framework

When framework: 'next' is set, an esbuild plugin mocks next/font during Vite's dependency pre-bundling. This prevents npm font packages (e.g. geist) from baking the real Next.js font module into pre-bundled chunks.

Platform Globals

The Vite config defines platform globals that are available in stories:

Included Addons

Addons are configured via the addons config key. External addons map:

Built-in Storybook 10 essentials (actions, backgrounds, controls, measure, outline, toolbars, viewport) are included in core — no config needed.

Configuration

Configure via vl-tools.config.mjs under the stories key:

export default {
  stories: {
    framework: 'next',        // 'vite' | 'next' | 'react-native'
    port: 6006,
    outDir: '/docs',
    storiesDir: ['/src/**/*.stories.@(js|jsx|ts|tsx|md|mdx)'],
    rocketstories: {
      module: '@my-org/rocketstories',
      export: 'storyOf',
    },
    addons: {
      docs: true,
      a11y: true,
      chromatic: true,
      themes: true,
      vitest: true,
    },
    globals: {},
    ui: { theme: 'dark' },
  },
}

Rocketstories Config

This controls what auto-discovered stories import. When your rocketstories wrapper uses init({ decorators: [ThemeProvider] }), auto-discovered stories automatically get your decorators.

Exports