@hero-design/eslint-plugin 7.27.1

package/lib/rules/no-deprecated-component-prop-value.js

@@ -0,0 +1,189 @@
+/**
+ * @fileoverview Disallow deprecated component prop's values
+ * @author Thong Quach
+ */
+'use strict';
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: "Disallow deprecated component prop's values",
+      recommended: false,
+      url: null, // URL to the documentation page for this rule
+    },
+    fixable: null, // Or `code` or `whitespace`
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          package: { type: 'string' },
+          components: {
+            type: 'array',
+            items: {
+              type: 'object',
+              properties: {
+                name: { type: 'string' },
+                props: {
+                  type: 'array',
+                  items: {
+                    type: 'object',
+                    properties: {
+                      name: { type: 'string' },
+                      values: {
+                        type: 'array',
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+        additionalProperties: false,
+        required: ['package', 'components'],
+      },
+    ],
+    messages: {
+      deprecatedValue:
+        'The value "{{ value }}" of "{{ prop }}" prop has been deprecated.',
+    },
+  },
+
+  create(context) {
+    const components = context.options[0].components.map((c) => ({
+      props: c.props.map((p) => p.name),
+      values: c.props.map((p) => p.values),
+      identifiers: c.name.split('.'),
+    }));
+    let importedComponents = [];
+
+    const getDeprecatedComponent = (node) => {
+      return importedComponents.find((c) => {
+        const { identifiers } = c;
+        const elementName = node.name;
+
+        // <Radio />
+        if (elementName.type === 'JSXIdentifier' && identifiers.length === 1) {
+          return elementName.name === identifiers[0];
+        }
+
+        if (elementName.type === 'JSXMemberExpression') {
+          // <Radio.Group />
+          if (identifiers.length === 2) {
+            return (
+              elementName.object.name === identifiers[0] &&
+              elementName.property.name === identifiers[1]
+            );
+          }
+
+          // <HD.Radio.Group />
+          if (identifiers.length === 3) {
+            return (
+              elementName.object.object.name === identifiers[0] &&
+              elementName.object.property.name === identifiers[1] &&
+              elementName.property.name === identifiers[2]
+            );
+          }
+        }
+
+        return false;
+      });
+    };
+
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value !== context.options[0].package) return;
+
+        // import * as HD from "@hero-design/rn";
+        if (node.specifiers[0].type === 'ImportNamespaceSpecifier') {
+          const localPackageName = node.specifiers[0].local.name;
+
+          importedComponents = components.map((c) => ({
+            ...c,
+            identifiers: [localPackageName].concat(c.identifiers),
+          }));
+
+          return;
+        }
+
+        // import { Card, Box } from "@hero-design/rn";
+        // import { Card as HDCard, Box } from "hero-design/rn";
+        node.specifiers.forEach((spec) => {
+          if (spec.type !== 'ImportSpecifier') return;
+
+          const importingComponents = components
+            .filter((c) => spec.imported.name === c.identifiers[0])
+            .map((c) => ({
+              ...c,
+              identifiers: [spec.local.name].concat(c.identifiers.slice(1)),
+            }));
+
+          importedComponents.push(...importingComponents);
+        });
+      },
+
+      JSXOpeningElement(node) {
+        if (importedComponents.length === 0) return;
+
+        const deprecatedComponent = getDeprecatedComponent(node);
+        if (deprecatedComponent === undefined) return;
+
+        node.attributes.forEach((atb) => {
+          if (atb.type !== 'JSXAttribute') return;
+
+          const deprecatedPropIndex = deprecatedComponent.props.findIndex(
+            (p) => p === atb.name.name
+          );
+          if (deprecatedPropIndex < 0) return;
+
+          const deprecatedValues =
+            deprecatedComponent.values[deprecatedPropIndex];
+          const currValue = atb.value;
+
+          if (currValue.type === 'Literal') {
+            const deprecatedValue = deprecatedValues.find(
+              (v) => v === currValue.value
+            );
+
+            if (deprecatedValue !== undefined) {
+              context.report({
+                node: atb.value,
+                messageId: 'deprecatedValue',
+                data: {
+                  prop: deprecatedComponent.props[deprecatedPropIndex],
+                  value: deprecatedValue,
+                },
+              });
+            }
+          }
+
+          if (
+            currValue.type === 'JSXExpressionContainer' &&
+            currValue.expression.type === 'Literal'
+          ) {
+            const deprecatedValue = deprecatedValues.find(
+              (v) => v === currValue.expression.value
+            );
+
+            if (deprecatedValue !== undefined) {
+              context.report({
+                node: atb.value,
+                messageId: 'deprecatedValue',
+                data: {
+                  prop: deprecatedComponent.props[deprecatedPropIndex],
+                  value: deprecatedValue,
+                },
+              });
+            }
+          }
+        });
+      },
+    };
+  },
+};

