@adyen/eslint-plugin-bento 2.23.0 → 2.24.1

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/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.`,
-        });
-    });
-});

package/rules/deprecation-bento-date-range-picker-has-actions-prop/deprecation-bento-date-range-picker-has-actions-prop.test.ts

@@ -1,176 +0,0 @@
-import { RuleTester } from 'eslint';
-import vueParser from 'vue-eslint-parser';
-import tsParser from '@typescript-eslint/parser';
-import deprecationBentoDateRangePickerHasActionsProp from './deprecation-bento-date-range-picker-has-actions-prop';
-
-const ruleTester = new RuleTester({
-    languageOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module',
-        parser: vueParser,
-        parserOptions: {
-            parser: tsParser,
-        },
-    },
-});
-
-describe('@adyen/bento/deprecation-bento-date-range-picker-has-actions-prop', () => {
-    describe('action: add (default)', () => {
-        ruleTester.run(
-            'deprecation-bento-date-range-picker-has-actions-prop (add)',
-            deprecationBentoDateRangePickerHasActionsProp,
-            {
-                valid: [
-                    {
-                        name: 'Valid: component already has has-actions (static boolean)',
-                        filename: 'test.vue',
-                        code: `<template><bento-date-range-picker has-actions /></template>`,
-                    },
-                    {
-                        name: 'Valid: component already has has-actions (dynamic)',
-                        filename: 'test.vue',
-                        code: `<template><bento-date-range-picker :has-actions="true" /></template>`,
-                    },
-                    {
-                        name: 'Valid: unrelated component without has-actions',
-                        filename: 'test.vue',
-                        code: `<template><bento-button label="click" /></template>`,
-                    },
-                ],
-                invalid: [
-                    {
-                        name: 'Invalid: missing has-actions (no autofix)',
-                        filename: 'test.vue',
-                        code: `<template><bento-date-range-picker label="Pick" /></template>`,
-                        output: null,
-                        errors: [{ messageId: 'missingProp' }],
-                    },
-                    {
-                        name: 'Invalid: missing has-actions (autofix adds prop)',
-                        filename: 'test.vue',
-                        code: `<template><bento-date-range-picker label="Pick" /></template>`,
-                        output: `<template><bento-date-range-picker has-actions label="Pick" /></template>`,
-                        options: [{ action: 'add', autofix: true }],
-                        errors: [{ messageId: 'missingProp' }],
-                    },
-                    {
-                        name: 'Invalid: missing has-actions on self-closing tag without attrs (autofix)',
-                        filename: 'test.vue',
-                        code: `<template><bento-date-range-picker /></template>`,
-                        output: `<template><bento-date-range-picker has-actions /></template>`,
-                        options: [{ autofix: true }],
-                        errors: [{ messageId: 'missingProp' }],
-                    },
-                    {
-                        name: 'Invalid: missing has-actions on self-closing tag without space before /> (autofix)',
-                        filename: 'test.vue',
-                        code: `<template><bento-date-range-picker/></template>`,
-                        output: `<template><bento-date-range-picker has-actions /></template>`,
-                        options: [{ autofix: true }],
-                        errors: [{ messageId: 'missingProp' }],
-                    },
-                    {
-                        name: 'Invalid: has-actions="false" (static string false, no autofix)',
-                        filename: 'test.vue',
-                        code: `<template><bento-date-range-picker has-actions="false" /></template>`,
-                        output: null,
-                        errors: [{ messageId: 'missingProp' }],
-                    },
-                    {
-                        name: 'Invalid: has-actions="false" (static string false, autofix replaces)',
-                        filename: 'test.vue',
-                        code: `<template><bento-date-range-picker has-actions="false" label="Pick" /></template>`,
-                        output: `<template><bento-date-range-picker has-actions label="Pick" /></template>`,
-                        options: [{ autofix: true }],
-                        errors: [{ messageId: 'missingProp' }],
-                    },
-                    {
-                        name: 'Invalid: :has-actions="false" (dynamic false, autofix replaces)',
-                        filename: 'test.vue',
-                        code: `<template><bento-date-range-picker :has-actions="false" label="Pick" /></template>`,
-                        output: `<template><bento-date-range-picker has-actions label="Pick" /></template>`,
-                        options: [{ autofix: true }],
-                        errors: [{ messageId: 'missingProp' }],
-                    },
-                    {
-                        name: 'Invalid: multi-line component missing has-actions (autofix preserves indentation)',
-                        filename: 'test.vue',
-                        code: `<template>
-                            <bento-date-range-picker
-                                label="Pick"
-                            />
-                            </template>`,
-                        output: `<template>
-                            <bento-date-range-picker
-                                has-actions
-                                label="Pick"
-                            />
-                            </template>`,
-                        options: [{ autofix: true }],
-                        errors: [{ messageId: 'missingProp' }],
-                    },
-                ],
-            }
-        );
-    });
-
-    describe('action: remove', () => {
-        ruleTester.run(
-            'deprecation-bento-date-range-picker-has-actions-prop (remove)',
-            deprecationBentoDateRangePickerHasActionsProp,
-            {
-                valid: [
-                    {
-                        name: 'Valid: component without has-actions',
-                        filename: 'test.vue',
-                        code: `<template><bento-date-range-picker label="Pick" /></template>`,
-                        options: [{ action: 'remove' }],
-                    },
-                ],
-                invalid: [
-                    {
-                        name: 'Invalid: has-actions present (static boolean, no autofix)',
-                        filename: 'test.vue',
-                        code: `<template><bento-date-range-picker has-actions /></template>`,
-                        output: null,
-                        options: [{ action: 'remove' }],
-                        errors: [{ messageId: 'removeProp' }],
-                    },
-                    {
-                        name: 'Invalid: has-actions present (static boolean, autofix removes)',
-                        filename: 'test.vue',
-                        code: `<template><bento-date-range-picker has-actions label="Pick" /></template>`,
-                        output: `<template><bento-date-range-picker  label="Pick" /></template>`,
-                        options: [{ action: 'remove', autofix: true }],
-                        errors: [{ messageId: 'removeProp' }],
-                    },
-                    {
-                        name: 'Invalid: has-actions present (dynamic, autofix removes)',
-                        filename: 'test.vue',
-                        code: `<template><bento-date-range-picker :has-actions="true" /></template>`,
-                        output: `<template><bento-date-range-picker  /></template>`,
-                        options: [{ action: 'remove', autofix: true }],
-                        errors: [{ messageId: 'removeProp' }],
-                    },
-                    {
-                        name: 'Invalid: multi-line has-actions on its own line (autofix removes entire line)',
-                        filename: 'test.vue',
-                        code: `<template>
-                            <bento-date-range-picker
-                                has-actions
-                                label="Pick"
-                            />
-                            </template>`,
-                        output: `<template>
-                            <bento-date-range-picker
-                                label="Pick"
-                            />
-                            </template>`,
-                        options: [{ action: 'remove', autofix: true }],
-                        errors: [{ messageId: 'removeProp' }],
-                    },
-                ],
-            }
-        );
-    });
-});

package/rules/deprecation-bento-dropdown-size-prop/__tests__/deprecation-bento-dropdown-size-prop.vue

@@ -1,9 +0,0 @@
-<template>
-    <div>
-        <bento-dropdown size="value" />
-        <bento-dropdown :size="value" />
-        <bento-dropdown :size="value" />
-    </div>
-</template>
-
-<script setup></script>

package/rules/deprecation-bento-dropdown-size-prop/__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-dropdown-size-prop': ['warn', { autofix: true }],
-        },
-        files: ['**/*.vue'],
-    },
-]);