@adyen/eslint-plugin-bento 0.0.0 → 1.0.0

package/README.md

@@ -0,0 +1,56 @@
+# Bento ESLint
+
+The Bento ESLint package helps improving the usage of Bento components and utility classes.
+
+## Installation
+
+```bash
+npm install --save-dev eslint@8 vue-eslint-parser@7 @adyen/eslint-plugin-bento
+```
+
+<!-- prettier-ignore -->
+> Requirements
+>
+> ESLint v6.0.0 up to v8.0.0 
+> Node.js v12.22.x, v14.17.x, v16.x and above
+> `vue-eslint-parser` v7.0.0
+
+## Usage
+
+The `@adyen/bento` plugin hasn't been tested in ESLint9 nor with the flat config (i.e. `eslint.config.js`).
+
+### Legacy Config (`.eslintrc`)
+
+```javascript
+module.exports = {
+    extends: ['plugin:@adyen/bento/recommended'],
+    rules: {
+        // override/add rules settings here, such as:
+        // '@adyen/bento/spacer-tokens': 'error',
+    },
+};
+```
+
+or without the recommended config:
+
+```javascript
+module.exports = {
+    parser: 'vue-eslint-parser',
+    plugins: ['@adyen/bento'],
+    rules: {
+        '@adyen/bento/vue-old-spacer-tokens': 'warn',
+    },
+};
+```
+
+## Rules
+
+### `@adyen/bento/vue-old-spacer-tokens`
+
+Disallow the use of ADL space utility classes in favor of Bento _spacer_ utility classes.
+
+### Recommended
+
+The recommended configuration contains pre-configured rules and their severity
+
+-   `@adyen/bento/vue-old-spacer-tokens`: `warn`

package/index.js

@@ -0,0 +1,24 @@
+const fs = require('fs');
+const spacerTokens = require('./rules/vue-old-spacer-tokens/vue-old-spacer-tokens');
+
+// The package name and version must be in sync with 'package.json'
+const pkg = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
+
+module.exports = {
+    meta: {
+        name: pkg.name,
+        version: pkg.version,
+    },
+    configs: {
+        recommended: {
+            parser: 'vue-eslint-parser',
+            plugins: ['@adyen/bento'],
+            rules: {
+                '@adyen/bento/vue-old-spacer-tokens': 'warn',
+            },
+        },
+    },
+    rules: {
+        'vue-old-spacer-tokens': spacerTokens,
+    },
+};

package/package.json

@@ -1,5 +1,34 @@
 {
-  "name": "@adyen/eslint-plugin-bento",
-  "version": "0.0.0",
-  "description": ""
+    "name": "@adyen/eslint-plugin-bento",
+    "version": "1.0.0",
+    "description": "Adyen Bento ESLint rules",
+    "main": "index.js",
+    "files": [
+        "index.js",
+        "rules/*",
+        "!**/__tests__",
+        "!**/*.test.ts"
+    ],
+    "exports": {
+        ".": "./index.js"
+    },
+    "scripts": {
+        "lint": "eslint -c ./.eslintrc.js ./ --exit-on-fatal-error",
+        "test": "vitest run",
+        "test:coverage": "npm run test -- --coverage",
+        "test:watch": "vitest watch"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git@github.com:Adyen/bento.git"
+    },
+    "license": "MIT",
+    "devDependencies": {
+        "eslint": "^8.57.0",
+        "vue-eslint-parser": "^7.11.0"
+    },
+    "peerDependencies": {
+        "eslint": "^8.0",
+        "vue-eslint-parser": "^7.0"
+    }
 }

package/rules/vue-old-spacer-tokens/README.md

