storybook-amp

Storybook AMP ·

Storybook addon that allows you to display AMP HTML components generated with React in your stories

Features

• Allows to deliver in each story the AMP code resulting from the SSR.
• Adds a custom panel to validate the story and view the resulting source code.

Demo

https://storybook-amp.prototypearea.com/

Installation

npm install -D storybook-amp

Configuration

Next, update .storybook/main.js to the following:

// .storybook/main.js

module.exports = {
  stories: [
    // ...
  ],
  addons: [
    // Other Storybook addons

    '@storybook/storybook-amp', // 👈 The addon registered here
  ],
};

Usage

To set custom settings, use the amp parameter.

// .storybook/preview.js

const scripts = '';
const styles = '';

export const parameters = {
  // Other defined parameters

  amp: {              // 👈 The addon parameters here
    isEnabled: true,  // Enable the addon, false by default (boolean)
    scripts,          // Custom css styles (string)
    styles,           // Global scripts to add (string)
  },
};

You can use the amp parameter to override settings on each story individually:

// Story example

export default {
  title: "Components/amp-youtube",
  parameters: {
    amp: {
      scripts: // 👈 Script needed by the story
        `<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>`,
    },
  },
};

export const Story = (args) => (
  <amp-youtube
    width="480"
    height="270"
    layout="responsive"
    data-videoid='lBTCB7yLs8Y'
  ></amp-youtube>
)

AMP Documentation

• AMP Project
• Awesome Amp