# @contentful/experiences-storybook-addon

> Develop Contentful experience builder components with storybook

Latest version **0.0.1-alpha.11** (published 2024-03-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @contentful/experiences-storybook-addon
pnpm add @contentful/experiences-storybook-addon
yarn add @contentful/experiences-storybook-addon
bun add @contentful/experiences-storybook-addon
```

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1-alpha.11 |
| Published | 2024-03-22 |
| First published | 2024-03-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 2.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Contentful |
| Maintainers | eozelius, fisher-contentful, jonathanstoye, trburgess, 2wce, tnugmanov-contentful, primeinteger, david-shibley-contentful, jjolton_contentful, nealdavies, dkim-cf, t-col, chasepoirier, ryunsong-contentful, elylucas, fidanism, jsdalton, lewiscowper, rafafelix0, felixboenke, lillianbitner, mateojgordo, brettjackson, brnrossi, julija.a, doetter, jose.medrano, jonathan-contentful, georgechios.contentful, inbal.gordon, anwar.ahmad, ghepting, camposcontentful, benjaminrobertlees, whitelisab, mgoudy_contentful, marcopieatcontentful, jbcontentful, floriank, pkeavenycontentful, msieroslawska, miguelcrespo, chrishelgert, cdun.ctfl, asleepysamurai, budimir.budimir.cf, seth-carter-contentful, bhekanik, konstantinminster, invalid_json, douglasnsovenhi, dropecostareis, lorenzonibrunno, baskiers, dancontentful, ivo-contentful, thy.pham, adrian-contentful, alvinometric, dimitrycf, cormac.debarra, jites, nhanlon-cf, cbentham-cf, cempesket, jfctfl, nkoyo.ating, evgeniip, max.cheremisin, sofia_margariti, dineshswamy_paranthaman, dmytro.filippov, arjun-londhey, eric-miller2129, liamstokingercontentful, aodhagan-cf, vikaskumr, dennise917, alicankargin, cf-aleks, bvkr, ebctfl, sjouli, mayakarabula, cf-engit, harshil1712, paradoja, mattvanvoorst-contentful, holgerstorm, cf-remylenoir, mayagillilan, ahsen, mar.contentful, rowadz_contentful, kiyutink_contentful, roosterhack, kurtulus-contentful, omasopust-cf, cemre.yuksel, peacemukke, sophiiistika, stephanleece, dogukano, 3b3ziz, or_yoffe_contentful, hennadii.shymanskyi, m.bensalem, sxagoraris, stathis.xagoraris, andreascful, richard_moran, yvesrijckaert_contentful, mehdi_contentful, georgpanok, riqwan.thahamir, piotr.ciazynski, farruco.sanjurjo, ronaldronson, silhoue, phbschmidt, kathrinholzmann, poberherr, mikita.savanovich, laurenceb, elblivion, fabianheymann, it-internal, sbezludny, medturki, danwe, yann-cf, makinwa37, diacono, whydah-gally, tauraz, cakejelly, martin3walker, argvk_cf, yiotis, leonardofreitass, hwartig, davidfateh, dvasylenko, ruderngespra, mshaaban0, kdamball, marcolink, gosiaszporer, z0al, mspagnolo, thomas.spiesser, anho, didi96, fs, cgrabo, dana_grn, andipaetzold-cf, denkristoffer, luizfonseca, juliabiro, vinz93, jbourne, 0mathcrap, damienxy, roryscarson, m99coder-cf, loweisz, thomas.contentful, marceltoben, massao, bohdan.hutsol, contentful-ecosystem, vida.momenzadeh, yuri.mazursky, rebecca.koenig, annmary |
| Keywords | storybook-addons, storybook-addons |

## Links

- npm: https://www.npmjs.com/package/@contentful/experiences-storybook-addon
- Repository: https://github.com/contentful/experience-builder-storybook
- Homepage: https://github.com/contentful/experience-builder-storybook#readme
- Issues: https://github.com/contentful/experience-builder-storybook/issues
- npm.io page: https://npm.io/package/@contentful/experiences-storybook-addon

## Dependencies (8)

- [emotion](https://npm.io/package/emotion.md) 11.0.0
- [constate](https://npm.io/package/constate.md) ^3.3.2
- [@contentful/app-sdk](https://npm.io/package/@contentful/app-sdk.md) ^4.23.1
- [@contentful/f36-tokens](https://npm.io/package/@contentful/f36-tokens.md) ^4.0.2
- [@contentful/f36-workbench](https://npm.io/package/@contentful/f36-workbench.md) ^4.21.0
- [@contentful/f36-components](https://npm.io/package/@contentful/f36-components.md) ^4.52.1
- [@contentful/experiences-sdk-react](https://npm.io/package/@contentful/experiences-sdk-react.md) file:../experiences-sdk-react
- [@contentful/experiences-components-react](https://npm.io/package/@contentful/experiences-components-react.md) 0.0.1-alpha.11

## Recent versions

- 0.0.1-alpha.11 (latest) — 2024-03-22
- 0.0.1-dev-20240322T1809-2b376f6.0 (dev) — 2024-03-22
- 0.0.1-alpha.10 — 2024-03-22
- 0.0.1-dev-20240321T2349-e9e0345.0 — 2024-03-21
- 0.0.1-dev-20240321T2342-0e28c45.0 — 2024-03-21
- 0.0.1-alpha.9 — 2024-03-21
- 0.0.1-dev-20240321T1931-3ff9416.0 — 2024-03-21
- 0.0.1-dev-20240321T1513-bf8aea4.0 — 2024-03-21
- 0.0.1-dev-20240321T0946-16d8f29.0 — 2024-03-21
- 0.0.1-dev-20240321T0904-099dcd6.0 — 2024-03-21
- 0.0.1-dev-20240320T2029-46a7e94.0 — 2024-03-20
- 0.0.1-alpha.8 — 2024-03-20
- 0.0.1-dev-20240320T1226-a6ddb8b.0 — 2024-03-20
- 0.0.1-dev-20240319T2154-4503cb2.0 — 2024-03-19
- 0.0.1-alpha.7 — 2024-03-19
- … 26 more at https://npm.io/package/@contentful/experiences-storybook-addon/versions

## README

# Contentful Experience Builder Addon

**Develop experience builder components with storybook**

> Experience Builder is currently in a private alpha and not available publicly. If you are interested in participating in the alpha, please reach out to your Contentful account team.

This folder contains the source code for the experience builder storybook plugin that allows developers to more efficiently build custom experience builder components. With this plugin developers can visually see how their various component definition
options translate to a different UI for their editors.

## In this guide

- [Getting started](#getting-started)
  - [Installation](#installation)
  - [Enabling the Plugin](#enabling-the-plugin)
  - [Usage](#usage)

## Getting started

### Installation

```bash
npm install @contentful/experiences-storybook-addon
```

### Enabling the Plugin

> This guide assumes you already have Experience Builder configured in your application and space. If you don't, please contact your Contentful representative for instructions on how to do so.

In your `.storybook/main.ts` file add the plugin into the addons section of the Storybook configuration:

```ts
const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@contentful/experiences-storybook-addon', // <- add storybook plugin here
  ],
  // ... additional config
};
```

### Usage

Once the plugin is enabled, you can then hook up your component definition to a storybook layout with the `experienceBuilder` Storybook parameter

`stories/button.stories.tsx`

```ts
import type { Meta, StoryObj } from '@storybook/react';

import Button from '../components/atoms/Button';

const meta = {
  title: 'Example/Button',
  component: Button,
  parameters: {
    // Required to view component definition changes in Storybook
    experienceBuilder: Button.ComponentDefinition,
  },
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    targetUrl: '/en',
    variant: 'default',
    label: 'Button',
  },
};
```

After the parameter for the component has been imported, changes to the component's ComponentDefinition will be visible live on the Storybook instance as such:

![Example Usage](./assets/example.png)

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