@adyen/eslint-plugin-bento 2.10.0 → 2.11.0

package/rules/deprecation-country-custom-usage/deprecation-country-custom-usage.js

@@ -0,0 +1,569 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+/**
+ * @typedef {import('eslint-plugin-vue/lib/utils').RuleModule} RuleModule
+ */
+
+const VueUtils = require('eslint-plugin-vue/lib/utils');
+
+/** @type {RuleModule} */
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description:
+                'Deprecates "custom" variant / custom label usage across bento-country, bento-dropdown-country, and SELECT_COUNTRY filter config.',
+            category: 'Deprecations',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/deprecation-country-custom-usage/README.md',
+            recommended: true,
+        },
+        messages: {
+            countryCustomVariant:
+                'The "bento-country" component with variant "custom" is deprecated. Use <bento-typography el="span"> instead.',
+            countryUnusedLabel:
+                'The "label" prop on "bento-country" is only used with variant "custom" which is deprecated. Remove the "label" prop.',
+            dropdownCountryCustomLabel:
+                'The "bento-dropdown-country" component with custom "label" in items is deprecated. Use "bento-dropdown" instead.',
+            dropdownCountryCustomVariant:
+                'The "variant" prop with value "custom" on "bento-dropdown-country" is deprecated. Remove the "variant" prop.',
+            selectCountryCustom:
+                'The "{{ key }}" property in SELECT_COUNTRY filter options indicates custom usage. Use "BentoFilterItemType.SELECT" instead of "SELECT_COUNTRY".',
+        },
+        fixable: 'code',
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    autofix: {
+                        type: 'boolean',
+                        default: false,
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+    },
+
+    /** @param {RuleContext} context */
+    create(context) {
+        const options = context.options[0] || {};
+        const autofix = options.autofix === true;
+
+        function getStaticPropertyName(prop) {
+            if (prop.type !== 'Property' || prop.computed) {
+                return null;
+            }
+            return prop.key.type === 'Identifier'
+                ? prop.key.name
+                : prop.key.type === 'Literal'
+                  ? String(prop.key.value)
+                  : null;
+        }
+
+        function removeAttribute(fixer, attr) {
+            const sourceCode = context.getSourceCode();
+            const src = sourceCode.getText();
+            // Walk backwards from the attribute to consume preceding whitespace
+            let start = attr.range[0];
+            while (start > 0 && (src[start - 1] === ' ' || src[start - 1] === '\t')) {
+                start--;
+            }
+            return fixer.removeRange([start, attr.range[1]]);
+        }
+
+        function removeProperty(fixer, node, prop) {
+            const properties = node.properties;
+            const index = properties.indexOf(prop);
+            const isLast = index === properties.length - 1;
+
+            if (properties.length === 1) {
+                return fixer.replaceText(node, '{}');
+            }
+            if (isLast) {
+                const prev = properties[index - 1];
+                return fixer.removeRange([prev.range[1], prop.range[1]]);
+            }
+            const next = properties[index + 1];
+            return fixer.removeRange([prop.range[0], next.range[0]]);
+        }
+
+        function removeLabelsFromArray(fixer, arrayNode) {
+            const fixes = [];
+            for (const element of arrayNode.elements) {
+                if (!element || element.type !== 'ObjectExpression') {
+                    continue;
+                }
+                for (const prop of element.properties) {
+                    if (getStaticPropertyName(prop) === 'label') {
+                        fixes.push(removeProperty(fixer, element, prop));
+                    }
+                }
+            }
+            return fixes;
+        }
+
+        /* ------------------------------------------------ */
+        /* CASE 1: <bento-country variant="custom">         */
+        /* ------------------------------------------------ */
+
+        function isCustomVariantValue(expression) {
+            if (!expression) {
+                return false;
+            }
+            if (expression.type === 'Literal' && expression.value === 'custom') {
+                return true;
+            }
+            if (
+                expression.type === 'MemberExpression' &&
+                expression.object?.type === 'Identifier' &&
+                expression.object.name === 'BentoCountryVariant' &&
+                expression.property?.type === 'Identifier' &&
+                expression.property.name === 'CUSTOM'
+            ) {
+                return true;
+            }
+            return false;
+        }
+
+        function replaceWithTypography(fixer, element) {
+            const sourceCode = context.getSourceCode();
+            const startTag = element.startTag;
+            const endTag = element.endTag;
+
+            const labelAttr = findLabelAttribute(element);
+
+            let content = '';
+            if (labelAttr) {
+                if (labelAttr.directive) {
+                    content = `{{ ${sourceCode.getText(labelAttr.value.expression)} }}`;
+                } else {
+                    content = labelAttr.value.value;
+                }
+            }
+
+            if (!endTag) {
+                return fixer.replaceTextRange(
+                    element.range,
+                    `<bento-typography el="span">${content}</bento-typography>`
+                );
+            }
+
+            const childrenSource = sourceCode.text.slice(startTag.range[1], endTag.range[0]);
+            const body = content || childrenSource;
+            return fixer.replaceTextRange(element.range, `<bento-typography el="span">${body}</bento-typography>`);
+        }
+
+        /* ------------------------------------------------ */
+        /* CASE 2: <bento-dropdown-country :items="[...]">  */
+        /* ------------------------------------------------ */
+
+        function checkItemsForCustomLabel(node) {
+            if (node.type !== 'ArrayExpression') {
+                return false;
+            }
+            return node.elements.some(element => {
+                if (!element || element.type !== 'ObjectExpression') {
+                    return false;
+                }
+                return element.properties.some(prop => {
+                    const keyName = getStaticPropertyName(prop);
+                    return keyName === 'label';
+                });
+            });
+        }
+
+        function getItemsExpression(element) {
+            const itemsAttr = element.startTag.attributes.find(
+                attr => attr.directive && attr.key?.name?.name === 'bind' && attr.key?.argument?.name === 'items'
+            );
+            return itemsAttr?.value?.expression;
+        }
+
+        function replaceDropdownCountryTag(fixer, element) {
+            const startTag = element.startTag;
+            const openTagName = element.rawName;
+            const endTag = element.endTag;
+            const sourceCode = context.getSourceCode();
+
+            const fixes = [
+                fixer.replaceTextRange(
+                    [startTag.range[0] + 1, startTag.range[0] + 1 + openTagName.length],
+                    'bento-dropdown'
+                ),
+            ];
+
+            // Remove the variant="custom" attribute since it's meaningless on bento-dropdown
+            const variantAttr = findVariantAttribute(element);
+            if (variantAttr) {
+                fixes.push(removeAttribute(fixer, variantAttr));
+            }
+
+            if (endTag) {
+                const endTagSource = sourceCode.getText(endTag);
+                const closingTagName = endTagSource.match(/<\/\s*([^\s>]+)/)?.[1];
+                if (closingTagName) {
+                    fixes.push(
+                        fixer.replaceTextRange(
+                            [endTag.range[0] + 2, endTag.range[0] + 2 + closingTagName.length],
+                            'bento-dropdown'
+                        )
+                    );
+                }
+            }
+
+            return fixes;
+        }
+
+        /* ------------------------------------------------ */
+        /* CASE 3: Filter config SELECT_COUNTRY with custom */
+        /* ------------------------------------------------ */
+
+        function isSelectCountryFilterType(valueNode) {
+            if (
+                valueNode.type === 'MemberExpression' &&
+                valueNode.object?.type === 'Identifier' &&
+                valueNode.object.name === 'BentoFilterItemType' &&
+                valueNode.property?.type === 'Identifier' &&
+                valueNode.property.name === 'SELECT_COUNTRY'
+            ) {
+                return true;
+            }
+            if (valueNode.type === 'Literal' && valueNode.value === 'BentoSelectCountryFilter') {
+                return true;
+            }
+            return false;
+        }
+
+        function hasCustomUsageInOptions(optionsNode) {
+            if (!optionsNode || optionsNode.type !== 'ObjectExpression') {
+                return { hasCustomLabel: false, hasCustomVariant: false, variantProp: null, listboxItemsNode: null };
+            }
+
+            let hasCustomLabel = false;
+            let hasCustomVariant = false;
+            let variantProp = null;
+            let listboxItemsNode = null;
+
+            for (const prop of optionsNode.properties) {
+                const keyName = getStaticPropertyName(prop);
+
+                if (keyName === 'variant') {
+                    if (prop.value.type === 'Literal' && prop.value.value === 'custom') {
+                        hasCustomVariant = true;
+                        variantProp = prop;
+                    } else if (
+                        prop.value.type === 'MemberExpression' &&
+                        prop.value.property?.type === 'Identifier' &&
+                        prop.value.property.name === 'CUSTOM'
+                    ) {
+                        hasCustomVariant = true;
+                        variantProp = prop;
+                    }
+                }
+
+                if (keyName === 'listboxItems' && prop.value.type === 'ArrayExpression') {
+                    listboxItemsNode = prop.value;
+                    hasCustomLabel = prop.value.elements.some(el => {
+                        if (!el || el.type !== 'ObjectExpression') {
+                            return false;
+                        }
+                        return el.properties.some(p => getStaticPropertyName(p) === 'label');
+                    });
+                }
+            }
+
+            return { hasCustomLabel, hasCustomVariant, variantProp, listboxItemsNode };
+        }
+
+        function checkFilterConfigObject(node) {
+            if (node.type !== 'ObjectExpression') {
+                return;
+            }
+
+            let typeValueNode = null;
+            let optionsNode = null;
+
+            for (const prop of node.properties) {
+                const keyName = getStaticPropertyName(prop);
+
+                if (keyName === 'type' && isSelectCountryFilterType(prop.value)) {
+                    typeValueNode = prop.value;
+                }
+
+                if (keyName === 'options' && prop.value.type === 'ObjectExpression') {
+                    optionsNode = prop.value;
+                }
+            }
+
+            if (!typeValueNode || !optionsNode) {
+                return;
+            }
+
+            const { hasCustomLabel, hasCustomVariant, variantProp, listboxItemsNode } =
+                hasCustomUsageInOptions(optionsNode);
+
+            if (hasCustomVariant) {
+                context.report({
+                    node: optionsNode,
+                    messageId: 'selectCountryCustom',
+                    data: { key: 'variant' },
+                    ...(autofix && {
+                        fix(fixer) {
+                            if (hasCustomLabel) {
+                                // Both present: change type to SELECT and remove variant
+                                const fixes = [removeProperty(fixer, optionsNode, variantProp)];
+                                if (typeValueNode.type === 'MemberExpression') {
+                                    fixes.push(fixer.replaceText(typeValueNode.property, 'SELECT'));
+                                } else {
+                                    fixes.push(fixer.replaceText(typeValueNode, "'BentoSelectFilter'"));
+                                }
+                                return fixes;
+                            }
+                            // Variant only: remove the variant property
+                            return removeProperty(fixer, optionsNode, variantProp);
+                        },
+                    }),
+                });
+            }
+
+            if (hasCustomLabel) {
+                context.report({
+                    node: optionsNode,
+                    messageId: 'selectCountryCustom',
+                    data: { key: 'listboxItems with label' },
+                    ...(autofix && {
+                        fix(fixer) {
+                            if (hasCustomVariant) {
+                                // Both present: change type to SELECT and remove variant
+                                const fixes = [removeProperty(fixer, optionsNode, variantProp)];
+                                if (typeValueNode.type === 'MemberExpression') {
+                                    fixes.push(fixer.replaceText(typeValueNode.property, 'SELECT'));
+                                } else {
+                                    fixes.push(fixer.replaceText(typeValueNode, "'BentoSelectFilter'"));
+                                }
+                                return fixes;
+                            }
+                            // Label only: remove label properties from listboxItems
+                            return removeLabelsFromArray(fixer, listboxItemsNode);
+                        },
+                    }),
+                });
+            }
+        }
+
+        /* ------------------------------------------------ */
+        /* Visitors                                          */
+        /* ------------------------------------------------ */
+
+        function hasCustomVariantAttribute(element) {
+            return element.startTag.attributes.some(attr => {
+                if (!attr.directive && attr.key.name === 'variant' && attr.value?.value === 'custom') {
+                    return true;
+                }
+                if (attr.directive && attr.key?.name?.name === 'bind' && attr.key?.argument?.name === 'variant') {
+                    return isCustomVariantValue(attr.value?.expression);
+                }
+                return false;
+            });
+        }
+
+        function findVariantAttribute(element) {
+            return element.startTag.attributes.find(attr => {
+                if (!attr.directive && attr.key.name === 'variant') {
+                    return true;
+                }
+                if (attr.directive && attr.key?.name?.name === 'bind' && attr.key?.argument?.name === 'variant') {
+                    return true;
+                }
+                return false;
+            });
+        }
+
+        function findLabelAttribute(element) {
+            return element.startTag.attributes.find(attr => {
+                if (!attr.directive && attr.key.name === 'label') {
+                    return true;
+                }
+                if (attr.directive && attr.key?.name?.name === 'bind' && attr.key?.argument?.name === 'label') {
+                    return true;
+                }
+                return false;
+            });
+        }
+
+        function hasLabelAttribute(element) {
+            return !!findLabelAttribute(element);
+        }
+
+        const countryComponentSelector = `VElement:matches([name="bento-country"], [name="BentoCountry"])`;
+        const dropdownCountrySelector = `VElement:matches([name="bento-dropdown-country"], [name="BentoDropdownCountry"], [name="b-dropdown-country"])`;
+
+        const filterConfigVisitor = {
+            ObjectExpression(node) {
+                checkFilterConfigObject(node);
+            },
+        };
+
+        return VueUtils.defineTemplateBodyVisitor(
+            context,
+            {
+                // CASE 1a: static variant="custom" on bento-country
+                [`${countryComponentSelector} > VStartTag > VAttribute[directive=false][key.name="variant"][value.value="custom"]`](
+                    node
+                ) {
+                    const element = node.parent.parent;
+                    const hasLabel = hasLabelAttribute(element);
+                    context.report({
+                        node: element,
+                        messageId: 'countryCustomVariant',
+                        ...(autofix && {
+                            fix(fixer) {
+                                if (hasLabel) {
+                                    return replaceWithTypography(fixer, element);
+                                }
+                                // variant="custom" only: remove the variant attribute
+                                return removeAttribute(fixer, node);
+                            },
+                        }),
+                    });
+                },
+
+                // CASE 1b: dynamic :variant="'custom'" or :variant="BentoCountryVariant.CUSTOM" on bento-country
+                [`${countryComponentSelector} > VStartTag > VAttribute[directive=true][key.name.name="bind"][key.argument.name="variant"]`](
+                    node
+                ) {
+                    const expression = node.value?.expression;
+                    if (isCustomVariantValue(expression)) {
+                        const element = node.parent.parent;
+                        const hasLabel = hasLabelAttribute(element);
+                        context.report({
+                            node: element,
+                            messageId: 'countryCustomVariant',
+                            ...(autofix && {
+                                fix(fixer) {
+                                    if (hasLabel) {
+                                        return replaceWithTypography(fixer, element);
+                                    }
+                                    // variant="custom" only: remove the variant attribute
+                                    return removeAttribute(fixer, node);
+                                },
+                            }),
+                        });
+                    }
+                },
+
+                // CASE 1c: label prop on bento-country without variant="custom"
+                [`${countryComponentSelector} > VStartTag > VAttribute[directive=false][key.name="label"]`](node) {
+                    const element = node.parent.parent;
+                    if (!hasCustomVariantAttribute(element)) {
+                        context.report({
+                            node: element,
+                            messageId: 'countryUnusedLabel',
+                            ...(autofix && {
+                                fix(fixer) {
+                                    return removeAttribute(fixer, node);
+                                },
+                            }),
+                        });
+                    }
+                },
+
+                // CASE 1d: dynamic :label on bento-country without variant="custom"
+                [`${countryComponentSelector} > VStartTag > VAttribute[directive=true][key.name.name="bind"][key.argument.name="label"]`](
+                    node
+                ) {
+                    const element = node.parent.parent;
+                    if (!hasCustomVariantAttribute(element)) {
+                        context.report({
+                            node: element,
+                            messageId: 'countryUnusedLabel',
+                            ...(autofix && {
+                                fix(fixer) {
+                                    return removeAttribute(fixer, node);
+                                },
+                            }),
+                        });
+                    }
+                },
+
+                // CASE 2a: :items with label on bento-dropdown-country
+                [`${dropdownCountrySelector} > VStartTag > VAttribute[directive=true][key.name.name="bind"][key.argument.name="items"]`](
+                    node
+                ) {
+                    const valueNode = node.value?.expression;
+                    if (!valueNode) {
+                        return;
+                    }
+
+                    if (checkItemsForCustomLabel(valueNode)) {
+                        const element = node.parent.parent;
+                        const hasCustomVariant = hasCustomVariantAttribute(element);
+                        context.report({
+                            node: element,
+                            messageId: 'dropdownCountryCustomLabel',
+                            ...(autofix && {
+                                fix(fixer) {
+                                    if (hasCustomVariant) {
+                                        return replaceDropdownCountryTag(fixer, element);
+                                    }
+                                    // Label only: remove labels from items
+                                    return removeLabelsFromArray(fixer, valueNode);
+                                },
+                            }),
+                        });
+                    }
+                },
+
+                // CASE 2b: variant="custom" on bento-dropdown-country
+                [`${dropdownCountrySelector} > VStartTag > VAttribute[directive=false][key.name="variant"][value.value="custom"]`](
+                    node
+                ) {
+                    const element = node.parent.parent;
+                    const itemsExpr = getItemsExpression(element);
+                    const hasLabel = itemsExpr ? checkItemsForCustomLabel(itemsExpr) : false;
+                    if (!hasLabel) {
+                        context.report({
+                            node: element,
+                            messageId: 'dropdownCountryCustomVariant',
+                            ...(autofix && {
+                                fix(fixer) {
+                                    return removeAttribute(fixer, node);
+                                },
+                            }),
+                        });
+                    }
+                },
+
+                // CASE 2c: dynamic :variant="'custom'" on bento-dropdown-country
+                [`${dropdownCountrySelector} > VStartTag > VAttribute[directive=true][key.name.name="bind"][key.argument.name="variant"]`](
+                    node
+                ) {
+                    const expression = node.value?.expression;
+                    if (!isCustomVariantValue(expression)) {
+                        return;
+                    }
+                    const element = node.parent.parent;
+                    const itemsExpr = getItemsExpression(element);
+                    const hasLabel = itemsExpr ? checkItemsForCustomLabel(itemsExpr) : false;
+                    if (!hasLabel) {
+                        context.report({
+                            node: element,
+                            messageId: 'dropdownCountryCustomVariant',
+                            ...(autofix && {
+                                fix(fixer) {
+                                    return removeAttribute(fixer, node);
+                                },
+                            }),
+                        });
+                    }
+                },
+
+                // CASE 3: inline filter config in template
+                ...filterConfigVisitor,
+            },
+            // CASE 3: script-defined filter config
+            filterConfigVisitor
+        );
+    },
+};