From 91e7696f869dee59fb2386fb8e098fbc7874d031 Mon Sep 17 00:00:00 2001 From: Xiaofan Wu Date: Mon, 3 Jul 2023 14:09:53 +1000 Subject: [PATCH] fix: initial storybook setup --- .storybook/main.js | 32 + .storybook/manager-head.html | 28 + .storybook/manager.js | 6 + .storybook/preview.js | 41 + .storybook/theme.js | 38 + config/paths.js | 2 - config/webpack.config.dev.build.js | 105 - config/webpack.config.dev.js | 123 - config/webpack.config.dist.js | 14 - config/webpack.config.prod.js | 196 - config/webpackDevServer.config.js | 54 - package-lock.json | 59872 +++++++++++----- package.json | 41 +- plop-templates/component/index.jsx.hbs | 18 + plop-templates/component/index.spec.jsx.hbs | 12 + plop-templates/component/styles.css.hbs | 5 + .../{{componentName}}.stories.jsx.hbs | 5 + .../{{componentName}}.stories.mdx.hbs | 17 + plopfile.mjs | 33 + scripts/babel-build.js | 13 +- scripts/build.js | 14 +- .../babel-plugin-proptype-vars.js | 4 +- scripts/start.js | 77 - .../Accordion/Accordion.stories.jsx | 46 + .../Accordion/Accordion.stories.mdx | 18 + .../ActionPanel/ActionPanel.stories.jsx | 47 + .../ActionPanel/ActionPanel.stories.mdx | 21 + src/components/ActionPanel/index.jsx | 2 + src/components/Alert/Alert.stories.jsx | 5 + src/components/Alert/Alert.stories.mdx | 28 + src/components/Alert/index.jsx | 4 +- .../AlertInput/AlertInput.stories.jsx | 8 + .../AlertInput/AlertInput.stories.mdx | 18 + src/components/Anchor/Anchor.stories.jsx | 9 + src/components/Anchor/Anchor.stories.mdx | 20 + src/components/Avatar/Avatar.stories.jsx | 6 + src/components/Avatar/Avatar.stories.mdx | 31 + .../BorderedWell/BorderedWell.stories.jsx | 20 +- .../BorderedWell/BorderedWell.stories.mdx | 17 + .../Breadcrumb/Breadcrumb.stories.jsx | 10 + .../Breadcrumb/Breadcrumb.stories.mdx | 18 + src/components/Button/Button.stories.jsx | 121 + src/components/Button/Button.stories.mdx | 213 + src/components/Button/index.d.ts | 10 - src/components/Button/index.jsx | 16 +- .../ButtonGroup/ButtonGroup.stories.jsx | 29 + .../ButtonGroup/ButtonGroup.stories.mdx | 17 + src/components/ButtonGroup/index.d.ts | 2 +- src/components/ButtonGroup/index.jsx | 2 +- src/components/Card/Card.stories.jsx | 22 + src/components/Card/Card.stories.mdx | 19 + src/components/Card/index.d.ts | 28 +- src/components/Card/index.jsx | 12 +- src/components/Carousel/Carousel.stories.jsx | 53 + src/components/Carousel/Carousel.stories.mdx | 35 + src/components/Carousel/index.jsx | 2 + src/components/Checkbox/Checkbox.stories.jsx | 8 + src/components/Checkbox/Checkbox.stories.mdx | 17 + .../CheckboxGroup/CheckboxGroup.stories.jsx | 89 + .../CheckboxGroup/CheckboxGroup.stories.mdx | 46 + .../ConfirmModal/ConfirmModal.stories.jsx | 21 + .../ConfirmModal/ConfirmModal.stories.mdx | 17 + .../CountBadge/CountBadge.stories.jsx | 6 + .../CountBadge/CountBadge.stories.mdx | 17 + src/components/CountBadge/index.d.ts | 6 +- src/components/CountBadge/index.jsx | 4 +- .../DatePicker/DatePicker.stories.jsx | 14 + .../DatePicker/DatePicker.stories.mdx | 19 + src/components/DatePicker/index.d.ts | 13 + src/components/DatePicker/index.jsx | 16 +- src/components/Empty/Empty.stories.jsx | 10 + src/components/Empty/Empty.stories.mdx | 17 + .../FilePicker/FilePicker.stories.jsx | 5 + .../FilePicker/FilePicker.stories.mdx | 17 + .../FlexibleSpacer/FlexibleSpacer.stories.jsx | 3 + .../FlexibleSpacer/FlexibleSpacer.stories.mdx | 17 + .../FormGroup/FormGroup.stories.jsx | 10 + .../FormGroup/FormGroup.stories.mdx | 18 + .../components/Grid/Grid.stories.jsx | 49 +- src/components/Grid/Grid.stories.mdx | 19 + .../HelpIconPopover.stories.jsx | 6 + .../HelpIconPopover.stories.mdx | 17 + .../ImageCropper/ImageCropper.stories.jsx | 9 + .../ImageCropper/ImageCropper.stories.mdx | 17 + src/components/ImageCropper/index.jsx | 2 + .../InformationBox/InformationBox.stories.jsx | 6 + .../InformationBox/InformationBox.stories.mdx | 36 + .../ListPicker/ListPicker.stories.jsx | 51 +- .../ListPicker/ListPicker.stories.mdx | 18 + .../ListPickerPure/ListPickerPure.stories.jsx | 11 + .../ListPickerPure/ListPickerPure.stories.mdx | 18 + src/components/Navigation/Nav.stories.jsx | 25 + src/components/Navigation/Nav.stories.mdx | 17 + .../OverlayLoader/OverlayLoader.stories.jsx | 29 + .../OverlayLoader/OverlayLoader.stories.mdx | 17 + .../PageTitle/PageTitle.stories.jsx | 6 + .../PageTitle/PageTitle.stories.mdx | 18 + .../PagedGrid/PagedGrid.stories.jsx | 16 + .../PagedGrid/PagedGrid.stories.mdx | 18 + .../Pagination/Pagination.stories.jsx | 10 + .../Pagination/Pagination.stories.mdx | 19 + src/components/Panel/Panel.stories.jsx | 24 + src/components/Panel/Panel.stories.mdx | 17 + .../Paragraph/Paragraph.stories.jsx | 9 + .../Paragraph/Paragraph.stories.mdx | 17 + src/components/Pill/Pill.stories.jsx | 5 + src/components/Pill/Pill.stories.mdx | 62 + src/components/Popover/Popover.stories.jsx | 69 + src/components/Popover/Popover.stories.mdx | 40 + src/components/Popover/WithRef.jsx | 42 +- .../PrettyDiff/PrettyDiff.stories.jsx | 5 + .../PrettyDiff/PrettyDiff.stories.mdx | 17 + src/components/Radio/Radio.stories.jsx | 9 + src/components/Radio/Radio.stories.mdx | 17 + .../RadioGroup/RadioGroup.stories.jsx | 63 + .../RadioGroup/RadioGroup.stories.mdx | 39 + .../RichTextEditor/RichTextEditor.stories.jsx | 73 + .../RichTextEditor/RichTextEditor.stories.mdx | 74 + .../RichTextEditor/ToolbarButton.jsx | 6 +- src/components/RichTextEditor/styles.css | 6 +- src/components/Search/Search.stories.jsx | 32 + src/components/Search/Search.stories.mdx | 24 + src/components/Search/index.jsx | 2 + .../SearchableCheckList.stories.jsx | 28 + .../SearchableCheckList.stories.mdx | 17 + .../Select/Select.Async.stories.mdx | 25 + .../Select/Select.Creatable.stories.mdx | 23 + src/components/Select/Select.stories.jsx | 48 + src/components/Select/Select.stories.mdx | 36 + src/components/Select/index.jsx | 2 +- src/components/Skeleton/Skeleton.stories.jsx | 34 + src/components/Skeleton/Skeleton.stories.mdx | 35 + src/components/Slicey/Slicey.stories.jsx | 11 + src/components/Slicey/Slicey.stories.mdx | 17 + src/components/Slicey/index.d.ts | 4 +- src/components/Slicey/index.jsx | 5 +- src/components/Spinner/Spinner.stories.jsx | 5 + src/components/Spinner/Spinner.stories.mdx | 17 + .../SplitPane/SplitPane.stories.jsx | 3 + .../SplitPane/SplitPane.stories.mdx | 26 + .../Statistic/Statistic.stories.jsx | 6 + .../Statistic/Statistic.stories.mdx | 17 + .../StatusPill/StatusPill.stories.jsx | 5 + .../StatusPill/StatusPill.stories.mdx | 67 + .../SvgSymbol/SvgSymbol.stories.jsx | 5 + .../SvgSymbol/SvgSymbol.stories.mdx | 19 + src/components/Switch/Switch.stories.jsx | 6 + src/components/Switch/Switch.stories.mdx | 17 + src/components/Tabs/Tabs.stories.jsx | 50 + src/components/Tabs/Tabs.stories.mdx | 20 + src/components/Tag/Tag.stories.jsx | 12 + src/components/Tag/Tag.stories.mdx | 22 + .../TextEllipsis/TextEllipsis.stories.jsx | 16 + .../TextEllipsis/TextEllipsis.stories.mdx | 19 + src/components/Textarea/Textarea.stories.jsx | 6 + src/components/Textarea/Textarea.stories.mdx | 17 + src/components/Tile/Tile.stories.jsx | 6 + src/components/Tile/Tile.stories.mdx | 17 + src/components/TileGrid/TileGrid.stories.jsx | 29 + src/components/TileGrid/TileGrid.stories.mdx | 18 + src/components/Toast/Toast.stories.jsx | 31 + src/components/Toast/Toast.stories.mdx | 54 + src/components/Toast/index.d.ts | 8 +- src/components/Toast/index.jsx | 4 +- src/components/Totals/Totals.stories.jsx | 10 + src/components/Totals/Totals.stories.mdx | 17 + .../TreePicker/TreePicker.stories.jsx | 44 +- .../TreePicker/TreePicker.stories.mdx | 26 + .../UserListPicker/UserListPicker.stories.jsx | 54 + .../UserListPicker/UserListPicker.stories.mdx | 17 + .../VerticalNav.stories.jsx | 114 +- .../VerticalNav.stories.mdx | 17 + www/{ => assets}/_redirects | 0 www/assets/aui--logo.png | Bin 0 -> 1704 bytes www/assets/button/Button-order-form.png | Bin 0 -> 37558 bytes www/assets/button/Button-order-modal.png | Bin 0 -> 28419 bytes www/assets/button/Button-order-ms.png | Bin 0 -> 74403 bytes www/assets/button/Button-variations.png | Bin 0 -> 32481 bytes www/assets/storybook-global.css | 14 + www/components/CopyText/index.jsx | 38 + www/components/CopyText/styles.css | 18 + .../components/Header/Contributors.jsx | 21 +- .../components/Header/index.jsx | 11 +- .../components/Header/styles.css | 10 +- www/components/Stack/index.jsx | 31 + www/components/Stack/styles.css | 43 + .../tokens}/BorderRadius/index.jsx | 0 .../tokens}/Colors/index.jsx | 19 +- .../Colors/useAccessibleContrastRatio.js | 0 .../tokens}/Token/JSONReference.jsx | 2 +- .../tokens}/Token/TokenData.jsx | 5 +- .../tokens}/Token/styles.css | 0 .../tokens}/Typography/index.jsx | 0 .../tokens}/Typography/styles.css | 0 www/containers/App.jsx | 32 - www/containers/CodeBlock.jsx | 46 - www/containers/DesignNotes.jsx | 15 - www/containers/Documentation.jsx | 51 - www/containers/GoogleAnalytics.jsx | 24 - www/containers/NotFound.jsx | 14 - www/containers/Props.jsx | 138 - www/containers/Scaffold.jsx | 34 - www/containers/SidePanel.jsx | 45 - .../components/GettingStarted/Contributing.md | 49 - .../components/PropTypeTable/index.jsx | 64 - .../components/PropTypeTable/styles.css | 37 - www/containers/components/SearchBar/index.jsx | 14 - .../components/SearchBar/styles.css | 3 - www/containers/props.json | 6857 -- www/containers/routes.js | 460 - www/containers/styles.css | 235 - www/containers/theme.js | 104 - .../Design System/DesignGuide.stories.mdx | 30 + .../Design System/Tokens/borders.stories.mdx | 11 + .../Design System/Tokens/colours.stories.mdx | 10 + .../Design System/Tokens/index.stories.mdx | 37 + .../Tokens/typography.stories.mdx | 10 + .../Getting Started/Contributing.stories.mdx | 40 + .../Getting Started/Installation.stories.mdx} | 8 +- .../Getting Started/Introduction.stories.mdx | 50 + www/examples/Accordion.mdx | 57 - www/examples/ActionPanel.mdx | 154 - www/examples/Alert.mdx | 37 - www/examples/AlertInput.mdx | 83 - www/examples/Anchor.mdx | 243 - www/examples/Avatar.mdx | 26 - www/examples/Breadcrumb.mdx | 59 - www/examples/Button.mdx | 227 - www/examples/ButtonGroup.mdx | 75 - www/examples/Card.mdx | 35 - www/examples/Carousel.mdx | 79 - www/examples/Checkbox.mdx | 80 - www/examples/CheckboxGroup.mdx | 176 - www/examples/ConfirmModal.mdx | 43 - www/examples/CountBadge.mdx | 10 - www/examples/DatePicker.mdx | 32 - www/examples/DesignGuide.mdx | 26 - www/examples/Empty.mdx | 34 - www/examples/FilePicker.mdx | 23 - www/examples/FlexibleSpacer.mdx | 20 - www/examples/HelpIconPopover.mdx | 34 - www/examples/ImageCropper.mdx | 27 - www/examples/InformationBox.mdx | 30 - www/examples/Introduction.mdx | 43 - www/examples/Navigation.mdx | 36 - www/examples/OverlayLoader.mdx | 47 - www/examples/PageTitle.mdx | 20 - www/examples/PagedGrid.mdx | 23 - www/examples/Pagination.mdx | 35 - www/examples/Panel.mdx | 32 - www/examples/Paragraph.mdx | 64 - www/examples/Pill.mdx | 48 - www/examples/Popover.mdx | 143 - www/examples/PrettyDiff.mdx | 17 - www/examples/Radio.mdx | 25 - www/examples/RadioGroup.mdx | 98 - www/examples/RichTextEditor.mdx | 207 - www/examples/Search.mdx | 92 - www/examples/SearchableCheckList.mdx | 59 - www/examples/Select.mdx | 160 - www/examples/Skeleton.mdx | 34 - www/examples/Slicey.mdx | 16 - www/examples/Spinner.mdx | 16 - www/examples/SplitPane.mdx | 16 - www/examples/Statistic.mdx | 11 - www/examples/StatusPill.mdx | 68 - www/examples/SvgSymbol.mdx | 26 - www/examples/Switch.mdx | 55 - www/examples/Tab.mdx | 65 - www/examples/Tag.mdx | 73 - www/examples/TextEllipsis.mdx | 30 - www/examples/Textarea.mdx | 17 - www/examples/Tile.mdx | 48 - www/examples/TileGrid.mdx | 105 - www/examples/Toast.mdx | 94 - www/examples/Totals.mdx | 18 - www/examples/UserListPicker.mdx | 58 - www/examples/styles.css | 292 - www/index.html | 32 - www/storybook/Decorators/Horizontal.jsx | 6 + www/storybook/Decorators/Stretch.jsx | 10 + www/storybook/Decorators/Vertical.jsx | 10 + .../Decorators/controlledDecorator.js | 48 + www/storybook/Decorators/index.js | 4 + www/storybook/Overview/index.mdx | 32 + www/storybook/analytics/preset.js | 5 + www/storybook/analytics/register.js | 34 + www/storybook/storybook.css | 82 + 288 files changed, 47063 insertions(+), 29872 deletions(-) create mode 100644 .storybook/main.js create mode 100644 .storybook/manager-head.html create mode 100644 .storybook/manager.js create mode 100644 .storybook/preview.js create mode 100644 .storybook/theme.js delete mode 100644 config/webpack.config.dev.build.js delete mode 100644 config/webpack.config.dev.js delete mode 100644 config/webpack.config.prod.js delete mode 100644 config/webpackDevServer.config.js create mode 100644 plop-templates/component/index.jsx.hbs create mode 100644 plop-templates/component/index.spec.jsx.hbs create mode 100644 plop-templates/component/styles.css.hbs create mode 100644 plop-templates/component/{{componentName}}.stories.jsx.hbs create mode 100644 plop-templates/component/{{componentName}}.stories.mdx.hbs create mode 100644 plopfile.mjs delete mode 100644 scripts/start.js create mode 100644 src/components/Accordion/Accordion.stories.jsx create mode 100644 src/components/Accordion/Accordion.stories.mdx create mode 100644 src/components/ActionPanel/ActionPanel.stories.jsx create mode 100644 src/components/ActionPanel/ActionPanel.stories.mdx create mode 100644 src/components/Alert/Alert.stories.jsx create mode 100644 src/components/Alert/Alert.stories.mdx create mode 100644 src/components/AlertInput/AlertInput.stories.jsx create mode 100644 src/components/AlertInput/AlertInput.stories.mdx create mode 100644 src/components/Anchor/Anchor.stories.jsx create mode 100644 src/components/Anchor/Anchor.stories.mdx create mode 100644 src/components/Avatar/Avatar.stories.jsx create mode 100644 src/components/Avatar/Avatar.stories.mdx rename www/examples/BorderedWell.mdx => src/components/BorderedWell/BorderedWell.stories.jsx (52%) create mode 100644 src/components/BorderedWell/BorderedWell.stories.mdx create mode 100644 src/components/Breadcrumb/Breadcrumb.stories.jsx create mode 100644 src/components/Breadcrumb/Breadcrumb.stories.mdx create mode 100644 src/components/Button/Button.stories.jsx create mode 100644 src/components/Button/Button.stories.mdx create mode 100644 src/components/ButtonGroup/ButtonGroup.stories.jsx create mode 100644 src/components/ButtonGroup/ButtonGroup.stories.mdx create mode 100644 src/components/Card/Card.stories.jsx create mode 100644 src/components/Card/Card.stories.mdx create mode 100644 src/components/Carousel/Carousel.stories.jsx create mode 100644 src/components/Carousel/Carousel.stories.mdx create mode 100644 src/components/Checkbox/Checkbox.stories.jsx create mode 100644 src/components/Checkbox/Checkbox.stories.mdx create mode 100644 src/components/CheckboxGroup/CheckboxGroup.stories.jsx create mode 100644 src/components/CheckboxGroup/CheckboxGroup.stories.mdx create mode 100644 src/components/ConfirmModal/ConfirmModal.stories.jsx create mode 100644 src/components/ConfirmModal/ConfirmModal.stories.mdx create mode 100644 src/components/CountBadge/CountBadge.stories.jsx create mode 100644 src/components/CountBadge/CountBadge.stories.mdx create mode 100644 src/components/DatePicker/DatePicker.stories.jsx create mode 100644 src/components/DatePicker/DatePicker.stories.mdx create mode 100644 src/components/Empty/Empty.stories.jsx create mode 100644 src/components/Empty/Empty.stories.mdx create mode 100644 src/components/FilePicker/FilePicker.stories.jsx create mode 100644 src/components/FilePicker/FilePicker.stories.mdx create mode 100644 src/components/FlexibleSpacer/FlexibleSpacer.stories.jsx create mode 100644 src/components/FlexibleSpacer/FlexibleSpacer.stories.mdx create mode 100644 src/components/FormGroup/FormGroup.stories.jsx create mode 100644 src/components/FormGroup/FormGroup.stories.mdx rename www/examples/Grid.mdx => src/components/Grid/Grid.stories.jsx (59%) create mode 100644 src/components/Grid/Grid.stories.mdx create mode 100644 src/components/HelpIconPopover/HelpIconPopover.stories.jsx create mode 100644 src/components/HelpIconPopover/HelpIconPopover.stories.mdx create mode 100644 src/components/ImageCropper/ImageCropper.stories.jsx create mode 100644 src/components/ImageCropper/ImageCropper.stories.mdx create mode 100644 src/components/InformationBox/InformationBox.stories.jsx create mode 100644 src/components/InformationBox/InformationBox.stories.mdx rename www/examples/ListPicker.mdx => src/components/ListPicker/ListPicker.stories.jsx (66%) create mode 100644 src/components/ListPicker/ListPicker.stories.mdx create mode 100644 src/components/ListPickerPure/ListPickerPure.stories.jsx create mode 100644 src/components/ListPickerPure/ListPickerPure.stories.mdx create mode 100644 src/components/Navigation/Nav.stories.jsx create mode 100644 src/components/Navigation/Nav.stories.mdx create mode 100644 src/components/OverlayLoader/OverlayLoader.stories.jsx create mode 100644 src/components/OverlayLoader/OverlayLoader.stories.mdx create mode 100644 src/components/PageTitle/PageTitle.stories.jsx create mode 100644 src/components/PageTitle/PageTitle.stories.mdx create mode 100644 src/components/PagedGrid/PagedGrid.stories.jsx create mode 100644 src/components/PagedGrid/PagedGrid.stories.mdx create mode 100644 src/components/Pagination/Pagination.stories.jsx create mode 100644 src/components/Pagination/Pagination.stories.mdx create mode 100644 src/components/Panel/Panel.stories.jsx create mode 100644 src/components/Panel/Panel.stories.mdx create mode 100644 src/components/Paragraph/Paragraph.stories.jsx create mode 100644 src/components/Paragraph/Paragraph.stories.mdx create mode 100644 src/components/Pill/Pill.stories.jsx create mode 100644 src/components/Pill/Pill.stories.mdx create mode 100644 src/components/Popover/Popover.stories.jsx create mode 100644 src/components/Popover/Popover.stories.mdx create mode 100644 src/components/PrettyDiff/PrettyDiff.stories.jsx create mode 100644 src/components/PrettyDiff/PrettyDiff.stories.mdx create mode 100644 src/components/Radio/Radio.stories.jsx create mode 100644 src/components/Radio/Radio.stories.mdx create mode 100644 src/components/RadioGroup/RadioGroup.stories.jsx create mode 100644 src/components/RadioGroup/RadioGroup.stories.mdx create mode 100644 src/components/RichTextEditor/RichTextEditor.stories.jsx create mode 100644 src/components/RichTextEditor/RichTextEditor.stories.mdx create mode 100644 src/components/Search/Search.stories.jsx create mode 100644 src/components/Search/Search.stories.mdx create mode 100644 src/components/SearchableCheckList/SearchableCheckList.stories.jsx create mode 100644 src/components/SearchableCheckList/SearchableCheckList.stories.mdx create mode 100644 src/components/Select/Select.Async.stories.mdx create mode 100644 src/components/Select/Select.Creatable.stories.mdx create mode 100644 src/components/Select/Select.stories.jsx create mode 100644 src/components/Select/Select.stories.mdx create mode 100644 src/components/Skeleton/Skeleton.stories.jsx create mode 100644 src/components/Skeleton/Skeleton.stories.mdx create mode 100644 src/components/Slicey/Slicey.stories.jsx create mode 100644 src/components/Slicey/Slicey.stories.mdx create mode 100644 src/components/Spinner/Spinner.stories.jsx create mode 100644 src/components/Spinner/Spinner.stories.mdx create mode 100644 src/components/SplitPane/SplitPane.stories.jsx create mode 100644 src/components/SplitPane/SplitPane.stories.mdx create mode 100644 src/components/Statistic/Statistic.stories.jsx create mode 100644 src/components/Statistic/Statistic.stories.mdx create mode 100644 src/components/StatusPill/StatusPill.stories.jsx create mode 100644 src/components/StatusPill/StatusPill.stories.mdx create mode 100644 src/components/SvgSymbol/SvgSymbol.stories.jsx create mode 100644 src/components/SvgSymbol/SvgSymbol.stories.mdx create mode 100644 src/components/Switch/Switch.stories.jsx create mode 100644 src/components/Switch/Switch.stories.mdx create mode 100644 src/components/Tabs/Tabs.stories.jsx create mode 100644 src/components/Tabs/Tabs.stories.mdx create mode 100644 src/components/Tag/Tag.stories.jsx create mode 100644 src/components/Tag/Tag.stories.mdx create mode 100644 src/components/TextEllipsis/TextEllipsis.stories.jsx create mode 100644 src/components/TextEllipsis/TextEllipsis.stories.mdx create mode 100644 src/components/Textarea/Textarea.stories.jsx create mode 100644 src/components/Textarea/Textarea.stories.mdx create mode 100644 src/components/Tile/Tile.stories.jsx create mode 100644 src/components/Tile/Tile.stories.mdx create mode 100644 src/components/TileGrid/TileGrid.stories.jsx create mode 100644 src/components/TileGrid/TileGrid.stories.mdx create mode 100644 src/components/Toast/Toast.stories.jsx create mode 100644 src/components/Toast/Toast.stories.mdx create mode 100644 src/components/Totals/Totals.stories.jsx create mode 100644 src/components/Totals/Totals.stories.mdx rename www/examples/TreePicker.mdx => src/components/TreePicker/TreePicker.stories.jsx (73%) create mode 100644 src/components/TreePicker/TreePicker.stories.mdx create mode 100644 src/components/UserListPicker/UserListPicker.stories.jsx create mode 100644 src/components/UserListPicker/UserListPicker.stories.mdx rename www/examples/VerticalNavigation.mdx => src/components/VerticalNavigation/VerticalNav.stories.jsx (86%) create mode 100644 src/components/VerticalNavigation/VerticalNav.stories.mdx rename www/{ => assets}/_redirects (100%) create mode 100644 www/assets/aui--logo.png create mode 100644 www/assets/button/Button-order-form.png create mode 100644 www/assets/button/Button-order-modal.png create mode 100644 www/assets/button/Button-order-ms.png create mode 100644 www/assets/button/Button-variations.png create mode 100644 www/assets/storybook-global.css create mode 100644 www/components/CopyText/index.jsx create mode 100644 www/components/CopyText/styles.css rename www/{containers => }/components/Header/Contributors.jsx (74%) rename www/{containers => }/components/Header/index.jsx (72%) rename www/{containers => }/components/Header/styles.css (86%) create mode 100644 www/components/Stack/index.jsx create mode 100644 www/components/Stack/styles.css rename www/{containers/components => components/tokens}/BorderRadius/index.jsx (100%) rename www/{containers/components => components/tokens}/Colors/index.jsx (90%) rename www/{containers/components => components/tokens}/Colors/useAccessibleContrastRatio.js (100%) rename www/{containers/components => components/tokens}/Token/JSONReference.jsx (90%) rename www/{containers/components => components/tokens}/Token/TokenData.jsx (78%) rename www/{containers/components => components/tokens}/Token/styles.css (100%) rename www/{containers/components => components/tokens}/Typography/index.jsx (100%) rename www/{containers/components => components/tokens}/Typography/styles.css (100%) delete mode 100644 www/containers/App.jsx delete mode 100644 www/containers/CodeBlock.jsx delete mode 100644 www/containers/DesignNotes.jsx delete mode 100644 www/containers/Documentation.jsx delete mode 100644 www/containers/GoogleAnalytics.jsx delete mode 100644 www/containers/NotFound.jsx delete mode 100644 www/containers/Props.jsx delete mode 100644 www/containers/Scaffold.jsx delete mode 100644 www/containers/SidePanel.jsx delete mode 100644 www/containers/components/GettingStarted/Contributing.md delete mode 100644 www/containers/components/PropTypeTable/index.jsx delete mode 100644 www/containers/components/PropTypeTable/styles.css delete mode 100644 www/containers/components/SearchBar/index.jsx delete mode 100644 www/containers/components/SearchBar/styles.css delete mode 100644 www/containers/props.json delete mode 100644 www/containers/routes.js delete mode 100644 www/containers/styles.css delete mode 100644 www/containers/theme.js create mode 100644 www/documentation/Design System/DesignGuide.stories.mdx create mode 100644 www/documentation/Design System/Tokens/borders.stories.mdx create mode 100644 www/documentation/Design System/Tokens/colours.stories.mdx create mode 100644 www/documentation/Design System/Tokens/index.stories.mdx create mode 100644 www/documentation/Design System/Tokens/typography.stories.mdx create mode 100644 www/documentation/Getting Started/Contributing.stories.mdx rename www/{containers/components/GettingStarted/Installation.md => documentation/Getting Started/Installation.stories.mdx} (84%) create mode 100644 www/documentation/Getting Started/Introduction.stories.mdx delete mode 100644 www/examples/Accordion.mdx delete mode 100644 www/examples/ActionPanel.mdx delete mode 100644 www/examples/Alert.mdx delete mode 100644 www/examples/AlertInput.mdx delete mode 100644 www/examples/Anchor.mdx delete mode 100644 www/examples/Avatar.mdx delete mode 100644 www/examples/Breadcrumb.mdx delete mode 100644 www/examples/Button.mdx delete mode 100644 www/examples/ButtonGroup.mdx delete mode 100644 www/examples/Card.mdx delete mode 100644 www/examples/Carousel.mdx delete mode 100644 www/examples/Checkbox.mdx delete mode 100644 www/examples/CheckboxGroup.mdx delete mode 100644 www/examples/ConfirmModal.mdx delete mode 100644 www/examples/CountBadge.mdx delete mode 100644 www/examples/DatePicker.mdx delete mode 100644 www/examples/DesignGuide.mdx delete mode 100644 www/examples/Empty.mdx delete mode 100644 www/examples/FilePicker.mdx delete mode 100644 www/examples/FlexibleSpacer.mdx delete mode 100644 www/examples/HelpIconPopover.mdx delete mode 100644 www/examples/ImageCropper.mdx delete mode 100644 www/examples/InformationBox.mdx delete mode 100644 www/examples/Introduction.mdx delete mode 100644 www/examples/Navigation.mdx delete mode 100644 www/examples/OverlayLoader.mdx delete mode 100644 www/examples/PageTitle.mdx delete mode 100644 www/examples/PagedGrid.mdx delete mode 100644 www/examples/Pagination.mdx delete mode 100644 www/examples/Panel.mdx delete mode 100644 www/examples/Paragraph.mdx delete mode 100644 www/examples/Pill.mdx delete mode 100644 www/examples/Popover.mdx delete mode 100644 www/examples/PrettyDiff.mdx delete mode 100644 www/examples/Radio.mdx delete mode 100644 www/examples/RadioGroup.mdx delete mode 100644 www/examples/RichTextEditor.mdx delete mode 100644 www/examples/Search.mdx delete mode 100644 www/examples/SearchableCheckList.mdx delete mode 100644 www/examples/Select.mdx delete mode 100644 www/examples/Skeleton.mdx delete mode 100644 www/examples/Slicey.mdx delete mode 100644 www/examples/Spinner.mdx delete mode 100644 www/examples/SplitPane.mdx delete mode 100644 www/examples/Statistic.mdx delete mode 100644 www/examples/StatusPill.mdx delete mode 100644 www/examples/SvgSymbol.mdx delete mode 100644 www/examples/Switch.mdx delete mode 100644 www/examples/Tab.mdx delete mode 100644 www/examples/Tag.mdx delete mode 100644 www/examples/TextEllipsis.mdx delete mode 100644 www/examples/Textarea.mdx delete mode 100644 www/examples/Tile.mdx delete mode 100644 www/examples/TileGrid.mdx delete mode 100644 www/examples/Toast.mdx delete mode 100644 www/examples/Totals.mdx delete mode 100644 www/examples/UserListPicker.mdx delete mode 100644 www/examples/styles.css delete mode 100644 www/index.html create mode 100644 www/storybook/Decorators/Horizontal.jsx create mode 100644 www/storybook/Decorators/Stretch.jsx create mode 100644 www/storybook/Decorators/Vertical.jsx create mode 100644 www/storybook/Decorators/controlledDecorator.js create mode 100644 www/storybook/Decorators/index.js create mode 100644 www/storybook/Overview/index.mdx create mode 100644 www/storybook/analytics/preset.js create mode 100644 www/storybook/analytics/register.js create mode 100644 www/storybook/storybook.css diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 000000000..8e9cd023e --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,32 @@ +const path = require('path'); + +module.exports = { + stories: ['../www/documentation', '../src'], + addons: [ + '@storybook/addon-docs', + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-a11y', + '../www/storybook/analytics/preset.js', + ], + framework: '@storybook/react', + staticDirs: ['../www/assets'], + + core: { + builder: 'webpack5', + enableCrashReports: false, + }, + // https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config + webpackFinal: async (config) => { + config.module.rules.push({ + test: /\.css$/i, + use: [ + { + loader: 'postcss-loader', + }, + ], + include: path.resolve(__dirname, '../'), + }); + return config; + }, +}; diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html new file mode 100644 index 000000000..201153c42 --- /dev/null +++ b/.storybook/manager-head.html @@ -0,0 +1,28 @@ + + + + + + + + diff --git a/.storybook/manager.js b/.storybook/manager.js new file mode 100644 index 000000000..6d6534f28 --- /dev/null +++ b/.storybook/manager.js @@ -0,0 +1,6 @@ +import { addons } from '@storybook/addons'; +import theme from './theme'; + +addons.setConfig({ + theme, +}); diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 000000000..a9e1ac340 --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,41 @@ +import theme from './theme'; +import { Vertical } from '../www/storybook/Decorators'; +import Overview from '../www/storybook/Overview/index.mdx'; +import '../src/styles/bootstrap-custom.css'; +import '../www/storybook/storybook.css'; + +export const parameters = { + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { + matchers: { + date: /Date$/, + }, + }, + options: { + storySort: { + order: [ + 'Getting Started', + ['Introduction', 'Installation', 'Contributing'], + 'Design System', + ['Design Guide', 'Tokens', ['Overview', 'Colours', 'Typography', 'Border']], + 'Components', + 'Pending Review', + ], + }, + }, + backgrounds: { + grid: { + cellSize: 12, + }, + }, + viewMode: 'docs', + docs: { + theme: theme, + components: { + Overview, + }, + }, +}; + +// this is the default decorator, which will wrap all stories +export const decorators = [Vertical]; diff --git a/.storybook/theme.js b/.storybook/theme.js new file mode 100644 index 000000000..5a006b1ef --- /dev/null +++ b/.storybook/theme.js @@ -0,0 +1,38 @@ +import { create } from '@storybook/theming'; + +export default create({ + brandTitle: 'Adslot UI', + brandUrl: 'https://ui.adslot.com', + brandImage: '/aui--logo.png', + gridCellSize: 12, + base: 'light', + + colorPrimary: '#006dcc', + colorSecondary: '#006dcc', + + // UI + appBg: 'white', + appContentBg: '#ffffff', + appBorderColor: '#e8e8e8', + appBorderRadius: 3, + + // Typography + fontBase: '"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif', + fontCode: 'monospace', + + // Text colors + textColor: '#333', + textInverseColor: 'rgba(255,255,255,0.9)', + textMutedColor: '#838383', + + // Toolbar default and active colors + barTextColor: '#5a5a5a', + barSelectedColor: '#5a5a5a', + barBg: '#f9f9f9', + + // Form colors + inputBg: 'white', + inputBorder: '#d3d3d3', + inputTextColor: '#333', + inputBorderRadius: 3, +}); diff --git a/config/paths.js b/config/paths.js index cf30e8cee..4d95e7da4 100644 --- a/config/paths.js +++ b/config/paths.js @@ -12,8 +12,6 @@ module.exports = { appDistEs: resolveApp('es'), appDistCjs: resolveApp('lib'), appPublic: resolveApp('www'), - appHtml: resolveApp('www/index.html'), - appIndexJs: resolveApp('www/index.jsx'), appDistJs: resolveApp('src/index.js'), appPackageJson: resolveApp('package.json'), appDemo: resolveApp('www'), diff --git a/config/webpack.config.dev.build.js b/config/webpack.config.dev.build.js deleted file mode 100644 index ecd6d6cf9..000000000 --- a/config/webpack.config.dev.build.js +++ /dev/null @@ -1,105 +0,0 @@ -const webpack = require('webpack'); -const { merge: webpackMerge } = require('webpack-merge'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const commonConfig = require('./webpack.config'); -const paths = require('./paths'); - -// This is the development configuration. -// It is focused on developer experience and fast rebuilds. -// The production configuration is different and lives in a separate file. -module.exports = webpackMerge(commonConfig, { - mode: 'development', - // You may want 'eval' instead if you prefer to see the compiled output in DevTools. - // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343. - devtool: 'eval-source-map', - entry: paths.appSrc, - output: { - path: paths.appDist, - filename: 'adslot-ui.js', - libraryTarget: 'umd', - library: 'AdslotUI', - }, - externals: { - lodash: { - root: '_', - commonjs2: 'lodash', - commonjs: 'lodash', - amd: 'lodash', - }, - react: { - root: 'React', - commonjs2: 'react', - commonjs: 'react', - amd: 'react', - }, - 'react-dom': { - root: 'ReactDOM', - commonjs2: 'react-dom', - commonjs: 'react-dom', - amd: 'react-dom', - }, - moment: { - root: 'moment', - commonjs2: 'moment', - commonjs: 'moment', - amd: 'moment', - }, - }, - module: { - strictExportPresence: true, - rules: [ - { - test: /\.(eot|ttf|woff|woff2)$/, - type: 'asset', - parser: { - dataUrlCondition: { maxSize: 8 * 1024 }, - }, - }, - { - test: /\.(js|jsx)$/, - include: paths.appSrc, - loader: 'babel-loader', - options: { - cacheDirectory: true, - }, - }, - { - test: /\.css$/i, - use: [ - MiniCssExtractPlugin.loader, - { - loader: 'css-loader', - options: { - importLoaders: 1, - sourceMap: false, - }, - }, - { - loader: 'postcss-loader', - }, - ], - }, - { - test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/], - type: 'asset', - parser: { - dataUrlCondition: { maxSize: 10000 }, - }, - generator: { - filename: 'static/media/[name].[hash:8][ext]', - }, - }, - ], - }, - plugins: [ - new MiniCssExtractPlugin({ - filename: 'adslot-ui.css', - }), - // Moment.js is an extremely popular library that bundles large locale files - // by default due to how Webpack interprets its code. This is a practical - // solution that requires the user to opt into importing specific locales. - // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack - // You can remove this if you don't use Moment.js: - new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ }), - ], -}); diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js deleted file mode 100644 index 777b65c6b..000000000 --- a/config/webpack.config.dev.js +++ /dev/null @@ -1,123 +0,0 @@ -const path = require('path'); -const emoji = require('remark-emoji'); -const webpack = require('webpack'); -const { merge: webpackMerge } = require('webpack-merge'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); -const commonConfig = require('./webpack.config'); -const paths = require('./paths'); - -// This is the development configuration. -// It is focused on developer experience and fast rebuilds. -// The production configuration is different and lives in a separate file. -module.exports = webpackMerge(commonConfig, { - mode: 'development', - // You may want 'eval' instead if you prefer to see the compiled output in DevTools. - // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343. - devtool: 'cheap-module-source-map', - // These are the "entry points" to our application. - // This means they will be the "root" imports that are included in JS bundle. - // The first two entry points enable "hot" CSS and auto-refreshes for JS. - entry: ['webpack-dev-server/client?/', 'webpack/hot/dev-server', paths.appIndexJs], - output: { - // Next line is not used in dev but WebpackDevServer crashes without it: - path: console.log(paths.appBuild) || paths.appBuild, - // Add /* filename */ comments to generated require()s in the output. - pathinfo: true, - // This does not produce a real file. It's just the virtual path that is - // served by WebpackDevServer in development. This is the JS bundle - // containing code from all our entry points, and the Webpack runtime. - filename: 'static/js/[id].bundle.js', - // There are also additional JS chunk files if you use code splitting. - chunkFilename: 'static/js/[name].chunk.js', - // This is the URL that app is served from. We use "/" in development. - publicPath: '/', - // Point sourcemap entries to original disk location (format as URL on Windows) - devtoolModuleFilenameTemplate: (info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'), - }, - cache: { type: 'filesystem' }, - module: { - rules: [ - { - test: /\.(md|mdx)?$/, - include: [paths.appSrc, paths.appDemo], - use: [ - { loader: 'babel-loader' }, - { - loader: '@mdx-js/loader', - options: { - remarkPlugins: [emoji], - }, - }, - ], - }, - { - test: /\.(eot|ttf|woff|woff2)$/, - type: 'asset', - parser: { - dataUrlCondition: { maxSize: 8 * 1024 }, - }, - }, - { - test: /\.(js|jsx)$/, - include: [paths.appSrc, paths.appDemo], - loader: 'babel-loader', - options: { - cacheDirectory: true, - }, - }, - { - test: /\.css$/i, - sideEffects: true, - use: [ - 'style-loader', - { - loader: 'css-loader', - options: { - importLoaders: 1, - }, - }, - { - loader: 'postcss-loader', - }, - ], - }, - { - test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/], - type: 'asset', - generator: { - filename: 'static/media/[name].[hash:8][ext]', - }, - }, - ], - }, - optimization: { - splitChunks: { - chunks: 'all', - name: 'vendors', - }, - runtimeChunk: 'single', - }, - plugins: [ - new HtmlWebpackPlugin({ - inject: true, - template: paths.appHtml, - }), - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': '"development"', - }), - // This is necessary to emit hot updates (currently CSS only): - new webpack.HotModuleReplacementPlugin(), - // Watcher doesn't work well if you mistype casing in a path so we use - // a plugin that prints an error when you attempt to do this. - // See https://github.com/facebookincubator/create-react-app/issues/240 - new CaseSensitivePathsPlugin(), - // Moment.js is an extremely popular library that bundles large locale files - // by default due to how Webpack interprets its code. This is a practical - // solution that requires the user to opt into importing specific locales. - // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack - // You can remove this if you don't use Moment.js: - new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ }), - new webpack.ProgressPlugin(), - ], -}); diff --git a/config/webpack.config.dist.js b/config/webpack.config.dist.js index cf42b1cec..fa31a4bdc 100644 --- a/config/webpack.config.dist.js +++ b/config/webpack.config.dist.js @@ -1,4 +1,3 @@ -const emoji = require('remark-emoji'); const webpack = require('webpack'); const { merge: webpackMerge } = require('webpack-merge'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); @@ -54,19 +53,6 @@ module.exports = webpackMerge(commonConfig, { }, module: { rules: [ - { - test: /\.(md|mdx)?$/, - include: [paths.appSrc, paths.appDemo], - use: [ - { loader: 'babel-loader' }, - { - loader: '@mdx-js/loader', - options: { - remarkPlugins: [emoji], - }, - }, - ], - }, { test: /\.(eot|ttf|woff|woff2)$/, type: 'asset', diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js deleted file mode 100644 index 8002d33a6..000000000 --- a/config/webpack.config.prod.js +++ /dev/null @@ -1,196 +0,0 @@ -const webpack = require('webpack'); -const emoji = require('remark-emoji'); -const { merge: webpackMerge } = require('webpack-merge'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const TerserPlugin = require('terser-webpack-plugin'); -const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); -const commonConfig = require('./webpack.config'); -const paths = require('./paths'); - -// Assert this just to be safe. -if (process.env.NODE_ENV !== 'production') { - throw new Error('Production builds must have NODE_ENV=dist.'); -} - -// This dist is used for creating the minified .css file. -// The output .js file will be removed. -module.exports = webpackMerge(commonConfig, { - mode: 'production', - // Don't attempt to continue if there are any errors. - bail: true, - devtool: false, - entry: paths.appDemo, - output: { - // The build folder. - path: paths.appBuild, - // Generated JS file names (with nested folders). - // There will be one main bundle, and one file per asynchronous chunk. - // We don't currently advertise code splitting but Webpack supports it. - filename: 'static/adslot-ui-docs.prod.js', - publicPath: '/', - libraryTarget: 'umd', - library: 'AdslotUI', - }, - externals: { - lodash: { - root: '_', - commonjs2: 'lodash', - commonjs: 'lodash', - amd: 'lodash', - }, - react: { - root: 'React', - commonjs2: 'react', - commonjs: 'react', - amd: 'react', - }, - 'react-dom': { - root: 'ReactDOM', - commonjs2: 'react-dom', - commonjs: 'react-dom', - amd: 'react-dom', - }, - moment: { - root: 'moment', - commonjs2: 'moment', - commonjs: 'moment', - amd: 'moment', - }, - }, - module: { - rules: [ - { - test: /\.(md|mdx)?$/, - include: [paths.appSrc, paths.appDemo], - use: [ - { loader: 'babel-loader' }, - { - loader: '@mdx-js/loader', - options: { - remarkPlugins: [emoji], - }, - }, - ], - }, - { - test: /\.(eot|ttf|woff|woff2)$/, - type: 'asset', - parser: { - dataUrlCondition: { maxSize: 8 * 1024 }, - }, - }, - { - test: /\.(js|jsx)$/, - include: [paths.appSrc, paths.appDemo], - loader: 'babel-loader', - }, - { - test: /\.css$/i, - use: [ - MiniCssExtractPlugin.loader, - { - loader: 'css-loader', - options: { - importLoaders: 1, - sourceMap: false, - }, - }, - { - loader: 'postcss-loader', - }, - ], - }, - { - test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/], - type: 'asset', - generator: { - filename: 'static/media/[name].[hash:8][ext]', - }, - }, - ], - }, - optimization: { - minimizer: [ - new TerserPlugin({ - parallel: true, - extractComments: false, - terserOptions: { - ecma: 8, - compress: { - warnings: false, - comparisons: false, - inline: 2, - drop_console: true, - }, - output: { - comments: false, - }, - }, - }), - new CssMinimizerPlugin({ - minify: (data, inputMap, minimizerOptions) => { - const cssnano = require('cssnano'); - const safe = require('postcss-safe-parser'); - - const [[filename, input]] = Object.entries(data); - - const postcssOptions = { - from: filename, - to: filename, - map: false, - parser: safe, - }; - - return cssnano({ - preset: [ - 'default', - { - convertValues: false, - }, - ], - }) - .process(input, postcssOptions) - .then((result) => { - return { - code: result.css, - map: result.map, - warnings: result.warnings(), - }; - }); - }, - }), - ], - }, - plugins: [ - // Generates an `index.html` file with the - - - - -
- - - - - - diff --git a/www/storybook/Decorators/Horizontal.jsx b/www/storybook/Decorators/Horizontal.jsx new file mode 100644 index 000000000..07cb2c50a --- /dev/null +++ b/www/storybook/Decorators/Horizontal.jsx @@ -0,0 +1,6 @@ +import React from 'react'; +import Stack from '../../components/Stack'; + +export function Horizontal(Story) { + return {Story()}; +} diff --git a/www/storybook/Decorators/Stretch.jsx b/www/storybook/Decorators/Stretch.jsx new file mode 100644 index 000000000..b4f91c158 --- /dev/null +++ b/www/storybook/Decorators/Stretch.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import Stack from '../../components/Stack'; + +export function Stretch(Story) { + return ( + + {Story()} + + ); +} diff --git a/www/storybook/Decorators/Vertical.jsx b/www/storybook/Decorators/Vertical.jsx new file mode 100644 index 000000000..fca694137 --- /dev/null +++ b/www/storybook/Decorators/Vertical.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import Stack from '../../components/Stack'; + +export function Vertical(Story) { + return ( + + {Story()} + + ); +} diff --git a/www/storybook/Decorators/controlledDecorator.js b/www/storybook/Decorators/controlledDecorator.js new file mode 100644 index 000000000..0f392490c --- /dev/null +++ b/www/storybook/Decorators/controlledDecorator.js @@ -0,0 +1,48 @@ +import React from 'react'; +import { action } from '@storybook/addon-actions'; + +// adapted from https://github.com/mondaycom/monday-ui-react-core/blob/master/src/storybook/functions/create-component-story.js +/** + * Creates a decorator which maps a callback prop to an input prop. + * For example: mapping the onChange callback of a Select component to its currentValue prop. + * Useful for adding interactivity to stories of controlled components. + * Additionally, the callback will trigger a Storybook action, that can be seen on the Actions tab. + * @param {string} actionName - the name of the action prop of the component in the story. For example, "setValue" or "onChange". + * @param {string} linkedToPropValue - the name of the prop which should be updated when the prop of "actionName" is called. For example, "value". + * @param {boolean} isBooleanToggle - use true/false toggle rather than calling actionName with {@link linkedToPropValue}. + * @returns A decorator for storybook which updates the {@link linkedToPropValue} input of the component, whenever {@link actionName} is called. + */ +export function controlledDecorator(actionName, linkedToPropValue, isBooleanToggle) { + return (Story, context) => { + const [propValue, setPropValue] = React.useState(context.initialArgs[linkedToPropValue]); + const createAction = React.useMemo(() => action(actionName), []); + + const injectedCallback = React.useCallback( + (newPropValue) => { + if (isBooleanToggle) { + setPropValue((p) => { + createAction(!p); + return !p; + }); + } else { + let value = newPropValue; + if (newPropValue?.target?.value) value = newPropValue.target.value; + setPropValue(value); + createAction(value); + } + }, + [setPropValue, createAction] + ); + const contextValue = React.useRef(context.args[linkedToPropValue]); + + if (contextValue.current !== context.args[linkedToPropValue]) { + setPropValue(context.args[linkedToPropValue]); + } else { + context.args[actionName] = injectedCallback; + context.args[linkedToPropValue] = propValue; + } + contextValue.current = propValue; + + return Story(); + }; +} diff --git a/www/storybook/Decorators/index.js b/www/storybook/Decorators/index.js new file mode 100644 index 000000000..baea84f1e --- /dev/null +++ b/www/storybook/Decorators/index.js @@ -0,0 +1,4 @@ +export { Vertical } from './Vertical'; +export { Horizontal } from './Horizontal'; +export { Stretch } from './Stretch'; +export { controlledDecorator } from './controlledDecorator'; diff --git a/www/storybook/Overview/index.mdx b/www/storybook/Overview/index.mdx new file mode 100644 index 000000000..8a8b59736 --- /dev/null +++ b/www/storybook/Overview/index.mdx @@ -0,0 +1,32 @@ +import _ from 'lodash'; +import { ArgsTable } from '@storybook/addon-docs'; + +
+

{props.component?.displayName || props.component?.name || props.title}

+
+ + + +

+ Overview +

+ +
{props.children}
+ +<> +{props.component && ( +<> + +## Props + + + + +)} + diff --git a/www/storybook/analytics/preset.js b/www/storybook/analytics/preset.js new file mode 100644 index 000000000..948b0256e --- /dev/null +++ b/www/storybook/analytics/preset.js @@ -0,0 +1,5 @@ +function managerEntries(entry = []) { + return [...entry, require.resolve('./register')]; +} + +module.exports = { managerEntries }; diff --git a/www/storybook/analytics/register.js b/www/storybook/analytics/register.js new file mode 100644 index 000000000..e9458e908 --- /dev/null +++ b/www/storybook/analytics/register.js @@ -0,0 +1,34 @@ +const { addons } = require('@storybook/addons'); +const { STORY_CHANGED, STORY_ERRORED, STORY_MISSING } = require('@storybook/core-events'); +const GA_TRACKING_ID = 'UA-18273448-24'; + +addons.register('analytics', (api) => { + const gtag = window.gtag; + if (process.env.NODE_ENV !== 'production') return; + if (typeof gtag !== 'function') return; + api.on(STORY_CHANGED, () => { + const { path } = api.getUrlState(); + + if (typeof gtag === 'function') { + gtag('config', GA_TRACKING_ID, { + page_title: document.title, + page_location: window.location.href, + page_path: path, + }); + } + }); + + api.on(STORY_ERRORED, ({ description }) => { + gtag('event', 'exception', { + description, + fatal: true, + }); + }); + + api.on(STORY_MISSING, (id) => { + gtag('event', 'exception', { + description: `attempted to render ${id}, but it is missing`, + fatal: false, + }); + }); +}); diff --git a/www/storybook/storybook.css b/www/storybook/storybook.css new file mode 100644 index 000000000..885c331b9 --- /dev/null +++ b/www/storybook/storybook.css @@ -0,0 +1,82 @@ +/* + Storybook docs UI overrides + + NB: this file is loaded inside the story iframe. + To modify global (sidebar/toolbar) css, edit storybook-global.css +*/ + +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); +@import url('../../src/styles/variable.css'); + +.story-wrapper { + padding: 36px 24px; + font-size: 12px; +} + +.sbdocs { + & .sbdocs-p { + font-size: 16px; + } + + & .aui-story-header { + border-bottom: 2px solid #333; + margin: 20px -18px 38px; + + & h1 { + margin: 0; + padding-bottom: 6px; + padding-left: 18px; + padding-right: 18px; + display: inline-flex; + border-bottom: 5px solid; + } + } + + & .aui-story-toc { + padding-left: 18px; + margin-bottom: 32px; + + & li { + color: $color-primary-base; + font-size: 18px; + } + } + + & .aui-story-subheader { + border-bottom: none; + } + + & .sbdocs-preview, + & .docblock-argstable-body, + & .docblock-source { + box-shadow: none; + border: 1px solid $color-border-base; + } + + & h2 { + font-size: 28px; + font-weight: bold; + border-bottom: 2px solid; + margin-bottom: 28px; + } + + & h3 { + font-size: 24px; + border-bottom: none; + } + + & h4 { + font-size: 18px; + } + + & .docs-story > div { + padding: 0; + } + + & .intro-cols { + display: grid; + grid-column-gap: 18px; + margin-top: 30px; + grid-template-columns: 1fr 1fr 1fr; + } +}