docs/developer_docs_versioned_docs/version-6.1.0/testing/storybook.md

metadata

title: Storybook
sidebar_position: 5

Storybook

Superset uses Storybook for developing and testing UI components in isolation. Storybook provides a sandbox to build components independently, outside of the main application.

Public Storybook

A public Storybook with components from the master branch is available at:

apache-superset.github.io/superset-ui

Running Locally

Main Superset Storybook

To run the main Superset Storybook locally:

cd superset-frontend

# Start Storybook (opens at http://localhost:6006)
npm run storybook

# Build static Storybook
npm run build-storybook

@superset-ui Package Storybook

The @superset-ui packages have a separate Storybook for component library development:

cd superset-frontend

# Install dependencies and bootstrap packages
npm ci && npm run bootstrap

# Start the @superset-ui Storybook (opens at http://localhost:9001)
cd packages/superset-ui-demo
npm run storybook

Adding Stories

To an Existing Package

If stories already exist for the package, extend the examples array in the package's story file:

storybook/stories/<package>/index.js

To a New Package

1. Add package dependencies:

   npm install <package>
   

2. Create a story folder matching the package name:

   mkdir storybook/stories/superset-ui-<package>/
   

3. Create an index.js file with the story configuration:

   export default {
     examples: [
       {
         storyPath: '@superset-ui/package',
         storyName: 'My Story',
         renderStory: () => <MyComponent />,
       },
     ],
   };
   

   Use the | separator for nested stories:

   storyPath: '@superset-ui/package|Category|Subcategory';
   

Best Practices

• Isolate components: Stories should render components in isolation, without application context
• Show variations: Create stories for different states, sizes, and configurations
• Document props: Use Storybook's controls to expose configurable props
• Test edge cases: Include stories for loading states, error states, and empty states