refactor: add args to all stories to enable "show code"

.storybook/main.js

@@ -25,4 +25,8 @@ module.exports = {
     name: '@storybook/react-webpack5',
     options: {},
   },
+
+  typescript: {
+    reactDocgen: false,
+  },
 };

src/components/Activity/ActivityLog.stories.js

@@ -25,8 +25,8 @@ WithProps.args = {
   flush: false,
 };
 
-export const AddingCustomComponents = () => (
-  <ActivityLog>
+export const AddingCustomComponents = (args) => (
+  <ActivityLog {...args}>
     <Activity date={new Date()} action="Edited" by="Jane Doe" />
     <Activity date={new Date()} action="Published" by="Martha (Leasing)" />
     <Activity date={new Date()} action="Created" by="services">

src/components/Address/AddressInput.stories.js

@@ -49,7 +49,7 @@ Default.args = {
   hints: {},
 };
 
-export const WithId = () => (
+export const WithId = (args) => (
   <div>
     <Label for="myid_address1">Click This Label to Focus First Input:</Label>
     <AddressInput
@@ -62,6 +62,7 @@ export const WithId = () => (
         countryCode: 'US',
       }}
       id="myid"
+      {...args}
     />
   </div>
 );

src/components/Address/CountryInput.stories.js

@@ -10,4 +10,4 @@ export default {
   },
 };
 
-export const Country = () => <CountryInput onChange={action('onChange')} />;
+export const Country = (args) => <CountryInput onChange={action('onChange')} {...args} />;

src/components/Address/StateInput.stories.js

@@ -10,4 +10,4 @@ export default {
   },
 };
 
-export const State = () => <StateInput onChange={action('onChange')} />;
+export const State = (args) => <StateInput onChange={action('onChange')} {...args} />;

src/components/Alert/Alert.stories.js

@@ -30,13 +30,15 @@ LiveExample.argTypes = {
   },
 };
 
