@adyen/eslint-plugin-bento 1.0.2 → 1.0.3-rc.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Adyen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -11,7 +11,7 @@ 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 
+> 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
 

package/package.json

@@ -1,34 +1,36 @@
 {
-    "name": "@adyen/eslint-plugin-bento",
-    "version": "1.0.2",
-    "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 --config ./vitest.config.ts",
-        "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": "^9.3.0"
-    },
-    "peerDependencies": {
-        "eslint": "^8.0",
-        "vue-eslint-parser": "^9.0"
-    }
-}
+  "name": "@adyen/eslint-plugin-bento",
+  "version": "1.0.3-rc.2",
+  "description": "Adyen Bento ESLint rules",
+  "main": "index.js",
+  "files": [
+    "index.js",
+    "rules/*",
+    "!**/__tests__",
+    "!**/*.test.ts"
+  ],
+  "exports": {
+    ".": "./index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Adyen/bento.git"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@vitest/coverage-v8": "2.1.4",
+    "eslint": "8.57.1",
+    "vitest": "2.1.4",
+    "vue-eslint-parser": "9.3.2"
+  },
+  "peerDependencies": {
+    "eslint": "^8.0",
+    "vue-eslint-parser": "^9.0"
+  },
+  "scripts": {
+    "lint": "eslint -c ./.eslintrc.js ./ --exit-on-fatal-error",
+    "test": "vitest run --config ./vitest.config.ts",
+    "test:coverage": "pnpm run test -- --coverage",
+    "test:watch": "vitest watch"
+  }
+}

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

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

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

@@ -0,0 +1,5 @@
+<template>
+    <div class="u-padding-4 u-display-flex u-row-gap-8"></div>
+</template>
+
+<script setup></script>

package/rules/vue-old-spacer-tokens/vue-old-spacer-tokens.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/vue-old-spacer-tokens', () => {
+    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__', 'vue-old-spacer-tokens.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/vue-old-spacer-tokens',
+            severity: 1,
+            message: 'Found outdated class names that need replacing',
+            messageId: 'updateUtilityClass',
+            line: 2,
+            column: 16,
+            nodeType: 'VLiteral',
+            endLine: 2,
+            endColumn: 56,
+            fix: { range: [26, 66], text: '"b-padding-020 u-display-flex u-row-gap-8"' },
+        });
+    });
+});

package/rules/vue-old-spacer-tokens/vue-old-spacer-tokens.test.ts

@@ -0,0 +1,68 @@
+import { RuleTester } from 'eslint';
+import spacerTokens from './vue-old-spacer-tokens';
+
+const ruleTester = new RuleTester({
+    parser: require.resolve('vue-eslint-parser'),
+});
+
+describe('@adyen/bento/vue-old-spacer-tokens should suggest a Bento alternative to ADL classes', () => {
+    ruleTester.run('vue-old-spacer-tokens', spacerTokens, {
+        valid: [
+            {
+                name: 'Valid Bento classes',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <div class="b-padding-020 b-padding-040"></div>
+                </template>
+                `,
+            },
+            {
+                name: 'Unmapped ADL classes with Bento classes',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <div class="b-padding-100 u-padding-88"></div>
+                </template>
+                `,
+            },
+            {
+                name: 'Varied utilities mix without Bento classes',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <div class="u-display-flex u-flex-direction-column u-row-gap-j"></div>
+                </template>
+                `,
+            },
+        ],
+        invalid: [
+            {
+                code: `
+                <template>
+                    <div class="u-padding-4 u-padding-8"></div>
+                </template>
+                `,
+                output: `
+                <template>
+                    <div class="b-padding-020 b-padding-040"></div>
+                </template>
+                `,
+                errors: [{ message: 'Found outdated class names that need replacing' }],
+            },
+            {
+                code: `
+                <template>
+                    <div class="u-display-flex u-flex-direction-column u-row-gap-8 u-margin-top-16"></div>
+                </template>
+                `,
+                output: `
+                <template>
+                    <div class="u-display-flex u-flex-direction-column u-row-gap-8 b-margin-top-070"></div>
+                </template>
+                `,
+                errors: [{ message: 'Found outdated class names that need replacing' }],
+            },
+        ],
+    });
+});