@adyen/eslint-plugin-bento 2.8.0 → 2.10.0

package/rules/deprecation-input-filter-dropdown-options/README.md

@@ -0,0 +1,44 @@
+# deprecation-input-filter-dropdown-options
+
+Deprecates usage of `dropdown`, `dropdownPosition`, and `variant` properties inside `BentoInputFilterOptions`.
+
+These properties were used to configure the input filter as a dropdown variant. They should be replaced by using
+`BentoFilterItemType.INPUT_DROPDOWN` instead of `BentoFilterItemType.INPUT`.
+
+## Examples
+
+### Invalid
+
+```vue
+<script setup>
+    const config = [
+        {
+            field: 'name',
+            label: 'Name',
+            type: BentoFilterItemType.INPUT,
+            options: { dropdown: { items: [] }, dropdownPosition: 'end', variant: 'dropdown' },
+        },
+    ];
+</script>
+<template>
+    <bento-filter-bar :config="config" />
+</template>
+```
+
+### Valid
+
+```vue
+<script setup>
+    const config = [
+        {
+            field: 'name',
+            label: 'Name',
+            type: BentoFilterItemType.INPUT_DROPDOWN,
+            options: { dropdown: { items: [] }, dropdownPosition: 'end' },
+        },
+    ];
+</script>
+<template>
+    <bento-filter-bar :config="config" />
+</template>
+```

package/rules/deprecation-input-filter-dropdown-options/__tests__/deprecation-input-filter-dropdown-options.vue

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <bento-filter-bar :config="filterBarConfig" />
+        <bento-data-grid :filters="dataGridFilters" />
+        <bento-filter-bar
+            :config="[
+                {
+                    field: 'inline',
+                    label: 'Inline',
+                    type: BentoFilterItemType.INPUT,
+                    options: { dropdown: { items: [] } },
+                },
+            ]"
+        />
+        <bento-data-grid
+            :filters="[
+                {
+                    field: 'inlineGrid',
+                    label: 'Inline Grid',
+                    type: BentoFilterItemType.INPUT,
+                    options: { variant: 'dropdown' },
+                },
+            ]"
+        />
+    </div>
+</template>
+
+<script setup>
+    const filterBarConfig = [
+        {
+            field: 'name',
+            label: 'Name',
+            type: BentoFilterItemType.INPUT,
+            options: { dropdown: { items: [] }, dropdownPosition: 'end', variant: 'dropdown' },
+        },
+    ];
+
+    const dataGridFilters = [
+        {
+            field: 'status',
+            label: 'Status',
+            type: BentoFilterItemType.INPUT,
+            options: { dropdown: { items: [] } },
+        },
+    ];
+</script>

package/rules/deprecation-input-filter-dropdown-options/__tests__/eslint.config.js

@@ -0,0 +1,26 @@
+// 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-input-filter-dropdown-options': 'warn',
+        },
+        files: ['**/*.vue'],
+    },
+]);

package/rules/deprecation-input-filter-dropdown-options/deprecation-input-filter-dropdown-options.integration.test.ts

@@ -0,0 +1,27 @@
+import path from 'node:path';
+import { execFileSyncEslintVueFiles } from '../../utils/exec-file-sync-eslint-vue-files';
+
+describe('@adyen/bento/deprecation-input-filter-dropdown-options', () => {
+    it('should lint with warning', () => {
+        const eslintrc = path.resolve(__dirname, '__tests__', 'eslint.config.js');
+        const vueFile = path.resolve(__dirname, '__tests__', 'deprecation-input-filter-dropdown-options.vue');
+
+        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
+
+        // 3 from filterBarConfig (dropdown, dropdownPosition, variant)
+        // + 1 from dataGridFilters (dropdown)
+        // + 1 from inline bento-filter-bar (dropdown)
+        // + 1 from inline bento-data-grid (variant)
+        expect(result[0].warningCount).toBe(6);
+
+        expect(result[0].messages).toEqual(
+            expect.arrayContaining([
+                expect.objectContaining({
+                    ruleId: '@adyen/bento/deprecation-input-filter-dropdown-options',
+                    severity: 1,
+                    messageId: 'deprecation',
+                }),
+            ])
+        );
+    });
+});

