@redhat-cloud-services/eslint-config-redhat-cloud-services 1.2.6 → 2.0.0

package/index.js

@@ -22,6 +22,9 @@ module.exports = {
     'no-unused-vars': ['error', { ignoreRestSiblings: true }],
     'prettier/prettier': ['error', { singleQuote: true }],
     'rulesdir/disallow-fec-relative-imports': 2,
+    'rulesdir/deprecated-packages': 1,
+    'rulesdir/no-chrome-api-call-from-window': 2,
+    'rulesdir/forbid-pf-relative-imports': 2,
   },
   globals: {
     CRC_APP_NAME: 'readonly',

package/lib/rules/deprecated-packages.js

@@ -0,0 +1,43 @@
+/**
+ * @fileoverview Rule to warn about deprecated packages.
+ * @author Karel Hala
+ */
+
+const deprecatedPackages = {
+  '@redhat-cloud-services/frontend-components-pdf-generator': {
+    hint: 'https://github.com/RedHatInsights/pdf-generator',
+  },
+};
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow deprecated packages',
+      category: 'Possible run errors',
+      recommended: true,
+    },
+    fixable: 'code',
+    messages: {
+      avoidUsingDeprecatedWithHint: 'Avoid using deprecated package {{ package }}. More info can be found at {{ hint }}.',
+      avoidUsingDeprecated: 'Avoid using deprecated package {{ package }}.',
+    },
+  },
+  create: function (context) {
+    return {
+      ImportDeclaration: (codePath) => {
+        const [deprecatedImport, data] = Object.entries(deprecatedPackages).find(([pckg]) => codePath.source.value.includes(pckg)) || [];
+        if (deprecatedImport) {
+          context.report({
+            node: codePath,
+            messageId: data.hint ? 'avoidUsingDeprecatedWithHint' : 'avoidUsingDeprecated',
+            data: {
+              package: codePath.source.value,
+              ...data,
+            },
+          });
+        }
+      },
+    };
+  },
+};

package/lib/rules/forbid-pf-relative-imports.js

