@adyen/eslint-plugin-bento 2.10.0 → 2.12.0

package/rules/deprecation-bento-date-range-picker-has-actions-prop/__tests__/eslint.config.js

@@ -0,0 +1,29 @@
+// eslint.config.js
+const { defineConfig } = require('eslint/config');
+const vueParser = require('vue-eslint-parser');
+const tsParser = require('@typescript-eslint/parser');
+const adyenBento = require('@adyen/eslint-plugin-bento');
+
+module.exports = defineConfig([
+    {
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            parser: vueParser,
+            parserOptions: {
+                parser: tsParser,
+            },
+        },
+        plugins: {
+            '@adyen/bento': adyenBento,
+        },
+        rules: {
+            // Register the specific rule we are testing
+            '@adyen/bento/deprecation-bento-date-range-picker-has-actions-prop': [
+                'warn',
+                { action: 'add', autofix: true },
+            ],
+        },
+        files: ['**/*.vue'],
+    },
+]);

package/rules/deprecation-bento-date-range-picker-has-actions-prop/__tests__/remove/deprecation-bento-date-range-picker-has-actions-prop.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>
+        <!-- These should trigger the "remove" action (has-actions present) -->
+        <bento-date-range-picker has-actions />
+        <bento-date-range-picker has-actions label="Pick a date" />
+        <bento-date-range-picker :has-actions="true" />
+        <bento-date-range-picker :has-actions="false" />
+    </div>
+</template>
+
+<script setup></script>

package/rules/deprecation-bento-date-range-picker-has-actions-prop/__tests__/remove/eslint.config.js

@@ -0,0 +1,29 @@
+// eslint.config.js
+const { defineConfig } = require('eslint/config');
+const vueParser = require('vue-eslint-parser');
+const tsParser = require('@typescript-eslint/parser');
+const adyenBento = require('@adyen/eslint-plugin-bento');
+
+module.exports = defineConfig([
+    {
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            parser: vueParser,
+            parserOptions: {
+                parser: tsParser,
+            },
+        },
+        plugins: {
+            '@adyen/bento': adyenBento,
+        },
+        rules: {
+            // Register the specific rule we are testing
+            '@adyen/bento/deprecation-bento-date-range-picker-has-actions-prop': [
+                'warn',
+                { action: 'remove', autofix: true },
+            ],
+        },
+        files: ['**/*.vue'],
+    },
+]);

package/rules/deprecation-bento-date-range-picker-has-actions-prop/deprecation-bento-date-range-picker-has-actions-prop.integration.test.ts

@@ -0,0 +1,47 @@
+import path from 'node:path';
+import { execFileSyncEslintVueFiles } from '../../utils/exec-file-sync-eslint-vue-files';
+
+describe('@adyen/bento/deprecation-bento-date-range-picker-has-actions-prop', () => {
+    it('should lint with warning when has-actions is missing (add action)', () => {
+        const eslintrc = path.resolve(__dirname, '__tests__', 'eslint.config.js');
+        const vueFile = path.resolve(
+            __dirname,
+            '__tests__',
+            'deprecation-bento-date-range-picker-has-actions-prop.vue'
+        );
+
+        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
+
+        // The test .vue file has 3 bento-date-range-picker instances without has-actions
+        expect(result[0].warningCount).toBe(3);
+
+        expect(result[0].messages[0]).toMatchObject({
+            ruleId: '@adyen/bento/deprecation-bento-date-range-picker-has-actions-prop',
+            severity: 1,
+            messageId: 'missingProp',
+            message: `The temporary "has-actions" prop is missing on bento-date-range-picker. Add it to opt in to the new actions behavior.`,
+        });
+    });
+
+    it('should lint with warning when has-actions is present (remove action)', () => {
+        const eslintrc = path.resolve(__dirname, '__tests__', 'remove', 'eslint.config.js');
+        const vueFile = path.resolve(
+            __dirname,
+            '__tests__',
+            'remove',
+            'deprecation-bento-date-range-picker-has-actions-prop.vue'
+        );
+
+        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
+
+        // The test .vue file has 4 bento-date-range-picker instances with has-actions
+        expect(result[0].warningCount).toBe(4);
+
+        expect(result[0].messages[0]).toMatchObject({
+            ruleId: '@adyen/bento/deprecation-bento-date-range-picker-has-actions-prop',
+            severity: 1,
+            messageId: 'removeProp',
+            message: `The temporary "has-actions" prop should be removed from bento-date-range-picker.`,
+        });
+    });
+});

