@adyen/eslint-plugin-bento 2.22.0 → 2.24.0

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

@@ -1,392 +0,0 @@
-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' } }],
-                },
-            ],
-        }
-    );
-});

package/rules/deprecation-tag-default-slot/__tests__/deprecation-tag-default-slot.vue

@@ -1,5 +0,0 @@
-<template>
-    <bento-tag>Value: {{ thisIsAValue }}</bento-tag>
-</template>
-
-<script setup></script>

package/rules/deprecation-tag-default-slot/__tests__/eslint.config.js

@@ -1,24 +0,0 @@
-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: {
-            '@adyen/bento/deprecation-tag-default-slot': 'warn',
-        },
-        files: ['**/*.vue'],
-    },
-]);

package/rules/deprecation-tag-default-slot/deprecation-tag-default-slot.integration.test.ts

@@ -1,29 +0,0 @@
-import path from 'node:path';
-import { execFileSyncEslintVueFiles } from '../../utils/exec-file-sync-eslint-vue-files';
-
-describe('@adyen/bento/deprecation-tag-default-slot', () => {
-    it('should lint with warning', () => {
-        // Load .eslintrc
-        const eslintrc = path.resolve(__dirname, '__tests__', 'eslint.config.js');
-        // Load the test file
-        const vueFile = path.resolve(__dirname, '__tests__', 'deprecation-tag-default-slot.vue');
-
-        // Execute the linter
-        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
-
-        // Expects a warning with a suggestion/fix and an error message
-        expect(result[0].warningCount).toBe(1);
-        expect(result[0].messages[0]).toStrictEqual({
-            ruleId: '@adyen/bento/deprecation-tag-default-slot',
-            severity: 1,
-            message: '"default" slot is deprecated in favor of the "label" property',
-            messageId: 'migrateDefaultSlot',
-            line: 2,
-            column: 5,
-            nodeType: 'VElement',
-            endLine: 2,
-            endColumn: 53,
-            fix: { range: [25, 63], text: ' :label="`Value: ${thisIsAValue}`" />' },
-        });
-    });
-});

package/rules/deprecation-tag-default-slot/deprecation-tag-default-slot.test.ts

@@ -1,145 +0,0 @@
-import { RuleTester } from 'eslint';
-import vueParser from 'vue-eslint-parser';
-import tsParser from '@typescript-eslint/parser';
-import deprecationTagDefaultSlot from './deprecation-tag-default-slot';
-
-const ruleTester = new RuleTester({
-    languageOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module',
-        parser: vueParser,
-        parserOptions: {
-            parser: tsParser,
-        },
-    },
-});
-
-describe('@adyen/bento/deprecation-tag-default-slot should suggest the usage of "label" property instead of "default" slot', () => {
-    ruleTester.run('deprecation-tag-default-slot', deprecationTagDefaultSlot, {
-        valid: [
-            {
-                name: 'BentoTag with "label" property',
-                filename: 'test.vue',
-                code: `
-                <template>
-                    <bento-tag label="Label text" variant="blue" />
-                </template>
-                `,
-            },
-            {
-                name: 'BentoTag with closing tag but no children',
-                filename: 'test.vue',
-                code: `
-                <template>
-                    <bento-tag label="Label text" variant="blue" />
-                `,
-            },
-            {
-                name: 'BentoTag with expression as value for "label" property',
-                filename: 'test.vue',
-                code: `
-                <template>
-                    <bento-tag :label="thisIsMyVariableWithText" variant="blue" />
-                `,
-            },
-        ],
-        invalid: [
-            {
-                name: 'BentoTag with VText child',
-                code: `
-                    <template>
-                        <bento-tag variant="blue">
-                            Label text
-                        </bento-tag>
-                    </template>
-                    `,
-                output: `
-                    <template>
-                        <bento-tag variant="blue" label="Label text" />
-                    </template>
-                    `,
-                errors: [{ message: '"default" slot is deprecated in favor of the "label" property' }],
-            },
-            {
-                name: 'BentoTag with VText child and no attributes',
-                code: `
-                        <template>
-                            <bento-tag>
-                                Label text
-                            </bento-tag>
-                        </template>
-                        `,
-                output: `
-                        <template>
-                            <bento-tag label="Label text" />
-                        </template>
-                        `,
-                errors: [{ message: '"default" slot is deprecated in favor of the "label" property' }],
-            },
-            {
-                name: 'BentoTag with property as child',
-                code: `
-                        <template>
-                            <bento-tag>
-                                {{ thisIsMyVariableWithText }}
-                            </bento-tag>
-                        </template>
-                        `,
-                output: `
-                        <template>
-                            <bento-tag :label="thisIsMyVariableWithText" />
-                        </template>
-                        `,
-                errors: [{ message: '"default" slot is deprecated in favor of the "label" property' }],
-            },
-            {
-                name: 'BentoTag with text and property as child',
-                code: `
-                        <template>
-                            <bento-tag>
-                                Value: {{ thisIsAValue }}
-                            </bento-tag>
-                        </template>
-                        `,
-                output: `
-                        <template>
-                            <bento-tag :label="\`Value: \${thisIsAValue}\`" />
-                        </template>
-                        `,
-                errors: [{ message: '"default" slot is deprecated in favor of the "label" property' }],
-            },
-            {
-                name: 'BentoTag with text and expression with a call',
-                code: `
-                        <template>
-                            <bento-tag>
-                                Value: {{ thisIsAValue() }}
-                            </bento-tag>
-                        </template>
-                        `,
-                output: `
-                        <template>
-                            <bento-tag :label="\`Value: \${thisIsAValue()}\`" />
-                        </template>
-                        `,
-                errors: [{ message: '"default" slot is deprecated in favor of the "label" property' }],
-            },
-            {
-                name: 'BentoTag with multiple expressions',
-                code: `
-                        <template>
-                            <bento-tag>
-                                {{ expression }} {{ thisIsAValue() }}
-                            </bento-tag>
-                        </template>
-                        `,
-                output: `
-                        <template>
-                            <bento-tag :label="\`\${expression} \${thisIsAValue()}\`" />
-                        </template>
-                        `,
-                errors: [{ message: '"default" slot is deprecated in favor of the "label" property' }],
-            },
-        ],
-    });
-});