@@ -0,0 +1,194 @@
+/**
+ * @fileoverview Rule to disallow relative imports from @patternfly packages to enable "treeshaking" in module federation environment
+ * @author Martin Marosi
+ */
+const glob = require('glob');
+const path = require('path');
+const PFPackages = ['@patternfly/react-core', '@patternfly/react-icons', '@patternfly/tokens'];
+
+const PROPS_MATCH = /Props$/g;
+const VARIANT_MATCH = /Variants?$/g;
+const POSITION_MATCH = /Position$/g;
+
+const ICONS_NAME_FIX = {
+  AnsibeTowerIcon: 'ansibeTower-icon',
+  ChartSpikeIcon: 'chartSpike-icon',
+  CloudServerIcon: 'cloudServer-icon',
+};
+
+let CORE_CACHE = {};
+let COMPONENTS_CACHE = {};
+
+function findCoreComponent(name) {
+  if (CORE_CACHE[name]) {
+    return CORE_CACHE[name];
+  }
+  let source = glob
+    .sync(path.resolve(process.cwd(), `node_modules/${PFPackages[0]}/dist/esm/**/${name}.js`))
+    .filter((path) => !path.includes('deprecated'))?.[0];
+  if (!source && name.match(PROPS_MATCH)) {
+    source = glob
+      .sync(path.resolve(process.cwd(), `node_modules/${PFPackages[0]}/dist/esm/**/${name.replace(PROPS_MATCH, '')}.js`))
+      .filter((path) => !path.includes('deprecated'))?.[0];
+  }
+  if (!source && name.match(VARIANT_MATCH)) {
+    source = glob
+      .sync(path.resolve(process.cwd(), `node_modules/${PFPackages[0]}/dist/esm/**/${name.replace(VARIANT_MATCH, '')}.js`))
+      .filter((path) => !path.includes('deprecated'))?.[0];
+  }
+  if (!source && name.match(POSITION_MATCH)) {
+    source = glob
+      .sync(path.resolve(process.cwd(), `node_modules/${PFPackages[0]}/dist/esm/**/${name.replace(POSITION_MATCH, '')}.js`))
+      .filter((path) => !path.includes('deprecated'))?.[0];
+  }
+  if (!source) {
+    return false;
+  }
+  let dynamicSource = source.split('node_modules/').pop().replace('/esm/', '/dynamic/').split('/');
+  dynamicSource.pop();
+  dynamicSource = dynamicSource.join('/');
+  CORE_CACHE[name] = dynamicSource;
+  return dynamicSource;
+}
+
+function camelToDash(str) {
+  return str.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`).replace(/^-/, '');
+}
+
+function findIcon(name) {
+  if (COMPONENTS_CACHE[name]) {
+    return COMPONENTS_CACHE[name];
+  }
+  const nameSpecifier = ICONS_NAME_FIX[name] || camelToDash(name);
+  return `@patternfly/react-icons/dist/dynamic/icons/${nameSpecifier}`;
+}
+
+CORE_CACHE = {
+  ...CORE_CACHE,
+  getResizeObserver: findCoreComponent('resizeObserver'),
+  useOUIAProps: findCoreComponent('ouia'),
+  OUIAProps: findCoreComponent('ouia'),
+  getDefaultOUIAId: findCoreComponent('ouia'),
+  useOUIAId: findCoreComponent('ouia'),
+  handleArrows: findCoreComponent('KeyboardHandler'),
+  setTabIndex: findCoreComponent('KeyboardHandler'),
+  IconComponentProps: findCoreComponent('Icon'),
+  TreeViewDataItem: findCoreComponent('TreeView'),
+  Popper: findCoreComponent('Popper/Popper'),
+};
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'forbid relative imports from PF packages',
+      category: 'Possible build errors',
+      recommended: true,
+    },
+    fixable: 'code',
+    messages: {
+      avoidRelativeImport:
+        'Avoid using relative imports from {{ package }}. Use direct import path to {{ source }}. Module may be found at {{ hint }}.',
+      avoidRelativeIconImport:
+        'Avoid using relative imports from {{ package }}. Use direct import path to {{ source }}. Module may be found at {{ hint }}.',
+      avoidImportingStyles: 'Avoid importing styles from {{ package }}. Styles are injected with components automatically.',
+    },
+  },
+  create: function (context) {
+    return {
+      ImportDeclaration: function (codePath) {
+        const importString = codePath.source.value;
+        const pfImport = importString === PFPackages[0];
+        const iconsImport = importString === PFPackages[1];
+        if (PFPackages.includes(importString) && importString.match(/(css|scss|sass)/gim)) {
+          context.report({
+            node: codePath,
+            messageId: 'avoidImportingStyles',
+            data: {
+              package: importString,
+            },
+            fix: function (fixer) {
+              return fixer.remove(codePath.parent);
+            },
+          });
+        }
+
+        /**
+         * Check if import is from FEC package and if it directly matches the package name which means its relative import
+         */
+        if (pfImport && PFPackages.includes(importString)) {
+          const fullImport = context.getSourceCode(codePath.parent).text;
+          /**
+           * Check if the import is not full import statement
+           */
+          if (!fullImport.includes('from')) {
+            return;
+          }
+          /**
+           * Determine correct variable for direct import
+           */
+
+          let variables = context.getDeclaredVariables(codePath);
+          let varName = 'Unknown';
+          if (variables.length > 0) {
+            varName = variables[0].name;
+          }
+
+          const newText = variables.map(function (data) {
+            const importPartial = findCoreComponent(data.name);
+            return `import { ${data.name} } from '${importPartial}'`;
+          });
+          context.report({
+            node: codePath,
+            messageId: 'avoidRelativeImport',
+            data: {
+              package: importString,
+              source: varName,
+              hint: newText.join('\n'),
+            },
+            fix: function (fixer) {
+              return fixer.replaceText(codePath, newText.join('\n'));
+            },
+          });
+        }
+
+        /**
+         * Check icons import
+         */
+        if (iconsImport) {
+          const fullImport = context.getSourceCode(codePath.parent).text;
+          /**
+           * Check if the import is not full import statement
+           */
+          if (!fullImport.includes('from')) {
+            return;
+          }
+
+          let variables = context.getDeclaredVariables(codePath);
+          let varName = 'Unknown';
+          if (variables.length > 0) {
+            varName = variables[0].name;
+          }
+
+          const newText = variables.map(function (data) {
+            const importPartial = findIcon(data.name);
+            return `import ${data.name} from '${importPartial}'`;
+          });
+
+          context.report({
+            node: codePath,
+            messageId: 'avoidRelativeIconImport',
+            data: {
+              package: importString,
+              source: varName,
+              hint: newText.join('\n'),
+            },
+            fix: function (fixer) {
+              return fixer.replaceText(codePath, newText.join('\n'));
+            },
+          });
+        }
+      },
+    };
+  },
+};

package/lib/rules/no-chrome-api-call-from-window.js

@@ -0,0 +1,19 @@
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    messages: {
+      deprecateChromeApiCallFromWindow: 'Calling chrome API from the window object is deprecated.',
+    },
+    fixable: 'code',
+    schema: [],
+  },
+  create: function (context) {
+    return {
+      Identifier(node) {
+        if (node?.name === 'window' && node?.parent?.property?.name === 'insights' && node?.parent?.parent?.property?.name === 'chrome') {
+          context.report({ node, messageId: 'deprecateChromeApiCallFromWindow' });
+        }
+      },
+    };
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redhat-cloud-services/eslint-config-redhat-cloud-services",
-    "version": "1.2.6",
+    "version": "2.0.0",
     "description": "Recommended eslint configuration used in cloud.redhat.com frontend apps.",
     "keywords": [
         "eslint",