STORYWRITING METHODS HOW TO
STORYWRITING METHODS PORTABLE
STORYWRITING METHODS CODE

When building design systems or component libraries, you may have two or more components created to work together. You can also configure decorators at the story, component and global level. Accomplish this using a decorator that wraps the stories in a div with padding, like so:Дecorators can be more complex and are often provided by addons. Your styles might expect a theme or layout wrapper, or your UI might expect specific context or data providers.ДЄ simple example is adding padding to a componentвЂ™s stories. Components are often created with assumptions about вЂwhereвЂ™ they render.

Using decoratorsДecorators are a mechanism to wrap a component in arbitrary markup when rendering a story. Most addons are configured via a parameter-based API and can be influenced at a global, component and story level. This parameter would instruct the backgrounds addon to reconfigure itself whenever a Button story is selected. You might add a component-level backgrounds parameter: A storyвЂ™s parameters can be used to provide configuration to various addons at the level of a story or group of stories.ДЇor instance, suppose you wanted to test your Button component against a different set of backgrounds than the other components in your app. Parameters are StorybookвЂ™s method of defining static metadata for stories. Without the help of the play function and the you had to write your own stories and manually interact with the component to test out each use case scenario possible.

For example, suppose you wanted to validate a form component, you could write the following story using the play function to check how the component responds when filling in the inputs with information:

STORYWRITING METHODS CODE

They're small code snippets that execute once your story renders. Storybook's play function and the are convenient helper methods to test component scenarios that otherwise require user intervention. That way, interactions (like clicks) get logged in the actions panel. For instance, Actions auto-detects which args are callbacks and appends a logging function to them. It means your team can dynamically change components in Storybook to stress test and find edge cases.ДЄddons can enhance args. ThatвЂ™s not all! Each of the args from the story function are live editable using StorybookвЂ™s controls panel. This pattern allows you to reuse your data definitions across the component hierarchy, making your stories more maintainable. When ButtonвЂ™s signature changes, you only need to change ButtonвЂ™s stories to reflect the new schema, and ButtonGroupвЂ™s stories will automatically be updated. For example, if we make a ButtonGroup story, we might remix two stories from its child component Button. WhatвЂ™s more, you can import args to reuse when writing stories for other components, and it's helpful when youвЂ™re building composite components. We copy the Template so each exported story can set its own properties on it.Д«y introducing args into your component's stories, you're not only reducing the amount of code you need to write, but you're also decreasing data duplication, as shown by spreading the Primary story's args into the other stories. рџ’Ў Template.bind() is a standard JavaScript technique for making a copy of a function. As an example, hereвЂ™s a story that uses React Hooks to change the button's state : We recommend args as much as possible when writing your own stories. You can use them while creating your component's stories if you need them, although you should treat them as an advanced use case.

React Hooks are convenient helper methods to create components using a more streamlined approach.

STORYWRITING METHODS HOW TO

HereвЂ™s how to render Button in the вЂњprimaryвЂќ state and export a story called Primary. We recommend you use UpperCamelCase for your story exports. Use the named exports of a CSF file to define your componentвЂ™s stories. For example, hereвЂ™s the default export for a story file : Defining stories The default export metadata controls how Storybook lists your stories and provides information used by addons. The key ingredients are the default export that describes the component, and named exports that describe the stories.

STORYWRITING METHODS PORTABLE

We define stories according to the Component Story Format (CSF), an ES6 module-based standard that is easy to write and portable between tools.

Storywriting methods