Deprecated
Use the newer Storybook module to integrate with Storybook. This module will let you put any arbitrary Twig code in your Storybook stories, including Single Directory Components.
This module lets you use component libraries, like Storybook, in your Drupal project, without Twig.js!
Wait! what's the problem with Twig.js?
Mismatched feature set
According to the Twig.js documentation:
Twig.js is currently a work in progress and supports a limited subset of the Twig templating language (with more coming).
This means that you are left to the following decisions:
- do I use Twig as I see fit in Drupal, or do I keep to what Tiwg.js supports?
- do I leverage twig extensions in contrib and core, or do I keep to what Twig.js supports? Do I write the Twig.js compatibility layers myself instead?
Inconsistent rendering between Drupal-Twig and Twig.js
The goal is to develop your components in your component library (like Storybook), and know that there will not be a difference when you render the component in your Drupal site.
You also need to consider the fact that if Drupal is not rendering your components, how is your component library aware of the Drupal theme? The render pipeline in Drupal will change the markup, add & remove CSS, add & remove JS, process images, etc. All this needs to be faked in Twig.js if you want Drupal to render something similar to what Twig.js renders.
This means that you are left to the following decisions:
- am I optimistic that the templates in Storybook with Twig.js will look the same in Drupal, or do I re-double the QA efforts to ensure?
- can I ensure that Twig.js will have all the CSS and JS that Drupal adds to the page (now and in the future)?
Leverage Component Libraries: ServerIf your solution is to have Drupal render the components, like us, this module lets you do that. |
Storybook + Drupal
Even though this module is completely agnostic of the component library, the main integration is Storybook.
Set up Storybook for your Drupal site.
Please see the @lullabot/storybook-drupal-addon, which will make your Storybook aware of Drupal by connecting it to this module.
Hot reload of server-side changes
Rendered in Drupal with your themes
Always consistent rendering between Drupal and Storybook
Supports Drupal-style JavaScript
Storybook knobs and stories
Usage
Enable the module and set up Storybook according to the instructions here.
It is recommended to disable the component registry cache during development. To do so, add this to your settings.local.php:
$settings['cache']['bins']['discovery'] = 'cache.backend.null';
Additional resources
Remember to disable development mode in production!
Development mode should not be enabled in production. Make sure to disable it by unsetting the cl_server.development container parameter.
What version should I use?
Select the version of this module based on the component solution that you are using.
| CL Components | SDC | SDC from core |
|---|---|---|
Use 1.x |
Use 2.x |
Use 2.x |
Supporting organizations:
Development and maintenance
Project information
- Project categories: Content display, Integrations
- Ecosystem: Component Libraries: Components
100 sites report using this module- Created by e0ipso on , updated
Stable releases for this project are covered by the security advisory policy.
There are currently no supported stable releases.
Releases
2.0.0-beta5
released 24 November 2023
Works with Drupal: ^9.3 || ^10
There is a development mode!
Install:
Development version: 2.x-dev updated 24 Nov 2023 at 11:39 UTC