package/rules/deprecation-input-filter-dropdown-options/deprecation-input-filter-dropdown-options.js

@@ -0,0 +1,135 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+/**
+ * @typedef {import('eslint-plugin-vue/lib/utils').RuleModule} RuleModule
+ */
+
+const VueUtils = require('eslint-plugin-vue/lib/utils');
+
+const DEPRECATED_KEYS = ['dropdown', 'dropdownPosition', 'variant'];
+
+/** @type {RuleModule} */
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description:
+                'Deprecates usage of "dropdown", "dropdownPosition", and "variant" properties inside BentoInputFilterOptions. Use BentoFilterItemType.INPUT_DROPDOWN instead.',
+            category: 'Deprecations',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/deprecation-input-filter-dropdown-options/README.md',
+            recommended: true,
+        },
+        messages: {
+            deprecation:
+                'The "{{ key }}" property in BentoInputFilterOptions is deprecated. Use "BentoFilterItemType.INPUT_DROPDOWN" instead of "BentoFilterItemType.INPUT".',
+        },
+        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;
+
+        function getStaticPropertyName(prop) {
+            if (prop.type !== 'Property' || prop.computed) {
+                return null;
+            }
+            return prop.key.type === 'Identifier'
+                ? prop.key.name
+                : prop.key.type === 'Literal'
+                  ? String(prop.key.value)
+                  : null;
+        }
+
+        function reportDeprecatedKeys(node, typeValueNode) {
+            if (!node || node.type !== 'ObjectExpression') {
+                return;
+            }
+
+            for (const prop of node.properties) {
+                const keyName = getStaticPropertyName(prop);
+
+                if (keyName && DEPRECATED_KEYS.includes(keyName)) {
+                    context.report({
+                        node: prop.key,
+                        messageId: 'deprecation',
+                        data: { key: keyName },
+                        ...(autofix && {
+                            fix(fixer) {
+                                if (typeValueNode.type === 'MemberExpression') {
+                                    return fixer.replaceText(typeValueNode.property, 'INPUT_DROPDOWN');
+                                }
+                                return fixer.replaceText(typeValueNode, "'BentoInputWithDropdownFilter'");
+                            },
+                        }),
+                    });
+                }
+            }
+        }
+
+        function isInputFilterType(valueNode) {
+            if (
+                valueNode.type === 'MemberExpression' &&
+                valueNode.object.type === 'Identifier' &&
+                valueNode.object.name === 'BentoFilterItemType' &&
+                valueNode.property.type === 'Identifier' &&
+                valueNode.property.name === 'INPUT'
+            ) {
+                return true;
+            }
+
+            if (valueNode.type === 'Literal' && valueNode.value === 'BentoInputFilter') {
+                return true;
+            }
+
+            return false;
+        }
+
+        function checkFilterConfigObject(node) {
+            if (node.type !== 'ObjectExpression') {
+                return;
+            }
+
+            let typeValueNode = null;
+            let optionsNode = null;
+
+            for (const prop of node.properties) {
+                const keyName = getStaticPropertyName(prop);
+
+                if (keyName === 'type' && isInputFilterType(prop.value)) {
+                    typeValueNode = prop.value;
+                }
+
+                if (keyName === 'options' && prop.value.type === 'ObjectExpression') {
+                    optionsNode = prop.value;
+                }
+            }
+
+            if (typeValueNode && optionsNode) {
+                reportDeprecatedKeys(optionsNode, typeValueNode);
+            }
+        }
+
+        const visitor = {
+            ObjectExpression(node) {
+                checkFilterConfigObject(node);
+            },
+        };
+
+        return VueUtils.defineTemplateBodyVisitor(context, visitor, visitor);
+    },
+};

package/rules/deprecation-input-filter-dropdown-options/deprecation-input-filter-dropdown-options.test.ts

