@adyen/eslint-plugin-bento 1.0.3 → 1.2.0

package/README.md

@@ -54,3 +54,23 @@ Disallow the use of ADL space utility classes in favor of Bento _spacer_ utility
 The recommended configuration contains pre-configured rules and their severity
 
 -   `@adyen/bento/vue-old-spacer-tokens`: `warn`
+
+### `@adyen/bento/deprecation-currency-default-slot`
+
+Disallow the use of the `default` slot in `bento-currency` instances
+
+### Recommended
+
+The recommended configuration contains pre-configured rules and their severity
+
+-   `@adyen/bento/deprecation-currency-default-slot`: `warn`
+
+### `@adyen/bento/deprecation-tag-default-slot`
+
+Disallow the use of the `default` slot in `bento-tag` instances
+
+### Recommended
+
+The recommended configuration contains pre-configured rules and their severity
+
+-   `@adyen/bento/deprecation-tag-default-slot`: `warn`

package/index.js

@@ -1,4 +1,6 @@
 const fs = require('fs');
+const deprecationCurrencyDefaultSlot = require('./rules/deprecation-currency-default-slot/deprecation-currency-default-slot');
+const deprecationTagDefaultSlot = require('./rules/deprecation-tag-default-slot/deprecation-tag-default-slot');
 const spacerTokens = require('./rules/vue-old-spacer-tokens/vue-old-spacer-tokens');
 
 // The package name and version must be in sync with 'package.json'
@@ -14,11 +16,15 @@ module.exports = {
             parser: 'vue-eslint-parser',
             plugins: ['@adyen/bento'],
             rules: {
+                '@adyen/bento/deprecation-currency-default-slot': 'warn',
+                '@adyen/bento/deprecation-tag-default-slot': 'warn',
                 '@adyen/bento/vue-old-spacer-tokens': 'warn',
             },
         },
     },
     rules: {
+        'deprecation-currency-default-slot': deprecationCurrencyDefaultSlot,
+        'deprecation-tag-default-slot': deprecationTagDefaultSlot,
         'vue-old-spacer-tokens': spacerTokens,
     },
 };

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@adyen/eslint-plugin-bento",
-  "version": "1.0.3",
+  "version": "1.2.0",
   "description": "Adyen Bento ESLint rules",
   "main": "index.js",
   "files": [
     "index.js",
     "rules/*",
+    "utils/*",
     "!**/__tests__",
     "!**/*.test.ts"
   ],
@@ -18,9 +19,10 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@vitest/coverage-v8": "2.1.4",
+    "@vitest/coverage-v8": "2.1.9",
     "eslint": "8.57.1",
-    "vitest": "2.1.4",
+    "jscodeshift": "17.1.2",
+    "vitest": "2.1.9",
     "vue-eslint-parser": "9.3.2"
   },
   "peerDependencies": {

package/rules/deprecation-currency-default-slot/README.md

@@ -0,0 +1,50 @@
+# @adyen/bento/deprecation-currency-default-slot
+
+> Disallow the use of the `default` slot in `bento-currency` instances
+
+-   This rule is included in the `plugin:@adyen/bento/recommended` configuration.
+-   🔧 The `--fix` option can automatically fix the problems reported by this rule.
+
+This rule prevents using the deprecated `default` slot within the `Currency` component.
+
+## ✗ BAD
+
+<!-- prettier-ignore -->
+```html
+<template>
+    <bento-currency currency="USD">
+        12345
+    </bento-currency>
+
+    <bento-currency currency="USD">
+        12345.67
+    </bento-currency>
+
+    <bento-currency>
+        {{ thisIsMyVariableWithCurrencyValue }}
+    </bento-currency>
+</template>
+```
+
+## ✓ Good
+
+<!-- prettier-ignore -->
+```html
+<template>
+    <bento-currency 
+        :value="12345" 
+        currency="USD" 
+    />
+
+    <bento-currency 
+        :value="12345.67" 
+        currency="USD" 
+    />
+
+    <bento-currency 
+        :value="thisIsMyVariableWithCurrencyValue" 
+        :currency="BentoCurrencyISOCode.USD" 
+        major-units 
+    />
+</template>
+```

package/rules/deprecation-currency-default-slot/__tests__/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+    env: { es2021: true },
+    parser: 'vue-eslint-parser',
+    plugins: ['@adyen/bento'],
+    rules: {
+        '@adyen/bento/deprecation-currency-default-slot': 'warn',
+    },
+};

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

