Using Storybook To Preview Single Directory Components

Single Directory Components (SDC) consist of a directory of files that go together to create a small component on a Drupal website. They are a powerful way of setting up self contained components in your Drupal site that work in the same way wherever they are used.

Storybook is a JavaScript application that provides a front end workshop for component development.

By using a module we can build components in a Drupal theme and then preview them in Storybook before ever needing to inject them into the Drupal templates.

In this session we will look at integrating Drupal with Storybook so that we can preview an SDC before adding them into the Drupal theme. We'll look at how to get started using Storybook and Drupal, how to write stories, and how to incorporate Storybook into your development workflow.

As SDC will form a part of Drupal Canvas there has never been a better time to get to grips with them. Storybook will elevate your workflow and make building, previewing and even testing your components much easier.