From 704da038f087ef161a2c9c16e9d55d43d5c9d95a Mon Sep 17 00:00:00 2001 From: marlin dalpozzo Date: Tue, 4 Jun 2024 18:40:18 -0700 Subject: [PATCH] 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 --- .storybook/main.js | 2 +- package.json | 2 +- src/components/Accordion/Accordion.stories.js | 18 +- src/components/Activity/Activity.stories.js | 37 +- .../Activity/ActivityLog.stories.js | 8 +- .../Address/AddressInput.stories.js | 68 +-- .../InternationalAddressInput.stories.js | 27 +- src/components/Alert/Alert.stories.js | 36 +- .../BlockPanel/BlockPanel.stories.js | 88 ++-- src/components/Button/Button.stories.js | 63 ++- src/components/Calendar/Calendar.stories.tsx | 28 +- .../Calendar/MonthCalendar.stories.tsx | 56 ++- src/components/Callout/Callout.stories.js | 46 +- src/components/Card/Card.stories.js | 81 ++-- .../Carousel/ImageCarousel.stories.js | 25 +- .../CollapsableText.stories.js | 35 +- src/components/Combobox/Combobox.stories.js | 281 ++++++------ src/components/Datapair/Datapair.stories.js | 52 ++- src/components/Dropdown/Dropdown.stories.js | 112 +++-- .../ExpandableSection.stories.js | 36 +- .../FeatureBanner/FeatureBanner.stories.tsx | 44 +- .../FeedbackButton/FeedbackButton.stories.tsx | 116 ++--- .../FilterList/FilterList.stories.js | 13 +- src/components/Form/Form.stories.js | 13 +- src/components/Form/FormLabelGroup.stories.js | 34 +- src/components/Form/FormRow.stories.js | 149 +++---- .../HasManyFields/HasManyFields.stories.js | 45 +- .../HelpBubble/HelpBubble.stories.js | 24 +- src/components/Highlight/Highlight.stories.js | 45 +- src/components/Icon/Icon.stories.js | 96 ++-- src/components/InfoBox/InfoBox.stories.js | 27 +- .../Input/CreditCardNumber.stories.js | 19 +- src/components/Input/CurrencyInput.stories.js | 25 +- src/components/Input/DateInput.stories.js | 52 ++- src/components/Input/MaskedInput.stories.js | 16 +- src/components/Input/MonthInput.stories.js | 27 +- src/components/Input/PatternInput.stories.js | 10 +- src/components/Input/TimeInput.stories.js | 24 +- .../LabelBadge/LabelBadge.stories.js | 18 +- src/components/Layout/Layout.stories.js | 39 +- src/components/List/List.stories.js | 108 +++-- src/components/List/ListGroup.stories.js | 42 +- src/components/List/SortableList.stories.js | 411 ++++++++++-------- src/components/Modal/Modal.stories.js | 109 +++-- .../MultiSelectCombobox.stories.tsx | 203 +++++---- src/components/Nav/Nav.stories.js | 219 +++++----- src/components/Nav/Navbar.stories.js | 34 +- src/components/Note/Note.stories.js | 198 +++++---- src/components/Note/Notes.stories.js | 68 +-- src/components/Offcanvas/Offcanvas.stories.js | 26 +- .../Pagination/Pagination.stories.js | 16 +- .../Pagination/Paginator.stories.js | 28 +- .../Placeholder/Placeholder.stories.js | 143 +++--- src/components/Popover/Popover.stories.js | 174 ++++---- src/components/Progress/Progress.stories.js | 29 +- .../ScrollContainer.stories.js | 43 +- src/components/Select/Select.stories.js | 69 +-- src/components/Spinner/Spinner.stories.js | 98 +++-- src/components/Status/Status.stories.js | 16 +- src/components/Steps/Steps.stories.js | 81 ++-- .../SummaryBox/SummaryBox.stories.js | 28 +- src/components/Table/SortableTable.stories.js | 138 +++--- src/components/Table/Table.stories.js | 24 +- .../Table/UncontrolledTable.stories.js | 26 +- src/components/Tooltip/Tooltip.stories.js | 19 +- src/components/Tree/Tree.stories.js | 8 +- .../TruncatedText/TruncatedText.stories.js | 25 +- src/components/Waiting/Waiting.stories.js | 30 +- yarn.lock | 359 +-------------- 69 files changed, 2474 insertions(+), 2235 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index 7b198dedf..716da4c4b 100644 --- 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 index 096b9abc0..1178ca3b6 100644 --- 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 index 2e293079a..86df42176 100644 --- 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 (
- + Accordion Item 1 @@ -61,14 +60,11 @@ export const Example = () => {
); }; +Example.args = { flush: false }; -export const Uncontrolled = () => ( +export const Uncontrolled = (args) => (
- + Accordion Item 1 @@ -99,3 +95,7 @@ export const Uncontrolled = () => (
); +Uncontrolled.args = { + flush: false, + stayOpen: false, +}; diff --git a/src/components/Activity/Activity.stories.js b/src/components/Activity/Activity.stories.js index 42acfef19..de0d829b0 100644 --- a/src/components/Activity/Activity.stories.js +++ b/src/components/Activity/Activity.stories.js @@ -1,5 +1,4 @@ -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'; @@ -12,17 +11,27 @@ export default { }, }; -export const ActivityOnly = () => ( - - {text('content')} +export const ActivityOnly = ({ content, ...args }) => ( + + {content} ); +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 index bd2264eaa..dd8bbda41 100644 --- 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 = () => ( - +export const WithProps = (args) => ( + @@ -22,6 +21,9 @@ export const WithProps = () => ( Nothing to see here, move on ); +WithProps.args = { + flush: false, +}; export const AddingCustomComponents = () => ( diff --git a/src/components/Address/AddressInput.stories.js b/src/components/Address/AddressInput.stories.js index 7b2321609..38ff412d6 100644 --- 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) => (
( 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} />
); +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 = () => (
@@ -64,24 +66,38 @@ export const WithId = () => (
); -export const Controlled = () => ( +export const Controlled = ({ address1, address2, city, state, postal, countryCode, ...args }) => (
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} />
); +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 index 0f2a7a8b0..c2e69557f 100644 --- 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) => (
- +
); +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 index ac4be146e..8e8b2fc95 100644 --- 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 = () => ( - - {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.` - )} - -); +export const LiveExample = ({ content, ...args }) => {content}; +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 = () => (
diff --git a/src/components/BlockPanel/BlockPanel.stories.js b/src/components/BlockPanel/BlockPanel.stories.js index 734b11bfa..74f9f07ee 100644 --- a/src/components/BlockPanel/BlockPanel.stories.js +++ b/src/components/BlockPanel/BlockPanel.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { boolean, select, text } from '@storybook/addon-knobs'; import React from 'react'; import Button from '../Button/Button'; import ButtonGroup from '../Button/ButtonGroup'; @@ -22,26 +21,9 @@ export default { }, }; -export const LiveExample = () => ( - action('onEdit')} - color={select('color', [ - '', - 'primary', - 'secondary', - 'info', - 'success', - 'warning', - 'danger', - 'light', - 'dark', - ])} - expandable={boolean('expandable', true)} - hideOnToggle={boolean('hideOnToggle', false)} - open={boolean('open', true)} - > - {text('title') ? ( +export const LiveExample = (args) => ( + + {args.title ? (
The header is shown when a title prop is provided
@@ -52,34 +34,45 @@ export const LiveExample = () => ( )} ); +LiveExample.args = { + title: 'Some simple content would go here', + onEdit: action('onEdit'), + color: '', + expandable: true, + hideOnToggle: false, + open: true, +}; +LiveExample.argTypes = { + color: { + options: ['', 'primary', 'secondary', 'info', 'success', 'warning', 'danger', 'light', 'dark'], + control: { type: 'select' }, + }, +}; -export const InitiallyClosed = () => ( - action('onEdit')} - expandable={boolean('expandable', true)} - open={false} - > +export const InitiallyClosed = (args) => ( + Now you don't. ); +InitiallyClosed.args = { + title: 'Some simple content would go here', + onEdit: action('onEdit'), + expandable: true, +}; -export const OnToggle = () => ( - - Now you don't. - -); +export const OnToggle = (args) => Now you don't.; +OnToggle.args = { + title: 'Click me you fool', + onToggle: action('onToggle'), + expandable: true, +}; -export const ComponentsForTitleAndControls = () => ( +export const ComponentsForTitleAndControls = ({ title }) => ( - {text('title', 'Invoices')}{' '} + {title}{' '} It means nothing. @@ -105,11 +98,14 @@ export const ComponentsForTitleAndControls = () => ( Hello ); +ComponentsForTitleAndControls.args = { + title: 'Invoices', +}; -export const DropdownForControls = () => ( +export const DropdownForControls = ({ title }) => ( {text('title', 'Invoices')}} + title={{title}} controls={[ ( entities in a service that somehow match red ); +DropdownForControls.args = { + title: 'Invoices', +}; -export const StickyBlockPanel = () => ( - +export const StickyBlockPanel = ({ title }) => ( + I feel sticky, oh so sticky, I feel sticky, and witty, and wise. ); +StickyBlockPanel.args = { + title: 'I remember open/close', +}; diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js index a5c6ffd73..24d9931f5 100644 --- a/src/components/Button/Button.stories.js +++ b/src/components/Button/Button.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 { buttonColors } from '../../tooling/colors'; import DropdownItem from '../Dropdown/DropdownItem'; @@ -20,18 +19,26 @@ export default { }, }; -export const LiveExample = () => ( - -); +export const LiveExample = ({ label, ...args }) => ; +LiveExample.args = { + color: 'primary', + block: false, + disabled: false, + outline: false, + active: false, + size: undefined, + label: 'Click Me', +}; +LiveExample.argTypes = { + color: { + options: buttonColors, + control: { type: 'select' }, + }, + size: { + options: ['', 'sm', 'lg'], + control: { type: 'select' }, + }, +}; export const Colors = () => ( @@ -130,17 +137,27 @@ export const Sizes = () => (
); -export const TooltipButtonExample = () => ( - - {text('Label', 'Click Me')} - +export const TooltipButtonExample = ({ label, ...args }) => ( + {label} ); +TooltipButtonExample.args = { + color: 'primary', + disabled: false, + onClick: action('onClick'), + tooltip: 'Here is a tooltip.', + placement: 'top', + label: 'Click Me', +}; +TooltipButtonExample.argTypes = { + color: { + options: buttonColors, + control: { type: 'select' }, + }, + placement: { + options: ['top', 'left', 'bottom', 'right'], + control: { type: 'select' }, + }, +}; export const ButtonGroupExample = () => (
diff --git a/src/components/Calendar/Calendar.stories.tsx b/src/components/Calendar/Calendar.stories.tsx index 6bf149585..5435ee693 100644 --- a/src/components/Calendar/Calendar.stories.tsx +++ b/src/components/Calendar/Calendar.stories.tsx @@ -1,19 +1,29 @@ import { action } from '@storybook/addon-actions'; -import { select } from '@storybook/addon-knobs'; -import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; import Calendar from './Calendar'; -export default { +const meta: Meta = { title: 'Calendar', component: Calendar, parameters: { sourceLink: 'Calendar/Calendar.tsx', }, + argTypes: { + weekDayFormat: { + options: [undefined, 'dd', 'ddd', 'dddd'], + control: { + type: 'select', + }, + }, + }, }; -export const CalendarExample = () => ( - -); +export default meta; +type Story = StoryObj; + +export const CalendarExample: Story = { + args: { + onSelect: action('onSelect'), + weekDayFormat: undefined, + }, +}; diff --git a/src/components/Calendar/MonthCalendar.stories.tsx b/src/components/Calendar/MonthCalendar.stories.tsx index dbb20c3ac..f15561de2 100644 --- a/src/components/Calendar/MonthCalendar.stories.tsx +++ b/src/components/Calendar/MonthCalendar.stories.tsx @@ -1,28 +1,52 @@ import { action } from '@storybook/addon-actions'; -import { boolean, select } from '@storybook/addon-knobs'; +import { Meta, StoryObj } from '@storybook/react'; import React, { useState } from 'react'; import MonthCalendar from './MonthCalendar'; -export default { +const meta: Meta = { title: 'Calendar', component: MonthCalendar, parameters: { sourceLink: 'Calendar/MonthCalendar.tsx', }, + argTypes: { + monthFormat: { + options: ['M', 'MM', 'MMM', 'MMMM'], + control: { + type: 'select', + }, + }, + yearFormat: { + options: ['YY', 'YYYY'], + control: { + type: 'select', + }, + }, + }, }; -export const MonthCalendarExample = () => { - const [date, setDate] = useState(new Date()); - return ( - { - setDate(e); - action('onSelect')(e); - }} - centerYearSelection={boolean('Center Year Selection', false)} - monthFormat={select('Month Format', ['M', 'MM', 'MMM', 'MMMM'], 'MMM')} - yearFormat={select('Year Format', ['YY', 'YYYY'], 'YYYY')} - /> - ); +export default meta; +type Story = StoryObj; + +export const MonthCalendarExample: Story = { + args: { + centerYearSelection: false, + monthFormat: 'MMM', + yearFormat: 'YYYY', + }, + render: function Render({ centerYearSelection, monthFormat, yearFormat }) { + const [date, setDate] = useState(new Date()); + return ( + { + setDate(e); + action('onSelect')(e); + }} + centerYearSelection={centerYearSelection} + monthFormat={monthFormat} + yearFormat={yearFormat} + /> + ); + }, }; diff --git a/src/components/Callout/Callout.stories.js b/src/components/Callout/Callout.stories.js index 18567188a..6aa4818b6 100644 --- a/src/components/Callout/Callout.stories.js +++ b/src/components/Callout/Callout.stories.js @@ -1,4 +1,3 @@ -import { select, text } from '@storybook/addon-knobs'; import React from 'react'; import { colors } from '../../tooling/colors'; import Callout from './Callout'; @@ -11,26 +10,35 @@ export default { }, }; -export const LiveExample = () => ( +export const LiveExample = ({ content, ...args }) => (
- +

Hello World

- {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.` - )} + {content}
); +LiveExample.args = { + color: Callout.defaultProps.color, + background: Callout.defaultProps.background, + placement: Callout.defaultProps.placement, + 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' }, + }, + background: { + options: [...colors], + control: { type: 'select' }, + }, + placement: { + options: ['top', 'right', 'bottom', 'left'], + control: { type: 'select' }, + }, +}; diff --git a/src/components/Card/Card.stories.js b/src/components/Card/Card.stories.js index bb2543d25..13c2ff2e0 100644 --- a/src/components/Card/Card.stories.js +++ b/src/components/Card/Card.stories.js @@ -1,4 +1,3 @@ -import { text, boolean } from '@storybook/addon-knobs'; import React from 'react'; import { colors } from '../../tooling/colors'; import Card from './Card'; @@ -15,30 +14,27 @@ export default { }, }; -export const LiveExample = () => { - const outline = boolean('outline', false); - const footer = text('footer', ''); - - return ( -
- - - {text('title', 'Hello World!')} - - - {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.` - )} - - {footer && {footer}} - -
- ); +export const LiveExample = ({ outline, footer, inverse, title, content }) => ( +
+ + + {title} + + {content} + {footer && {footer}} + +
+); +LiveExample.args = { + outline: false, + footer: '', + inverse: false, + title: 'Hello World!', + 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.`, }; export const Colors = () => ( @@ -55,28 +51,27 @@ export const Colors = () => (
); -export const Outline = () => { - const squareCorners = boolean('square corners', true); +export const Outline = ({ squareCorners }) => ( +
+ + + Default + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. + + - return ( -
- + {colors.map((color) => ( + - Default + {color} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - {colors.map((color) => ( - - - {color} - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. - - - ))} -
- ); + ))} +
+); +Outline.args = { + squareCorners: true, }; diff --git a/src/components/Carousel/ImageCarousel.stories.js b/src/components/Carousel/ImageCarousel.stories.js index 1a29bbdbb..f289180ee 100644 --- a/src/components/Carousel/ImageCarousel.stories.js +++ b/src/components/Carousel/ImageCarousel.stories.js @@ -1,4 +1,3 @@ -import { boolean, number } from '@storybook/addon-knobs'; import React from 'react'; import Jumbotron from '../Jumbotron/Jumbotron'; import ImageCarousel from './ImageCarousel'; @@ -40,16 +39,14 @@ export default { }, }; -export const DefaultProps = () => ( - -); +export const DefaultProps = (args) => ; +DefaultProps.args = { + autoPlay: ImageCarousel.defaultProps.autoPlay, + controls: true, + fade: ImageCarousel.defaultProps.fade, + slide: ImageCarousel.defaultProps.slide, + index: 0, + indicators: true, + interval: ImageCarousel.defaultProps.interval, + isOpen: true, +}; diff --git a/src/components/CollapsableText/CollapsableText.stories.js b/src/components/CollapsableText/CollapsableText.stories.js index 6a7fc165a..c9e4a51b2 100644 --- a/src/components/CollapsableText/CollapsableText.stories.js +++ b/src/components/CollapsableText/CollapsableText.stories.js @@ -1,5 +1,4 @@ /* eslint-disable jsx-a11y/anchor-is-valid */ -import { boolean, number, text, radios } from '@storybook/addon-knobs'; import React from 'react'; import Icon from '../Icon/Icon'; import CollapsableText from './CollapsableText'; @@ -19,29 +18,35 @@ export default { }, }; -export const LiveExample = () => ( - +export const LiveExample = (args) => ( + Some text with bold and links and other things
{loremIpsum} ); +LiveExample.args = { + collapsed: CollapsableText.defaultProps.collapsed, + maxLines: CollapsableText.defaultProps.maxLines, + moreLabel: CollapsableText.defaultProps.moreLabel, + lessLabel: CollapsableText.defaultProps.lessLabel, + alignToggleButton: CollapsableText.defaultProps.alignToggleButton, +}; +LiveExample.argTypes = { + alignToggleButton: { + options: ['start', 'center', 'end', 'auto'], + control: { type: 'radio' }, + }, +}; -export const ShorterThanMaxLines = () => ( +export const ShorterThanMaxLines = ({ maxLines }) => (
- Short text + Short text
); +ShorterThanMaxLines.args = { + maxLines: 2, +}; export const CustomComponents = () => (
diff --git a/src/components/Combobox/Combobox.stories.js b/src/components/Combobox/Combobox.stories.js index c51e96b5d..140c01c5d 100644 --- a/src/components/Combobox/Combobox.stories.js +++ b/src/components/Combobox/Combobox.stories.js @@ -1,4 +1,3 @@ -import { boolean, text, select } from '@storybook/addon-knobs'; import React, { useState } from 'react'; import Icon from '../Icon/Icon'; import Combobox from './Combobox'; @@ -67,159 +66,177 @@ const options = [ { label: 'Virgin Islands', value: 'VI' }, ]; -export default { +const meta = { title: 'Combobox', component: Combobox, parameters: { sourceLink: 'Combobox/Combobox.tsx', }, + argTypes: { + direction: { + control: { + type: 'select', + options: ['', 'down', 'up'], + }, + }, + }, }; -export const LiveExample = () => { - const [value, setValue] = useState(); - return ( - <> -
value: {value}
- - - ); +export default meta; + +export const LiveExample = { + args: { + direction: '', + disabled: Combobox.defaultProps.disabled, + noResultsLabel: Combobox.defaultProps.noResultsLabel, + placeholder: Combobox.defaultProps.placeholder, + inputClassName: '', + }, + render: function Render(args) { + const [value, setValue] = useState(); + return ( + <> +
value: {value}
+ + + ); + }, }; -export const Multi = () => { - const [value, setValue] = useState(); - return ( - - ); +export const Multi = { + args: { + direction: '', + disabled: Combobox.defaultProps.disabled, + noResultsLabel: Combobox.defaultProps.noResultsLabel, + placeholder: Combobox.defaultProps.placeholder, + inputClassName: '', + }, + render: function Render(args) { + const [value, setValue] = useState(); + return ; + }, }; -export const Grouped = () => { - const [value, setValue] = useState(); - return ( - - ); +export const Grouped = { + args: { + multi: false, + direction: '', + disabled: Combobox.defaultProps.disabled, + noResultsLabel: Combobox.defaultProps.noResultsLabel, + placeholder: Combobox.defaultProps.placeholder, + inputClassName: '', + }, + render: function Render(args) { + const [value, setValue] = useState(); + return ( + + ); + }, }; -export const CreatableOptions = () => { - const [value, setValue] = useState(); - const [opts, setOpts] = useState(options); +export const CreatableOptions = { + args: { + direction: '', + disabled: Combobox.defaultProps.disabled, + noResultsLabel: Combobox.defaultProps.noResultsLabel, + placeholder: Combobox.defaultProps.placeholder, + inputClassName: '', + }, + render: function Render(args) { + const [value, setValue] = useState(); + const [opts, setOpts] = useState(options); - const onCreate = (str) => { - const newOpt = { value: str, label: str }; - setOpts([...opts, newOpt]); + const onCreate = (str) => { + const newOpt = { value: str, label: str }; + setOpts([...opts, newOpt]); - return newOpt.value; - }; + return newOpt.value; + }; - return ( - - ); + return ( + + ); + }, }; -export const CustomOptions = () => { - const [value, setValue] = useState(); - const mixedOptions = [ - { - label: '71548561868 Super-duper long word like impossibly long Lane', - value: 'address-1', - type: 'address', - }, - { label: '439 Sunset Drive', value: 'address-2', disabled: true, type: 'address' }, - { label: '940 Penguin Ct', value: 'address-3', type: 'address' }, - { label: 'Ice Bear', value: 'tenant-1', type: 'tenant' }, - { label: 'Panda', value: 'tenant-2', type: 'tenant' }, - { label: '77 Snowball Blvd', value: 'address-4', type: 'address' }, - { label: 'Bob', value: 'tenant-3', type: 'tenant' }, - ]; - const renderOption = (option) => ( -
- - {option.label} -
- ); +export const CustomOptions = { + render: function Render() { + const [value, setValue] = useState(); + const mixedOptions = [ + { + label: '71548561868 Super-duper long word like impossibly long Lane', + value: 'address-1', + type: 'address', + }, + { label: '439 Sunset Drive', value: 'address-2', disabled: true, type: 'address' }, + { label: '940 Penguin Ct', value: 'address-3', type: 'address' }, + { label: 'Ice Bear', value: 'tenant-1', type: 'tenant' }, + { label: 'Panda', value: 'tenant-2', type: 'tenant' }, + { label: '77 Snowball Blvd', value: 'address-4', type: 'address' }, + { label: 'Bob', value: 'tenant-3', type: 'tenant' }, + ]; + const renderOption = (option) => ( +
+ + {option.label} +
+ ); - const renderInputValue = (option) => ( -
- {option.label} -
- ); + const renderInputValue = (option) => ( +
+ {option.label} +
+ ); - return ( - - ); -}; - -export const PortalElement = () => { - const [value, setValue] = useState(); - return ( - <> -
value: {value}
+ return ( - - ); + ); + }, +}; + +export const PortalElement = { + args: { + direction: '', + disabled: Combobox.defaultProps.disabled, + noResultsLabel: Combobox.defaultProps.noResultsLabel, + placeholder: Combobox.defaultProps.placeholder, + inputClassName: '', + }, + render: function Render(args) { + const [value, setValue] = useState(); + return ( + <> +
value: {value}
+ + + ); + }, }; diff --git a/src/components/Datapair/Datapair.stories.js b/src/components/Datapair/Datapair.stories.js index 814ebf313..350c447e1 100644 --- a/src/components/Datapair/Datapair.stories.js +++ b/src/components/Datapair/Datapair.stories.js @@ -1,4 +1,3 @@ -import { boolean, select, text } from '@storybook/addon-knobs'; import React from 'react'; import Badge from '../Badge/Badge'; import Button from '../Button/Button'; @@ -14,29 +13,34 @@ export default { }, }; -export const WithProps = () => { - const stacked = boolean('stacked', false); - const labelSize = select('labelSize', ['sm', 'md', 'lg'], 'md'); - return ( - - - - - - - ); +export const WithProps = ({ stacked, labelSize, label, value, feedback, hint }) => ( + + + + + + +); +WithProps.args = { + stacked: false, + labelSize: 'md', + label: 'Key', + value: 'Some simple content would go here', + feedback: undefined, + hint: '', +}; +WithProps.argTypes = { + labelSize: { + options: ['sm', 'md', 'lg'], + control: { type: 'select' }, + }, }; export const WithHTMLValue = () => ( diff --git a/src/components/Dropdown/Dropdown.stories.js b/src/components/Dropdown/Dropdown.stories.js index 4c10bf43e..d9aa96a93 100644 --- a/src/components/Dropdown/Dropdown.stories.js +++ b/src/components/Dropdown/Dropdown.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { boolean, select, text } from '@storybook/addon-knobs'; import React from 'react'; import { colors } from '../../tooling/colors'; import Dropdown from './Dropdown'; @@ -8,56 +7,77 @@ import DropdownMenu from './DropdownMenu'; import DropdownToggle from './DropdownToggle'; import UncontrolledDropdown from './UncontrolledDropdown'; -export default { +const meta = { title: 'Dropdown', component: Dropdown, parameters: { sourceLink: 'Dropdown/Dropdown.tsx', }, + argTypes: { + direction: { + options: ['', 'down', 'up', 'left', 'right'], + control: { type: 'select' }, + }, + color: { + options: colors, + control: { type: 'select' }, + }, + size: { + options: ['', 'sm', 'lg'], + control: { type: 'select' }, + }, + }, }; +export default meta; -export const Uncontrolled = () => ( - - - {text('text', 'Click Me')} - - - Action - Another Action - - Header - Disabled Action - - -); +export const Uncontrolled = { + args: { + direction: '', + color: 'primary', + disabled: false, + outline: false, + size: undefined, + text: 'Click Me', + }, + render: ({ direction, color, disabled, outline, size, text }) => ( + + + {text} + + + Action + Another Action + + Header + Disabled Action + + + ), +}; -export const Controlled = () => ( - - - {text('text', 'Click Me')} - - - Action - Another Action - - Header - Disabled Action - - -); +export const Controlled = { + args: { + direction: '', + isOpen: false, + toggle: action('toggle'), + color: 'primary', + disabled: false, + outline: false, + size: undefined, + text: 'Click Me', + }, + render: ({ direction, isOpen, toggle, color, disabled, outline, size, text }) => ( + + + {text} + + + Action + Another Action + + Header + Disabled Action + + + ), +}; diff --git a/src/components/ExpandableSection/ExpandableSection.stories.js b/src/components/ExpandableSection/ExpandableSection.stories.js index 1d776d841..b1ce04be5 100644 --- a/src/components/ExpandableSection/ExpandableSection.stories.js +++ b/src/components/ExpandableSection/ExpandableSection.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { boolean, text } from '@storybook/addon-knobs'; import React from 'react'; import Button from '../Button/Button'; import ExpandableSection from './ExpandableSection'; @@ -12,27 +11,29 @@ export default { }, }; -export const Default = () => ( - +export const Default = (args) => ( +

BOO!

 ); +Default.args = { + title: 'Click to expand me', + open: ExpandableSection.defaultProps.open, + onToggle: action('onToggle'), +}; -export const Open = () => ( - +export const Open = (args) => ( +

BOO!

 ); +Open.args = { + title: 'Expanded by default', + open: true, + onToggle: action('onToggle'), +}; -export const Header = () => ( +export const Header = (args) => ( @@ -47,9 +48,12 @@ export const Header = () => ( } - open={boolean('open', true)} - onToggle={action('onToggle')} + {...args} >

BOO!

 ); +Header.args = { + open: true, + onToggle: action('onToggle'), +}; diff --git a/src/components/FeatureBanner/FeatureBanner.stories.tsx b/src/components/FeatureBanner/FeatureBanner.stories.tsx index ddacc4b6a..ee88154c1 100644 --- a/src/components/FeatureBanner/FeatureBanner.stories.tsx +++ b/src/components/FeatureBanner/FeatureBanner.stories.tsx @@ -1,28 +1,42 @@ -import { select, text } from '@storybook/addon-knobs'; +import { Meta, StoryObj } from '@storybook/react'; import React from 'react'; import { colors } from '../../tooling/colors'; import Button from '../Button/Button'; import Icon from '../Icon/Icon'; import FeatureBanner from './FeatureBanner'; -export default { +const meta: Meta = { title: 'FeatureBanner', component: FeatureBanner, parameters: { sourceLink: 'FeatureBanner/FeatureBanner.tsx', }, + argTypes: { + color: { + options: colors, + control: { + type: 'select', + }, + }, + }, }; -export const LiveExample = () => ( - - - -); +export default meta; +type Story = StoryObj; + +export const LiveExample: Story = { + args: { + alertText: 'New', + color: 'info', + title: 'Company-Wide View of Text Messages', + subtitle: 'View all text messages sent by your company from this page.', + }, + render: (args) => ( + + + + ), +}; diff --git a/src/components/FeedbackButton/FeedbackButton.stories.tsx b/src/components/FeedbackButton/FeedbackButton.stories.tsx index 8513b303f..fdf5d408a 100644 --- a/src/components/FeedbackButton/FeedbackButton.stories.tsx +++ b/src/components/FeedbackButton/FeedbackButton.stories.tsx @@ -1,68 +1,78 @@ import { action } from '@storybook/addon-actions'; -import * as knobs from '@storybook/addon-knobs'; +import { Meta, StoryObj } from '@storybook/react'; import React from 'react'; import { buttonColors } from '../../tooling/colors'; import FeedbackButton from './FeedbackButton'; -export default { +const meta: Meta = { title: 'FeedbackButton', component: FeedbackButton, parameters: { sourceLink: 'FeedbackButton/FeedbackButton.tsx', }, + argTypes: { + color: { + options: buttonColors, + control: { + type: 'select', + }, + }, + size: { + options: ['lg', 'md', 'sm'], + control: { + type: 'inline-radio', + }, + }, + }, }; -export const Default = () => ( - { +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + backdrop: false, + className: '', + color: 'default', + disabled: false, + doSubmit: async () => { action('doSubmit'); - }} - feature={knobs.text('feature', 'default')} - modalTitle={knobs.text('modalTitle', 'Modal Title')} - outline={knobs.boolean('outline', false)} - recipient={knobs.text('recipient', 'my_team_name')} - /> -); + }, + feature: 'default', + modalTitle: 'Modal Title', + outline: false, + recipient: 'my_team_name', + }, + render: (args) => , +}; -export const AllProps = () => ( - { +export const AllProps: Story = { + args: { + backdrop: true, + block: true, + cancelButtonText: 'Cancel', + className: '', + color: 'default', + commentIncluded: false, + commentPlaceholder: 'Please give as much detail as you can. Thanks!', + commentRequired: false, + commentSubtitle: 'How could we improve the way this works for you?', + disabled: false, + doSubmit: async () => { action('doSubmit'); - }} - feature={knobs.text('feature', 'default')} - highRatingText={knobs.text('highRatingText', 'Very satisfied')} - lowRatingText={knobs.text('lowRatingText', 'Not satisfied at all')} - modalTitle={knobs.text('modalTitle', 'Give Feedback')} - outline={knobs.boolean('outline', false)} - pleaseWaitButtonText={knobs.text('pleaseWaitButtonText', 'Please Wait...')} - ratingIncluded={knobs.boolean('ratingIncluded', false)} - ratingRequired={knobs.boolean('ratingRequired', false)} - ratingSubtitle={knobs.text( - 'ratingSubtitle', - 'So far, how satisfied are you with this feature?' - )} - recipient={knobs.text('recipient', 'recipient@example.com')} - size={knobs.select('size', ['lg', 'md', 'sm'], 'md')} - submitButtonText={knobs.text('submitButtonText', 'Send')} - /> -); + }, + feature: 'default', + highRatingText: 'Very satisfied', + lowRatingText: 'Not satisfied at all', + modalTitle: 'Give Feedback', + outline: false, + pleaseWaitButtonText: 'Please Wait...', + ratingIncluded: false, + ratingRequired: false, + ratingSubtitle: 'So far, how satisfied are you with this feature?', + recipient: 'recipient@example.com', + size: 'md', + submitButtonText: 'Send', + }, + render: (args) => , +}; diff --git a/src/components/FilterList/FilterList.stories.js b/src/components/FilterList/FilterList.stories.js index 04b32473e..90f10ad0c 100644 --- a/src/components/FilterList/FilterList.stories.js +++ b/src/components/FilterList/FilterList.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { number } from '@storybook/addon-knobs'; import React from 'react'; import FilterList from './FilterList'; @@ -11,7 +10,7 @@ export default { }, }; -export const LiveExample = () => { +export const LiveExample = (args) => { const filters = [ { label: 'User', @@ -29,11 +28,11 @@ export const LiveExample = () => { ]; return (
- action('onRemove', filter)} - /> +
); }; +LiveExample.args = { + maxWidth: 14, + onRemove: action('onRemove'), +}; diff --git a/src/components/Form/Form.stories.js b/src/components/Form/Form.stories.js index ac2ebb679..be94a53c4 100644 --- a/src/components/Form/Form.stories.js +++ b/src/components/Form/Form.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { object } from '@storybook/addon-knobs'; import React from 'react'; import AddressInput from '../Address/AddressInput'; import CountryInput from '../Address/CountryInput'; @@ -147,12 +146,8 @@ export const FormRows = () => ( ); -export const Bound = () => ( - +export const Bound = (args) => ( + ( ); +Bound.args = { + errors: { lastName: 'Last Name is required' }, + onSubmit: action('submit'), +}; diff --git a/src/components/Form/FormLabelGroup.stories.js b/src/components/Form/FormLabelGroup.stories.js index cb8da287e..a8cb3ecba 100644 --- a/src/components/Form/FormLabelGroup.stories.js +++ b/src/components/Form/FormLabelGroup.stories.js @@ -1,4 +1,3 @@ -import { boolean, object, text, select } from '@storybook/addon-knobs'; import React from 'react'; import Alert from '../Alert/Alert'; import Input from '../Input/Input'; @@ -14,25 +13,34 @@ export default { }, }; -export const LiveExample = () => ( +export const LiveExample = (args) => (
- + Your content here
); +LiveExample.args = { + label: 'Some Input', + labelSize: 'md', + feedback: 'You must give a first name', + validFeedback: undefined, + hint: '', + width: {}, + required: false, + inline: false, + stacked: false, +}; +LiveExample.argTypes = { + labelSize: { + control: { + type: 'select', + options: ['sm', 'md', 'lg'], + }, + }, +}; export const RadioExample = () => ( diff --git a/src/components/Form/FormRow.stories.js b/src/components/Form/FormRow.stories.js index bf6db33ff..1105783ea 100644 --- a/src/components/Form/FormRow.stories.js +++ b/src/components/Form/FormRow.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { boolean, object, text, select } from '@storybook/addon-knobs'; import React, { useState } from 'react'; import FormChoice from './FormChoice'; import FormRow from './FormRow'; @@ -12,36 +11,49 @@ export default { }, }; -export const LiveExample = () => ( +export const LiveExample = (args) => (
- +
); +LiveExample.args = { + label: 'First Name', + labelSize: 'md', + feedback: 'You must give a first name', + validFeedback: undefined, + hint: '', + width: {}, + required: false, + inline: false, + onChange: action('onChange'), + stacked: false, + type: 'text', + value: '2', +}; +LiveExample.argTypes = { + labelSize: { + control: { + type: 'select', + options: ['sm', 'md', 'lg'], + }, + }, + type: { + control: { + type: 'select', + options: ['checkbox', 'number', 'password', 'radio', 'static', 'text'], + }, + }, +}; -export const WithSelect = () => { +export const WithSelect = (args) => { const [favorite, setFavorite] = useState('Bravo'); return ( setFavorite(e.target.value)} - stacked={boolean('stacked', false)} type="select" value={favorite} + {...args} > Alpha @@ -58,112 +70,85 @@ export const WithSelect = () => { ); }; +LiveExample.args = { + label: 'Favorite NATO Phonetic', + stacked: false, +}; -export const WithCheckboxes = () => { +export const WithCheckboxes = ({ label, stacked, inline }) => { const [favorites, setFavorites] = useState(['Bravo']); return ( setFavorites(selection)} type="checkbox" > - + Alpha - + Bravo - + Charlie - + Delta ); }; +WithCheckboxes.args = { + label: 'Favorite NATO Phonetics', + stacked: false, + inline: false, +}; -export const WithRadioButtons = () => { +export const WithRadioButtons = ({ label, stacked, inline }) => { const [favorite, setFavorite] = useState('Bravo'); return ( setFavorite(e.target.value)} - stacked={boolean('stacked', false)} + stacked={stacked} type="radio" > - + Alpha - + Bravo Charlie - + Delta ); }; +WithRadioButtons.args = { + label: 'Favorite NATO Phonetic', + stacked: false, + inline: false, +}; -export const ControlledValue = () => { +export const ControlledValue = (args) => { const [value, setValue] = React.useState(''); - return ( - setValue(e.target.value)} - stacked={boolean('stacked', false)} - type={text('type', 'text')} - value={value} - /> - ); + return setValue(e.target.value)} value={value} {...args} />; +}; +ControlledValue.args = { + label: 'Label', + stacked: false, + type: 'text', }; diff --git a/src/components/HasManyFields/HasManyFields.stories.js b/src/components/HasManyFields/HasManyFields.stories.js index c05b673f3..be82d4bcc 100644 --- a/src/components/HasManyFields/HasManyFields.stories.js +++ b/src/components/HasManyFields/HasManyFields.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { boolean, number, select, text } from '@storybook/addon-knobs'; import React from 'react'; import AddressInput from '../Address/AddressInput'; import Input from '../Input/Input'; @@ -42,7 +41,7 @@ export default { }, }; -export const LiveExample = () => ( +export const LiveExample = (args) => ( ( countryCode: 'US', }} label="Add an Address" - disabled={boolean('disabled', false)} - onAdd={action('hasManyFields onAdd')} - onRemove={action('hasManyFields onRemove')} - onUpdate={action('hasManyFields onUpdate')} - onChange={action('hasManyFields onChange')} - minimumRows={number('minimumRows', 1)} - maximumRows={number('maximumRows', 5)} - reorderable={boolean('reorderable', false)} + {...args} /> ); +LiveExample.args = { + disabled: false, + onAdd: action('hasManyFields onAdd'), + onRemove: action('hasManyFields onRemove'), + onUpdate: action('hasManyFields onUpdate'), + onChange: action('hasManyFields onChange'), + minimumRows: 1, + maximumRows: 5, + reorderable: false, +}; -export const RowWrapper = () => ( - +export const RowWrapper = (args) => ( + ); +RowWrapper.args = { + onDelete: action('onDelete'), + disabled: false, + disabledReason: undefined, + disabledReasonPlacement: 'top', +}; +RowWrapper.argTypes = { + disabledReasonPlacement: { + control: { + type: 'select', + options: ['top', 'left', 'bottom', 'right'], + }, + }, +}; export const AddItemButton = () => ( Button Label Content diff --git a/src/components/HelpBubble/HelpBubble.stories.js b/src/components/HelpBubble/HelpBubble.stories.js index 05ac105ea..8e2af25e7 100644 --- a/src/components/HelpBubble/HelpBubble.stories.js +++ b/src/components/HelpBubble/HelpBubble.stories.js @@ -1,4 +1,3 @@ -import { text, select } from '@storybook/addon-knobs'; import React from 'react'; import HelpBubble from './HelpBubble'; @@ -10,16 +9,12 @@ export default { }, }; -export const LiveExample = () => ( +export const LiveExample = ({ title, placement, content }) => (

I can be placed in context to provide some contextual help! - - {text('content', 'Help bubbles are a handy way of explaining things.')} + + {content}

@@ -30,3 +25,16 @@ export const LiveExample = () => (

); +LiveExample.args = { + title: 'What does this mean?', + placement: 'bottom', + content: 'Help bubbles are a handy way of explaining things.', +}; +LiveExample.argTypes = { + placement: { + control: { + type: 'select', + options: ['top', 'left', 'bottom', 'right'], + }, + }, +}; diff --git a/src/components/Highlight/Highlight.stories.js b/src/components/Highlight/Highlight.stories.js index b83842c34..2dc91e10d 100644 --- a/src/components/Highlight/Highlight.stories.js +++ b/src/components/Highlight/Highlight.stories.js @@ -1,4 +1,3 @@ -import { text, boolean } from '@storybook/addon-knobs'; import React from 'react'; import Highlight from './Highlight'; @@ -10,22 +9,16 @@ export default { }, }; -export const LiveExample = () => ( - - {text('children', 'The quick brown fox jumps over the lazy dog.')} - -); +export const LiveExample = ({ children, ...args }) => {children}; +LiveExample.args = { + caseSensitive: false, + ignoreSpecial: false, + pattern: 'dog', + children: 'The quick brown fox jumps over the lazy dog.', +}; -export const DOMNodesAsChildren = () => ( - +export const DOMNodesAsChildren = (args) => ( +
The quick brown fox jumps over the lazy dog.
Henlo, I am doge. Gib treatos pls. @@ -33,15 +26,21 @@ export const DOMNodesAsChildren = () => (
); +DOMNodesAsChildren.args = { + caseSensitive: false, + ignoreSpecial: false, + pattern: 'dog', +}; -export const UseRegexAsPattern = () => ( - +export const UseRegexAsPattern = (args) => ( +
The quick brown fox jumps over the lazy dog.
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
 ); +UseRegexAsPattern.args = { + caseSensitive: false, + ignoreSpecial: false, + escape: false, + pattern: '(fox)|(dog)', +}; diff --git a/src/components/Icon/Icon.stories.js b/src/components/Icon/Icon.stories.js index 443004682..316b9ee2b 100644 --- a/src/components/Icon/Icon.stories.js +++ b/src/components/Icon/Icon.stories.js @@ -1,4 +1,3 @@ -import { text, boolean, select } from '@storybook/addon-knobs'; import React from 'react'; import Button from '../Button/Button'; import Icon from './Icon'; @@ -15,40 +14,69 @@ export default { }; // React component for font awesome v6 -export const LiveExample = () => ( - -); +export const LiveExample = (args) => ; +LiveExample.args = { + name: 'motorcycle', + size: '4x', + spin: false, + pulse: false, + rotate: '', + flip: '', + border: false, + iconStyle: 'solid', +}; +LiveExample.argTypes = { + size: { + control: { + type: 'select', + options: ['', 'xs', 'sm', 'lg', '2x', '3x', '4x', '5x'], + }, + }, + rotate: { + control: { + type: 'radio', + options: ['', '90', '180', '270'], + }, + }, + flip: { + control: { + type: 'radio', + options: ['', 'horizontal', 'vertical'], + }, + }, + iconStyle: { + control: { + type: 'select', + options: ['regular', 'solid', 'thin', 'light', 'duotone', 'brands'], + }, + }, +}; -export const AvailableIcons = () => { - const size = select('size', ['', 'xs', 'sm', 'lg', '2x', '3x', '4x', '5x'], '4x'); - return ( -
- Hover over icon to view name: -
- {icons.map((name, i) => ( - - ))} -
- ); +export const AvailableIcons = ({ size }) => ( +
+ Hover over icon to view name: +
+ {icons.map((name, i) => ( + + ))} +
+); +AvailableIcons.args = { + size: '4x', +}; +AvailableIcons.argTypes = { + size: { + control: { + type: 'radio', + options: ['', 'xs', 'sm', 'lg', '2x', '3x', '4x', '5x'], + }, + }, }; export const InlineText = () => ( diff --git a/src/components/InfoBox/InfoBox.stories.js b/src/components/InfoBox/InfoBox.stories.js index 54cc6d90c..af7195ced 100644 --- a/src/components/InfoBox/InfoBox.stories.js +++ b/src/components/InfoBox/InfoBox.stories.js @@ -1,4 +1,3 @@ -import { boolean, select, text } from '@storybook/addon-knobs'; import React from 'react'; import { colors } from '../../tooling/colors'; import InfoBox from './InfoBox'; @@ -11,18 +10,28 @@ export default { }, }; -export const LiveExample = () => ( +export const LiveExample = ({ color, title, icon, vertical, children }) => (
(Background color added for contrast)
- - {text('children', 'Jenny, I got your number')} + + {children}
); +LiveExample.args = { + color: 'success', + title: '$86,753.09', + icon: 'check', + vertical: false, + children: 'Jenny, I got your number', +}; +LiveExample.argTypes = { + color: { + control: { + type: 'select', + options: colors, + }, + }, +}; diff --git a/src/components/Input/CreditCardNumber.stories.js b/src/components/Input/CreditCardNumber.stories.js index 511e78de1..0402b8c50 100644 --- a/src/components/Input/CreditCardNumber.stories.js +++ b/src/components/Input/CreditCardNumber.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { array } from '@storybook/addon-knobs'; import React from 'react'; import uncontrollable from 'uncontrollable'; import CreditCardNumber from './CreditCardNumber'; @@ -18,16 +17,8 @@ export default { }, }; -export const LiveExample = () => ( - -); +export const LiveExample = (args) => ; +LiveExample.args = { + onChange: action('onChange'), + types: ['visa', 'master-card', 'american-express', 'discover', 'diners-club', 'jcb'], +}; diff --git a/src/components/Input/CurrencyInput.stories.js b/src/components/Input/CurrencyInput.stories.js index 9dc0e83d1..a49991f09 100644 --- a/src/components/Input/CurrencyInput.stories.js +++ b/src/components/Input/CurrencyInput.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { boolean } from '@storybook/addon-knobs'; import React from 'react'; import CurrencyInput from './CurrencyInput'; @@ -11,16 +10,18 @@ export default { }, }; -export const Example = () => ( - -); +export const Example = (args) => ; +Example.args = { + onChange: action('onChange'), + allowDecimal: true, + allowNegative: true, + includeThousandsSeparator: true, + padZeros: true, +}; -export const RightAligned = () => ( - +export const RightAligned = (args) => ( + ); +RightAligned.args = { + onChange: action('onChange'), +}; diff --git a/src/components/Input/DateInput.stories.js b/src/components/Input/DateInput.stories.js index aabef8ea0..63c85c6ae 100644 --- a/src/components/Input/DateInput.stories.js +++ b/src/components/Input/DateInput.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { boolean, text } from '@storybook/addon-knobs'; import classNames from 'classnames'; import React from 'react'; import Calendar from '../Calendar/Calendar'; @@ -16,35 +15,36 @@ export default { }, }; -export const WithProps = () => ( +export const WithProps = (args) => (
- +
); +WithProps.args = { + dateFormat: DateInput.defaultProps.dateFormat, + showOnFocus: DateInput.defaultProps.showOnFocus, + direction: 'down', + disabled: DateInput.defaultProps.disabled, + readOnly: false, + onBlur: action('onBlur'), + onChange: action('onChange'), + onClose: action('onClose'), + positionFixed: false, +}; -export const WithId = () => ( +export const WithId = (args) => (
- +
); +WithId.args = { + dateFormat: DateInput.defaultProps.dateFormat, + showOnFocus: DateInput.defaultProps.showOnFocus, + disabled: DateInput.defaultProps.disabled, + onBlur: action('onBlur'), + onChange: action('onChange'), +}; export const UncontrolledDefaultValue = () => (
@@ -128,11 +128,15 @@ export const DateEnabled = () => (
); -export const CalendarDefault = () => ( +export const CalendarDefault = (args) => (
- +
); +CalendarDefault.args = { + dateFormat: 'D', + onSelect: action('onSelect'), +}; export const CalendarCustomDay = () => (
diff --git a/src/components/Input/MaskedInput.stories.js b/src/components/Input/MaskedInput.stories.js index 6cba12a0d..d0a4966d0 100644 --- a/src/components/Input/MaskedInput.stories.js +++ b/src/components/Input/MaskedInput.stories.js @@ -1,4 +1,3 @@ -import { boolean, text } from '@storybook/addon-knobs'; import React from 'react'; import MaskedInput from './MaskedInput'; @@ -10,13 +9,16 @@ export default { }, }; -export const PhoneNumber = () => ( +export const PhoneNumber = (args) => ( ); +PhoneNumber.args = { + placeholder: '(555) 495-3947', + guide: false, + placeholderChar: undefined, + keepCharPositions: false, + showMask: false, +}; diff --git a/src/components/Input/MonthInput.stories.js b/src/components/Input/MonthInput.stories.js index 4a491190e..a3ee04707 100644 --- a/src/components/Input/MonthInput.stories.js +++ b/src/components/Input/MonthInput.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { boolean, text } from '@storybook/addon-knobs'; import React from 'react'; import FormRow from '../Form/FormRow'; import Icon from '../Icon/Icon'; @@ -13,23 +12,21 @@ export default { }, }; -export const WithProps = () => ( +export const WithProps = (args) => (
- +
); +WithProps.args = { + centerYearSelection: MonthInput.defaultProps.centerYearSelection, + dateFormat: MonthInput.defaultProps.dateFormat, + monthFormat: MonthInput.defaultProps.monthFormat, + yearFormat: MonthInput.defaultProps.yearFormat, + showOnFocus: MonthInput.defaultProps.showOnFocus, + disabled: MonthInput.defaultProps.disabled, + onBlur: action('onBlur'), + onChange: action('onChange'), +}; export const DefaultValueUncontrolled = () => (
diff --git a/src/components/Input/PatternInput.stories.js b/src/components/Input/PatternInput.stories.js index ffe27af7b..5110ae9ef 100644 --- a/src/components/Input/PatternInput.stories.js +++ b/src/components/Input/PatternInput.stories.js @@ -1,4 +1,3 @@ -import { text, boolean } from '@storybook/addon-knobs'; import React, { useState } from 'react'; import PatternInput from './PatternInput'; @@ -10,15 +9,18 @@ export default { }, }; -export const LiveExample = () => { +export const LiveExample = ({ pattern, restrictInput }) => { const [value, setValue] = useState(''); - const pattern = text('pattern', '^\\d{0,3}(\\.\\d{0,2})?$'); return ( setValue(e.target.value)} /> ); }; +LiveExample.args = { + pattern: '^\\d{0,3}(\\.\\d{0,2})?$', + restrictInput: true, +}; diff --git a/src/components/Input/TimeInput.stories.js b/src/components/Input/TimeInput.stories.js index 00e5e7765..fb742fdee 100644 --- a/src/components/Input/TimeInput.stories.js +++ b/src/components/Input/TimeInput.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { boolean, number, text } from '@storybook/addon-knobs'; import React from 'react'; import FormRow from '../Form/FormRow'; import TimeInput from './TimeInput'; @@ -12,20 +11,21 @@ export default { }, }; -export const WithProps = () => ( +export const WithProps = (args) => (
- +
); +WithProps.args = { + allowOtherTimes: true, + disabled: false, + max: undefined, + min: undefined, + onChange: action('onChange'), + placeholder: TimeInput.defaultProps.placeholder, + step: TimeInput.defaultProps.step, + timeFormat: TimeInput.defaultProps.timeFormat, +}; export const DefaultValueUncontrolled = () => (
diff --git a/src/components/LabelBadge/LabelBadge.stories.js b/src/components/LabelBadge/LabelBadge.stories.js index f3d797a65..7dd1c6755 100644 --- a/src/components/LabelBadge/LabelBadge.stories.js +++ b/src/components/LabelBadge/LabelBadge.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { boolean, number, text } from '@storybook/addon-knobs'; import React from 'react'; import LabelBadge from './LabelBadge'; @@ -11,14 +10,15 @@ export default { }, }; -export const LiveExample = () => ( +export const LiveExample = (args) => (
- action('onRemove')} - /> +
); +LiveExample.args = { + label: 'User', + value: 'Mischa Lewis Norelle', + removable: true, + maxWidth: 20, + onRemove: action('onRemove'), +}; diff --git a/src/components/Layout/Layout.stories.js b/src/components/Layout/Layout.stories.js index 580a7e19b..025090ae9 100644 --- a/src/components/Layout/Layout.stories.js +++ b/src/components/Layout/Layout.stories.js @@ -1,4 +1,3 @@ -import { select } from '@storybook/addon-knobs'; import React from 'react'; import Col from './Col'; import Container from './Container'; @@ -152,17 +151,9 @@ export const Responsive = () => ( ); -export const Spacing = () => { - const margin = `m${select('margin sides', ['', 't', 'b', 'l', 'r', 'x', 'y'], '')}-${select( - 'margin amount', - [0, 1, 2, 3, 4, 5], - 3 - )}`; - const padding = `p${select('padding sides', ['', 't', 'b', 'l', 'r', 'x', 'y'], '')}-${select( - 'padding amount', - [0, 1, 2, 3, 4, 5], - 3 - )}`; +export const Spacing = ({ marginSide, marginAmount, paddingSide, paddingAmount }) => { + const margin = `m${marginSide}-${marginAmount}`; + const padding = `p${paddingSide}-${paddingAmount}`; return (

@@ -188,3 +179,27 @@ export const Spacing = () => {

); }; +Spacing.args = { + marginSide: '', + marginAmount: 3, + paddingSide: '', + paddingAmount: 3, +}; +Spacing.argsTypes = { + marginSide: { + options: ['', 't', 'b', 'l', 'r', 'x', 'y'], + control: { type: 'select' }, + }, + marginAmount: { + options: [0, 1, 2, 3, 4, 5], + control: { type: 'select' }, + }, + paddingSide: { + options: ['', 't', 'b', 'l', 'r', 'x', 'y'], + control: { type: 'select' }, + }, + paddingAmount: { + options: [0, 1, 2, 3, 4, 5], + control: { type: 'select' }, + }, +}; diff --git a/src/components/List/List.stories.js b/src/components/List/List.stories.js index 20e594624..f27f6e5a8 100755 --- a/src/components/List/List.stories.js +++ b/src/components/List/List.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { boolean, select, text, number } from '@storybook/addon-knobs'; import React, { useState, useEffect } from 'react'; import Label from '../Label/Label'; import List from './List'; @@ -41,18 +40,18 @@ const ItemRow = React.forwardRef(({ item }, ref) => (
)); -export const JustItems = () => ( - +export const JustItems = (args) => ( + {(item) => } ); +JustItems.args = { + height: '70vh', + striped: false, + flush: undefined, +}; -export const ScrollToItem = () => { +export const ScrollToItem = ({ scrollToId, ...args }) => { const itemRef = React.createRef(); useEffect(() => { @@ -60,92 +59,108 @@ export const ScrollToItem = () => { }); return ( - - {(item) => ( - - )} + + {(item) => } ); }; +ScrollToItem.args = { + height: '70vh', + striped: false, + flush: undefined, + scrollToId: 10, +}; -export const SaveScrollPositionBetweenPageLoads = () => ( - +export const SaveScrollPositionBetweenPageLoads = (args) => ( + {(item) => } ); +SaveScrollPositionBetweenPageLoads.args = { + height: '70vh', + scrollPositionKey: 'list-example', + striped: false, + flush: undefined, +}; -export const WithEverything = () => { +export const WithEverything = ({ onFilter, onSelect, onSort, ...args }) => { const [filter, setFilter] = useState(''); const [sort, setSort] = useState({ property: 'last', ascending: true }); return ( { - action('onFilter')(val); + onFilter(val); setFilter(val); }} - onSelect={action('onSelect')} + onSelect={onSelect} onSort={(sortVal) => { - action('onSort')(sortVal); + onSort(sortVal); setSort(sortVal); }} - select={select('select', ['', 'checkbox', 'radio', 'switch'], 'checkbox')} sort={sort} sortOptions={[ { label: 'First Name', value: 'first' }, { label: 'Last Name', value: 'last' }, { label: 'Address', value: 'address' }, ]} - striped={boolean('striped', false)} - flush={boolean('flush')} + {...args} > {(item) => } ); }; +WithEverything.args = { + height: '50vh', + select: 'checkbox', + striped: false, + flush: undefined, + onFilter: action('onFilter'), + onSelect: action('onSelect'), + onSort: action('onSort'), +}; +WithEverything.argTypes = { + select: { + control: { + type: 'select', + options: ['', 'checkbox', 'radio', 'switch'], + }, + }, +}; -export const WithFiltering = () => { +export const WithFiltering = ({ onFilter, ...args }) => { const [filter, setFilter] = useState(''); return ( { - action('onFilter')(val); + onFilter(val); setFilter(val); }} + {...args} > {(item) => } ); }; +WithFiltering.args = { + height: '50vh', + striped: false, + flush: undefined, + onFilter: action('onFilter'), +}; -export const WithSort = () => { +export const WithSort = ({ onSort, ...args }) => { const [sort, setSort] = useState({ property: 'last', ascending: true }); return ( { - action('onSort')(sortVal); + onSort(sortVal); setSort(sortVal); }} sort={sort} @@ -154,10 +169,15 @@ export const WithSort = () => { { label: 'Last Name', value: 'last' }, { label: 'Address', value: 'address' }, ]} - striped={boolean('striped', false)} - flush={boolean('flush')} + {...args} > {(item) => } ); }; +WithSort.args = { + height: '50vh', + striped: false, + flush: undefined, + onSort: action('onSort'), +}; diff --git a/src/components/List/ListGroup.stories.js b/src/components/List/ListGroup.stories.js index eefb48501..efef21756 100644 --- a/src/components/List/ListGroup.stories.js +++ b/src/components/List/ListGroup.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { boolean, select } from '@storybook/addon-knobs'; import React from 'react'; import { colors } from '../../tooling/colors'; import ListGroup from './ListGroup'; @@ -13,28 +12,41 @@ export default { }, }; -export const ListGroupExample = () => ( - +export const ListGroupExample = ({ onClick, ...args }) => ( + Alpha Bravo - + Charlie Delta (disabled) Echo ); +ListGroupExample.args = { + flush: false, + striped: false, + onClick: action('onClick'), +}; -export const ListGroupItemExample = () => ( - - - Button Action - +export const ListGroupItemExample = ({ flush, ...args }) => ( + + Button Action ); +ListGroupItemExample.args = { + flush: false, + active: false, + action: false, + color: undefined, + disabled: false, + onClick: action('onClick'), +}; +ListGroupItemExample.argTypes = { + color: { + control: { + type: 'select', + options: ['', ...colors], + }, + }, +}; diff --git a/src/components/List/SortableList.stories.js b/src/components/List/SortableList.stories.js index 3228997ab..e2d151b3e 100755 --- a/src/components/List/SortableList.stories.js +++ b/src/components/List/SortableList.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { boolean, select, text } from '@storybook/addon-knobs'; import React, { useState } from 'react'; import Alert from '../Alert/Alert'; import Button from '../Button/Button'; @@ -7,13 +6,22 @@ import Label from '../Label/Label'; import SortableList from './SortableList'; import data from './util/data'; -export default { +const meta = { title: 'SortableList', component: SortableList, parameters: { sourceLink: 'List/SortableList.tsx', }, + argTypes: { + select: { + control: { + type: 'select', + options: ['', 'checkbox', 'radio', 'switch'], + }, + }, + }, }; +export default meta; const currency = new Intl.NumberFormat('en-US', { style: 'currency', @@ -43,196 +51,225 @@ const ExpandoTwo = () => ( ); -export const WithEverything = () => ( - item.id % 2} - > - {(item) => ( -
-
-

- {item.first} {item.last} -

-

{item.address}

-
-
- {currency.format(item.fee)} - -
-
- {currency.format(item.fee)} - -
-
- )} - -); -export const WithExpandableRow = () => ( - - {(item) => ( -
-
-

- {item.first} {item.last} -

-

{item.address}

-
-
- )} - -); -export const WithSelection = () => ( - - {(item) => ( -
-
-

- {item.first} {item.last} -

-

{item.address}

-
-
- )} - -); -export const WithSort = () => ( - - {(item) => ( -
-
-

- {item.first} {item.last} -

-

{item.address}

-
-
- )} - -); -export const WithFiltering = () => ( - - {(item) => ( -
-
-

- {item.first} {item.last} -

-

{item.address}

+export const WithEverything = { + args: { + className: '', + filterPlaceholder: SortableList.defaultProps.filterPlaceholder, + flush: SortableList.defaultProps.flush, + height: '70vh', + scrollPositionKey: 'sortableList-example', + striped: false, + onSelect: action('onSelect'), + select: 'checkbox', + sortByLabel: SortableList.defaultProps.sortByLabel, + }, + render: (args) => ( + item.id % 2} + {...args} + > + {(item) => ( +
+
+

+ {item.first} {item.last} +

+

{item.address}

+
+
+ {currency.format(item.fee)} + +
+
+ {currency.format(item.fee)} + +
-
- {currency.format(item.fee)} - + )} + + ), +}; +export const WithExpandableRow = { + render: () => ( + + {(item) => ( +
+
+

+ {item.first} {item.last} +

+

{item.address}

+
-
- {currency.format(item.fee)} - + )} + + ), +}; +export const WithSelection = { + args: { + onSelect: action('onSelect'), + }, + render: (args) => ( + + {(item) => ( +
+
+

+ {item.first} {item.last} +

+

{item.address}

+
-
- )} - -); -export const WithCustomHeader = () => ( - Hey it's me, your custom header} - > - {(item) => ( -
-
-

- {item.first} {item.last} -

-

{item.address}

+ )} + + ), +}; +export const WithSort = { + render: () => ( + + {(item) => ( +
+
+

+ {item.first} {item.last} +

+

{item.address}

+
-
- {currency.format(item.fee)} - + )} + + ), +}; +export const WithFiltering = { + render: () => ( + + {(item) => ( +
+
+

+ {item.first} {item.last} +

+

{item.address}

+
+
+ {currency.format(item.fee)} + +
+
+ {currency.format(item.fee)} + +
-
- {currency.format(item.fee)} - + )} + + ), +}; +export const WithCustomHeader = { + args: { + onSelect: action('onSelect'), + }, + render: (args) => ( + Hey it's me, your custom header} + {...args} + > + {(item) => ( +
+
+

+ {item.first} {item.last} +

+

{item.address}

+
+
+ {currency.format(item.fee)} + +
+
+ {currency.format(item.fee)} + +
-
- )} - -); -export const Areas = () => ( - - {() => Item area} - -); -export const WithOptionalExpand = () => ( - (item.id % 2 === 0 ? ExpandoTwo() : undefined)} - onSelect={action('onSelect')} - select={select('select', ['checkbox', 'radio', 'switch'], 'checkbox')} - > - {(item) => (item.id % 2 === 0 ? 'Expand Me' : "I can't be expanded...")} - -); -export const WithControlledSelection = () => { - const [selection, setSelection] = useState(data.slice(1, 5)); - return ( - <> - - {(item) => ( -

- {item.first} {item.last} -

- )} - + )} + + ), +}; +export const Areas = { + args: { + height: '70vh', + onSelect: action('onSelect'), + select: 'checkbox', + }, + render: (args) => ( + + {() => Item area} + + ), +}; +export const WithOptionalExpand = { + args: { + select: 'checkbox', + onSelect: action('onSelect'), + }, + render: (args) => ( + (item.id % 2 === 0 ? ExpandoTwo() : undefined)} + {...args} + > + {(item) => (item.id % 2 === 0 ? 'Expand Me' : "I can't be expanded...")} + + ), +}; +export const WithControlledSelection = { + render: function Render() { + const [selection, setSelection] = useState(data.slice(1, 5)); + return ( + <> + + {(item) => ( +

+ {item.first} {item.last} +

+ )} + -

Current selection:

- 
-        {JSON.stringify(
-          selection.map((item) => `${item.first} ${item.last}`),
-          null,
-          '  '
-        )}
-
- - - ); +

Current selection:

+ 
+          {JSON.stringify(
+            selection.map((item) => `${item.first} ${item.last}`),
+            null,
+            '  '
+          )}
+
+ + + ); + }, }; diff --git a/src/components/Modal/Modal.stories.js b/src/components/Modal/Modal.stories.js index 9a4c17fd2..589e1d022 100644 --- a/src/components/Modal/Modal.stories.js +++ b/src/components/Modal/Modal.stories.js @@ -1,4 +1,3 @@ -import { boolean, select } from '@storybook/addon-knobs'; import React from 'react'; import Button from '../Button/Button'; import ButtonToolbar from '../Button/ButtonToolbar'; @@ -8,55 +7,75 @@ import ModalBody from './ModalBody'; import ModalFooter from './ModalFooter'; import ModalHeader from './ModalHeader'; -export default { +const meta = { title: 'Modal', component: Modal, parameters: { sourceLink: 'Modal/Modal.js', }, + argTypes: { + fullscreen: { + control: { + type: 'select', + options: [null, true, 'sm', 'md', 'lg', 'xl', 'xxl'], + }, + }, + size: { + control: { + type: 'radio', + options: [null, 'sm', 'lg', 'xl'], + }, + }, + }, }; +export default meta; -export const LiveExample = () => ( - - {}}>Modal title - - Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat - non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - - - - - -); +export const LiveExample = { + args: { + isOpen: true, + backdrop: true, + fade: false, + fullscreen: null, + size: null, + }, + render: (args) => ( + + {}}>Modal title + + Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + + + + + + + + + ), +}; -export const Autofocus = () => ( - - {}}>Modal title - - This input should have focus: - - - - - - - - -); +export const Autofocus = { + args: { + isOpen: true, + backdrop: true, + size: null, + }, + render: (args) => ( + + {}}>Modal title + + This input should have focus: + + + + + + + + + ), +}; diff --git a/src/components/MultiSelectCombobox/MultiSelectCombobox.stories.tsx b/src/components/MultiSelectCombobox/MultiSelectCombobox.stories.tsx index e2f32dc75..1c8e620a3 100644 --- a/src/components/MultiSelectCombobox/MultiSelectCombobox.stories.tsx +++ b/src/components/MultiSelectCombobox/MultiSelectCombobox.stories.tsx @@ -1,6 +1,5 @@ import { action } from '@storybook/addon-actions'; -import { boolean, text } from '@storybook/addon-knobs'; -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; import React from 'react'; import { states } from '../../tooling/comboboxData'; import DropdownItem from '../Dropdown/DropdownItem'; @@ -14,15 +13,16 @@ import ComboboxSelections from './ComboboxSelections'; import FilteredComboboxItems from './FilteredComboboxItems'; import MultiSelectCombobox from './MultiSelectCombobox'; -type ComboboxStory = ComponentStory; - -export default { +const meta: Meta = { title: ' Multi-Select Combobox', component: MultiSelectCombobox, parameters: { sourceLink: 'MultiSelectCombobox/MultiSelectCombobox.tsx', }, -} as ComponentMeta; +}; +export default meta; + +type Story = StoryObj; const options = [ { label: 'Foo', value: 'foo', id: 1 }, @@ -37,91 +37,134 @@ const selections = [ { label: 'Lemur', value: 'lemur', id: 200 }, ]; -export const UncontrolledMode: ComboboxStory = () => ( - { - action('onCreateOption')(); - return { label: newOptionLabel, value: newOptionLabel.toLowerCase() }; - }} - closeOnSelect={boolean('closeOnSelect', true)} - /> -); +export const UncontrolledMode: Story = { + args: { + onChange: action('onChange'), + filterOptions: true, + allowCreation: false, + closeOnSelect: true, + }, + render: (args) => ( + { + action('onCreateOption')(); + return { label: newOptionLabel, value: newOptionLabel.toLowerCase() }; + }} + {...args} + /> + ), +}; -export const LongOptionLabels: ComboboxStory = () => ( - -); +export const LongOptionLabels: Story = { + args: { + onChange: action('onChange'), + }, + render: (args) => ( + + ), +}; -export const ControlledModeSimple: ComboboxStory = () => ( - - - {selections.map((selection) => ( - - {selection.label} - - ))} - - - {options.map((option) => ( - - {option.label} - - ))} - - -); +export const ControlledModeSimple: Story = { + args: { + isOpen: false, + onToggle: action('onToggle'), + }, + render: (args) => ( + + + {selections.map((selection) => ( + + {selection.label} + + ))} + + + {options.map((option) => ( + + {option.label} + + ))} + + + ), +}; -export const ControlledModeWithFilter: ComboboxStory = () => ( +// * Can't convert to CSF3 (https://storybook.js.org/docs/api/csf) because of the +// composite nature of this story. Would need to refactor subcomponents into +// separate stories (https://storybook.js.org/docs/writing-stories/stories-for-multiple-components) +const controlledModeWithFilterArgs = { + isOpen: false, + onToggle: action('onToggle'), + allowCreationMultiSelectCombobox: false, + onRemoveAll: action('onRemoveAll'), + onRemove: action('onRemoveClick (selection)'), + filterValue: '', + onFilterChange: action('onFilterChange'), + allowCreationFilteredComboboxItems: true, + onCreateClick: action('onCreateClick'), + onClick: action('onClick (item)'), +}; +export const ControlledModeWithFilter = ({ + isOpen, + onToggle, + allowCreationMultiSelectCombobox, + onRemoveAll, + onRemove, + filterValue, + onFilterChange, + allowCreationFilteredComboboxItems, + onCreateClick, + onClick, +}: typeof controlledModeWithFilterArgs) => ( - + {selections.map((selection) => ( - + {selection.label} ))} {options.map((option) => ( - + {option.label} ))} ); +ControlledModeWithFilter.args = controlledModeWithFilterArgs; const MyCustomItem: ItemComponent = ({ children, onClick }: ComboboxItemProps) => ( @@ -130,10 +173,12 @@ const MyCustomItem: ItemComponent = ({ children, onClick }: ComboboxItemProps) = ); -export const CustomItemRendering: ComboboxStory = () => ( - -); +export const CustomItemRendering: Story = { + render: () => ( + + ), +}; diff --git a/src/components/Nav/Nav.stories.js b/src/components/Nav/Nav.stories.js index 45fbb9f6e..5876e891a 100644 --- a/src/components/Nav/Nav.stories.js +++ b/src/components/Nav/Nav.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { number, boolean } from '@storybook/addon-knobs'; import React from 'react'; import Nav from './Nav'; import NavItem from './NavItem'; @@ -13,116 +12,118 @@ export default { }, }; -export const Tabs = () => { - const activeTab = number('activeTab', 1); - return ( -
- -
- ); +export const Tabs = ({ activeTab, onClick, fill, justified }) => ( +
+ +
+); +Tabs.args = { + activeTab: 1, + fill: undefined, + justified: undefined, + onClick: action('onClick'), }; -export const Pills = () => { - const activeTab = number('activeTab', 1); - return ( -
- -
- ); +export const Pills = ({ activeTab, onClick, fill, justified, vertical }) => ( +
+ +
+); +Pills.args = { + activeTab: 1, + fill: undefined, + justified: undefined, + vertical: false, + onClick: action('onClick'), }; -export const Default = () => { - const activeTab = number('activeTab', 1); - return ( -
- -
- ); +export const Default = ({ activeTab, onClick, fill, justified, vertical }) => ( +
+ +
+); +Default.args = { + activeTab: 1, + vertical: false, + fill: undefined, + justified: undefined, + onClick: action('onClick'), }; diff --git a/src/components/Nav/Navbar.stories.js b/src/components/Nav/Navbar.stories.js index c2ef4ef85..d2df9e1f5 100644 --- a/src/components/Nav/Navbar.stories.js +++ b/src/components/Nav/Navbar.stories.js @@ -1,4 +1,3 @@ -import { boolean, select } from '@storybook/addon-knobs'; import React, { useState } from 'react'; import { bgColors } from '../../tooling/colors'; import Collapse from '../Collapse/Collapse'; @@ -21,19 +20,12 @@ export default { }, }; -export const LiveExample = () => { +export const LiveExample = (args) => { const [isOpen, setIsOpen] = useState(false); - const fixed = select('fixed', ['', 'top', 'bottom'], undefined); return (
- + react-gears setIsOpen(!isOpen)} /> @@ -44,7 +36,7 @@ export const LiveExample = () => { GitHub - + Options @@ -61,3 +53,23 @@ export const LiveExample = () => {
); }; +LiveExample.args = { + fixed: undefined, + light: false, + dark: true, + color: 'primary', +}; +LiveExample.argTypes = { + fixed: { + control: { + type: 'select', + options: ['', 'top', 'bottom'], + }, + }, + color: { + control: { + type: 'select', + options: bgColors, + }, + }, +}; diff --git a/src/components/Note/Note.stories.js b/src/components/Note/Note.stories.js index a3bd1af98..d0d570a8f 100644 --- a/src/components/Note/Note.stories.js +++ b/src/components/Note/Note.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { boolean, number, text } from '@storybook/addon-knobs'; import React, { useState } from 'react'; import EditableNote from './EditableNote'; import EditableNoteMentions from './EditableNoteMentions'; @@ -20,98 +19,104 @@ export default { }, }; -export const LiveExample = () => { +export const LiveExample = ({ deleted, edited, editing, from, text, title, ...args }) => { const note = { date: new Date(), - deleted: boolean('deleted', false), - edited: boolean('edited', false), - editing: boolean('editing', false), - from: text('from', 'Gary Thomas'), - text: text('text', 'Goodbye Cruel World'), - title: text('title', ''), + deleted, + edited, + editing, + from, + text, + title, }; - return ( - - ); + return ; +}; +LiveExample.args = { + deleted: false, + edited: false, + editing: false, + from: 'Gary Thomas', + text: 'Goodbye Cruel World', + title: '', + dateFormat: Note.defaultProps.dateFormat, + onCancel: action('onCancel'), + onChange: action('onChange'), + onDelete: action('onDelete'), + onEdit: action('onEdit'), + onSave: action('onSave'), + onUndelete: action('onUndelete'), + rows: Note.defaultProps.rows, + saving: undefined, + saveLabel: EditableNote.defaultProps.saveLabel, + savingLabel: EditableNote.defaultProps.savingLabel, }; -export const WithChildren = () => { +export const WithChildren = ({ deleted, edited, editing, from, text, ...args }) => { const note = { date: new Date(), - deleted: boolean('deleted', false), - edited: boolean('edited', false), - editing: boolean('editing', false), - from: text('from', 'Aaron Panchal'), - text: text('text', 'Everybody wants to rule the world.'), + deleted, + edited, + editing, + from, + text, }; return ( - + Sample ); }; +WithChildren.args = { + deleted: false, + edited: false, + editing: false, + from: 'Aaron Panchal', + text: 'Everybody wants to rule the world.', + onCancel: action('onCancel'), + onChange: action('onChange'), + onDelete: action('onDelete'), + onEdit: action('onEdit'), + onSave: action('onSave'), + onUndelete: action('onUndelete'), + rows: Note.defaultProps.rows, + saving: undefined, +}; -export const EditableNoteExample = () => { - const withNote = boolean('with note', true); +export const EditableNoteExample = ({ withNote, ...args }) => { const note = withNote ? noteToEdit : { text: '' }; - return ( - - ); + return ; +}; +EditableNoteExample.args = { + withNote: true, + onCancel: action('onCancel'), + onChange: action('onChange'), + onSave: action('onSave'), + saving: false, }; -export const EditableNoteWithChildren = () => { - const withNote = boolean('with note', true); - const saving = boolean('saving', false); +export const EditableNoteWithChildren = ({ withNote, ...args }) => { const note = withNote ? noteToEdit : { text: '' }; return ( - + Add an attachment: -
); }; +EditableNoteWithChildren.args = { + withNote: true, + saving: false, + onCancel: action('onCancel'), + onChange: action('onChange'), + onSave: action('onSave'), +}; const mentionableUsers = [ { @@ -136,34 +141,37 @@ const mentionableUsers = [ }, ]; -export const NoteWithMentions = () => { +export const NoteWithMentions = ({ deleted, edited, editing, from, text, title, ...args }) => { const noteWithMentions = { date: new Date(), - deleted: boolean('deleted', false), - edited: boolean('edited', false), - editing: boolean('editing', false), - from: text('from', 'Tom Brady'), - text: text('text', 'Hi @Satoshi.Nakamoto Who are you??? I lost all my crypto.'), - title: text('title', ''), + deleted, + edited, + editing, + from, + text, + title, }; - return ( - - ); + return ; +}; +NoteWithMentions.args = { + deleted: false, + edited: false, + editing: false, + from: 'Tom Brady', + text: 'Hi @Satoshi.Nakamoto Who are you??? I lost all my crypto.', + title: '', + onCancel: action('onCancel'), + onChange: action('onChange'), + onDelete: action('onDelete'), + onEdit: action('onEdit'), + onSave: action('onSave'), + onUndelete: action('onUndelete'), + rows: Note.defaultProps.rows, + saving: undefined, }; -export const EditableNoteWithMentions = () => { +export const EditableNoteWithMentions = (args) => { const [note, setNote] = useState({ date: new Date(), from: 'Tom Brady', @@ -178,16 +186,19 @@ export const EditableNoteWithMentions = () => { ); }; +EditableNoteWithMentions.args = { + onCancel: action('onCancel'), + onSave: action('onSave'), + saving: false, +}; -export const EditableNoteWithMentionsEditNotificationAlert = () => { +export const EditableNoteWithMentionsEditNotificationAlert = (args) => { const [note, setNote] = useState({ date: new Date(), from: 'Tom Brady', @@ -202,11 +213,14 @@ export const EditableNoteWithMentionsEditNotificationAlert = () => { ); }; +EditableNoteWithMentionsEditNotificationAlert.args = { + onCancel: action('onCancel'), + onSave: action('onSave'), + saving: false, +}; diff --git a/src/components/Note/Notes.stories.js b/src/components/Note/Notes.stories.js index 7e3614f58..c599f2a71 100644 --- a/src/components/Note/Notes.stories.js +++ b/src/components/Note/Notes.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { boolean } from '@storybook/addon-knobs'; import React from 'react'; import Note from './Note'; import Notes from './Notes'; @@ -27,42 +26,44 @@ export default { }, }; -export const WithNotesProp = () => { +export const WithNotesProp = ({ deleted, edited, editing, saving, ...args }) => { const notes = [ { id: 0, date: new Date(), - deleted: boolean('deleted', false), - edited: boolean('edited', false), - editing: boolean('editing', false), - saving: boolean('saving', false), + deleted, + edited, + editing, + saving, from: 'Gary Thomas', text: 'Hello World', }, ...moreNotes, ]; - return ( - - ); + return ; +}; +WithNotesProp.args = { + deleted: false, + edited: false, + editing: false, + saving: false, + onCancel: action('onCancel'), + onChange: action('onChange'), + onDelete: action('onDelete'), + onEdit: action('onEdit'), + onSave: action('onSave'), + onUndelete: action('onUndelete'), }; -export const WithChildren = () => { +export const WithChildren = ({ deleted, edited, editing, saving, ...args }) => { const notes = [ { date: new Date(), - deleted: boolean('deleted', false), - edited: boolean('edited', false), - editing: boolean('editing', false), - saving: boolean('saving', false), + deleted, + edited, + editing, + saving, from: 'Gary Thomas', text: 'Hello World', }, @@ -72,17 +73,20 @@ export const WithChildren = () => { return ( {notes.map((note) => ( - + ))} ); }; +WithChildren.args = { + deleted: false, + edited: false, + editing: false, + saving: false, + onCancel: action('onCancel'), + onChange: action('onChange'), + onDelete: action('onDelete'), + onEdit: action('onEdit'), + onSave: action('onSave'), + onUndelete: action('onUndelete'), +}; diff --git a/src/components/Offcanvas/Offcanvas.stories.js b/src/components/Offcanvas/Offcanvas.stories.js index 371e82079..e1135a935 100644 --- a/src/components/Offcanvas/Offcanvas.stories.js +++ b/src/components/Offcanvas/Offcanvas.stories.js @@ -1,4 +1,3 @@ -import { boolean, select } from '@storybook/addon-knobs'; import React, { useState } from 'react'; import { Offcanvas, OffcanvasBody, OffcanvasHeader, Button } from 'reactstrap'; @@ -11,7 +10,7 @@ export default { }, }; -export const Example = () => { +export const Example = (args) => { const [open, setOpen] = useState(); const toggle = () => setOpen(!open); @@ -25,14 +24,7 @@ export const Example = () => { > Open - + Offcanvas This is the Offcanvas body. @@ -41,3 +33,17 @@ export const Example = () => {
); }; +Example.args = { + backdrop: true, + fade: true, + scrollable: false, + direction: 'start', +}; +Example.argTypes = { + direction: { + control: { + type: 'select', + options: ['top', 'start', 'end', 'bottom'], + }, + }, +}; diff --git a/src/components/Pagination/Pagination.stories.js b/src/components/Pagination/Pagination.stories.js index 4b8abfe33..739e8aa05 100644 --- a/src/components/Pagination/Pagination.stories.js +++ b/src/components/Pagination/Pagination.stories.js @@ -1,4 +1,3 @@ -import { select } from '@storybook/addon-knobs'; import React from 'react'; import Pagination from './Pagination'; import PaginationItem from './PaginationItem'; @@ -12,8 +11,8 @@ export default { }, }; -export const LiveExample = () => ( - +export const LiveExample = (args) => ( + @@ -46,3 +45,14 @@ export const LiveExample = () => ( ); +LiveExample.args = { + size: undefined, +}; +LiveExample.argTypes = { + size: { + control: { + type: 'select', + options: ['', 'sm', 'lg'], + }, + }, +}; diff --git a/src/components/Pagination/Paginator.stories.js b/src/components/Pagination/Paginator.stories.js index d66e430ff..9fc5f1bbc 100644 --- a/src/components/Pagination/Paginator.stories.js +++ b/src/components/Pagination/Paginator.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { number, select, text } from '@storybook/addon-knobs'; import React from 'react'; import Paginator from './Paginator'; @@ -11,13 +10,20 @@ export default { }, }; -export const PaginatorExample = () => ( - -); +export const PaginatorExample = (args) => ; +PaginatorExample.args = { + currentPage: 1, + onClick: action('onClick'), + perPage: 20, + size: '', + summary: undefined, +}; +PaginatorExample.argTypes = { + currentPage: { + control: { + type: 'number', + min: 1, + max: 19, + }, + }, +}; diff --git a/src/components/Placeholder/Placeholder.stories.js b/src/components/Placeholder/Placeholder.stories.js index 42693346d..69db12ef9 100644 --- a/src/components/Placeholder/Placeholder.stories.js +++ b/src/components/Placeholder/Placeholder.stories.js @@ -1,71 +1,102 @@ -import { number, select } from '@storybook/addon-knobs'; import React from 'react'; import { colors } from '../../tooling/colors'; import Placeholder from './Placeholder'; -export default { +const meta = { title: 'Placeholder', component: Placeholder, parameters: { sourceLink: 'Placeholder/Placeholder.tsx', }, + argTypes: { + color: { + control: { + type: 'select', + options: ['', ...colors], + }, + }, + size: { + control: { + type: 'select', + options: ['', 'xs', 'sm', 'lg'], + }, + }, + type: { + control: { + type: 'select', + options: ['', 'glow', 'wave'], + }, + }, + }, }; +export default meta; -export const LiveExample = () => ( - -); +export const LiveExample = { + args: { + color: undefined, + size: undefined, + type: 'glow', + words: 1, + }, +}; -export const Words = () => ( -
- - - - - -
-); +export const Words = { + render: () => ( +
+ + + + + +
+ ), +}; -export const Widths = () => ( -
- 100: - 75: - 50: - 25: -

Min width:

- 100: - 75: - 50: - 25: -
-); +export const Widths = { + render: () => ( +
+ 100: + 75: + 50: + 25: +

Min width:

+ 100: + 75: + 50: + 25: +
+ ), +}; -export const Sizes = () => ( -
- xs: - - sm: - - default: - - lg: - -
-); +export const Sizes = { + args: { + type: 'glow', + }, + render: (args) => ( +
+ xs: + + sm: + + default: + + lg: + +
+ ), +}; -export const Colors = () => - colors.map((color) => ( - <> - {color}: - - - )); +export const Colors = { + args: { + size: undefined, + type: 'glow', + words: 4, + }, + render: (args) => + colors.map((color) => ( + <> + {color}: + + + )), +}; diff --git a/src/components/Popover/Popover.stories.js b/src/components/Popover/Popover.stories.js index 7f3f52d4c..c1169b693 100644 --- a/src/components/Popover/Popover.stories.js +++ b/src/components/Popover/Popover.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { select } from '@storybook/addon-knobs'; import React, { useState } from 'react'; import Button from '../Button/Button'; import Popover from './Popover'; @@ -7,91 +6,120 @@ import PopoverBody from './PopoverBody'; import PopoverHeader from './PopoverHeader'; import UncontrolledPopover from './UncontrolledPopover'; -export default { +const meta = { title: 'Popover', component: Popover, parameters: { sourceLink: 'Popover/Popover.tsx', }, + argTypes: { + trigger: { + control: { + type: 'select', + options: ['click', 'hover', 'focus'], + }, + }, + placement: { + control: { + type: 'select', + options: ['top', 'bottom', 'left', 'right'], + }, + }, + }, }; +export default meta; -export const LiveExample = () => { - const [open, setOpen] = useState(false); +export const LiveExample = { + args: { + trigger: 'click', + placement: 'bottom', + toggle: action('toggle'), + }, + render: function Render({ toggle, ...args }) { + const [open, setOpen] = useState(false); - return ( - <> -

- Click HERE to launch it! -

- { - setOpen(!open); - action('toggle')(e); - }} - placement={select('placement', ['top', 'bottom', 'left', 'right'], 'bottom')} - > - Title of the Popover - - You can do many things -
    -
  • Add a popover body
    • -
  • Add a popover header
    • -
  • Control the popover state externally
    • -
- ...or put in any components you wish. - - - - ); + return ( + <> +

+ Click HERE to launch it! +

+ { + setOpen(!open); + toggle(e); + }} + {...args} + > + Title of the Popover + + You can do many things +
    +
  • Add a popover body
    • +
  • Add a popover header
    • +
  • Control the popover state externally
    • +
+ ...or put in any components you wish. + + + + ); + }, }; -export const CustomizedBody = () => { - const [open, setOpen] = useState(false); +export const CustomizedBody = { + args: { + trigger: 'click', + placement: 'bottom', + toggle: action('toggle'), + }, + render: function Render({ toggle, ...args }) { + const [open, setOpen] = useState(false); + + return ( +
+

+ I can be placed in context to provide some contextual{' '} + help! +

+ { + setOpen(!open); + toggle(e); + }} + {...args} + > + +
+
+
You can do whatever you want in the body
+
+ + *the button does not do anything +
+ + +
+ ); + }, +}; - return ( +export const UncontrolledExample = { + render: () => (
-

- I can be placed in context to provide some contextual{' '} - help! -

- { - setOpen(!open); - action('toggle')(e); - }} - placement={select('placement', ['top', 'bottom', 'left', 'right'], 'bottom')} - > + + + Popover Title -
-
-
You can do whatever you want in the body
-
- - *the button does not do anything -
+ Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem + lacinia quam venenatis vestibulum. - +
- ); + ), }; - -export const UncontrolledExample = () => ( -
- - - Popover Title - - Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia - quam venenatis vestibulum. - - -
-); diff --git a/src/components/Progress/Progress.stories.js b/src/components/Progress/Progress.stories.js index dc9d5cf0b..a3ca37e99 100644 --- a/src/components/Progress/Progress.stories.js +++ b/src/components/Progress/Progress.stories.js @@ -1,4 +1,3 @@ -import { boolean, number, select } from '@storybook/addon-knobs'; import React from 'react'; import Progress from './Progress'; @@ -10,15 +9,25 @@ export default { }, }; -export const LiveExample = () => ( - ; +LiveExample.args = { + color: '', + animated: true, + value: 50, +}; +LiveExample.argTypes = { + color: { + control: { + type: 'select', + options: ['', 'info', 'success', 'warning', 'danger'], + }, + }, + value: { + control: { + type: 'range', min: 0, max: 100, step: 1, - })} - /> -); + }, + }, +}; diff --git a/src/components/ScrollContainer/ScrollContainer.stories.js b/src/components/ScrollContainer/ScrollContainer.stories.js index 655221cc8..926310edd 100644 --- a/src/components/ScrollContainer/ScrollContainer.stories.js +++ b/src/components/ScrollContainer/ScrollContainer.stories.js @@ -1,18 +1,25 @@ -import { number, text } from '@storybook/addon-knobs'; import React from 'react'; import ScrollContainer from './ScrollContainer'; -export default { +const meta = { title: 'ScrollContainer', component: ScrollContainer, parameters: { sourceLink: 'ScrollContainer/ScrollContainer.tsx', }, + argTypes: { + height: { + control: { + type: 'number', + }, + }, + }, }; +export default meta; -export const Default = () => ( +export const Default = (args) => (
- + Map (
); +Default.args = { + height: undefined, +}; -export const MaxHeight = () => ( +export const MaxHeight = (args) => (
- + Map (
); +MaxHeight.args = { + height: 300, +}; -export const SaveScrollPosition = () => ( +export const SaveScrollPosition = (args) => (
- + Map (
); +SaveScrollPosition.args = { + height: 500, + scrollPositionKey: 'story-example', +}; -export const CustomTheme = () => ( +export const CustomTheme = (args) => ( ( /> ); +CustomTheme.args = { + height: 300, +}; diff --git a/src/components/Select/Select.stories.js b/src/components/Select/Select.stories.js index b446ec096..b993f06c7 100644 --- a/src/components/Select/Select.stories.js +++ b/src/components/Select/Select.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { boolean, select, text } from '@storybook/addon-knobs'; import React from 'react'; import COUNTRIES from '../Address/util/Countries'; import Select from './Select'; @@ -76,16 +75,9 @@ export default { }, }; -export const WithOptions = () => ( +export const WithOptions = (args) => (
-

Please see{' '} (

); +WithOptions.args = { + disabled: false, + multi: false, + placeholder: undefined, + onChange: action('onChange'), +}; -export const WithGroups = () => ( +export const WithGroups = (args) => (
-
); +WithGroups.args = { + disable: false, + multi: false, + placeholder: undefined, + onChange: action('onChange'), +}; export const WithDefaultValueUncontrolled = () => ( c.value), - 'US' - )} - options={COUNTRIES} - onChange={action('onChange')} - /> -); +export const Controlled = (args) => ( { label: 'golf@club.com', value: 'golf@club.com' }, ]} isValidNewOption={({ label }) => validateEmail(label)} - onChange={action('onChange')} + {...args} /> ); +MultipleAndCreatableOptions.args = { + creatable: true, + onChange: action('onChange'), +}; diff --git a/src/components/Spinner/Spinner.stories.js b/src/components/Spinner/Spinner.stories.js index 9dc6a067d..c3167e38f 100644 --- a/src/components/Spinner/Spinner.stories.js +++ b/src/components/Spinner/Spinner.stories.js @@ -1,4 +1,3 @@ -import { number, select, text } from '@storybook/addon-knobs'; import React from 'react'; import { textColors } from '../../tooling/colors'; import Button from '../Button/Button'; @@ -12,44 +11,67 @@ export default { }, }; -export const Default = () => { - const color = select('color', textColors, 'primary'); - const type = select('type', ['spin', 'border', 'grow'], Spinner.default); - const label = text('label', 'loading'); +export const Default = ({ color, type, label, fontSize }) => ( +
+

+ The will scale with the font size of its container, +

- return ( -
-

- The will scale with the font size of its container, -

+
+

...and inherit color from its container:

+

+ + +

+

+ text-{color}: +

-
-

...and inherit color from its container:

-

- - -

-

- text-{color}: -

+
+

+ ...and accept a label prop for accessibility by screen-readers (default to + 'loading'):{' '} +

+

+ {' '} + {' '} +

+
+); -
-

- ...and accept a label prop for accessibility by screen-readers (default to - 'loading'):{' '} -

-

- {' '} - {' '} -

-
- ); +Default.args = { + color: 'primary', + type: Spinner.default, + label: 'loading', + fontSize: 1, +}; +Default.argTypes = { + color: { + control: { + type: 'select', + options: textColors, + }, + }, + type: { + control: { + type: 'select', + options: ['spin', 'border', 'grow'], + }, + }, + fontSize: { + control: { + type: 'range', + min: 1, + max: 5, + step: 0.25, + }, + }, }; diff --git a/src/components/Status/Status.stories.js b/src/components/Status/Status.stories.js index 8d89aa5fc..e8604d4dd 100644 --- a/src/components/Status/Status.stories.js +++ b/src/components/Status/Status.stories.js @@ -1,4 +1,3 @@ -import { select } from '@storybook/addon-knobs'; import React from 'react'; import Status from './Status'; @@ -12,9 +11,9 @@ export default { }, }; -export const LiveExample = () => ( +export const LiveExample = (args) => (
- + @@ -22,3 +21,14 @@ export const LiveExample = () => (
); +LiveExample.args = { + type: 'none', +}; +LiveExample.argTypes = { + type: { + control: { + type: 'select', + options: types, + }, + }, +}; diff --git a/src/components/Steps/Steps.stories.js b/src/components/Steps/Steps.stories.js index 9520e2a81..fc9669659 100644 --- a/src/components/Steps/Steps.stories.js +++ b/src/components/Steps/Steps.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { boolean, number } from '@storybook/addon-knobs'; import React from 'react'; import Steps from './Steps'; @@ -18,51 +17,47 @@ export default { }, }; -export const LiveExample = () => ( - -); +export const LiveExample = (args) => ; +LiveExample.args = { + step: 0, + complete: false, + vertical: false, + collapse: false, +}; -export const Vertical = () => ( - -); +export const Vertical = (args) => ; +Vertical.args = { + step: 0, + complete: false, + vertical: true, + collapse: false, +}; -export const Clickable = () => ( - -); +export const Clickable = (args) => ; +Clickable.args = { + step: 0, + complete: false, + vertical: false, + collapse: false, + onStepClick: action('index'), +}; -export const Granular = () => ( - ; +Granular.args = { + step: 0, + complete: false, + vertical: false, + collapse: false, + onStepClick: action('index'), + stepProgress: 30, +}; +Granular.argTypes = { + stepProgress: { + control: { + type: 'range', min: 0, max: 100, step: 1, - })} - /> -); + }, + }, +}; diff --git a/src/components/SummaryBox/SummaryBox.stories.js b/src/components/SummaryBox/SummaryBox.stories.js index 135ad1ead..215f96152 100644 --- a/src/components/SummaryBox/SummaryBox.stories.js +++ b/src/components/SummaryBox/SummaryBox.stories.js @@ -1,4 +1,3 @@ -import { boolean, text } from '@storybook/addon-knobs'; import React from 'react'; import SummaryBox from './SummaryBox'; import SummaryBoxItem from './SummaryBoxItem'; @@ -20,12 +19,13 @@ export default { }, }; -export const WithItems = () => ( - -); +export const WithItems = (args) => ; +WithItems.args = { + reverse: SummaryBox.defaultProps.reverse, +}; -export const WithChildren = () => ( - +export const WithChildren = (args) => ( + @@ -33,11 +33,13 @@ export const WithChildren = () => ( ); +WithChildren.args = { + reverse: SummaryBox.defaultProps.reverse, +}; -export const SummaryBoxItemExample = () => ( - -); +export const SummaryBoxItemExample = (args) => ; +SummaryBoxItemExample.args = { + value: 'Live from New York', + label: "It's Saturday Night", + reverse: SummaryBoxItem.defaultProps.reverse, +}; diff --git a/src/components/Table/SortableTable.stories.js b/src/components/Table/SortableTable.stories.js index 3f25bd48a..97bc82517 100644 --- a/src/components/Table/SortableTable.stories.js +++ b/src/components/Table/SortableTable.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { select, boolean } from '@storybook/addon-knobs'; import fecha from 'fecha'; import React from 'react'; import SortableTable from './SortableTable'; @@ -97,68 +96,81 @@ const DATA = [ const EmailCell = (row) => {row.email}; -export const SortableTableExample = () => { - const column = select('active', ['first', 'last', 'dob', 'email'], 'last'); - const ascending = boolean('ascending', true); - return ( -
-

- Note: This is an uncontrolled example, will not sort on click. See UncontrolledTable - story. -

- row.first, - onSort: action('onSort', 'First'), - width: '20%', - }, - { - active: column === 'last', - ascending, - header: 'Last', - key: 'last', - cell: (row) => row.last, - onSort: action('onSort', 'Last'), - width: '30%', - }, - { - active: column === 'dob', - ascending, - header: 'DOB', - key: 'dob', - cell: (row) => fecha.format(row.dob, 'MM/DD/YYYY'), - onSort: action('onSort', 'DOB'), - width: '15%', - }, - { - active: column === 'email', - ascending, - header: Email, - key: 'email', - cell: EmailCell, - onSort: action('onSort', 'Email'), - width: '35%', - }, - ]} - rows={DATA} - rowSelected={(row) => row.key === '777'} - onExpand={action('onExpand')} - onSelect={action('onSelect')} - onSelectAll={action('onSelectAll')} - /> -
- ); +export const SortableTableExample = ({ column, ascending, ...args }) => ( +
+

+ Note: This is an uncontrolled example, will not sort on click. See UncontrolledTable + story. +

+ row.first, + onSort: action('onSort-First'), + width: '20%', + }, + { + active: column === 'last', + ascending, + header: 'Last', + key: 'last', + cell: (row) => row.last, + onSort: action('onSort-Last'), + width: '30%', + }, + { + active: column === 'dob', + ascending, + header: 'DOB', + key: 'dob', + cell: (row) => fecha.format(row.dob, 'MM/DD/YYYY'), + onSort: action('onSort-DOB'), + width: '15%', + }, + { + active: column === 'email', + ascending, + header: Email, + key: 'email', + cell: EmailCell, + onSort: action('onSort-Email'), + width: '35%', + }, + ]} + rows={DATA} + rowSelected={(row) => row.key === '777'} + {...args} + /> +
+); +SortableTableExample.args = { + column: 'last', + ascending: true, + bordered: false, + hover: true, + responsive: true, + size: 'sm', + striped: true, + truncate: false, + onExpand: action('onExpand'), + onSelect: action('onSelect'), + onSelectAll: action('onSelectAll'), +}; +SortableTableExample.argTypes = { + column: { + control: { + type: 'select', + options: ['first', 'last', 'dob', 'email'], + }, + }, + size: { + options: ['', 'lg', 'sm'], + control: { type: 'select' }, + }, }; export const AlignColumn = () => ( diff --git a/src/components/Table/Table.stories.js b/src/components/Table/Table.stories.js index 90db08dd1..8e8af976d 100644 --- a/src/components/Table/Table.stories.js +++ b/src/components/Table/Table.stories.js @@ -1,4 +1,3 @@ -import { boolean, select } from '@storybook/addon-knobs'; import fecha from 'fecha'; import React from 'react'; import Table from './Table'; @@ -92,14 +91,8 @@ export default { parameters: { sourceLink: 'Table/Table.tsx' }, }; -export const Defalut = () => ( - +export const Default = (args) => ( +
@@ -123,3 +116,16 @@ export const Defalut = () => (
First
); +Default.args = { + bordered: false, + responsive: true, + striped: true, + hover: true, + size: 'sm', +}; +Default.argTypes = { + size: { + options: ['', 'lg', 'sm'], + control: { type: 'select' }, + }, +}; diff --git a/src/components/Table/UncontrolledTable.stories.js b/src/components/Table/UncontrolledTable.stories.js index 841c3bc9b..d998a080f 100644 --- a/src/components/Table/UncontrolledTable.stories.js +++ b/src/components/Table/UncontrolledTable.stories.js @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { boolean, number } from '@storybook/addon-knobs'; import fecha from 'fecha'; import React from 'react'; import Button from '../Button/Button'; @@ -106,7 +105,7 @@ export default { }, }; -export const UncontrolledTableExample = () => ( +export const UncontrolledTableExample = (args) => (
( rows={DATA} rowExpanded={FullName} sort={{ column: 'last', ascending: true }} - expandable={boolean('expandable', false)} - responsive={boolean('responsive', true)} - selectable={boolean('selectable', false)} - truncate={boolean('truncate', false)} - paginated={boolean('paginated', false)} - pageSize={number('pageSize', 10)} - onSelect={action('onSelect')} - onSort={action('onSort')} - onPageChange={action('onPageChange')} - onVisibleRowsChange={action('onVisibleRowsChange')} + {...args} />
); +UncontrolledTableExample.args = { + expandable: false, + responsive: true, + selectable: false, + truncate: false, + paginated: false, + pageSize: 10, + onSelect: action('onSelect'), + onSort: action('onSort'), + onPageChange: action('onPageChange'), + onVisibleRowsChange: action('onVisibleRowsChange'), +}; export const CustomHeader = () => ( ( +export const LiveExample = (args) => (

Somewhere in here is a tooltip.

- + Hello world!
); +LiveExample.args = { + placement: 'right', +}; +LiveExample.argTypes = { + placement: { + control: { + type: 'select', + options: ['top', 'left', 'bottom', 'right'], + }, + }, +}; diff --git a/src/components/Tree/Tree.stories.js b/src/components/Tree/Tree.stories.js index e8b0593a9..2a1262358 100644 --- a/src/components/Tree/Tree.stories.js +++ b/src/components/Tree/Tree.stories.js @@ -1,4 +1,3 @@ -import { boolean } from '@storybook/addon-knobs'; import React, { useState } from 'react'; import BlockPanel from '../BlockPanel/BlockPanel'; import Tree from './Tree'; @@ -79,7 +78,7 @@ const labelRenderer = (item, { selected }) => (
); -export const LiveExample = () => { +export const LiveExample = (args) => { const [options, setOptions] = useState(data); return ( @@ -88,8 +87,11 @@ export const LiveExample = () => { options={options} onChange={(updatedOptions) => setOptions(updatedOptions)} label={labelRenderer} - selectable={boolean('selectable', true)} + {...args} /> ); }; +LiveExample.args = { + selectable: true, +}; diff --git a/src/components/TruncatedText/TruncatedText.stories.js b/src/components/TruncatedText/TruncatedText.stories.js index e46f45d1c..df2faa68e 100644 --- a/src/components/TruncatedText/TruncatedText.stories.js +++ b/src/components/TruncatedText/TruncatedText.stories.js @@ -1,4 +1,3 @@ -import { boolean, number, select, text } from '@storybook/addon-knobs'; import React from 'react'; import TruncatedText from './TruncatedText'; @@ -10,14 +9,22 @@ export default { }, }; -export const LiveExample = () => ( +export const LiveExample = (args) => (
- +
); +LiveExample.args = { + charLimit: 20, + text: 'The quick brown fox jumps over the lazy dog', + tooltip: true, + placement: undefined, +}; +LiveExample.argTypes = { + placement: { + control: { + type: 'select', + options: ['top', 'bottom', 'left', 'right'], + }, + }, +}; diff --git a/src/components/Waiting/Waiting.stories.js b/src/components/Waiting/Waiting.stories.js index 937c20c66..3466ad10e 100644 --- a/src/components/Waiting/Waiting.stories.js +++ b/src/components/Waiting/Waiting.stories.js @@ -1,4 +1,3 @@ -import { boolean, text } from '@storybook/addon-knobs'; import React from 'react'; import Icon from '../Icon/Icon'; import Waiting from './Waiting'; @@ -11,20 +10,25 @@ export default { }, }; -export const Default = () => ( - -); +export const Default = (args) => ; +Default.args = { + isOpen: true, + backdrop: true, +}; -export const CustomTitle = () => ( - -); +export const CustomTitle = (args) => ; +CustomTitle.args = { + isOpen: true, + backdrop: true, + title: 'Please wait for this thing', +}; -export const Children = () => ( - +export const Children = (args) => ( + ); +Children.args = { + isOpen: true, + backdrop: true, +}; diff --git a/yarn.lock b/yarn.lock index 5e4153ff6..a86d6b779 100644 --- a/yarn.lock +++ b/yarn.lock @@ -74,8 +74,8 @@ __metadata: "@popperjs/core": ^2.10.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 @@ -555,15 +555,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.24.6": - version: 7.24.6 - resolution: "@babel/helper-module-imports@npm:7.24.6" - dependencies: - "@babel/types": ^7.24.6 - checksum: 3484420c45529aac34cb14111a03c78edab84e5c4419634affe61176d832af82963395ea319f67c7235fd4106d9052a9f3ce012d2d57d56644572d3f7d495231 - languageName: node - linkType: hard - "@babel/helper-module-imports@npm:^7.18.6": version: 7.18.6 resolution: "@babel/helper-module-imports@npm:7.18.6" @@ -573,6 +564,15 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-imports@npm:^7.24.6": + version: 7.24.6 + resolution: "@babel/helper-module-imports@npm:7.24.6" + dependencies: + "@babel/types": ^7.24.6 + checksum: 3484420c45529aac34cb14111a03c78edab84e5c4419634affe61176d832af82963395ea319f67c7235fd4106d9052a9f3ce012d2d57d56644572d3f7d495231 + languageName: node + linkType: hard + "@babel/helper-module-transforms@npm:^7.18.6, @babel/helper-module-transforms@npm:^7.18.9": version: 7.18.9 resolution: "@babel/helper-module-transforms@npm:7.18.9" @@ -2765,7 +2765,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.18.3": +"@babel/runtime@npm:^7.13.10": version: 7.24.6 resolution: "@babel/runtime@npm:7.24.6" dependencies: @@ -2904,100 +2904,6 @@ __metadata: languageName: node linkType: hard -"@emotion/babel-plugin@npm:^11.11.0": - version: 11.11.0 - resolution: "@emotion/babel-plugin@npm:11.11.0" - dependencies: - "@babel/helper-module-imports": ^7.16.7 - "@babel/runtime": ^7.18.3 - "@emotion/hash": ^0.9.1 - "@emotion/memoize": ^0.8.1 - "@emotion/serialize": ^1.1.2 - babel-plugin-macros: ^3.1.0 - convert-source-map: ^1.5.0 - escape-string-regexp: ^4.0.0 - find-root: ^1.1.0 - source-map: ^0.5.7 - stylis: 4.2.0 - checksum: 6b363edccc10290f7a23242c06f88e451b5feb2ab94152b18bb8883033db5934fb0e421e2d67d09907c13837c21218a3ac28c51707778a54d6cd3706c0c2f3f9 - languageName: node - linkType: hard - -"@emotion/cache@npm:^11.11.0, @emotion/cache@npm:^11.4.0": - version: 11.11.0 - resolution: "@emotion/cache@npm:11.11.0" - dependencies: - "@emotion/memoize": ^0.8.1 - "@emotion/sheet": ^1.2.2 - "@emotion/utils": ^1.2.1 - "@emotion/weak-memoize": ^0.3.1 - stylis: 4.2.0 - checksum: 8eb1dc22beaa20c21a2e04c284d5a2630a018a9d51fb190e52de348c8d27f4e8ca4bbab003d68b4f6cd9cc1c569ca747a997797e0f76d6c734a660dc29decf08 - languageName: node - linkType: hard - -"@emotion/hash@npm:^0.9.1": - version: 0.9.1 - resolution: "@emotion/hash@npm:0.9.1" - checksum: 716e17e48bf9047bf9383982c071de49f2615310fb4e986738931776f5a823bc1f29c84501abe0d3df91a3803c80122d24e28b57351bca9e01356ebb33d89876 - languageName: node - linkType: hard - -"@emotion/memoize@npm:^0.8.1": - version: 0.8.1 - resolution: "@emotion/memoize@npm:0.8.1" - checksum: a19cc01a29fcc97514948eaab4dc34d8272e934466ed87c07f157887406bc318000c69ae6f813a9001c6a225364df04249842a50e692ef7a9873335fbcc141b0 - languageName: node - linkType: hard - -"@emotion/react@npm:^11.8.1": - version: 11.11.4 - resolution: "@emotion/react@npm:11.11.4" - dependencies: - "@babel/runtime": ^7.18.3 - "@emotion/babel-plugin": ^11.11.0 - "@emotion/cache": ^11.11.0 - "@emotion/serialize": ^1.1.3 - "@emotion/use-insertion-effect-with-fallbacks": ^1.0.1 - "@emotion/utils": ^1.2.1 - "@emotion/weak-memoize": ^0.3.1 - hoist-non-react-statics: ^3.3.1 - peerDependencies: - react: ">=16.8.0" - peerDependenciesMeta: - "@types/react": - optional: true - checksum: 6abaa7a05c5e1db31bffca7ac79169f5456990022cbb3794e6903221536609a60420f2b4888dd3f84e9634a304e394130cb88dc32c243a1dedc263e50da329f8 - languageName: node - linkType: hard - -"@emotion/serialize@npm:^1.1.2, @emotion/serialize@npm:^1.1.3": - version: 1.1.4 - resolution: "@emotion/serialize@npm:1.1.4" - dependencies: - "@emotion/hash": ^0.9.1 - "@emotion/memoize": ^0.8.1 - "@emotion/unitless": ^0.8.1 - "@emotion/utils": ^1.2.1 - csstype: ^3.0.2 - checksum: 71b99f816a9c1d61a87c62cf4928da3894bb62213f3aff38b1ea9790b3368f084af98a3e5453b5055c2f36a7d70318d2fa9955b7b5676c2065b868062375df39 - languageName: node - linkType: hard - -"@emotion/sheet@npm:^1.2.2": - version: 1.2.2 - resolution: "@emotion/sheet@npm:1.2.2" - checksum: d973273c9c15f1c291ca2269728bf044bd3e92a67bca87943fa9ec6c3cd2b034f9a6bfe95ef1b5d983351d128c75b547b43ff196a00a3875f7e1d269793cecfe - languageName: node - linkType: hard - -"@emotion/unitless@npm:^0.8.1": - version: 0.8.1 - resolution: "@emotion/unitless@npm:0.8.1" - checksum: 385e21d184d27853bb350999471f00e1429fa4e83182f46cd2c164985999d9b46d558dc8b9cc89975cb337831ce50c31ac2f33b15502e85c299892e67e7b4a88 - languageName: node - linkType: hard - "@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1": version: 1.0.1 resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1" @@ -3007,20 +2913,6 @@ __metadata: languageName: node linkType: hard -"@emotion/utils@npm:^1.2.1": - version: 1.2.1 - resolution: "@emotion/utils@npm:1.2.1" - checksum: e0b44be0705b56b079c55faff93952150be69e79b660ae70ddd5b6e09fc40eb1319654315a9f34bb479d7f4ec94be6068c061abbb9e18b9778ae180ad5d97c73 - languageName: node - linkType: hard - -"@emotion/weak-memoize@npm:^0.3.1": - version: 0.3.1 - resolution: "@emotion/weak-memoize@npm:0.3.1" - checksum: b2be47caa24a8122622ea18cd2d650dbb4f8ad37b636dc41ed420c2e082f7f1e564ecdea68122b546df7f305b159bf5ab9ffee872abd0f052e687428459af594 - languageName: node - linkType: hard - "@esbuild/aix-ppc64@npm:0.20.2": version: 0.20.2 resolution: "@esbuild/aix-ppc64@npm:0.20.2" @@ -3206,32 +3098,6 @@ __metadata: languageName: node linkType: hard -"@floating-ui/core@npm:^1.0.0": - version: 1.6.2 - resolution: "@floating-ui/core@npm:1.6.2" - dependencies: - "@floating-ui/utils": ^0.2.0 - checksum: a161b2c8e14b6e185960ec19398f4b893ef3cd6620d535c348c1dc877fb4ffc9f701eb7156f6a30a89b7826093ba28ea223fc2fd1996c0b2464741208725ac8f - languageName: node - linkType: hard - -"@floating-ui/dom@npm:^1.0.1": - version: 1.6.5 - resolution: "@floating-ui/dom@npm:1.6.5" - dependencies: - "@floating-ui/core": ^1.0.0 - "@floating-ui/utils": ^0.2.0 - checksum: 767295173cfc9024b2187b65d3c1a0c8d8596a1f827d57c86288e52edf91b41508b3679643e24e0ef9f522d86aab59ef97354b456b39be4f6f5159d819cc807d - languageName: node - linkType: hard - -"@floating-ui/utils@npm:^0.2.0": - version: 0.2.2 - resolution: "@floating-ui/utils@npm:0.2.2" - checksum: 3d8d46fd1b071c98e10d374e2dcf54d1eb9de0aa75ed2b994c9132ebf6f783f896f979053be71450bdb6d60021120cfc24d25a5c84ebb3db0994080e13d9762f - languageName: node - linkType: hard - "@fortawesome/fontawesome-common-types@npm:6.2.1": version: 6.2.1 resolution: "@fortawesome/fontawesome-common-types@npm:6.2.1" @@ -4131,7 +3997,7 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-controls@npm:8.1.5": +"@storybook/addon-controls@npm:8.1.5, @storybook/addon-controls@npm:^8.1.5": version: 8.1.5 resolution: "@storybook/addon-controls@npm:8.1.5" dependencies: @@ -4202,37 +4068,6 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-knobs@npm:^8.0.0": - version: 8.0.0 - resolution: "@storybook/addon-knobs@npm:8.0.0" - dependencies: - copy-to-clipboard: ^3.3.3 - core-js: ^3.29.0 - escape-html: ^1.0.3 - fast-deep-equal: ^3.1.3 - global: ^4.4.0 - lodash: ^4.17.21 - prop-types: ^15.8.1 - qs: ^6.11.1 - react-colorful: ^5.6.1 - react-lifecycles-compat: ^3.0.4 - react-select: ^5.7.0 - peerDependencies: - "@storybook/api": ^8.0.0 - "@storybook/components": ^8.0.0 - "@storybook/core-events": ^8.0.0 - "@storybook/theming": ^8.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true - checksum: fdebdec1583a7c108030936ef8019a5c9390160d1f6451e9c78d9abdbc30d6f4ffdbfc45f5020229e648bf2bacc8fd9986d16c86433e665122970ddf74c97259 - languageName: node - linkType: hard - "@storybook/addon-links@npm:^8.1.5": version: 8.1.5 resolution: "@storybook/addon-links@npm:8.1.5" @@ -5737,15 +5572,6 @@ __metadata: languageName: node linkType: hard -"@types/react-transition-group@npm:^4.4.0": - version: 4.4.10 - resolution: "@types/react-transition-group@npm:4.4.10" - dependencies: - "@types/react": "*" - checksum: fe2ea11f70251e9f79f368e198c18fd469b1d4f1e1d44e4365845b44e15974b0ec925100036f449b023b0ca3480a82725c5f0a73040e282ad32ec7b0def9b57c - languageName: node - linkType: hard - "@types/react@npm:^16.14.26": version: 16.14.30 resolution: "@types/react@npm:16.14.30" @@ -6892,17 +6718,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-macros@npm:^3.1.0": - version: 3.1.0 - resolution: "babel-plugin-macros@npm:3.1.0" - dependencies: - "@babel/runtime": ^7.12.5 - cosmiconfig: ^7.0.0 - resolve: ^1.19.0 - checksum: 765de4abebd3e4688ebdfbff8571ddc8cd8061f839bb6c3e550b0344a4027b04c60491f843296ce3f3379fb356cc873d57a9ee6694262547eb822c14a25be9a6 - languageName: node - linkType: hard - "babel-plugin-polyfill-corejs2@npm:^0.3.2": version: 0.3.2 resolution: "babel-plugin-polyfill-corejs2@npm:0.3.2" @@ -7808,7 +7623,7 @@ __metadata: languageName: node linkType: hard -"convert-source-map@npm:^1.1.0, convert-source-map@npm:^1.4.0, convert-source-map@npm:^1.5.0, convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0": +"convert-source-map@npm:^1.1.0, convert-source-map@npm:^1.4.0, convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0": version: 1.8.0 resolution: "convert-source-map@npm:1.8.0" dependencies: @@ -7847,15 +7662,6 @@ __metadata: languageName: node linkType: hard -"copy-to-clipboard@npm:^3.3.3": - version: 3.3.3 - resolution: "copy-to-clipboard@npm:3.3.3" - dependencies: - toggle-selection: ^1.0.6 - checksum: e0a325e39b7615108e6c1c8ac110ae7b829cdc4ee3278b1df6a0e4228c490442cc86444cd643e2da344fbc424b3aab8909e2fec82f8bc75e7e5b190b7c24eecf - languageName: node - linkType: hard - "core-js-compat@npm:^3.21.0, core-js-compat@npm:^3.22.1": version: 3.24.1 resolution: "core-js-compat@npm:3.24.1" @@ -7882,13 +7688,6 @@ __metadata: languageName: node linkType: hard -"core-js@npm:^3.29.0": - version: 3.37.1 - resolution: "core-js@npm:3.37.1" - checksum: 2d58a5c599f05c3e04abc8bc5e64b88eb17d914c0f552f670fb800afa74ec54b4fcc7f231ad6bd45badaf62c0fb0ce30e6fe89cedb6bb6d54e6f19115c3c17ff - languageName: node - linkType: hard - "core-util-is@npm:1.0.2": version: 1.0.2 resolution: "core-util-is@npm:1.0.2" @@ -7903,19 +7702,6 @@ __metadata: languageName: node linkType: hard -"cosmiconfig@npm:^7.0.0": - version: 7.0.1 - resolution: "cosmiconfig@npm:7.0.1" - dependencies: - "@types/parse-json": ^4.0.0 - import-fresh: ^3.2.1 - parse-json: ^5.0.0 - path-type: ^4.0.0 - yaml: ^1.10.0 - checksum: 4be63e7117955fd88333d7460e4c466a90f556df6ef34efd59034d2463484e339666c41f02b523d574a797ec61f4a91918c5b89a316db2ea2f834e0d2d09465b - languageName: node - linkType: hard - "cosmiconfig@npm:^7.0.1": version: 7.1.0 resolution: "cosmiconfig@npm:7.1.0" @@ -8483,13 +8269,6 @@ __metadata: languageName: node linkType: hard -"dom-walk@npm:^0.1.0": - version: 0.1.2 - resolution: "dom-walk@npm:0.1.2" - checksum: 19eb0ce9c6de39d5e231530685248545d9cd2bd97b2cb3486e0bfc0f2a393a9addddfd5557463a932b52fdfcf68ad2a619020cd2c74a5fe46fbecaa8e80872f3 - languageName: node - linkType: hard - "domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0, domelementtype@npm:^2.3.0": version: 2.3.0 resolution: "domelementtype@npm:2.3.0" @@ -9033,7 +8812,7 @@ __metadata: languageName: node linkType: hard -"escape-html@npm:^1.0.3, escape-html@npm:~1.0.3": +"escape-html@npm:~1.0.3": version: 1.0.3 resolution: "escape-html@npm:1.0.3" checksum: 6213ca9ae00d0ab8bccb6d8d4e0a98e76237b2410302cf7df70aaa6591d509a2a37ce8998008cbecae8fc8ffaadf3fb0229535e6a145f3ce0b211d060decbb24 @@ -9754,13 +9533,6 @@ __metadata: languageName: node linkType: hard -"find-root@npm:^1.1.0": - version: 1.1.0 - resolution: "find-root@npm:1.1.0" - checksum: b2a59fe4b6c932eef36c45a048ae8f93c85640212ebe8363164814990ee20f154197505965f3f4f102efc33bfb1cbc26fd17c4a2fc739ebc51b886b137cbefaf - languageName: node - linkType: hard - "find-up@npm:^2.1.0": version: 2.1.0 resolution: "find-up@npm:2.1.0" @@ -10258,16 +10030,6 @@ __metadata: languageName: node linkType: hard -"global@npm:^4.4.0": - version: 4.4.0 - resolution: "global@npm:4.4.0" - dependencies: - min-document: ^2.19.0 - process: ^0.11.10 - checksum: 9c057557c8f5a5bcfbeb9378ba4fe2255d04679452be504608dd5f13b54edf79f7be1db1031ea06a4ec6edd3b9f5f17d2d172fb47e6c69dae57fd84b7e72b77f - languageName: node - linkType: hard - "globals@npm:^11.1.0": version: 11.12.0 resolution: "globals@npm:11.12.0" @@ -10532,15 +10294,6 @@ __metadata: languageName: node linkType: hard -"hoist-non-react-statics@npm:^3.3.1": - version: 3.3.2 - resolution: "hoist-non-react-statics@npm:3.3.2" - dependencies: - react-is: ^16.7.0 - checksum: b1538270429b13901ee586aa44f4cc3ecd8831c061d06cb8322e50ea17b3f5ce4d0e2e66394761e6c8e152cd8c34fb3b4b690116c6ce2bd45b18c746516cb9e8 - languageName: node - linkType: hard - "hosted-git-info@npm:^2.1.4": version: 2.8.9 resolution: "hosted-git-info@npm:2.8.9" @@ -12638,13 +12391,6 @@ __metadata: languageName: node linkType: hard -"memoize-one@npm:^6.0.0": - version: 6.0.0 - resolution: "memoize-one@npm:6.0.0" - checksum: f185ea69f7cceae5d1cb596266dcffccf545e8e7b4106ec6aa93b71ab9d16460dd118ac8b12982c55f6d6322fcc1485de139df07eacffaae94888b9b3ad7675f - languageName: node - linkType: hard - "memoizerific@npm:^1.11.3": version: 1.11.3 resolution: "memoizerific@npm:1.11.3" @@ -12741,15 +12487,6 @@ __metadata: languageName: node linkType: hard -"min-document@npm:^2.19.0": - version: 2.19.0 - resolution: "min-document@npm:2.19.0" - dependencies: - dom-walk: ^0.1.0 - checksum: da6437562ea2228041542a2384528e74e22d1daa1a4ec439c165abf0b9d8a63e17e3b8a6dc6e0c731845e85301198730426932a0e813d23f932ca668340c9623 - languageName: node - linkType: hard - "min-indent@npm:^1.0.0, min-indent@npm:^1.0.1": version: 1.0.1 resolution: "min-indent@npm:1.0.1" @@ -14034,7 +13771,7 @@ __metadata: languageName: node linkType: hard -"prop-types@npm:^15.5.6, prop-types@npm:^15.5.7, prop-types@npm:^15.5.8, prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1": +"prop-types@npm:^15.5.6, prop-types@npm:^15.5.7, prop-types@npm:^15.5.8, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1": version: 15.8.1 resolution: "prop-types@npm:15.8.1" dependencies: @@ -14116,7 +13853,7 @@ __metadata: languageName: node linkType: hard -"qs@npm:^6.11.1, qs@npm:^6.11.2": +"qs@npm:^6.11.2": version: 6.12.1 resolution: "qs@npm:6.12.1" dependencies: @@ -14224,16 +13961,6 @@ __metadata: languageName: node linkType: hard -"react-colorful@npm:^5.6.1": - version: 5.6.1 - resolution: "react-colorful@npm:5.6.1" - peerDependencies: - react: ">=16.8.0" - react-dom: ">=16.8.0" - checksum: e432b7cb0df57e8f0bcdc3b012d2e93fcbcb6092c9e0f85654788d5ebfc4442536d8cc35b2418061ba3c4afb8b7788cc101c606d86a1732407921de7a9244c8d - languageName: node - linkType: hard - "react-confetti@npm:^6.1.0": version: 6.1.0 resolution: "react-confetti@npm:6.1.0" @@ -14371,7 +14098,7 @@ __metadata: languageName: node linkType: hard -"react-is@npm:^16.13.1, react-is@npm:^16.7.0, react-is@npm:^16.8.6": +"react-is@npm:^16.13.1, react-is@npm:^16.8.6": version: 16.13.1 resolution: "react-is@npm:16.13.1" checksum: f7a19ac3496de32ca9ae12aa030f00f14a3d45374f1ceca0af707c831b2a6098ef0d6bdae51bd437b0a306d7f01d4677fcc8de7c0d331eb47ad0f46130e53c5f @@ -14478,26 +14205,6 @@ __metadata: languageName: node linkType: hard -"react-select@npm:^5.7.0": - version: 5.8.0 - resolution: "react-select@npm:5.8.0" - dependencies: - "@babel/runtime": ^7.12.0 - "@emotion/cache": ^11.4.0 - "@emotion/react": ^11.8.1 - "@floating-ui/dom": ^1.0.1 - "@types/react-transition-group": ^4.4.0 - memoize-one: ^6.0.0 - prop-types: ^15.6.0 - react-transition-group: ^4.3.0 - use-isomorphic-layout-effect: ^1.1.2 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: c8398cc0aefb5ee5438b6176c86676e2d3fed7457c16b0769f423a0da0ae431a7df25c2cadf13b709700882b8ebd80a58b1e557fec3e22ad3cbf60164ca9e745 - languageName: node - linkType: hard - "react-sortable-hoc@npm:^1.11.0": version: 1.11.0 resolution: "react-sortable-hoc@npm:1.11.0" @@ -14570,7 +14277,7 @@ __metadata: languageName: node linkType: hard -"react-transition-group@npm:^4.3.0, react-transition-group@npm:^4.4.2": +"react-transition-group@npm:^4.4.2": version: 4.4.5 resolution: "react-transition-group@npm:4.4.5" dependencies: @@ -15064,7 +14771,7 @@ __metadata: languageName: node linkType: hard -"resolve@npm:^1.14.2, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.0": +"resolve@npm:^1.14.2, resolve@npm:^1.20.0, resolve@npm:^1.22.0": version: 1.22.1 resolution: "resolve@npm:1.22.1" dependencies: @@ -15103,7 +14810,7 @@ __metadata: languageName: node linkType: hard -"resolve@patch:resolve@^1.14.2#~builtin, resolve@patch:resolve@^1.19.0#~builtin, resolve@patch:resolve@^1.20.0#~builtin, resolve@patch:resolve@^1.22.0#~builtin": +"resolve@patch:resolve@^1.14.2#~builtin, resolve@patch:resolve@^1.20.0#~builtin, resolve@patch:resolve@^1.22.0#~builtin": version: 1.22.1 resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin::version=1.22.1&hash=07638b" dependencies: @@ -15610,13 +15317,6 @@ __metadata: languageName: node linkType: hard -"source-map@npm:^0.5.7": - version: 0.5.7 - resolution: "source-map@npm:0.5.7" - checksum: 5dc2043b93d2f194142c7f38f74a24670cd7a0063acdaf4bf01d2964b402257ae843c2a8fa822ad5b71013b5fcafa55af7421383da919752f22ff488bc553f4d - languageName: node - linkType: hard - "source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.0, source-map@npm:~0.6.1": version: 0.6.1 resolution: "source-map@npm:0.6.1" @@ -16024,13 +15724,6 @@ __metadata: languageName: node linkType: hard -"stylis@npm:4.2.0": - version: 4.2.0 - resolution: "stylis@npm:4.2.0" - checksum: 0eb6cc1b866dc17a6037d0a82ac7fa877eba6a757443e79e7c4f35bacedbf6421fadcab4363b39667b43355cbaaa570a3cde850f776498e5450f32ed2f9b7584 - languageName: node - linkType: hard - "stylis@npm:^4.0.6": version: 4.1.1 resolution: "stylis@npm:4.1.1" @@ -16899,18 +16592,6 @@ __metadata: languageName: node linkType: hard -"use-isomorphic-layout-effect@npm:^1.1.2": - version: 1.1.2 - resolution: "use-isomorphic-layout-effect@npm:1.1.2" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: a6532f7fc9ae222c3725ff0308aaf1f1ddbd3c00d685ef9eee6714fd0684de5cb9741b432fbf51e61a784e2955424864f7ea9f99734a02f237b17ad3e18ea5cb - languageName: node - linkType: hard - "use-local-storage-state@npm:^4.0.0": version: 4.0.0 resolution: "use-local-storage-state@npm:4.0.0"