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
1.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
970
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
340
Other Decks in Programming
See All in Programming
Introduce Hono CLI
yusukebe
6
3.1k
Devoxx BE - Local Development in the AI Era
kdubois
0
140
Temporal Knowledge Graphで作る! 時間変化するナレッジを扱うAI Agentの世界
po3rin
2
420
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
130
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
三者三様 宣言的UI
kkagurazaka
0
260
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
910
チームの境界をブチ抜いていけ
tokai235
0
230
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
330
Software Architecture
hschwentner
6
2.3k
品質ワークショップをやってみた
nealle
0
650
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Producing Creativity
orderedlist
PRO
347
40k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Balancing Empowerment & Direction
lara
5
700
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
Code Reviewing Like a Champion
maltzj
526
40k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
650
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
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