Drupal Advent Calendar Day 20: Using Storybook to Preview Single Directory Components

The presentation focuses on how developers can streamline their workflow by building components once for Drupal and previewing them visually in Storybook, eliminating the need to duplicate front-end work. This approach aligns with modern theming practices and is compatible with emerging tools such as Drupal Canvas. The talk explains the structure and behaviour of SDCs, including how props and slots are defined using YAML and Twig. Norton details how Storybook stories are created through stories.twig files, which are converted into stories.json using Drush commands. Storybook then uses these JSON files to render interactive component previews.

He also covers technical aspects such as handling cross-origin resource sharing (CORS), avoiding the need to commit generated files, and organising stories to reflect real-world scenarios. Philip emphasises using Storybook not only as a development environment but also as a demonstration tool for clients. He discusses best practices, common challenges, and alternatives to Storybook, all while reinforcing the value of component-driven development. The session ultimately advocates for improved separation between Drupal templates and front-end design, making it easier to maintain and reuse components across projects. Slides and source code from the demo are made available for further exploration.