package/rules/deprecation-bento-date-range-picker-has-actions-prop/deprecation-bento-date-range-picker-has-actions-prop.js

@@ -0,0 +1,205 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+/**
+ * @typedef {import('eslint-plugin-vue/lib/utils').RuleModule} RuleModule
+ */
+
+const VueUtils = require('eslint-plugin-vue/lib/utils');
+
+const COMPONENT_SELECTOR = `VElement:matches([name="bento-date-range-picker"], [name="BentoDateRangePicker"])`;
+const STATIC_ATTR = `${COMPONENT_SELECTOR} > VStartTag > VAttribute[directive=false][key.name="has-actions"]`;
+const DYNAMIC_ATTR = `${COMPONENT_SELECTOR} > VStartTag > VAttribute[directive=true][key.name.name="bind"][key.argument.name="has-actions"]`;
+
+/**
+ * Checks whether a VElement already has the `has-actions` attribute set to a truthy value.
+ * Returns false if the prop is missing or explicitly set to false.
+ */
+function hasHasActionsTruthy(startTag) {
+    return startTag.attributes.some(attr => {
+        if (!attr.directive) {
+            // Static: has-actions (boolean) or has-actions="something"
+            // has-actions="false" is the string "false", still counts as explicitly false
+            if (attr.key.name !== 'has-actions') {
+                return false;
+            }
+            return !attr.value || attr.value.value !== 'false';
+        }
+        // Dynamic: :has-actions="expr" or v-bind:has-actions="expr"
+        if (
+            attr.key.name &&
+            attr.key.name.name === 'bind' &&
+            attr.key.argument &&
+            attr.key.argument.name === 'has-actions'
+        ) {
+            // :has-actions="false" → expression is a Literal with value false
+            const expr = attr.value && attr.value.expression;
+            if (expr && expr.type === 'Literal' && expr.value === false) {
+                return false;
+            }
+            return true;
+        }
+        return false;
+    });
+}
+
+/**
+ * Removes an attribute node. If the attribute is alone on its line,
+ * removes the entire line (including leading whitespace and trailing newline)
+ * to avoid leaving a blank line.
+ */
+function removeAttribute(fixer, node, sourceCode) {
+    const fullText = sourceCode.getText();
+    const lineStart = fullText.lastIndexOf('\n', node.range[0] - 1) + 1;
+    const lineEnd = node.range[1];
+
+    // Check if the attribute is the only non-whitespace content on its line
+    const textBefore = fullText.slice(lineStart, node.range[0]);
+    const textAfter = fullText.slice(node.range[1], fullText.indexOf('\n', node.range[1]));
+
+    if (textBefore.trim() === '' && textAfter.trim() === '') {
+        // Remove from end of previous line to end of this line
+        const removeEnd = fullText.indexOf('\n', lineEnd);
+        return fixer.removeRange([lineStart - 1, removeEnd >= 0 ? removeEnd : lineEnd]);
+    }
+
+    return fixer.remove(node);
+}
+
+/** @type {RuleModule} */
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description:
+                'Manages the temporary "has-actions" prop on bento-date-range-picker. Use action "add" to add it or "remove" to remove it.',
+            category: 'Deprecations',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/deprecation-bento-date-range-picker-has-actions-prop/README.md',
+            recommended: true,
+        },
+        messages: {
+            missingProp: `The temporary "has-actions" prop is missing on bento-date-range-picker. Add it to opt in to the new actions behavior.`,
+            removeProp: `The temporary "has-actions" prop should be removed from bento-date-range-picker.`,
+        },
+        fixable: 'code',
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    action: {
+                        type: 'string',
+                        enum: ['add', 'remove'],
+                        default: 'add',
+                    },
+                    autofix: {
+                        type: 'boolean',
+                        default: false,
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+    },
+
+    /** @param {RuleContext} context */
+    create(context) {
+        const options = context.options[0] || {};
+        const action = options.action || 'add';
+        const autofix = options.autofix === true;
+
+        if (action === 'remove') {
+            /* ------------------------------------------------ */
+            /* REMOVE: report and optionally remove has-actions  */
+            /* ------------------------------------------------ */
+            return VueUtils.defineTemplateBodyVisitor(context, {
+                [STATIC_ATTR](node) {
+                    context.report({
+                        node,
+                        messageId: 'removeProp',
+                        ...(autofix && {
+                            fix(fixer) {
+                                return removeAttribute(fixer, node, context.sourceCode);
+                            },
+                        }),
+                    });
+                },
+                [DYNAMIC_ATTR](node) {
+                    context.report({
+                        node,
+                        messageId: 'removeProp',
+                        ...(autofix && {
+                            fix(fixer) {
+                                return removeAttribute(fixer, node, context.sourceCode);
+                            },
+                        }),
+                    });
+                },
+            });
+        }
+
+        /* ------------------------------------------------ */
+        /* ADD: report components missing has-actions        */
+        /* ------------------------------------------------ */
+        return VueUtils.defineTemplateBodyVisitor(context, {
+            [COMPONENT_SELECTOR](node) {
+                if (hasHasActionsTruthy(node.startTag)) {
+                    return;
+                }
+
+                // Find if has-actions exists but is set to false
+                const falseAttr = node.startTag.attributes.find(attr => {
+                    if (!attr.directive) {
+                        return attr.key.name === 'has-actions' && attr.value && attr.value.value === 'false';
+                    }
+                    if (
+                        attr.key.name &&
+                        attr.key.name.name === 'bind' &&
+                        attr.key.argument &&
+                        attr.key.argument.name === 'has-actions'
+                    ) {
+                        const expr = attr.value && attr.value.expression;
+                        return expr && expr.type === 'Literal' && expr.value === false;
+                    }
+                    return false;
+                });
+
+                context.report({
+                    node: falseAttr || node.startTag,
+                    messageId: 'missingProp',
+                    ...(autofix && {
+                        fix(fixer) {
+                            // If has-actions="false" or :has-actions="false", replace with boolean has-actions
+                            if (falseAttr) {
+                                return fixer.replaceText(falseAttr, 'has-actions');
+                            }
+
+                            // Prop is completely missing – insert it
+                            const sourceCode = context.sourceCode;
+                            const fullText = sourceCode.getText();
+                            const firstAttr = node.startTag.attributes[0];
+                            if (firstAttr) {
+                                const isMultiLine = firstAttr.loc.start.line !== node.startTag.loc.start.line;
+                                if (isMultiLine) {
+                                    // Derive indentation from the actual whitespace before the first attribute
+                                    const lineStart = fullText.lastIndexOf('\n', firstAttr.range[0] - 1) + 1;
+                                    const indent = fullText.slice(lineStart, firstAttr.range[0]);
+                                    return fixer.insertTextBefore(firstAttr, `has-actions\n${indent}`);
+                                }
+                                return fixer.insertTextBefore(firstAttr, 'has-actions ');
+                            }
+
+                            // No attributes – insert before the closing > or />
+                            const startTagText = sourceCode.getText(node.startTag);
+                            const selfClosing = startTagText.endsWith('/>');
+                            const insertPos = node.startTag.range[1] - (selfClosing ? 2 : 1);
+                            // Only add a leading space if there isn't already whitespace before the insert position
+                            const charBefore = fullText[insertPos - 1];
+                            const leadingSpace = charBefore && /\s/.test(charBefore) ? '' : ' ';
+                            return fixer.insertTextBeforeRange([insertPos, insertPos], `${leadingSpace}has-actions `);
+                        },
+                    }),
+                });
+            },
+        });
+    },
+};

