♻️ Storybook in Component Story Format (#30329)

From [Storybook's docs](https://github.com/storybookjs/storybook/blob/next/lib/core/docs/storiesOf.md): > In Storybook 5.2 we introduced a simpler and more portable [Component Story Format](https://storybook.js.org/docs/react/api/csf), and all future tools and infrastructure will be oriented towards CSF. Therefore, we recommend migrating your stories out of `storiesOf` API, and even provide [automated tools to do this](https://github.com/storybookjs/storybook/blob/next/lib/core/docs/storiesOf.md#component-story-format-migration). AMP samples were using `storiesOf()`, but Preact samples already used Component Story Format. Used migration tool mentioned.
ampproject · Sep 22, 2020 · b914854 · b914854
1 parent ac1b864
commit b914854
Show file tree

Hide file tree

Showing 13 changed files with 837 additions and 716 deletions.
diff --git a/extensions/amp-animation/0.1/storybook/Basic.amp.js b/extensions/amp-animation/0.1/storybook/Basic.amp.js
@@ -17,7 +17,6 @@
 import * as Preact from '../../../../src/preact';
 import {AnimationTemplate} from './template';
 import {select, text, withKnobs} from '@storybook/addon-knobs';
-import {storiesOf} from '@storybook/preact';
 import {withAmp} from '@ampproject/storybook-addon';
 
 const KEYFRAMES_OPTIONS = {
@@ -50,30 +49,38 @@ const BLOCK_STYLE = {
   height: '100px',
 };
 
-// eslint-disable-next-line
-storiesOf('Animation', module)
-  .addDecorator(withKnobs)
-  .addDecorator(withAmp)
-  .addParameters({extensions: [{name: 'amp-animation', version: 0.1}]})
-  .add('default', () => {
-    const keyframesOptions = Object.keys(KEYFRAMES_OPTIONS);
-    const keyframesName = select(
-      'Keyframes',
-      keyframesOptions,
-      keyframesOptions[0]
-    );
-    const keyframes = KEYFRAMES_OPTIONS[keyframesName];
-    const easing = text('Easing', 'cubic-bezier(0,0,.21,1)');
-    const spec = {
-      animations: {
-        selector: '#block',
-        easing,
-        keyframes,
-      },
-    };
-    return (
-      <AnimationTemplate spec={spec}>
-        <div id="block" style={BLOCK_STYLE} />
-      </AnimationTemplate>
-    );
-  });
+export default {
+  title: 'Animation',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [{name: 'amp-animation', version: 0.1}],
+  },
+};
+
+export const Default = () => {
+  const keyframesOptions = Object.keys(KEYFRAMES_OPTIONS);
+  const keyframesName = select(
+    'Keyframes',
+    keyframesOptions,
+    keyframesOptions[0]
+  );
+  const keyframes = KEYFRAMES_OPTIONS[keyframesName];
+  const easing = text('Easing', 'cubic-bezier(0,0,.21,1)');
+  const spec = {
+    animations: {
+      selector: '#block',
+      easing,
+      keyframes,
+    },
+  };
+  return (
+    <AnimationTemplate spec={spec}>
+      <div id="block" style={BLOCK_STYLE} />
+    </AnimationTemplate>
+  );
+};
+
+Default.story = {
+  name: 'default',
+};
diff --git a/extensions/amp-animation/0.1/storybook/Random.amp.js b/extensions/amp-animation/0.1/storybook/Random.amp.js
@@ -16,7 +16,6 @@
 
 import * as Preact from '../../../../src/preact';
 import {AnimationTemplate} from './template';
-import {storiesOf} from '@storybook/preact';
 import {withAmp} from '@ampproject/storybook-addon';
 import {withKnobs} from '@storybook/addon-knobs';
 
@@ -41,43 +40,51 @@ const DROP_STYLE = {
   transform: 'translateY(-20vh)',
 };
 
-// eslint-disable-next-line
-storiesOf('Animation', module)
-  .addDecorator(withKnobs)
-  .addDecorator(withAmp)
-  .addParameters({extensions: [{name: 'amp-animation', version: 0.1}]})
-  .add('random', () => {
-    const spec = {
-      selector: '.drop',
-      '--delay': 'rand(0.1s, 5s)',
-      delay: 'var(--delay)',
-      direction: 'normal',
-      subtargets: [
-        {
-          index: 0,
-          direction: 'reverse',
-        },
-        {
-          selector: '.antigrav',
-          direction: 'reverse',
-          '--delay': '0s',
-        },
-      ],
-      keyframes: {
-        transform: 'translateY(120vh)',
+export default {
+  title: 'Animation',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [{name: 'amp-animation', version: 0.1}],
+  },
+};
+
+export const Random = () => {
+  const spec = {
+    selector: '.drop',
+    '--delay': 'rand(0.1s, 5s)',
+    delay: 'var(--delay)',
+    direction: 'normal',
+    subtargets: [
+      {
+        index: 0,
+        direction: 'reverse',
+      },
+      {
+        selector: '.antigrav',
+        direction: 'reverse',
+        '--delay': '0s',
       },
-    };
-    return (
-      <AnimationTemplate spec={spec}>
-        <div style={CONTAINER_STYLE}>
-          <div class="drop" style={DROP_STYLE}></div>
-          <div class="drop" style={DROP_STYLE}></div>
-          <div class="drop antigrav" style={DROP_STYLE}></div>
-          <div class="drop" style={DROP_STYLE}></div>
-          <div class="drop" style={DROP_STYLE}></div>
-          <div class="drop" style={DROP_STYLE}></div>
-          <div class="drop" style={DROP_STYLE}></div>
-        </div>
-      </AnimationTemplate>
-    );
-  });
+    ],
+    keyframes: {
+      transform: 'translateY(120vh)',
+    },
+  };
+  return (
+    <AnimationTemplate spec={spec}>
+      <div style={CONTAINER_STYLE}>
+        <div class="drop" style={DROP_STYLE}></div>
+        <div class="drop" style={DROP_STYLE}></div>
+        <div class="drop antigrav" style={DROP_STYLE}></div>
+        <div class="drop" style={DROP_STYLE}></div>
+        <div class="drop" style={DROP_STYLE}></div>
+        <div class="drop" style={DROP_STYLE}></div>
+        <div class="drop" style={DROP_STYLE}></div>
+      </div>
+    </AnimationTemplate>
+  );
+};
+
+Random.story = {
+  name: 'random',
+};
diff --git a/extensions/amp-base-carousel/1.0/storybook/Basic.amp.js b/extensions/amp-base-carousel/1.0/storybook/Basic.amp.js
@@ -15,31 +15,35 @@
  */
 
 import * as Preact from '../../../../src/preact';
-import {storiesOf} from '@storybook/preact';
 import {withA11y} from '@storybook/addon-a11y';
 import {withAmp} from '@ampproject/storybook-addon';
 import {withKnobs} from '@storybook/addon-knobs';
 
-// eslint-disable-next-line
-storiesOf('amp-base-carousel', module)
-  .addDecorator(withKnobs)
-  .addDecorator(withA11y)
-  .addDecorator(withAmp)
-  .addParameters({
+export default {
+  title: 'amp-base-carousel',
+  decorators: [withKnobs, withA11y, withAmp],
+
+  parameters: {
     extensions: [{name: 'amp-base-carousel', version: '1.0'}],
     experiments: ['amp-base-carousel-bento'],
-  })
-  .add('default', () => {
-    return (
-      <amp-base-carousel width="440" height="225">
-        {['lightcoral', 'peachpuff', 'lavender'].map((color) => (
-          <amp-layout width="440" height="225">
-            <svg viewBox="0 0 440 225">
-              <rect style={{fill: color}} width="440" height="225" />
-              Sorry, your browser does not support inline SVG.
-            </svg>
-          </amp-layout>
-        ))}
-      </amp-base-carousel>
-    );
-  });
+  },
+};
+
+export const Default = () => {
+  return (
+    <amp-base-carousel width="440" height="225">
+      {['lightcoral', 'peachpuff', 'lavender'].map((color) => (
+        <amp-layout width="440" height="225">
+          <svg viewBox="0 0 440 225">
+            <rect style={{fill: color}} width="440" height="225" />
+            Sorry, your browser does not support inline SVG.
+          </svg>
+        </amp-layout>
+      ))}
+    </amp-base-carousel>
+  );
+};
+
+Default.story = {
+  name: 'default',
+};