A presentation about a frontend workshop for building UI components that solves day to day frontend developer problems as well as for designers. In this presentation you will find real life examples of what problems has Storybook solved for me as well as three different types of testing that you can do using this library!

1. STORYBOOK, THE
BEST FRIEND WE
ALL NEED
Anna Sala · JSDay Canarias 2023
CSS

2. ANNA SALA
Frontend Developer
/anna-sala
@annasala_

3. WHY THIS TALK?
@annasala_
🔘 Someone said ”I dare you to
become a developer”
🔘 I love rubber ducks
🔘 It is the easiest way to get
myself a Tesla
🔘 Someone said ”I dare you to
speak at a conference”

4. TABLE OF CONTENTS
WHAT IS STORYBOOK?
TESTING
PROBLEMS & SOLUTIONS
@annasala_

5. WHAT IS STORYBOOK?
Building UI components in isolation
@annasala_

6. WHAT IS STORYBOOK?
Building UI components in isolation
For Developers & Designers
@annasala_

7. WHAT IS STORYBOOK?
Building UI components in isolation
For Developers & Designers
Documenting components
@annasala_

8. WHAT IS STORYBOOK?
Building UI components in isolation
For Developers & Designers
Documenting components
Testing components
@annasala_

9. PROBLEM
@annasala_
Before, we had…
🔘 Files with too many imports
🔘 Too many lines of code
🔘 Hard to find components

10. PROBLEM
@annasala_
🔘 Components in one page
🔘 No margins or organization
🔘 Hard to find components
🔘 Non sense examples

11. SOLUTION
@annasala_
Storybook’s…
🔘 Organization
🔘 Clean UI
🔘 Easy UX

12. PROBLEM
@annasala_
We used to…
🔘 Control states hard-coding
🔘 Import same component
multiple times

13. SOLUTION
@annasala_
Storybook’s…
🔘 State control
🔘 Stories’ default states
🔘 Easy to reach components

14. SOLUTION
@annasala_

15. TESTING
@annasala_

16. INTERACTION TESTS
@annasala_
Can be done with Test Runner
🔘 Test in isolation
🔘 With play function
🔘 Without play function

19. ACCESSIBILITY
@annasala_
Can be done with a11y addon
🔘 Test accessibility errors
🔘 Catches up to
57% of WCAG issues
🔘 Easy to set up

20. VISUAL TESTS
@annasala_
Can be done with Chromatic
🔘 Regression tests
🔘 Zero configuration
🔘 Compare your visual changes
🔘 Easy to share with team

21. CONCLUSION
@annasala_
Storybook will…
… make your life easier!

22. THANKS!
Does anyone have
any question?
@annasala_
Source
- https://storybook.js.org/docs/react/get-started/install