storybook-addon-contentful

⚠️ This addon is in beta! ⚠️

This add-on allows one to load contentful entries with in a storybook instance.

All the best, Gijs

---

@storybook/addon-styling

Get started in Storybook 7 faster with popular styling tools.

✨ Features

• 🤖 Zero-config
• 🧩 Adds Contentful panel to storybook
• ⚡️ List all entries by content type
• 🔄 Load node as component properties onclick
• ❗️ Quick link to contentful edit interface

🏁 Getting Started

To get started, install the package as a dev dependency

yarn:

yarn add -D storybook-addon-contentful

npm:

npm install -D storybook-addon-contentful

pnpm:

pnpm add -D storybook-addon-contentful

Then, include the addon in your .storybook/main.js file

module.exports = {
  addons: [
    "@storybook/addon-essentials",
+   "storybook-addon-contentful"
  ],
};

Load Environment Variables

Make sure your .env has the variables to load contentful entries

STORYBOOK_CONTENTFUL_SPACE_ID=
STORYBOOK_CONTENTFUL_ACCESS_TOKEN=
STORYBOOK_CONTENTFUL_PREVIEW_TOKEN
STORYBOOK_CONTENTFUL_ENVIRONMENT=master

❗️ Setting Contentful Options

If you want to enable contentful integration for a story you have to use the contentful parameter to set the contentful entity ID together with the depth of content fetching.

import React from "react";
import { Button } from "./Button";

export default {
  title: "Example/Button",
  component: Button,
  parameters: {
      contentful: {
          type: 'ENTITY_ID',
          depth: 3,
      }
  },
};

How it works

After that (and restarting storybook) you should see a 'contentful' panel on your stories.

🤝 Contributing

If you'd like to contribute to this addon, THANK YOU, I'd love your help 🙏