@adyen/eslint-plugin-bento 2.7.7 → 2.9.0

package/rules/deprecation-components-error-prop/deprecation-components-error-prop.js

@@ -0,0 +1,79 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+/**
+ * @typedef {import('eslint-plugin-vue/lib/utils').RuleModule} RuleModule
+ */
+
+const VueUtils = require('eslint-plugin-vue/lib/utils');
+
+/** @type {RuleModule} */
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description:
+                'Deprecates usage of error prop in bento-dropdown, bento-input-field, bento-input-field-phone-number',
+            category: 'Deprecations',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/deprecation-components-error-prop/README.md',
+            recommended: true,
+        },
+        messages: {
+            deprecation: `The "error" prop is deprecated. Please use "error-message" instead.`,
+        },
+        fixable: 'code',
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    autofix: {
+                        type: 'boolean',
+                        default: false,
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+    },
+
+    /** @param {RuleContext} context */
+    create(context) {
+        const options = context.options[0] || {};
+        const autofix = options.autofix === true;
+
+        /* ------------------------------------------------ */
+        /* CASE 2: PROP DEPRECATION (Multiple Components)   */
+        /* ------------------------------------------------ */
+        return VueUtils.defineTemplateBodyVisitor(context, {
+            // 1. STATIC: value="foo"
+            [`VElement:matches([name="bento-dropdown"], [name="BentoDropdown"], [name="bento-input-field"], [name="BentoInputField"], [name="bento-input-field-phone-number"], [name="BentoInputFieldPhoneNumber"]) > VStartTag > VAttribute[directive=false][key.name="error"]`](
+                node
+            ) {
+                context.report({
+                    node,
+                    messageId: 'deprecation',
+                    ...(autofix && {
+                        fix(fixer) {
+                            return fixer.replaceText(node.key, 'error-message');
+                        },
+                    }),
+                });
+            },
+
+            // 2. DYNAMIC: :value="foo" or v-bind:value="foo"
+            [`VElement:matches([name="bento-dropdown"], [name="BentoDropdown"], [name="bento-input-field"], [name="BentoInputField"], [name="bento-input-field-phone-number"], [name="BentoInputFieldPhoneNumber"]) > VStartTag > VAttribute[directive=true][key.name.name="bind"][key.argument.name="error"]`](
+                node
+            ) {
+                context.report({
+                    node,
+                    messageId: 'deprecation',
+                    ...(autofix && {
+                        fix(fixer) {
+                            return fixer.replaceText(node.key.argument, 'error-message');
+                        },
+                    }),
+                });
+            },
+        });
+    },
+};

package/rules/deprecation-components-error-prop/deprecation-components-error-prop.test.ts

