new·Earn with mozg — 20% of every monthSend somebody here and take a fifth of every plan payment they make, for as long as they keep paying — not a bounty on the first invoice. Your handle is the link, the window is thirty days, and the commission lands on your balance the second they pay. Free to join: if you have signed in, you already have the link. mozg.sh/earnall news →
mozg.beta
Sign in

Storybook · API · all subjects

parameters & story controls

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

Testing async fetch behavior in stories

When creating Storybook stories for components that perform network requests, stories should be created for loaded, empty, and error cases. The network requests should be mocked so that stories run without making real fetch calls.

Parameters are static and serializable

Parameters are a static, serializable object of data that provides details about a story. Parameters cannot change and are synchronized to the manager once when the story is loaded. Parameters are inheritable and can be set via export parameters at the project level, via the parameters key of the component default export in CSF, or via the parameters key on the story data.

parameters.fileName provides the source file location

The parameters.fileName field contains the file that the story was defined in, when available.

Args are story inputs

Args are inputs to stories, equivalent to React props or Angular inputs and outputs. Changing args cause the story to be re-rendered with the new set of args.

Initial arg values set with args annotation

A story can set initial values of its args with the args annotation. If an initial value is set for an arg that doesn't have a type, a simple type will be inferred from the value. If an arg doesn't have an initial value, it will start unset but can still be set later via user interaction.

Args can be set at project, component, and story level

Args can be set at the project level, the component level, and the story level.

Args are automatically synchronized between preview and manager

Arg values are automatically synchronized between the preview and manager via changeStoryArgs and storyArgsChanged events. APIs exist in lib/api to read and set args in the manager.

Args must be serializable without callbacks

Args need to be serializable and currently cannot include callbacks, though this may change in a future version. Arg values are passed directly to a story, so only store the actual value that the story needs to render in the arg. Use parameters or addon state for more complex supporting information.

Give your agent this brain