Refactorization for update Storybook guidelines

onwidget · May 12, 2022 · 65b04f3 · 65b04f3
1 parent dc443b5
commit 65b04f3
Show file tree

Hide file tree

Showing 29 changed files with 664 additions and 320 deletions.
diff --git a/README.md b/README.md
@@ -1,59 +1,96 @@
 # Storybook AMP &middot; [![npm package](https://img.shields.io/npm/v/storybook-amp?color=green&label=npm&style=flat-square)](https://www.npmjs.com/package/storybook-amp)
 
-Storybook addon that allows you to display [AMP HTML](https://amp.dev/) components generated with react in your stories
+Storybook addon that allows you to display [AMP HTML](https://amp.dev/) 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.
+
+<br />
+
+## Demo
+
+https://storybook-amp.prototypearea.com/
+
+<br />
 
 ## Installation
 
 ```sh
 npm install -D storybook-amp
 ```
 
-## Configuration
+<br />
 
-Then create a file called `addons.js` in your storybook config.
+## Configuration
 
-Add following content to it:
+Next, update `.storybook/main.js` to the following:
 
 ```js
-import 'storybook-amp/register';
+// .storybook/main.js
+
+module.exports = {
+  stories: [
+    // ...
+  ],
+  addons: [
+    // Other Storybook addons
+
+    '@storybook/storybook-amp', // 👈 The addon registered here
+  ],
+};
 ```
 
-## Demo
-
-https://storybook-amp.prototypearea.com/
+<br />
 
 ## Usage
 
-To SSR the code at runtime time use the `withAmpDecorator` decorator inside `config.js` or specific story.  To set custom settings, use the  `amp`  parameter. 
+To set custom settings, use the  `amp` parameter. 
 
 ```js
-// config.js
-import { configure, addDecorator, addParameters } from '@storybook/react';
-import { withAmpDecorator } from 'storybook-amp';
-
-const customStyles = ''; // some styles
-
-// global
-addDecorator(withAmpDecorator)
-addParameters({
-  amp: {
-    isEnabled: true,
-    styles: customStyles, // Custom styles from some string
+// .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:
 
 ```js
-// per story
-storiesOf('AMP', module)
-  .add('Default', () => <Button>Send</Button>, {
+// Story example
+
+export default {
+  title: "Components/amp-youtube",
+  parameters: {
     amp: {
-      isEnabled: false,
-    }
-  });
-  ```
+      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>
+)
+```
+
+<br />
 
 ## AMP Documentation
 

diff --git a/example/.storybook/main.js b/example/.storybook/main.js
@@ -1,11 +1,28 @@
 module.exports = {
   stories: [
-    "../stories/*.stories.(js|mdx)",
+    "../stories/docs/*.stories.(js|mdx)",
+    "../stories/components/*.stories.(js|mdx)",
+    "../stories/addons/*.stories.(js|mdx)",
   ],
   addons: [
-    __dirname + "/../../register",
+    "../../preset.js",
+
+    "@storybook/addon-storysource",
+    "@storybook/addon-links",
+
+    "@storybook/addon-viewport",
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        sourceLoaderOptions: {
+          injectStoryParameters: false,
+        },
+      },
+    },
+    "@storybook/addon-controls",
+    "@storybook/addon-backgrounds",
   ],
   features: {
     postcss: false,
   },
-}
+};
diff --git a/example/.storybook/manager.js b/example/.storybook/manager.js
@@ -4,6 +4,6 @@ import { addons } from "@storybook/addons";
 addons.setConfig({
   theme: create({
     brandTitle: "Storybook AMP",
-    brandUrl: "https://github.com/prototypearea/storybook-amp"
+    brandUrl: "https://github.com/prototypearea/storybook-amp",
   })
 });
diff --git a/example/.storybook/preview.js b/example/.storybook/preview.js
@@ -1,13 +1,24 @@
-import { addDecorator, addParameters } from '@storybook/react';
-import { withAmpDecorator } from '../../dist';
+const customStyles = '';
 
-const customStyles = ''; // some styles
-
-addDecorator(withAmpDecorator)
-
-addParameters({
+export const parameters = {
   amp: {
     isEnabled: true,
-    styles: customStyles, // Custom styles from some string
+    styles: customStyles,
+  },
+
+  viewport: {
+    defaultViewport: 'mobile1',
+  },
+  previewTabs: {
+    'storybook/docs/panel': {
+      hidden: true,
+    },
+  },
+  controls: {
+    disabled: true
+  },
+  options: {
+    isToolshown: true,
+    showPanel: true,
   },
-});
+};
diff --git a/example/public/amp-logo.png b/example/public/amp-logo.png
diff --git a/example/stories/addons/addon-controls.stories.js b/example/stories/addons/addon-controls.stories.js
@@ -0,0 +1,35 @@
+import React from "react";
+
+export default {
+  title: "Tested Addons/Controls",
+  parameters: {
+    controls: {
+      disabled: false,
+    },
+    amp: {
+      scripts: `
+        <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
+      `,
+    },
+  },
+  argTypes: {
+    videoId: {
+      control: "select",
+      options: ["lBTCB7yLs8Y", "9Cfxm7cikMY", "f02mOEt11OQ"],
+    },
+  },
+};
+
+export const Base = ({ videoId, ...args }) => (
+  <amp-youtube
+    width="480"
+    height="270"
+    layout="responsive"
+    data-videoid={videoId}
+  ></amp-youtube>
+);
+
+Base.storyName = "Controls";
+Base.args = {
+  videoId: "lBTCB7yLs8Y",
+};
diff --git a/example/stories/addons/addon-viewport.stories.js b/example/stories/addons/addon-viewport.stories.js
@@ -0,0 +1,26 @@
+import React from 'react';
+
+export default {
+  title: 'Tested Addons/Viewport',
+  parameters: {
+    viewport: {
+      defaultViewport: 'tablet',
+    },
+    amp: {
+      scripts: `
+        <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
+      `,
+    },
+  }
+};
+
+export const Base = (args) => (
+  <amp-youtube
+    width="480"
+    height="270"
+    layout="responsive"
+    data-videoid='lBTCB7yLs8Y'
+  ></amp-youtube>
+);
+
+Base.storyName = 'Viewport';
diff --git a/example/stories/amp-autocomplete.stories.js b/example/stories/amp-autocomplete.stories.js
diff --git a/example/stories/amp-carousel.stories.js b/example/stories/amp-carousel.stories.js
diff --git a/example/stories/amp-accordion.stories.js → ...ories/components/amp-accordion.stories.js b/example/stories/amp-accordion.stories.js → ...ories/components/amp-accordion.stories.js
@@ -1,7 +1,14 @@
-import React from 'react';
+import React from "react";
 
 export default {
-  title: 'Components/amp-accordion',
+  title: "Components/amp-accordion",
+  parameters: {
+    amp: {
+      scripts: `
+        <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
+      `,
+    },
+  },
 };
 
 export const Base = () => (
@@ -13,7 +20,7 @@ export const Base = () => (
     <section>
       <h4>Section 2</h4>
       <div>
-        Bunch of even more awesome content. This time in a{' '}
+        Bunch of even more awesome content. This time in a{" "}
         <code>&lt;div&gt;</code>.
       </div>
     </section>
@@ -24,4 +31,4 @@ export const Base = () => (
   </amp-accordion>
 );
 
-Base.storyName = 'default';
+Base.storyName = "amp-accordion";
diff --git a/example/stories/components/amp-autocomplete.stories.js b/example/stories/components/amp-autocomplete.stories.js
@@ -0,0 +1,38 @@
+import React from "react";
+
+export default {
+  title: "Components/amp-autocomplete",
+  parameters: {
+    amp: {
+      scripts: `
+        <script async custom-element="amp-autocomplete" src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"></script>
+        <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
+        <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
+        <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
+      `,
+    },
+  },
+};
+
+export const Base = () => (
+  <form
+    className="sample-form"
+    method="post"
+    action-xhr="https://amp.dev/documentation/examples/api/echo"
+    target="_top"
+  >
+    <amp-autocomplete filter="substring">
+      <input />
+      <script
+        type="application/json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({
+            items: ["apple", "orange", "banana"],
+          }),
+        }}
+      />
+    </amp-autocomplete>
+  </form>
+);
+
+Base.storyName = "amp-autocomplete";