From f1f40e7e5c1dcffc6b0ea3d368b00d6e54944dfd Mon Sep 17 00:00:00 2001 From: Raisa Primerova <48605821+RayRedGoose@users.noreply.github.com> Date: Wed, 28 Aug 2024 13:38:49 -0600 Subject: [PATCH] chore!: Upgrade Storybook and Webpack (#2674) Fixes: #2618 We've upgraded Storybook, Webpack, Typescript and Cypress. [category:Infrastructure] Release Note: - In Storybook, each component now has a "Docs" page. This is dedicated to documentation of the component and has examples as it did before. - We now use the Cypress Component runner and not e2e. - Codemod formatting has been updated with a dependency update and docs have been added to reflect the formatting issue. The following have been upgraded: - Storybook 7 - Webpack 5 - Typescript 4.9 - Cypress 13 ### BREAKING CHANGES Codemods formatting have been updated and users will need to format their files after the codemod has been used. Co-authored-by: @NicholasBoll Co-authored-by: manuel.carrera Co-authored-by: @josh-bagwell --- .eslintrc.js | 8 + .github/workflows/pull-request.yml | 5 +- .storybook/{main.js => main.ts} | 82 +- .storybook/manager-head.html | 23 +- .storybook/manager.js | 2 +- .storybook/mdx-code-block-rewrite.js | 12 +- .storybook/preview.js | 94 +- .storybook/readme-panel/register.js | 2 +- .storybook/routes.js | 1 - babel.config.js | 7 +- cypress.config.ts | 26 + cypress.json | 10 - .../ActionBar.spec.tsx} | 102 +- .../Autocomplete.spec.tsx} | 9 +- cypress/component/Avatar.spec.tsx | 39 + cypress/component/Banner.spec.tsx | 21 + .../Breadcrumbs.spec.tsx} | 83 +- .../Button.spec.tsx} | 12 +- .../Checkbox.spec.tsx} | 26 +- .../ColorPicker.spec.tsx} | 73 +- .../ComboboxLabs.spec.tsx} | 58 +- cypress/component/Dialog.spec.tsx | 48 + .../ExpandableContainer.spec.tsx} | 9 +- .../FormField.spec.tsx} | 22 +- .../Hyperlink.spec.tsx} | 20 +- .../Menu.spec.ts => component/Menu.spec.tsx} | 34 +- .../MenuPreview.tsx} | 9 +- cypress/component/Modal.spec.tsx | 709 + .../Pagination.spec.tsx} | 196 +- .../PillPreview.spec.tsx} | 45 +- .../Popup.spec.tsx} | 171 +- .../Radio.spec.tsx} | 17 +- .../RadioPreview.spec.tsx} | 19 +- .../SegmentedControl.spec.tsx} | 36 +- cypress/component/Select.spec.tsx | 601 + .../SidePanelPreview.spec.tsx} | 23 +- .../Switch.spec.tsx} | 17 +- .../Tabs.spec.ts => component/Tabs.spec.tsx} | 143 +- .../TextArea.spec.tsx} | 28 +- .../TextAreaPreview.spec.tsx} | 28 +- .../TextInput.spec.tsx} | 28 +- .../TextInputPreview.spec.tsx} | 28 +- .../Toast.spec.tsx} | 39 +- .../Tooltip.spec.tsx} | 65 +- cypress/helpers/index.ts | 3 +- cypress/helpers/stories.ts | 29 - cypress/integration/Avatar.spec.ts | 39 - cypress/integration/Banner.spec.ts | 23 - cypress/integration/Dialog.spec.ts | 68 - cypress/integration/Modal.spec.ts | 699 - cypress/integration/Select.spec.ts | 695 - cypress/integration/storybook.spec.ts | 39 - cypress/support/commands.ts | 10 +- cypress/support/component-index.html | 103 + cypress/support/component.ts | 58 + .../support/index.d.ts | 0 cypress/support/index.ts | 17 - cypress/tsconfig.json | 8 +- jest/setupTests.ts | 7 +- jest/verifyComponent.tsx | 5 +- .../spec/mapTypeTokensToNewHierarchy.spec.ts | 29 +- .../codemod/lib/v5/spec/renameSpacing.spec.ts | 32 +- .../lib/v6/spec/deprecateCookieBanner.spec.ts | 6 +- .../lib/v6/spec/deprecateHeader.spec.ts | 4 +- .../codemod/lib/v7/spec/updateTabs.spec.ts | 16 +- .../lib/v8/spec/softDeprecateDrawer.spec.ts | 18 +- .../v8/spec/softDeprecatePreviewMenu.spec.ts | 20 +- .../lib/v9/spec/deprecateStack.spec.ts | 22 +- modules/docs/docgen/docParser.ts | 16 +- modules/docs/docgen/spec/docParser.spec.ts | 2 +- modules/docs/index.ts | 1 + modules/docs/lib/ExampleCodeBlock.tsx | 83 + modules/docs/lib/MDXElements.tsx | 3 +- modules/docs/mdx/10.0-UPGRADE-GUIDE.mdx | 2 - modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx | 16 +- modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx | 10 +- modules/docs/mdx/4.0-UPGRADE-GUIDE.mdx | 12 +- modules/docs/mdx/5.0-UPGRADE-GUIDE.mdx | 10 +- modules/docs/mdx/6.0-UPGRADE-GUIDE.mdx | 10 +- modules/docs/mdx/7.0-UPGRADE-GUIDE.mdx | 10 +- modules/docs/mdx/8.0-UPGRADE-GUIDE.mdx | 10 +- modules/docs/mdx/9.0-UPGRADE-GUIDE.mdx | 2 - modules/docs/mdx/API_PATTERN_GUIDELINES.mdx | 10 +- modules/docs/mdx/COMPOUND_COMPONENTS.mdx | 10 +- modules/docs/mdx/CONTRIBUTING.mdx | 10 +- .../docs/mdx/CREATING_COMPOUND_COMPONENTS.mdx | 10 +- modules/docs/mdx/DOCUMENTATION_GUIDELINES.mdx | 46 +- modules/docs/mdx/GETTING_STARTED.mdx | 10 +- modules/docs/mdx/MAINTAINING.mdx | 32 +- modules/docs/mdx/TESTING.mdx | 27 +- .../{changelog.stories.mdx => changelog.mdx} | 10 +- modules/docs/mdx/style-props/STYLE_PROPS.mdx | 50 +- .../mdx/style-props/examples/Background.tsx | 37 +- .../docs/mdx/style-props/examples/Border.tsx | 23 +- .../docs/mdx/style-props/examples/Color.tsx | 32 +- .../docs/mdx/style-props/examples/Depth.tsx | 2 +- .../docs/mdx/style-props/examples/Flex.tsx | 36 +- .../mdx/style-props/examples/FlexItem.tsx | 34 +- .../mdx/style-props/examples/GridItem.tsx | 2 +- .../docs/mdx/style-props/examples/Layout.tsx | 2 +- .../docs/mdx/style-props/examples/Other.tsx | 2 +- .../mdx/style-props/examples/Position.tsx | 4 +- .../docs/mdx/style-props/examples/Space.tsx | 14 +- .../docs/mdx/style-props/examples/Text.tsx | 2 +- .../mdx/{welcome.stories.mdx => welcome.mdx} | 10 +- modules/docs/mdx/welcomePage.tsx | 9 +- modules/docs/package.json | 5 +- modules/docs/utils/build-mdx.js | 1 + .../labs-react/combobox/stories/Combobox.mdx | 55 + .../combobox/stories/Combobox.stories.tsx | 50 + .../combobox/stories/examples/Basic.tsx | 84 + .../stories/examples/DisabledItem.tsx | 84 + .../stories/examples/GroupOfResult.tsx | 84 + .../combobox/stories/examples/Grow.tsx | 84 + .../stories/examples/NoClearButton.tsx | 84 + .../stories/{stories.tsx => examples/RTL.tsx} | 46 +- .../expandable/lib/ExpandableAvatar.tsx | 32 +- ...{Expandable.stories.mdx => Expandable.mdx} | 8 +- .../expandable/stories/Expandable.stories.tsx | 46 + ..._VisualTesting.tsx => testing.stories.tsx} | 17 +- modules/labs-react/package.json | 2 + ...{SearchForm.stories.mdx => SearchForm.mdx} | 7 +- .../search-form/stories/SearchForm.stories.ts | 40 + .../stories/SelectWithFormik.stories.mdx | 9 - .../stories/TextInputWithFormik.stories.mdx | 9 - .../Forms.mdx} | 5 +- .../_examples/stories/mdx/FormsWithFormik.mdx | 15 + .../{ => mdx}/examples/SelectWithFormik.tsx | 0 .../examples/TextInputWithFormik.tsx | 0 .../examples/TextInputWithReactHookForm.tsx | 1 + .../stories/ColorPicker.stories.tsx | 34 + .../stories/examples/ColorInputPopup.tsx | 105 + .../stories/examples/IconButtonPopup.tsx | 54 + .../stories/examples/InputInteraction.tsx | 18 + .../stories/stories_ColorPicker.tsx | 150 - .../color-picker/stories/stories_testing.tsx | 66 - .../visual-testing/ColorPicker.stories.tsx | 57 + .../{FormField.stories.mdx => FormField.mdx} | 7 +- .../form-field/stories/FormField.stories.ts | 74 + ...arkles.stories.mdx => LoadingSparkles.mdx} | 5 +- .../stories/LoadingSparkles.stories.ts | 23 + .../stories/{Menu.stories.mdx => Menu.mdx} | 11 +- .../menu/stories/Menu.stories.ts | 43 + ..._visualTesting.tsx => testing.stories.tsx} | 8 +- modules/preview-react/package.json | 2 +- .../stories/{Pill.stories.mdx => Pill.mdx} | 8 +- .../pill/stories/Pill.stories.ts | 43 + ..._VisualTesting.tsx => testing.stories.tsx} | 12 +- .../stories/{Radio.stories.mdx => Radio.mdx} | 9 +- .../radio/stories/Radio.stories.ts | 63 + .../radio/stories/stories_VisualTesting.tsx | 252 - .../radio/stories/testing.stories.tsx | 258 + ...ntrol.stories.mdx => SegmentedControl.mdx} | 7 +- .../stories/SegmentedControl.stories.ts | 51 + .../stories/stories_SegmentedControl.tsx | 179 - .../stories/testing.stories.tsx | 190 + .../{SidePanel.stories.mdx => SidePanel.mdx} | 7 +- .../side-panel/stories/SidePanel.stories.ts | 51 + ...Testing.tsx => testingCypress.stories.tsx} | 2 +- ...lTesting.tsx => testingVisual.stories.tsx} | 10 +- ...icator.stories.mdx => StatusIndicator.mdx} | 7 +- .../stories/StatusIndicator.stories.ts | 38 + ...tatusIndicator.tsx => testing.stories.tsx} | 10 +- .../{TextArea.stories.mdx => TextArea.mdx} | 9 +- .../text-area/stories/TextArea.stories.ts | 67 + .../text-area/stories/examples/Alert.tsx | 2 +- .../{TextInput.stories.mdx => TextInput.mdx} | 15 +- .../text-input/stories/TextInput.stories.ts | 83 + .../stories/CookieBanner.stories.mdx | 9 - .../stories/GlobalHeader.stories.mdx | 13 - .../_examples/stories/PageHeader.stories.mdx | 9 - .../AriaLiveRegions.mdx} | 1 + .../CompoundComponent.mdx} | 4 +- .../_examples/stories/mdx/CookieBanner.mdx | 10 + .../react/_examples/stories/mdx/Headers.mdx | 20 + .../{Layouts.stories.mdx => mdx/Layouts.mdx} | 3 +- .../MediaModal.mdx} | 5 +- .../SearchForm.mdx} | 4 +- .../SidePanel.mdx} | 4 +- .../TablesAdvanced.mdx} | 12 +- .../FilterListWithLiveStatus.tsx | 0 .../AriaLiveRegions/HiddenLiveRegion.tsx | 0 .../IconButtonsWithLiveBadges.tsx | 0 .../TextInputWithLiveError.tsx | 0 .../AriaLiveRegions/VisibleLiveRegion.tsx | 0 .../{ => mdx}/examples/CookieBanner.tsx | 2 +- .../{ => mdx}/examples/GlobalHeader.tsx | 0 .../stories/{ => mdx}/examples/MediaModal.tsx | 2 +- .../stories/{ => mdx}/examples/PageHeader.tsx | 0 .../{ => mdx}/examples/SearchFormBasic.tsx | 0 .../examples/SegmentControlWithText.tsx | 0 .../examples/SidePanelWithNavigation.tsx | 1 - .../examples/SidePanelWithOverlay.tsx | 0 .../examples/Table/WithExpandableRows.tsx | 55 +- .../examples/Table/WithSelectableRows.tsx | 0 .../Table/WithSortableColumnHeaders.tsx | 0 .../common/FilterListWithLiveStatus.tsx | 65 + .../mdx/examples/common/HiddenLiveRegion.tsx | 30 + .../common/IconButtonsWithLiveBadges.tsx | 98 + .../common/TextInputWithLiveError.tsx | 25 + .../mdx/examples/common/VisibleLiveRegion.tsx | 40 + .../examples/compoundComponent/CustomCard.tsx | 0 .../examples/layout/AreaColumnPositioning.tsx | 0 .../layout/CustomColumnPositioning.tsx | 0 .../examples/layout/CustomColumnWidth.tsx | 0 .../examples/layout/FullWidthWith3Columns.tsx | 0 .../layout/FullWidthWith3Columns2Rows.tsx | 0 .../{ => mdx}/examples/layout/Masonry.tsx | 0 .../examples/layout/ResponsiveColumns.tsx | 0 .../examples/layout/Tiled2and3Columns.tsx | 0 .../examples/layout/Tiled4and2Columns.tsx | 0 .../{ActionBar.stories.mdx => ActionBar.mdx} | 8 +- .../action-bar/stories/ActionBar.stories.ts | 39 + .../stories/examples/OverflowActionBar.tsx | 23 +- .../action-bar/stories/examples/index.ts | 5 + .../visual-testing/stories_action-bar.tsx | 117 - .../visual-testing/testing.stories.tsx | 125 + modules/react/avatar/lib/Avatar.tsx | 5 +- .../avatar/{Avatar.stories.mdx => Avatar.mdx} | 26 +- .../avatar/stories/avatar/Avatar.stories.tsx | 48 + .../avatar/stories/avatar/examples/Button.tsx | 2 +- .../avatar/stories/avatar/examples/Image.tsx | 2 +- .../stories/avatar/examples/LazyLoad.tsx | 2 +- .../{ => avatar/examples}/test-avatar.png | Bin ...{CountBadge.stories.mdx => CountBadge.mdx} | 8 +- .../react/badge/stories/CountBadge.stories.ts | 32 + .../badge/stories/stories_visualTesting.tsx | 37 - .../react/badge/stories/testing.stories.tsx | 39 + modules/react/banner/spec/Banner.spec.tsx | 24 - .../{Banner.stories.mdx => Banner.mdx} | 12 +- .../react/banner/stories/Banner.stories.ts | 60 + .../lib/BreadcrumbsOverflowButton.tsx | 2 +- ...readcrumbs.stories.mdx => Breadcrumbs.mdx} | 8 +- .../stories/Breadcrumbs.stories.ts | 40 + .../stories/stories_VisualTesting.tsx | 204 - .../breadcrumbs/stories/testing.stories.tsx | 216 + ...Buttons.tsx => ToolbarButtons.stories.tsx} | 39 +- .../button/{Button.stories.mdx => Button.mdx} | 11 +- .../button/stories/button/Button.stories.tsx | 42 + .../{Hyperlink.stories.mdx => Hyperlink.mdx} | 9 +- .../stories/button/Hyperlink.stories.tsx | 31 + .../button/stories/button/examples/Delete.tsx | 2 +- .../stories/button/examples/Primary.tsx | 2 +- ...utton.tsx => deprecatedButton.stories.tsx} | 35 +- ...eteButton.tsx => DeleteButton.stories.tsx} | 23 +- .../ExternalHyperlink.stories.tsx | 91 + .../visual-testing/Hyperlink.stories.tsx | 57 + ...ryButton.tsx => PrimaryButton.stories.tsx} | 35 +- ...Button.tsx => SecondaryButton.stories.tsx} | 35 +- ...yButton.tsx => TertiaryButton.stories.tsx} | 36 +- ....tsx => ToolbarDropdownButton.stories.tsx} | 21 +- ...tton.tsx => ToolbarIconButton.stories.tsx} | 21 +- .../deprecatedButton.stories.tsx | 47 + .../stories_ExternalHyperlink.tsx | 85 - .../visual-testing/stories_Hyperlink.tsx | 51 - .../stories_deprecatedButton.tsx | 41 - .../button/stories/visual-testing/utils.tsx | 1 - .../stories/{card.stories.mdx => card.mdx} | 9 +- modules/react/card/stories/card.stories.ts | 24 + .../stories/visual-testing/stories_card.tsx | 107 - .../visual-testing/testing.stories.tsx | 113 + .../{Checkbox.stories.mdx => Checkbox.mdx} | 15 +- .../checkbox/stories/Checkbox.stories.ts | 56 + .../collection/lib/useListRenderItem.tsx | 6 +- .../lib/useOverflowListItemMeasure.tsx | 1 + .../Collection.mdx} | 4 +- .../stories/{ => mdx}/examples/Basic.tsx | 0 .../stories/{ => mdx}/examples/BasicGrid.tsx | 0 .../{ => mdx}/examples/BasicVirtual.tsx | 0 .../stories/{ => mdx}/examples/DataLoader.tsx | 0 .../examples/DynamicItemsObjects.tsx | 0 .../examples/DynamicItemsStrings.tsx | 0 .../{ => mdx}/examples/IdentifiedItems.tsx | 0 .../{ => mdx}/examples/MultiSelection.tsx | 0 .../{ => mdx}/examples/RovingFocus.tsx | 0 .../stories/{ => mdx}/examples/Selection.tsx | 0 .../{ => mdx}/examples/StringChildren.tsx | 0 .../{ => mdx}/examples/Virtualization.tsx | 0 .../{ => mdx}/examples/WrappingGrid.tsx | 0 ...{ColorInput.stories.mdx => ColorInput.mdx} | 14 +- .../stories/color-input/ColorInput.stories.ts | 59 + ...orPreview.stories.mdx => ColorPreview.mdx} | 13 +- .../color-preview/ColorPreview.stories.ts | 31 + .../stories/color-preview/examples/Basic.tsx | 8 +- .../{Combobox.stories.mdx => Combobox.mdx} | 7 +- .../combobox/stories/Combobox.stories.ts | 23 + .../visual-testing/stories_Combobox.tsx | 60 - .../visual-testing/testing.stories.tsx | 66 + .../common/lib/theming/getObjectProxy.ts | 3 +- modules/react/common/lib/utils/components.ts | 2 +- modules/react/common/lib/utils/deepMerge.ts | 2 +- modules/react/common/lib/utils/models.ts | 18 +- ...es_direction.tsx => direction.stories.tsx} | 19 +- .../CompoundComponentUtilities.mdx} | 4 +- .../Responsive.mdx} | 4 +- .../{ => mdx}/examples/CreateComponent.tsx | 0 .../{ => mdx}/examples/CreateContainer.tsx | 0 .../examples/CreateElemPropsHook.tsx | 0 .../{ => mdx}/examples/CreateModelHook.tsx | 0 .../{ => mdx}/examples/CreateSubcomponent.tsx | 0 .../{ => mdx}/examples/ResponsiveStyles.tsx | 0 .../{ => mdx}/examples/ResponsiveViewport.tsx | 0 modules/react/common/stories/stories.tsx | 0 .../{stories_theme.tsx => theme.stories.tsx} | 22 +- .../{Dialog.stories.mdx => Dialog.mdx} | 7 +- .../react/dialog/stories/Dialog.stories.ts | 27 + .../stories/FallbackTesting.stories.tsx | 116 + .../examples/DialogWithFallbackPlacements.tsx | 110 + .../stories/stories_FallbackTesting.tsx | 70 - .../{FormField.stories.mdx => FormField.mdx} | 32 +- .../form-field/stories/FormField.stories.ts | 64 + .../form-field/stories/examples/Basic.tsx | 1 - .../visual-testing/Checkbox.stories.tsx | 156 + .../visual-testing/ColorInput.stories.tsx | 93 + .../visual-testing/FormField.stories.tsx | 53 + .../stories/visual-testing/Radio.stories.tsx | 235 + .../stories/visual-testing/Switch.stories.tsx | 81 + .../visual-testing/TextArea.stories.tsx | 84 + .../visual-testing/TextInput.stories.tsx | 144 + .../visual-testing/stories_Checkbox.tsx | 152 - .../visual-testing/stories_ColorInput.tsx | 88 - .../visual-testing/stories_FormField.tsx | 48 - .../stories/visual-testing/stories_Radio.tsx | 230 - .../stories/visual-testing/stories_Switch.tsx | 76 - .../visual-testing/stories_TextArea.tsx | 79 - .../visual-testing/stories_TextInput.tsx | 136 - .../stories/visual-testing/utils.ts | 7 + .../{Assets.stories.mdx => Assets.mdx} | 23 +- modules/react/icon/stories/Assets.stories.tsx | 32 + .../{stories.tsx => Icons.stories.tsx} | 47 +- .../icon/stories/examples/AccentIconList.tsx | 2 +- .../stories/{Box.stories.mdx => Box.mdx} | 6 +- modules/react/layout/stories/Box.stories.ts | 24 + .../stories/{Flex.stories.mdx => Flex.mdx} | 17 +- modules/react/layout/stories/Flex.stories.ts | 24 + .../stories/{Grid.stories.mdx => Grid.mdx} | 8 +- modules/react/layout/stories/Grid.stories.ts | 32 + .../stories/stories_BoxVisualTesting.tsx | 71 - .../stories/stories_FlexVisualTesting.tsx | 176 - .../stories/stories_GridVisualTesting.tsx | 183 - .../stories/visual-testing/Box.stories.tsx | 77 + .../stories/visual-testing/Flex.stories.tsx | 191 + .../stories/visual-testing/Grid.stories.tsx | 190 + ...oadingDots.stories.mdx => LoadingDots.mdx} | 6 +- .../stories/LoadingDots.stories.ts | 32 + .../stories/{Menu.stories.mdx => Menu.mdx} | 7 +- modules/react/menu/stories/Menu.stories.ts | 31 + .../MenuWithFallbackPlacements.tsx} | 13 +- .../menu/stories/testingFallback.stories.tsx | 18 + ...lTesting.tsx => testingVisual.stories.tsx} | 51 +- .../stories/{Modal.stories.mdx => Modal.mdx} | 7 +- modules/react/modal/stories/Modal.stories.ts | 52 + .../modal/stories/examples/IframeTest.tsx | 26 + .../modal/stories/examples/ModalWithPopup.tsx | 66 + .../modal/stories/examples/StackedModals.tsx | 56 + .../stories/examples/WithRadioButtons.tsx | 30 + .../modal/stories/examples/WithTooltips.tsx | 74 + .../modal/stories/stories_VisualTesting.tsx | 107 - .../react/modal/stories/stories_testing.tsx | 317 - .../react/modal/stories/testing.stories.tsx | 236 + modules/react/package.json | 2 +- ...{pagination.stories.mdx => pagination.mdx} | 8 +- .../pagination/stories/pagination.stories.ts | 48 + ..._visualTesting.tsx => testing.stories.tsx} | 59 +- .../react/popup/stories/Popper.stories.tsx | 64 + .../stories/{Popup.stories.mdx => Popup.mdx} | 40 +- modules/react/popup/stories/Popup.stories.ts | 56 + .../examples/CloseOnTargetHiddenTest.tsx | 54 + .../stories/examples/ComboboxWithinPopup.tsx | 48 + .../stories/examples/MixedPopupTypes.tsx | 143 + .../PopupWithFallbackPlacements.tsx} | 13 +- .../examples/PopupWithNonHidablePopup.tsx | 42 + .../stories/examples/ReturnFocusTest.tsx | 68 + .../stories/examples/TooltipReturnFocus.tsx | 36 + .../react/popup/stories/stories_Popper.tsx | 66 - .../stories/stories_Popper_VisualTesting.tsx | 81 - .../popup/stories/stories_Popper_testing.tsx | 68 - .../popup/stories/stories_VisualTesting.tsx | 150 - .../react/popup/stories/stories_testing.tsx | 474 - .../react/popup/stories/testing.stories.tsx | 173 + .../popup/stories/testingFallback.stories.tsx | 18 + .../popup/stories/testingPopper.stories.tsx | 62 + .../stories/visual-testing/Popper.stories.tsx | 105 + .../stories/visual-testing/Popup.stories.tsx | 161 + .../stories/{Radio.stories.mdx => Radio.mdx} | 14 +- modules/react/radio/stories/Radio.stories.ts | 56 + ...ntrol.stories.mdx => SegmentedControl.mdx} | 8 +- .../stories/SegmentedControl.stories.ts | 24 + .../stories/stories_VisualTesting.tsx | 106 - .../stories/testing.stories.tsx | 111 + modules/react/select/lib/Select.tsx | 5 + .../react/select/lib/hooks/useSelectInput.ts | 1 + .../{Select.stories.mdx => Select.mdx} | 53 +- .../react/select/stories/Select.stories.ts | 84 + .../select/stories/examples/Disabled.tsx | 2 +- .../select/stories/examples/RefForwarding.tsx | 1 + .../react/select/stories/testing.stories.tsx | 158 + modules/react/side-panel/stories/stories.tsx | 2 +- .../visual-testing/SidePanel.stories.tsx | 98 + .../visual-testing/stories_VisualTesting.tsx | 88 - .../{Skeleton.stories.mdx => Skeleton.mdx} | 8 +- .../skeleton/stories/Skeleton.stories.ts | 44 + .../visual-testing/Skeleton.stories.tsx | 74 + .../visual-testing/stories_Skeleton.tsx | 68 - ...icator.stories.mdx => StatusIndicator.mdx} | 15 +- .../stories/StatusIndicator.stories.ts | 36 + .../stories/stories_VisualTesting.tsx | 45 - .../stories/testing.stories.tsx | 51 + .../{Switch.stories.mdx => Switch.mdx} | 13 +- .../react/switch/stories/Switch.stories.ts | 44 + .../stories/{Table.stories.mdx => Table.mdx} | 7 +- modules/react/table/stories/Table.stories.ts | 36 + ..._visualTesting.tsx => testing.stories.tsx} | 41 +- .../stories/{Tabs.stories.mdx => Tabs.mdx} | 7 +- modules/react/tabs/stories/Tabs.stories.ts | 60 + ...tories_testing.tsx => testing.stories.tsx} | 122 +- .../{Testing.stories.mdx => Testing.mdx} | 7 +- .../react/testing/stories/Testing.stories.ts | 21 + .../{TextArea.stories.mdx => TextArea.mdx} | 13 +- .../text-area/stories/TextArea.stories.ts | 60 + modules/react/text-input/lib/TextInput.tsx | 5 +- .../{TextInput.stories.mdx => TextInput.mdx} | 15 +- .../text-input/stories/TextInput.stories.ts | 60 + .../text-input/stories/examples/Basic.tsx | 2 +- .../{BodyText.stories.mdx => BodyText.mdx} | 6 +- .../react/text/stories/BodyText.stories.ts | 24 + .../{Heading.stories.mdx => Heading.mdx} | 6 +- modules/react/text/stories/Heading.stories.ts | 24 + .../{LabelText.stories.mdx => LabelText.mdx} | 6 +- .../react/text/stories/LabelText.stories.ts | 33 + .../{Subtext.stories.mdx => Subtext.mdx} | 6 +- modules/react/text/stories/Subtext.stories.ts | 24 + .../stories/{Text.stories.mdx => Text.mdx} | 6 +- modules/react/text/stories/Text.stories.ts | 32 + .../stories/{Title.stories.mdx => Title.mdx} | 6 +- modules/react/text/stories/Title.stories.ts | 24 + .../text/stories/stories_VisualTesting.tsx | 284 - .../react/text/stories/testing.stories.tsx | 300 + .../toast/stories/stories_visualTesting.tsx | 184 - .../react/toast/stories/testing.stories.tsx | 189 + .../stories/{toast.stories.mdx => toast.mdx} | 13 +- modules/react/toast/stories/toast.stories.ts | 43 + .../{Tokens.stories.mdx => Tokens.mdx} | 5 +- .../react/tokens/stories/Tokens.stories.tsx | 43 + .../react/tooltip/spec/useTooltip.spec.tsx | 19 +- .../{Tooltip.stories.mdx => Tooltip.mdx} | 8 +- .../react/tooltip/stories/Tooltip.stories.ts | 56 + .../stories/stories_FallbackTesting.tsx | 66 - .../react/tooltip/stories/stories_testing.tsx | 165 - .../react/tooltip/stories/testing.stories.tsx | 182 + .../stories/testingFallback.stories.tsx | 90 + .../lib/utils/isImportedFromStyling.ts | 2 +- .../lib/utils/parseNodeToStaticValue.ts | 16 - .../lib/utils/parseObjectToStaticValue.ts | 4 + modules/styling-transform/package.json | 4 +- .../spec/createProgramFromSource.ts | 8 +- modules/styling/package.json | 4 +- .../{Basics.stories.mdx => mdx/Basics.mdx} | 10 +- .../FromEmotion.mdx} | 1 + .../GettingStarted.mdx} | 0 .../HowToStyle.mdx} | 4 - .../MergingStyles.mdx} | 4 +- .../Overview.mdx} | 0 .../StylingFunctions.mdx} | 2 +- .../stories/{ => mdx}/examples/CSProp.tsx | 0 .../{ => mdx}/examples/CreateModifiers.tsx | 0 .../{ => mdx}/examples/CreateStencil.tsx | 2 +- .../{ => mdx}/examples/CreateStyles.tsx | 0 .../stories/{ => mdx}/examples/CreateVars.tsx | 0 .../{ => mdx}/examples/CustomButton.tsx | 0 .../stories/{ => mdx}/examples/CustomIcon.tsx | 0 .../{ => mdx}/examples/EmotionButton.tsx | 0 .../{ => mdx}/examples/ManualStylesButton.tsx | 0 .../{ => mdx}/examples/StyledButton.tsx | 0 .../{ => mdx}/examples/StylingButton.tsx | 0 .../{ => mdx}/examples/StylingOverrides.tsx | 0 package.json | 53 +- tsconfig.stories.json | 2 +- utils/storybook/CanvasProviderDecorator.tsx | 3 +- utils/storybook/Markdown.tsx | 7 +- utils/storybook/withSnapshotsEnabled.ts | 10 +- webpack.config.ts | 29 + yarn.lock | 10779 +++++++--------- 483 files changed, 17606 insertions(+), 14497 deletions(-) rename .storybook/{main.js => main.ts} (64%) create mode 100644 cypress.config.ts delete mode 100644 cypress.json rename cypress/{integration/ActionBar.spec.ts => component/ActionBar.spec.tsx} (61%) rename cypress/{integration/Autocomplete.spec.ts => component/Autocomplete.spec.tsx} (98%) create mode 100644 cypress/component/Avatar.spec.tsx create mode 100644 cypress/component/Banner.spec.tsx rename cypress/{integration/Breadcrumbs.spec.ts => component/Breadcrumbs.spec.tsx} (79%) rename cypress/{integration/Button.spec.ts => component/Button.spec.tsx} (69%) rename cypress/{integration/Checkbox.spec.ts => component/Checkbox.spec.tsx} (58%) rename cypress/{integration/ColorPicker.spec.ts => component/ColorPicker.spec.tsx} (69%) rename cypress/{integration/ComboboxLabs.spec.ts => component/ComboboxLabs.spec.tsx} (88%) create mode 100644 cypress/component/Dialog.spec.tsx rename cypress/{integration/ExpandableContainer.spec.ts => component/ExpandableContainer.spec.tsx} (91%) rename cypress/{integration/FormField.spec.ts => component/FormField.spec.tsx} (63%) rename cypress/{integration/Hyperlink.spec.ts => component/Hyperlink.spec.tsx} (55%) rename cypress/{integration/Menu.spec.ts => component/Menu.spec.tsx} (89%) rename cypress/{integration/MenuPreview.ts => component/MenuPreview.tsx} (89%) create mode 100644 cypress/component/Modal.spec.tsx rename cypress/{integration/Pagination.spec.ts => component/Pagination.spec.tsx} (63%) rename cypress/{integration/PillPreview.spec.ts => component/PillPreview.spec.tsx} (68%) rename cypress/{integration/Popup.spec.ts => component/Popup.spec.tsx} (90%) rename cypress/{integration/Radio.spec.ts => component/Radio.spec.tsx} (74%) rename cypress/{integration/RadioPreview.spec.ts => component/RadioPreview.spec.tsx} (76%) rename cypress/{integration/SegmentedControl.spec.ts => component/SegmentedControl.spec.tsx} (87%) create mode 100644 cypress/component/Select.spec.tsx rename cypress/{integration/SidePanelPreview.spec.ts => component/SidePanelPreview.spec.tsx} (82%) rename cypress/{integration/Switch.spec.ts => component/Switch.spec.tsx} (58%) rename cypress/{integration/Tabs.spec.ts => component/Tabs.spec.tsx} (85%) rename cypress/{integration/TextArea.spec.ts => component/TextArea.spec.tsx} (65%) rename cypress/{integration/TextAreaPreview.spec.ts => component/TextAreaPreview.spec.tsx} (64%) rename cypress/{integration/TextInput.spec.ts => component/TextInput.spec.tsx} (65%) rename cypress/{integration/TextInputPreview.spec.ts => component/TextInputPreview.spec.tsx} (64%) rename cypress/{integration/Toast.spec.ts => component/Toast.spec.tsx} (74%) rename cypress/{integration/Tooltip.spec.ts => component/Tooltip.spec.tsx} (86%) delete mode 100644 cypress/helpers/stories.ts delete mode 100644 cypress/integration/Avatar.spec.ts delete mode 100644 cypress/integration/Banner.spec.ts delete mode 100644 cypress/integration/Dialog.spec.ts delete mode 100644 cypress/integration/Modal.spec.ts delete mode 100644 cypress/integration/Select.spec.ts delete mode 100644 cypress/integration/storybook.spec.ts create mode 100644 cypress/support/component-index.html create mode 100644 cypress/support/component.ts rename modules/labs-react/combobox/stories/stories_testing.tsx => cypress/support/index.d.ts (100%) delete mode 100644 cypress/support/index.ts create mode 100644 modules/docs/lib/ExampleCodeBlock.tsx rename modules/docs/mdx/{changelog.stories.mdx => changelog.mdx} (52%) rename modules/docs/mdx/{welcome.stories.mdx => welcome.mdx} (93%) create mode 100644 modules/labs-react/combobox/stories/Combobox.mdx create mode 100644 modules/labs-react/combobox/stories/Combobox.stories.tsx create mode 100644 modules/labs-react/combobox/stories/examples/Basic.tsx create mode 100644 modules/labs-react/combobox/stories/examples/DisabledItem.tsx create mode 100644 modules/labs-react/combobox/stories/examples/GroupOfResult.tsx create mode 100644 modules/labs-react/combobox/stories/examples/Grow.tsx create mode 100644 modules/labs-react/combobox/stories/examples/NoClearButton.tsx rename modules/labs-react/combobox/stories/{stories.tsx => examples/RTL.tsx} (66%) rename modules/labs-react/expandable/stories/{Expandable.stories.mdx => Expandable.mdx} (92%) create mode 100644 modules/labs-react/expandable/stories/Expandable.stories.tsx rename modules/labs-react/expandable/stories/{stories_VisualTesting.tsx => testing.stories.tsx} (92%) rename modules/labs-react/search-form/stories/{SearchForm.stories.mdx => SearchForm.mdx} (89%) create mode 100644 modules/labs-react/search-form/stories/SearchForm.stories.ts delete mode 100644 modules/preview-react/_examples/stories/SelectWithFormik.stories.mdx delete mode 100644 modules/preview-react/_examples/stories/TextInputWithFormik.stories.mdx rename modules/preview-react/_examples/stories/{TextInputWithReactHookForm.stories.mdx => mdx/Forms.mdx} (60%) create mode 100644 modules/preview-react/_examples/stories/mdx/FormsWithFormik.mdx rename modules/preview-react/_examples/stories/{ => mdx}/examples/SelectWithFormik.tsx (100%) rename modules/preview-react/_examples/stories/{ => mdx}/examples/TextInputWithFormik.tsx (100%) rename modules/preview-react/_examples/stories/{ => mdx}/examples/TextInputWithReactHookForm.tsx (99%) create mode 100644 modules/preview-react/color-picker/stories/ColorPicker.stories.tsx create mode 100644 modules/preview-react/color-picker/stories/examples/ColorInputPopup.tsx create mode 100644 modules/preview-react/color-picker/stories/examples/IconButtonPopup.tsx create mode 100644 modules/preview-react/color-picker/stories/examples/InputInteraction.tsx delete mode 100644 modules/preview-react/color-picker/stories/stories_ColorPicker.tsx delete mode 100644 modules/preview-react/color-picker/stories/stories_testing.tsx create mode 100644 modules/preview-react/color-picker/stories/visual-testing/ColorPicker.stories.tsx rename modules/preview-react/form-field/stories/{FormField.stories.mdx => FormField.mdx} (95%) create mode 100644 modules/preview-react/form-field/stories/FormField.stories.ts rename modules/preview-react/loading-sparkles/stories/{LoadingSparkles.stories.mdx => LoadingSparkles.mdx} (89%) create mode 100644 modules/preview-react/loading-sparkles/stories/LoadingSparkles.stories.ts rename modules/preview-react/menu/stories/{Menu.stories.mdx => Menu.mdx} (92%) create mode 100644 modules/preview-react/menu/stories/Menu.stories.ts rename modules/preview-react/menu/stories/{stories_visualTesting.tsx => testing.stories.tsx} (93%) rename modules/preview-react/pill/stories/{Pill.stories.mdx => Pill.mdx} (95%) create mode 100644 modules/preview-react/pill/stories/Pill.stories.ts rename modules/preview-react/pill/stories/{stories_VisualTesting.tsx => testing.stories.tsx} (96%) rename modules/preview-react/radio/stories/{Radio.stories.mdx => Radio.mdx} (95%) create mode 100644 modules/preview-react/radio/stories/Radio.stories.ts delete mode 100644 modules/preview-react/radio/stories/stories_VisualTesting.tsx create mode 100644 modules/preview-react/radio/stories/testing.stories.tsx rename modules/preview-react/segmented-control/stories/{SegmentedControl.stories.mdx => SegmentedControl.mdx} (94%) create mode 100644 modules/preview-react/segmented-control/stories/SegmentedControl.stories.ts delete mode 100644 modules/preview-react/segmented-control/stories/stories_SegmentedControl.tsx create mode 100644 modules/preview-react/segmented-control/stories/testing.stories.tsx rename modules/preview-react/side-panel/stories/{SidePanel.stories.mdx => SidePanel.mdx} (95%) create mode 100644 modules/preview-react/side-panel/stories/SidePanel.stories.ts rename modules/preview-react/side-panel/stories/{stories_CypressTesting.tsx => testingCypress.stories.tsx} (98%) rename modules/preview-react/side-panel/stories/{stories_VisualTesting.tsx => testingVisual.stories.tsx} (93%) rename modules/preview-react/status-indicator/stories/{StatusIndicator.stories.mdx => StatusIndicator.mdx} (91%) create mode 100644 modules/preview-react/status-indicator/stories/StatusIndicator.stories.ts rename modules/preview-react/status-indicator/stories/visual-testing/{stories_StatusIndicator.tsx => testing.stories.tsx} (92%) rename modules/preview-react/text-area/stories/{TextArea.stories.mdx => TextArea.mdx} (92%) create mode 100644 modules/preview-react/text-area/stories/TextArea.stories.ts rename modules/preview-react/text-input/stories/{TextInput.stories.mdx => TextInput.mdx} (92%) create mode 100644 modules/preview-react/text-input/stories/TextInput.stories.ts delete mode 100644 modules/react/_examples/stories/CookieBanner.stories.mdx delete mode 100644 modules/react/_examples/stories/GlobalHeader.stories.mdx delete mode 100644 modules/react/_examples/stories/PageHeader.stories.mdx rename modules/react/_examples/stories/{AriaLiveRegions.stories.mdx => mdx/AriaLiveRegions.mdx} (98%) rename modules/react/_examples/stories/{CompoundComponent.stories.mdx => mdx/CompoundComponent.mdx} (83%) create mode 100644 modules/react/_examples/stories/mdx/CookieBanner.mdx create mode 100644 modules/react/_examples/stories/mdx/Headers.mdx rename modules/react/_examples/stories/{Layouts.stories.mdx => mdx/Layouts.mdx} (96%) rename modules/react/_examples/stories/{MediaModal.stories.mdx => mdx/MediaModal.mdx} (62%) rename modules/react/_examples/stories/{SearchForm.stories.mdx => mdx/SearchForm.mdx} (86%) rename modules/react/_examples/stories/{SidePanel.stories.mdx => mdx/SidePanel.mdx} (78%) rename modules/react/_examples/stories/{TablesAdvanced.stories.mdx => mdx/TablesAdvanced.mdx} (94%) rename modules/react/_examples/stories/{ => mdx}/examples/AriaLiveRegions/FilterListWithLiveStatus.tsx (100%) rename modules/react/_examples/stories/{ => mdx}/examples/AriaLiveRegions/HiddenLiveRegion.tsx (100%) rename modules/react/_examples/stories/{ => mdx}/examples/AriaLiveRegions/IconButtonsWithLiveBadges.tsx (100%) rename modules/react/_examples/stories/{ => mdx}/examples/AriaLiveRegions/TextInputWithLiveError.tsx (100%) rename modules/react/_examples/stories/{ => mdx}/examples/AriaLiveRegions/VisibleLiveRegion.tsx (100%) rename modules/react/_examples/stories/{ => mdx}/examples/CookieBanner.tsx (98%) rename modules/react/_examples/stories/{ => mdx}/examples/GlobalHeader.tsx (100%) rename modules/react/_examples/stories/{ => mdx}/examples/MediaModal.tsx (98%) rename modules/react/_examples/stories/{ => mdx}/examples/PageHeader.tsx (100%) rename modules/react/_examples/stories/{ => mdx}/examples/SearchFormBasic.tsx (100%) rename modules/react/_examples/stories/{ => mdx}/examples/SegmentControlWithText.tsx (100%) rename modules/react/_examples/stories/{ => mdx}/examples/SidePanelWithNavigation.tsx (99%) rename modules/react/_examples/stories/{ => mdx}/examples/SidePanelWithOverlay.tsx (100%) rename modules/react/_examples/stories/{ => mdx}/examples/Table/WithExpandableRows.tsx (84%) rename modules/react/_examples/stories/{ => mdx}/examples/Table/WithSelectableRows.tsx (100%) rename modules/react/_examples/stories/{ => mdx}/examples/Table/WithSortableColumnHeaders.tsx (100%) create mode 100644 modules/react/_examples/stories/mdx/examples/common/FilterListWithLiveStatus.tsx create mode 100644 modules/react/_examples/stories/mdx/examples/common/HiddenLiveRegion.tsx create mode 100644 modules/react/_examples/stories/mdx/examples/common/IconButtonsWithLiveBadges.tsx create mode 100644 modules/react/_examples/stories/mdx/examples/common/TextInputWithLiveError.tsx create mode 100644 modules/react/_examples/stories/mdx/examples/common/VisibleLiveRegion.tsx rename modules/react/_examples/stories/{ => mdx}/examples/compoundComponent/CustomCard.tsx (100%) rename modules/react/_examples/stories/{ => mdx}/examples/layout/AreaColumnPositioning.tsx (100%) rename modules/react/_examples/stories/{ => mdx}/examples/layout/CustomColumnPositioning.tsx (100%) rename modules/react/_examples/stories/{ => mdx}/examples/layout/CustomColumnWidth.tsx (100%) rename modules/react/_examples/stories/{ => mdx}/examples/layout/FullWidthWith3Columns.tsx (100%) rename modules/react/_examples/stories/{ => mdx}/examples/layout/FullWidthWith3Columns2Rows.tsx (100%) rename modules/react/_examples/stories/{ => mdx}/examples/layout/Masonry.tsx (100%) rename modules/react/_examples/stories/{ => mdx}/examples/layout/ResponsiveColumns.tsx (100%) rename modules/react/_examples/stories/{ => mdx}/examples/layout/Tiled2and3Columns.tsx (100%) rename modules/react/_examples/stories/{ => mdx}/examples/layout/Tiled4and2Columns.tsx (100%) rename modules/react/action-bar/stories/{ActionBar.stories.mdx => ActionBar.mdx} (93%) create mode 100644 modules/react/action-bar/stories/ActionBar.stories.ts create mode 100644 modules/react/action-bar/stories/examples/index.ts delete mode 100644 modules/react/action-bar/stories/visual-testing/stories_action-bar.tsx create mode 100644 modules/react/action-bar/stories/visual-testing/testing.stories.tsx rename modules/react/avatar/stories/avatar/{Avatar.stories.mdx => Avatar.mdx} (78%) create mode 100644 modules/react/avatar/stories/avatar/Avatar.stories.tsx rename modules/react/avatar/stories/{ => avatar/examples}/test-avatar.png (100%) rename modules/react/badge/stories/{CountBadge.stories.mdx => CountBadge.mdx} (92%) create mode 100644 modules/react/badge/stories/CountBadge.stories.ts delete mode 100644 modules/react/badge/stories/stories_visualTesting.tsx create mode 100644 modules/react/badge/stories/testing.stories.tsx delete mode 100644 modules/react/banner/spec/Banner.spec.tsx rename modules/react/banner/stories/{Banner.stories.mdx => Banner.mdx} (90%) create mode 100644 modules/react/banner/stories/Banner.stories.ts rename modules/react/breadcrumbs/stories/{Breadcrumbs.stories.mdx => Breadcrumbs.mdx} (96%) create mode 100644 modules/react/breadcrumbs/stories/Breadcrumbs.stories.ts delete mode 100644 modules/react/breadcrumbs/stories/stories_VisualTesting.tsx create mode 100644 modules/react/breadcrumbs/stories/testing.stories.tsx rename modules/react/button/stories/{stories_ToolbarButtons.tsx => ToolbarButtons.stories.tsx} (73%) rename modules/react/button/stories/button/{Button.stories.mdx => Button.mdx} (94%) create mode 100644 modules/react/button/stories/button/Button.stories.tsx rename modules/react/button/stories/button/{Hyperlink.stories.mdx => Hyperlink.mdx} (91%) create mode 100644 modules/react/button/stories/button/Hyperlink.stories.tsx rename modules/react/button/stories/{stories_deprecatedButton.tsx => deprecatedButton.stories.tsx} (85%) rename modules/react/button/stories/visual-testing/{stories_DeleteButton.tsx => DeleteButton.stories.tsx} (78%) create mode 100644 modules/react/button/stories/visual-testing/ExternalHyperlink.stories.tsx create mode 100644 modules/react/button/stories/visual-testing/Hyperlink.stories.tsx rename modules/react/button/stories/visual-testing/{stories_PrimaryButton.tsx => PrimaryButton.stories.tsx} (78%) rename modules/react/button/stories/visual-testing/{stories_SecondaryButton.tsx => SecondaryButton.stories.tsx} (77%) rename modules/react/button/stories/visual-testing/{stories_TertiaryButton.tsx => TertiaryButton.stories.tsx} (78%) rename modules/react/button/stories/visual-testing/{stories_ToolbarDropdownButton.tsx => ToolbarDropdownButton.stories.tsx} (72%) rename modules/react/button/stories/visual-testing/{stories_ToolbarIconButton.tsx => ToolbarIconButton.stories.tsx} (72%) create mode 100644 modules/react/button/stories/visual-testing/deprecatedButton.stories.tsx delete mode 100644 modules/react/button/stories/visual-testing/stories_ExternalHyperlink.tsx delete mode 100644 modules/react/button/stories/visual-testing/stories_Hyperlink.tsx delete mode 100644 modules/react/button/stories/visual-testing/stories_deprecatedButton.tsx rename modules/react/card/stories/{card.stories.mdx => card.mdx} (86%) create mode 100644 modules/react/card/stories/card.stories.ts delete mode 100644 modules/react/card/stories/visual-testing/stories_card.tsx create mode 100644 modules/react/card/stories/visual-testing/testing.stories.tsx rename modules/react/checkbox/stories/{Checkbox.stories.mdx => Checkbox.mdx} (93%) create mode 100644 modules/react/checkbox/stories/Checkbox.stories.ts rename modules/react/collection/stories/{Collection.stories.mdx => mdx/Collection.mdx} (98%) rename modules/react/collection/stories/{ => mdx}/examples/Basic.tsx (100%) rename modules/react/collection/stories/{ => mdx}/examples/BasicGrid.tsx (100%) rename modules/react/collection/stories/{ => mdx}/examples/BasicVirtual.tsx (100%) rename modules/react/collection/stories/{ => mdx}/examples/DataLoader.tsx (100%) rename modules/react/collection/stories/{ => mdx}/examples/DynamicItemsObjects.tsx (100%) rename modules/react/collection/stories/{ => mdx}/examples/DynamicItemsStrings.tsx (100%) rename modules/react/collection/stories/{ => mdx}/examples/IdentifiedItems.tsx (100%) rename modules/react/collection/stories/{ => mdx}/examples/MultiSelection.tsx (100%) rename modules/react/collection/stories/{ => mdx}/examples/RovingFocus.tsx (100%) rename modules/react/collection/stories/{ => mdx}/examples/Selection.tsx (100%) rename modules/react/collection/stories/{ => mdx}/examples/StringChildren.tsx (100%) rename modules/react/collection/stories/{ => mdx}/examples/Virtualization.tsx (100%) rename modules/react/collection/stories/{ => mdx}/examples/WrappingGrid.tsx (100%) rename modules/react/color-picker/stories/color-input/{ColorInput.stories.mdx => ColorInput.mdx} (92%) create mode 100644 modules/react/color-picker/stories/color-input/ColorInput.stories.ts rename modules/react/color-picker/stories/color-preview/{ColorPreview.stories.mdx => ColorPreview.mdx} (85%) create mode 100644 modules/react/color-picker/stories/color-preview/ColorPreview.stories.ts rename modules/react/combobox/stories/{Combobox.stories.mdx => Combobox.mdx} (90%) create mode 100644 modules/react/combobox/stories/Combobox.stories.ts delete mode 100644 modules/react/combobox/stories/visual-testing/stories_Combobox.tsx create mode 100644 modules/react/combobox/stories/visual-testing/testing.stories.tsx rename modules/react/common/stories/{stories_direction.tsx => direction.stories.tsx} (83%) rename modules/react/common/stories/{CompoundComponentUtilities.stories.mdx => mdx/CompoundComponentUtilities.mdx} (99%) rename modules/react/common/stories/{Responsive.stories.mdx => mdx/Responsive.mdx} (98%) rename modules/react/common/stories/{ => mdx}/examples/CreateComponent.tsx (100%) rename modules/react/common/stories/{ => mdx}/examples/CreateContainer.tsx (100%) rename modules/react/common/stories/{ => mdx}/examples/CreateElemPropsHook.tsx (100%) rename modules/react/common/stories/{ => mdx}/examples/CreateModelHook.tsx (100%) rename modules/react/common/stories/{ => mdx}/examples/CreateSubcomponent.tsx (100%) rename modules/react/common/stories/{ => mdx}/examples/ResponsiveStyles.tsx (100%) rename modules/react/common/stories/{ => mdx}/examples/ResponsiveViewport.tsx (100%) delete mode 100644 modules/react/common/stories/stories.tsx rename modules/react/common/stories/{stories_theme.tsx => theme.stories.tsx} (91%) rename modules/react/dialog/stories/{Dialog.stories.mdx => Dialog.mdx} (90%) create mode 100644 modules/react/dialog/stories/Dialog.stories.ts create mode 100644 modules/react/dialog/stories/FallbackTesting.stories.tsx create mode 100644 modules/react/dialog/stories/examples/DialogWithFallbackPlacements.tsx delete mode 100644 modules/react/dialog/stories/stories_FallbackTesting.tsx rename modules/react/form-field/stories/{FormField.stories.mdx => FormField.mdx} (83%) create mode 100644 modules/react/form-field/stories/FormField.stories.ts create mode 100644 modules/react/form-field/stories/visual-testing/Checkbox.stories.tsx create mode 100644 modules/react/form-field/stories/visual-testing/ColorInput.stories.tsx create mode 100644 modules/react/form-field/stories/visual-testing/FormField.stories.tsx create mode 100644 modules/react/form-field/stories/visual-testing/Radio.stories.tsx create mode 100644 modules/react/form-field/stories/visual-testing/Switch.stories.tsx create mode 100644 modules/react/form-field/stories/visual-testing/TextArea.stories.tsx create mode 100644 modules/react/form-field/stories/visual-testing/TextInput.stories.tsx delete mode 100644 modules/react/form-field/stories/visual-testing/stories_Checkbox.tsx delete mode 100644 modules/react/form-field/stories/visual-testing/stories_ColorInput.tsx delete mode 100644 modules/react/form-field/stories/visual-testing/stories_FormField.tsx delete mode 100644 modules/react/form-field/stories/visual-testing/stories_Radio.tsx delete mode 100644 modules/react/form-field/stories/visual-testing/stories_Switch.tsx delete mode 100644 modules/react/form-field/stories/visual-testing/stories_TextArea.tsx delete mode 100644 modules/react/form-field/stories/visual-testing/stories_TextInput.tsx create mode 100644 modules/react/form-field/stories/visual-testing/utils.ts rename modules/react/icon/stories/{Assets.stories.mdx => Assets.mdx} (50%) create mode 100644 modules/react/icon/stories/Assets.stories.tsx rename modules/react/icon/stories/{stories.tsx => Icons.stories.tsx} (88%) rename modules/react/layout/stories/{Box.stories.mdx => Box.mdx} (94%) create mode 100644 modules/react/layout/stories/Box.stories.ts rename modules/react/layout/stories/{Flex.stories.mdx => Flex.mdx} (78%) create mode 100644 modules/react/layout/stories/Flex.stories.ts rename modules/react/layout/stories/{Grid.stories.mdx => Grid.mdx} (97%) create mode 100644 modules/react/layout/stories/Grid.stories.ts delete mode 100644 modules/react/layout/stories/stories_BoxVisualTesting.tsx delete mode 100644 modules/react/layout/stories/stories_FlexVisualTesting.tsx delete mode 100644 modules/react/layout/stories/stories_GridVisualTesting.tsx create mode 100644 modules/react/layout/stories/visual-testing/Box.stories.tsx create mode 100644 modules/react/layout/stories/visual-testing/Flex.stories.tsx create mode 100644 modules/react/layout/stories/visual-testing/Grid.stories.tsx rename modules/react/loading-dots/stories/{LoadingDots.stories.mdx => LoadingDots.mdx} (92%) create mode 100644 modules/react/loading-dots/stories/LoadingDots.stories.ts rename modules/react/menu/stories/{Menu.stories.mdx => Menu.mdx} (94%) create mode 100644 modules/react/menu/stories/Menu.stories.ts rename modules/react/menu/stories/{stories_FallbackTesting.tsx => examples/MenuWithFallbackPlacements.tsx} (89%) create mode 100644 modules/react/menu/stories/testingFallback.stories.tsx rename modules/react/menu/stories/{stories_visualTesting.tsx => testingVisual.stories.tsx} (78%) rename modules/react/modal/stories/{Modal.stories.mdx => Modal.mdx} (96%) create mode 100644 modules/react/modal/stories/Modal.stories.ts create mode 100644 modules/react/modal/stories/examples/IframeTest.tsx create mode 100644 modules/react/modal/stories/examples/ModalWithPopup.tsx create mode 100644 modules/react/modal/stories/examples/StackedModals.tsx create mode 100644 modules/react/modal/stories/examples/WithRadioButtons.tsx create mode 100644 modules/react/modal/stories/examples/WithTooltips.tsx delete mode 100644 modules/react/modal/stories/stories_VisualTesting.tsx delete mode 100644 modules/react/modal/stories/stories_testing.tsx create mode 100644 modules/react/modal/stories/testing.stories.tsx rename modules/react/pagination/stories/{pagination.stories.mdx => pagination.mdx} (96%) create mode 100644 modules/react/pagination/stories/pagination.stories.ts rename modules/react/pagination/stories/{stories_visualTesting.tsx => testing.stories.tsx} (83%) create mode 100644 modules/react/popup/stories/Popper.stories.tsx rename modules/react/popup/stories/{Popup.stories.mdx => Popup.mdx} (96%) create mode 100644 modules/react/popup/stories/Popup.stories.ts create mode 100644 modules/react/popup/stories/examples/CloseOnTargetHiddenTest.tsx create mode 100644 modules/react/popup/stories/examples/ComboboxWithinPopup.tsx create mode 100644 modules/react/popup/stories/examples/MixedPopupTypes.tsx rename modules/react/popup/stories/{stories_FallbackTesting.tsx => examples/PopupWithFallbackPlacements.tsx} (90%) create mode 100644 modules/react/popup/stories/examples/PopupWithNonHidablePopup.tsx create mode 100644 modules/react/popup/stories/examples/ReturnFocusTest.tsx create mode 100644 modules/react/popup/stories/examples/TooltipReturnFocus.tsx delete mode 100644 modules/react/popup/stories/stories_Popper.tsx delete mode 100644 modules/react/popup/stories/stories_Popper_VisualTesting.tsx delete mode 100644 modules/react/popup/stories/stories_Popper_testing.tsx delete mode 100644 modules/react/popup/stories/stories_VisualTesting.tsx delete mode 100644 modules/react/popup/stories/stories_testing.tsx create mode 100644 modules/react/popup/stories/testing.stories.tsx create mode 100644 modules/react/popup/stories/testingFallback.stories.tsx create mode 100644 modules/react/popup/stories/testingPopper.stories.tsx create mode 100644 modules/react/popup/stories/visual-testing/Popper.stories.tsx create mode 100644 modules/react/popup/stories/visual-testing/Popup.stories.tsx rename modules/react/radio/stories/{Radio.stories.mdx => Radio.mdx} (94%) create mode 100644 modules/react/radio/stories/Radio.stories.ts rename modules/react/segmented-control/stories/{SegmentedControl.stories.mdx => SegmentedControl.mdx} (76%) create mode 100644 modules/react/segmented-control/stories/SegmentedControl.stories.ts delete mode 100644 modules/react/segmented-control/stories/stories_VisualTesting.tsx create mode 100644 modules/react/segmented-control/stories/testing.stories.tsx rename modules/react/select/stories/{Select.stories.mdx => Select.mdx} (89%) create mode 100644 modules/react/select/stories/Select.stories.ts create mode 100644 modules/react/select/stories/testing.stories.tsx create mode 100644 modules/react/side-panel/stories/visual-testing/SidePanel.stories.tsx delete mode 100644 modules/react/side-panel/stories/visual-testing/stories_VisualTesting.tsx rename modules/react/skeleton/stories/{Skeleton.stories.mdx => Skeleton.mdx} (93%) create mode 100644 modules/react/skeleton/stories/Skeleton.stories.ts create mode 100644 modules/react/skeleton/stories/visual-testing/Skeleton.stories.tsx delete mode 100644 modules/react/skeleton/stories/visual-testing/stories_Skeleton.tsx rename modules/react/status-indicator/stories/{StatusIndicator.stories.mdx => StatusIndicator.mdx} (86%) create mode 100644 modules/react/status-indicator/stories/StatusIndicator.stories.ts delete mode 100644 modules/react/status-indicator/stories/stories_VisualTesting.tsx create mode 100644 modules/react/status-indicator/stories/testing.stories.tsx rename modules/react/switch/stories/{Switch.stories.mdx => Switch.mdx} (93%) create mode 100644 modules/react/switch/stories/Switch.stories.ts rename modules/react/table/stories/{Table.stories.mdx => Table.mdx} (92%) create mode 100644 modules/react/table/stories/Table.stories.ts rename modules/react/table/stories/{stories_visualTesting.tsx => testing.stories.tsx} (86%) rename modules/react/tabs/stories/{Tabs.stories.mdx => Tabs.mdx} (96%) create mode 100644 modules/react/tabs/stories/Tabs.stories.ts rename modules/react/tabs/stories/{stories_testing.tsx => testing.stories.tsx} (67%) rename modules/react/testing/stories/{Testing.stories.mdx => Testing.mdx} (80%) create mode 100644 modules/react/testing/stories/Testing.stories.ts rename modules/react/text-area/stories/{TextArea.stories.mdx => TextArea.mdx} (94%) create mode 100644 modules/react/text-area/stories/TextArea.stories.ts rename modules/react/text-input/stories/{TextInput.stories.mdx => TextInput.mdx} (95%) create mode 100644 modules/react/text-input/stories/TextInput.stories.ts rename modules/react/text/stories/{BodyText.stories.mdx => BodyText.mdx} (87%) create mode 100644 modules/react/text/stories/BodyText.stories.ts rename modules/react/text/stories/{Heading.stories.mdx => Heading.mdx} (87%) create mode 100644 modules/react/text/stories/Heading.stories.ts rename modules/react/text/stories/{LabelText.stories.mdx => LabelText.mdx} (89%) create mode 100644 modules/react/text/stories/LabelText.stories.ts rename modules/react/text/stories/{Subtext.stories.mdx => Subtext.mdx} (87%) create mode 100644 modules/react/text/stories/Subtext.stories.ts rename modules/react/text/stories/{Text.stories.mdx => Text.mdx} (91%) create mode 100644 modules/react/text/stories/Text.stories.ts rename modules/react/text/stories/{Title.stories.mdx => Title.mdx} (88%) create mode 100644 modules/react/text/stories/Title.stories.ts delete mode 100644 modules/react/text/stories/stories_VisualTesting.tsx create mode 100644 modules/react/text/stories/testing.stories.tsx delete mode 100644 modules/react/toast/stories/stories_visualTesting.tsx create mode 100644 modules/react/toast/stories/testing.stories.tsx rename modules/react/toast/stories/{toast.stories.mdx => toast.mdx} (89%) create mode 100644 modules/react/toast/stories/toast.stories.ts rename modules/react/tokens/stories/{Tokens.stories.mdx => Tokens.mdx} (91%) create mode 100644 modules/react/tokens/stories/Tokens.stories.tsx rename modules/react/tooltip/stories/{Tooltip.stories.mdx => Tooltip.mdx} (97%) create mode 100644 modules/react/tooltip/stories/Tooltip.stories.ts delete mode 100644 modules/react/tooltip/stories/stories_FallbackTesting.tsx delete mode 100644 modules/react/tooltip/stories/stories_testing.tsx create mode 100644 modules/react/tooltip/stories/testing.stories.tsx create mode 100644 modules/react/tooltip/stories/testingFallback.stories.tsx rename modules/styling/stories/{Basics.stories.mdx => mdx/Basics.mdx} (98%) rename modules/styling/stories/{FromEmotion.stories.mdx => mdx/FromEmotion.mdx} (98%) rename modules/styling/stories/{GettingStarted.stories.mdx => mdx/GettingStarted.mdx} (100%) rename modules/styling/stories/{HowToStyle.stories.mdx => mdx/HowToStyle.mdx} (97%) rename modules/styling/stories/{MergingStyles.stories.mdx => mdx/MergingStyles.mdx} (97%) rename modules/styling/stories/{Overview.stories.mdx => mdx/Overview.mdx} (100%) rename modules/styling/stories/{StylingFunctions.stories.mdx => mdx/StylingFunctions.mdx} (98%) rename modules/styling/stories/{ => mdx}/examples/CSProp.tsx (100%) rename modules/styling/stories/{ => mdx}/examples/CreateModifiers.tsx (100%) rename modules/styling/stories/{ => mdx}/examples/CreateStencil.tsx (94%) rename modules/styling/stories/{ => mdx}/examples/CreateStyles.tsx (100%) rename modules/styling/stories/{ => mdx}/examples/CreateVars.tsx (100%) rename modules/styling/stories/{ => mdx}/examples/CustomButton.tsx (100%) rename modules/styling/stories/{ => mdx}/examples/CustomIcon.tsx (100%) rename modules/styling/stories/{ => mdx}/examples/EmotionButton.tsx (100%) rename modules/styling/stories/{ => mdx}/examples/ManualStylesButton.tsx (100%) rename modules/styling/stories/{ => mdx}/examples/StyledButton.tsx (100%) rename modules/styling/stories/{ => mdx}/examples/StylingButton.tsx (100%) rename modules/styling/stories/{ => mdx}/examples/StylingOverrides.tsx (100%) create mode 100644 webpack.config.ts diff --git a/.eslintrc.js b/.eslintrc.js index d85c656232..d0f4c47f30 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -96,4 +96,12 @@ module.exports = { curly: 'error', radix: 'error', }, + overrides: [ + { + files: ['**/*.stories.tsx'], + rules: { + 'react-hooks/rules-of-hooks': 'off', + }, + }, + ], }; diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index 5c11e59d46..acac0f1e11 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -110,11 +110,8 @@ jobs: path: docs key: ${{ runner.os }}-build-${{ github.sha }} - - name: Start Server - run: npx http-server docs -p 9001 & npx wait-on http://localhost:9001 - - name: Integration tests - run: yarn cypress run --record --parallel + run: yarn cypress run --component --record --parallel env: # Github Actions doesn't support encryption on forks # If these keys become compromised, we will rotate and disable these features diff --git a/.storybook/main.js b/.storybook/main.ts similarity index 64% rename from .storybook/main.js rename to .storybook/main.ts index 3a2be1e3f7..60e98a47ab 100644 --- a/.storybook/main.js +++ b/.storybook/main.ts @@ -1,20 +1,18 @@ const path = require('node:path'); -const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin'); const modulesPath = path.resolve(__dirname, '../modules'); const getSpecifications = require('../modules/docs/utils/get-specifications'); +import {StorybookConfig} from '@storybook/react-webpack5'; const {createDocProgram} = require('../modules/docs/docgen/createDocProgram'); const processDocs = process.env.SKIP_DOCGEN !== 'true'; const Doc = createDocProgram(); -module.exports = { - stories: [ - '../modules/docs/mdx/**/*.mdx', - '../modules/**/*.stories.mdx', - '../modules/**/stories*.@(js|jsx|ts|tsx)', - ], +const config: StorybookConfig = { + framework: '@storybook/react-webpack5', + staticDirs: ['../public'], + stories: ['../modules/**/mdx/**/*.mdx', '../modules/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ { name: '@storybook/addon-essentials', @@ -25,17 +23,24 @@ module.exports = { './readme-panel/preset.js', '@storybook/addon-storysource', ], + core: { + builder: '@storybook/builder-webpack5', + disableTelemetry: true, + }, + docs: { + autodocs: 'tag', + defaultName: 'Docs', + }, typescript: { - skipBabel: true, check: false, reactDocgen: false, // we'll handle this ourselves }, - webpackFinal: async (config, {configType}) => { + webpackFinal: async config => { // Get the specifications object and replace with a real object in the spec.ts file if (processDocs) { const specs = await getSpecifications(); - config.module.rules.push({ + config.module?.rules?.push({ test: /.ts$/, include: [path.resolve(__dirname, '../modules/docs')], use: [ @@ -50,10 +55,10 @@ module.exports = { }); // Load the source code of story files to display in docs. - config.module.rules.push({ - test: /stories.*\.tsx?$/, + config.module?.rules?.push({ + test: /\.stories\.tsx?$/, include: [modulesPath], - loaders: [ + use: [ { loader: require.resolve('@storybook/source-loader'), options: {parser: 'typescript'}, @@ -62,12 +67,12 @@ module.exports = { enforce: 'pre', }); - config.module.rules.push({ + config.module?.rules?.push({ test: /.+\.tsx?$/, include: [modulesPath], exclude: /examples|stories|spec|codemod|docs/, - loaders: [ - // loaders are run in reverse order. style-transform-loader needs to be done first + use: [ + // loaders are run in reverse order. symbol-doc-loader needs to be done first { loader: path.resolve(__dirname, 'symbol-doc-loader'), options: { @@ -94,9 +99,11 @@ module.exports = { * These warnings relate to this open GitHub issue: https://github.com/microsoft/TypeScript/issues/39436 * If you no longer see these warnings when this is config is removed, you can safely delete this config. */ - config.module.noParse = [require.resolve('typescript/lib/typescript.js')]; + if (config.module) { + config.module.noParse = [require.resolve('typescript/lib/typescript.js')]; + } - config.module.rules.push({ + config.module?.rules?.push({ test: /\.mdx?$/, include: [path.resolve(__dirname, '..')], exclude: [/node_modules/], @@ -107,12 +114,9 @@ module.exports = { ], }); - config.module.rules.push({ + config.module?.rules?.push({ test: /\.mdx?$/, include: [path.resolve(__dirname, '..')], - // Don't replace `` with Storybook tags in the - // documentation guidelines - exclude: [/node_modules/, /DOCUMENTATION_GUIDELINES/], use: [ { loader: path.resolve(__dirname, 'mdx-code-block-rewrite'), @@ -121,10 +125,10 @@ module.exports = { }); // Load the whole example code of story files to display in docs. - config.module.rules.push({ - test: /examples\/.*\.tsx?$/, + config.module?.rules?.push({ + test: /\/examples\/.*\.tsx?$/, include: [modulesPath], - loaders: [ + use: [ { loader: path.resolve(__dirname, 'whole-source-loader'), }, @@ -132,36 +136,16 @@ module.exports = { enforce: 'pre', }); - /** - * Added this because Storybook 6.3 is on emotion 10, so we rewrote the imports to point to emotion 11 - * https://github.com/storybookjs/storybook/issues/13145 - */ - config.resolve = { - ...config.resolve, - alias: { - ...config.resolve.alias, - }, - }; - - // Update @storybook/addon-docs webpack rules to load all .mdx files in storybook - const mdxRule = config.module.rules.find(rule => rule.test.toString() === /\.mdx$/.toString()); - mdxRule.use.find(loader => loader.loader.includes('mdx1-csf')).options['compilers'] = [ - createCompiler({}), - ]; - return config; }, babel: async options => ({ ...options, - plugins: [ - ...options.plugins, - '@babel/plugin-transform-modules-commonjs', - // Needed temporarily until https://github.com/storybookjs/storybook/issues/14805 is resolved - ['@babel/plugin-proposal-private-property-in-object', {loose: true}], - ], + plugins: [...(options.plugins as []), '@babel/plugin-transform-modules-commonjs'], presets: [ - ...options.presets, + ...(options.presets as []), ['@babel/preset-react', {runtime: 'classic'}, 'react-16-backwards-compatible-override'], ], }), }; + +export default config; diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html index 7b2da7d736..7fb58ec4ab 100644 --- a/.storybook/manager-head.html +++ b/.storybook/manager-head.html @@ -1,6 +1,9 @@ - +