title: "storybook with twig for drupal"
date: 2022-03-26 00:00:00
category: technical
tags: storybook, twig, drupal
description: support for twig in js and php!
Storybook is great. I love using Storybook when building out component libraries or design systems, it's a near-perfect tool for prototyping and testing components with all their different variations and states. Being able to do this in isolation from the actual implementation speeds up development and confidence that edge cases are covered. It's primarily used with javascript components, like React.
With a little bit of configuration, you can use storybook for twig templates too. this can be handy if you work with Drupal, which uses twig for its theme layer. I would recommend using Wingsuit, as they've figured all of this out in a rock solid way. But if you aren't sold on tailwind or have some esoteric requirements that mean you need to roll your own... here's how to do that:
Storybook needs:
@storybook/html base
twing for twig support. twing is necessary for storybook, when Drupal consumes the components it will use twigphp.
drupal-attribute and drupal-twig-extensions add javascript support for drupal-specific twig filters & functions. this wont matter much in storybook, but it will let you re-use templates between the two without breaking compilation.
title: "storybook with twig for drupal" date: 2022-03-26 00:00:00 category: technical tags: storybook, twig, drupal description: support for twig in js and php!
Storybook is great. I love using Storybook when building out component libraries or design systems, it's a near-perfect tool for prototyping and testing components with all their different variations and states. Being able to do this in isolation from the actual implementation speeds up development and confidence that edge cases are covered. It's primarily used with javascript components, like React.
With a little bit of configuration, you can use storybook for twig templates too. this can be handy if you work with Drupal, which uses twig for its theme layer. I would recommend using Wingsuit, as they've figured all of this out in a rock solid way. But if you aren't sold on tailwind or have some esoteric requirements that mean you need to roll your own... here's how to do that:
Storybook needs:
@storybook/htmlbasetwingfor twig support. twing is necessary for storybook, when Drupal consumes the components it will use twigphp.drupal-attributeanddrupal-twig-extensionsadd javascript support for drupal-specific twig filters & functions. this wont matter much in storybook, but it will let you re-use templates between the two without breaking compilation.Drupal needs:
example repo