package/rules/deprecation-bento-date-range-picker-has-actions-prop/deprecation-bento-date-range-picker-has-actions-prop.test.ts

@@ -0,0 +1,176 @@
+import { RuleTester } from 'eslint';
+import vueParser from 'vue-eslint-parser';
+import tsParser from '@typescript-eslint/parser';
+import deprecationBentoDateRangePickerHasActionsProp from './deprecation-bento-date-range-picker-has-actions-prop';
+
+const ruleTester = new RuleTester({
+    languageOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        parser: vueParser,
+        parserOptions: {
+            parser: tsParser,
+        },
+    },
+});
+
+describe('@adyen/bento/deprecation-bento-date-range-picker-has-actions-prop', () => {
+    describe('action: add (default)', () => {
+        ruleTester.run(
+            'deprecation-bento-date-range-picker-has-actions-prop (add)',
+            deprecationBentoDateRangePickerHasActionsProp,
+            {
+                valid: [
+                    {
+                        name: 'Valid: component already has has-actions (static boolean)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker has-actions /></template>`,
+                    },
+                    {
+                        name: 'Valid: component already has has-actions (dynamic)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker :has-actions="true" /></template>`,
+                    },
+                    {
+                        name: 'Valid: unrelated component without has-actions',
+                        filename: 'test.vue',
+                        code: `<template><bento-button label="click" /></template>`,
+                    },
+                ],
+                invalid: [
+                    {
+                        name: 'Invalid: missing has-actions (no autofix)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker label="Pick" /></template>`,
+                        output: null,
+                        errors: [{ messageId: 'missingProp' }],
+                    },
+                    {
+                        name: 'Invalid: missing has-actions (autofix adds prop)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker label="Pick" /></template>`,
+                        output: `<template><bento-date-range-picker has-actions label="Pick" /></template>`,
+                        options: [{ action: 'add', autofix: true }],
+                        errors: [{ messageId: 'missingProp' }],
+                    },
+                    {
+                        name: 'Invalid: missing has-actions on self-closing tag without attrs (autofix)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker /></template>`,
+                        output: `<template><bento-date-range-picker has-actions /></template>`,
+                        options: [{ autofix: true }],
+                        errors: [{ messageId: 'missingProp' }],
+                    },
+                    {
+                        name: 'Invalid: missing has-actions on self-closing tag without space before /> (autofix)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker/></template>`,
+                        output: `<template><bento-date-range-picker has-actions /></template>`,
+                        options: [{ autofix: true }],
+                        errors: [{ messageId: 'missingProp' }],
+                    },
+                    {
+                        name: 'Invalid: has-actions="false" (static string false, no autofix)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker has-actions="false" /></template>`,
+                        output: null,
+                        errors: [{ messageId: 'missingProp' }],
+                    },
+                    {
+                        name: 'Invalid: has-actions="false" (static string false, autofix replaces)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker has-actions="false" label="Pick" /></template>`,
+                        output: `<template><bento-date-range-picker has-actions label="Pick" /></template>`,
+                        options: [{ autofix: true }],
+                        errors: [{ messageId: 'missingProp' }],
+                    },
+                    {
+                        name: 'Invalid: :has-actions="false" (dynamic false, autofix replaces)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker :has-actions="false" label="Pick" /></template>`,
+                        output: `<template><bento-date-range-picker has-actions label="Pick" /></template>`,
+                        options: [{ autofix: true }],
+                        errors: [{ messageId: 'missingProp' }],
+                    },
+                    {
+                        name: 'Invalid: multi-line component missing has-actions (autofix preserves indentation)',
+                        filename: 'test.vue',
+                        code: `<template>
+                            <bento-date-range-picker
+                                label="Pick"
+                            />
+                            </template>`,
+                        output: `<template>
+                            <bento-date-range-picker
+                                has-actions
+                                label="Pick"
+                            />
+                            </template>`,
+                        options: [{ autofix: true }],
+                        errors: [{ messageId: 'missingProp' }],
+                    },
+                ],
+            }
+        );
+    });
+
+    describe('action: remove', () => {
+        ruleTester.run(
+            'deprecation-bento-date-range-picker-has-actions-prop (remove)',
+            deprecationBentoDateRangePickerHasActionsProp,
+            {
+                valid: [
+                    {
+                        name: 'Valid: component without has-actions',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker label="Pick" /></template>`,
+                        options: [{ action: 'remove' }],
+                    },
+                ],
+                invalid: [
+                    {
+                        name: 'Invalid: has-actions present (static boolean, no autofix)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker has-actions /></template>`,
+                        output: null,
+                        options: [{ action: 'remove' }],
+                        errors: [{ messageId: 'removeProp' }],
+                    },
+                    {
+                        name: 'Invalid: has-actions present (static boolean, autofix removes)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker has-actions label="Pick" /></template>`,
+                        output: `<template><bento-date-range-picker  label="Pick" /></template>`,
+                        options: [{ action: 'remove', autofix: true }],
+                        errors: [{ messageId: 'removeProp' }],
+                    },
+                    {
+                        name: 'Invalid: has-actions present (dynamic, autofix removes)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker :has-actions="true" /></template>`,
+                        output: `<template><bento-date-range-picker  /></template>`,
+                        options: [{ action: 'remove', autofix: true }],
+                        errors: [{ messageId: 'removeProp' }],
+                    },
+                    {
+                        name: 'Invalid: multi-line has-actions on its own line (autofix removes entire line)',
+                        filename: 'test.vue',
+                        code: `<template>
+                            <bento-date-range-picker
+                                has-actions
+                                label="Pick"
+                            />
+                            </template>`,
+                        output: `<template>
+                            <bento-date-range-picker
+                                label="Pick"
+                            />
+                            </template>`,
+                        options: [{ action: 'remove', autofix: true }],
+                        errors: [{ messageId: 'removeProp' }],
+                    },
+                ],
+            }
+        );
+    });
+});

