@hero-design/eslint-plugin 9.0.1 → 9.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/eslint-plugin
 
+## 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

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

@@ -121,7 +121,8 @@ module.exports = {
     recommendedReact: {
       plugins: ['@hero-design'],
       rules: {
-        '@hero-design/no-direct-color-palette-access': 'error'
+        '@hero-design/no-direct-color-palette-access': 'error',
+        '@hero-design/react-no-text-outside-typography': 'warn',
       }
     }
   },

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/eslint-plugin",
-  "version": "9.0.1",
+  "version": "9.1.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,7 +22,10 @@
     "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": "^29.2.1",

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 },
-    },
-  ],
-};