@smartive/eslint-config 8.0.0-next.3 → 8.1.0

package/README.md

@@ -141,6 +141,33 @@ Enabled in the `react` and `nextjs` rule sets as:
 'smartive/forbid-component-props': ['warn', { forbid: ['style', 'className'] }]
 ```
 
+Each entry in `forbid` is either a prop name or an object that narrows where the prop stays allowed:
+
+| Key                  | Meaning                                                                                  |
+| -------------------- | ---------------------------------------------------------------------------------------- |
+| `propName`           | The forbidden prop (required).                                                           |
+| `allowedFor`         | Component names the prop is still allowed on, matched exactly.                           |
+| `allowedForPatterns` | Globs (`*` for any run of characters, `?` for one) the component name may match instead. |
+| `message`            | Replaces the default report message.                                                     |
+
+Component names are matched on their full JSX name, so `<Mantine.Button />` matches `Mantine.*`.
+
+```javascript
+'smartive/forbid-component-props': [
+  'error',
+  {
+    forbid: [
+      {
+        propName: 'className',
+        allowedFor: ['NextImage', 'NextLink'],
+        allowedForPatterns: ['*Icon', 'Mantine*'],
+        message: 'Avoid using className except NextImage, NextLink, icons and Mantine components',
+      },
+    ],
+  },
+]
+```
+
 ## Development
 
 ```sh

package/dist/plugin/forbid-component-props.js

@@ -11,6 +11,27 @@ const isComponent = (name) => {
             return false;
     }
 };
+/**
+ * The source text of the element name, so that `<Ui.Group.Item />` can be matched as `Ui.Group.Item`.
+ */
+const elementName = (name) => {
+    switch (name.type) {
+        case 'JSXIdentifier':
+            return name.name;
+        case 'JSXMemberExpression':
+            return `${elementName(name.object)}.${name.property.name}`;
+        default:
+            return `${name.namespace.name}:${name.name.name}`;
+    }
+};
+/**
+ * Glob matching for `allowedForPatterns`: `*` matches any run of characters, `?` a single one.
+ */
+const globToRegExp = (pattern) => new RegExp(`^${pattern
+    .replace(/[.+^${}()|[\]\\]/g, '\\$&')
+    .replace(/\*/g, '.*')
+    .replace(/\?/g, '.')}$`);
+const normalize = (option) => (typeof option === 'string' ? { propName: option } : option);
 /**
  * Replacement for `react/forbid-component-props`, which has no equivalent in
  * `@eslint-react/eslint-plugin` (https://eslint-react.xyz/docs/migrating-from-eslint-plugin-react).
@@ -28,7 +49,22 @@ export const forbidComponentProps = {
                 properties: {
                     forbid: {
                         type: 'array',
-                        items: { type: 'string' },
+                        items: {
+                            anyOf: [
+                                { type: 'string' },
+                                {
+                                    type: 'object',
+                                    properties: {
+                                        propName: { type: 'string' },
+                                        allowedFor: { type: 'array', items: { type: 'string' }, uniqueItems: true },
+                                        allowedForPatterns: { type: 'array', items: { type: 'string' }, uniqueItems: true },
+                                        message: { type: 'string' },
+                                    },
+                                    required: ['propName'],
+                                    additionalProperties: false,
+                                },
+                            ],
+                        },
                         uniqueItems: true,
                     },
                 },
@@ -37,11 +73,19 @@ export const forbidComponentProps = {
         ],
         messages: {
             forbiddenProp: 'Prop "{{prop}}" is forbidden on components.',
+            forbiddenPropWithMessage: '{{message}}',
         },
     },
     create(context) {
         const { forbid = [] } = (context.options[0] ?? {});
-        const forbidden = new Set(forbid);
+        const forbidden = new Map(forbid.map(normalize).map((entry) => [
+            entry.propName,
+            {
+                allowedFor: new Set(entry.allowedFor ?? []),
+                allowedForPatterns: (entry.allowedForPatterns ?? []).map(globToRegExp),
+                message: entry.message,
+            },
+        ]));
         if (forbidden.size === 0) {
             return {};
         }
@@ -51,17 +95,24 @@ export const forbidComponentProps = {
                 if (!isComponent(element.name)) {
                     return;
                 }
+                const component = elementName(element.name);
                 for (const attribute of element.attributes) {
                     if (attribute.type !== 'JSXAttribute' || attribute.name.type !== 'JSXIdentifier') {
                         continue;
                     }
-                    if (forbidden.has(attribute.name.name)) {
-                        context.report({
-                            node: attribute,
-                            messageId: 'forbiddenProp',
-                            data: { prop: attribute.name.name },
-                        });
+                    const entry = forbidden.get(attribute.name.name);
+                    if (!entry) {
+                        continue;
+                    }
+                    if (entry.allowedFor.has(component) || entry.allowedForPatterns.some((pattern) => pattern.test(component))) {
+                        continue;
                     }
+                    context.report({
+                        node: attribute,
+                        ...(entry.message
+                            ? { messageId: 'forbiddenPropWithMessage', data: { message: entry.message } }
+                            : { messageId: 'forbiddenProp', data: { prop: attribute.name.name } }),
+                    });
                 }
             },
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smartive/eslint-config",
-  "version": "8.0.0-next.3",
+  "version": "8.1.0",
   "description": "ESLint configuration by smartive",
   "files": [
     "README.md",
@@ -55,15 +55,15 @@
     "@commitlint/cli": "21.2.2",
     "@commitlint/config-conventional": "21.2.2",
     "@smartive/prettier-config": "3.1.2",
-    "@types/node": "25.9.6",
+    "@types/node": "25.9.7",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "cz-conventional-changelog": "3.3.0",
-    "eslint": "10.9.1",
+    "eslint": "10.10.0",
     "eslint-config-next": "16.3.5",
     "husky": "9.1.7",
     "next": "16.3.5",
-    "prettier": "3.9.6",
+    "prettier": "3.9.8",
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "typescript": "6.0.3"