chore: replace no-restricted-globals with `@nx/workspace-no-restric…

…ted-globals` in whole monorepo (#32960)

apps/perf-test-react-components/.eslintrc.json

@@ -4,6 +4,6 @@
   "rules": {
     "@griffel/styles-file": "off",
     "no-console": "off",
-    "no-restricted-globals": "off"
+    "@nx/workspace-no-restricted-globals": "off"
   }
 }

apps/public-docsite-v9/.eslintrc.json

@@ -5,7 +5,6 @@
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/jsx-no-bind": "off",
     "deprecation/deprecation": "off",
-    "import/no-extraneous-dependencies": ["error", { "packageDir": [".", "../.."] }],
-    "no-restricted-globals": "off"
+    "import/no-extraneous-dependencies": ["error", { "packageDir": [".", "../.."] }]
   }
 }

apps/public-docsite-v9/src/AccessibilityScenarios/TabListOverflow.stories.tsx

@@ -70,8 +70,6 @@ const tabs: SettingsTab[] = [
 
 type OverflowMenuItemProps = {
   tab: SettingsTab;
-  // FIXME: This should be a consistent callback type
-  // eslint-disable-next-line @nx/workspace-consistent-callback-type
   onClick: React.MouseEventHandler<HTMLDivElement>;
 };
 
@@ -91,8 +89,6 @@ const OverflowMenuItem = (props: OverflowMenuItemProps) => {
 };
 
 type OverflowMenuProps = {
-  // FIXME: This should be a consistent callback type
-  // eslint-disable-next-line @nx/workspace-consistent-callback-type
   onTabSelect?: (tabId: string) => void;
 };
 

apps/public-docsite-v9/src/AccessibilityScenarios/utils.tsx

@@ -30,7 +30,7 @@ export const BackLink = () => <ScenariosListLink>Go back to main menu</Scenarios
 
 export const Scenario: React.FunctionComponent<{ pageTitle: string }> = ({ pageTitle, children }) => {
   React.useEffect(() => {
-    // eslint-disable-next-line no-restricted-globals
+    // eslint-disable-next-line @nx/workspace-no-restricted-globals
     document.title = pageTitle + APP_TITLE_SEPARATOR + APP_TITLE;
   }, [pageTitle]);
 

apps/public-docsite-v9/src/Concepts/Accessibility/LabellingExamples/ExampleFormErrorsMessages.stories.tsx

@@ -13,10 +13,8 @@ const useStyles = makeStyles({
 
 const regexes = {
   onlyNameChars: /^[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]*$/,
-  // eslint-disable-next-line @fluentui/max-len
   startsAndEndsWithLetter:
     /^(([A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ][A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]*[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ])|[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ])?$/,
-  // eslint-disable-next-line @fluentui/max-len
   validEmail:
     /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i,
 };

apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/useDebounce.ts

@@ -5,7 +5,9 @@ export const useDebounce = (fn: (...args: unknown[]) => void, duration: number)
 
   return React.useCallback(
     (...args: unknown[]) => {
-      clearTimeout(timeoutRef.current);
+      // eslint-disable-next-line @nx/workspace-no-restricted-globals
+      window.clearTimeout(timeoutRef.current);
+      // eslint-disable-next-line @nx/workspace-no-restricted-globals
       timeoutRef.current = window.setTimeout(() => {
         fn(...args);
       }, duration);

apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDefault.stories.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-restricted-globals, no-restricted-properties */
+/* eslint-disable no-restricted-properties */
 import * as React from 'react';
 import { makeStyles, tokens, mergeClasses, createCSSRuleFromTheme, webLightTheme } from '@fluentui/react-components';
 

apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeSwitching.stories.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-restricted-globals, no-restricted-properties */
+/* eslint-disable no-restricted-properties */
 import * as React from 'react';
 import {
   makeStyles,

apps/react-18-tests-v8/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:@fluentui/eslint-plugin/react"],
+  "extends": ["plugin:@fluentui/eslint-plugin/react--legacy"],
   "root": true,
   "rules": {
     "no-restricted-globals": "off"

apps/react-18-tests-v9/.eslintrc.json

@@ -2,6 +2,6 @@
   "extends": ["plugin:@fluentui/eslint-plugin/react"],
   "root": true,
   "rules": {
-    "no-restricted-globals": "off"
+    "@nx/workspace-no-restricted-globals": "off"
   }
 }

apps/vr-tests-react-components/.eslintrc.json

@@ -9,6 +9,6 @@
     "@typescript-eslint/jsx-no-bind": "off",
     "deprecation/deprecation": "off",
     "import/no-extraneous-dependencies": ["error", { "packageDir": [".", "../.."] }],
-    "no-restricted-globals": "off"
+    "@nx/workspace-no-restricted-globals": "off"
   }
 }

change/@fluentui-eslint-plugin-60857b83-482c-4675-8085-b7e66adf9e2a.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: replace no-restricted-globals with type aware @nx/workspace-no-restricted-globals in v9",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-global-context-1a4bf14a-4a70-45b4-b503-5e4eb0e67a05.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "style: replace no-restricted-globals with type aware @nx/workspace-no-restricted-globals in v9",
+  "packageName": "@fluentui/global-context",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-public-docsite-setup-3e654d9c-6517-4c86-9439-8f2ad4886341.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: use react--legacy config in v8 projects",
+  "packageName": "@fluentui/public-docsite-setup",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-icons-compat-20a3409c-db79-4850-a272-b0f020b40e73.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "style: replace no-restricted-globals with type aware @nx/workspace-no-restricted-globals in v9",
+  "packageName": "@fluentui/react-icons-compat",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-shared-contexts-9da35c5a-c487-4043-ae7b-ce4aee6a76e4.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "style: replace no-restricted-globals with type aware @nx/workspace-no-restricted-globals in v9",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-table-2714626f-4f88-442d-9d93-f608c0e1cd9d.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "style: replace no-restricted-globals with type aware @nx/workspace-no-restricted-globals in v9",
+  "packageName": "@fluentui/react-table",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-utilities-6c13ff61-195d-43bf-a2b1-f44b03849e73.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "style: replace no-restricted-globals with type aware @nx/workspace-no-restricted-globals in v9",
+  "packageName": "@fluentui/react-utilities",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}

packages/cra-template/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:@fluentui/eslint-plugin/react"],
+  "extends": ["plugin:@fluentui/eslint-plugin/react--legacy"],
   "root": true,
   "overrides": [
     {

packages/eslint-plugin/src/configs/react-config.js

@@ -1,5 +1,4 @@
 const configHelpers = require('../utils/configHelpers');
-const { react: restrictedGlobals } = require('./restricted-globals');
 
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
@@ -30,7 +29,6 @@ module.exports = {
     '@griffel/no-shorthands': 'error',
     '@griffel/pseudo-element-naming': 'error',
     '@griffel/styles-file': 'error',
-    'no-restricted-globals': restrictedGlobals,
     /**
      * react eslint rules
      * @see https://github.com/yannickcr/eslint-plugin-react
@@ -125,15 +123,13 @@ module.exports = {
       files: [...configHelpers.testFiles],
       rules: {
         'react/jsx-no-bind': 'off',
-        'no-restricted-globals': 'off',
       },
     },
     {
       files: '**/*.stories.tsx',
       rules: {
         // allow makeStyles calls in stories as examples should be defined in a single file
         '@griffel/styles-file': 'off',
-        'no-restricted-globals': 'off',
         // allow arrow functions in stories for now (may want to change this later since using
         // constantly-mutating functions can be an anti-pattern which we may not want to demonstrate
         // in our converged components docs; it happened to be allowed starting out because .stories

packages/eslint-plugin/src/internal.js

@@ -1,3 +1,5 @@
+const restrictedGlobals = require('./configs/restricted-globals');
+
 function shouldRegisterInternal() {
   try {
     const hasNxEslintPlugin = require.resolve('@nx/eslint-plugin');
@@ -26,8 +28,10 @@ const __internal = {
     react: shouldRegister
       ? {
           files: ['**/src/**/*.{ts,tsx}'],
+          excludedFiles: ['*.{test,spec,cy,stories}.{ts,tsx}'],
           rules: {
             '@nx/workspace-consistent-callback-type': 'error',
+            '@nx/workspace-no-restricted-globals': restrictedGlobals.react,
           },
         }
       : null,

packages/public-docsite-setup/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:@fluentui/eslint-plugin/react"],
+  "extends": ["plugin:@fluentui/eslint-plugin/react--legacy"],
   "root": true,
   "overrides": [
     {

packages/public-docsite-setup/src/types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 /** `IContextualMenuItem`-like interface, compatible with ContextualMenu in versions 5-8. */
 export interface VersionMenuItem {
   /** Major version number (a unique key for the entry). */

packages/react-components/global-context/src/global-context-selector.ts

@@ -5,8 +5,10 @@ import { getMajorVersion } from './utils';
 import { GlobalObject } from './types';
 
 const isBrowser = canUseDOM();
-// eslint-disable-next-line no-restricted-globals
-const globalObject: GlobalObject = isBrowser ? window : global;
+const globalObject: GlobalObject = isBrowser
+  ? // eslint-disable-next-line @nx/workspace-no-restricted-globals
+    window
+  : global;
 
 // Identifier for the symbol, for easy idenfitifaction of symbols created by this util
 // Useful for clearning global object during SSR reloads

packages/react-components/global-context/src/global-context.ts

@@ -4,8 +4,10 @@ import { GlobalObject } from './types';
 import { getMajorVersion } from './utils';
 
 const isBrowser = canUseDOM();
-// eslint-disable-next-line no-restricted-globals
-const globalObject: GlobalObject = isBrowser ? window : global;
+const globalObject: GlobalObject = isBrowser
+  ? // eslint-disable-next-line @nx/workspace-no-restricted-globals
+    window
+  : global;
 
 // Identifier for the symbol, for easy idenfitifaction of symbols created by this util
 // Useful for clearning global object during SSR reloads

packages/react-components/react-icons-compat/library/src/getWindow.ts

@@ -6,7 +6,7 @@ let _window: Window | undefined = undefined;
 // hits a memory leak, whereas aliasing it and calling "typeof _window" does not.
 // Caching the window value at the file scope lets us minimize the impact.
 try {
-  // eslint-disable-next-line no-restricted-globals
+  // eslint-disable-next-line @nx/workspace-no-restricted-globals
   _window = window;
 } catch (e) {
   /* no-op */

packages/react-components/react-icons-compat/library/src/icon.ts

@@ -198,7 +198,6 @@ export function setIconOptions(options: Partial<IconOptions>): void {
 
 let _missingIcons: string[] = [];
 // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
-// eslint-disable-next-line no-restricted-globals
 let _missingIconsTimer: ReturnType<typeof setTimeout> | undefined = undefined;
 
 function _warnDuplicateIcon(iconName: string): void {
@@ -209,19 +208,20 @@ function _warnDuplicateIcon(iconName: string): void {
   if (!options.disableWarnings) {
     _missingIcons.push(iconName);
     if (_missingIconsTimer === undefined) {
-      // eslint-disable-next-line no-restricted-globals
-      _missingIconsTimer = setTimeout(() => {
-        // eslint-disable-next-line no-console
-        console.warn(
-          `Some icons were re-registered. Applications should only call registerIcons for any given ` +
-            `icon once. Redefining what an icon is may have unintended consequences. Duplicates ` +
-            `include: \n` +
-            _missingIcons.slice(0, maxIconsInMessage).join(', ') +
-            (_missingIcons.length > maxIconsInMessage ? ` (+ ${_missingIcons.length - maxIconsInMessage} more)` : ''),
-        );
-        _missingIconsTimer = undefined;
-        _missingIcons = [];
-      }, warningDelay);
+      _missingIconsTimer =
+        // eslint-disable-next-line @nx/workspace-no-restricted-globals
+        setTimeout(() => {
+          // eslint-disable-next-line no-console
+          console.warn(
+            `Some icons were re-registered. Applications should only call registerIcons for any given ` +
+              `icon once. Redefining what an icon is may have unintended consequences. Duplicates ` +
+              `include: \n` +
+              _missingIcons.slice(0, maxIconsInMessage).join(', ') +
+              (_missingIcons.length > maxIconsInMessage ? ` (+ ${_missingIcons.length - maxIconsInMessage} more)` : ''),
+          );
+          _missingIconsTimer = undefined;
+          _missingIcons = [];
+        }, warningDelay);
     }
   }
 }

packages/react-components/react-motion-components-preview/library/src/testing/testUtils.ts

@@ -16,8 +16,13 @@ function getMotionFunction(component: PresenceComponent): PresenceMotionFn | nul
 export function expectPresenceMotionObject(component: PresenceComponent) {
   const presenceMotionFn = getMotionFunction(component);
 
-  // eslint-disable-next-line no-restricted-globals
-  expect(presenceMotionFn?.({ element: document.createElement('div') })).toMatchObject({
+  expect(
+    presenceMotionFn?.({
+      element:
+        // eslint-disable-next-line @nx/workspace-no-restricted-globals
+        document.createElement('div'),
+    }),
+  ).toMatchObject({
     enter: expect.objectContaining({
       duration: expect.any(Number),
       easing: expect.any(String),

packages/react-components/react-motion/stories/src/Tokens/Cards.tsx

@@ -86,7 +86,7 @@ const MotionDurationCard: React.FC<{ animationEnabled: boolean; tokenName: strin
 function useAnimationEnabled() {
   const [animationEnabled, setAnimationEnabled] = React.useState(() => {
     // Heads up/ Not the best way to detect reduced motion as it breaks SSR, but it's good enough for Storybook
-    // eslint-disable-next-line no-restricted-globals
+    // eslint-disable-next-line @nx/workspace-no-restricted-globals
     const isReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
     return !isReducedMotion;

packages/react-components/react-shared-contexts/library/src/ProviderContext/ProviderContext.ts

@@ -16,7 +16,7 @@ const ProviderContext = React.createContext<ProviderContextValue | undefined>(
 ) as React.Context<ProviderContextValue>;
 
 const providerContextDefaultValue: ProviderContextValue = {
-  // eslint-disable-next-line no-restricted-globals
+  // eslint-disable-next-line @nx/workspace-no-restricted-globals -- expected ignore ( SSR friendly acquisition of globals )
   targetDocument: typeof document === 'object' ? document : undefined,
   dir: 'ltr' as const,
 };

packages/react-components/react-table/library/src/hooks/useMeasureElement.ts

@@ -11,8 +11,7 @@ export function useMeasureElement<TElement extends HTMLElement = HTMLElement>()
   const [width, setWidth] = React.useState(0);
 
   const container = React.useRef<HTMLElement | undefined>(undefined);
-  // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
-  // eslint-disable-next-line no-restricted-globals
+
   const resizeObserverRef = React.useRef<ResizeObserver | null>(null);
 
   const { targetDocument } = useFluent();

packages/react-components/react-tree/stories/src/Tree/utils/mockFetch.ts

@@ -4,7 +4,7 @@ export interface Response {
 
 export const mockFetch = (type: string) => {
   return new Promise<Response>(resolve => {
-    // eslint-disable-next-line no-restricted-globals
+    // eslint-disable-next-line @nx/workspace-no-restricted-globals
     setTimeout(() => {
       const mockData: Response = {
         results: Array.from({ length: 10 }, (_, index) => ({

packages/react-components/react-utilities/src/ssr/canUseDOM.ts

@@ -3,7 +3,13 @@
  */
 export function canUseDOM(): boolean {
   return (
-    // eslint-disable-next-line deprecation/deprecation, no-restricted-globals
-    typeof window !== 'undefined' && !!(window.document && window.document.createElement)
+    /* eslint-disable @nx/workspace-no-restricted-globals -- expected ignore ( SSR friendly acquisition of globals )*/
+    typeof window !== 'undefined' &&
+    !!(
+      window.document &&
+      // eslint-disable-next-line deprecation/deprecation
+      window.document.createElement
+    )
+    /* eslint-enable @nx/workspace-no-restricted-globals */
   );
 }

packages/react-components/theme-designer/.eslintrc.json

@@ -3,6 +3,6 @@
   "root": true,
   "rules": {
     "@griffel/styles-file": "off",
-    "no-restricted-globals": "off"
+    "@nx/workspace-no-restricted-globals": "off"
   }
 }

packages/react-window-provider/.eslintrc.json

@@ -1,4 +1,4 @@
 {
-  "extends": ["plugin:@fluentui/eslint-plugin/react"],
+  "extends": ["plugin:@fluentui/eslint-plugin/react--legacy"],
   "root": true
 }

packages/set-version/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:@fluentui/eslint-plugin/react"],
+  "extends": ["plugin:@fluentui/eslint-plugin/react--legacy"],
   "root": true,
   "rules": {
     "deprecation/deprecation": "off",