@@ -0,0 +1,75 @@
+# @adyen/bento/vue-old-spacer-tokens
+
+> Disallow the use of ADL space utility classes in favor of Bento _spacer_ utility classes.
+
+-   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 is use to help developers migrate some of the ADL space utility classes into Bento _spacer_ utility classes
+based on the following mapping table:
+
+| ADL            | Bento           | Pixels |
+| -------------- | --------------- | ------ |
+| `u-padding-0`  | `b-padding-000` | `0`    |
+| `u-padding-2`  | `b-padding-010` | `2`    |
+| `u-padding-4`  | `b-padding-020` | `4`    |
+| `u-padding-8`  | `b-padding-040` | `8`    |
+| `u-padding-16` | `b-padding-070` | `16`   |
+| `u-padding-24` | `b-padding-090` | `24`   |
+| `u-padding-32` | `b-padding-100` | `32`   |
+| `u-padding-40` | `b-padding-110` | `40`   |
+| `u-padding-48` | `b-padding-120` | `48`   |
+| `u-padding-56` | `b-padding-130` | `56`   |
+| `u-padding-64` | `b-padding-140` | `64`   |
+| `u-margin-0`   | `b-margin-000`  | `0`    |
+| `u-margin-2`   | `b-margin-010`  | `2`    |
+| `u-margin-4`   | `b-margin-020`  | `4`    |
+| `u-margin-8`   | `b-margin-040`  | `8`    |
+| `u-margin-16`  | `b-margin-070`  | `16`   |
+| `u-margin-24`  | `b-margin-090`  | `24`   |
+| `u-margin-32`  | `b-margin-100`  | `32`   |
+| `u-margin-40`  | `b-margin-110`  | `40`   |
+| `u-margin-48`  | `b-margin-120`  | `48`   |
+| `u-margin-56`  | `b-margin-130`  | `56`   |
+| `u-margin-64`  | `b-margin-140`  | `64`   |
+
+Each of these values in all their variants are translated to their Bento counterpart:
+
+-   top: `u-{padding|margin}-top-{pixels}`
+-   bottom: `u-{padding|margin}-bottom-{pixels}`
+-   right: `u-{padding|margin}-right-{pixels}`
+-   left: `u-{padding|margin}-left-{pixels}`
+-   x - horizontal space: `u-{padding|margin}-x-{pixels}`
+-   y - vertical space: `u-{padding|margin}-y-{pixels}`
+-   space all directions: `u-{padding|margin}-{pixels}`
+
+The following values **are not mapped** and they are left to the discretion of the developer to migrate:
+
+| ADL          |
+| ------------ |
+| u-padding-72 |
+| u-padding-80 |
+| u-padding-88 |
+| u-padding-96 |
+
+## ✗ BAD
+
+```typescript
+<template>
+    <div class="u-spacer-4"></div>
+    <div class="u-spacer-top-32 u-spacer-bottom-32"></div>
+    <div class="u-spacer-x-4 u-spacer-y-4"></div>
+    <div class="u-spacer-right-4 u-spacer-left-4"></div>
+</template>
+```
+
+## ✓ Good
+
+```typescript
+<template>
+    <div class="b-spacer-020"></div>
+    <div class="b-spacer-top-100 b-spacer-bottom-100"></div>
+    <div class="b-spacer-x-020 b-spacer-y-020"></div>
+    <div class="b-spacer-right-020 b-spacer-left-020"></div>
+</template>
+```

package/rules/vue-old-spacer-tokens/vue-old-spacer-tokens.js

@@ -0,0 +1,74 @@
+const VueUtils = require('eslint-plugin-vue/lib/utils');
+
+// Mappings for the classes that can to be replaced
+const CLASS_MAP = {
+    '0': '000',
+    '2': '010',
+    '4': '020',
+    '8': '040',
+    '16': '070',
+    '24': '090',
+    '32': '100',
+    '40': '110',
+    '48': '120',
+    '56': '130',
+    '64': '140',
+};
+
+module.exports = {
+    meta: {
+        type: 'suggestion', // The type can be "problem", "suggestion", or "layout"
+        docs: {
+            description: 'Replace old utility margin and padding classes with new ones',
+            category: 'Best Practices',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/vue-old-spacer-tokens/README.md',
+            recommended: true,
+        },
+        messages: {
+            updateUtilityClass: 'Found outdated class names that need replacing',
+        },
+        fixable: 'code',
+        schema: [], // No options are needed for this rule
+    },
+    create(context) {
+        return VueUtils.defineTemplateBodyVisitor(context, {
+            VLiteral: node => {
+                if (typeof node.value === 'string') {
+                    let fixed = node.value;
+                    let hasReplacements = false;
+
+                    // Check if the class list has "padding" or "margin" utilities
+                    const regexPaddingMargin = /\bu-(padding|margin)\b/g;
+                    if (regexPaddingMargin.test(fixed)) {
+                        // Loop through the list of classes and replace them
+                        // eslint-disable-next-line no-restricted-syntax
+                        for (const [oldClass, newClass] of Object.entries(CLASS_MAP)) {
+                            // Check if the utility can be fixed/re-mapped
+                            // by checking if the digit has a Bento counterpart
+                            const regexOldNewMapping = new RegExp(`\\b${oldClass}\\b`, 'g');
+                            if (regexOldNewMapping.test(fixed)) {
+                                hasReplacements = true;
+
+                                // Replace values to Bento
+                                fixed = fixed
+                                    .replace(regexOldNewMapping, newClass) // Replace numbers
+                                    .replace(/u-/g, 'b-'); // Replace class to Bento
+                            }
+                        }
+                    }
+
+                    // If replacements were made, report and provide a fix
+                    if (hasReplacements) {
+                        context.report({
+                            node,
+                            messageId: 'updateUtilityClass',
+                            fix(fixer) {
+                                return fixer.replaceText(node, `"${fixed}"`);
+                            },
+                        });
+                    }
+                }
+            },
+        });
+    },
+};