package/lib/rules/no-deprecated-component-prop.js

@@ -0,0 +1,146 @@
+/**
+ * @fileoverview Disallow deprecated component props
+ * @author Thong Quach
+ */
+'use strict';
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow deprecated component props',
+      recommended: false,
+      url: null, // URL to the documentation page for this rule
+    },
+    fixable: null, // Or `code` or `whitespace`
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          package: { type: 'string' },
+          components: {
+            type: 'array',
+            items: {
+              type: 'object',
+              properties: {
+                name: { type: 'string' },
+                props: {
+                  type: 'array',
+                  items: {
+                    type: 'string',
+                  },
+                },
+              },
+            },
+          },
+        },
+        additionalProperties: false,
+        required: ['package', 'components'],
+      },
+    ],
+    messages: {
+      deprecatedProp: 'The prop "{{ prop }}" has been deprecated.',
+    },
+  },
+
+  create(context) {
+    const components = context.options[0].components.map((c) => ({
+      props: c.props,
+      identifiers: c.name.split('.'),
+    }));
+    let importedComponents = [];
+
+    const getDeprecatedComponent = (node) => {
+      return importedComponents.find((c) => {
+        const { identifiers } = c;
+        const elementName = node.name;
+
+        // <Radio />
+        if (elementName.type === 'JSXIdentifier' && identifiers.length === 1) {
+          return elementName.name === identifiers[0];
+        }
+
+        if (elementName.type === 'JSXMemberExpression') {
+          // <Radio.Group />
+          if (identifiers.length === 2) {
+            return (
+              elementName.object.name === identifiers[0] &&
+              elementName.property.name === identifiers[1]
+            );
+          }
+
+          // <HD.Radio.Group />
+          if (identifiers.length === 3) {
+            return (
+              elementName.object.object.name === identifiers[0] &&
+              elementName.object.property.name === identifiers[1] &&
+              elementName.property.name === identifiers[2]
+            );
+          }
+        }
+
+        return false;
+      });
+    };
+
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value !== context.options[0].package) return;
+
+        // import * as HD from "@hero-design/rn";
+        if (node.specifiers[0].type === 'ImportNamespaceSpecifier') {
+          const localPackageName = node.specifiers[0].local.name;
+
+          importedComponents = components.map((c) => ({
+            ...c,
+            identifiers: [localPackageName].concat(c.identifiers),
+          }));
+
+          return;
+        }
+
+        // import { Card, Box } from "@hero-design/rn";
+        // import { Card as HDCard, Box } from "hero-design/rn";
+        node.specifiers.forEach((spec) => {
+          if (spec.type !== 'ImportSpecifier') return;
+
+          const importingComponents = components
+            .filter((c) => spec.imported.name === c.identifiers[0])
+            .map((c) => ({
+              ...c,
+              identifiers: [spec.local.name].concat(c.identifiers.slice(1)),
+            }));
+
+          importedComponents.push(...importingComponents);
+        });
+      },
+
+      JSXOpeningElement(node) {
+        if (importedComponents.length === 0) return;
+
+        const deprecatedComponent = getDeprecatedComponent(node);
+        if (deprecatedComponent === undefined) return;
+
+        node.attributes.forEach((atb) => {
+          if (atb.type !== 'JSXAttribute') return;
+
+          const deprecatedProp = deprecatedComponent.props.find(
+            (p) => p === atb.name.name
+          );
+          if (deprecatedProp !== undefined) {
+            context.report({
+              node: atb,
+              messageId: 'deprecatedProp',
+              data: { prop: deprecatedProp },
+            });
+          }
+        });
+      },
+    };
+  },
+};

package/lib/rules/no-deprecated-theme-key.js

