@adyen/eslint-plugin-bento 2.7.7 → 2.9.0

package/rules/deprecation-filter-bar-deprecated-props/deprecation-filter-bar-deprecated-props.test.ts

@@ -0,0 +1,421 @@
+import { RuleTester } from 'eslint';
+import vueParser from 'vue-eslint-parser';
+import tsParser from '@typescript-eslint/parser';
+import deprecationFilterBarDeprecatedProps from './deprecation-filter-bar-deprecated-props';
+
+const ruleTester = new RuleTester({
+    languageOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        parser: vueParser,
+        parserOptions: {
+            parser: tsParser,
+        },
+    },
+});
+
+describe('@adyen/bento/deprecation-filter-bar-deprecated-props', () => {
+    ruleTester.run('deprecation-filter-bar-deprecated-props', deprecationFilterBarDeprecatedProps, {
+        valid: [
+            {
+                name: 'Valid: bento-filter-bar with config prop (no value)',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-filter-bar :config="config" :filter-values="values" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid: filter config item without deprecated value property',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{ field: 'name', label: 'Name', type: 'BentoInputFilter' }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+            },
+            {
+                name: 'Valid: filter config options without deprecated messages keys',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'status',
+                    label: 'Status',
+                    type: 'BentoSelectFilter',
+                    options: { listboxItems: [] },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+            },
+            {
+                name: 'Valid: computed property key matching deprecated name (no false positive)',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const key = 'value';
+                const config = [{ field: 'x', type: 'BentoInputFilter', [key]: 'test' }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+            },
+            {
+                name: 'Valid: spread in options (no crash)',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const defaults = {};
+                const config = [{
+                    field: 'x',
+                    type: 'BentoSelectFilter',
+                    options: { ...defaults, listboxItems: [] },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+            },
+            {
+                name: 'Valid: bento-data-grid with filters without deprecated props',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const filters = [{ field: 'x', label: 'X', type: 'BentoInputFilter' }];
+                </script>
+                <template><bento-data-grid :filters="filters" /></template>
+                `,
+            },
+            {
+                name: 'Valid: unrelated object with options.messages (no false positive)',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const unrelated = { options: { messages: {} } };
+                </script>
+                <template><div /></template>
+                `,
+            },
+            {
+                name: 'Valid: unrelated object with value property (no false positive)',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const obj = { value: 'test', options: { messages: {} } };
+                </script>
+                <template><div /></template>
+                `,
+            },
+        ],
+        invalid: [
+            // Direct "value" prop on bento-filter-bar
+            {
+                name: 'Invalid: static value prop on bento-filter-bar',
+                filename: 'test.vue',
+                code: `<template><bento-filter-bar value="val" /></template>`,
+                errors: [{ messageId: 'deprecationValue' }],
+            },
+            {
+                name: 'Invalid: dynamic value prop on bento-filter-bar',
+                filename: 'test.vue',
+                code: `<template><bento-filter-bar :value="filters" /></template>`,
+                errors: [{ messageId: 'deprecationValue' }],
+            },
+            {
+                name: 'Invalid: v-model on bento-filter-bar',
+                filename: 'test.vue',
+                code: `<template><bento-filter-bar v-model="filters" /></template>`,
+                errors: [{ messageId: 'deprecationValue' }],
+            },
+            // "value" inside filter config items (script)
+            {
+                name: 'Invalid: value property in filter config item (script)',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'name',
+                    type: 'BentoInputFilter',
+                    value: 'test',
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [{ messageId: 'deprecationConfigValue' }],
+            },
+            // "value" inside filter config items (inline template)
+            {
+                name: 'Invalid: value property in filter config item (inline template)',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-filter-bar :config="[{ field: 'name', type: 'BentoInputFilter', value: 'test' }]" />
+                </template>
+                `,
+                errors: [{ messageId: 'deprecationConfigValue' }],
+            },
+            // Deprecated messages option
+            {
+                name: 'Invalid: messages option in filter config',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'status',
+                    type: 'BentoSelectFilter',
+                    options: { messages: { en: { persistentButtonLabelPartiallySelected: 'x' } }, listboxItems: [] },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [{ messageId: 'deprecationOption', data: { key: 'messages' } }],
+            },
+            // Deprecated messagesPersistentButtonLabelPartiallySelectedKey
+            {
+                name: 'Invalid: messagesPersistentButtonLabelPartiallySelectedKey option',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'status',
+                    type: 'BentoSelectFilter',
+                    options: { messagesPersistentButtonLabelPartiallySelectedKey: 'customKey', listboxItems: [] },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [
+                    {
+                        messageId: 'deprecationOption',
+                        data: { key: 'messagesPersistentButtonLabelPartiallySelectedKey' },
+                    },
+                ],
+            },
+            // Deprecated messagesPersistentButtonLabelAllSelectedKey
+            {
+                name: 'Invalid: messagesPersistentButtonLabelAllSelectedKey option',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'status',
+                    type: 'BentoSelectFilter',
+                    options: { messagesPersistentButtonLabelAllSelectedKey: 'customKey', listboxItems: [] },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [
+                    { messageId: 'deprecationOption', data: { key: 'messagesPersistentButtonLabelAllSelectedKey' } },
+                ],
+            },
+            // All 3 deprecated options together
+            {
+                name: 'Invalid: all deprecated options in one config',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'status',
+                    type: 'BentoSelectFilter',
+                    options: {
+                        messages: {},
+                        messagesPersistentButtonLabelPartiallySelectedKey: 'k1',
+                        messagesPersistentButtonLabelAllSelectedKey: 'k2',
+                        listboxItems: [],
+                    },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [
+                    { messageId: 'deprecationOption', data: { key: 'messages' } },
+                    {
+                        messageId: 'deprecationOption',
+                        data: { key: 'messagesPersistentButtonLabelPartiallySelectedKey' },
+                    },
+                    { messageId: 'deprecationOption', data: { key: 'messagesPersistentButtonLabelAllSelectedKey' } },
+                ],
+            },
+            // String literal key (edge case)
+            {
+                name: 'Invalid: string literal key for deprecated option',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'status',
+                    type: 'BentoSelectFilter',
+                    options: { 'messages': {} },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [{ messageId: 'deprecationOption', data: { key: 'messages' } }],
+            },
+            // bento-data-grid filters with deprecated value
+            {
+                name: 'Invalid: value in data-grid filter config item',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const filters = [{
+                    field: 'name',
+                    type: 'BentoInputFilter',
+                    value: 'test',
+                }];
+                </script>
+                <template><bento-data-grid :filters="filters" /></template>
+                `,
+                errors: [{ messageId: 'deprecationConfigValue' }],
+            },
+            // bento-data-grid filters with deprecated options
+            {
+                name: 'Invalid: deprecated options in data-grid filter config',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const filters = [{
+                    field: 'status',
+                    type: 'BentoSelectFilter',
+                    options: { messages: {}, listboxItems: [] },
+                }];
+                </script>
+                <template><bento-data-grid :filters="filters" /></template>
+                `,
+                errors: [{ messageId: 'deprecationOption', data: { key: 'messages' } }],
+            },
+            // Inline template with deprecated options
+            {
+                name: 'Invalid: deprecated options in inline template config',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-filter-bar :config="[{
+                        field: 'status',
+                        type: 'BentoSelectFilter',
+                        options: { messages: {}, listboxItems: [] },
+                    }]" />
+                </template>
+                `,
+                errors: [{ messageId: 'deprecationOption', data: { key: 'messages' } }],
+            },
+            // Spread + deprecated key combined
+            {
+                name: 'Invalid: spread + deprecated option combined',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const defaults = {};
+                const config = [{
+                    field: 'status',
+                    type: 'BentoSelectFilter',
+                    options: { ...defaults, messages: {} },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [{ messageId: 'deprecationOption', data: { key: 'messages' } }],
+            },
+        ],
+    });
+
+    /* ------------------------------------------------ */
+    /* AUTOFIX TESTS                                    */
+    /* ------------------------------------------------ */
+    ruleTester.run('deprecation-filter-bar-deprecated-props (autofix enabled)', deprecationFilterBarDeprecatedProps, {
+        valid: [
+            {
+                name: 'Valid: no deprecated props (autofix enabled)',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `<template><bento-filter-bar :config="config" /></template>`,
+            },
+        ],
+        invalid: [
+            {
+                name: 'Autofix: removes static value prop from bento-filter-bar',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `<template><bento-filter-bar value="val" /></template>`,
+                output: `<template><bento-filter-bar  /></template>`,
+                errors: [{ messageId: 'deprecationValue' }],
+            },
+            {
+                name: 'Autofix: removes dynamic value prop from bento-filter-bar',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `<template><bento-filter-bar :value="filters" /></template>`,
+                output: `<template><bento-filter-bar  /></template>`,
+                errors: [{ messageId: 'deprecationValue' }],
+            },
+            {
+                name: 'Autofix: removes v-model from bento-filter-bar',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `<template><bento-filter-bar v-model="filters" /></template>`,
+                output: `<template><bento-filter-bar  /></template>`,
+                errors: [{ messageId: 'deprecationValue' }],
+            },
+            {
+                name: 'Autofix: removes value from filter config item',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'name',
+                    type: 'BentoInputFilter',
+                    value: 'test',
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                output: `
+                <script setup>
+                const config = [{
+                    field: 'name',
+                    type: 'BentoInputFilter',
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [{ messageId: 'deprecationConfigValue' }],
+            },
+            {
+                name: 'Autofix: removes deprecated messages option from filter config',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'status',
+                    type: 'BentoSelectFilter',
+                    options: { messages: {}, listboxItems: [] },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                output: `
+                <script setup>
+                const config = [{
+                    field: 'status',
+                    type: 'BentoSelectFilter',
+                    options: { listboxItems: [] },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [{ messageId: 'deprecationOption', data: { key: 'messages' } }],
+            },
+            {
+                name: 'Autofix: does not fix when autofix is false',
+                filename: 'test.vue',
+                options: [{ autofix: false }],
+                code: `<template><bento-filter-bar value="val" other="x" /></template>`,
+                errors: [{ messageId: 'deprecationValue' }],
+            },
+        ],
+    });
+});

package/rules/tailwind-v3-to-bento/README.md

@@ -0,0 +1,114 @@
+# @adyen/bento/tailwind-v3-to-bento
+
+> Replace Tailwind CSS v3 utility classes with Bento design token equivalents.
+
+- This rule is included in the `plugin:@adyen/bento/recommended` configuration
+- The `--fix` option can automatically fix most problems reported by this rule
+
+This rule helps developers migrate from Tailwind CSS v3 default utility classes to Bento design token equivalents. It
+covers spacing, border radius, border width, box shadows, breakpoints, and colors. Typography classes are flagged but
+not auto-fixed — use the `bento-typography` component instead.
+
+## Auto-fixable mappings
+
+### Spacing
+
+| Before (Tailwind 3) | After (Bento) | Value |
+|---|---|---|
+| `p-0` | `p-000` | 0px |
+| `p-0.5` | `p-010` | 2px |
+| `p-1` | `p-020` | 4px |
+| `p-1.5` | `p-030` | 6px |
+| `p-2` | `p-040` | 8px |
+| `p-2.5` | `p-050` | 10px |
+| `p-3` | `p-060` | 12px |
+| `p-4` | `p-070` | 16px |
+| `p-5` | `p-080` | 20px |
+| `p-6` | `p-090` | 24px |
+| `p-8` | `p-100` | 32px |
+| `p-10` | `p-110` | 40px |
+| `p-12` | `p-120` | 48px |
+| `p-14` | `p-130` | 56px |
+| `p-16` | `p-140` | 64px |
+
+The same mapping applies to all spacing utilities (`m-*`, `mx-*`, `my-*`, `gap-*`, `space-x-*`, `space-y-*`, `w-*`,
+`h-*`, `inset-*`, `top-*`, `right-*`, `bottom-*`, `left-*`, etc.).
+
+### Border radius
+
+| Before | After | Value |
+|---|---|---|
+| `rounded` | `rounded-s` | 4px |
+| `rounded-sm` | `rounded-xs` | 2px |
+| `rounded-md` | `rounded-m` | 8px |
+| `rounded-lg` | `rounded-l` | 12px |
+| `rounded-xl` | `rounded-xl` | 24px |
+
+### Border width
+
+| Before | After | Value |
+|---|---|---|
+| `border` | `border-s` | 1px |
+| `border-2` | `border-m` | 2px |
+| `border-4` | `border-l` | 3px |
+
+### Box shadows
+
+| Before | After |
+|---|---|
+| `shadow` | `shadow-medium` |
+| `shadow-sm` | `shadow-low` |
+| `shadow-md` | `shadow-medium` |
+| `shadow-lg` | `shadow-high` |
+| `shadow-xl` | `shadow-high` |
+| `shadow-2xl` | `shadow-high` |
+
+### Breakpoints
+
+| Before | After | Value |
+|---|---|---|
+| `sm:` | `s-min:` | min-width: 376px |
+| `md:` | `m-min:` | min-width: 500px |
+| `lg:` | `l-min:` | min-width: 768px |
+| `xl:` | `xl-min:` | min-width: 1280px |
+| `2xl:` | `xxl:` | min-width: 1536px |
+
+### Colors (best-effort)
+
+Color mappings are best-effort since Tailwind 3 uses raw color values while Bento uses semantic tokens. Examples:
+
+| Before | After |
+|---|---|
+| `text-red-500` | `text-label-critical` |
+| `text-green-500` | `text-label-success` |
+| `text-blue-500` | `text-label-highlight` |
+| `text-gray-500` | `text-label-secondary` |
+| `bg-gray-100` | `bg-secondary` |
+| `bg-red-100` | `bg-critical-weak` |
+| `border-gray-300` | `border-outline-primary` |
+
+## Warn only (no auto-fix)
+
+### Typography
+
+Typography classes are flagged with a warning but not auto-fixed. Use the `bento-typography` component instead.
+
+Detected patterns: `text-sm`, `text-lg`, `font-bold`, `font-sans`, `leading-tight`, `tracking-wide`, etc.
+
+## ✗ BAD
+
+```html
+<template>
+    <div class="p-4 m-2 rounded-md shadow-lg sm:p-8 text-red-500">Content</div>
+    <p class="text-sm font-bold leading-tight">Hello</p>
+</template>
+```
+
+## ✓ GOOD
+
+```html
+<template>
+    <div class="p-070 m-040 rounded-m shadow-high s-min:p-100 text-label-critical">Content</div>
+    <bento-typography variant="body" stronger>Hello</bento-typography>
+</template>
+```

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,15 @@
+<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

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