sharing/publishing

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Storybook composition allows browsing components from any Storybook via URL

Composition allows you to browse components from any Storybook accessible via URL inside your local Storybook. You can compose any Storybook published online or running locally no matter the view layer, tech stack, or dependencies.

Composed Storybook stories appear in the sidebar alongside your own

When you compose a Storybook, you'll see the composed Storybook's stories in the sidebar alongside your own stories.

Common workflows enabled by Storybook composition

Storybook composition unlocks workflows including: UI developers can quickly reference prior art without switching between Storybooks; Design systems can expand adoption by composing themselves into their users' Storybooks; Frontend platform can audit how components are used across projects; View multiple Storybooks with different tech stacks in one place.

Configure refs field in .storybook/main.js|ts to compose published Storybooks

To compose published Storybooks, add a `refs` field with information about the reference Storybook in your `.storybook/main.js|ts` configuration file. Pass in a URL to a statically built Storybook.

Compose multiple local Storybooks running on different ports

You can compose multiple Storybooks that are running locally. For instance, if you have a React Storybook and an Angular Storybook running on different ports, you can update your `.storybook/main.js|ts` configuration file to reference them. This will combine the Storybooks into your current one, and changes will be applied automatically when either of these changes, allowing you to develop both frameworks in sync.

Compose Storybooks per environment using refs as a function

The `refs` field in `.storybook/main.js|ts` can be a function that accepts a `config` parameter containing Storybook's configuration object. This allows you to compose Storybooks based on the current development environment, such as composing different Storybooks for development, staging, or production environments.

Use Storybook CLI extract command for outdated versions

If you're working with an outdated Storybook version or have a project-specific requirement that prevents you from updating to the latest version, you can rely on the Storybook CLI to generate the `index.json` file when you deploy your Storybook using the `extract` command. The `extract` command is not available in Storybook 8.0 or higher.

Give your agent this brain