@hero-design/eslint-plugin 9.2.1-rc.0 → 9.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/eslint-plugin",
-  "version": "9.2.1-rc.0",
+  "version": "9.2.2",
   "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 --quiet",
     "test": "jest --runInBand",
     "test:watch": "jest --runInBand --watch",
     "test:ci": "jest --runInBand --logHeapUsage",
@@ -22,14 +22,16 @@
     "requireindex": "^1.2.0"
   },
   "devDependencies": {
-    "eslint": "^8.10.0",
+    "@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.1-rc.0"
+    "jest": "^29.2.1",
+    "prettier-config-hd": "8.42.4"
   },
   "engines": {
-    "node": "^14.17.0 || ^16.0.0 || >= 18.0.0"
+    "node": "^14.17.0 || ^16.0.0 || ^18.0.0 || ^20.0.0 || >= 22.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 },
-    },
-  ],
-};