refactor: migrate @storybook/addon-knobs to @storybook/addon-controls

https://storybook.js.org/docs/writing-stories https://storybook.js.org/docs/migration-guide/from-older-version
appfolio · Jun 10, 2024 · c399754 · c399754
1 parent cd146d0
commit c399754
Show file tree

Hide file tree

Showing 69 changed files with 2,475 additions and 2,236 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -14,7 +14,7 @@ module.exports = {
         docs: false,
       },
     },
-    '@storybook/addon-knobs',
+    '@storybook/addon-controls',
     '@storybook/addon-actions',
     'storybook-source-link',
     '@storybook/addon-webpack5-compiler-babel',

diff --git a/package.json b/package.json
@@ -94,8 +94,8 @@
     "@jest/types": "^27.5.1",
     "@storybook/addon-a11y": "^8.1.5",
     "@storybook/addon-actions": "^8.1.5",
+    "@storybook/addon-controls": "^8.1.5",
     "@storybook/addon-essentials": "^8.1.5",
-    "@storybook/addon-knobs": "^8.0.0",
     "@storybook/addon-links": "^8.1.5",
     "@storybook/addon-storysource": "^8.1.5",
     "@storybook/addon-viewport": "^8.1.5",

diff --git a/src/components/Accordion/Accordion.stories.js b/src/components/Accordion/Accordion.stories.js
@@ -1,4 +1,3 @@
-import { boolean } from '@storybook/addon-knobs';
 import React, { useState } from 'react';
 import {
   Accordion,
@@ -17,7 +16,7 @@ export default {
   },
 };
 
