Controls automatically generates graphical UI to adjust props. Notice the Controls tab in the addon panel. * Read more about Storybook templates at:Įxport const Controls = Template.bind() Let's see how they work by adding a new story in the Avatar component, located in src/: It also gives design systems consumers the ability to try components before integrating them to understand how each input (prop) affects them. It helps design systems creators stress test component inputs (props) by adjusting the argument's values.
You can supply multiple values to a component prop through arguments (or args for short) and adjust them through the UI. It allows you to interact with component inputs (props) dynamically in the Storybook UI. ultimately showing up in Storybook's addon panel.įresh installs of Storybook include the Controls addon already configured out of the box. When the user clicks a button, it will trigger the `action()`, Update your src/shared/global.js file to the following: We can add them easily with the Styled Components global style tag. Our design system requires some global styles (a CSS reset) to be applied to the document to render our components correctly. Now your Storybook should look like this (notice that the font styles are a little off, for instance, see the "Avatar: Initials" story): Add global styles But we won't be needing them for our design system, so it's safe to delete the stories directory. If you want, take some time and explore them. Install and run Storybook with the following commands: # Installs StorybookĮvery time you install Storybook into an application, it will add some examples inside the stories folder. 🛠Supports many view layers, including React.⚡️Developer experience tooling like Hot Module Reloading.Since design systems focus on UI components, Storybook is the ideal tool for the use case. Storybook is the industry-standard component explorer for developing UI components in isolation. Once you’ve installed Prettier, you should find that it auto-formats your code whenever you save a file. In VSCode, install the Prettier addon:Įnable the Format on Save editor.formatOnSave if you haven’t done so already.
If you are using Prettier for the first time, you may need to set it up for your editor.
0 kommentar(er)
