chore(react-menu): migrate to new package structure (#25015)

change/@fluentui-react-menu-a2019e67-ddb5-4084-ab5c-661c427cdc9c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Migrate to new package structure",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-menu/.npmignore

@@ -3,10 +3,11 @@
 bundle-size/
 config/
 coverage/
-e2e/
+docs/
 etc/
 node_modules/
 src/
+stories/
 dist/types/
 temp/
 __fixtures__
@@ -16,7 +17,7 @@ __tests__
 *.api.json
 *.log
 *.spec.*
-*.stories.*
+*.cy.*
 *.test.*
 *.yml
 

packages/react-components/react-menu/.storybook/main.js

@@ -2,7 +2,7 @@ const rootMain = require('../../../../.storybook/main');
 
 module.exports = /** @type {Omit<import('../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
   ...rootMain,
-  stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'],
+  stories: [...rootMain.stories, '../stories/**/*.stories.mdx', '../stories/**/index.stories.@(ts|tsx)'],
   addons: [...rootMain.addons],
   webpackFinal: (config, options) => {
     const localConfig = { ...rootMain.webpackFinal(config, options) };

packages/react-components/react-menu/.storybook/tsconfig.json

@@ -6,5 +6,5 @@
     "checkJs": true,
     "types": ["static-assets", "environment", "storybook__addons"]
   },
-  "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"]
+  "include": ["../stories/**/*.stories.ts", "../stories/**/*.stories.tsx", "*.js"]
 }

packages/react-components/react-menu/package.json

@@ -4,7 +4,7 @@
   "description": "Fluent UI menu component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "dist/index.d.ts",
+  "typings": "./dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -61,9 +61,10 @@
   },
   "exports": {
     ".": {
-      "types": "./lib/index.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./lib/index.js",
       "require": "./lib-commonjs/index.js"
-    }
+    },
+    "./package.json": "./package.json"
   }
 }

packages/react-components/react-menu/e2e/Menu.e2e.tsx → packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx

@@ -10,7 +10,7 @@ import {
   menuTriggerSelector,
   menuItemSelector,
   menuSelector,
-} from './selectors';
+} from '../../testing/selectors';
 
 import {
   Menu,
@@ -149,6 +149,7 @@ describe('Custom Trigger', () => {
     };
 
     return (
+      // eslint-disable-next-line react/jsx-no-bind
       <Menu open={open} onOpenChange={onOpenChange}>
         <MenuTrigger>
           <CustomMenuTrigger />
@@ -692,6 +693,7 @@ describe(`Nested Menus`, () => {
     };
 
     return (
+      // eslint-disable-next-line react/jsx-no-bind
       <Menu open={open} onOpenChange={onOpenChange}>
         <MenuTrigger>
           <MenuItem>Editor Layout</MenuItem>
@@ -715,6 +717,7 @@ describe(`Nested Menus`, () => {
     };
 
     return (
+      // eslint-disable-next-line react/jsx-no-bind
       <Menu open={open} onOpenChange={onOpenChange}>
         <MenuTrigger>
           <MenuItem>Appearance</MenuItem>
@@ -739,6 +742,7 @@ describe(`Nested Menus`, () => {
     };
 
     return (
+      // eslint-disable-next-line react/jsx-no-bind
       <Menu open={open} onOpenChange={onOpenChange}>
         <MenuTrigger>
           <MenuItem>Preferences</MenuItem>

packages/react-components/react-menu/src/components/Menu/Menu.test.tsx

@@ -2,7 +2,7 @@ import { resetIdsForTests } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { Menu } from './Menu';
 import { render, fireEvent } from '@testing-library/react';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 import { MenuTrigger } from '../MenuTrigger/index';
 import { MenuList } from '../MenuList/index';
 import { MenuItem } from '../MenuItem/index';

packages/react-components/react-menu/src/components/MenuDivider/MenuDivider.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { MenuDivider } from './MenuDivider';
 import * as renderer from 'react-test-renderer';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 
 describe('MenuDivider', () => {
   isConformant({

packages/react-components/react-menu/src/components/MenuGroup/MenuGroup.test.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { MenuGroup } from './MenuGroup';
 import * as renderer from 'react-test-renderer';
 import { render } from '@testing-library/react';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 
 describe('MenuGroup', () => {
   isConformant({

packages/react-components/react-menu/src/components/MenuGroupHeader/MenuGroupHeader.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { MenuGroupHeader } from './MenuGroupHeader';
 import * as renderer from 'react-test-renderer';
 import { render } from '@testing-library/react';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 import { MenuGroupContextProvider } from '../../contexts/menuGroupContext';
 
 describe('MenuGroupHeader', () => {

packages/react-components/react-menu/src/components/MenuItem/MenuItem.test.tsx

@@ -3,10 +3,10 @@ import { render, fireEvent, createEvent } from '@testing-library/react';
 import { Enter, Space } from '@fluentui/keyboard-keys';
 import { MenuItem } from './MenuItem';
 import * as renderer from 'react-test-renderer';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 import { MenuTriggerContextProvider } from '../../contexts/menuTriggerContext';
 import { MenuListProvider } from '../../contexts/menuListContext';
-import { mockUseMenuContext } from '../../common/mockUseMenuContext';
+import { mockUseMenuContext } from '../../testing/mockUseMenuContext';
 import type { MenuItemProps } from './MenuItem.types';
 
 jest.mock('../../contexts/menuContext');

packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import * as renderer from 'react-test-renderer';
 import { Enter, Space } from '@fluentui/keyboard-keys';
 import { render, fireEvent } from '@testing-library/react';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 import { MenuItemCheckbox } from './MenuItemCheckbox';
 import { MenuListProvider } from '../../contexts/menuListContext';
-import { mockUseMenuContext } from '../../common/mockUseMenuContext';
+import { mockUseMenuContext } from '../../testing/mockUseMenuContext';
 import type { MenuListContextValue } from '../../contexts/menuListContext';
 import type { MenuItemCheckboxProps } from './MenuItemCheckbox.types';
 

packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx

@@ -3,7 +3,7 @@ import * as renderer from 'react-test-renderer';
 import { Enter, Space } from '@fluentui/keyboard-keys';
 import { render, fireEvent } from '@testing-library/react';
 import { MenuItemRadio } from './MenuItemRadio';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 import { MenuListProvider } from '../../contexts/menuListContext';
 import type { MenuListContextValue } from '../../contexts/menuListContext';
 import type { MenuItemRadioProps } from './MenuItemRadio.types';

packages/react-components/react-menu/e2e/MenuList.e2e.tsx → packages/react-components/react-menu/src/components/MenuList/MenuList.cy.tsx

@@ -4,7 +4,7 @@ import { mount as mountBase } from '@cypress/react';
 import { FluentProvider } from '@fluentui/react-provider';
 import { teamsLightTheme } from '@fluentui/react-theme';
 
-import { menuTriggerSelector, menuItemSelector, menuSelector } from './selectors';
+import { menuTriggerSelector, menuItemSelector, menuSelector } from '../../testing/selectors';
 
 import { MenuList, MenuItem, Menu, MenuTrigger, MenuPopover } from '@fluentui/react-menu';
 const mount = (element: JSX.Element) => {

packages/react-components/react-menu/src/components/MenuList/MenuList.test.tsx

@@ -3,7 +3,7 @@ import { MenuList } from './MenuList';
 import * as renderer from 'react-test-renderer';
 import { render } from '@testing-library/react';
 import { useHasParentContext } from '@fluentui/react-context-selector';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 import { MenuListContext } from '../../contexts/menuListContext';
 
 describe('MenuList', () => {

packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { MenuPopover } from './MenuPopover';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 import { MenuPopoverProps } from './MenuPopover.types';
 
 describe('MenuPopover', () => {

packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { MenuSplitGroup } from './MenuSplitGroup';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 
 describe('MenuSplitGroup', () => {
   isConformant({

packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.test.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { MenuTrigger } from './MenuTrigger';
 import * as renderer from 'react-test-renderer';
 import { createEvent, fireEvent, render } from '@testing-library/react';
-import { isConformant } from '../../common/isConformant';
-import { mockUseMenuContext } from '../../common/mockUseMenuContext';
+import { isConformant } from '../../testing/isConformant';
+import { mockUseMenuContext } from '../../testing/mockUseMenuContext';
 import { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';
 import { Enter } from '@fluentui/keyboard-keys';
 

packages/react-components/react-menu/e2e/tsconfig.json → packages/react-components/react-menu/tsconfig.cy.json

@@ -1,9 +1,9 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "./tsconfig.json",
   "compilerOptions": {
     "isolatedModules": false,
     "types": ["node", "cypress", "cypress-storybook/cypress", "cypress-real-events"],
     "lib": ["ES2019", "dom"]
   },
-  "include": ["**/*.ts", "**/*.tsx"]
+  "include": ["**/*.cy.ts", "**/*.cy.tsx"]
 }

packages/react-components/react-menu/tsconfig.json

@@ -22,7 +22,7 @@
       "path": "./.storybook/tsconfig.json"
     },
     {
-      "path": "./e2e/tsconfig.json"
+      "path": "./tsconfig.cy.json"
     }
   ]
 }

packages/react-components/react-menu/tsconfig.lib.json

@@ -10,13 +10,15 @@
     "types": ["static-assets", "environment"]
   },
   "exclude": [
-    "./src/common/**",
+    "./src/testing/**",
     "**/*.spec.ts",
     "**/*.spec.tsx",
     "**/*.test.ts",
     "**/*.test.tsx",
     "**/*.stories.ts",
-    "**/*.stories.tsx"
+    "**/*.stories.tsx",
+    "**/*.cy.ts",
+    "**/*.cy.tsx"
   ],
   "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }

packages/react-components/react-menu/tsconfig.spec.json

@@ -5,5 +5,13 @@
     "outDir": "dist",
     "types": ["jest", "node", "@testing-library/jest-dom"]
   },
-  "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+  "include": [
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.d.ts",
+    "./src/testing/**/*.ts",
+    "./src/testing/**/*.tsx"
+  ]
 }