parameters

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

Parameters definition and levels

Parameters are static metadata used to configure stories and addons in Storybook. They are specified at three levels: story level (applies to that story only), meta/component level (applies to all stories in that CSF file), and project/global level (applies to all stories in the Storybook).

Story-level parameters definition

Story-level parameters are defined in the `parameters` property of the story (named export). Parameters specified at the story level override those specified at the project level and meta level.

Meta-level parameters definition

Meta-level parameters are specified in the `parameters` property of the meta (default export) in a CSF file. They apply to all stories in that file and override parameters specified at the project level.

Project-level parameters definition

Project-level (global) parameters are defined in the `parameters` property of the meta (default export) in the `.storybook/preview.*` file. They apply to all stories in the Storybook.

layout parameter

The `layout` parameter has type `'centered' | 'fullscreen' | 'padded'` with default value `'padded'`. It specifies how the canvas should lay out the story. 'centered' centers the story within the canvas, 'padded' (the default) adds padding to the story, and 'fullscreen' shows the story as-is without padding.

htmlLang parameter

The `htmlLang` parameter has type `string` with default value `'en'`. It accepts a BCP-47 language tag (e.g. 'ja', 'de', 'fr-CH') describing the language of the rendered story UI. In story view it sets the `lang` attribute on the preview's `<html>` element; in docs view it sets `lang` on each embedded story canvas. It is inherited from project to meta to story level. Storybook's own interface always reports as English and is unaffected by this parameter.

docs.lang parameter

The `docs.lang` parameter has type `string` with default value `'en'`. It accepts a BCP-47 language tag describing the language of the docs prose that Storybook renders, including component and story descriptions, ArgTypes description cells, and free-form MDX prose. It is resolved from project to meta for page-level content and from project to meta to story for per-story content. It is independent of `htmlLang`; the documentation language can differ from the story rendering language. Storybook chrome stays English regardless.

options parameter

The `options` parameter has type `{ storySort?: StorySortConfig | StorySortFn; }`. It can only be applied at the project level, not at meta or story levels.

options.storySort parameter types

The `options.storySort` parameter accepts either a StorySortConfig object or a StorySortFn function. StorySortConfig is `{ includeNames?: boolean; locales?: string; method?: 'alphabetical' | 'alphabetical-by-kind' | 'custom'; order?: string[]; }`. StorySortFn is `(a: Story, b: Story) => number` where Story is `{ id: string; importPath: string; name: string; title: string; }`.

options.storySort configuration options

The `options.storySort` parameter supports these configuration options: includeNames (boolean, defaults to false) to include story name in sorting; locales (string, defaults to system locale) for locale-specific sorting; method (string, defaults to 'alphabetical') with values 'alphabetical', 'alphabetical-by-kind', or 'custom'; order (string array) to specify the order in which stories appear first, with support for nested arrays for 2nd-level story kinds (e.g. ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components']), with all other stories following in alphabetical order.

test parameter configuration

The `test` parameter has type `{ clearMocks?: boolean; mockReset?: boolean; restoreMocks?: boolean; dangerouslyIgnoreUnhandledErrors?: boolean; }`. These options control behavior of mocks and error handling during story execution.

test.clearMocks parameter

The `test.clearMocks` parameter has type `boolean` with default value `false`. Similar to Vitest, when set to true it will call `.mockClear()` on all spies created with `fn()` from `storybook/test` when a story unmounts. This clears mock history but does not reset implementation to the default.

test.mockReset parameter

The `test.mockReset` parameter has type `boolean` with default value `false`. Similar to Vitest, when set to true it will call `.mockReset()` on all spies created with `fn()` from `storybook/test` when a story unmounts. This clears mock history and resets implementation to an empty function that returns `undefined`.

test.restoreMocks parameter

The `test.restoreMocks` parameter has type `boolean` with default value `true`. Similar to Vitest, it will call `.restoreMocks()` on all spies created with `fn()` from `storybook/test` when a story unmounts. This clears mock history and resets implementation to the original one.

test.dangerouslyIgnoreUnhandledErrors parameter

The `test.dangerouslyIgnoreUnhandledErrors` parameter has type `boolean` with default value `false`. When set to true, it prevents the play function from failing and showing a warning when unhandled errors are thrown during execution. Unhandled errors might otherwise cause false positive assertions.

Parameter inheritance and merging

Parameters are merged together in order of increasing specificity: project (global) parameters first, then meta (component) parameters, then story parameters. Objects are deep-merged, but arrays and other properties are overwritten. Story parameters override meta parameters, which override project parameters.

Parameter merging example result

When parameters are specified at multiple levels, the merging works as follows: for project-level `{ layout: 'centered', demo: { demoProperty: 'a', demoArray: [1, 2] } }`, meta-level `{ layout: 'fullscreen', demo: { demoProperty: 'b', anotherDemoProperty: 'b' } }`, and story-level `{ layout: 'padded', demo: { demoArray: [3, 4] } }`, the resulting parameters are `{ layout: 'padded', demo: { demoProperty: 'b', anotherDemoProperty: 'b', demoArray: [3, 4] } }` where the layout is overwritten at each level and the demo object is deep-merged with arrays overwritten.

Give your agent this brain