@@ -0,0 +1,7 @@
+<template>
+    <bento-currency>
+        {{ thisIsMyVariableWithCurrencyValue }}
+    </bento-currency>
+</template>
+
+<script setup></script>

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

@@ -0,0 +1,36 @@
+import { execSync } from 'node:child_process';
+import path from 'node:path';
+
+// ESLint command
+const ESLINT = 'pnpm eslint';
+
+describe('@adyen/bento/deprecation-currency-default-slot', () => {
+    it('should lint with warning', () => {
+        // Load .eslintrc
+        const eslintrc = path.resolve(__dirname, '__tests__', '.eslintrc.js');
+        // Load the test file
+        const vueFile = path.resolve(__dirname, '__tests__', 'deprecation-currency-default-slot.vue');
+
+        // Execute the linter
+        const result = JSON.parse(
+            execSync(`${ESLINT} --format=json -c ${eslintrc} ${vueFile}`, {
+                encoding: 'utf8',
+            })
+        );
+
+        // 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-currency-default-slot',
+            severity: 1,
+            message: '"default" slot is deprecated in favor of the "value" property',
+            messageId: 'migrateDefaultSlot',
+            line: 2,
+            column: 5,
+            nodeType: 'VElement',
+            endLine: 4,
+            endColumn: 22,
+            fix: { range: [30, 101], text: ' :value="thisIsMyVariableWithCurrencyValue" />' },
+        });
+    });
+});

package/rules/deprecation-currency-default-slot/deprecation-currency-default-slot.js

@@ -0,0 +1,34 @@
+const VueUtils = require('eslint-plugin-vue/lib/utils');
+const { componentSlotMigration } = require('../../utils/component-slot-migration');
+
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Replaces Currency usage of "default" slot in favor of the "value" property',
+            category: 'Best Practices',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/deprecate-currency-default-slot/README.md',
+            recommended: true,
+        },
+        messages: {
+            migrateDefaultSlot: '"default" slot is deprecated in favor of the "value" property',
+        },
+        fixable: 'code',
+        schema: [], // No options are needed for this rule
+    },
+    create(context) {
+        const sourceCode = context.getSourceCode();
+        const template =
+            sourceCode.parserServices.getTemplateBodyTokenStore &&
+            sourceCode.parserServices.getTemplateBodyTokenStore();
+
+        return VueUtils.defineTemplateBodyVisitor(context, {
+            'VElement[name=bento-currency]': componentSlotMigration({
+                propertyName: 'value',
+                context,
+                template,
+                alwaysExpression: true,
+            }),
+        });
+    },
+};

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

