From 28e5333b70d7b7731efffe0b6bd1bce30ffcd460 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 17 Apr 2024 16:44:37 +0200 Subject: [PATCH 1/5] fix: remove relative imports within stories which are invalid for creating 'show docs' --- .../react-tree/stories/Tree/TreeExpandIcon.stories.tsx | 10 ++++++++-- .../stories/Virtualizer/Dynamic.stories.tsx | 2 +- .../stories/Virtualizer/index.stories.ts | 2 +- .../stories/VirtualizerScrollView/ScrollTo.stories.tsx | 2 +- .../stories/VirtualizerScrollView/index.stories.ts | 2 +- .../VirtualizerScrollViewDynamic/ScrollTo.stories.tsx | 4 ++-- .../VirtualizerScrollViewDynamic/index.stories.ts | 2 +- 7 files changed, 15 insertions(+), 9 deletions(-) diff --git a/packages/react-components/react-tree/stories/Tree/TreeExpandIcon.stories.tsx b/packages/react-components/react-tree/stories/Tree/TreeExpandIcon.stories.tsx index 18441d14cdd5e0..1759f0188d094a 100644 --- a/packages/react-components/react-tree/stories/Tree/TreeExpandIcon.stories.tsx +++ b/packages/react-components/react-tree/stories/Tree/TreeExpandIcon.stories.tsx @@ -1,7 +1,13 @@ import * as React from 'react'; -import { Tree, TreeItem, TreeItemLayout, TreeItemValue } from '@fluentui/react-components'; +import { + Tree, + TreeItem, + TreeItemLayout, + TreeItemValue, + TreeOpenChangeData, + TreeOpenChangeEvent, +} from '@fluentui/react-components'; import { AddSquare16Regular, SubtractSquare16Regular } from '@fluentui/react-icons'; -import { TreeOpenChangeData, TreeOpenChangeEvent } from './../../src/Tree'; export const ExpandIcon = () => { const [openItems, setOpenItems] = React.useState([]); diff --git a/packages/react-components/react-virtualizer/stories/Virtualizer/Dynamic.stories.tsx b/packages/react-components/react-virtualizer/stories/Virtualizer/Dynamic.stories.tsx index 6705c92cf2a9bd..1a4e4ad3774a19 100644 --- a/packages/react-components/react-virtualizer/stories/Virtualizer/Dynamic.stories.tsx +++ b/packages/react-components/react-virtualizer/stories/Virtualizer/Dynamic.stories.tsx @@ -37,7 +37,7 @@ export const Dynamic = () => { const [flag, toggleFlag] = React.useState(false); const styles = useStyles(); const childLength = 1000; - const timeoutRef = useRef(); + const timeoutRef = useRef>(); React.useEffect(() => { updateTimeout(); diff --git a/packages/react-components/react-virtualizer/stories/Virtualizer/index.stories.ts b/packages/react-components/react-virtualizer/stories/Virtualizer/index.stories.ts index f11cc1cf8710d7..6632b13e634bd4 100644 --- a/packages/react-components/react-virtualizer/stories/Virtualizer/index.stories.ts +++ b/packages/react-components/react-virtualizer/stories/Virtualizer/index.stories.ts @@ -1,4 +1,4 @@ -import { Virtualizer } from '../../src/Virtualizer'; +import { Virtualizer } from '@fluentui/react-components/unstable'; import descriptionMd from './VirtualizerDescription.md'; export { Default } from './Default.stories'; diff --git a/packages/react-components/react-virtualizer/stories/VirtualizerScrollView/ScrollTo.stories.tsx b/packages/react-components/react-virtualizer/stories/VirtualizerScrollView/ScrollTo.stories.tsx index b68b999ec27ab4..638784c1651507 100644 --- a/packages/react-components/react-virtualizer/stories/VirtualizerScrollView/ScrollTo.stories.tsx +++ b/packages/react-components/react-virtualizer/stories/VirtualizerScrollView/ScrollTo.stories.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { VirtualizerScrollView } from '@fluentui/react-components/unstable'; +import type { ScrollToInterface } from '@fluentui/react-components/unstable'; import { Text, Input, makeStyles } from '@fluentui/react-components'; import { Button } from '@fluentui/react-components'; -import { ScrollToInterface } from '../../src/Utilities'; const useStyles = makeStyles({ child: { diff --git a/packages/react-components/react-virtualizer/stories/VirtualizerScrollView/index.stories.ts b/packages/react-components/react-virtualizer/stories/VirtualizerScrollView/index.stories.ts index 82d353041b649a..97a1c28f8afb4f 100644 --- a/packages/react-components/react-virtualizer/stories/VirtualizerScrollView/index.stories.ts +++ b/packages/react-components/react-virtualizer/stories/VirtualizerScrollView/index.stories.ts @@ -1,4 +1,4 @@ -import { VirtualizerScrollView } from '../../src/VirtualizerScrollView'; +import { VirtualizerScrollView } from '@fluentui/react-components/unstable'; import descriptionMd from './VirtualizerScrollViewDescription.md'; export { Default } from './Default.stories'; diff --git a/packages/react-components/react-virtualizer/stories/VirtualizerScrollViewDynamic/ScrollTo.stories.tsx b/packages/react-components/react-virtualizer/stories/VirtualizerScrollViewDynamic/ScrollTo.stories.tsx index 8b67e09a8fa637..24008183604794 100644 --- a/packages/react-components/react-virtualizer/stories/VirtualizerScrollViewDynamic/ScrollTo.stories.tsx +++ b/packages/react-components/react-virtualizer/stories/VirtualizerScrollViewDynamic/ScrollTo.stories.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { VirtualizerScrollViewDynamic } from '@fluentui/react-components/unstable'; +import type { ScrollToInterface } from '@fluentui/react-components/unstable'; +import type { VirtualizerDataRef } from '@fluentui/react-virtualizer'; import { Button, Input, makeStyles, Text } from '@fluentui/react-components'; import { useEffect } from 'react'; -import { ScrollToInterface } from '../../src/Utilities'; -import { VirtualizerDataRef } from '../../src/Virtualizer'; const useStyles = makeStyles({ child: { diff --git a/packages/react-components/react-virtualizer/stories/VirtualizerScrollViewDynamic/index.stories.ts b/packages/react-components/react-virtualizer/stories/VirtualizerScrollViewDynamic/index.stories.ts index 572f81cf796e19..5aa34ef060e83f 100644 --- a/packages/react-components/react-virtualizer/stories/VirtualizerScrollViewDynamic/index.stories.ts +++ b/packages/react-components/react-virtualizer/stories/VirtualizerScrollViewDynamic/index.stories.ts @@ -1,4 +1,4 @@ -import { VirtualizerScrollViewDynamic } from '../../src/VirtualizerScrollViewDynamic'; +import { VirtualizerScrollViewDynamic } from '@fluentui/react-components/unstable'; import descriptionMd from './VirtualizerScrollViewDynamicDescription.md'; export { AutoMeasure } from './AutoMeasure.stories'; From 664ea35e08b95257ab15c696c137c17c7612889b Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 17 Apr 2024 16:55:50 +0200 Subject: [PATCH 2/5] fix: remove circular dependencies from cypress files --- .../react-breadcrumb/package.json | 2 ++ .../Breadcrumb/BreadcrumbWithMenu.cy.tsx | 14 +++----------- .../react-components/react-dialog/package.json | 4 ++++ .../src/components/Dialog/Dialog.cy.tsx | 16 ++++------------ .../components/DialogTitle/DialogTitle.cy.tsx | 2 +- 5 files changed, 14 insertions(+), 24 deletions(-) diff --git a/packages/react-components/react-breadcrumb/package.json b/packages/react-components/react-breadcrumb/package.json index ecd1215df7fc2a..a34b79b5327e94 100644 --- a/packages/react-components/react-breadcrumb/package.json +++ b/packages/react-components/react-breadcrumb/package.json @@ -28,6 +28,8 @@ "bundle-size": "monosize measure" }, "devDependencies": { + "@fluentui/react-menu": "*", + "@fluentui/react-overflow": "*", "@fluentui/eslint-plugin": "*", "@fluentui/react-conformance": "*", "@fluentui/react-conformance-griffel": "*", diff --git a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/BreadcrumbWithMenu.cy.tsx b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/BreadcrumbWithMenu.cy.tsx index 91f38eb35b2c2d..4e0e2c54fab8d9 100644 --- a/packages/react-components/react-breadcrumb/src/components/Breadcrumb/BreadcrumbWithMenu.cy.tsx +++ b/packages/react-components/react-breadcrumb/src/components/Breadcrumb/BreadcrumbWithMenu.cy.tsx @@ -11,17 +11,9 @@ import { BreadcrumbDivider } from '../BreadcrumbDivider'; import { partitionBreadcrumbItems } from '../../utils'; import type { BreadcrumbProps } from './Breadcrumb.types'; import type { PartitionBreadcrumbItems } from '../../utils'; -import { - Button, - Menu, - MenuList, - MenuItemLink, - MenuPopover, - MenuTrigger, - useIsOverflowItemVisible, - useOverflowMenu, - MenuItem, -} from '@fluentui/react-components'; +import { Button } from '@fluentui/react-button'; +import { Menu, MenuList, MenuItemLink, MenuPopover, MenuTrigger, MenuItem } from '@fluentui/react-menu'; +import { useIsOverflowItemVisible, useOverflowMenu } from '@fluentui/react-overflow'; const MoreHorizontal = bundleIcon(MoreHorizontalFilled, MoreHorizontalRegular); const mountFluent = (element: JSX.Element) => { diff --git a/packages/react-components/react-dialog/package.json b/packages/react-components/react-dialog/package.json index 0b6f2ef1b5a441..d6e62aeac7fa82 100644 --- a/packages/react-components/react-dialog/package.json +++ b/packages/react-components/react-dialog/package.json @@ -28,6 +28,10 @@ "test-ssr": "test-ssr \"./stories/**/*.stories.tsx\"" }, "devDependencies": { + "@fluentui/react-popover": "*", + "@fluentui/react-tooltip": "*", + "@fluentui/react-menu": "*", + "@fluentui/react-button": "*", "@fluentui/eslint-plugin": "*", "@fluentui/react-conformance": "*", "@fluentui/react-conformance-griffel": "*", diff --git a/packages/react-components/react-dialog/src/components/Dialog/Dialog.cy.tsx b/packages/react-components/react-dialog/src/components/Dialog/Dialog.cy.tsx index 1a41d754a59a91..b81b840599e015 100644 --- a/packages/react-components/react-dialog/src/components/Dialog/Dialog.cy.tsx +++ b/packages/react-components/react-dialog/src/components/Dialog/Dialog.cy.tsx @@ -13,18 +13,10 @@ import { DialogTitle, DialogTrigger, } from '@fluentui/react-dialog'; -import { - Button, - Menu, - MenuItem, - MenuList, - MenuPopover, - MenuTrigger, - Popover, - PopoverSurface, - PopoverTrigger, - Tooltip, -} from '@fluentui/react-components'; +import { Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-popover'; +import { Tooltip } from '@fluentui/react-tooltip'; +import { Button } from '@fluentui/react-button'; +import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu'; import { dialogSurfaceSelector, dialogTriggerCloseId, diff --git a/packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.cy.tsx b/packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.cy.tsx index c5db62f134a3bf..42c81d4ed92437 100644 --- a/packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.cy.tsx +++ b/packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.cy.tsx @@ -13,7 +13,7 @@ import { DialogTitle, DialogTrigger, } from '@fluentui/react-dialog'; -import { Button } from '@fluentui/react-components'; +import { Button } from '@fluentui/react-button'; import { dialogActionSelector, dialogTriggerOpenId, dialogTriggerOpenSelector } from '../../testing/selectors'; const mount = (element: JSX.Element) => mountBase({element}); From f768cb4dbc6fa8700e2f10798c550d50d229986c Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 17 Apr 2024 16:59:03 +0200 Subject: [PATCH 3/5] change files --- ...ct-breadcrumb-ea432422-f0f1-4d52-bef7-6d476f1066e5.json | 7 +++++++ ...-react-dialog-69502076-906b-4301-88a5-817ccfb2d1a0.json | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 change/@fluentui-react-breadcrumb-ea432422-f0f1-4d52-bef7-6d476f1066e5.json create mode 100644 change/@fluentui-react-dialog-69502076-906b-4301-88a5-817ccfb2d1a0.json diff --git a/change/@fluentui-react-breadcrumb-ea432422-f0f1-4d52-bef7-6d476f1066e5.json b/change/@fluentui-react-breadcrumb-ea432422-f0f1-4d52-bef7-6d476f1066e5.json new file mode 100644 index 00000000000000..d7d33f431de21e --- /dev/null +++ b/change/@fluentui-react-breadcrumb-ea432422-f0f1-4d52-bef7-6d476f1066e5.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: remove circular dependencies from cypress files", + "packageName": "@fluentui/react-breadcrumb", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-dialog-69502076-906b-4301-88a5-817ccfb2d1a0.json b/change/@fluentui-react-dialog-69502076-906b-4301-88a5-817ccfb2d1a0.json new file mode 100644 index 00000000000000..77972bf222fee1 --- /dev/null +++ b/change/@fluentui-react-dialog-69502076-906b-4301-88a5-817ccfb2d1a0.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "fix: remove circular dependencies from cypress files", + "packageName": "@fluentui/react-dialog", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} From 9b77afba3349becb151d22e203872933f78db3b9 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 17 Apr 2024 17:28:53 +0200 Subject: [PATCH 4/5] fix: dont apply import/no-extraneous-dependencies rule on stories --- packages/eslint-plugin/src/utils/configHelpers.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/eslint-plugin/src/utils/configHelpers.js b/packages/eslint-plugin/src/utils/configHelpers.js index 37af2f6c4f7c0e..d8e00cd474caf3 100644 --- a/packages/eslint-plugin/src/utils/configHelpers.js +++ b/packages/eslint-plugin/src/utils/configHelpers.js @@ -39,6 +39,7 @@ const testFiles = [ ]; const docsFiles = ['**/*Page.tsx', '**/{docs,demo}/**', '**/*.doc.{ts,tsx}']; +const storyFiles = ['**/*.stories.tsx', '**/*.stories.ts']; const configFiles = [ './just.config.ts', @@ -84,7 +85,7 @@ module.exports = { * - may need to reconsider for converged components depending on website approach * - the stories suffix is also used for storywright stories in `vr-tests` */ - devDependenciesFiles: [...testFiles, ...docsFiles, ...configFiles, '**/*.stories.tsx'], + devDependenciesFiles: [...testFiles, ...docsFiles, ...configFiles, ...storyFiles], /** * Whether linting is running in context of lint-staged (which should disable rules requiring From 1e6061936d430bde6a28285c64a74925dc2e7f5a Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 17 Apr 2024 17:31:09 +0200 Subject: [PATCH 5/5] fixup! fix: dont apply import/no-extraneous-dependencies rule on stories --- ...eslint-plugin-35756908-2280-4ee6-81f0-67c716df8257.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-eslint-plugin-35756908-2280-4ee6-81f0-67c716df8257.json diff --git a/change/@fluentui-eslint-plugin-35756908-2280-4ee6-81f0-67c716df8257.json b/change/@fluentui-eslint-plugin-35756908-2280-4ee6-81f0-67c716df8257.json new file mode 100644 index 00000000000000..0e24f67e95fa0f --- /dev/null +++ b/change/@fluentui-eslint-plugin-35756908-2280-4ee6-81f0-67c716df8257.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: dont apply import/no-extraneous-dependencies rule on stories", + "packageName": "@fluentui/eslint-plugin", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "patch" +}