This session will explain how to use Twig with Storybook and Drupal to bring all the advantages of UI component libraries into a decoupled Drupal project.

Having a pattern library of UI components helps developers build faster and take advantage of a maintainable, reusable and consistent set of components for the frontend. Using pattern libraries like Storybook can cause problems during the integration phase(s) of development, especially when paired with Drupal.

When developing our UI components in Storybook we use Twig and supplement it with mock data structured exactly in the way that GraphQL queries deliver it. By using Twig and our Components module, we can use the templates built in Storybook. This means queries and templates can be built once and integrated smoothly with no refactoring.

This session will show you step-by-step how to build a component library for decoupled Drupal sites that will work seamlessly between the frontend and backend, improve development speed, ensure best practices for UI, and make maintenance a breeze.

Attendees should have a working knowledge of Drupal theming.