Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Storybook by Nicklas Knell DarmstadtJS cosee GmbH
Search
Nicklas
June 25, 2019
Programming
0
91
Storybook by Nicklas Knell DarmstadtJS cosee GmbH
Overview about Storybook, its use-cases and its features.
Nicklas
June 25, 2019
Tweet
Share
More Decks by Nicklas
See All by Nicklas
Vue vs React - Ein direkter Vergleich
nicklasknell
0
70
Einstieg in Vue.js - Cosee Lightning Talks
nicklasknell
0
62
Other Decks in Programming
See All in Programming
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
920
Code Reviews
bkuhlmann
4
890
Fragment Composition of GraphQL
quramy
7
1k
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
Elm 0.19.0 Changes
bkuhlmann
0
490
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
770
Ruby Pattern Matching
bkuhlmann
0
930
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
810
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
430
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
新宿ダンジョンを可視化してみた
satoshi7190
2
260
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
216
8.6k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
A Tale of Four Properties
chriscoyier
151
22k
Side Projects
sachag
451
41k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Become a Pro
speakerdeck
PRO
11
4.5k
Music & Morning Musume
bryan
41
5.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Unsuck your backbone
ammeep
663
57k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Building an army of robots
kneath
300
41k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Transcript
None
Nicklas Knell Frontend Engineer
[email protected]
@nicklas_knell
Why you might wanna use Storybook! → Managing many components
→ Building components in isolation → Enforcing a consistent design across one or more projects
One example for Consistent Design
What is Storybook?
What is Storybook? UI-Documentation Living Styleguide Component Explorer Isolated Development
Environment Testing Environment
None
None
How does it work? Storybook is just a web app
that you also can serve as static app.
Getting started npx -p @storybook/cli sb init
“Did you know that a whopping 18% of Storybook support
issues are related to configuration problems?!” - Michael Shilman
Presets New since v5.1 Simplify Storybook configuration Typescript SCSS
What is a story? Plain JavaScript Representation of a component
How is a story written?
Knobs Actions Source Notes A11y Backgrounds Links Viewport Addons
Addons Additionally you can write your own addons or browse
other community addons.
Knobs Provides a set of inputs to dynamically change a
components props.
Knobs text boolean number number in range color files object
array select radio buttons options date
Actions Actions are an easy way to log that an
event has happened.
Notes With Notes you can write simple text or markdown
to improve your components documentation.
Viewport Viewport provides a wide range of screen sizes to
choose from
Source View the stories source directly in Storybook.
Links If your component is a composition of other components,
you can link the stories of them in your story.
Backgrounds
Backgrounds
A11y View you stories in different types of color blindness.
A11y Analyse your components directly in Storybook.
Centered
Live Demo
+ 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