## @superset-ui/demo [](https://www.npmjs.com/package/@superset-ui/demo) [](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-demo) Storybook of `@superset-ui` packages. See it live at [apache-superset.github.io/superset-ui](https://apache-superset.github.io/superset-ui) ### Development #### Run storybook To view the storybook locally, you should first run `npm ci && npm run bootstrap` in the `@superset-ui` monorepo root directory, which will install all dependencies for this package and sym-link any `@superset-ui` packages to your local system. After that run `npm run storybook` which will open up a dev server at http://localhost:9001. #### Adding new stories ###### Existing package If stories already exist for the package you are adding, simply extend the `examples` already exported for that package in the `storybook/stories//index.js` file. ###### New package If you are creating stories for a package that doesn't yet have any stories, follow these steps: 1. Add any new package dependencies (including any `@superset-ui/*` packages) via `npm install `. 2. Create a new folder that mirrors the package name > e.g., `mkdir storybook/stories/superset-ui-color/` 3. Add an `index.js` file to that folder with a default export with the following shape: > you can use the `|` separator within the `storyPath` string to denote _nested_ stories e.g., > `storyPath: '@superset-ui/package|Nested i|Nested ii'` ```javascript default export { examples: [ { storyPath: , storyName: , renderStory: () => node, }, ... ] }; ```