@hero-design/eslint-plugin 7.27.1 → 8.0.0-rc.0

package/README.md

@@ -1,6 +1,7 @@
 # @hero-design/eslint-plugin
 
-Hero Design's eslint plugin
+Hero Design's eslint plugin to ensure correct usage and deprecation of our packages.
+We **strongly recommend** all of our consumers to use this plugin with our predefined `recommendedRn` config.
 
 ## Installation
 
@@ -26,7 +27,17 @@ Add `@hero-design` to the plugins section of your `.eslintrc` configuration file
 }
 ```
 
-Then configure the rules you want to use under the rules section.
+Then, you can either:
+
+1. Use our pre-defined config by adding `plugin:@hero-design/recommendedRn` under `extends` section. This approach is **strongly recommended** as it requires no configurations.
+
+```json
+{
+  "extends": ["plugin:@hero-design/recommendedRn"]
+}
+```
+
+2. Configure the rules you want to use under the `rules` section. This approach should be **avoided** in most of the cases unless you have any specific needs.
 
 ```json
 {

package/docs/rules/no-deprecated-component-prop.md

@@ -26,8 +26,8 @@ This rule receives option including package name and component props that are de
   "components": [
     { "name": "Card", "props": ["variant"] },
     { "name": "Switch", "props": ["size"] },
-    { "name": "Select", "props": ["onDimiss", "numberOfLines"] },
-    { "name": "Select.Multi", "props": ["onDimiss", "numberOfLines"] },
+    { "name": "Select", "props": ["onDimiss", "numberOfLines", "inputProps.required"] },
+    { "name": "Select.Multi", "props": ["onDimiss", "numberOfLines", "inputProps.required"] },
   ],
 },
 ```

package/lib/index.js

@@ -221,10 +221,18 @@ module.exports = {
           {
             package: '@hero-design/rn',
             components: [
+              { name: 'Alert', props: ['variant'] },
               { name: 'Card', props: ['variant'] },
               { name: 'Switch', props: ['size'] },
-              { name: 'Select', props: ['onDimiss', 'numberOfLines'] },
-              { name: 'Select.Multi', props: ['onDimiss', 'numberOfLines'] },
+              {
+                name: 'Select',
+                props: ['onDimiss', 'numberOfLines', 'inputProps.required'],
+              },
+              {
+                name: 'Select.Multi',
+                props: ['onDimiss', 'numberOfLines', 'inputProps.required'],
+              },
+              { name: 'Toast.Provider', props: ['position'] },
             ],
           },
         ],
@@ -237,10 +245,6 @@ module.exports = {
                 name: 'Tag',
                 props: [{ name: 'intent', values: ['default'] }],
               },
-              {
-                name: 'Alert',
-                props: [{ name: 'variant', values: ['default'] }],
-              },
               {
                 name: 'Button',
                 props: [{ name: 'variant', values: ['basic-transparent'] }],

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

@@ -50,7 +50,7 @@ module.exports = {
 
   create(context) {
     const components = context.options[0].components.map((c) => ({
-      props: c.props,
+      props: c.props.map((p) => p.split('.')),
       identifiers: c.name.split('.'),
     }));
     let importedComponents = [];
@@ -130,15 +130,34 @@ module.exports = {
           if (atb.type !== 'JSXAttribute') return;
 
           const deprecatedProp = deprecatedComponent.props.find(
-            (p) => p === atb.name.name
+            (p) => p[0] === atb.name.name
           );
-          if (deprecatedProp !== undefined) {
+
+          if (deprecatedProp === undefined) return;
+          if (deprecatedProp.length === 1) {
             context.report({
               node: atb,
               messageId: 'deprecatedProp',
-              data: { prop: deprecatedProp },
+              data: { prop: deprecatedProp.join('.') },
             });
           }
+
+          if (deprecatedProp.length === 2) {
+            if (atb.value.type !== 'JSXExpressionContainer') return;
+            if (atb.value.expression.type !== 'ObjectExpression') return;
+
+            let nestedDeprecatedProp = atb.value.expression.properties.find(
+              (p) => p.key.name === deprecatedProp[1]
+            );
+
+            if (nestedDeprecatedProp !== undefined) {
+              context.report({
+                node: nestedDeprecatedProp,
+                messageId: 'deprecatedProp',
+                data: { prop: deprecatedProp.join('.') },
+              });
+            }
+          }
         });
       },
     };

package/package.json

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

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

@@ -22,8 +22,14 @@ const config = {
       components: [
         { name: 'Card', props: ['variant'] },
         { name: 'Box', props: ['padding', 'margin'] },
-        { name: 'Select', props: ['onDimiss', 'numberOfLines'] },
-        { name: 'Select.Multi', props: ['onDimiss', 'numberOfLines'] },
+        {
+          name: 'Select',
+          props: ['onDimiss', 'numberOfLines', 'inputProps.required'],
+        },
+        {
+          name: 'Select.Multi',
+          props: ['onDimiss', 'numberOfLines', 'inputProps.required'],
+        },
       ],
     },
   ],
@@ -61,6 +67,9 @@ ruleTester.run('no-deprecated-component-prop', rule, {
     {
       code: 'import * as HD from "@hero-design/rn"; <HD.Select.Multi onClose={() => {}} />',
     },
+    {
+      code: 'import * as HD from "@hero-design/rn"; <HD.Select.Multi onClose={() => {}} inputProps={{ numberOfLines: 2 }} />',
+    },
   ].map((test) => ({
     ...test,
     ...config,
@@ -103,6 +112,13 @@ ruleTester.run('no-deprecated-component-prop', rule, {
       code: 'import * as HD from "@hero-design/rn"; <HD.Select.Multi onDimiss={() => {}} />',
       errors: [{ messageId: 'deprecatedProp' }],
     },
+    {
+      code: 'import * as HD from "@hero-design/rn"; <HD.Select.Multi onDimiss={() => {}} inputProps={{ required: true }} />',
+      errors: [
+        { messageId: 'deprecatedProp' },
+        { messageId: 'deprecatedProp' },
+      ],
+    },
   ].map((test) => ({
     ...test,
     ...config,

package/.turbo/turbo-lint.log

@@ -1,2 +0,0 @@
-@hero-design/eslint-plugin:lint: cache hit, replaying output 0000ee444f6d82b6
-@hero-design/eslint-plugin:lint: $ eslint .

package/.turbo/turbo-test:ci.log

@@ -1,10 +0,0 @@
-@hero-design/eslint-plugin:test:ci: cache hit, replaying output a90258f7b0211480
-@hero-design/eslint-plugin:test:ci: $ jest --runInBand --logHeapUsage
-@hero-design/eslint-plugin:test:ci: PASS tests/lib/rules/no-deprecated-component-prop-value.js (58 MB heap size)
-@hero-design/eslint-plugin:test:ci: PASS tests/lib/rules/no-deprecated-component-prop.js (71 MB heap size)
-@hero-design/eslint-plugin:test:ci: 
-@hero-design/eslint-plugin:test:ci: Test Suites: 2 passed, 2 total
-@hero-design/eslint-plugin:test:ci: Tests:       30 passed, 30 total
-@hero-design/eslint-plugin:test:ci: Snapshots:   0 total
-@hero-design/eslint-plugin:test:ci: Time:        1.672 s, estimated 3 s
-@hero-design/eslint-plugin:test:ci: Ran all test suites.