Collection of common utils for authoring Storybook stories
This package hosts common story meta config, TypeScript types and
Storybook-related utilities to reduce code duplication between Storybook
stories.
This utils package supports both public-facing storybook, and internal storybook
deployments - these have different configurations, although share many
similarities.
1. Install this package as a dependency
``sh`
# npm
npm install --save-dev @arcgis/storybook-utils
# yarn
yarn add --dev @arcgis/storybook-utils
2. Remove the following dependencies from your package.json, as this package
provides them for you automatically!
`yaml`
@storybook/addon-a11y
@storybook/addon-essentials
@storybook/web-components
@storybook/web-components-vite
Make sure your TypeScript version is 4.7+ and your tsconfig.json has
"moduleResolution": "bundle" (or Node16/NodeNext, but not the legacy
Node10/Node). This is needed for package.json's "exports" field to work.
This allows for pretty imports like @arcgis/storybook-utils/config. Without@arcgis/storybook-utils/dist/config
it, you would have to import
- Example minimum configuration
- More advanced configuration
Make sure to create a tsconfig.json file like in the above examples. This is.storybook
necessary because TypeScript implicitly excludes the folders whose name starts
with a dot (e.g. ) from the compilation context. That is whytsconfig.json
your repository's main isn't picked up for files in the.storybook directory.
For documentation of the functions and objects exported by storybook-utils`,
reference the TypeScript typings and the JSDoc.