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

Storybook: dev, design, debug and document your UI components

Storybook: dev, design, debug and document your UI components


Marie-Laure Thuret

September 29, 2017

More Decks by Marie-Laure Thuret

Other Decks in Programming


  1. September 2017 Storybook: Design, Develop, Document and Debug your React

    UI components Marie-Laure Thuret
  2. Thanks to our sponsors!

  3. MARIE-LAURE THURET Developer at @mlthuret

  4. @mlthuret A UI component often relies on several states

  5. @mlthuret A simple pagination component

  6. @mlthuret currentPage pagePadding showNext showPrevious showLast numberOfPages showFirst A simple

    pagination component
  7. @mlthuret expect buttons to be disabled currentPage = 1 currentPage

    = 6 and nbPages = 6 A simple pagination component
  8. @mlthuret How do we make sure they are ? well

  9. @mlthuret isolated environment to quickly develop and design your components

    thanks to hot reloading
  10. @mlthuret Muhammed Thanish https://github.com/storybooks/ Arunoda Susiripala

  11. @mlthuret Introducing a new maintainers team

  12. @mlthuret Design Develop Document Debug Discuss Development Lifecycle

  13. @mlthuret Getting Started Easy to install Ready for iterating quickly

  14. @mlthuret Storybook interface

  15. @mlthuret List of the stories Storybook interface

  16. @mlthuret Storybook interface Stories kind List of the stories

  17. @mlthuret Stories Stories kind List of the stories Storybook interface

  18. @mlthuret Actions and add- on panels Storybook interface

  19. @mlthuret Component view Storybook interface

  20. @mlthuret Demo

  21. @mlthuret API First

  22. @mlthuret Create live documentation

  23. @mlthuret Create live documentation Document style and behaviour

  24. @mlthuret How can I use a component? Create live documentation

  25. @mlthuret Examples

  26. @mlthuret How do we make sure the documentation ? never

  27. @mlthuret We need to add tests

  28. @mlthuret Testing markup through snapshot testing Storyshots

  29. @mlthuret Tests are your application’s specifications

  30. @mlthuret Explicit behaviour by adding tests next to your stories

    Specs add-on
  31. @mlthuret Tests are failing if differences are spotted between two

    components pictures Visual regression testing
  32. @mlthuret Visual regression testing

  33. @mlthuret Visual regression testing

  34. @mlthuret Demo

  35. @mlthuret what about maintenance ?

  36. @mlthuret Debug and enhance Small environment to debug efficiently Entry

    point to start when adding a new feature
  37. @mlthuret Communicate with others

  38. @mlthuret Communicate with others When submitting a Pull Request

  39. @mlthuret When opening issues Communicate with others

  40. @mlthuret When an external contributor fixes a bug Communicate with

  41. @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
  42. @mlthuret Why adopt Storybook ?

  43. @mlthuret Universal Storybook

  44. @mlthuret Universal Storybook ReactJS React Native VueJS Angular

  45. @mlthuret Demo

  46. @mlthuret It’s up to you to create what’s missing The

    add-on API
  47. @mlthuret Add-ons from the community And a lot of others…

    Material-UI Readme Background Internationalisation Specs
  48. @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
  49. Thanks! MARIE-LAURE THURET Developer at @mlthuret