Is it still possible to switch Drupal themes in Storybook?

Created on 3 April 2024, 16 days ago
Updated 18 April 2024, 1 day ago

Problem/Motivation

When using CL Server in combination with the @lullabot/storybook-drupal-addon, there was a dropdown to select which Drupal theme to use for rendering the component. Available themes could be configured in Storybook's preview.js

To use the newer drupal/storybook module, I've disabled CL Server as well as the @lullabot/storybook-drupal-addon, as the path forward is this module with all its great and welcome additions.

Is there any way to tell the Storybook /storybook/stories/render/ endpoint which theme to use? Either through the *.stories.twig file or through a theme-dropdown in the Storybook UI?

What I've tried

As drupal/storybook allows to use any Twig capabilities in my stories, I tried to attach the desired theme explicitely via:

{{ attach_library('my_theme/global-styling') }}

This partially worked: the styles were loaded correctly. but because the default theme is loaded as well, I've conflicting styles :(

💬 Support request
Status

Active

Version

1.0

Component

Storybook

Created by

🇩🇪Germany arnalyse

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @arnalyse
  • 🇩🇪Germany arnalyse

    I've looked into the services.yml of cl_server and storybook.

    There's still the theme.negotiator.storybook, which facilitates the theme switch. I just needed to fix the route name:

    diff --git a/storybook/src/Theme/StorybookThemeNegotiator.php b/storybook/src/Theme/StorybookThemeNegotiator.php
    index 7288b43212..dff64b8c92 100644
    --- a/storybook/src/Theme/StorybookThemeNegotiator.php
    +++ b/storybook/src/Theme/StorybookThemeNegotiator.php
    @@ -42,7 +42,7 @@ public function applies(RouteMatchInterface $route_match): bool {
           return FALSE;
         }
         $theme = $this->getTheme();
    -    return ($route_name === 'storybook.render' && !empty($theme));
    +    return ($route_name === 'storybook.render_story' && !empty($theme));
       }
     
       /**
    

    I can now get the render route to use a specific theme by adding the query param _drupalTheme=MY_THEME_NAME, like
    /storybook/stories/render/{hash}?_drupalTheme=MY_THEME_NAME.

    The question is: how to we get the information, which theme should be used into Storybook.js ? Do we need a Storybook.js extension like the @lullabot/storybook-drupal-addon or can we add an option/meta to our stories which theme could be used?

    Maybe @e0ipso can point me in the right direction?

  • miiimooo Europe

    @arnalyse thanks for this fix. It allows to select a different theme from the site default theme like this:

    # .storybook/preview.js

    /** @type { import('@storybook/server').Preview } */
    const preview = {
      globals: {
        _drupalTheme: 'my_theme',
      },
      parameters: {
    ...
    
  • 🇩🇪Germany arnalyse

    Great. That allows for explicitely setting the theme 👍

    Do you also know how to get the theme selector from the lullabot module?

    Otherwise I would ask in the Lullabot Github repository if there are any plans to rewrite their addon to work alongside the new Drupal Storybook module …

Production build https://api.contrib.social 0.62.1