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: dev, design, debug and document your...
Search
Marie-Laure Thuret
September 29, 2017
Programming
0
1k
Storybook: dev, design, debug and document your UI components
Marie-Laure Thuret
September 29, 2017
Tweet
Share
More Decks by Marie-Laure Thuret
See All by Marie-Laure Thuret
JGiven, enfin une réelle documentation vivante
mlthuret
1
950
La simplicité comme moyen d'être performant, résilient et de réduire le Time To Market.
mlthuret
0
93
Pièges et difficultés du BDD : comment les résoudre ?
mlthuret
1
330
Other Decks in Programming
See All in Programming
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
NPOでのDevinの活用
codeforeveryone
0
800
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
320
PicoRuby on Rails
makicamel
2
130
GraphRAGの仕組みまるわかり
tosuri13
8
530
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
51
33k
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
4
720
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
430
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
670
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
640
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
610
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Balancing Empowerment & Direction
lara
1
420
Testing 201, or: Great Expectations
jmmastey
42
7.6k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
What's in a price? How to price your products and services
michaelherold
246
12k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Done Done
chrislema
184
16k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Navigating Team Friction
lara
187
15k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
September 2017 Storybook: Design, Develop, Document and Debug your React
UI components Marie-Laure Thuret
Thanks to our sponsors!
MARIE-LAURE THURET Developer at @mlthuret
@mlthuret A UI component often relies on several states
@mlthuret A simple pagination component
@mlthuret currentPage pagePadding showNext showPrevious showLast numberOfPages showFirst A simple
pagination component
@mlthuret expect buttons to be disabled currentPage = 1 currentPage
= 6 and nbPages = 6 A simple pagination component
@mlthuret How do we make sure they are ? well
documented
@mlthuret isolated environment to quickly develop and design your components
thanks to hot reloading
@mlthuret Muhammed Thanish https://github.com/storybooks/ Arunoda Susiripala
@mlthuret Introducing a new maintainers team
@mlthuret Design Develop Document Debug Discuss Development Lifecycle
@mlthuret Getting Started Easy to install Ready for iterating quickly
$getStorybook
@mlthuret Storybook interface
@mlthuret List of the stories Storybook interface
@mlthuret Storybook interface Stories kind List of the stories
@mlthuret Stories Stories kind List of the stories Storybook interface
@mlthuret Actions and add- on panels Storybook interface
@mlthuret Component view Storybook interface
@mlthuret Demo
@mlthuret API First
@mlthuret Create live documentation
@mlthuret Create live documentation Document style and behaviour
@mlthuret How can I use a component? Create live documentation
@mlthuret Examples
@mlthuret How do we make sure the documentation ? never
breaks
@mlthuret We need to add tests
@mlthuret Testing markup through snapshot testing Storyshots
@mlthuret Tests are your application’s specifications
@mlthuret Explicit behaviour by adding tests next to your stories
Specs add-on
@mlthuret Tests are failing if differences are spotted between two
components pictures Visual regression testing
@mlthuret Visual regression testing
@mlthuret Visual regression testing
@mlthuret Demo
@mlthuret what about maintenance ?
@mlthuret Debug and enhance Small environment to debug efficiently Entry
point to start when adding a new feature
@mlthuret Communicate with others
@mlthuret Communicate with others When submitting a Pull Request
@mlthuret When opening issues Communicate with others
@mlthuret When an external contributor fixes a bug Communicate with
others
@mlthuret Design Develop Document Debug Discuss Iterate quickly Live documentation
Add specifications through tests Create a styleguide Share stories Entry points Isolated environment Hot reloading Expose props Isolate bugs Storybook contribution during the developer journey
@mlthuret Why adopt Storybook ?
@mlthuret Universal Storybook
@mlthuret Universal Storybook ReactJS React Native VueJS Angular
@mlthuret Demo
@mlthuret It’s up to you to create what’s missing The
add-on API
@mlthuret Add-ons from the community And a lot of others…
Material-UI Readme Background Internationalisation Specs
@mlthuret Roadmap Playground add-on Theming ability Add-on API refactoring See
multiple stories in 1 preview Responsive and multi-device viewports preview Automatic story detection
Thanks! MARIE-LAURE THURET Developer at @mlthuret