@@ -0,0 +1,120 @@
+import { RuleTester } from 'eslint';
+import vueParser from 'vue-eslint-parser';
+import tsParser from '@typescript-eslint/parser';
+import deprecationComponentsErrorProp from './deprecation-components-error-prop';
+
+const ruleTester = new RuleTester({
+    languageOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        parser: vueParser,
+        parserOptions: {
+            parser: tsParser,
+        },
+    },
+});
+
+describe('@adyen/bento/deprecation-components-error-prop', () => {
+    ruleTester.run('deprecation-components-error-prop', deprecationComponentsErrorProp, {
+        valid: [
+            {
+                name: 'Valid usage for bento-dropdown',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-dropdown error-message="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-input-field',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-input-field error-message="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-input-field-phone-number',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-input-field-phone-number error-message="val" />
+                </template>
+                `,
+            },
+        ],
+        invalid: [
+            {
+                name: 'Invalid: autofix disabled (explicit false)',
+                filename: 'test.vue',
+                code: `<template><bento-dropdown error="val" /></template>`,
+                output: null,
+                options: [{ autofix: false }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: autofix disabled (no options)',
+                filename: 'test.vue',
+                code: `<template><bento-dropdown :error="val" /></template>`,
+                output: null,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            // bento-dropdown: Static
+            {
+                name: 'Invalid: Static prop on bento-dropdown',
+                filename: 'test.vue',
+                code: `<template><bento-dropdown error="val" /></template>`,
+                output: `<template><bento-dropdown error-message="val" /></template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+            // bento-dropdown: Shorthand
+            {
+                name: 'Invalid: Dynamic prop on bento-dropdown',
+                filename: 'test.vue',
+                code: `<template><bento-dropdown :error="val" /></template>`,
+                output: `<template><bento-dropdown :error-message="val" /></template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+            // bento-input-field: Static
+            {
+                name: 'Invalid: Static prop on bento-input-field',
+                filename: 'test.vue',
+                code: `<template><bento-input-field error="val" /></template>`,
+                output: `<template><bento-input-field error-message="val" /></template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+            // bento-input-field: Shorthand
+            {
+                name: 'Invalid: Dynamic prop on bento-input-field',
+                filename: 'test.vue',
+                code: `<template><bento-input-field :error="val" /></template>`,
+                output: `<template><bento-input-field :error-message="val" /></template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+            // bento-input-field-phone-number: Static
+            {
+                name: 'Invalid: Static prop on bento-input-field-phone-number',
+                filename: 'test.vue',
+                code: `<template><bento-input-field-phone-number error="val" /></template>`,
+                output: `<template><bento-input-field-phone-number error-message="val" /></template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+            // bento-input-field-phone-number: Shorthand
+            {
+                name: 'Invalid: Dynamic prop on bento-input-field-phone-number',
+                filename: 'test.vue',
+                code: `<template><bento-input-field-phone-number :error="val" /></template>`,
+                output: `<template><bento-input-field-phone-number :error-message="val" /></template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+        ],
+    });
+});

package/rules/deprecation-components-input-emit/__tests__/eslint.config.js

@@ -18,7 +18,7 @@ module.exports = defineConfig([
         },
         rules: {
             // Register the specific rule we are testing
-            '@adyen/bento/deprecation-components-input-emit': 'warn',
+            '@adyen/bento/deprecation-components-input-emit': ['warn', { autofix: true }],
         },
         files: ['**/*.vue'],
     },

package/rules/deprecation-components-input-emit/deprecation-components-input-emit.js

@@ -22,11 +22,24 @@ module.exports = {
             deprecation: `The "input" emit is deprecated. Please use "update:model-value" instead.`,
         },
         fixable: 'code',
-        schema: [],
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    autofix: {
+                        type: 'boolean',
+                        default: false,
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
     },
 
     /** @param {RuleContext} context */
     create(context) {
+        const options = context.options[0] || {};
+        const autofix = options.autofix === true;
         /* ------------------------------------------------ */
         /* CASE 3: EMIT DEPRECATION (Multiple Components)   */
         /* ------------------------------------------------ */
@@ -38,9 +51,11 @@ module.exports = {
                 context.report({
                     node,
                     messageId: 'deprecation',
-                    fix(fixer) {
-                        return fixer.replaceText(node.key.argument, 'update:model-value');
-                    },
+                    ...(autofix && {
+                        fix(fixer) {
+                            return fixer.replaceText(node.key.argument, 'update:model-value');
+                        },
+                    }),
                 });
             },
         });

package/rules/deprecation-components-input-emit/deprecation-components-input-emit.test.ts

@@ -163,11 +163,36 @@ describe('@adyen/bento/deprecation-components-input-emit', () => {
             },
         ],
         invalid: [
+            /* autofix: false */
+            {
+                name: 'Invalid: Emit event with autofix disabled (explicit false)',
+                filename: 'test.vue',
+                code: `<template><bento-input-field @input="val" /></template>`,
+                output: null,
+                options: [{ autofix: false }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Emit event with autofix disabled (no options)',
+                filename: 'test.vue',
+                code: `<template><bento-dropdown @input="handleInput" /></template>`,
+                output: null,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Emit event with v-on directive and autofix disabled',
+                filename: 'test.vue',
+                code: `<template><bento-textarea v-on:input="val" /></template>`,
+                output: null,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            /* autofix: true */
             {
                 name: 'Invalid: Emit event on bento-date-picker',
                 filename: 'test.vue',
                 code: `<template><bento-date-picker @input="val" /></template>`,
                 output: `<template><bento-date-picker @update:model-value="val" /></template>`,
+                options: [{ autofix: true }],
                 errors: [{ messageId: 'deprecation' }],
             },
             {
@@ -175,6 +200,7 @@ describe('@adyen/bento/deprecation-components-input-emit', () => {
                 filename: 'test.vue',
                 code: `<template><bento-date-range-picker @input="val" /></template>`,
                 output: `<template><bento-date-range-picker @update:model-value="val" /></template>`,
+                options: [{ autofix: true }],
                 errors: [{ messageId: 'deprecation' }],
             },
             {
@@ -182,6 +208,7 @@ describe('@adyen/bento/deprecation-components-input-emit', () => {
                 filename: 'test.vue',
                 code: `<template><bento-dropdown @input="val" /></template>`,
                 output: `<template><bento-dropdown @update:model-value="val" /></template>`,
+                options: [{ autofix: true }],
                 errors: [{ messageId: 'deprecation' }],
             },
             {
@@ -189,6 +216,7 @@ describe('@adyen/bento/deprecation-components-input-emit', () => {
                 filename: 'test.vue',
                 code: `<template><bento-dropdown-avatar @input="val" /></template>`,
                 output: `<template><bento-dropdown-avatar @update:model-value="val" /></template>`,
+                options: [{ autofix: true }],
                 errors: [{ messageId: 'deprecation' }],
             },
             {
@@ -196,6 +224,7 @@ describe('@adyen/bento/deprecation-components-input-emit', () => {
                 filename: 'test.vue',
                 code: `<template><bento-dropdown-country @input="val" /></template>`,
                 output: `<template><bento-dropdown-country @update:model-value="val" /></template>`,
+                options: [{ autofix: true }],
                 errors: [{ messageId: 'deprecation' }],
             },
             {
@@ -203,6 +232,7 @@ describe('@adyen/bento/deprecation-components-input-emit', () => {
                 filename: 'test.vue',
                 code: `<template><bento-dropdown-currency @input="val" /></template>`,
                 output: `<template><bento-dropdown-currency @update:model-value="val" /></template>`,
+                options: [{ autofix: true }],
                 errors: [{ messageId: 'deprecation' }],
             },
             {
@@ -210,6 +240,7 @@ describe('@adyen/bento/deprecation-components-input-emit', () => {
                 filename: 'test.vue',
                 code: `<template><bento-dropdown-payment-method @input="val" /></template>`,
                 output: `<template><bento-dropdown-payment-method @update:model-value="val" /></template>`,
+                options: [{ autofix: true }],
                 errors: [{ messageId: 'deprecation' }],
             },
             {
@@ -217,6 +248,7 @@ describe('@adyen/bento/deprecation-components-input-emit', () => {
                 filename: 'test.vue',
                 code: `<template><bento-dropdown-tag @input="val" /></template>`,
                 output: `<template><bento-dropdown-tag @update:model-value="val" /></template>`,
+                options: [{ autofix: true }],
                 errors: [{ messageId: 'deprecation' }],
             },
             {
@@ -224,6 +256,7 @@ describe('@adyen/bento/deprecation-components-input-emit', () => {
                 filename: 'test.vue',
                 code: `<template><bento-file-uploader @input="val" /></template>`,
                 output: `<template><bento-file-uploader @update:model-value="val" /></template>`,
+                options: [{ autofix: true }],
                 errors: [{ messageId: 'deprecation' }],
             },
             {
@@ -231,6 +264,7 @@ describe('@adyen/bento/deprecation-components-input-emit', () => {
                 filename: 'test.vue',
                 code: `<template><bento-input-field @input="val" /></template>`,
                 output: `<template><bento-input-field @update:model-value="val" /></template>`,
+                options: [{ autofix: true }],
                 errors: [{ messageId: 'deprecation' }],
             },
             {
@@ -238,6 +272,7 @@ describe('@adyen/bento/deprecation-components-input-emit', () => {
                 filename: 'test.vue',
                 code: `<template><bento-input-field-password @input="val" /></template>`,
                 output: `<template><bento-input-field-password @update:model-value="val" /></template>`,
+                options: [{ autofix: true }],
                 errors: [{ messageId: 'deprecation' }],
             },
             {
@@ -245,6 +280,7 @@ describe('@adyen/bento/deprecation-components-input-emit', () => {
                 filename: 'test.vue',
                 code: `<template><bento-input-field-phone-number @input="val" /></template>`,
                 output: `<template><bento-input-field-phone-number @update:model-value="val" /></template>`,
+                options: [{ autofix: true }],
                 errors: [{ messageId: 'deprecation' }],
             },
             {
@@ -252,6 +288,7 @@ describe('@adyen/bento/deprecation-components-input-emit', () => {
                 filename: 'test.vue',
                 code: `<template><bento-checkbox-group @input="val" /></template>`,
                 output: `<template><bento-checkbox-group @update:model-value="val" /></template>`,
+                options: [{ autofix: true }],
                 errors: [{ messageId: 'deprecation' }],
             },
             {
@@ -259,6 +296,7 @@ describe('@adyen/bento/deprecation-components-input-emit', () => {
                 filename: 'test.vue',
                 code: `<template><bento-radio-group @input="val" /></template>`,
                 output: `<template><bento-radio-group @update:model-value="val" /></template>`,
+                options: [{ autofix: true }],
                 errors: [{ messageId: 'deprecation' }],
             },
             {
@@ -266,6 +304,7 @@ describe('@adyen/bento/deprecation-components-input-emit', () => {
                 filename: 'test.vue',
                 code: `<template><bento-selection-card-group @input="val" /></template>`,
                 output: `<template><bento-selection-card-group @update:model-value="val" /></template>`,
+                options: [{ autofix: true }],
                 errors: [{ messageId: 'deprecation' }],
             },
             {
@@ -273,6 +312,7 @@ describe('@adyen/bento/deprecation-components-input-emit', () => {
                 filename: 'test.vue',
                 code: `<template><bento-textarea @input="val" /></template>`,
                 output: `<template><bento-textarea @update:model-value="val" /></template>`,
+                options: [{ autofix: true }],
                 errors: [{ messageId: 'deprecation' }],
             },
         ],

package/rules/deprecation-components-value-prop/__tests__/eslint.config.js

@@ -18,7 +18,7 @@ module.exports = defineConfig([
         },
         rules: {
             // Register the specific rule we are testing
-            '@adyen/bento/deprecation-components-value-prop': 'warn',
+            '@adyen/bento/deprecation-components-value-prop': ['warn', { autofix: true }],
         },
         files: ['**/*.vue'],
     },

package/rules/deprecation-components-value-prop/deprecation-components-value-prop.js

@@ -22,11 +22,24 @@ module.exports = {
             deprecation: `The "value" prop is deprecated. Please use "model-value" instead.`,
         },
         fixable: 'code',
-        schema: [],
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    autofix: {
+                        type: 'boolean',
+                        default: false,
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
     },
 
     /** @param {RuleContext} context */
     create(context) {
+        const options = context.options[0] || {};
+        const autofix = options.autofix === true;
         /* ------------------------------------------------ */
         /* CASE 2: PROP DEPRECATION (Multiple Components)   */
         /* ------------------------------------------------ */
@@ -38,9 +51,11 @@ module.exports = {
                 context.report({
                     node,
                     messageId: 'deprecation',
-                    fix(fixer) {
-                        return fixer.replaceText(node.key, 'model-value');
-                    },
+                    ...(autofix && {
+                        fix(fixer) {
+                            return fixer.replaceText(node.key, 'model-value');
+                        },
+                    }),
                 });
             },
 
@@ -51,9 +66,11 @@ module.exports = {
                 context.report({
                     node,
                     messageId: 'deprecation',
-                    fix(fixer) {
-                        return fixer.replaceText(node.key.argument, 'model-value');
-                    },
+                    ...(autofix && {
+                        fix(fixer) {
+                            return fixer.replaceText(node.key.argument, 'model-value');
+                        },
+                    }),
                 });
             },
         });