Drupal Addon

Storybook addon to facilitate integrating Storybook with Drupal projects.

View on Github

Drupal Storybook Addon

A library for best-practice Drupal integration addons in Storybook:

  • Easy-to-use Drupal integration
  • Simple drop-down menu
  • URL-linkable state for sharing

Screenshot

Follow the instructions in the documentation for the Drupal module CL Server.

Start Storybook

Start the development server Storybook server:

yarn storybook

Tips for writing YML stories


Storybook addon authors

As an addon author, you can use this library by adding it as a dependency and adding the following to your src/manager.ts and src/preview.ts files:

src/manager.ts

export * from '@lullabot/storybook-drupal-addon/manager';

src/preview.ts

import type { Renderer, ProjectAnnotations } from '@storybook/types';
import drupalPreview from '@lullabot/storybook-drupal-addon/preview';
import { withYourDrupalDecorator } from './withYourDecorator';

// @ts-ignore
const drupalDecorators = drupalPreview?.decorators || [];

const preview: ProjectAnnotations<Renderer> = {
    ...drupalPreview,
    decorators: [...drupalDecorators, withYourI18nDecorator],
}

export default preview;

The currently selected drupal theme is available in the drupalTheme global, so you can access it in a decorator using the following snippet:

import { MyProvider } from 'your-drupal-library';
import { useGlobals } from '@storybook/manager-api';

const myDecorator = (story, context) => {
  const [{drupalTheme}] = useGlobals();
  
  return <MyProvider drupalTheme={drupalTheme}>;
}
Made by
  • justafish
    justafish
  • dannyjoris
    dannyjoris
  • e0ipso
    e0ipso
  • juampynr
    juampynr
  • davereid
    davereid
Tags