@hero-design/eslint-plugin 8.34.4 → 8.34.6

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,103 +21,12 @@ 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: [{ 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,
-              },
-            ],
+            components: [{ name: 'Tag', props: ['variant'] }],
           },
         ],
       },
@@ -333,6 +35,7 @@ module.exports = {
       plugins: ['@hero-design'],
       extends: ['plugin:@hero-design/internalRn'],
       rules: {
+        '@hero-design/no-invalid-theme-access': 'error',
         '@hero-design/not-recommended-import': [
           'warn',
           {

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-invalid-theme-access.js

@@ -0,0 +1,97 @@
+'use strict';
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+const findPaths = (node, paths) => {
+  if (node == null) {
+    return paths;
+  }
+  const property = node.property;
+  if (
+    property != null &&
+    property.type === 'Identifier' &&
+    property.name != null
+  ) {
+    return findPaths(node.parent, [...paths, property.name]);
+  }
+  return paths;
+};
+
+const getError = (themePath) => {
+  if (themePath == null || themePath === '') {
+    return 'Invalid access to theming object';
+  }
+
+  if (themePath.startsWith('__hd__')) {
+    return 'Invalid access to component level theming object.';
+  }
+
+  return undefined;
+};
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem', // `problem`, `suggestion`, or `layout`
+    docs: {
+      description: 'Invalidate theming access',
+      recommended: false,
+    },
+    fixable: null, // or "code" or "whitespace"
+    schema: [
+      {
+        properties: {
+          themeFile: { type: ['string'] },
+        },
+      },
+    ],
+    messages: {
+      invalidThemeAccess: 'Invalid access to component level theming object.',
+    },
+  },
+  create: function (context) {
+    return {
+      MemberExpression(node) {
+        const object = node.object;
+        if (object == null) {
+          return;
+        }
+
+        if (object.type === 'Identifier' && object.name === 'theme') {
+          const paths = findPaths(node, []);
+          const themePath = paths.join('.');
+          const error = getError(themePath);
+          if (error != null) {
+            context.report({
+              node,
+              messageId: 'invalidThemeAccess',
+            });
+          }
+          return;
+        }
+
+        const property = node.property;
+        if (
+          property != null &&
+          property.name === 'theme' &&
+          object.type === 'Identifier' &&
+          object.name === 'props'
+        ) {
+          // First element is theme, we don't need it
+          const [, ...paths] = findPaths(node, []);
+          const themePath = paths.join('.');
+          const error = getError(themePath);
+          if (error != null) {
+            context.report({
+              node,
+              messageId: 'invalidThemeAccess',
+            });
+          }
+          return;
+        }
+      },
+    };
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/eslint-plugin",
-  "version": "8.34.4",
+  "version": "8.34.6",
   "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": "^27.3.1",
-    "prettier-config-hd": "8.34.4"
+    "prettier-config-hd": "8.34.6"
   },
   "engines": {
     "node": "^14.17.0 || ^16.0.0 || >= 18.0.0"

package/tests/lib/rules/no-invalid-theme-access.js

@@ -0,0 +1,41 @@
+'use strict';
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/no-invalid-theme-access'),
+  RuleTester = require('eslint').RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+var ruleTester = new RuleTester();
+ruleTester.run('no-invalid-theme-access', rule, {
+  valid: [
+    {
+      code: 'theme.space.medium',
+    },
+  ],
+  invalid: [
+    {
+      code: 'theme.__hd__.card.space.titlePadding',
+      errors: [
+        {
+          type: 'MemberExpression',
+          message: 'Invalid access to component level theming object.',
+        },
+      ],
+    },
+    {
+      code: 'props.theme.__hd__.card.space.titlePadding',
+      errors: [
+        {
+          type: 'MemberExpression',
+          message: 'Invalid access to component level theming object.',
+        },
+      ],
+    },
+  ],
+});