Socket
Socket
Sign inDemoInstall

storybook-amp

Package Overview
Dependencies
128
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

storybook-amp

Storybook addon for AMP Html. Allows to display in your stories AMP Html components generated with React.


Version published
Maintainers
1
Weekly downloads
300
decreased by-46.9%

Weekly downloads

Readme

Source

Storybook AMP Html · npm package

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

Screenshot

Table of Contents

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


Getting Started

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>
)

Examples


Roadmap

  • Make it compatible with the Chromatic addon
  • Make it compatible with the Accessibility addon
  • Adjust UI details when used with Docs addon
  • More tools for AMP Ads and AMP Email
  • Add more example tests
  • Add tests
  • Make CI integration possible

Contributing

Storybook AMP Html addon is an open-source project. We are committed to a fully transparent development process and appreciate highly any contributions. Whether you are helping us fix bugs, proposing new features, improving our documentation or spreading the word - we would love to have you as part of the community.

Please refer to our Contribution Guidelines and Code of Conduct.

License

The Storybook AMP Html addon is licensed under the MIT license — see the LICENSE file for details.

Acknowledgements

Initially created by onWidget and maintained by a community of contributors.

Keywords

FAQs

Last updated on 18 Jun 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc