@adyen/eslint-plugin-bento 2.9.0 → 2.11.0

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

package/rules/deprecation-country-custom-usage/__tests__/deprecation-country-custom-usage.vue

@@ -0,0 +1,93 @@
+<template>
+    <div>
+        <!-- bento-country: variant="custom" only (warn) -->
+        <bento-country code="NL" variant="custom" />
+        <!-- bento-country: label only (warn) -->
+        <bento-country code="NL" label="Custom label" />
+        <!-- bento-country: both (warn) -->
+        <bento-country code="NL" variant="custom" label="Custom label" />
+
+        <!-- bento-dropdown-country: label in items only (warn) -->
+        <bento-dropdown-country :items="[{ value: 'NL', label: 'Custom label' }]" />
+        <!-- bento-dropdown-country: variant="custom" only (warn) -->
+        <bento-dropdown-country :items="[{ value: 'NL' }]" variant="custom" />
+        <!-- bento-dropdown-country: both (warn) -->
+        <bento-dropdown-country :items="[{ value: 'NL', label: 'Custom label' }]" variant="custom" />
+
+        <!-- SELECT_COUNTRY filter-bar: label only (warn) -->
+        <bento-filter-bar
+            :config="[
+                {
+                    field: 'c',
+                    label: 'C',
+                    type: BentoFilterItemType.SELECT_COUNTRY,
+                    options: { listboxItems: [{ value: 'NL', label: 'Custom label' }] },
+                },
+            ]"
+        />
+        <!-- SELECT_COUNTRY filter-bar: variant="custom" only (warn) -->
+        <bento-filter-bar
+            :config="[
+                {
+                    field: 'c',
+                    label: 'C',
+                    type: BentoFilterItemType.SELECT_COUNTRY,
+                    options: { listboxItems: [{ value: 'NL' }], variant: 'custom' },
+                },
+            ]"
+        />
+        <!-- SELECT_COUNTRY filter-bar: both (warn x2) -->
+        <bento-filter-bar
+            :config="[
+                {
+                    field: 'c',
+                    label: 'C',
+                    type: BentoFilterItemType.SELECT_COUNTRY,
+                    options: { listboxItems: [{ value: 'NL', label: 'Custom label' }], variant: 'custom' },
+                },
+            ]"
+        />
+
+        <!-- SELECT_COUNTRY data-grid: label only (warn) -->
+        <bento-data-grid
+            :filters="[
+                {
+                    field: 'c',
+                    label: 'C',
+                    type: BentoFilterItemType.SELECT_COUNTRY,
+                    options: { listboxItems: [{ value: 'NL', label: 'Custom label' }] },
+                },
+            ]"
+        />
+        <!-- SELECT_COUNTRY data-grid: variant="custom" only (warn) -->
+        <bento-data-grid
+            :filters="[
+                {
+                    field: 'c',
+                    label: 'C',
+                    type: BentoFilterItemType.SELECT_COUNTRY,
+                    options: { listboxItems: [{ value: 'NL' }], variant: 'custom' },
+                },
+            ]"
+        />
+        <!-- SELECT_COUNTRY data-grid: both (warn x2) -->
+        <bento-data-grid
+            :filters="[
+                {
+                    field: 'c',
+                    label: 'C',
+                    type: BentoFilterItemType.SELECT_COUNTRY,
+                    options: { listboxItems: [{ value: 'NL', label: 'Custom label' }], variant: 'custom' },
+                },
+            ]"
+        />
+
+        <!-- Valid: non-custom usage -->
+        <bento-country code="NL" variant="name" />
+        <bento-dropdown-country :items="[{ value: 'NL' }]" />
+    </div>
+</template>
+
+<script setup>
+    import { BentoFilterItemType } from '@adyen/bento-vue2';
+</script>

package/rules/deprecation-country-custom-usage/__tests__/eslint.config.js

@@ -0,0 +1,25 @@
+// 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: {
+            '@adyen/bento/deprecation-country-custom-usage': ['warn', { autofix: true }],
+        },
+        files: ['**/*.vue'],
+    },
+]);

package/rules/deprecation-country-custom-usage/deprecation-country-custom-usage.integration.test.ts

@@ -0,0 +1,22 @@
+import path from 'node:path';
+import { execFileSyncEslintVueFiles } from '../../utils/exec-file-sync-eslint-vue-files';
+
+describe('@adyen/bento/deprecation-country-custom-usage', () => {
+    it('should lint with warning', () => {
+        const eslintrc = path.resolve(__dirname, '__tests__', 'eslint.config.js');
+        const vueFile = path.resolve(__dirname, '__tests__', 'deprecation-country-custom-usage.vue');
+
+        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
+
+        // bento-country: variant only (1) + label only (1) + both (1) = 3
+        // bento-dropdown-country: label only (1) + variant only (1) + both (1) = 3
+        // filter-bar: label only (1) + variant only (1) + both (2) = 4
+        // data-grid: label only (1) + variant only (1) + both (2) = 4
+        expect(result[0].warningCount).toBe(14);
+
+        expect(result[0].messages[0]).toMatchObject({
+            ruleId: '@adyen/bento/deprecation-country-custom-usage',
+            severity: 1,
+        });
+    });
+});