@hero-design/eslint-plugin 9.0.1-rc2.0 → 9.0.1

package/CHANGELOG.md

@@ -1,12 +1,10 @@
 # @hero-design/eslint-plugin
 
-## 9.0.1-rc2.0
+## 9.0.1
 
 ### Patch Changes
 
-- [#2647](https://github.com/Thinkei/hero-design/pull/2647) [`96d0a79e0`](https://github.com/Thinkei/hero-design/commit/96d0a79e008db83c915bbadc8d70a5403d6bd4e3) Thanks [@ttkien](https://github.com/ttkien)! - add pre-commit
-
-- [#2647](https://github.com/Thinkei/hero-design/pull/2647) [`35fcc3812`](https://github.com/Thinkei/hero-design/commit/35fcc3812a090140848c80ed8d5f39026c4c5ee2) Thanks [@ttkien](https://github.com/ttkien)! - yarn install after bump version
+- [#3187](https://github.com/Thinkei/hero-design/pull/3187) [`c580bccd6`](https://github.com/Thinkei/hero-design/commit/c580bccd6958dd5accc6f7c17192a822630e6536) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - Implement no-direct-color-palette-access rule
 
 ## 9.0.0
 

package/lib/index.js

@@ -118,5 +118,11 @@ module.exports = {
         ],
       },
     },
+    recommendedReact: {
+      plugins: ['@hero-design'],
+      rules: {
+        '@hero-design/no-direct-color-palette-access': 'error'
+      }
+    }
   },
 };

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

@@ -4,6 +4,8 @@
  */
 'use strict';
 
+const { findIndentifierPath } = require('../utils');
+
 //------------------------------------------------------------------------------
 // Rule Definition
 //------------------------------------------------------------------------------
@@ -46,27 +48,13 @@ module.exports = {
     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 path = findIndentifierPath(node, []);
           const deprecatedKeyIndex = oldKeys.findIndex((k) => k === path);
 
           if (deprecatedKeyIndex >= 0) {

package/lib/rules/no-direct-color-palette-access.js

@@ -0,0 +1,56 @@
+/**
+ * @fileoverview Disallow direct access of color palette.
+ */
+'use strict';
+
+const { findIndentifierPath } = require('../utils');
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow direct access of color palette.',
+    },
+    messages: {
+      invalidColorAccess: 'Unexpected direct access of palette colors, use semantic colors instead.',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      MemberExpression(node) {
+        const object = node.object;
+        if (object == null) return;
+
+        // For example: theme.colors.pallete.redLight30
+        if (object.type === 'Identifier' && object.name === 'theme') {
+          const path = findIndentifierPath(node, []);
+
+          if (path.includes('colors.palette')) {
+            context.report({
+              node,
+              messageId: 'invalidColorAccess',
+            });
+          }
+        }
+        // For example: colors.pallete.redLight30
+        else if (object.type === 'Identifier' && object.name === 'colors') {
+          const path = findIndentifierPath(node, []);
+
+          if (path.includes('palette')) {
+            context.report({
+              node,
+              messageId: 'invalidColorAccess',
+            });
+          }
+        }
+      },
+    };
+  },
+};

package/lib/utils.js

@@ -0,0 +1,17 @@
+const findIndentifierPath = (node, identifiers) => {
+  const property = node.property;
+
+  if (
+    property != null &&
+    property.type === 'Identifier' &&
+    property.name != null
+  ) {
+    return findIndentifierPath(node.parent, [...identifiers, property.name]);
+  }
+
+  return identifiers.join('.');
+};
+
+module.exports = {
+  findIndentifierPath,
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/eslint-plugin",
-  "version": "9.0.1-rc2.0",
+  "version": "9.0.1",
   "description": "Hero Design's eslint plugin",
   "keywords": [
     "eslint",
@@ -26,7 +26,7 @@
     "eslint-plugin-eslint-plugin": "^5.0.0",
     "eslint-plugin-node": "^11.1.0",
     "jest": "^29.2.1",
-    "prettier-config-hd": "8.42.5-rc2.0"
+    "prettier-config-hd": "8.42.4"
   },
   "engines": {
     "node": "^14.17.0 || ^16.0.0 || >= 18.0.0"

package/tests/lib/rules/no-direct-color-palette-access.js

@@ -0,0 +1,45 @@
+const rule = require('../../../lib/rules/no-direct-color-palette-access');
+const RuleTester = require('eslint').RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const config = {
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 6,
+    ecmaFeatures: { jsx: true },
+  },
+};
+
+const ruleTester = new RuleTester();
+ruleTester.run('no-direct-color-palette-access', rule, {
+  valid: [
+    {
+      code: 'const color = theme.colors.hoverDanger',
+    },
+    {
+      code: '<Box sx={{ backgroundColor: theme.colors.hoverDanger }} />',
+    },
+  ].map((test) => ({ ...test, ...config })),
+  invalid: [
+    {
+      code: 'const color = theme.colors.palette.redLight30',
+      errors: [{ messageId: 'invalidColorAccess' }],
+    },
+    {
+      code: 'const color = theme.colors.palette',
+      errors: [{ messageId: 'invalidColorAccess' }],
+    },
+    {
+      code: '<Box sx={{ backgroundColor: theme.colors.palette.redLight30 }} />',
+      errors: [{ messageId: 'invalidColorAccess' }],
+    },
+    {
+      code: `const colors = theme.colors;
+      const color = colors.palette.redLight30`,
+      errors: [{ messageId: 'invalidColorAccess' }],
+    }
+  ].map((test) => ({ ...test, ...config })),
+});