package/rules/deprecation-country-custom-usage/README.md

@@ -0,0 +1,151 @@
+# deprecation-country-custom-usage
+
+## Description
+
+This rule deprecates the `variant="custom"` prop and custom `label` usage across country-related components.
+These features are being removed because country components should use built-in variants (`name`, `iso`, `capital`, `phone_code`) rather than custom labels.
+
+The rule covers three components:
+
+1. **`bento-country`** — the `variant="custom"` prop and the `label` prop
+2. **`bento-dropdown-country`** — the `variant="custom"` prop and `label` keys in the `:items` array
+3. **`BentoFilterItemType.SELECT_COUNTRY`** — the `variant: 'custom'` option and `label` keys in `listboxItems`
+
+## Rule Details
+
+### `bento-country`
+
+The `label` prop only takes effect when `variant="custom"` is set. Using either one alone is dead code.
+
+#### ❌ Incorrect
+
+```html
+<!-- variant="custom" only — variant does nothing without a label -->
+<bento-country code="NL" variant="custom" />
+
+<!-- label only — label is ignored without variant="custom" -->
+<bento-country code="NL" label="Custom label" />
+
+<!-- both — deprecated, use bento-typography instead -->
+<bento-country code="NL" variant="custom" label="Custom label" />
+<bento-country code="NL" :variant="BentoCountryVariant.CUSTOM" :label="customLabel" />
+```
+
+#### ✅ Correct
+
+```html
+<!-- Use a built-in variant -->
+<bento-country code="NL" variant="name" />
+
+<!-- Use bento-typography for custom text -->
+<bento-typography el="span">Custom label</bento-typography>
+```
+
+### `bento-dropdown-country`
+
+The `label` key in items is only used when `variant="custom"` is set. Using either one alone is dead code.
+
+#### ❌ Incorrect
+
+```html
+<!-- label in items only — labels are ignored without variant="custom" -->
+<bento-dropdown-country :items="[{ value: 'NL', label: 'Custom label' }]" />
+
+<!-- variant="custom" only — variant does nothing without labels in items -->
+<bento-dropdown-country :items="[{ value: 'NL' }]" variant="custom" />
+
+<!-- both — deprecated, use bento-dropdown instead -->
+<bento-dropdown-country :items="[{ value: 'NL', label: 'Custom label' }]" variant="custom" />
+```
+
+#### ✅ Correct
+
+```html
+<!-- Use a built-in variant -->
+<bento-dropdown-country :items="[{ value: 'NL' }]" variant="name" />
+
+<!-- Use bento-dropdown for custom labels -->
+<bento-dropdown :items="[{ value: 'NL', label: 'Custom label' }]" />
+```
+
+### `SELECT_COUNTRY` filter config (`bento-filter-bar` / `bento-data-grid`)
+
+The `label` key in `listboxItems` is only used when `variant: 'custom'` is set. Using either one alone is dead code.
+
+#### ❌ Incorrect
+
+```html
+<!-- variant: 'custom' only -->
+<bento-filter-bar
+    :config="[{
+        field: 'country', label: 'Country',
+        type: BentoFilterItemType.SELECT_COUNTRY,
+        options: { listboxItems: [{ value: 'NL' }], variant: 'custom' }
+    }]"
+/>
+
+<!-- label in listboxItems only -->
+<bento-filter-bar
+    :config="[{
+        field: 'country', label: 'Country',
+        type: BentoFilterItemType.SELECT_COUNTRY,
+        options: { listboxItems: [{ value: 'NL', label: 'Custom label' }] }
+    }]"
+/>
+
+<!-- both -->
+<bento-filter-bar
+    :config="[{
+        field: 'country', label: 'Country',
+        type: BentoFilterItemType.SELECT_COUNTRY,
+        options: {
+            listboxItems: [{ value: 'NL', label: 'Custom label' }],
+            variant: 'custom'
+        }
+    }]"
+/>
+```
+
+#### ✅ Correct
+
+```html
+<!-- Use a built-in variant -->
+<bento-filter-bar
+    :config="[{
+        field: 'country', label: 'Country',
+        type: BentoFilterItemType.SELECT_COUNTRY,
+        options: { listboxItems: [{ value: 'NL' }], variant: 'name' }
+    }]"
+/>
+
+<!-- Use SELECT type for custom labels -->
+<bento-filter-bar
+    :config="[{
+        field: 'country', label: 'Country',
+        type: BentoFilterItemType.SELECT,
+        options: { listboxItems: [{ value: 'NL', label: 'Custom label' }] }
+    }]"
+/>
+```
+
+## Autofix
+
+Enable opt-in autofix via ESLint config:
+
+```js
+'@adyen/bento/deprecation-country-custom-usage': ['warn', { autofix: true }]
+```
+
+The autofix behavior depends on which deprecated props are present:
+
+| Scenario | Autofix |
+|---|---|
+| `variant="custom"` only | Removes the `variant` prop/property |
+| `label` only | Removes the `label` prop/property |
+| Both `variant="custom"` + `label` | Full replacement (see below) |
+
+### Full replacement (both present)
+
+- **`bento-country`** — replaces the entire element with `<bento-typography el="span">{{ label }}</bento-typography>`
+- **`bento-dropdown-country`** — renames the tag to `bento-dropdown` and removes the `variant` attribute
+- **`SELECT_COUNTRY` filter** — changes `type` to `BentoFilterItemType.SELECT` and removes `variant` from options