Storybook Utils

This package hosts common story meta config, TypeScript types and Storybook-related utilities to reduce code duplication between Storybook stories.

Definitions

This utils package supports both public-facing storybook, and internal storybook deployments - these have different configurations, although share many similarities.

Installation

1. Install this package as a dependency

   # 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!

   @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 it, you would have to import @arcgis/storybook-utils/dist/config

Usages

• Example minimum configuration
• More advanced configuration

Make sure to create a tsconfig.json file like in the above examples. This is necessary because TypeScript implicitly excludes the folders whose name starts with a dot (e.g. .storybook) from the compilation context. That is why your repository's main tsconfig.json 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.