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
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
- Anotated example with the different options for writing stories: https://gitlab.com/-/snippets/2556203
- Closed issue with some nifty tips: https://github.com/Lullabot/storybook-drupal-addon/issues/34
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}>;
}