@adyen/eslint-plugin-bento 1.0.3 → 1.1.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.1.0",
   "description": "Adyen Bento ESLint rules",
   "main": "index.js",
   "files": [
     "index.js",
     "rules/*",
+    "utils/*",
     "!**/__tests__",
     "!**/*.test.ts"
   ],

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,94 @@
+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 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>
+                                {{ 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,105 @@
+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' }],
+            },
+        ],
+    });
+});

package/utils/component-slot-migration.js

@@ -0,0 +1,61 @@
+/**
+ * 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
+ */
+export function 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;
+
+        const transformNodeToText = ({ value, type, expression }) => {
+            if (type === 'VText') {
+                return value;
+            }
+
+            if (type === 'VExpressionContainer') {
+                hasExpression = true;
+
+                return `\${${expression.name}}`;
+            }
+        };
+
+        // Opening tag closing brace ">"
+        const closingBrace = template.getLastToken(node.startTag);
+        // Get all content and concat
+        const slotContent = node.children
+            // .map(({ value }) => value)
+            .map(transformNodeToText)
+            .join('')
+            .trim();
+
+        const 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
+                const attributeValue = hasExpression ? `\`${slotContent}\`` : slotContent;
+                yield fixer.insertTextBefore(closingBrace, ` ${attribute}="${attributeValue}" /`);
+
+                // Remove everything after the closing brace
+                yield fixer.removeRange([closingBrace.range[0] + 1, node.range[1]]);
+            },
+        });
+    };
+}