@@ -0,0 +1,127 @@
+import { RuleTester } from 'eslint';
+import deprecationCurrencyDefaultSlot from './deprecation-currency-default-slot';
+
+const ruleTester = new RuleTester({
+    parser: require.resolve('vue-eslint-parser'),
+});
+
+describe('@adyen/bento/deprecation-currency-default-slot should suggest the usage of "label" property instead of "default" slot', () => {
+    ruleTester.run('deprecation-currency-default-slot', deprecationCurrencyDefaultSlot, {
+        valid: [
+            {
+                name: 'BentoCurrency with "value" property',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-currency :value="12345" currency="USD" />
+                </template>
+                `,
+            },
+            {
+                name: 'BentoCurrency with closing tag but no children',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-currency :value="12345" :currency="BentoCurrencyISOCode.USD" major-units />
+                </template>
+                `,
+            },
+            {
+                name: 'BentoCurrency with closing tag but no children',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-currency
+                        :value="thisIsMyVariableWithCurrencyValue"
+                        :currency="BentoCurrencyISOCode.USD"
+                        major-units
+                    />
+                </template>
+                `,
+            },
+        ],
+        invalid: [
+            {
+                name: 'BentoCurrency with VText child',
+                code: `
+                    <template>
+                        <bento-currency currency="USD">
+                            12345
+                        </bento-currency>
+                    </template>
+                    `,
+                output: `
+                    <template>
+                        <bento-currency currency="USD" :value="12345" />
+                    </template>
+                    `,
+                errors: [{ message: '"default" slot is deprecated in favor of the "value" property' }],
+            },
+            {
+                name: 'BentoCurrency with CallExpression child',
+                code: `
+                    <template>
+                        <bento-currency :currency="BentoCurrencyISOCode.EUR" major-units
+                            >{{ myFunction(valueRefs, EnumValues.EURO_AMOUNT) }}
+                        </bento-currency>
+                    </template>
+                    `,
+                output: `
+                    <template>
+                        <bento-currency :currency="BentoCurrencyISOCode.EUR" major-units
+                             :value="myFunction(valueRefs, EnumValues.EURO_AMOUNT)" />
+                    </template>
+                    `,
+                errors: [{ message: '"default" slot is deprecated in favor of the "value" property' }],
+            },
+            {
+                name: 'BentoCurrency with VText child and no attributes',
+                code: `
+                        <template>
+                            <bento-currency>
+                                12345.23
+                            </bento-currency>
+                        </template>
+                        `,
+                output: `
+                        <template>
+                            <bento-currency :value="12345.23" />
+                        </template>
+                        `,
+                errors: [{ message: '"default" slot is deprecated in favor of the "value" property' }],
+            },
+            {
+                name: 'BentoCurrency with property as child',
+                code: `
+                        <template>
+                            <bento-currency :key="item.thisIsMyVariableWithCurrencyValue" :currency="BentoCurrencyISOCode.EUR" major-units>
+                                {{ item.thisIsMyVariableWithCurrencyValue }}
+                            </bento-currency>
+                        </template>
+                        `,
+                output: `
+                        <template>
+                            <bento-currency :key="item.thisIsMyVariableWithCurrencyValue" :currency="BentoCurrencyISOCode.EUR" major-units :value="item.thisIsMyVariableWithCurrencyValue" />
+                        </template>
+                        `,
+                errors: [{ message: '"default" slot is deprecated in favor of the "value" property' }],
+            },
+            {
+                name: 'BentoCurrency with simple property as child',
+                code: `
+                        <template>
+                            <bento-currency>
+                                {{ thisIsMyVariableWithCurrencyValue }}
+                            </bento-currency>
+                        </template>
+                        `,
+                output: `
+                        <template>
+                            <bento-currency :value="thisIsMyVariableWithCurrencyValue" />
+                        </template>
+                        `,
+                errors: [{ message: '"default" slot is deprecated in favor of the "value" property' }],
+            },
+        ],
+    });
+});

package/rules/deprecation-tag-default-slot/README.md

@@ -0,0 +1,46 @@
+# @adyen/bento/deprecation-tag-default-slot
+
+> Disallow the use of the slot in `bento-tag` instances
+
+-   This rule is included in the `plugin:@adyen/bento/recommended` configuration.
+-   🔧 The `--fix` option can automatically fix the problems reported by this rule.
+
+This rule prevents using the deprecated `default` slot within the `Tag` component.
+
+## ✗ BAD
+
+<!-- prettier-ignore -->
+```html
+<template>
+    <bento-tag variant="blue">
+        Label text
+    </bento-tag>
+
+    <bento-tag>
+        Label text
+    </bento-tag>
+
+    <bento-tag>
+        {{ thisIsMyVariableWithText }}
+    </bento-tag>
+
+    <bento-tag>
+        Value: {{ thisIsAValue }}
+    </bento-tag>
+</template>
+```
+
+## ✓ Good
+
+<!-- prettier-ignore -->
+```html
+<template>
+    <bento-tag label="Label text" variant="blue" />
+
+    <bento-tag label="Label text" variant="blue" />
+
+    <bento-tag :label="thisIsMyVariableWithText" variant="blue" />
+
+    <bento-tag :label="Value: ${thisIsAValue}" />
+</template>
+```

package/rules/deprecation-tag-default-slot/__tests__/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+    env: { es2021: true },
+    parser: 'vue-eslint-parser',
+    plugins: ['@adyen/bento'],
+    rules: {
+        '@adyen/bento/deprecation-tag-default-slot': 'warn',
+    },
+};

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

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

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

@@ -0,0 +1,36 @@
+import { execSync } from 'node:child_process';
+import path from 'node:path';
+
+// ESLint command
+const ESLINT = 'pnpm eslint';
+
+describe('@adyen/bento/deprecation-tag-default-slot', () => {
+    it('should lint with warning', () => {
+        // Load .eslintrc
+        const eslintrc = path.resolve(__dirname, '__tests__', '.eslintrc.js');
+        // Load the test file
+        const vueFile = path.resolve(__dirname, '__tests__', 'deprecation-tag-default-slot.vue');
+
+        // Execute the linter
+        const result = JSON.parse(
+            execSync(`${ESLINT} --format=json -c ${eslintrc} ${vueFile}`, {
+                encoding: 'utf8',
+            })
+        );
+
+        // 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.js

@@ -0,0 +1,33 @@
+const VueUtils = require('eslint-plugin-vue/lib/utils');
+const { componentSlotMigration } = require('../../utils/component-slot-migration');
+
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Replaces Tag usage of "default" slot in favor of the "label" property',
+            category: 'Best Practices',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/deprecate-tag-default-slot/README.md',
+            recommended: true,
+        },
+        messages: {
+            migrateDefaultSlot: '"default" slot is deprecated in favor of the "label" property',
+        },
+        fixable: 'code',
+        schema: [], // No options are needed for this rule
+    },
+    create(context) {
+        const sourceCode = context.getSourceCode();
+        const template =
+            sourceCode.parserServices.getTemplateBodyTokenStore &&
+            sourceCode.parserServices.getTemplateBodyTokenStore();
+
+        return VueUtils.defineTemplateBodyVisitor(context, {
+            'VElement[name=bento-tag]': componentSlotMigration({
+                propertyName: 'label',
+                context,
+                template,
+            }),
+        });
+    },
+};

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

@@ -0,0 +1,136 @@
+import { RuleTester } from 'eslint';
+import deprecationTagDefaultSlot from './deprecation-tag-default-slot';
+
+const ruleTester = new RuleTester({
+    parser: require.resolve('vue-eslint-parser'),
+});
+
+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/utils/component-slot-migration.js

@@ -0,0 +1,90 @@
+const j = require('jscodeshift');
+
+module.exports = {
+    /**
+     * Generates a report with a fix to those VElements containing a deprecated default slot.
+     *
+     * It moves the content of the "default" slot into a prop with the "propertyName" value.
+     *
+     * @param props Contains the name of the property by which it will be replace and the context
+     */
+    componentSlotMigration({ propertyName, context, template, alwaysExpression = false }) {
+        return node => {
+            if (!node.children.length) {
+                return;
+            }
+
+            // Turned true if one of the children is an expression
+            let hasExpression = false;
+
+            function transformNodeToText(node, wrapStringLiteral = false) {
+                if (node.type === 'VText') {
+                    return node.value;
+                }
+
+                if (node.type === 'VExpressionContainer') {
+                    hasExpression = true;
+                    if (['CallExpression', 'MemberExpression', 'Identifier'].includes(node.expression?.type || '')) {
+                        const expression = j(node.expression).toSource();
+                        return wrapStringLiteral ? `\${${expression}}` : expression;
+                    }
+                }
+            }
+
+            function removeEmptyVTextNodes(node) {
+                if (node.type === 'VText') {
+                    return !!node.value.trim().length;
+                }
+
+                return true;
+            }
+
+            // Opening tag closing brace ">"
+            const closingBrace = template.getLastToken(node.startTag);
+
+            // Remove empty nodes
+            const filteredNodes = node.children.filter(removeEmptyVTextNodes);
+
+            // Get all content and concat
+            const slotContent = (() => {
+                if (filteredNodes.length === 1) {
+                    return transformNodeToText(filteredNodes[0])?.trim();
+                }
+
+                const content = node.children
+                    .map(node => transformNodeToText(node, true))
+                    .join('')
+                    .trim();
+
+                return `\`${content}\``;
+            })();
+
+            /**
+             * Formats an attribute name into an expression (:attribute) or a value (attribute)
+             * for the Vue template.
+             * @returns formatted attribute name
+             */
+            function attributeFormat() {
+                if (alwaysExpression) {
+                    return `:${propertyName}`;
+                }
+
+                return hasExpression ? `:${propertyName}` : propertyName;
+            }
+
+            context.report({
+                node,
+                loc: node.loc,
+                messageId: 'migrateDefaultSlot',
+                *fix(fixer) {
+                    const attribute = attributeFormat();
+                    // Add attribute at the end of opening tag
+                    yield fixer.insertTextBefore(closingBrace, ` ${attribute}="${slotContent}" /`);
+
+                    // Remove everything after the closing brace
+                    yield fixer.removeRange([closingBrace.range[0] + 1, node.range[1]]);
+                },
+            });
+        };
+    },
+};