essentials

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

Disabling essential features in main.js

Individual essential features can be disabled by modifying the .storybook/main.js or main.ts configuration file. The feature keys that can be disabled are: actions, backgrounds, controls, highlight, measure, outline, toolbars, and viewport.

Storybook essentials list

Storybook essentials is a set of tools that help build, test, and document components. The essential features are: Actions, Backgrounds, Controls, Highlight, Measure & outline, Toolbars & globals, and Viewport.

Essentials zero-config setup

Essentials comes with a recommended configuration out of the box that requires no configuration to use. Many features can be configured via parameters as documented in each feature's documentation.

withThemeFromJSXProvider decorator usage

Use the withThemeFromJSXProvider decorator for libraries that expose themes to components through providers, such as Material UI, Styled-components, and Emotion.

withThemeByClassName decorator usage

Use the withThemeByClassName decorator for libraries that rely on CSS classes on a parent element to determine the theme.

withThemeByDataAttribute decorator usage

Use the withThemeByDataAttribute decorator for libraries that rely on data attributes on a parent element to determine the theme.

Themes addon purpose

The Themes addon for Storybook allows switching between multiple themes for components inside the preview.

Theme decorators available

The @storybook/addon-themes package exposes three decorators for implementing different theme methods: withThemeFromJSXProvider, withThemeByClassName, and withThemeByDataAttribute.

Viewport globals API: isRotated

The `isRotated` global is of type `boolean`. When true, the viewport applied will be rotated 90°, for example from portrait to landscape orientation.

Viewport parameters API: disable

The `disable` parameter is of type `boolean`. It turns off the viewport module's behavior and is most useful for overriding at more specific levels. For example, if set to true at project level, it can be re-enabled by setting it to false at meta (component) or story level.

Viewport parameters API: options

The `options` parameter is of type object with structure { [key: string]: { name: string; styles: { height: string, width: string }; type: 'desktop' | 'mobile' | 'tablet' | 'other'; } }. It specifies the available viewports. The width and height values in styles must include the unit, e.g. '320px'.

Viewport exports from storybook package

The viewport module exports INITIAL_VIEWPORTS and MINIMAL_VIEWPORTS from 'storybook/viewport'. INITIAL_VIEWPORTS is an object containing the full set of initial viewports, and MINIMAL_VIEWPORTS is an object containing the minimal set of viewports used by default.

Viewport keyboard shortcuts

The viewport module provides the following keyboard shortcuts: Next viewport is Alt+V, Previous viewport is Alt+Shift+V, Reset viewport is Alt+Control+V.

Viewport feature purpose and function

The viewport feature allows you to adjust the dimensions of the iframe your story is rendered in, making it easy to develop responsive UIs.

MINIMAL_VIEWPORTS default devices and dimensions

The viewport feature provides a minimal set of viewports by default. MINIMAL_VIEWPORTS includes four devices: mobile1 (Small mobile, 320×568 px), mobile2 (Large mobile, 414×896 px), tablet (Tablet, 834×1112 px), and desktop (Desktop, 1024×1280 px).

INITIAL_VIEWPORTS complete device list

INITIAL_VIEWPORTS provides a detailed set of 33 devices: iphone5 (320×568), iphone6 (375×667), iphone6p (414×736), iphone8p (414×736), iphonex (375×812), iphonexr (414×896), iphonexsmax (414×896), iphonese2 (375×667), iphone12mini (375×812), iphone12 (390×844), iphone12promax (428×926), iphoneSE3 (375×667), iphone13 (390×844), iphone13pro (390×844), iphone13promax (428×926), iphone14 (390×844), iphone14pro (393×852), iphone14promax (430×932), galaxys5 (360×640), galaxys9 (360×740), nexus5x (412×668), nexus6p (412×732), pixel (540×960), pixelxl (720×1280), ipad (768×1024), ipad10p (834×1112), ipad11p (834×1194), ipad12p (1024×1366).

Configure viewport via preview file

You can configure custom viewports using the `viewport` parameter in your `.storybook/preview.*` file. You can define available viewports using the `options` property and set the initial viewport using the `initialGlobals` property.

Viewport configuration at component or story level