@@ -0,0 +1,392 @@
+import { RuleTester } from 'eslint';
+import vueParser from 'vue-eslint-parser';
+import tsParser from '@typescript-eslint/parser';
+import deprecationInputFilterDropdownOptions from './deprecation-input-filter-dropdown-options';
+
+const ruleTester = new RuleTester({
+    languageOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        parser: vueParser,
+        parserOptions: {
+            parser: tsParser,
+        },
+    },
+});
+
+describe('@adyen/bento/deprecation-input-filter-dropdown-options', () => {
+    ruleTester.run('deprecation-input-filter-dropdown-options (no autofix)', deprecationInputFilterDropdownOptions, {
+        valid: [
+            {
+                name: 'Valid: INPUT filter without deprecated options',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'name',
+                    label: 'Name',
+                    type: BentoFilterItemType.INPUT,
+                    options: { placeholder: 'Search...' },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+            },
+            {
+                name: 'Valid: INPUT_DROPDOWN filter with dropdown options',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'name',
+                    label: 'Name',
+                    type: BentoFilterItemType.INPUT_DROPDOWN,
+                    options: { dropdown: { items: [] }, dropdownPosition: 'start' },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+            },
+            {
+                name: 'Valid: SELECT filter with different options',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'status',
+                    label: 'Status',
+                    type: BentoFilterItemType.SELECT,
+                    options: { listboxItems: [] },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+            },
+            {
+                name: 'Valid: INPUT filter without deprecated options in bento-data-grid',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const filters = [{
+                    field: 'name',
+                    label: 'Name',
+                    type: BentoFilterItemType.INPUT,
+                    options: { placeholder: 'Search...' },
+                }];
+                </script>
+                <template><bento-data-grid :filters="filters" /></template>
+                `,
+            },
+            {
+                name: 'Valid: INPUT filter with computed property key in options (not a static key)',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const key = 'dropdown';
+                const config = [{
+                    type: BentoFilterItemType.INPUT,
+                    options: { [key]: { items: [] } },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+            },
+            {
+                name: 'Valid: config object with spread properties',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const base = { field: 'name' };
+                const config = [{
+                    ...base,
+                    type: BentoFilterItemType.INPUT,
+                    options: { placeholder: 'Search...' },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+            },
+            {
+                name: 'Valid: config object with string literal keys and non-INPUT type',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    'type': BentoFilterItemType.SELECT,
+                    'options': { dropdown: true },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+            },
+        ],
+        invalid: [
+            {
+                name: 'Invalid: INPUT filter with dropdown option',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'name',
+                    label: 'Name',
+                    type: BentoFilterItemType.INPUT,
+                    options: { dropdown: { items: [] } },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [{ messageId: 'deprecation', data: { key: 'dropdown' } }],
+            },
+            {
+                name: 'Invalid: INPUT filter with dropdownPosition option',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'name',
+                    label: 'Name',
+                    type: BentoFilterItemType.INPUT,
+                    options: { dropdownPosition: 'end' },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [{ messageId: 'deprecation', data: { key: 'dropdownPosition' } }],
+            },
+            {
+                name: 'Invalid: INPUT filter with variant option',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'name',
+                    label: 'Name',
+                    type: BentoFilterItemType.INPUT,
+                    options: { variant: 'dropdown' },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [{ messageId: 'deprecation', data: { key: 'variant' } }],
+            },
+            {
+                name: 'Invalid: INPUT filter with all three deprecated options',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'name',
+                    label: 'Name',
+                    type: BentoFilterItemType.INPUT,
+                    options: { dropdown: { items: [] }, dropdownPosition: 'end', variant: 'dropdown' },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [
+                    { messageId: 'deprecation', data: { key: 'dropdown' } },
+                    { messageId: 'deprecation', data: { key: 'dropdownPosition' } },
+                    { messageId: 'deprecation', data: { key: 'variant' } },
+                ],
+            },
+            {
+                name: 'Invalid: INPUT filter using string literal type',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'name',
+                    label: 'Name',
+                    type: 'BentoInputFilter',
+                    options: { dropdown: { items: [] } },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [{ messageId: 'deprecation', data: { key: 'dropdown' } }],
+            },
+            {
+                name: 'Invalid: INPUT filter with deprecated options defined inline in template',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-filter-bar :config="[{
+                        field: 'name',
+                        label: 'Name',
+                        type: BentoFilterItemType.INPUT,
+                        options: { dropdown: { items: [] }, variant: 'dropdown' },
+                    }]" />
+                </template>
+                `,
+                errors: [
+                    { messageId: 'deprecation', data: { key: 'dropdown' } },
+                    { messageId: 'deprecation', data: { key: 'variant' } },
+                ],
+            },
+            {
+                name: 'Invalid: INPUT filter with string literal keys',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    'type': 'BentoInputFilter',
+                    'options': { 'dropdown': { items: [] } },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [{ messageId: 'deprecation', data: { key: 'dropdown' } }],
+            },
+            {
+                name: 'Invalid: INPUT filter with spread and deprecated options',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const base = { field: 'name' };
+                const config = [{
+                    ...base,
+                    type: BentoFilterItemType.INPUT,
+                    options: { ...base, dropdown: { items: [] } },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [{ messageId: 'deprecation', data: { key: 'dropdown' } }],
+            },
+            {
+                name: 'Invalid: INPUT filter with dropdown option in bento-data-grid filters',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const filters = [{
+                    field: 'name',
+                    label: 'Name',
+                    type: BentoFilterItemType.INPUT,
+                    options: { dropdown: { items: [] }, variant: 'dropdown' },
+                }];
+                </script>
+                <template><bento-data-grid :filters="filters" /></template>
+                `,
+                errors: [
+                    { messageId: 'deprecation', data: { key: 'dropdown' } },
+                    { messageId: 'deprecation', data: { key: 'variant' } },
+                ],
+            },
+        ],
+    });
+
+    ruleTester.run(
+        'deprecation-input-filter-dropdown-options (autofix enabled)',
+        deprecationInputFilterDropdownOptions,
+        {
+            valid: [
+                {
+                    name: 'Valid: INPUT filter without deprecated options (autofix enabled)',
+                    filename: 'test.vue',
+                    options: [{ autofix: true }],
+                    code: `
+                <script setup>
+                const config = [{
+                    type: BentoFilterItemType.INPUT,
+                    options: { placeholder: 'Search...' },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                },
+            ],
+            invalid: [
+                {
+                    name: 'Autofix: changes BentoFilterItemType.INPUT to INPUT_DROPDOWN',
+                    filename: 'test.vue',
+                    options: [{ autofix: true }],
+                    code: `
+                <script setup>
+                const config = [{
+                    type: BentoFilterItemType.INPUT,
+                    options: { dropdown: { items: [] } },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                    output: `
+                <script setup>
+                const config = [{
+                    type: BentoFilterItemType.INPUT_DROPDOWN,
+                    options: { dropdown: { items: [] } },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                    errors: [{ messageId: 'deprecation', data: { key: 'dropdown' } }],
+                },
+                {
+                    name: 'Autofix: changes string literal type to BentoInputWithDropdownFilter',
+                    filename: 'test.vue',
+                    options: [{ autofix: true }],
+                    code: `
+                <script setup>
+                const config = [{
+                    type: 'BentoInputFilter',
+                    options: { dropdown: { items: [] } },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                    output: `
+                <script setup>
+                const config = [{
+                    type: 'BentoInputWithDropdownFilter',
+                    options: { dropdown: { items: [] } },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                    errors: [{ messageId: 'deprecation', data: { key: 'dropdown' } }],
+                },
+                {
+                    name: 'Autofix: fixes type with multiple deprecated options',
+                    filename: 'test.vue',
+                    options: [{ autofix: true }],
+                    code: `
+                <script setup>
+                const config = [{
+                    type: BentoFilterItemType.INPUT,
+                    options: { dropdown: { items: [] }, variant: 'dropdown' },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                    output: `
+                <script setup>
+                const config = [{
+                    type: BentoFilterItemType.INPUT_DROPDOWN,
+                    options: { dropdown: { items: [] }, variant: 'dropdown' },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                    errors: [
+                        { messageId: 'deprecation', data: { key: 'dropdown' } },
+                        { messageId: 'deprecation', data: { key: 'variant' } },
+                    ],
+                },
+                {
+                    name: 'Autofix: does not apply fix when autofix is false',
+                    filename: 'test.vue',
+                    options: [{ autofix: false }],
+                    code: `
+                <script setup>
+                const config = [{
+                    type: BentoFilterItemType.INPUT,
+                    options: { dropdown: { items: [] } },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                    errors: [{ messageId: 'deprecation', data: { key: 'dropdown' } }],
+                },
+            ],
+        }
+    );
+});