-export const Icons = () => (
+export const Icons = (args) => (
   <div>
-    <Alert icon>You can also add an icon!</Alert>
-    <Alert icon color="success">
+    <Alert icon {...args}>
+      You can also add an icon!
+    </Alert>
+    <Alert icon color="success" {...args}>
       You can specify an alert color. This one has <code>color=&quot;success&quot;</code>
     </Alert>
-    <Alert icon color="danger">
+    <Alert icon color="danger" {...args}>
       Humblebrag prism twee, gochujang seitan whatever asymmetrical ramps enamel pin austin salvia
       swag helvetica. Chartreuse food truck tofu raclette, 3 wolf moon poke chia paleo skateboard.
       Pickled tote bag echo park raclette. Irony fashion axe sartorial, cornhole jean shorts
@@ -45,23 +47,23 @@ export const Icons = () => (
       pour-over, helvetica chia brooklyn swag pug scenester kogi pitchfork leggings yuccie. Ethical
       put a bird on it portland vape YOLO.
     </Alert>
-    <Alert icon color="info">
+    <Alert icon color="info" {...args}>
       <strong>Heads up!</strong> This alert needs your attention, but it&apos;s not super important.
     </Alert>
   </div>
 );
 
-export const Dismissible = () => (
+export const Dismissible = (args) => (
   <div>
-    <Alert dismissible icon color="success">
+    <Alert dismissible icon color="success" {...args}>
       Alerts can also be dismissed. Simply add the <code>dismissible</code> prop.
     </Alert>
   </div>
 );
 
-export const Extras = () => (
+export const Extras = (args) => (
   <div>
-    <Alert icon color="info">
+    <Alert icon color="info" {...args}>
       <h4 className="alert-heading">Well done!</h4>
       <p>
         You can use the <code>alert-heading</code> class on a heading to make it stand out!

src/components/Badge/Badge.stories.tsx

@@ -10,20 +10,22 @@ export default {
   },
 };
 
-export const Default = () => (
+export const Default = (args: any) => (
   <div>
     {colors.map((color) => (
       <div>
-        <Badge color={color}>{color}</Badge>
+        <Badge color={color} {...args}>
+          {color}
+        </Badge>
       </div>
     ))}
   </div>
 );
 
-export const Pills = () => (
+export const Pills = (args: any) => (
   <div className="d-flex gap-3">
     {colors.map((color) => (
-      <Badge pill color={color}>
+      <Badge pill color={color} {...args}>
         {color}
       </Badge>
     ))}

src/components/Breadcrumb/Breadcrumb.stories.js

@@ -10,9 +10,9 @@ export default {
   },
 };
 
-export const LiveExample = () => (
+export const LiveExample = (args) => (
   <div>
-    <Breadcrumb>
+    <Breadcrumb {...args}>
       <BreadcrumbItem>
         <a href="/">Home</a>
       </BreadcrumbItem>

src/components/Button/Button.stories.js

@@ -40,9 +40,9 @@ LiveExample.argTypes = {
   },
 };
 
-export const Colors = () => (
+export const Colors = (args) => (
   <ButtonToolbar>
-    <Button>Default</Button>
+    <Button {...args}>Default</Button>
     <Button color="primary">Primary</Button>
     <Button color="secondary">Secondary</Button>
     <Button color="success">Success</Button>
@@ -55,9 +55,11 @@ export const Colors = () => (
   </ButtonToolbar>
 );
 
-export const Disabled = () => (
+export const Disabled = (args) => (
   <ButtonToolbar>
-    <Button disabled>Default</Button>
+    <Button disabled {...args}>
+      Default
+    </Button>
     <Button disabled color="primary">
       Primary
     </Button>
@@ -88,9 +90,11 @@ export const Disabled = () => (
   </ButtonToolbar>
 );
 
-export const Outline = () => (
+export const Outline = (args) => (
   <ButtonToolbar>
-    <Button outline>Default</Button>
+    <Button outline {...args}>
+      Default
+    </Button>
     <Button outline color="primary">
       Primary
     </Button>
@@ -121,9 +125,9 @@ export const Outline = () => (
   </ButtonToolbar>
 );
 
-export const Sizes = () => (
+export const Sizes = (args) => (
   <div>
-    <Button color="primary" size="lg">
+    <Button color="primary" size="lg" {...args}>
       Large button
     </Button>
     &nbsp;
@@ -159,10 +163,10 @@ TooltipButtonExample.argTypes = {
   },
 };
 
-export const ButtonGroupExample = () => (
+export const ButtonGroupExample = (args) => (
   <div>
     <div className="mb-1">
-      <Button size="lg" block>
+      <Button size="lg" block {...args}>
         Block level button
       </Button>
     </div>
@@ -214,8 +218,8 @@ export const ButtonGroupExample = () => (
   </div>
 );
 
-export const ConfirmationButtonExample = () => (
-  <ConfirmationButton confirmation="You sure?" onClick={action('onClick')}>
+export const ConfirmationButtonExample = (args) => (
+  <ConfirmationButton confirmation="You sure?" onClick={action('onClick')} {...args}>
     Do the thing!
   </ConfirmationButton>
 );

src/components/Calendar/MonthCalendar.stories.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import MonthCalendar from './MonthCalendar';
 
 const meta: Meta<typeof MonthCalendar> = {
-  title: 'Calendar',
+  title: 'MonthCalendar',
   component: MonthCalendar,
   parameters: {
     sourceLink: 'Calendar/MonthCalendar.tsx',

src/components/Carousel/Carousel.stories.js

@@ -30,4 +30,4 @@ export default {
   },
 };
 
-export const Uncontrolled = () => <UncontrolledCarousel items={items} />;
+export const Uncontrolled = (args) => <UncontrolledCarousel items={items} {...args} />;

src/components/Checkbox/CheckboxGroup.stories.js

@@ -24,18 +24,18 @@ export default {
   },
 };
 
-export const LiveExample = () => {
+export const LiveExample = (args) => {
   const [selected, setSelected] = useState([]);
 
   const handleChange = (values) => {
     setSelected(values);
     action('onChange')(values);
   };
 
-  return <CheckboxGroup options={options} onChange={handleChange} selected={selected} />;
+  return <CheckboxGroup options={options} onChange={handleChange} selected={selected} {...args} />;
 };
 
-export const SomeDisabled = () => {
+export const SomeDisabled = (args) => {
   const [selected, setSelected] = useState([]);
 
   const handleChange = (values) => {
@@ -44,11 +44,16 @@ export const SomeDisabled = () => {
   };
 
   return (
-    <CheckboxGroup options={optionsSomeDisabled} onChange={handleChange} selected={selected} />
+    <CheckboxGroup
+      options={optionsSomeDisabled}
+      onChange={handleChange}
+      selected={selected}
+      {...args}
+    />
   );
 };
 
-export const Horizontal = () => {
+export const Horizontal = (args) => {
   const [selected, setSelected] = useState([]);
 
   const handleChange = (values) => {
@@ -62,6 +67,7 @@ export const Horizontal = () => {
       options={options}
       onChange={handleChange}
       selected={selected}
+      {...args}
     />
   );
 };

src/components/CollapsableText/CollapsableText.stories.js

@@ -48,37 +48,46 @@ ShorterThanMaxLines.args = {
   maxLines: 2,
 };
 
-export const CustomComponents = () => (
+export const CustomComponents = (args) => (
   <div>
     <CollapsableText
       moreLabel={<Icon name="circle-plus" className="text-success" />}
       lessLabel={<Icon name="circle-minus" className="text-danger" />}
+      {...args}
     >
       {loremIpsum}
     </CollapsableText>
   </div>
 );
 
-export const AlignToggleButtonStart = () => (
+export const AlignToggleButtonStart = (args) => (
   <div>
-    <CollapsableText alignToggleButton="start">{loremIpsum}</CollapsableText>
+    <CollapsableText alignToggleButton="start" {...args}>
+      {loremIpsum}
+    </CollapsableText>
   </div>
 );
 
-export const AlignToggleButtonCenter = () => (
+export const AlignToggleButtonCenter = (args) => (
   <div>
-    <CollapsableText alignToggleButton="center">{loremIpsum}</CollapsableText>
+    <CollapsableText alignToggleButton="center" {...args}>
+      {loremIpsum}
+    </CollapsableText>
   </div>
 );
 
-export const AlignToggleButtonEnd = () => (
+export const AlignToggleButtonEnd = (args) => (
   <div>
-    <CollapsableText alignToggleButton="end">{loremIpsum}</CollapsableText>
+    <CollapsableText alignToggleButton="end" {...args}>
+      {loremIpsum}
+    </CollapsableText>
   </div>
 );
 
-export const AlignToggleButtonAuto = () => (
+export const AlignToggleButtonAuto = (args) => (
   <div>
-    <CollapsableText alignToggleButton="auto">{loremIpsum}</CollapsableText>
+    <CollapsableText alignToggleButton="auto" {...args}>
+      {loremIpsum}
+    </CollapsableText>
   </div>
 );

src/components/Collapse/Collapse.stories.js

@@ -11,24 +11,26 @@ export default {
   },
 };
 
-export const Controlled = () => {
+export const Controlled = (args) => {
   const [open, setOpen] = useState(false);
   return (
     <div>
       <Button color="primary" onClick={() => setOpen(!open)}>
         Toggle Collapse
       </Button>
-      <Collapse isOpen={open}>This content will fade in and out as the button is pressed</Collapse>
+      <Collapse isOpen={open} {...args}>
+        This content will fade in and out as the button is pressed
+      </Collapse>
     </div>
   );
 };
 
-export const Uncontrolled = () => (
+export const Uncontrolled = (args) => (
   <div>
     <Button color="primary" id="toggler" className="mb-3">
       Toggle
     </Button>
-    <UncontrolledCollapse toggler="#toggler">
+    <UncontrolledCollapse toggler="#toggler" {...args}>
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt magni, voluptas debitis
       similique porro a molestias consequuntur earum odio officiis natus, amet hic, iste sed
       dignissimos esse fuga! Minus, alias.

src/components/Combobox/Combobox.stories.js

@@ -176,7 +176,7 @@ export const CreatableOptions = {
 };
 
 export const CustomOptions = {
-  render: function Render() {
+  render: function Render(args) {
     const [value, setValue] = useState();
     const mixedOptions = [
       {
@@ -212,6 +212,7 @@ export const CustomOptions = {
         renderOption={renderOption}
         renderInputValue={renderInputValue}
         menuMaxHeight="20rem"
+        {...args}
       />
     );
   },