@@ -0,0 +1,92 @@
+/**
+ * @fileoverview Disallow deprecated theme keys
+ * @author Thong Quach
+ */
+'use strict';
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem', // `problem`, `suggestion`, or `layout`
+    docs: {
+      description: 'Disallow deprecated theme keys',
+      recommended: false,
+      url: null, // URL to the documentation page for this rule
+    },
+    fixable: 'code', // Or `code` or `whitespace`
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          keys: {
+            type: 'array',
+            items: {
+              type: 'object',
+              properties: {
+                old: { type: 'string' },
+                new: { type: 'string' },
+              },
+            },
+          },
+        },
+        additionalProperties: false,
+        required: ['keys'],
+      },
+    ],
+    messages: {
+      deprecatedThemeKey: 'The key "{{ key }}" in theme has been deprecated.',
+    },
+  },
+
+  create(context) {
+    const oldKeys = context.options[0].keys.map((k) => k.old);
+    const newKeys = context.options[0].keys.map((k) => k.new);
+
+    const findPath = (node, identifiers) => {
+      const property = node.property;
+
+      if (
+        property != null &&
+        property.type === 'Identifier' &&
+        property.name != null
+      ) {
+        return findPath(node.parent, [...identifiers, property.name]);
+      }
+
+      return identifiers.join('.');
+    };
+
+    return {
+      MemberExpression(node) {
+        const object = node.object;
+        if (object == null) return;
+
+        if (object.type === 'Identifier' && object.name === 'theme') {
+          const path = findPath(node, []);
+          const deprecatedKeyIndex = oldKeys.findIndex((k) => k === path);
+
+          if (deprecatedKeyIndex >= 0) {
+            const reportingNode =
+              node.parent.type === 'MemberExpression' ? node.parent : node;
+
+            context.report({
+              node: reportingNode,
+              messageId: 'deprecatedThemeKey',
+              data: { key: oldKeys[deprecatedKeyIndex] },
+              fix: function (fixer) {
+                return fixer.replaceText(
+                  reportingNode,
+                  `theme.${newKeys[deprecatedKeyIndex]}`
+                );
+              },
+            });
+          }
+        }
+      },
+    };
+  },
+};

package/lib/rules/not-recommended-import.js

@@ -0,0 +1,97 @@
+/**
+ * @fileoverview Disallow not recommended imports
+ * @author Thong Quach
+ */
+'use strict';
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow not recommended imports   ',
+      recommended: false,
+      url: null, // URL to the documentation page for this rule
+    },
+    fixable: null, // Or `code` or `whitespace`
+    schema: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          package: { type: 'string' },
+          imports: {
+            type: 'array',
+            items: {
+              type: 'object',
+              properties: {
+                name: { type: 'string' },
+                message: { type: 'string' },
+              },
+            },
+          },
+        },
+        additionalProperties: false,
+        required: ['package', 'imports'],
+      },
+    },
+    messages: {
+      notRecommendedImport:
+        'Importing "{{ import }}" from "{{ package }}" is not recommended. {{ message }}',
+    },
+  },
+
+  create(context) {
+    const packages = context.options.map((opt) => opt.package);
+    const imports = context.options.map((opt) => opt.imports);
+
+    return {
+      ImportDeclaration(node) {
+        const packageIndex = packages.findIndex((p) => p === node.source.value);
+        if (packageIndex < 0) return;
+
+        node.specifiers.forEach((spec) => {
+          if (spec.type === 'ImportDefaultSpecifier') {
+            const defaultImport = imports[packageIndex].find(
+              (imp) => imp.name === 'default'
+            );
+
+            if (defaultImport != null) {
+              context.report({
+                node: spec,
+                messageId: 'notRecommendedImport',
+                data: {
+                  import: defaultImport.name,
+                  package: packages[packageIndex],
+                  message: defaultImport.message,
+                },
+              });
+            }
+          }
+
+          if (spec.type !== 'ImportSpecifier') return;
+
+          const foundImport = imports[packageIndex].find(
+            (imp) => imp.name === spec.imported.name
+          );
+
+          if (foundImport != null) {
+            context.report({
+              node: spec,
+              messageId: 'notRecommendedImport',
+              data: {
+                import: foundImport.name,
+                package: packages[packageIndex],
+                message: foundImport.message,
+              },
+            });
+          }
+        });
+      },
+    };
+  },
+};

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@hero-design/eslint-plugin",
+  "version": "7.27.1",
+  "description": "Hero Design's eslint plugin",
+  "keywords": [
+    "eslint",
+    "eslintplugin",
+    "eslint-plugin"
+  ],
+  "author": "Thong Quach",
+  "main": "./lib/index.js",
+  "exports": "./lib/index.js",
+  "prettier": "prettier-config-hd",
+  "scripts": {
+    "lint": "eslint .",
+    "test": "jest --runInBand",
+    "test:watch": "jest --runInBand --watch",
+    "test:ci": "jest --runInBand --logHeapUsage",
+    "publish:npm": "yarn publish --access public"
+  },
+  "dependencies": {
+    "requireindex": "^1.2.0"
+  },
+  "devDependencies": {
+    "eslint": "^8.10.0",
+    "eslint-plugin-eslint-plugin": "^5.0.0",
+    "eslint-plugin-node": "^11.1.0",
+    "jest": "^27.3.1",
+    "prettier-config-hd": "7.27.1"
+  },
+  "engines": {
+    "node": "^14.17.0 || ^16.0.0 || >= 18.0.0"
+  },
+  "peerDependencies": {
+    "eslint": ">=7"
+  },
+  "license": "ISC"
+}

