eslint-plugin: Use new no-restricted-imports rule for v9 config (#23845)

* Add getPackageJson module

* update package.json

* update v9 lint config to use no-restricted-imports

* Change File

* fix dependency mismatch

* nit: remove duplicate import

* nit: move getPackageJson to configHelpers

Author: TristanWatanabe

change/@fluentui-eslint-plugin-269eedcb-d952-47f6-af9c-a98419d66efb.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: use no-restricted-import rule for v9 lint config.",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/eslint-plugin/package.json

@@ -27,7 +27,9 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "fs-extra": "^8.1.0",
     "minimatch": "^3.0.4",
+    "@nrwl/tao": "13.8.1",
     "jju": "^1.4.0"
   },
   "peerDependencies": {

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

@@ -8,12 +8,33 @@ const typeAwareRules = {
   '@fluentui/ban-context-export': ['error', { exclude: ['**/react-shared-contexts/**'] }],
 };
 
+const root = configHelpers.findGitRoot();
+const v9PackageDeps = Object.keys(
+  configHelpers.getPackageJson({ root, name: '@fluentui/react-components' }).dependencies,
+);
+
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   extends: [path.join(__dirname, 'base'), path.join(__dirname, 'react-config')],
   rules: {},
   overrides: [
     // Enable rules requiring type info only for appropriate files/circumstances
     ...configHelpers.getTypeInfoRuleOverrides(typeAwareRules),
+    {
+      files: '**/*.stories.tsx',
+      rules: {
+        '@fluentui/no-restricted-imports': [
+          'warn',
+          {
+            paths: [
+              {
+                forbidden: v9PackageDeps,
+                preferred: '@fluentui/react-components',
+              },
+            ],
+          },
+        ],
+      },
+    },
   ],
 };

packages/eslint-plugin/src/utils/configHelpers.js

@@ -1,9 +1,15 @@
 // @ts-check
 
-const fs = require('fs');
+const fs = require('fs-extra');
 const path = require('path');
 const jju = require('jju');
 
+/**
+ *  @typedef {{root: string, name: string}} Options
+ *  @typedef {{name: string, version: string, dependencies: {[key: string]: string}}} PackageJson
+ *  @typedef {import("@nrwl/tao/src/shared/workspace").WorkspaceJsonConfiguration} WorkspaceJsonConfiguration
+ */
+
 const testFiles = [
   '**/*{.,-}{test,spec,e2e}.{ts,tsx}',
   '**/{test,tests}/**',
@@ -218,4 +224,20 @@ module.exports = {
     }
     return cwd;
   },
+
+  /**
+   * Gets package.json of provided package name.
+   * @param {Options} options Takes provided root folder of git repo and package name.
+   * @returns {PackageJson} package.json file of the provided package name.
+   */
+  getPackageJson: (/** @type {Options} */ options) => {
+    /** @type {WorkspaceJsonConfiguration} */
+    const nxWorkspace = JSON.parse(fs.readFileSync(path.join(options.root, 'workspace.json'), 'utf-8'));
+    const projectMetaData = nxWorkspace.projects[options.name];
+    const packagePath = path.join(options.root, projectMetaData.root);
+    /** @type {PackageJson} */
+    const packageJson = fs.readJSONSync(path.join(packagePath, 'package.json'));
+
+    return packageJson;
+  },
 };