@dialpad/eslint-plugin-dialtone 1.0.0 → 1.0.2

package/.eslintrc.js

@@ -7,6 +7,9 @@ module.exports = {
     "plugin:eslint-plugin/recommended",
     "plugin:node/recommended",
   ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  },
   env: {
     node: true,
   },

package/README.md

@@ -1,6 +1,19 @@
 # eslint-plugin-dialtone
 
-dialtone eslint plugin
+dialtone eslint plugin containing rules to help developers maintain dialtone recommended practices. 
+
+## Adding a new rule
+
+We use yeoman generator to generate new rules, simply run the command below and follow the steps.
+
+```shell
+yo eslint:rule
+```
+
+### Writing rules
+
+You can try the code you're trying to detect here: https://astexplorer.net/ to know which function you need to call
+inside `create` function.
 
 ## Installation
 

package/docs/rules/custom-implementation.md

@@ -0,0 +1,29 @@
+# Detects custom dialtone icons implementations (custom-implementation)
+
+We detected some custom implementations of vue icons.
+
+## Rule Details
+
+This rule aims to detect and prevent custom implementations using require.context and @dIcon, @dSpot
+
+Examples of **incorrect** code for this rule:
+
+```js
+import SpotFileUpload from '@dSpot/SpotFileUpload';
+import IconDynamicLayout from '@dIcon/IconDynamicLayout';
+```
+
+```js
+const requireIcon = require.context(
+    '@dialpad/dialtone/lib/dist/vue/icons',
+    false,
+    /.*\\.vue$/,
+);
+```
+
+Examples of **correct** code for this rule:
+
+```js
+import { DtIcon } from '@dialpad/dialtone-vue';
+<dt-icon name="settings" />
+```

package/docs/rules/old-svg-icons.md

@@ -0,0 +1,28 @@
+# Finds old dialtone svg icons usage (old-svg-icons)
+
+We separated icons from dialtone into dialtone-icons repo, 
+so we are deprecating old svg icons on dialtone once the migrations are finished.
+
+## Rule Details
+
+This rule aims to inform developers that they're importing icons from dialtone instead of dialtone-icons.
+
+Examples of **incorrect** code for this rule:
+
+```js
+import svgLockIcon from '@dialpad/dialtone/lib/build/svg/system/lock.svg';
+import svgLockIcon from '../node_modules/@dialpad/dialtone/lib/dist/svg/system/lock.svg';
+```
+
+Examples of **correct** code for this rule:
+
+**If you can't use vue**:
+```js
+import svgLockIcon from '@dialpad/dialtone-icons/dist/svg/lock.svg';
+```
+
+**If you can use vue**
+```js
+import { DtIcon } from '@dialpad/dialtone-vue';
+<dt-icon name="lock" />
+```

package/docs/rules/old-vue-icons.md

@@ -0,0 +1,21 @@
+# Finds old dialtone vue icons usage (old-vue-icons)
+
+We separated icons from dialtone into dialtone-icons repo, 
+so we are deprecating old vue icons on dialtone once the migrations are finished.
+
+## Rule Details
+
+This rule aims to inform developers that they're importing icons from dialtone instead of using dtIcon component from dialtone-vue.
+
+Examples of **incorrect** code for this rule:
+
+```js
+import IconSettings from '@dialpad/dialtone/vue/icons/IconSettings';
+```
+
+Examples of **correct** code for this rule:
+
+```js
+import { DtIcon } from '@dialpad/dialtone-vue';
+<dt-icon name="settings" />
+```

package/lib/rules/custom-implementation.js