package/tests/lib/rules/no-deprecated-component-prop-value.js

@@ -0,0 +1,142 @@
+/**
+ * @fileoverview Disallow deprecated component prop's values
+ * @author Thong Quach
+ */
+'use strict';
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/no-deprecated-component-prop-value'),
+  RuleTester = require('eslint').RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const config = {
+  options: [
+    {
+      package: '@hero-design/rn',
+      components: [
+        {
+          name: 'Tag',
+          props: [{ name: 'intent', values: ['default'] }],
+        },
+        {
+          name: 'Alert',
+          props: [{ name: 'variant', values: ['default'] }],
+        },
+        {
+          name: 'Button',
+          props: [{ name: 'variant', values: ['basic-transparent'] }],
+        },
+        {
+          name: 'Icon',
+          props: [
+            {
+              name: 'icon',
+              values: [
+                'carat-down-small',
+                'carat-down',
+                'carat-left-small',
+                'carat-left',
+                'carat-right-small',
+                'carat-right',
+                'carat-up-small',
+                'carat-up',
+              ],
+            },
+          ],
+        },
+        {
+          name: 'Select',
+          props: [{ name: 'numberOfLines', values: [1] }],
+        },
+        {
+          name: 'Select.Multi',
+          props: [{ name: 'numberOfLines', values: [1] }],
+        },
+      ],
+    },
+  ],
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 6,
+    ecmaFeatures: { jsx: true },
+  },
+};
+
+const ruleTester = new RuleTester();
+ruleTester.run('no-deprecated-component-prop-value', rule, {
+  valid: [
+    {
+      code: '<Box intent="default" {...props} />',
+    },
+    {
+      code: 'import HD from "@hero-design/rn"; <Tag intent="default" {...props} />',
+    },
+    {
+      code: 'import { Tag, Box } from "@hero-design/rn"; <Tag intent="primary" />',
+    },
+    {
+      code: 'import { Tag, Box } from "ant-design"; <Tag intent="default" />',
+    },
+    {
+      code: 'import { Tag as HDTag, Box } from "@hero-design/rn"; <Tag intent="default" />',
+    },
+    {
+      code: 'import { Select } from "@hero-design/rn"; <Select.Multi numberOfLines={2} />',
+    },
+    {
+      code: 'import * as HD from "@hero-design/rn"; <Card variant="basic" />',
+    },
+    {
+      code: 'import * as HD from "@hero-design/rn"; <HD.Select.Multi numberOfLines={2} />',
+    },
+  ].map((test) => ({
+    ...test,
+    ...config,
+  })),
+
+  invalid: [
+    {
+      code: 'import { Tag, Box } from "@hero-design/rn"; <Tag intent="default" />',
+      errors: [{ messageId: 'deprecatedValue' }],
+    },
+    {
+      code: 'import { Tag as HDTag, Box } from "@hero-design/rn"; <HDTag intent="default" />',
+      errors: [{ messageId: 'deprecatedValue' }],
+    },
+    {
+      code: 'import { Button as HDButton, Icon } from "@hero-design/rn"; <><HDButton variant="basic-transparent" /><Icon icon="carat-down" /></>',
+      errors: [
+        { messageId: 'deprecatedValue' },
+        { messageId: 'deprecatedValue' },
+      ],
+    },
+    {
+      code: 'import { Select } from "@hero-design/rn"; <Select numberOfLines={1} />',
+      errors: [{ messageId: 'deprecatedValue' }],
+    },
+    {
+      code: 'import { Select } from "@hero-design/rn"; <><Select numberOfLines={1} /><Select.Multi numberOfLines={1} /></>',
+      errors: [
+        { messageId: 'deprecatedValue' },
+        { messageId: 'deprecatedValue' },
+      ],
+    },
+    {
+      code: 'import * as HD from "@hero-design/rn"; <HD.Select numberOfLines={1} />',
+      errors: [{ messageId: 'deprecatedValue' }],
+    },
+    {
+      code: 'import * as HD from "@hero-design/rn"; <HD.Select.Multi numberOfLines={1} />',
+      errors: [{ messageId: 'deprecatedValue' }],
+    },
+  ].map((test) => ({
+    ...test,
+    ...config,
+  })),
+});