Storybook by Nicklas Knell DarmstadtJS cosee GmbH

Overview about Storybook, its use-cases and its features.

Transcript

2. Nicklas Knell Frontend Engineer nicklas.knell@cosee.biz @nicklas_knell
3. Why you might wanna use Storybook! → Managing many components → Building components in isolation → Enforcing a consistent design across one or more projects
4. One example for Consistent Design
5. What is Storybook?
6. What is Storybook? UI-Documentation Living Styleguide Component Explorer Isolated Development Environment Testing Environment
9. How does it work? Storybook is just a web app that you also can serve as static app.
10. Getting started npx -p @storybook/cli sb init
11. “Did you know that a whopping 18% of Storybook support issues are related to configuration problems?!” - Michael Shilman
12. Presets New since v5.1 Simplify Storybook configuration Typescript SCSS
13. What is a story? Plain JavaScript Representation of a component
14. How is a story written?
15. Knobs Actions Source Notes A11y Backgrounds Links Viewport Addons
16. Addons Additionally you can write your own addons or browse other community addons.
17. Knobs Provides a set of inputs to dynamically change a components props.
18. Knobs text boolean number number in range color files object array select radio buttons options date
19. Actions Actions are an easy way to log that an event has happened.
20. Notes With Notes you can write simple text or markdown to improve your components documentation.
21. Viewport Viewport provides a wide range of screen sizes to choose from
22. Source View the stories source directly in Storybook.
23. Links If your component is a composition of other components, you can link the stories of them in your story.
24. Backgrounds
25. Backgrounds
26. A11y View you stories in different types of color blindness.
27. A11y Analyse your components directly in Storybook.
28. Centered
29. Live Demo
30. + Stories are written super fast + Addons provide an huge amount of features + Easily browse and mock your components - Setup can be a hell of a ride Conclusion