@adyen/eslint-plugin-bento 2.22.0 → 2.24.0

package/rules/vue-no-redundant-dialog-v-if/vue-no-redundant-dialog-v-if.js

@@ -0,0 +1,150 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+/**
+ * @typedef {import('vue-eslint-parser').AST.VDirective} VDirective
+ * @typedef {import('vue-eslint-parser').AST.VElement} VElement
+ */
+/**
+ * @typedef {import('eslint-plugin-vue/lib/utils').RuleModule} RuleModule
+ */
+
+const VueUtils = require('eslint-plugin-vue/lib/utils');
+
+// Components rendering a native "<dialog>" element, which is hidden by the browser while closed
+const DIALOG_COMPONENTS = ['bento-modal', 'bento-modal-fullscreen', 'bento-sidepanel'];
+
+/**
+ * Normalizes a tag or attribute name so "BentoModal" and "bento-modal" are treated alike.
+ * @param {string} name
+ * @returns {string}
+ */
+function toKebabCase(name) {
+    return name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+/**
+ * Collapses whitespace so expressions spanning several lines can be compared.
+ * @param {string} expression
+ * @returns {string}
+ */
+function normalizeExpression(expression) {
+    return expression.replace(/\s+/g, ' ').trim();
+}
+
+/**
+ * Finds a directive by name, e.g. "if" for "v-if" or "bind" for ":is-open".
+ * @param {VElement} node
+ * @param {string} directiveName
+ * @returns {VDirective | undefined}
+ */
+function findDirective(node, directiveName) {
+    return node.startTag.attributes.find(attribute => attribute.directive && attribute.key.name.name === directiveName);
+}
+
+/**
+ * Finds the "is-open" binding, either as ":is-open" or as "v-bind:isOpen".
+ * @param {VElement} node
+ * @returns {VDirective | undefined}
+ */
+function findIsOpenBinding(node) {
+    return node.startTag.attributes.find(
+        attribute =>
+            attribute.directive &&
+            attribute.key.name.name === 'bind' &&
+            attribute.key.argument &&
+            attribute.key.argument.type === 'VIdentifier' &&
+            toKebabCase(attribute.key.argument.rawName) === 'is-open'
+    );
+}
+
+/**
+ * Checks whether the element right after the given one relies on its "v-if",
+ * in which case removing the directive would break the template.
+ * @param {VElement} node
+ * @returns {boolean}
+ */
+function hasElseBranch(node) {
+    const siblings = node.parent.children;
+    const nextElement = siblings.slice(siblings.indexOf(node) + 1).find(sibling => sibling.type === 'VElement');
+
+    if (!nextElement) {
+        return false;
+    }
+
+    return !!(findDirective(nextElement, 'else') || findDirective(nextElement, 'else-if'));
+}
+
+/** @type {RuleModule} */
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Disallow a redundant "v-if" next to "is-open" on components rendering a native dialog',
+            category: 'Best Practices',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/vue-no-redundant-dialog-v-if/README.md',
+            recommended: true,
+        },
+        messages: {
+            redundantVIf: `"v-if" is redundant on "{{ component }}" and unmounts it before the closing animation can run. The underlying "<dialog>" element stays hidden while closed, so "is-open" alone controls its visibility.`,
+            suggestRemoveVIf: `Remove the redundant "v-if" directive`,
+        },
+        hasSuggestions: true,
+        schema: [],
+    },
+
+    /** @param {RuleContext} context */
+    create(context) {
+        const sourceCode = context.sourceCode;
+        const template =
+            sourceCode.parserServices.getTemplateBodyTokenStore &&
+            sourceCode.parserServices.getTemplateBodyTokenStore();
+
+        return VueUtils.defineTemplateBodyVisitor(context, {
+            /** @param {VElement} node */
+            VElement(node) {
+                if (!DIALOG_COMPONENTS.includes(toKebabCase(node.rawName))) {
+                    return;
+                }
+
+                const vIf = findDirective(node, 'if');
+                const isOpen = findIsOpenBinding(node);
+                const vIfExpression = vIf && vIf.value && vIf.value.expression;
+                const isOpenExpression = isOpen && isOpen.value && isOpen.value.expression;
+
+                if (!vIfExpression || !isOpenExpression) {
+                    return;
+                }
+
+                // Only a "v-if" driven by the very same value as "is-open" is provably redundant
+                if (
+                    normalizeExpression(sourceCode.getText(vIfExpression)) !==
+                    normalizeExpression(sourceCode.getText(isOpenExpression))
+                ) {
+                    return;
+                }
+
+                if (hasElseBranch(node)) {
+                    return;
+                }
+
+                context.report({
+                    node: vIf,
+                    messageId: 'redundantVIf',
+                    data: { component: toKebabCase(node.rawName) },
+                    suggest: [
+                        {
+                            messageId: 'suggestRemoveVIf',
+                            fix(fixer) {
+                                // Removing from the previous token takes the leading whitespace
+                                // or line break with it, keeping the start tag tidy
+                                const tokenBefore = template.getTokenBefore(vIf);
+                                return fixer.removeRange([tokenBefore.range[1], vIf.range[1]]);
+                            },
+                        },
+                    ],
+                });
+            },
+        });
+    },
+};

