Welcome back to day 20 of the Drupal Advent Calendar, where we look at a talk from DrupalCamp Scotland, where Philip Norton of Code Enigma and #! Code discussed ways of making Single Directory Components easier to use with design tools.
The talk introduces how Storybook can be effectively integrated with Drupal using Single Directory Components (SDCs). Historically, Storybook and Drupal required duplicating front-end work, but SDCs now allow developers to build components once in Drupal and place them directly in Storybook. This fits well with modern Drupal theming practices and prepares for future systems like Drupal Canvas.
The talk walks through the fundamentals of SDCs, including their structure, the use of props and slots, and how components are defined and rendered using YAML and Twig. He explains how Storybook stories are created using stories.twig files, converted into stories.json via Drush commands, and then consumed by Storybook. He highlights practical considerations such as handling CORS, avoiding committing generated files, and structuring stories to reflect real-world usage.
Finally, he demonstrates a development workflow where most front-end work happens inside Storybook, using it as an interactive, real-time environment for building and testing components. He shares tips, common pitfalls, and alternatives to Storybook, and reflects on Storybook’s value as both a developer tool and a demo platform for clients. Overall, the session emphasizes component-driven development, reuse, and clearer separation between Drupal templates and front-end presentation.
Helpfully, he’s made his slides, and the source code from his demo available.
Watch his talk here:
Comments