Skip to content

Storybook addon to facilitate integrating Storybook with Drupal projects.

License

Notifications You must be signed in to change notification settings

Lullabot/storybook-drupal-addon

Repository files navigation

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}>;
}