@@ -0,0 +1,69 @@
+/**
+ * @fileoverview Detects custom dialtone icons implementations
+ * @author julio ortega
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'suggestion', // `problem`, `suggestion`, or `layout`
+    docs: {
+      description: "Detects custom dialtone icons implementations",
+      recommended: false,
+      url: 'https://github.com/dialpad/eslint-plugin-dialtone/blob/main/docs/rules/custom-implementation.md', // URL to the documentation page for this rule
+    },
+    fixable: null, // Or `code` or `whitespace`
+    schema: [], // Add a schema if the rule has options
+    messages: {
+      avoidRequireContext: 'Avoid custom dialtone icons implementation. Use DtIcon component instead https://vue.dialpad.design/?path=/docs/components-icon--default',
+      avoidCustomImport: 'Avoid importing dialtone icons with custom webpack alias'
+    }
+  },
+
+  create(context) {
+    // variables should be defined here
+
+    //----------------------------------------------------------------------
+    // Helpers
+    //----------------------------------------------------------------------
+
+    // any helper functions should go here or else delete this section
+
+    //----------------------------------------------------------------------
+    // Public
+    //----------------------------------------------------------------------
+
+    return {
+      ImportDeclaration(node) {
+        const foundIndex = node.source.value.toLowerCase().search(/@d(spot|icon)/g);
+         if (foundIndex === -1) return;
+
+         context.report({
+            node: node,
+            messageId: 'avoidCustomImport',
+        });
+      },
+      VariableDeclaration(node) {
+        node.declarations.forEach(declaration => {
+          const calleeIsRequireContext = declaration?.init?.callee?.object?.name === 'require' && declaration?.init?.callee?.property?.name === 'context';
+          if (!calleeIsRequireContext) return;
+
+          const argumentsIncludeDialtone = declaration?.init?.arguments?.find(argument => {
+            if (typeof argument.value !== 'string') return false;
+            return argument.value.toLowerCase().search(/@dialpad\/dialtone\/.*\/icons/g) !== -1
+          });
+          if (!argumentsIncludeDialtone) return;
+          context.report({
+            node: node,
+            messageId: 'avoidRequireContext',
+          })
+        })
+      }
+    };
+  },
+};

package/lib/rules/old-svg-icons.js

@@ -0,0 +1,51 @@
+/**
+ * @fileoverview Finds old dialtone svg icons usage
+ * @author julio ortega
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+    meta: {
+        type: 'suggestion', // `problem`, `suggestion`, or `layout`
+        docs: {
+            description: 'Finds old svg icons imports from dialtone',
+            recommended: false,
+            url: 'https://github.com/dialpad/eslint-plugin-dialtone/blob/main/docs/rules/old-svg-icons.md', // URL to the documentation page for this rule
+        },
+        fixable: null, // Or `code` or `whitespace`
+        schema: [], // Add a schema if the rule has options
+        messages: {
+            avoidSVGImport: 'Avoid usage of old dialtone icons [deprecated]. Check https://dialpad.design/components/icon.html for details.',
+        },
+    },
+    create(context) {
+        // variables should be defined here
+
+        //----------------------------------------------------------------------
+        // Helpers
+        //----------------------------------------------------------------------
+
+        // any helper functions should go here or else delete this section
+
+        //----------------------------------------------------------------------
+        // Public
+        //----------------------------------------------------------------------
+
+        return {
+            ImportDeclaration(node) {
+                const foundIndex = node.source.value.toLowerCase().search(/@dialpad\/dialtone\/.*\.svg/g);
+                if (foundIndex === -1) return;
+
+                context.report({
+                    node: node,
+                    messageId: 'avoidSVGImport',
+                });
+            }
+        };
+    },
+};

package/lib/rules/{old-dialtone-icons.js → old-vue-icons.js}

@@ -1,5 +1,5 @@
 /**
- * @fileoverview Finds and warns about old dialtone icons usage
+ * @fileoverview Finds old dialtone vue icons usage
  * @author julio ortega
  */
 "use strict";
@@ -13,16 +13,17 @@ module.exports = {
     meta: {
         type: 'suggestion', // `problem`, `suggestion`, or `layout`
         docs: {
-            description: "Finds and warns about old dialtone icons usage",
+            description: 'Finds old vue icons imports from dialtone',
             recommended: false,
-            url: null, // URL to the documentation page for this rule
+            url: 'https://github.com/dialpad/eslint-plugin-dialtone/blob/main/docs/rules/old-vue-icons.md', // URL to the documentation page for this rule
         },
         fixable: null, // Or `code` or `whitespace`
         schema: [], // Add a schema if the rule has options
         messages: {
-            avoidImport: "Avoid usage of old dialtone icons [deprecated]. Check https://dialpad.design",
-        },
+            avoidVueImport: 'Avoid usage of old dialtone vue icons [deprecated]. Use DtIcon component instead https://vue.dialpad.design/?path=/docs/components-icon--default'
+        }
     },
