@hero-design/eslint-plugin 9.2.0-rc.1 → 9.2.1-alpha.0

package/.turbo/turbo-lint.log

@@ -1 +0,0 @@
-$ eslint .

package/.turbo/turbo-test.log

@@ -1 +1,13 @@
-$ jest --runInBand
+PASS tests/lib/rules/react-no-text-outside-typography.js
+PASS tests/lib/rules/no-deprecated-component-prop-value.js
+PASS tests/lib/rules/no-deprecated-component-prop.js
+PASS tests/lib/rules/no-deprecated-theme-key.js
+PASS tests/lib/rules/not-recommended-import.js
+PASS tests/lib/rules/banning-snowflake-approve-comment.js
+PASS tests/lib/rules/no-direct-color-palette-access.js
+
+Test Suites: 7 passed, 7 total
+Tests:       90 passed, 90 total
+Snapshots:   0 total
+Time:        12.224 s
+Ran all test suites.

package/CHANGELOG.md

@@ -0,0 +1,37 @@
+# @hero-design/eslint-plugin
+
+## 9.2.1-alpha.0
+
+### Patch Changes
+
+- test release workflow
+
+## 9.2.0
+
+### Minor Changes
+
+- [#3327](https://github.com/Thinkei/hero-design/pull/3327) [`a405687ba571a1dffd92cb23d3d6ae6159fdf904`](https://github.com/Thinkei/hero-design/commit/a405687ba571a1dffd92cb23d3d6ae6159fdf904) Thanks [@luanlai2201](https://github.com/luanlai2201)! - Add banning-snowflake-approve-comment rule
+
+## 9.1.0
+
+### Minor Changes
+
+- [#3197](https://github.com/Thinkei/hero-design/pull/3197) [`36c71a4a7`](https://github.com/Thinkei/hero-design/commit/36c71a4a7719bd5f09925a9d88e197135696d0c9) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - Add react-no-text-outside-typography rule for react
+
+## 9.0.1
+
+### Patch Changes
+
+- [#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
+
+### Major Changes
+
+- [#2563](https://github.com/Thinkei/hero-design/pull/2563) [`0254e47a8`](https://github.com/Thinkei/hero-design/commit/0254e47a838f0f431c3d72306b945247786ea7d1) Thanks [@luanlai2201](https://github.com/luanlai2201)! - [Internal] Remove eslint no-invalid-access-theme rule
+
+## 8.42.5
+
+### Patch Changes
+
+- [#2302](https://github.com/Thinkei/hero-design/pull/2302) [`2293190d1`](https://github.com/Thinkei/hero-design/commit/2293190d105fb97dc699e39990c3148f3509fafb) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - Upgrade expo sdk and react-native version

package/eslint.config.js

@@ -0,0 +1,31 @@
+const { FlatCompat } = require('@eslint/eslintrc');
+const js = require('@eslint/js');
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+});
+
+module.exports = [
+  ...compat.extends(
+    'eslint:recommended',
+    'plugin:eslint-plugin/recommended',
+    'plugin:node/recommended'
+  ),
+  {
+    files: ['**/*.js', '**/*.ts'],
+    languageOptions: {
+      globals: {
+        node: true,
+      },
+    },
+  },
+  {
+    files: ['tests/**/*.js'],
+    languageOptions: {
+      globals: {
+        jest: true,
+      },
+    },
+  },
+];

package/lib/index.js

@@ -14,213 +14,6 @@ const requireIndex = require('requireindex');
 // Plugin Definition
 //------------------------------------------------------------------------------
 
-const themeKeysMap = [
-  {
-    old: 'colors.globalPrimary',
-    new: 'colors.onDefaultGlobalSurface',
-  },
-  {
-    old: 'colors.globalPrimaryLight',
-    new: 'colors.globalPrimaryLight',
-  },
-  {
-    old: 'colors.globalPrimaryBackground',
-    new: 'colors.defaultGlobalSurface',
-  },
-  {
-    old: 'colors.primaryLight',
-    new: 'colors.secondary',
-  },
-  {
-    old: 'colors.primaryDark',
-    new: 'colors.primary',
-  },
-  {
-    old: 'colors.primaryBackground',
-    new: 'colors.highlightedSurface',
-  },
-  {
-    old: 'colors.primaryBackgroundDark',
-    new: 'colors.mutedOnDefaultGlobalSurface',
-  },
-  {
-    old: 'colors.secondaryLight',
-    new: 'colors.secondaryLight',
-  },
-  {
-    old: 'colors.secondaryBackground',
-    new: 'colors.secondaryBackground',
-  },
-  {
-    old: 'colors.infoMediumLight',
-    new: 'colors.mutedInfo',
-  },
-  {
-    old: 'colors.infoLight',
-    new: 'colors.mutedInfo',
-  },
-  {
-    old: 'colors.infoBackground',
-    new: 'colors.infoSurface',
-  },
-  {
-    old: 'colors.successLight',
-    new: 'colors.mutedSuccess',
-  },
-  {
-    old: 'colors.successDark',
-    new: 'colors.success',
-  },
-  {
-    old: 'colors.successBackground',
-    new: 'colors.successSurface',
-  },
-  {
-    old: 'colors.danger',
-    new: 'colors.error',
-  },
-  {
-    old: 'colors.dangerMediumLight',
-    new: 'colors.mutedError',
-  },
-  {
-    old: 'colors.dangerLight',
-    new: 'colors.mutedError',
-  },
-  {
-    old: 'colors.dangerBackground',
-    new: 'colors.errorSurface',
-  },
-  {
-    old: 'colors.warningLight',
-    new: 'colors.mutedWarning',
-  },
-  {
-    old: 'colors.warningDark',
-    new: 'colors.warning',
-  },
-  {
-    old: 'colors.warningBackground',
-    new: 'colors.warningSurface',
-  },
-  {
-    old: 'colors.platformBackground',
-    new: 'colors.defaultGlobalSurface',
-  },
-  {
-    old: 'colors.backgroundLight',
-    new: 'colors.neutralGlobalSurface',
-  },
-  {
-    old: 'colors.backgroundDark',
-    new: 'colors.darkGlobalSurface',
-  },
-  {
-    old: 'colors.text',
-    new: 'colors.onDefaultGlobalSurface',
-  },
-  {
-    old: 'colors.subduedText',
-    new: 'colors.mutedOnDefaultGlobalSurface',
-  },
-  {
-    old: 'colors.disabledText',
-    new: 'colors.inactiveOnDefaultGlobalSurface',
-  },
-  {
-    old: 'colors.disabledLightText',
-    new: 'colors.disabledOnDefaultGlobalSurface',
-  },
-  {
-    old: 'colors.invertedText',
-    new: 'colors.onDarkGlobalSurface',
-  },
-  {
-    old: 'colors.outline',
-    new: 'colors.secondaryOutline',
-  },
-  {
-    old: 'colors.archivedLight',
-    new: 'colors.disabledOnDefaultGlobalSurface',
-  },
-  {
-    old: 'colors.archivedDark',
-    new: 'colors.archived',
-  },
-  {
-    old: 'colors.archivedBackground',
-    new: 'colors.archivedSurface',
-  },
-  {
-    old: 'colors.black',
-    new: 'colors.onDefaultGlobalSurface',
-  },
-  {
-    old: 'colors.inactiveBackground',
-    new: 'colors.inactiveOnDefaultGlobalSurface',
-  },
-  {
-    old: 'colors.shadow',
-    new: 'colors.secondaryOutline',
-  },
-  {
-    old: 'colors.mutedGlobalPrimary',
-    new: 'colors.mutedOnDefaultGlobalSurface',
-  },
-  {
-    old: 'colors.onGlobalPrimary',
-    new: 'colors.onDefaultGlobalSurface',
-  },
-  {
-    old: 'colors.globalSecondary',
-    new: 'colors.secondary',
-  },
-  {
-    old: 'colors.globalPrimaryOutline',
-    new: 'colors.primaryOutline',
-  },
-  {
-    old: 'colors.globalSecondaryOutline',
-    new: 'colors.secondaryOutline',
-  },
-  {
-    old: 'colors.mutedPrimary',
-    new: 'colors.mutedPrimary',
-  },
-  {
-    old: 'colors.highlightedSecondarySurface',
-    new: 'colors.highlightedSecondarySurface',
-  },
-  {
-    old: 'colors.mutedSecondary',
-    new: 'colors.mutedSecondary',
-  },
-  {
-    old: 'colors.disabledSecondary',
-    new: 'colors.disabledSecondary',
-  },
-  {
-    old: 'colors.lightHighlightedSurface',
-    new: 'colors.highlightedSurface',
-  },
-];
-const deprecatedThemeColors = themeKeysMap.map((c) => c.old.split('.')[1]);
-const boxColorProps = [
-  'backgroundColor',
-  'bgColor',
-  'borderColor',
-  'borderTopColor',
-  'borderBottomColor',
-  'borderStartColor',
-  'borderEndColor',
-  'borderLeftColor',
-  'borderRightColor',
-];
-const deprecatedBoxPropValues = boxColorProps.map((prop) => ({
-  name: prop,
-  values: deprecatedThemeColors,
-}));
-
 // import all rules in lib/rules
 module.exports = {
   rules: requireIndex(__dirname + '/rules'),
@@ -228,101 +21,18 @@ module.exports = {
     internalRn: {
       plugins: ['@hero-design'],
       rules: {
-        '@hero-design/no-deprecated-theme-key': [
-          'error',
-          {
-            keys: themeKeysMap,
-          },
-        ],
-        '@hero-design/no-deprecated-component-prop': [
-          'error',
-          {
-            package: '@hero-design/rn',
-            components: [
-              { name: 'Card', props: ['variant'] },
-              { name: 'Switch', props: ['size'] },
-              {
-                name: 'Select',
-                props: ['onDimiss', 'numberOfLines', 'inputProps.required'],
-              },
-              {
-                name: 'Select.Multi',
-                props: ['onDimiss', 'numberOfLines', 'inputProps.required'],
-              },
-              { name: 'Toast.Provider', props: ['position'] },
-            ],
-          },
-        ],
-        '@hero-design/no-deprecated-component-prop-value': [
-          'error',
+        // Rules for the next major version
+        '@hero-design/no-deprecated-component-prop-next': [
+          'warn',
           {
             package: '@hero-design/rn',
             components: [
+              { name: 'Tag', props: ['variant'] },
+              { name: 'FAB.ActionGroup', props: ['headerTitle'] },
+              { name: 'Checkbox', props: ['withBorder'] },
               {
-                name: 'Tag',
-                props: [{ name: 'intent', values: ['default'] }],
-              },
-              {
-                name: 'Button',
-                props: [{ name: 'variant', values: ['basic-transparent'] }],
-              },
-              {
-                name: 'Button.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: 'Button.Utility',
-                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: '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: 'Box',
-                props: deprecatedBoxPropValues,
+                name: 'SectionHeading',
+                props: ['fontSize', 'fontWeight'],
               },
             ],
           },
@@ -408,5 +118,12 @@ module.exports = {
         ],
       },
     },
+    recommendedReact: {
+      plugins: ['@hero-design'],
+      rules: {
+        '@hero-design/no-direct-color-palette-access': 'error',
+        '@hero-design/react-no-text-outside-typography': 'warn',
+      }
+    }
   },
 };

package/lib/rules/banning-snowflake-approve-comment.js

@@ -0,0 +1,32 @@
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Disallow the use of comments that include @snowflake-guard/',
+    },
+    messages: {
+      noSnowflakeGuard:
+        'Comments including @snowflake-guard/ are not allowed. Please contact Andromeda team for the approval.',
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      Program() {
+        const sourceCode = context.getSourceCode();
+        const comments = sourceCode.getAllComments();
+
+        comments.forEach((comment) => {
+          // Check if the comment includes @snowflake-guard/
+          if (comment.value.includes('@snowflake-guard/')) {
+            context.report({
+              node: comment,
+              messageId: 'noSnowflakeGuard',
+            });
+          }
+        });
+      },
+    };
+  },
+};

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

@@ -0,0 +1,4 @@
+
+const rule = require('./no-deprecated-component-prop');
+
+module.exports = rule;

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/rules/react-no-text-outside-typography.js

@@ -0,0 +1,216 @@
+const notRecommendedList = [
+  'div',
+  'p',
+  'span',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'a',
+  'strong',
+  'em',
+  'b',
+  'i',
+  'u',
+];
+
+// Get the parent tag name of the node
+const getParentTagName = (node) => {
+  let parent = node.parent;
+  while (parent) {
+    if (parent.type === 'JSXElement') {
+      return parent.openingElement.name.name;
+    }
+    parent = parent.parent;
+  }
+  return null;
+};
+
+// Find the Typography component in the parent hierarchy
+// and return the value of tagName prop and the level of nested component
+const findTypography = (node, typographyNames) => {
+  let parent = node.parent;
+  let level = 0;
+  let tagName = null;
+  let found = false;
+
+  while (parent) {
+    if (
+      parent.type === 'JSXElement' &&
+      parent.openingElement.name.type === 'JSXMemberExpression' &&
+      typographyNames.includes(parent.openingElement.name.object.name)
+    ) {
+      found = true;
+      const attributes = parent.openingElement.attributes;
+      for (let attr of attributes) {
+        if (attr.name && attr.name.name === 'tagName') {
+          tagName = attr.value.value;
+        }
+      }
+      break;
+    }
+    parent = parent.parent;
+    level++;
+  }
+  return { tagName, level, found };
+};
+
+// Check if the direct parent element is in the notRecommendedList
+const isParentNotRecommended = (node) => {
+  let parentElement = node.parent;
+  while (parentElement && parentElement.type !== 'JSXElement') {
+    parentElement = parentElement.parent;
+  }
+
+  return (
+    parentElement &&
+    parentElement.openingElement.name.type === 'JSXIdentifier' &&
+    notRecommendedList.includes(parentElement.openingElement.name.name)
+  );
+};
+
+const checkNode = (node, context, typographyNames) => {
+  const {
+    tagName,
+    level,
+    found: foundTypography,
+  } = findTypography(node, typographyNames);
+
+  // Typography not found, check if the direct parent is in the notRecommendedList
+  if (!foundTypography && isParentNotRecommended(node)) {
+    context.report({
+      node,
+      messageId: 'textNodeOutsideTypography',
+    });
+  }
+
+  // Typography found, handle edge cases as documented in
+  // https://design.employmenthero.com/web/Components/Typography/#typographytext
+  if (foundTypography) {
+    switch (tagName) {
+      case 'p':
+      case '':
+      case 'span':
+      case 'label': {
+        if (level > 1) {
+          // Not allowing nested of nested nodes
+          context.report({
+            node,
+            messageId: 'textNodeOutsideTypography',
+          });
+        }
+        break;
+      }
+      case 'div': {
+        // Allowed cases:
+        // 2 level nested with unordered list
+        // 2 level nested elements with p
+        const parentTagName = getParentTagName(node);
+        const grandParentTagName = getParentTagName(node.parent);
+
+        const isAllowedUnorderedList =
+          level === 2 && parentTagName === 'li' && grandParentTagName === 'ul';
+
+        const isAllowedParagraph = level === 2 && grandParentTagName === 'p';
+
+        if (!isAllowedParagraph && !isAllowedUnorderedList && level > 1) {
+          context.report({
+            node,
+            messageId: 'textNodeOutsideTypography',
+          });
+        }
+        break;
+      }
+    }
+  }
+};
+
+function containsIntlFormatMessage(expression) {
+  if (expression === null || expression === undefined) {
+    return false;
+  }
+
+  if (
+    expression.type === 'CallExpression' &&
+    expression.callee.type === 'MemberExpression' &&
+    expression.callee.object.name === 'Intl' &&
+    expression.callee.property.name === 'formatMessage'
+  ) {
+    return true;
+  }
+
+  // Example: {condition1 && Intl.formatMessage({ id: 'someId' })}
+  // Also works for multiple logical expressions
+  if (expression.type === 'LogicalExpression') {
+    return (
+      containsIntlFormatMessage(expression.left) ||
+      containsIntlFormatMessage(expression.right)
+    );
+  }
+
+  if (expression.type === 'ConditionalExpression') {
+    return (
+      containsIntlFormatMessage(expression.consequent) ||
+      containsIntlFormatMessage(expression.alternate)
+    );
+  }
+
+  return false;
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Recommend using text inside Typography component.',
+      recommended: false,
+    },
+    schema: [],
+    messages: {
+      textNodeOutsideTypography:
+        'Text nodes should be inside Typography component.',
+    },
+  },
+  create(context) {
+    let typographyNames = ['Typography'];
+
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value === '@hero-design/react') {
+          node.specifiers.forEach((specifier) => {
+            if (
+              specifier.imported &&
+              specifier.imported.name === 'Typography'
+            ) {
+              specifier.local.name !== 'Typography' &&
+                typographyNames.push(specifier.local.name);
+            }
+          });
+        }
+      },
+      VariableDeclarator(node) {
+        // Handle local assignments
+        if (
+          node.init &&
+          node.init.type === 'Identifier' &&
+          typographyNames.includes(node.init.name)
+        ) {
+          node.id.name !== 'Typography' && typographyNames.push(node.id.name);
+        }
+      },
+      JSXText(node) {
+        const trimmedValue = node.value.trim();
+        if (trimmedValue) {
+          checkNode(node, context, typographyNames);
+        }
+      },
+      JSXExpressionContainer(node) {
+        if (containsIntlFormatMessage(node.expression)) {
+          checkNode(node, context, typographyNames);
+        }
+      },
+    };
+  },
+};

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.2.0-rc.1",
+  "version": "9.2.1-alpha.0",
   "description": "Hero Design's eslint plugin",
   "keywords": [
     "eslint",
@@ -12,7 +12,7 @@
   "exports": "./lib/index.js",
   "prettier": "prettier-config-hd",
   "scripts": {
-    "lint": "eslint .",
+    "lint": "eslint lib tests",
     "test": "jest --runInBand",
     "test:watch": "jest --runInBand --watch",
     "test:ci": "jest --runInBand --logHeapUsage",
@@ -22,14 +22,17 @@
     "requireindex": "^1.2.0"
   },
   "devDependencies": {
-    "eslint": "^8.10.0",
+    "@eslint/compat": "^1.1.1",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.8.0",
+    "eslint": "^8.56.0",
     "eslint-plugin-eslint-plugin": "^5.0.0",
     "eslint-plugin-node": "^11.1.0",
-    "jest": "^27.3.1",
-    "prettier-config-hd": "9.2.0-rc.1"
+    "jest": "^29.2.1",
+    "prettier-config-hd": "8.42.5-alpha.0"
   },
   "engines": {
-    "node": "^14.17.0 || ^16.0.0 || >= 18.0.0"
+    "node": "^14.17.0 || ^16.0.0 || ^18.0.0 || >=20.0.0"
   },
   "peerDependencies": {
     "eslint": ">=7"

package/tests/lib/rules/banning-snowflake-approve-comment.js

@@ -0,0 +1,46 @@
+const { RuleTester } = require('eslint');
+const rule = require('../../../lib/rules/banning-snowflake-approve-comment');
+
+const ruleTester = new RuleTester();
+
+// Define valid and invalid test cases
+ruleTester.run('no-snowflake-guard', rule, {
+  // Valid cases (should not trigger the rule)
+  valid: [
+    '// A normal comment without snowflake-guard',
+    '// Another valid comment',
+    '/* @no-snowflake-guard */',
+    'console.log("no issues here");',
+  ],
+
+  // Invalid cases (should trigger the rule)
+  invalid: [
+    {
+      code: '// @snowflake-guard/none-css-classname', // Triggers the rule
+      errors: [
+        {
+          message:
+            'Comments including @snowflake-guard/ are not allowed. Please contact Andromeda team for the approval.',
+        },
+      ],
+    },
+    {
+      code: '// @snowflake-guard/another-pattern', // Triggers the rule
+      errors: [
+        {
+          message:
+            'Comments including @snowflake-guard/ are not allowed. Please contact Andromeda team for the approval.',
+        },
+      ],
+    },
+    {
+      code: '/* @snowflake-guard/custom-pattern */', // Triggers the rule for block comments
+      errors: [
+        {
+          message:
+            'Comments including @snowflake-guard/ are not allowed. Please contact Andromeda team for the approval.',
+        },
+      ],
+    },
+  ],
+});

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 })),
+});

