# @lullabot/storybook-drupal-addon

> Storybook addon to facilitate integrating Storybook with Drupal projects.

Latest version **2.0.6** (published 2023-11-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lullabot/storybook-drupal-addon
pnpm add @lullabot/storybook-drupal-addon
yarn add @lullabot/storybook-drupal-addon
bun add @lullabot/storybook-drupal-addon
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.6 |
| Published | 2023-11-24 |
| First published | 2021-12-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 41.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 42 |
| Author | Mateu Aguiló Bosch |
| Maintainers | justafish, dannyjoris, e0ipso, juampynr, davereid |
| Keywords | storybook-addons, style, drupal |

## Links

- npm: https://www.npmjs.com/package/@lullabot/storybook-drupal-addon
- Repository: https://github.com/Lullabot/storybook-drupal-addon
- Homepage: https://github.com/Lullabot/storybook-drupal-addon#readme
- Issues: https://github.com/Lullabot/storybook-drupal-addon/issues
- npm.io page: https://npm.io/package/@lullabot/storybook-drupal-addon

## Recent versions

- 2.0.6 (latest) — 2023-11-24
- 2.0.7--canary.49.b2736bf.0 (canary) — 2023-12-22
- 2.0.5 — 2023-11-24
- 2.0.4 — 2023-11-24
- 2.0.3 — 2023-11-23
- 2.0.2 — 2023-09-18
- 2.0.1 — 2023-06-08
- 2.0.0 — 2023-06-08
- 1.0.28--canary.30.1f73a32.0 — 2023-04-23
- 1.0.28--canary.30.3107b37.0 — 2023-04-23
- 1.0.28--canary.30.e7cf41b.0 — 2023-04-23
- 1.0.27 — 2023-03-02
- 1.0.27--canary.5c2b85d.0 — 2023-03-01
- 1.0.26 — 2022-10-09
- 1.0.25 — 2022-10-09
- … 60 more at https://npm.io/package/@lullabot/storybook-drupal-addon/versions

## README

# 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](./assets/screenshot.png)

Follow the instructions in the documentation for the Drupal module [CL Server](https://git.drupalcode.org/project/cl_server/-/blob/2.x/docs/storybook.md?ref_type=heads).

## Start Storybook

Start the development server Storybook server:

```console
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*
```typescript
export * from '@lullabot/storybook-drupal-addon/manager';
```

*src/preview.ts*
```typescript
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:

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

const myDecorator = (story, context) => {
  const [{drupalTheme}] = useGlobals();
  
  return <MyProvider drupalTheme={drupalTheme}>;
}
```

---
_Source: https://npm.io/package/@lullabot/storybook-drupal-addon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._