+
     create(context) {
         // variables should be defined here
 
@@ -38,12 +39,11 @@ module.exports = {
 
         return {
             ImportDeclaration(node) {
-                if (node.source.value.includes('@dialpad/dialtone/lib/build')) {
-                    context.report({
-                        node: node,
-                        messageId: "avoidImport",
-                    });
-                }
+                if (!node.source.value.toLowerCase().includes('@dialpad/dialtone/vue')) return;
+                context.report({
+                    node: node,
+                    messageId: 'avoidVueImport',
+                });
             }
         };
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/eslint-plugin-dialtone",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "dialtone eslint plugin",
   "keywords": [
     "Dialpad",

package/tests/lib/rules/custom-implementation.js

@@ -0,0 +1,44 @@
+/**
+ * @fileoverview Detects custom dialtone icons implementations
+ * @author julio ortega
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require("../../../lib/rules/custom-implementation"),
+    RuleTester = require("eslint").RuleTester;
+
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({parserOptions: {sourceType: 'module', ecmaVersion: 'latest'}});
+ruleTester.run("custom-implementation", rule, {
+    valid: [
+        {
+            name: 'Dialtone-vue DtIcon import',
+            code: "import { DtIcon } from '@dialpad/dialtone-vue';",
+        },
+    ],
+
+    invalid: [
+        {
+            name: 'require context',
+            code: "const requireIcon = require.context(\n" +
+                "  '@dialpad/dialtone/lib/dist/vue/icons',\n" +
+                "  false,\n" +
+                "  /.*\\.vue$/\n" +
+                ");",
+            errors: [{messageId: 'avoidRequireContext'}],
+        },
+        {
+            name: 'custom import',
+            code: 'import SpotFileUpload from \'@dSpot/SpotFileUpload\';',
+            errors: [{messageId: 'avoidCustomImport'}],
+        },
+    ],
+});

package/tests/lib/rules/old-svg-icons.js

@@ -0,0 +1,51 @@
+/**
+ * @fileoverview Finds old dialtone svg icons usage
+ * @author julio ortega
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require("../../../lib/rules/old-svg-icons"), RuleTester = require("eslint").RuleTester;
+
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({parserOptions: {sourceType: 'module', ecmaVersion: 'latest'}});
+ruleTester.run("old-svg-icons", rule, {
+    valid: [
+        {
+            name: 'New icon import',
+            code: "import svgLockIcon from '@dialpad/dialtone-icons/dist/svg/lock.svg';",
+        },
+        {
+            name: 'Dialtone Styles import',
+            code: "import dialtoneCSS from '@dialpad/dialtone/lib/build/less/dialtone.less';",
+        }
+    ],
+
+    invalid: [
+        {
+            name: 'Old icon import from build',
+            code: "import svgLockIcon from '../node_modules/@dialpad/dialtone/lib/build/svg/system/lock.svg';",
+            errors: [
+                {
+                    messageId: "avoidSVGImport"
+                }
+            ],
+        },
+        {
+            name: 'Old icon import from dist',
+            code: "import svgLockIcon from '../node_modules/@dialpad/dialtone/lib/dist/svg/system/lock.svg';",
+            errors: [
+                {
+                    messageId: "avoidSVGImport"
+                }
+            ],
+        }
+    ],
+});

package/tests/lib/rules/old-vue-icons.js

@@ -0,0 +1,34 @@
+/**
+ * @fileoverview Finds old dialtone vue icons usage
+ * @author julio ortega
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require("../../../lib/rules/old-vue-icons"), RuleTester = require("eslint").RuleTester;
+
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({parserOptions: {sourceType: 'module', ecmaVersion: 'latest'}});
+ruleTester.run("old-vue-icons", rule, {
+  valid: [
+    {
+      name: 'Dialtone-vue DtIcon import',
+      code: "import { DtIcon } from '@dialpad/dialtone-vue';",
+    },
+  ],
+
+  invalid: [
+    {
+      name: 'Dialtone vue icon import',
+      code: "import IconSettingsOld from '@dialpad/dialtone/vue/icons/IconSettings';",
+      errors: [{ messageId: 'avoidVueImport' }],
+    },
+  ],
+});

package/docs/rules/old-dialtone-icons.md

@@ -1,35 +0,0 @@
-# Finds and warns about old dialtone icons usage (old-dialtone-icons)
-
-Please describe the origin of the rule here.
-
-## Rule Details
-
-This rule aims to...
-
-Examples of **incorrect** code for this rule:
-
-```js
-
-// fill me in
-
-```
-
-Examples of **correct** code for this rule:
-
-```js
-
-// fill me in
-
-```
-
-### Options
-
-If there are any options, describe them here. Otherwise, delete this section.
-
-## When Not To Use It
-
-Give a short description of when it would be appropriate to turn off this rule.
-
-## Further Reading
-
-If there are other links that describe the issue this rule addresses, please include them here in a bulleted list.

package/tests/lib/rules/old-dialtone-icons.js

@@ -1,31 +0,0 @@
-/**
- * @fileoverview Finds and warns about old dialtone icons usage
- * @author julio ortega
- */
-"use strict";
-
-//------------------------------------------------------------------------------
-// Requirements
-//------------------------------------------------------------------------------
-
-const rule = require("../../../lib/rules/old-dialtone-icons"),
-  RuleTester = require("eslint").RuleTester;
-
-
-//------------------------------------------------------------------------------
-// Tests
-//------------------------------------------------------------------------------
-
-const ruleTester = new RuleTester();
-ruleTester.run("old-dialtone-icons", rule, {
-  valid: [
-    // give me some code that won't trigger a warning
-  ],
-
-  invalid: [
-    {
-      code: "import svgLockIcon from '@dialpad/dialtone/lib/build/svg/system/lock.svg';",
-      errors: [{ message: "Fill me in.", type: "Me too" }],
-    },
-  ],
-});