-export const Example = () => {
+export const Example = (args) => {
   const [open, setOpen] = useState('1');
   const toggle = (id) => {
     if (open === id) {
@@ -29,7 +28,7 @@ export const Example = () => {
 
   return (
     <div>
-      <Accordion open={open} toggle={toggle} flush={boolean('flush', false)}>
+      <Accordion open={open} toggle={toggle} {...args}>
         <AccordionItem>
           <AccordionHeader targetId="1">Accordion Item 1</AccordionHeader>
           <AccordionBody accordionId="1">
@@ -61,14 +60,11 @@ export const Example = () => {
     </div>
   );
 };
+Example.args = { flush: false };
 
-export const Uncontrolled = () => (
+export const Uncontrolled = (args) => (
   <div>
-    <UncontrolledAccordion
-      defaultOpen="1"
-      flush={boolean('flush', false)}
-      stayOpen={boolean('stayOpen', false)}
-    >
+    <UncontrolledAccordion defaultOpen="1" {...args}>
       <AccordionItem>
         <AccordionHeader targetId="1">Accordion Item 1</AccordionHeader>
         <AccordionBody accordionId="1">
@@ -99,3 +95,7 @@ export const Uncontrolled = () => (
     </UncontrolledAccordion>
   </div>
 );
+Uncontrolled.args = {
+  flush: false,
+  stayOpen: false,
+};
diff --git a/src/components/Activity/Activity.stories.js b/src/components/Activity/Activity.stories.js
@@ -1,28 +1,37 @@
-import { action } from '@storybook/addon-actions';
-import { boolean, select, text } from '@storybook/addon-knobs';
+import { action as sbAction } from '@storybook/addon-actions';
 import React from 'react';
 import { colors } from '../../tooling/colors';
 import Activity from './Activity';
 
 export default {
-  title: 'ActivityLog',
+  title: 'ActivityOnly',
   component: Activity,
   parameters: {
     sourceLink: 'Activity/Activity.tsx',
   },
 };
 
-export const ActivityOnly = () => (
-  <Activity
-    action={text('action', 'Published')}
-    active={boolean('active', false)}
-    by={text('by', 'Joel Bandi')}
-    color={select('color', ['', ...colors], '')}
-    date={new Date()}
-    dateFormat={text('dateFormat')}
-    disabled={boolean('disabled', false)}
-    onClick={action('onClick')}
-  >
-    {text('content')}
+export const ActivityOnly = ({ content, ...args }) => (
+  <Activity date={new Date()} {...args}>
+    {content}
   </Activity>
 );
+ActivityOnly.args = {
+  action: 'Published',
+  active: false,
+  by: 'Joel Bandi',
+  color: '',
+  dateFormat: undefined,
+  disabled: false,
+  onClick: sbAction('onClick'),
+  content: '',
+};
+ActivityOnly.argTypes = {
+  color: {
+    options: ['', ...colors],
+    control: { type: 'select' },
+  },
+  dateFormat: {
+    control: 'text',
+  },
+};
diff --git a/src/components/Activity/ActivityLog.stories.js b/src/components/Activity/ActivityLog.stories.js
@@ -1,4 +1,3 @@
-import { boolean } from '@storybook/addon-knobs';
 import React from 'react';
 import Activity from './Activity';
 import ActivityLog from './ActivityLog';
@@ -11,8 +10,8 @@ export default {
   },
 };
 
-export const WithProps = () => (
-  <ActivityLog flush={boolean('flush', false)}>
+export const WithProps = (args) => (
+  <ActivityLog {...args}>
     <Activity date={new Date(2017, 10, 31, 23, 15)} action="Created" by="Services" />
     <Activity date={new Date(2017, 9, 13, 13, 0)} action="Edited" />
     <Activity date={new Date(2017, 4, 1, 6, 0)} action="Edited" by="Gary">
@@ -22,6 +21,9 @@ export const WithProps = () => (
     <Activity date={new Date()}>Nothing to see here, move on</Activity>
   </ActivityLog>
 );
+WithProps.args = {
+  flush: false,
+};
 
 export const AddingCustomComponents = () => (
   <ActivityLog>

diff --git a/src/components/Address/AddressInput.stories.js b/src/components/Address/AddressInput.stories.js
@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions';
-import { boolean, text, select, object } from '@storybook/addon-knobs';
 import React from 'react';
 import Label from '../Label/Label';
 import AddressInput from './AddressInput';
@@ -22,7 +21,7 @@ const defaultLabels = {
   countryCode: 'Country',
 };
 
-export const Default = () => (
+export const Default = (args) => (
   <div>
     <AddressInput
       defaultValue={{
@@ -33,19 +32,22 @@ export const Default = () => (
         postal: '12345-1234',
         countryCode: 'US',
       }}
-      compact={boolean('compact', false)}
-      onBlur={action('address onBlur')}
-      onChange={action('address onChange')}
-      countries={object('countries', ['US'])}
-      disabled={boolean('disabled')}
-      error={object('error', {})}
-      showCountry={boolean('showCountry', true)}
-      showLabels={boolean('showLabels', false)}
-      labels={object('labels', defaultLabels)}
-      hints={object('hints', {})}
+      {...args}
     />
   </div>
 );
+Default.args = {
+  compact: false,
+  onBlur: action('address onBlur'),
+  onChange: action('address onChange'),
+  countries: ['US'],
+  disabled: false,
+  error: {},
+  showCountry: true,
+  showLabels: false,
+  labels: defaultLabels,
+  hints: {},
+};
 
 export const WithId = () => (
   <div>
@@ -64,24 +66,38 @@ export const WithId = () => (
   </div>
 );
 
-export const Controlled = () => (
+export const Controlled = ({ address1, address2, city, state, postal, countryCode, ...args }) => (
   <div>
     <AddressInput
       value={{
-        address1: text('address1', '123 No Way'),
-        address2: text('address2', 'Suite 16'),
-        city: text('city', 'Smallsville'),
-        state: select(
-          'state',
-          states.map((s) => s.value),
-          'AL'
-        ),
-        postal: text('postal', '12345-1234'),
-        countryCode: text('countryCode', 'US'),
+        address1,
+        address2,
+        city,
+        state,
+        postal,
+        countryCode,
       }}
-      error={object('error', { address1: 'bad stuff', state: 'no' })}
-      onChange={action('address onChange')}
-      disabled={boolean('disabled')}
+      {...args}
     />
   </div>
 );
+Controlled.args = {
+  address1: '123 No Way',
+  address2: 'Suite 16',
+  city: 'Smallsville',
+  state: 'AL',
+  postal: '12345-1234',
+  countryCode: 'US',
+  error: { address1: 'bad stuff', state: 'no' },
+  onChange: action('address onChange'),
+  disabled: undefined,
+};
+Controlled.argTypes = {
+  state: {
+    control: 'select',
+    options: states.map((s) => s.value),
+  },
+  disabled: {
+    control: 'boolean',
+  },
+};
diff --git a/src/components/Address/InternationalAddressInput.stories.js b/src/components/Address/InternationalAddressInput.stories.js
@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions';
-import { boolean, object } from '@storybook/addon-knobs';
 import React from 'react';
 import uncontrollable from 'uncontrollable';
 import InternationalAddressInput from './InternationalAddressInput';
@@ -18,16 +17,22 @@ const UncontrolledInternationalAddressInput = uncontrollable(InternationalAddres
 });
 UncontrolledInternationalAddressInput.displayName = 'InternationalAddressInput';
 
-export const International = () => (
+export const International = (args) => (
   <div>
-    <UncontrolledInternationalAddressInput
-      showLabels={boolean('showLabel', InternationalAddressInput.defaultProps.showLabels)}
-      onBlur={action('address onBlur')}
-      onChange={action('address onChange')}
-      disabled={boolean('disabled')}
-      error={object('error', {})}
-      labels={object('labels', InternationalAddressInput.defaultProps.labels)}
-      hints={object('hints', InternationalAddressInput.defaultProps.hints)}
-    />
+    <UncontrolledInternationalAddressInput {...args} />
   </div>
 );
+International.args = {
+  showLabels: InternationalAddressInput.defaultProps.showLabels,
+  onBlur: action('address onBlur'),
+  onChange: action('address onChange'),
+  disabled: undefined,
+  error: {},
+  labels: InternationalAddressInput.defaultProps.labels,
+  hints: InternationalAddressInput.defaultProps.hints,
+};
+International.argTypes = {
+  disabled: {
+    control: 'boolean',
+  },
+};
diff --git a/src/components/Alert/Alert.stories.js b/src/components/Alert/Alert.stories.js
@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 import React from 'react';
 import { colors } from '../../tooling/colors';
 import Alert from './Alert';
@@ -12,23 +11,24 @@ export default {
   },
 };
 
-export const LiveExample = () => (
-  <Alert
-    color={select('color', ['', ...colors], 'info')}
-    icon={boolean('icon', false)}
-    dismissible={boolean('dismissible', false)}
-    onToggle={action('onToggle')}
-  >
-    {text(
-      'content',
-      `Lorem ipsum dolor sit amet, consectetur adipiscing
-elit, sed do eiusmod tempor incididunt ut labore
-et dolore magna aliqua.  Ut enim ad minim veniam,
-quis nostrud exercitation ullamco laboris nisi ut
-aliquip ex ea commodo consequat.`
-    )}
-  </Alert>
-);
+export const LiveExample = ({ content, ...args }) => <Alert {...args}>{content}</Alert>;
+LiveExample.args = {
+  icon: false,
+  dismissible: false,
+  color: 'info',
+  onToggle: action('onToggle'),
+  content: `Lorem ipsum dolor sit amet, consectetur adipiscing
+  elit, sed do eiusmod tempor incididunt ut labore
+  et dolore magna aliqua.  Ut enim ad minim veniam,
+  quis nostrud exercitation ullamco laboris nisi ut
+  aliquip ex ea commodo consequat.`,
+};
+LiveExample.argTypes = {
+  color: {
+    options: ['', ...colors],
+    control: { type: 'select' },
+  },
+};
 
 export const Icons = () => (
   <div>