package/tests/lib/rules/react-no-text-outside-typography.js

@@ -0,0 +1,248 @@
+const rule = require('../../../lib/rules/react-no-text-outside-typography');
+const RuleTester = require('eslint').RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const config = {
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 6,
+    ecmaFeatures: { jsx: true },
+  },
+};
+
+const ruleTester = new RuleTester();
+ruleTester.run('react-no-text-outside-typography', rule, {
+  valid: [
+    // Common cases
+    {
+      code: '<Typography.Text>Content</Typography.Text>',
+    },
+    {
+      code: '<Typography.Title>Content</Typography.Title>',
+    },
+    {
+      code: `<Typography.Text>
+        Click <a href='..'>here</a>
+        </Typography.Text>`,
+    },
+    {
+      code: `<Typography.Text>
+              <Box>Content</Box>
+            </Typography.Text>
+      `,
+    },
+    // With Intl.formatMessage and conditions
+    {
+      code: `<Typography.Text>
+              <Box>{Intl.formatMessage({ id: 'someId' })}</Box>
+            </Typography.Text>
+      `,
+    },
+    {
+      code: `<Typography.Text>
+              <Box>{condition1 && Intl.formatMessage({ id: 'someId' })}</Box>
+            </Typography.Text>
+      `,
+    },
+    {
+      code: `<Typography.Text>
+              <Box>{condition1 ? Intl.formatMessage({ id: 'someId' }) : null}</Box>
+            </Typography.Text>
+      `,
+    },
+    {
+      code: `
+        <Typography.Text>
+          {Intl.formatMessage({ id: 'someId' })}
+        </Typography.Text>`,
+    },
+    {
+      code: `
+        <Typography.Text>
+          {condition1 && Intl.formatMessage({ id: 'someId' })}
+        </Typography.Text>`,
+    },
+    {
+      code: `
+        <Typography.Text>
+          {condition1 ? Intl.formatMessage({ id: 'someId' }) : null}
+        </Typography.Text>`,
+    },
+    {
+      code: `
+        <Typography.Text>
+          {condition1 ? Intl.formatMessage({ id: 'someId' }) : Intl.formatMessage({ id: 'someId2' })}
+        </Typography.Text>`,
+    },
+    // Custom namings
+    {
+      code: `
+      import { Typography as HDTypography } from '@hero-design/react';
+      <HDTypography.Text>Content</HDTypography.Text>
+      `,
+    },
+    {
+      code: `
+      import { Typography as HDTypography } from '@hero-design/react';
+      const { Text } = HDTypography;
+      <Text>Content</Text>
+      `,
+    },
+    {
+      code: `
+      import { Typography } from '@hero-design/react';
+      const { Title } = Typography;
+      <Title>Content</Title>
+      `,
+    },
+    {
+      code: `
+      import { Typography } from '@hero-design/react';
+      const { Title: HDTypographyTitle } = Typography;
+      <HDTypographyTitle>Content</HDTypographyTitle>
+      `,
+    },
+    {
+      code: `
+      import { Typography } from '@hero-design/react';
+      const Title = Typography.Title;
+      <Title>Content</Title>
+      `,
+    },
+    // Exceptions with tagName prop
+    {
+      code: `
+        <Typography.Text tagName='p'>
+          <span>Content</span>
+        </Typography.Text>
+      `,
+    },
+    {
+      code: `
+        <Typography.Text tagName='div'>
+          <ul>
+            <li>Content</li>
+          </ul>
+        </Typography.Text>
+      `,
+    },
+    {
+      code: `
+        <Typography.Text tagName='div'>
+          <p>
+            <a>Content</a>
+          </p>
+        </Typography.Text>
+      `,
+    },
+    {
+      code: `
+        <Typography.Text tagName='span'>
+          <span>Content</span>
+        </Typography.Text>
+      `,
+    },
+    {
+      code: `
+        <Typography.Text tagName='label'>
+          <span>Content</span>
+        </Typography.Text>
+      `,
+    },
+  ].map((test) => ({ ...test, ...config })),
+  invalid: [
+    // Common cases
+    {
+      code: '<div>Content</div>',
+      errors: [{ messageId: 'textNodeOutsideTypography' }],
+    },
+    {
+      code: '<p>Content</p>',
+      errors: [{ messageId: 'textNodeOutsideTypography' }],
+    },
+    {
+      code: '<h1>Content</h1>',
+      errors: [{ messageId: 'textNodeOutsideTypography' }],
+    },
+    // With Intl.formatMessage and conditions
+    {
+      code: `
+        <div>
+          {Intl.formatMessage({ id: 'someId' })}
+        </div>`,
+      errors: [{ messageId: 'textNodeOutsideTypography' }],
+    },
+    {
+      code: `
+        <div>
+          { condition && Intl.formatMessage({ id: 'someId' })}
+        </div>`,
+      errors: [{ messageId: 'textNodeOutsideTypography' }],
+    },
+    {
+      code: `
+        <div>
+          { condition && condition2 && Intl.formatMessage({ id: 'someId' })}
+        </div>`,
+      errors: [{ messageId: 'textNodeOutsideTypography' }],
+    },
+    {
+      code: `
+        <div>
+          { condition && condition2 || condition3 && Intl.formatMessage({ id: 'someId' })}
+        </div>`,
+      errors: [{ messageId: 'textNodeOutsideTypography' }],
+    },
+    {
+      code: `
+        <div>
+          {condition1 ? Intl.formatMessage({ id: 'someId' }) : null}
+        </div>`,
+      errors: [{ messageId: 'textNodeOutsideTypography' }],
+    },
+    // Exceptions with tagName prop
+    {
+      code: `
+        <Typography.Text tagName='p'>
+          <span>
+            <span>Content</span>
+          </span>
+        </Typography.Text>
+      `,
+      errors: [{ messageId: 'textNodeOutsideTypography' }],
+    },
+    {
+      code: `
+        <Typography.Text tagName='div'>
+          <span>
+            <li>Content</li>
+          </span>
+        </Typography.Text>
+      `,
+      errors: [{ messageId: 'textNodeOutsideTypography' }],
+    },
+    {
+      code: `
+        <Typography.Text tagName='span'>
+          <span>
+            <span>Content</span>
+          </span>
+        </Typography.Text>
+      `,
+      errors: [{ messageId: 'textNodeOutsideTypography' }],
+    },
+    {
+      code: `
+        <Typography.Text tagName='label'>
+          <span>
+            <span>Content</span>
+          </span>
+        </Typography.Text>
+      `,
+      errors: [{ messageId: 'textNodeOutsideTypography' }],
+    },
+  ].map((test) => ({ ...test, ...config })),
+});

package/.eslintrc.js

@@ -1,19 +0,0 @@
-'use strict';
-
-module.exports = {
-  root: true,
-  extends: [
-    'eslint:recommended',
-    'plugin:eslint-plugin/recommended',
-    'plugin:node/recommended',
-  ],
-  env: {
-    node: true,
-  },
-  overrides: [
-    {
-      files: ['tests/**/*.js'],
-      env: { jest: true },
-    },
-  ],
-};