storybook-amp

Storybook AMP ·

Storybook addon for AMP (Accelerated Mobile Pages). Allows to display in your stories AMP Html components generated with React.

Features

• Deliver in each story the output code (AMP ready) resulting from the SSR.
• Works with AMP websites, AMP email and AMP ads
• Realtime AMP validation.
• Adds addon panel to also validate the story (using online AMP Validator) and view the output code.
• Support Styled Components using a custom render function

Demo

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

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-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,          // Global scripts to add, empty by default (string)
    styles,           // Custom css styles, empty by default (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>
)

For more examples and configurations go to the Demo

Tested Addons Compatibility

• Addon Viewport
• Addon Controls
• Addon Backgrounds
• Addon Storysource
• Addon Docs (Coming soon)
• Addon Toolbars (Coming soon)
• Addon Accessibility (Coming soon)

AMP Documentation

• AMP Project
• Awesome Amp