package/rules/vue-no-use-bento-translation-overrides/README.md

@@ -0,0 +1,14 @@
+# Disallow unapproved translation overrides
+
+The `@adyen/bento/vue-no-use-bento-translation-overrides` rule prevents importing `useBentoTranslationOverrides` from
+`@adyen/bento-vue3`.
+
+This restricted composable is only intended for teams building SDKs or component libraries for external customers. It
+must not be used in Adyen products. Teams must request approval from the Bento team before using it.
+
+After approval, suppress the rule only around the approved import and include the reason:
+
+```ts
+// eslint-disable-next-line @adyen/bento/vue-no-use-bento-translation-overrides -- Approved by the Bento team for the customer SDK.
+import { useBentoTranslationOverrides } from '@adyen/bento-vue3';
+```

package/rules/vue-no-use-bento-translation-overrides/vue-no-use-bento-translation-overrides.js

@@ -0,0 +1,93 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+/**
+ * @typedef {import('eslint').Rule.RuleModule} RuleModule
+ */
+
+const BENTO_VUE3_PACKAGE = '@adyen/bento-vue3';
+const RESTRICTED_COMPOSABLE = 'useBentoTranslationOverrides';
+
+/** @type {RuleModule} */
+module.exports = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: `Restricts use of ${RESTRICTED_COMPOSABLE} to approved customer-facing SDKs and component libraries.`,
+            category: 'Restrictions',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/vue-no-use-bento-translation-overrides/README.md',
+            recommended: true,
+        },
+        messages: {
+            restricted:
+                '`useBentoTranslationOverrides` is restricted to teams building SDKs or component libraries for external customers and must not be used in Adyen products. Request approval from the Bento team before using this composable.',
+        },
+        schema: [],
+    },
+
+    /** @param {RuleContext} context */
+    create(context) {
+        const namespaceImports = new Set();
+
+        const getImportedName = specifier => {
+            if (specifier.type !== 'ImportSpecifier' && specifier.type !== 'ExportSpecifier') {
+                return null;
+            }
+
+            const imported = specifier.type === 'ImportSpecifier' ? specifier.imported : specifier.local;
+            return imported.type === 'Identifier' ? imported.name : imported.value;
+        };
+
+        const reportRestrictedSpecifier = specifier => {
+            if (getImportedName(specifier) === RESTRICTED_COMPOSABLE) {
+                context.report({
+                    node: specifier,
+                    messageId: 'restricted',
+                });
+            }
+        };
+
+        return {
+            ImportDeclaration(node) {
+                if (node.source.value !== BENTO_VUE3_PACKAGE) {
+                    return;
+                }
+
+                for (const specifier of node.specifiers) {
+                    if (specifier.type === 'ImportNamespaceSpecifier') {
+                        namespaceImports.add(specifier.local.name);
+                    } else {
+                        reportRestrictedSpecifier(specifier);
+                    }
+                }
+            },
+            ExportNamedDeclaration(node) {
+                if (node.source?.value !== BENTO_VUE3_PACKAGE) {
+                    return;
+                }
+
+                node.specifiers.forEach(reportRestrictedSpecifier);
+            },
+            MemberExpression(node) {
+                if (node.object.type !== 'Identifier' || !namespaceImports.has(node.object.name)) {
+                    return;
+                }
+
+                const propertyName = node.computed
+                    ? node.property.type === 'Literal'
+                        ? node.property.value
+                        : null
+                    : node.property.type === 'Identifier'
+                      ? node.property.name
+                      : null;
+
+                if (propertyName === RESTRICTED_COMPOSABLE) {
+                    context.report({
+                        node,
+                        messageId: 'restricted',
+                    });
+                }
+            },
+        };
+    },
+};

package/utils/component-slot-migration.js

@@ -6,6 +6,7 @@ const j = require('jscodeshift');
  */
 
 /**
+ * @typedef {import('vue-eslint-parser').AST.VElement} VElement
  * @typedef {import('vue-eslint-parser').AST.VText} VText
  * @typedef {import('vue-eslint-parser').AST.VExpressionContainer} VExpressionContainer
  */
