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

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,3 @@
+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,
+}