Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Storybook by Nicklas Knell DarmstadtJS cosee GmbH

Avatar for Nicklas Nicklas
June 25, 2019
Programming
0
110

Storybook by Nicklas Knell DarmstadtJS cosee GmbH

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

Avatar for Nicklas

Nicklas

June 25, 2019
Tweet

More Decks by Nicklas

See All by Nicklas
Vue vs React - Ein direkter Vergleich
Avatar for Nicklas nicklasknell
0
76
Einstieg in Vue.js - Cosee Lightning Talks
Avatar for Nicklas nicklasknell
0
68

Other Decks in Programming

See All in Programming
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
Avatar for 入井 啓太 iriikeita
0
360
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
Avatar for GENIEE ,Inc geniee_inc
0
140
pnpm に provenance のダウングレード を検出する PR を出してみた
Avatar for mattsuu ryo_manba
1
160
コードとあなたと私の距離 / The Distance Between Code, You, and I
Avatar for YAMAOKA Hiroyuki hiro_y
0
200
One Enishi After Another
Avatar for Koji SHIMADA snoozer05
PRO
0
170
TransformerからMCPまで（現代AIを理解するための羅針盤）
Avatar for MIKIO KUBO mickey_kubo
7
5.6k
オープンソースソフトウェアへの解像度🔬
Avatar for うたもく utam0k
17
3.2k
NIKKEI Tech Talk#38
Avatar for cipepser cipepser
0
300
Developer Joy - The New Paradigm
Avatar for Holly Cummins hollycummins
1
370
CSC305 Lecture 12
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
240
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
330
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
Avatar for N Akita nakita628
0
330

Featured

See All Featured
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.2k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.1k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
930
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
130k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
526
40k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
Visualization
Avatar for Eitan Lees eitanlees
150
16k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k

Transcript

  1. None

  2. Nicklas Knell Frontend Engineer [email protected] @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
  7. None
  8. None

  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