https://github.com/ampproject/storybook-addon-amp

The storybook AMP addon
https://github.com/ampproject/storybook-addon-amp

Last synced: 9 days ago
JSON representation

The storybook AMP addon

• Host: GitHub
• URL: https://github.com/ampproject/storybook-addon-amp
• Owner: ampproject
• License: apache-2.0
• Created: 2020-07-20T18:33:10.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-09-17T10:31:34.000Z (2 months ago)
• Last Synced: 2024-09-17T13:13:45.648Z (2 months ago)
• Language: TypeScript
• Size: 105 KB
• Stars: 8
• Watchers: 6
• Forks: 5
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-amp - @ampproject/storybook-addon - Storybook addon for building and testing AMP components. (Integrations / React)

README

        
# @ampproject/storybook-addon

The storybook AMP addon allows rendering of AMP content inside the Storybook

environment.

`@ampproject/storybook-addon` allows switching between three AMP modes:

Module (`v0.js`), No-module (`v0.mjs`) and Bento. It also allows switching

between development mode (locally hosted `v0.js`) and production mode (CDN

hosted `v0.js`).

## Getting Started

First, add the `@ampproject/storybook-addon` to your project:

```sh

npm install --save-dev @ampproject/storybook-addon

```

Second, register the `@ampproject/storybook-addon` to your

config (`.storybook/main.js`):

```js

module.exports = {

  addons: ['@ampproject/storybook-addon'],

};

```

## Writing storybooks

An AMP story uses `withAmp` decorator:

```js

import {h} from 'preact';

import {storiesOf} from '@storybook/preact';

import {withAmp} from '@ampproject/storybook-addon';

export default {

  title: 'amp-carousel',

  decorators: [withAmp],

  parameters: {

    extensions: [{name: 'amp-carousel', version: '0.2'}]},

  },

};

export const Default = () => {

  return (

    

      {['lightcoral', 'peachpuff', 'lavender'].map((color) => (

        
{color}

      ))}

    

  );

};

```


The following parameters can be specified:

1. `extensions: [{name, version}]` - a list of extensions to be installed.

2. `experiments: [string]` - a list of experiments to enabled.

### `amp-script` hashes

Inline scripts used by `amp-script` require a `` tag that includes [their content hash](https://amp.dev/documentation/components/amp-script/#calculating-the-script-hash).

This addon generates the script hash for stories that need it. The following works without writing the respective `` tag:

```js

export const UsingInlineScript = () => (

  <>

    

    

      {`console.log('Hello');`}

    

  >

);

```