September 2017Storybook: Design, Develop, Document and Debug your React UIcomponentsMarie-Laure Thuret
View Slide
Thanks to our sponsors!
MARIE-LAURE THURETDeveloper at@mlthuret
@mlthuretA UI component often relieson several states
@mlthuretA simple pagination component
@mlthuretcurrentPagepagePaddingshowNextshowPreviousshowLastnumberOfPagesshowFirstA simple pagination component
@mlthuretexpect buttons to be disabledcurrentPage = 1 currentPage = 6 and nbPages = 6A simple pagination component
@mlthuretHow do we make surethey are?well documented
@mlthuretisolated environment to quickly develop and designyour components thanks to hot reloading
@mlthuretMuhammed Thanishhttps://github.com/storybooks/Arunoda Susiripala
@mlthuretIntroducing a new maintainers team
@mlthuretDesignDevelop DocumentDebugDiscussDevelopment Lifecycle
@mlthuretGetting StartedEasy to installReady for iteratingquickly$getStorybook
@mlthuretStorybook interface
@mlthuretList ofthestoriesStorybook interface
@mlthuretStorybook interfaceStorieskindList ofthestories
@mlthuretStoriesStorieskindList ofthestoriesStorybook interface
@mlthuretActionsand add-onpanelsStorybook interface
@mlthuretComponentviewStorybook interface
@mlthuretDemo
@mlthuretAPIFirst
@mlthuretCreatelivedocumentation
@mlthuretCreate live documentationDocument styleand behaviour
@mlthuretHow can I use acomponent?Create live documentation
@mlthuretExamples
@mlthuretHow do we make surethe documentation?never breaks
@mlthuretWe need toadd tests
@mlthuretTesting markup throughsnapshot testingStoryshots
@mlthuretTests are your application’sspecifications
@mlthuretExplicit behaviour by adding tests next toyour storiesSpecs add-on
@mlthuretTests are failing if differences are spottedbetween two components picturesVisual regression testing
@mlthuretVisual regression testing
@mlthuretwhat aboutmaintenance?
@mlthuretDebug and enhanceSmall environment to debug efficientlyEntry point to start when adding anew feature
@mlthuretCommunicate withothers
@mlthuretCommunicate with othersWhensubmitting aPull Request
@mlthuretWhenopeningissuesCommunicate with others
@mlthuretWhen anexternalcontributor fixesa bugCommunicate with others
@mlthuretDesignDevelop DocumentDebugDiscussIterate quicklyLive documentationAdd specifications through testsCreate a styleguideShare storiesEntry pointsIsolated environmentHot reloadingExpose propsIsolate bugsStorybook contribution during thedeveloper journey
@mlthuretWhyadoptStorybook?
@mlthuretUniversalStorybook
@mlthuretUniversal StorybookReactJS React Native VueJS Angular
@mlthuretIt’s up toyou tocreatewhat’smissingThe add-on API
@mlthuretAdd-ons from the communityAnd a lot of others…Material-UIReadmeBackgroundInternationalisationSpecs
@mlthuretRoadmapPlayground add-onTheming abilityAdd-on API refactoringSee multiple stories in 1 previewResponsive and multi-device viewports previewAutomatic story detection
Thanks!MARIE-LAURE THURETDeveloper at@mlthuret
mlthuret
o0h
minodriven
usamik26
aanrii
hiro_y
kentaroutakeda
takahirom
smiyawaki0820
ivargrimstad
makomakok
masayaaoyama
okuramasafumi
tanoku
caitiem20
trishagee
frogandcode
rasmusluckow
mojombo
sferik
danielanewman
lauravandoore
jensimmons
speakerdeck
hannesfritz