fix: remove relative imports within stories which are invalid for cre…

…ating 'show docs' and circular dep imports from cypress files (#31087)

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"
+}

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"
+}

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"
+}

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

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": "*",

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) => {

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": "*",

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,

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(<FluentProvider theme={teamsLightTheme}>{element}</FluentProvider>);

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<TreeItemValue[]>([]);

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<NodeJS.Timeout>();
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
 
   React.useEffect(() => {
     updateTimeout();

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';

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: {

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';

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: {

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';