@@ -26,10 +27,23 @@ module.exports = {
      */
     componentSlotMigration({ propertyName, context, template, alwaysExpression = false }) {
         return node => {
-            if (!node.children.length) {
-                return;
+            /**
+             * @param {VElement | VText | VExpressionContainer} child
+             * @returns {boolean}
+             */
+            function isNamedSlot(child) {
+                return (
+                    child.type === 'VElement' &&
+                    child.name === 'template' &&
+                    child.startTag.attributes.some(
+                        attribute => attribute.directive && attribute.key.name.name === 'slot'
+                    )
+                );
             }
 
+            // Named slots are not default slot content and should not trigger migration.
+            const contentNodes = node.children.filter(child => !isNamedSlot(child));
+
             // Turned true if one of the children is an expression
             let hasExpression = false;
 
@@ -72,7 +86,11 @@ module.exports = {
 
             // Remove empty nodes
             /** @type { Array<VText | VExpressionContainer> } */
-            const filteredNodes = node.children.filter(removeEmptyVTextNodes);
+            const filteredNodes = contentNodes.filter(removeEmptyVTextNodes);
+
+            if (!filteredNodes.length) {
+                return;
+            }
 
             // Get all content and concat
             const slotContent = (() => {
@@ -80,7 +98,7 @@ module.exports = {
                     return transformNodeToText(filteredNodes[0])?.trim();
                 }
 
-                const content = node.children
+                const content = contentNodes
                     // eslint-disable-next-line @typescript-eslint/no-shadow
                     .map((/** @type {VText | VExpressionContainer} */ node) => transformNodeToText(node, true))
                     .join('')

package/rules/deprecation-bento-data-grid-cell-action-menu-item-handler/__tests__/deprecation-bento-data-grid-cell-action-menu-item-handler.vue

@@ -1,63 +0,0 @@
-<template>
-    <div>
-        <!-- Inline expression: should warn (2 handlers) -->
-        <bento-data-grid
-            :cell-actions="[
-                {
-                    variant: 'more',
-                    menuData: [
-                        {
-                            text: 'Cancel payment',
-                            handler: () => {
-                                return;
-                            },
-                        },
-                        {
-                            text: 'Transfer payment',
-                            handler: () => {
-                                return;
-                            },
-                        },
-                    ],
-                },
-            ]"
-            :data="[]"
-            :columns="[]"
-        />
-
-        <!-- Identifier reference: should warn (1 handler) -->
-        <bento-data-grid :cell-actions="rowActions" :data="[]" :columns="[]" />
-
-        <!-- Non-data-grid component: should NOT warn -->
-        <test-component
-            :cell-actions="[
-                {
-                    menuData: [
-                        {
-                            text: 'Action',
-                            handler: () => {
-                                return;
-                            },
-                        },
-                    ],
-                },
-            ]"
-        />
-    </div>
-</template>
-
-<script setup>
-    const rowActions = [
-        {
-            variant: 'more',
-            menuData: [
-                {
-                    text: 'Refund',
-                    handler: () => {
-                        return;
-                    },
-                },
-            ],
-        },
-    ];
-</script>

package/rules/deprecation-bento-data-grid-cell-action-menu-item-handler/__tests__/eslint.config.js

@@ -1,26 +0,0 @@
-// 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-data-grid-cell-action-menu-item-handler': ['warn', { autofix: true }],
-        },
-        files: ['**/*.vue'],
-    },
-]);

package/rules/deprecation-bento-data-grid-cell-action-menu-item-handler/deprecation-bento-data-grid-cell-action-menu-item-handler.integration.test.ts

@@ -1,24 +0,0 @@
-import path from 'node:path';
-import { execFileSyncEslintVueFiles } from '../../utils/exec-file-sync-eslint-vue-files';
-
-describe('@adyen/bento/deprecation-bento-data-grid-cell-action-menu-item-handler', () => {
-    it('should lint with warning when handler is used in menuData', () => {
-        const eslintrc = path.resolve(__dirname, '__tests__', 'eslint.config.js');
-        const vueFile = path.resolve(
-            __dirname,
-            '__tests__',
-            'deprecation-bento-data-grid-cell-action-menu-item-handler.vue'
-        );
-
-        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
-
-        expect(result[0].warningCount).toBe(3);
-
-        expect(result[0].messages[0]).toMatchObject({
-            ruleId: '@adyen/bento/deprecation-bento-data-grid-cell-action-menu-item-handler',
-            severity: 1,
-            messageId: 'deprecation',
-            message: `The "handler" property is deprecated in bento-data-grid cell action menu items. Use "event" instead.`,
-        });
-    });
-});

package/rules/deprecation-bento-data-grid-cell-action-menu-item-handler/deprecation-bento-data-grid-cell-action-menu-item-handler.test.ts

@@ -1,116 +0,0 @@
-import { RuleTester } from 'eslint';
-import vueParser from 'vue-eslint-parser';
-import tsParser from '@typescript-eslint/parser';
-import deprecationRule from './deprecation-bento-data-grid-cell-action-menu-item-handler';
-
-const ruleTester = new RuleTester({
-    languageOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module',
-        parser: vueParser,
-        parserOptions: {
-            parser: tsParser,
-        },
-    },
-});
-
-describe('@adyen/bento/deprecation-bento-data-grid-cell-action-menu-item-handler', () => {
-    ruleTester.run('deprecation-bento-data-grid-cell-action-menu-item-handler', deprecationRule, {
-        valid: [
-            {
-                name: 'Valid: menuData with event instead of handler',
-                filename: 'test.vue',
-                code: `<template>
-                        <bento-data-grid :cell-actions="[{ menuData: [{ text: 'Edit', event: fn }] }]" />
-                    </template>`,
-            },
-            {
-                name: 'Valid: handler in menuData on a non-data-grid component (template)',
-                filename: 'test.vue',
-                code: `<template>
-                        <test-component :cell-actions="[{ menuData: [{ text: 'Edit', handler: fn }] }]" />
-                    </template>`,
-            },
-            {
-                name: 'Valid: handler outside of menuData context',
-                filename: 'test.vue',
-                code: `<script>const obj = { handler: () => {} };</script>`,
-            },
-            {
-                name: 'Valid: handler in unrelated array',
-                filename: 'test.vue',
-                code: `<script>const arr = [{ handler: () => {} }];</script>`,
-            },
-            {
-                name: 'Valid: menuData with event in script',
-                filename: 'test.vue',
-                code: `<script>
-                        const actions = [{ menuData: [{ text: 'Edit', event: () => {} }] }];
-                    </script>`,
-            },
-            {
-                name: 'Valid: handler in menuData in script not passed to bento-data-grid',
-                filename: 'test.vue',
-                code: `<template>
-                        <test-component :cell-actions="actions" />
-                    </template>
-                    <script>
-                        const actions = [{ menuData: [{ text: 'Cancel', handler: () => {} }] }];
-                    </script>`,
-            },
-        ],
-        invalid: [
-            {
-                name: 'Invalid: handler in menuData (template, no autofix)',
-                filename: 'test.vue',
-                code: `<template>
-                        <bento-data-grid :cell-actions="[{ menuData: [{ text: 'Cancel', handler: fn }] }]" />
-                    </template>`,
-                output: null,
-                errors: [{ messageId: 'deprecation' }],
-            },
-            {
-                name: 'Invalid: handler in menuData (template, autofix renames to event)',
-                filename: 'test.vue',
-                code: `<template>
-                        <bento-data-grid :cell-actions="[{ menuData: [{ text: 'Cancel', handler: fn }] }]" />
-                    </template>`,
-                output: `<template>
-                        <bento-data-grid :cell-actions="[{ menuData: [{ text: 'Cancel', event: fn }] }]" />
-                    </template>`,
-                options: [{ autofix: true }],
-                errors: [{ messageId: 'deprecation' }],
-            },
-            {
-                name: 'Invalid: handler resolved from script variable via identifier',
-                filename: 'test.vue',
-                code: `<template>
-                        <bento-data-grid :cell-actions="actions" />
-                    </template>
-                    <script>
-                        const actions = [{ menuData: [{ text: 'Cancel', handler: () => {} }] }];
-                    </script>`,
-                output: `<template>
-                        <bento-data-grid :cell-actions="actions" />
-                    </template>
-                    <script>
-                        const actions = [{ menuData: [{ text: 'Cancel', event: () => {} }] }];
-                    </script>`,
-                options: [{ autofix: true }],
-                errors: [{ messageId: 'deprecation' }],
-            },
-            {
-                name: 'Invalid: multiple handlers in menuData (template, autofix)',
-                filename: 'test.vue',
-                code: `<template>
-                        <bento-data-grid :cell-actions="[{ menuData: [{ text: 'Cancel', handler: a }, { text: 'Delete', handler: b }] }]" />
-                    </template>`,
-                output: `<template>
-                        <bento-data-grid :cell-actions="[{ menuData: [{ text: 'Cancel', event: a }, { text: 'Delete', event: b }] }]" />
-                    </template>`,
-                options: [{ autofix: true }],
-                errors: [{ messageId: 'deprecation' }, { messageId: 'deprecation' }],
-            },
-        ],
-    });
-});

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

@@ -1,10 +0,0 @@
-<template>
-    <div>
-        <!-- These should trigger the "add" action (missing has-actions) -->
-        <bento-date-range-picker label="Pick a date" />
-        <bento-date-range-picker label="Another picker" :min="minDate" />
-        <bento-date-range-picker v-model="value" />
-    </div>
-</template>
-
-<script setup></script>

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

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

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

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

@@ -1,47 +0,0 @@
-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.`,
-        });
-    });
-});