From 647eacc3765edef7fbe991e1263fd61d5daaaa54 Mon Sep 17 00:00:00 2001 From: marlin dalpozzo Date: Thu, 6 Jun 2024 17:57:50 -0700 Subject: [PATCH] refactor: add args to all stories to enable "show code" --- .storybook/main.js | 4 +++ .../Activity/ActivityLog.stories.js | 4 +-- .../Address/AddressInput.stories.js | 3 +- .../Address/CountryInput.stories.js | 2 +- src/components/Address/StateInput.stories.js | 2 +- src/components/Alert/Alert.stories.js | 20 +++++++------ src/components/Badge/Badge.stories.tsx | 10 ++++--- .../Breadcrumb/Breadcrumb.stories.js | 4 +-- src/components/Button/Button.stories.js | 28 +++++++++++-------- .../Calendar/MonthCalendar.stories.tsx | 2 +- src/components/Carousel/Carousel.stories.js | 2 +- .../Checkbox/CheckboxGroup.stories.js | 16 +++++++---- .../CollapsableText.stories.js | 27 ++++++++++++------ src/components/Collapse/Collapse.stories.js | 10 ++++--- src/components/Combobox/Combobox.stories.js | 3 +- src/components/Datapair/Datapair.stories.js | 7 +++-- src/components/Fade/Fade.stories.js | 4 +-- src/components/Form/Form.stories.js | 12 ++++---- src/components/Form/FormLabelGroup.stories.js | 4 +-- .../HasManyFields/HasManyFields.stories.js | 6 ++-- src/components/Icon/Icon.stories.js | 24 ++++++++-------- src/components/Input/DateInput.stories.js | 18 ++++++++---- src/components/Input/MonthInput.stories.js | 11 ++++++-- src/components/Input/TimeInput.stories.js | 8 ++++-- .../InputGroup/InputGroup.stories.js | 20 ++++++------- src/components/Layout/Layout.stories.js | 12 ++++++-- src/components/List/SortableList.stories.js | 14 ++++++---- src/components/Media/Media.stories.js | 4 +-- .../MultiSelectCombobox.stories.tsx | 3 +- .../Pagination/Paginator.stories.js | 2 +- .../Placeholder/Placeholder.stories.js | 8 +++--- src/components/Popover/Popover.stories.js | 4 +-- src/components/Radio/RadioGroup.stories.js | 3 +- src/components/Select/Select.stories.js | 19 +++++++++---- src/components/Table/SortableTable.stories.js | 7 +++-- .../Table/UncontrolledTable.stories.js | 11 +++++--- src/components/Toast/Toast.stories.js | 8 +++--- src/components/Waiting/Waiting.stories.js | 6 ++++ src/util/useModalStoryController.ts | 21 ++++++++++++++ 39 files changed, 236 insertions(+), 137 deletions(-) create mode 100644 src/util/useModalStoryController.ts diff --git a/.storybook/main.js b/.storybook/main.js index 9d5efe17c..da4198965 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -25,4 +25,8 @@ module.exports = { name: '@storybook/react-webpack5', options: {}, }, + + typescript: { + reactDocgen: false, + }, }; diff --git a/src/components/Activity/ActivityLog.stories.js b/src/components/Activity/ActivityLog.stories.js index dd8bbda41..c9687328c 100644 --- a/src/components/Activity/ActivityLog.stories.js +++ b/src/components/Activity/ActivityLog.stories.js @@ -25,8 +25,8 @@ WithProps.args = { flush: false, }; -export const AddingCustomComponents = () => ( - +export const AddingCustomComponents = (args) => ( + diff --git a/src/components/Address/AddressInput.stories.js b/src/components/Address/AddressInput.stories.js index 38ff412d6..faedf460a 100644 --- a/src/components/Address/AddressInput.stories.js +++ b/src/components/Address/AddressInput.stories.js @@ -49,7 +49,7 @@ Default.args = { hints: {}, }; -export const WithId = () => ( +export const WithId = (args) => (
( countryCode: 'US', }} id="myid" + {...args} />
); diff --git a/src/components/Address/CountryInput.stories.js b/src/components/Address/CountryInput.stories.js index 72ab27b48..80e5a5ba4 100644 --- a/src/components/Address/CountryInput.stories.js +++ b/src/components/Address/CountryInput.stories.js @@ -10,4 +10,4 @@ export default { }, }; -export const Country = () => ; +export const Country = (args) => ; diff --git a/src/components/Address/StateInput.stories.js b/src/components/Address/StateInput.stories.js index 98dffd3b7..77cdcf42e 100644 --- a/src/components/Address/StateInput.stories.js +++ b/src/components/Address/StateInput.stories.js @@ -10,4 +10,4 @@ export default { }, }; -export const State = () => ; +export const State = (args) => ; diff --git a/src/components/Alert/Alert.stories.js b/src/components/Alert/Alert.stories.js index 8e8b2fc95..2287b83bd 100644 --- a/src/components/Alert/Alert.stories.js +++ b/src/components/Alert/Alert.stories.js @@ -30,13 +30,15 @@ LiveExample.argTypes = { }, }; -export const Icons = () => ( +export const Icons = (args) => (
- You can also add an icon! - + + You can also add an icon! + + You can specify an alert color. This one has color="success" - + 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. - + Heads up! This alert needs your attention, but it's not super important.
); -export const Dismissible = () => ( +export const Dismissible = (args) => (
- + Alerts can also be dismissed. Simply add the dismissible prop.
); -export const Extras = () => ( +export const Extras = (args) => (
- +

Well done!

You can use the alert-heading class on a heading to make it stand out! diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx index 2d8291d7f..ca2a427d8 100644 --- a/src/components/Badge/Badge.stories.tsx +++ b/src/components/Badge/Badge.stories.tsx @@ -10,20 +10,22 @@ export default { }, }; -export const Default = () => ( +export const Default = (args: any) => (

{colors.map((color) => (
- {color} + + {color} +
))}
); -export const Pills = () => ( +export const Pills = (args: any) => (
{colors.map((color) => ( - + {color} ))} diff --git a/src/components/Breadcrumb/Breadcrumb.stories.js b/src/components/Breadcrumb/Breadcrumb.stories.js index f8cd285fc..4e7e55e61 100644 --- a/src/components/Breadcrumb/Breadcrumb.stories.js +++ b/src/components/Breadcrumb/Breadcrumb.stories.js @@ -10,9 +10,9 @@ export default { }, }; -export const LiveExample = () => ( +export const LiveExample = (args) => (
- + Home diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js index 24d9931f5..c11a75f2f 100644 --- a/src/components/Button/Button.stories.js +++ b/src/components/Button/Button.stories.js @@ -40,9 +40,9 @@ LiveExample.argTypes = { }, }; -export const Colors = () => ( +export const Colors = (args) => ( - + @@ -55,9 +55,11 @@ export const Colors = () => ( ); -export const Disabled = () => ( +export const Disabled = (args) => ( - + @@ -88,9 +90,11 @@ export const Disabled = () => ( ); -export const Outline = () => ( +export const Outline = (args) => ( - + @@ -121,9 +125,9 @@ export const Outline = () => ( ); -export const Sizes = () => ( +export const Sizes = (args) => (
-   @@ -159,10 +163,10 @@ TooltipButtonExample.argTypes = { }, }; -export const ButtonGroupExample = () => ( +export const ButtonGroupExample = (args) => (
-
@@ -214,8 +218,8 @@ export const ButtonGroupExample = () => (
); -export const ConfirmationButtonExample = () => ( - +export const ConfirmationButtonExample = (args) => ( + Do the thing! ); diff --git a/src/components/Calendar/MonthCalendar.stories.tsx b/src/components/Calendar/MonthCalendar.stories.tsx index f15561de2..939ffdb6a 100644 --- a/src/components/Calendar/MonthCalendar.stories.tsx +++ b/src/components/Calendar/MonthCalendar.stories.tsx @@ -4,7 +4,7 @@ import React, { useState } from 'react'; import MonthCalendar from './MonthCalendar'; const meta: Meta = { - title: 'Calendar', + title: 'MonthCalendar', component: MonthCalendar, parameters: { sourceLink: 'Calendar/MonthCalendar.tsx', diff --git a/src/components/Carousel/Carousel.stories.js b/src/components/Carousel/Carousel.stories.js index 8472d80ba..c6a996e70 100644 --- a/src/components/Carousel/Carousel.stories.js +++ b/src/components/Carousel/Carousel.stories.js @@ -30,4 +30,4 @@ export default { }, }; -export const Uncontrolled = () => ; +export const Uncontrolled = (args) => ; diff --git a/src/components/Checkbox/CheckboxGroup.stories.js b/src/components/Checkbox/CheckboxGroup.stories.js index a1b1cac44..8bdad0b9d 100644 --- a/src/components/Checkbox/CheckboxGroup.stories.js +++ b/src/components/Checkbox/CheckboxGroup.stories.js @@ -24,7 +24,7 @@ export default { }, }; -export const LiveExample = () => { +export const LiveExample = (args) => { const [selected, setSelected] = useState([]); const handleChange = (values) => { @@ -32,10 +32,10 @@ export const LiveExample = () => { action('onChange')(values); }; - return ; + return ; }; -export const SomeDisabled = () => { +export const SomeDisabled = (args) => { const [selected, setSelected] = useState([]); const handleChange = (values) => { @@ -44,11 +44,16 @@ export const SomeDisabled = () => { }; return ( - + ); }; -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} /> ); }; diff --git a/src/components/CollapsableText/CollapsableText.stories.js b/src/components/CollapsableText/CollapsableText.stories.js index c9e4a51b2..bcc878a11 100644 --- a/src/components/CollapsableText/CollapsableText.stories.js +++ b/src/components/CollapsableText/CollapsableText.stories.js @@ -48,37 +48,46 @@ ShorterThanMaxLines.args = { maxLines: 2, }; -export const CustomComponents = () => ( +export const CustomComponents = (args) => (
} lessLabel={} + {...args} > {loremIpsum}
); -export const AlignToggleButtonStart = () => ( +export const AlignToggleButtonStart = (args) => (
- {loremIpsum} + + {loremIpsum} +
); -export const AlignToggleButtonCenter = () => ( +export const AlignToggleButtonCenter = (args) => (
- {loremIpsum} + + {loremIpsum} +
); -export const AlignToggleButtonEnd = () => ( +export const AlignToggleButtonEnd = (args) => (
- {loremIpsum} + + {loremIpsum} +
); -export const AlignToggleButtonAuto = () => ( +export const AlignToggleButtonAuto = (args) => (
- {loremIpsum} + + {loremIpsum} +
); diff --git a/src/components/Collapse/Collapse.stories.js b/src/components/Collapse/Collapse.stories.js index e2f5572ae..0e1ab0b3a 100644 --- a/src/components/Collapse/Collapse.stories.js +++ b/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 (
- This content will fade in and out as the button is pressed + + This content will fade in and out as the button is pressed +
); }; -export const Uncontrolled = () => ( +export const Uncontrolled = (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. diff --git a/src/components/Combobox/Combobox.stories.js b/src/components/Combobox/Combobox.stories.js index 863490b9d..dc1467f5d 100644 --- a/src/components/Combobox/Combobox.stories.js +++ b/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} /> ); }, diff --git a/src/components/Datapair/Datapair.stories.js b/src/components/Datapair/Datapair.stories.js index 350c447e1..f05184266 100644 --- a/src/components/Datapair/Datapair.stories.js +++ b/src/components/Datapair/Datapair.stories.js @@ -43,10 +43,10 @@ WithProps.argTypes = { }, }; -export const WithHTMLValue = () => ( +export const WithHTMLValue = (args) => ( - + Custom markup ( ); -export const WithNodeInLabel = () => ( +export const WithNodeInLabel = (args) => ( ( } value="Stuff" + {...args} /> diff --git a/src/components/Fade/Fade.stories.js b/src/components/Fade/Fade.stories.js index 0ed78d690..8c1dc48dc 100644 --- a/src/components/Fade/Fade.stories.js +++ b/src/components/Fade/Fade.stories.js @@ -10,14 +10,14 @@ export default { }, }; -export const LiveExample = () => { +export const LiveExample = (args) => { const [open, setOpen] = useState(false); return (
- + This content will fade in and out as the button is pressed
diff --git a/src/components/Form/Form.stories.js b/src/components/Form/Form.stories.js index be94a53c4..9a136cfaa 100644 --- a/src/components/Form/Form.stories.js +++ b/src/components/Form/Form.stories.js @@ -39,9 +39,9 @@ export default { }, }; -export const Inputs = () => ( +export const Inputs = (args) => (
- +

@@ -81,7 +81,7 @@ export const Inputs = () => (

); -export const FloatingLabels = () => ( +export const FloatingLabels = (args) => ( <>

Wrap a pair of <Input> and <Label> components in{' '} @@ -91,7 +91,7 @@ export const FloatingLabels = () => ( Also note that the <Input> must come first so we can utilize a sibling selector (e.g., ~).

-
+ @@ -105,9 +105,9 @@ export const FloatingLabels = () => ( ); -export const FormRows = () => ( +export const FormRows = (args) => ( - + diff --git a/src/components/Form/FormLabelGroup.stories.js b/src/components/Form/FormLabelGroup.stories.js index d9cf58d1e..8a6b2b042 100644 --- a/src/components/Form/FormLabelGroup.stories.js +++ b/src/components/Form/FormLabelGroup.stories.js @@ -40,8 +40,8 @@ LiveExample.argTypes = { }, }; -export const RadioExample = () => ( - +export const RadioExample = (args) => ( + diff --git a/src/components/HasManyFields/HasManyFields.stories.js b/src/components/HasManyFields/HasManyFields.stories.js index fe1a08117..18066687f 100644 --- a/src/components/HasManyFields/HasManyFields.stories.js +++ b/src/components/HasManyFields/HasManyFields.stories.js @@ -86,6 +86,8 @@ RowWrapper.argTypes = { }, }; -export const AddItemButton = () => ( - Button Label Content +export const AddItemButton = (args) => ( + + Button Label Content + ); diff --git a/src/components/Icon/Icon.stories.js b/src/components/Icon/Icon.stories.js index 154540f5a..3cd467de9 100644 --- a/src/components/Icon/Icon.stories.js +++ b/src/components/Icon/Icon.stories.js @@ -69,10 +69,10 @@ AvailableIcons.argTypes = { }, }; -export const InlineText = () => ( +export const InlineText = (args) => (

- Print + Print

Add Item @@ -86,11 +86,11 @@ export const InlineText = () => (

); -export const Buttons = () => ( +export const Buttons = (args) => (

@@ -111,9 +111,9 @@ export const Buttons = () => (

); -export const Size = () => ( +export const Size = (args) => (
- xs + xs
sm
@@ -130,9 +130,9 @@ export const Size = () => (
); -export const Animation = () => ( +export const Animation = (args) => (
- + @@ -140,9 +140,9 @@ export const Animation = () => (
); -export const RotateAndFlip = () => ( +export const RotateAndFlip = (args) => (
- 90 + 90
180
@@ -155,10 +155,10 @@ export const RotateAndFlip = () => (
); -export const OtherProps = () => ( +export const OtherProps = (args) => (

- Default + Default

fixedWidth diff --git a/src/components/Input/DateInput.stories.js b/src/components/Input/DateInput.stories.js index 63c85c6ae..9042024b6 100644 --- a/src/components/Input/DateInput.stories.js +++ b/src/components/Input/DateInput.stories.js @@ -46,7 +46,9 @@ WithId.args = { onChange: action('onChange'), }; -export const UncontrolledDefaultValue = () => ( +// declaring any arguments is required to enable displaying code in storybook docs +// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars +export const UncontrolledDefaultValue = (args) => (

When defaultValue is set, component is 'uncontrolled' and maintains its own state. @@ -80,7 +82,9 @@ export const UncontrolledDefaultValue = () => (

); -export const ValueControlled = () => ( +// declaring any arguments is required to enable displaying code in storybook docs +// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars +export const ValueControlled = (args) => (

When value is set, component is 'controlled' and does not maintain its own state. @@ -105,7 +109,7 @@ export const ValueControlled = () => (

); -export const CustomHeaderAndFooter = () => ( +export const CustomHeaderAndFooter = (args) => (
PIRELLI} @@ -118,13 +122,14 @@ export const CustomHeaderAndFooter = () => (
} + {...args} />
); -export const DateEnabled = () => ( +export const DateEnabled = (args) => (
- date.getDay() > 0 && date.getDay() < 6} /> + date.getDay() > 0 && date.getDay() < 6} {...args} />
); @@ -138,7 +143,7 @@ CalendarDefault.args = { onSelect: action('onSelect'), }; -export const CalendarCustomDay = () => ( +export const CalendarCustomDay = (args) => (
{ @@ -154,6 +159,7 @@ export const CalendarCustomDay = () => ( ); }} + {...args} />
); diff --git a/src/components/Input/MonthInput.stories.js b/src/components/Input/MonthInput.stories.js index a3ee04707..d2a4d4783 100644 --- a/src/components/Input/MonthInput.stories.js +++ b/src/components/Input/MonthInput.stories.js @@ -28,7 +28,9 @@ WithProps.args = { onChange: action('onChange'), }; -export const DefaultValueUncontrolled = () => ( +// declaring any arguments is required to enable displaying code in storybook docs +// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars +export const DefaultValueUncontrolled = (args) => (

When defaultValue is set, component is 'uncontrolled' and maintains its own state. @@ -62,7 +64,9 @@ export const DefaultValueUncontrolled = () => (

); -export const ValueControlled = () => ( +// declaring any arguments is required to enable displaying code in storybook docs +// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars +export const ValueControlled = (args) => (

When value is set, component is 'uncontrolled' and does not maintain its own state. @@ -92,7 +96,7 @@ export const ValueControlled = () => (

); -export const CustomHeaderAndFooter = () => ( +export const CustomHeaderAndFooter = (args) => (
PIRELLI} @@ -105,6 +109,7 @@ export const CustomHeaderAndFooter = () => (
} + {...args} />
); diff --git a/src/components/Input/TimeInput.stories.js b/src/components/Input/TimeInput.stories.js index a30709fd2..c8bf704e6 100644 --- a/src/components/Input/TimeInput.stories.js +++ b/src/components/Input/TimeInput.stories.js @@ -35,7 +35,9 @@ WithProps.args = { timeFormat: TimeInput.defaultProps.timeFormat, }; -export const DefaultValueUncontrolled = () => ( +// declaring any arguments is required to enable displaying code in storybook docs +// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars +export const DefaultValueUncontrolled = (args) => (

When defaultValue is set, component is 'uncontrolled' and maintains its own state. @@ -52,7 +54,9 @@ export const DefaultValueUncontrolled = () => (

); -export const ValueControlled = () => ( +// declaring any arguments is required to enable displaying code in storybook docs +// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars +export const ValueControlled = (args) => (

When value is set, component is 'controlled' and does not maintain its own state. diff --git a/src/components/InputGroup/InputGroup.stories.js b/src/components/InputGroup/InputGroup.stories.js index c9f6e851b..195c0f6ec 100644 --- a/src/components/InputGroup/InputGroup.stories.js +++ b/src/components/InputGroup/InputGroup.stories.js @@ -12,9 +12,9 @@ export default { }, }; -export const WithProps = () => ( +export const WithProps = (args) => (

- + @ @@ -47,9 +47,9 @@ export const WithProps = () => (
); -export const Addons = () => ( +export const Addons = (args) => (
- + To the Left! @@ -67,9 +67,9 @@ export const Addons = () => (
); -export const AddonSizing = () => ( +export const AddonSizing = (args) => (
- + @lg @@ -86,9 +86,9 @@ export const AddonSizing = () => (
); -export const ButtonShorthand = () => ( +export const ButtonShorthand = (args) => (
- + @@ -106,8 +106,8 @@ export const ButtonShorthand = () => (
); -export const MultipleInputs = () => ( - +export const MultipleInputs = (args) => ( + diff --git a/src/components/Layout/Layout.stories.js b/src/components/Layout/Layout.stories.js index 025090ae9..3151d005f 100644 --- a/src/components/Layout/Layout.stories.js +++ b/src/components/Layout/Layout.stories.js @@ -10,7 +10,9 @@ export default { }, }; -export const Grid = () => ( +// declaring any arguments is required to enable displaying code in storybook docs +// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars +export const Default = (args) => ( 1 @@ -77,7 +79,9 @@ export const Grid = () => ( ); -export const Offsets = () => ( +// declaring any arguments is required to enable displaying code in storybook docs +// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars +export const Offsets = (args) => (