♻️Migrate Stories 62..65 to args

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

@@ -1,14 +1,13 @@
-const {globExcludeDisabledStorybookFiles} = require('../disabled-stories');
 const {getStaticDirs} = require('../static-dirs');
 
 const rootDir = '../../../../..';
 
 module.exports = {
   staticDirs: getStaticDirs(rootDir),
-  stories: globExcludeDisabledStorybookFiles([
+  stories: [
     `${rootDir}/src/builtins/storybook/*.amp.js`,
     `${rootDir}/extensions/**/*.*/storybook/*.amp.js`,
-  ]),
+  ],
   addons: [
     // TODO(alanorozco): AMP previews are loaded inside an iframe, so the a11y
     // addon is not able to inspect the tree inside it. Its results are incorrect,

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

@@ -1,14 +1,13 @@
-const {globExcludeDisabledStorybookFiles} = require('../disabled-stories');
 const {getStaticDirs} = require('../static-dirs');
 
 const rootDir = '../../../../..';
 
 module.exports = {
   staticDirs: getStaticDirs(rootDir),
-  stories: globExcludeDisabledStorybookFiles([
+  stories: [
     `${rootDir}/src/**/storybook/!(*.amp).js`,
     `${rootDir}/extensions/**/*.*/storybook/!(*.amp).js`,
-  ]),
+  ],
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-viewport/register',

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

@@ -1,4 +1,3 @@
-const {globExcludeDisabledStorybookFiles} = require('../disabled-stories');
 const {getStaticDirs} = require('../static-dirs');
 
 const rootDir = '../../../../..';
@@ -8,10 +7,10 @@ module.exports = {
   // Unlike the `amp` and `preact` environments, we search Storybook files only
   // under component paths. This is because only components have React build
   // output, but directories in src/ outside src/bento/components/ do not.
-  stories: globExcludeDisabledStorybookFiles([
+  stories: [
     `${rootDir}/extensions/**/*.*/storybook/!(*.amp).js`,
     `${rootDir}/src/bento/components/**/*.*/storybook/*.js`,
-  ]),
+  ],
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-viewport/register',

build-system/test-configs/forbidden-terms.js

@@ -720,16 +720,6 @@ const forbiddenTermsGlobal = {
   },
   'withA11y':
     'The Storybook decorator "withA11y" has been deprecated. You may simply remove it, since the a11y addon is now globally configured.',
-  '@storybook/addon-knobs': {
-    message:
-      'The @storybook/addon-knobs package has been deprecated. Use Controls instead (`args` and `argTypes`). https://storybook.js.org/docs/react/essentials/controls',
-    allowlist: [
-      // TODO(#35923): Update existing files to use Controls instead.
-      'src/builtins/storybook/amp-layout.amp.js',
-      'src/preact/storybook/Context.js',
-      'src/preact/storybook/Wrappers.js',
-    ],
-  },
 };
 
 const bannedTermsHelpString =

src/builtins/storybook/amp-layout.amp.js

@@ -1,16 +1,13 @@
 import {withAmp} from '@ampproject/storybook-addon';
-import {number, withKnobs} from '@storybook/addon-knobs';
 
 import * as Preact from '#preact';
 
 export default {
   title: '0/amp-layout',
-  decorators: [withKnobs, withAmp],
+  decorators: [withAmp],
 };
 
-export const responsive = () => {
-  const width = number('width', 400);
-  const height = number('height', 300);
+export const responsive = ({height, width}) => {
   return (
     <main>
       <style jsx global>
@@ -34,10 +31,12 @@ export const responsive = () => {
   );
 };
 
-export const intrinsic = () => {
-  const width = number('width', 800);
-  const height = number('height', 600);
-  const maxWidth = number('maxWidth', 400);
+responsive.args = {
+  width: 400,
+  height: 300,
+};
+
+export const intrinsic = ({height, maxWidth, width}) => {
   return (
     <main>
       <style jsx global>
@@ -69,3 +68,9 @@ export const intrinsic = () => {
     </main>
   );
 };
+
+intrinsic.args = {
+  width: 800,
+  height: 600,
+  maxWidth: 400,
+};

src/preact/storybook/Context.js

@@ -1,36 +1,37 @@
-// @ts-ignore
-import {boolean, select, withKnobs} from '@storybook/addon-knobs';
-
 import {Loading_Enum} from '#core/constants/loading-instructions';
 
 import * as Preact from '#preact';
 import {WithAmpContext, useAmpContext, useLoading} from '#preact/context';
 
 export default {
   title: '0/Context',
-  decorators: [withKnobs],
 };
 
 const IMG_SRC =
   "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E";
 
-const LOADING_OPTIONS = ['auto', 'lazy', 'eager', 'unload'];
-
-export const _default = () => {
-  const renderable = boolean('top renderable', true);
-  const playable = boolean('top playable', true);
-  const loading = select('top loading', LOADING_OPTIONS, LOADING_OPTIONS[0]);
+export const _default = ({...args}) => {
   return (
-    <WithAmpContext
-      renderable={renderable}
-      playable={playable}
-      loading={loading}
-    >
+    <WithAmpContext {...args}>
       <Composite />
     </WithAmpContext>
   );
 };
 
+_default.args = {
+  renderable: true,
+  playable: true,
+};
+
+_default.argTypes = {
+  loading: {
+    name: 'loading',
+    defaultValue: 'auto',
+    options: ['auto', 'lazy', 'eager', 'unload'],
+    control: {type: 'select'},
+  },
+};
+
 /**
  * @return {import('preact').VNode}
  */

src/preact/storybook/Wrappers.js

@@ -1,62 +1,76 @@
-// @ts-ignore
-import {boolean, object, text, withKnobs} from '@storybook/addon-knobs';
-
+// @ts-nocheck
 import * as Preact from '#preact';
 import {ContainWrapper, Wrapper} from '#preact/component';
 
 export default {
   title: '0/Wrappers',
-  decorators: [withKnobs],
 };
 
-export const wrapper = () => {
-  const asProp = text('As', 'span');
-  const className = text('className', '');
-  const style = object('style', {border: '1px solid'});
-  const wrapperClassName = text('wrapperClassName', '');
-  const wrapperStyle = object('wrapperStyle', {});
-  const ariaLabel = text('ariaLabel', 'aria label');
+export const wrapper = ({ariaLabel, asProp, className, ...args}) => {
   return (
-    <Wrapper
-      as={asProp}
-      class={className}
-      style={style}
-      wrapperClassName={wrapperClassName}
-      wrapperStyle={wrapperStyle}
-      aria-label={ariaLabel}
-    >
+    <Wrapper {...args} as={asProp} class={className} aria-label={ariaLabel}>
       content
     </Wrapper>
   );
 };
 
-export const containWrapper = () => {
-  const asProp = text('As', 'div');
-  const className = text('className', '');
-  const style = object('style', {border: '1px solid', width: 200, height: 50});
-  const wrapperClassName = text('wrapperClassName', '');
-  const wrapperStyle = object('wrapperStyle', {padding: 4});
-  const contentClassName = text('contentClassName', 'content');
-  const contentStyle = object('contentStyle', {border: '1px dotted'});
-  const size = boolean('size', true);
-  const layout = boolean('layout', true);
-  const paint = boolean('paint', true);
-  const ariaLabel = text('ariaLabel', 'aria label');
+wrapper.args = {
+  asProp: 'span',
+  ariaLabel: 'aria Label',
+  className: '',
+  wrapperClassName: '',
+};
+
+wrapper.argTypes = {
+  style: {
+    name: 'style',
+    defaultValue: {border: '1px solid'},
+    control: {type: 'object'},
+  },
+  wrapperStyle: {
+    name: 'wrapperStyle',
+    control: {type: 'object'},
+  },
+};
+
+export const containWrapper = ({ariaLabel, asProp, className, ...args}) => {
   return (
     <ContainWrapper
+      {...args}
       as={asProp}
       class={className}
-      style={style}
-      wrapperClassName={wrapperClassName}
-      wrapperStyle={wrapperStyle}
-      contentClassName={contentClassName}
-      contentStyle={contentStyle}
-      size={size}
-      layout={layout}
-      paint={paint}
       aria-label={ariaLabel}
     >
       content
     </ContainWrapper>
   );
 };
+
+containWrapper.args = {
+  asProp: 'div',
+  ariaLabel: 'aria Label',
+  className: '',
+  contentClassName: 'content',
+  wrapperClassName: '',
+  size: true,
+  layout: true,
+  paint: true,
+};
+
+containWrapper.argTypes = {
+  style: {
+    name: 'style',
+    defaultValue: {border: '1px solid', width: 200, height: 50},
+    control: {type: 'object'},
+  },
+  wrapperStyle: {
+    name: 'wrapperStyle',
+    defaultValue: {padding: 4},
+    control: {type: 'object'},
+  },
+  contentStyle: {
+    name: 'contentStyle',
+    defaultValue: {border: '1px dotted'},
+    control: {type: 'object'},
+  },
+};