♻️ Use Storybook args (first round) (#35915)

Partial for #35923

This is the first step to replace Storybook Knobs (deprecated)[1] with Controls[2].

[1] https://www.npmjs.com/package/@storybook/addon-knobs
[2] https://storybook.js.org/docs/react/essentials/controls

We have over 60 Storybook files. I'm submitting the PRs in multiple rounds to prevent overwhelming the reviewers.

In summary:

1. Installs `@storybook/addon-controls`
2. Updates template for generated Stories.
3. Updates 15 Stories across extensions.

build-system/tasks/make-extension/template/bento/extensions/amp-__component_name_hyphenated__/__component_version__/storybook/Basic.js

@@ -1,19 +1,20 @@
 import * as Preact from '#preact';
 import {__component_name_pascalcase__} from '../component'
-import {withKnobs} from '@storybook/addon-knobs';
 
 export default {
   title: '__component_name_pascalcase__',
   component: __component_name_pascalcase__,
-  decorators: [withKnobs],
+  args: {
+    'exampleProperty': 'example string property argument'
+  }
 };
 
-export const _default = () => {
-  // __do_not_submit__: This is example code only.
+// __do_not_submit__: This is example code only.
+export const _default = (args) => {
   return (
     <__component_name_pascalcase__
       style={{width: 300, height: 200}}
-      example-property="example string property value"
+      {...args}
     >
       This text is inside.
     </__component_name_pascalcase__>

build-system/tasks/make-extension/template/shared/extensions/amp-__component_name_hyphenated__/__component_version__/storybook/Basic.amp.js

@@ -1,32 +1,29 @@
 import * as Preact from '#preact';
 import {withAmp} from '@ampproject/storybook-addon';
-import {withKnobs} from '@storybook/addon-knobs';
 
 export default {
   title: 'amp-__component_name_hyphenated__-__component_version_snakecase__',
-  decorators: [withKnobs, withAmp],
-
+  decorators: [withAmp],
   parameters: {
     extensions: [
       {name: 'amp-__component_name_hyphenated__', version: '__component_version__'},
     ],
     __storybook_experiments_do_not_add_trailing_comma__
   },
+  args: {
+    'data-example-property': 'example string property argument'
+  }
 };
 
 // __do_not_submit__: This is example code only.
-export const ExampleUseCase = () => {
+export const _default = (args) => {
   return (
     <amp-__component_name_hyphenated__
       width="300"
       height="200"
-      example-property="example string property value"
+      {...args}
     >
       This text is inside.
     </amp-__component_name_hyphenated__>
   );
 };
-
-ExampleUseCase.story = {
-  name: 'Example use case story'
-};

build-system/tasks/storybook/amp-env/main.js

@@ -12,6 +12,9 @@ module.exports = {
     // Enable this once we find a way to inspect the iframe document's tree.
     // '@storybook/addon-a11y',
     '@storybook/addon-viewport/register',
+    '@storybook/addon-controls/register',
+    // TODO(#35923): Remove addon-knobs once all stories are migrated to
+    // addon-controls (args/argTypes).
     '@storybook/addon-knobs/register',
     '@ampproject/storybook-addon',
   ],

build-system/tasks/storybook/package.json

@@ -9,6 +9,7 @@
     "@babel/preset-react": "7.14.5",
     "@babel/runtime-corejs3": "7.15.3",
     "@storybook/addon-a11y": "6.3.7",
+    "@storybook/addon-controls": "6.3.7",
     "@storybook/addon-knobs": "6.2.9",
     "@storybook/addon-viewport": "6.3.7",
     "@storybook/preact": "6.3.7",

build-system/tasks/storybook/preact-env/main.js

@@ -8,6 +8,9 @@ module.exports = {
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-viewport/register',
+    '@storybook/addon-controls/register',
+    // TODO(#35923): Remove addon-knobs once all stories are migrated to
+    // addon-controls (args/argTypes).
     '@storybook/addon-knobs/register',
   ],
   managerWebpack: (config) => {

extensions/amp-accordion/1.0/storybook/Basic.amp.js

@@ -1,28 +1,24 @@
 import {withAmp} from '@ampproject/storybook-addon';
-import {boolean, withKnobs} from '@storybook/addon-knobs';
 
 import * as Preact from '#preact';
 
 export default {
   title: 'amp-accordion-1_0',
-  decorators: [withKnobs, withAmp],
-
+  decorators: [withAmp],
   parameters: {
     extensions: [{name: 'amp-accordion', version: '1.0'}],
     experiments: ['bento'],
   },
+  args: {
+    'expand-single-section': false,
+    animate: false,
+  },
 };
 
-export const _default = () => {
-  const expandSingleSection = boolean('expandSingleSection', false);
-  const animate = boolean('animate', false);
+export const _default = (args) => {
   return (
     <main>
-      <amp-accordion
-        id="accordion"
-        expand-single-section={expandSingleSection}
-        animate={animate}
-      >
+      <amp-accordion id="accordion" {...args}>
         <section id="section1">
           <h2>Section 1</h2>
           <div>Puppies are cute.</div>
@@ -55,16 +51,10 @@ export const _default = () => {
   );
 };
 
-export const events = () => {
-  const expandSingleSection = boolean('expandSingleSection', false);
-  const animate = boolean('animate', false);
+export const events = (args) => {
   return (
     <main>
-      <amp-accordion
-        id="accordion"
-        expand-single-section={expandSingleSection}
-        animate={animate}
-      >
+      <amp-accordion id="accordion" {...args}>
         <section id="section1">
           <h2>Section 1</h2>
           <div>Puppies are cute.</div>