Hack_Storybook_BADCamp_2022.pdf

Transcript

1. Melissa Miller | BADCamp 2022 How to Hack Storybook 
 for Drupal +
2. • Senior UX Engineer @ Pantheon • Former Web Leader in Higher Ed • Working with Drupal since 2011 • Michigan → Ohio → California • Musician • Loves dogs About Me mel-miller.com
3. • UI Builder • Component Library • Implementation Toolkit for a Design System • Living Style Guide • Etc… storybook.js.org What is Storybook?
4. • UI Builder • Component Library • Implementation Toolkit for a Design System • Living Style Guide • Etc… storybook.js.org What is Storybook?
6. But, first… …before we go down this road, decide if this is a good idea for your project
7. Sure, lets do it Maybe not • Multiple sites or themes will be using the toolkit, either now or in the future • Different people or teams will be building the toolkit than those who are building the site • You’re looking to build out UX ahead of site development • If there’s a 1:1 toolkit to site relationship, and you’re the developer for both • If you’re not specifically tied to Storybook, you could consider an alternative with native Twig support (Fractal, for example)
8. If yes, use existing tool or DIY? www.emulsify.info wingsuit-designsystem.github.io
9. • You want to keep the toolkit lean and build from the ground up, rather than stripping down an existing project. • You want more to organize the toolkit as you see fit for any unique or special needs. • You want to understand how it all works and be able to extend and customize the platform. Why DIY?
10. 1. Get Storybook to recognize and load Twig files + Emulate Drupal-specific Twig 2. Create a wrapper/process for Drupal Behaviors * 3. Package up your assets — CSS/JS/Twig 4. Distribute your toolkit to a Drupal site or theme But, How? * Optional and Drupal-speci fi c
11. sb-drupal demo project: github.com/mel-miller/sb-drupal
12. • Since we are using an unofficial edition of Storybook, the official documentation can be a bit lacking in certain areas • However, some crucial parts are valid for all editions such as: • Args • Parameters • Decorators • Naming components and hierarchy • Writing docs • General Storybook configuration Using Storybook Docs
13. Much of what is in the Writing Stories documentation is valid for our project with a slight difference in syntax Using Storybook Docs This syntax is speci fi c to our implementation The remainder of this code is standard .js story syntax
14. Storybook Tour Hosted Storybook
15. • Custom Component Generator, generator-sb-drupal • Platform-agnostic Design Tokens via Style Dictionary • Automated VR and a11y testing via Playwright and axe • Testing and approval workflows via Chromatic • Storybook Connect and/or other Figma plugins * • Build component designs in Figma as component variants; replicate variant controls as args in Storybook Bonus Topics * Have not actually tried this one
16. Thanks! That’s all for now. Please feel free to reach out with questions or feedback. me@mel-miller.com github.com/mel-miller/sb-drupal