Parameters can be applied at project, component, and story levels, allowing you to specify viewport configuration where needed. This allows you to set the available viewports for all stories of a component or for individual stories.

Setting default viewport for a story with globals

You can set a story to default to a specific viewport by using the `globals` option. When you specify a viewport for a story using globals, the viewport is applied and cannot be changed using the toolbar, ensuring the story is always rendered on the specific viewport.

Viewport globals API: value

The `value` global is of type `string`. When set, the viewport is applied and cannot be changed using the toolbar. Must match the key of one of the available viewports.

Storybook purpose and use cases

Storybook is a frontend workshop for building UI components and pages in isolation. It helps developers develop and share hard-to-reach states and edge cases without needing to run the whole app. Thousands of teams use it for UI development, testing, and documentation. It is open source and free.

Community addons: check compatibility with latest Storybook version

Some community-created addons may work with outdated versions of Storybook. Before using community addons, verify they are compatible with the latest Storybook version.

Addon channel not set: add channel mock for non-browser environments

When an addon tries to access the channel but it is not set (e.g., in Jest or similar non-browser environments), add a channel mock: import { addons, mockChannel } from 'storybook/preview-api'; addons.setChannel(mockChannel());

storiesOf format removed in Storybook 8.0

The older storiesOf format for writing stories was removed in Storybook 8.0 and is no longer maintained. Users should migrate their stories to CSF (Component Story Format). The old storiesOf documentation is still available in the release/5.3 branch for reference.

@storybook/icons package for toolbar and addon icons

The @storybook/icons package provides a set of icons that can be used to customize UI in addons and Storybook global types. Documentation and icon references are available to guide addon development and global type definitions.

Vue 2 no longer supported in Storybook 8

Vue 2 reached End of Life on December 31, 2023, and is no longer supported in Storybook 8 and above. Users should upgrade to Vue 3, which Storybook fully supports. To use Vue 2, install the latest version of Storybook 7.

Vue 3 GraphQL queries require @vue/apollo-composable

When working with Vue 3 and Storybook's MSW addon for mocked GraphQL queries, install @vue/apollo-composable to make GraphQL queries work properly.

Svelte GraphQL queries require @rollup/plugin-replace

With Svelte and Storybook's MSW addon, install @rollup/plugin-replace and configure rollup.config.js to replace 'process.env.NODE_ENV' with JSON.stringify('development') so GraphQL queries work properly.

Angular mockServiceWorker.js file placement matters for MSW addon

With Angular and Storybook's MSW addon, the placement of the mockServiceWorker.js file is the most common issue. Refer to the MSW examples repository for Angular configuration.

MSW addon supports other GraphQL providers

The Storybook MSW addon can be integrated with different GraphQL providers beyond the default. Examples are available in the MSW addon repository.

MSW addon does not support GraphQL mutations

The Storybook MSW addon currently only supports GraphQL queries, not mutations. Users interested in mutation support should open an issue in the MSW addon repository.

Certain characters in story names cause collisions

Storybook allows most characters in story names, but specific characters like # can lead to issues when generating internal identifiers, causing collisions and incorrect story output. These characters should be used sparingly.

Source loader returns undefined with curried functions

Storybook's source loader has a known issue where it returns undefined when used with curried functions. Users interested in a fix should open an issue with a working reproduction.

CSF test functions coming soon to Storybook 10

Familiar and ergonomic CSF test functions are coming soon to Storybook 10 as an experimental feature.

addon-vitest replaces test-runner

addon-vitest and the Storybook Test experience is designed to supercede the test-runner. It is faster and provides a better experience for writing and running tests. Projects using React, Vue, or Svelte built with Vite should consider migrating to addon-vitest.

Community addons may not be compatible with Storybook 10

Community addons that work well with Storybook 9.x might not yet be compatible with Storybook 10.x. Removing all addons not in the @storybook npm namespace is a debugging technique to isolate compatibility issues.

Storybook 10 main features

Storybook 10 is a breaking maintenance release focused on ESM-only package distribution. Its main features include ESM-only distribution to reduce install size, CSF Next preview with better typesafety and autocompletion, and improved tags-based filtering.

Storybook 10 requires Node 20.19+ or 22.12+