package/rules/tailwind-v3-to-bento/__tests__/eslint.config.js

@@ -1,24 +0,0 @@
-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: {
-            '@adyen/bento/tailwind-v3-to-bento': 'warn',
-        },
-        files: ['**/*.vue'],
-    },
-]);

package/rules/tailwind-v3-to-bento/__tests__/tailwind-v3-to-bento.vue

@@ -1,15 +0,0 @@
-<template>
-    <div>
-        <div class="p-4 m-2 gap-8"></div>
-        <div class="rounded rounded-md rounded-lg"></div>
-        <div class="border border-2 border-4"></div>
-        <div class="shadow shadow-sm shadow-lg"></div>
-        <div class="sm:p-4 lg:p-8 2xl:m-2"></div>
-        <div class="text-red-500 bg-gray-100 border-gray-300"></div>
-        <div class="text-sm font-bold leading-tight tracking-wide"></div>
-        <div class="p-4 rounded-md shadow-lg sm:p-8 text-red-500"></div>
-        <div class="flex items-center justify-between"></div>
-    </div>
-</template>
-
-<script setup></script>

package/rules/tailwind-v3-to-bento/tailwind-v3-to-bento.integration.test.ts

@@ -1,29 +0,0 @@
-import path from 'node:path';
-import { execFileSyncEslintVueFiles } from '../../utils/exec-file-sync-eslint-vue-files';
-
-describe('@adyen/bento/tailwind-v3-to-bento', () => {
-    it('should lint with warning', () => {
-        const eslintrc = path.resolve(__dirname, '__tests__', 'eslint.config.js');
-        const vueFile = path.resolve(__dirname, '__tests__', 'tailwind-v3-to-bento.vue');
-
-        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
-
-        // 7 fixable warnings + 4 typography warnings = 8 total messages (typography classes are per-class)
-        expect(result[0].warningCount).toBeGreaterThan(0);
-
-        // Verify spacing replacement
-        const spacingMessage = result[0].messages.find(
-            (m: { ruleId: string; line: number }) => m.ruleId === '@adyen/bento/tailwind-v3-to-bento' && m.line === 3
-        );
-        expect(spacingMessage).toBeDefined();
-        expect(spacingMessage.messageId).toBe('updateTailwindClass');
-
-        // Verify typography warning includes suggested bento-typography usage
-        const typographyMessage = result[0].messages.find(
-            (m: { messageId: string }) => m.messageId === 'removeTailwindTypography'
-        );
-        expect(typographyMessage).toBeDefined();
-        expect(typographyMessage.message).toContain('<bento-typography');
-        expect(typographyMessage.message).toContain('variant=');
-    });
-});