Node 20.19 or 22.12 is now required to run Storybook 10. This is a breaking change from earlier versions.

Storybook 10 automatic upgrade process

Running the upgrade command finds all Storybook projects in a repository, checks that none of the breaking changes apply, upgrades dependencies to the latest version, and runs automigrations to check for common upgrade tasks and perform them automatically with approval.

Vite version requirement for Storybook 9

Vite 5 or higher is now required to use Storybook 9.

Vitest version requirement for Storybook 9

Vitest 3 or higher is now required to use Storybook 9. Support for Vitest 2 has been dropped.

pnpm version requirement for Storybook 9

pnpm 9 or higher is now required to use Storybook 9.

yarn version requirement for Storybook 9

yarn 4 or higher is now required to use Storybook 9.

TypeScript version requirement for Storybook 9

TypeScript 4.9 or higher is now required to use Storybook 9.

Essential addons moved to core in Storybook 9

The essential addons (viewport, controls, interactions, and actions) have been moved to core in Storybook 9 and are no longer published as separate packages.

Test addon renamed to addon-vitest

The experimental-addon-test has been stabilized and renamed to addon-vitest in Storybook 9.

nextjs-vite framework now stabilized

The nextjs-vite framework has been stabilized in Storybook 9.

Webpack builder support removed for Preact, Vue, and Web Components

Webpack5 builder support has been removed for Preact, Vue, and Web Components in Storybook 9. Projects using these frameworks should migrate to Vite.

Manager builder removed node aliases

The manager builder no longer includes aliases for util, assert, and process in Storybook 9.

Storybook 9 package consolidation table

The following packages have been consolidated into storybook core with these replacements: @storybook/addon-actions → storybook/actions, @storybook/addon-backgrounds → N/A, @storybook/addon-controls → N/A, @storybook/addon-highlight → storybook/highlight, @storybook/addon-interactions → N/A, @storybook/addon-measure → N/A, @storybook/addon-outline → N/A, @storybook/addon-toolbars → N/A, @storybook/addon-viewport → storybook/viewport, @storybook/manager-api → storybook/manager-api, @storybook/preview-api → storybook/preview-api, @storybook/test → storybook/test, @storybook/theming → storybook/theming.

Storybook 9 deprecated internal packages

The following packages have been consolidated into internal paths and will continue to work in 9.x but will likely be removed in 10.0: @storybook/builder-manager → storybook/internal/builder-manager, @storybook/channels → storybook/internal/channels, @storybook/client-logger → storybook/internal/client-logger, @storybook/components → storybook/internal/components, @storybook/core-common → storybook/internal/common, @storybook/core-events → storybook/internal/core-events, @storybook/core-server → storybook/internal/core-server, @storybook/csf-tools → storybook/internal/csf-tools, @storybook/docs-tools → storybook/internal/docs-tools, @storybook/manager → storybook/internal/manager, @storybook/node-logger → storybook/internal/node-logger, @storybook/preview → storybook/internal/preview, @storybook/router → storybook/internal/router, @storybook/telemetry → storybook/internal/telemetry, @storybook/types → storybook/internal/types.

Optional migration: test-runner to addon-vitest

The addon-vitest is designed to supersede the test-runner and is faster with a better experience for writing and running tests. If your project uses React, Vue, or Svelte and is built with Vite, you should consider migrating to addon-vitest.

Storybook 9 key features overview

Storybook 9 introduces Storybook Test (a batteries-included testing tool), component testing, accessibility testing, test coverage, a 48% lighter bundle, React Native support for device and web, and tags-based story organization.

Optional migration: CSF 2 to CSF 3

Storybook provides a codemod to automatically convert stories from CSF 2 to CSF 3, which offers many benefits over CSF 2.

Node version requirement for Storybook 9

Node 20 or higher is now required to use Storybook 9.

Angular version requirement for Storybook 9

Angular 18 or higher is now required to use Storybook 9.

Lit version requirement for Storybook 9

Lit v3 or higher is now required to use Storybook 9.

Next.js version requirement for Storybook 9

Next.js 14 or higher is now required to use Storybook 9.

Svelte version requirement for Storybook 9

Svelte 5 or higher is now required to use Storybook 9.

Give your agent this brain