@dialpad/eslint-plugin-dialtone 1.5.0 → 1.7.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Dialpad
+
+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

@@ -1,10 +1,18 @@
 # eslint-plugin-dialtone
 
-dialtone eslint plugin containing rules to help developers maintain dialtone recommended practices. 
+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.
+We use [yeoman generator](https://github.com/eslint/generator-eslint) to generate new rules.
+
+First, install it globally:
+
+```shell
+pnpm add -g yo generator-eslint mem-fs
+```
+
+Then, run the command below and follow the steps.
 
 ```shell
 yo eslint:rule
@@ -12,8 +20,8 @@ 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.
+You can try the code you're trying to detect here: [AST Explorer](https://astexplorer.net/)
+to know which function you need to call inside `create` function.
 
 ## Installation
 
@@ -31,7 +39,8 @@ npm install @dialpad/eslint-plugin-dialtone --save-dev
 
 ## Usage
 
-Add `@dialpad/dialtone` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
+Add `@dialpad/dialtone` to the plugins section of your `.eslintrc` configuration file.
+You can omit the `eslint-plugin-` prefix:
 
 ```json
 {
@@ -41,7 +50,6 @@ Add `@dialpad/dialtone` to the plugins section of your `.eslintrc` configuration
 }
 ```
 
-
 Then configure the rules you want to use under the rules section.
 
 ```json
@@ -55,5 +63,3 @@ Then configure the rules you want to use under the rules section.
 ## Supported Rules
 
 * Fill in provided rules here
-
-

package/lib/rules/custom-implementation.js

@@ -20,7 +20,7 @@ module.exports = {
     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',
+      avoidRequireContext: 'Avoid custom dialtone icons implementation. Use DtIcon component instead https://dialtone.dialpad.com/vue/?path=/docs/components-icon--default',
       avoidCustomImport: 'Avoid importing dialtone icons with custom webpack alias'
     }
   },

package/lib/rules/deprecated-component.js

@@ -32,31 +32,31 @@ module.exports = {
         fileName: 'select_menu',
         componentName: 'SelectMenu',
         replacement: 'DtComboboxWithPopover',
-        link: 'https://vue.dialpad.design/?path=/story/recipes-comboboxes-combobox-with-popover--default'
+        link: 'https://dialtone.dialpad.com/vue/?path=/story/recipes-comboboxes-combobox-with-popover--default'
       },
       {
         fileName: 'dropdown_menu',
         componentName: 'DropdownMenu',
         replacement: 'DtSelectMenu',
-        link: 'https://vue.dialpad.design/?path=/story/components-select-menu--default'
+        link: 'https://dialtone.dialpad.com/vue/?path=/story/components-select-menu--default'
       },
       {
         fileName: 'base_toggle',
         componentName: 'BaseToggle',
         replacement: 'DtToggle',
-        link: 'https://vue.dialpad.design/?path=/story/components-toggle--default'
+        link: 'https://dialtone.dialpad.com/vue/?path=/story/components-toggle--default'
       },
       {
         fileName: 'base_date_picker',
         componentName: 'BaseDatePicker',
         replacement: 'DtDatepicker',
-        link: 'https://vue.dialpad.design/?path=/story/components-datepicker--default'
+        link: 'https://dialtone.dialpad.com/vue/?path=/story/components-datepicker--default'
       },
       {
         fileName: 'checkbox',
         componentName: 'Checkbox',
         replacement: 'DtCheckbox',
-        link: 'https://vue.dialpad.design/?path=/story/components-checkbox--default'
+        link: 'https://dialtone.dialpad.com/vue/?path=/story/components-checkbox--default'
       }
     ]
 

package/lib/rules/deprecated-directive.js

@@ -30,7 +30,7 @@ module.exports = {
       {
         directiveName: 'tooltip',
         replacement: 'dt-tooltip',
-        link: 'https://vue.dialpad.design/?path=/docs/directives-tooltip--docs',
+        link: 'https://dialtone.dialpad.com/vue/?path=/docs/directives-tooltip--docs',
       },
     ];
 

package/lib/rules/deprecated-icons.js

@@ -20,7 +20,7 @@ module.exports = {
         fixable: null, // Or `code` or `whitespace`
         schema: [], // Add a schema if the rule has options
         messages: {
-            avoidDeprecatedImport: 'Avoid usage of old dialtone icons [deprecated]. Check https://dialpad.design/components/icon.html for details.',
+            avoidDeprecatedImport: 'Avoid usage of old dialtone icons [deprecated]. Check https://dialtone.dialpad.com/components/icon.html for details.',
         },
     },
     create(context) {

package/lib/rules/recommend-typography-style.js

@@ -0,0 +1,49 @@
+/**
+ * @fileoverview Utilities to set Font family, Font weight, Font size, and Line height separately are discouraged in favor of composed typography utilities
+ * @author Nina Repetto
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion', // `problem`, `suggestion`, or `layout`
+    docs: {
+      description: "Utilities to set Font family, Font weight, Font size, and Line height separately are discouraged in favor of composed typography utilities",
+      recommended: false,
+      url: 'https://github.com/dialpad/eslint-plugin-dialtone/blob/main/docs/rules/recommend-typography-style.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: {
+      recommendTypographyStyle: `Utilities to set Font family, Font weight, Font size, and Line height separately are
+      discouraged in favor of composed typography utilities. Checkout the available classes here:
+      https://dialtone.dialpad.com/design/typography/#api. There can be cases where using these utilities is intentional and valid,
+      in which case you can ignore this lint warning.`,
+    }, // Add messageId and message
+  },
+
+  create(context) {
+    return context.parserServices.defineTemplateBodyVisitor({
+      // Visitor functions for Vue templates
+      VAttribute(node) {
+        if (node.key.name === 'class') {
+          const classes = node.value.value.split(' ');
+          const typographyClasses = ['d-fs', 'd-fw', 'd-lh', 'd-ff'];
+          const typographyClassesFound = classes.filter((className) =>
+            typographyClasses.some((typographyClass) => className.includes(typographyClass))
+          );
+          if (typographyClassesFound.length > 0) {
+            context.report({
+              node: node,
+              messageId: 'recommendTypographyStyle',
+            });
+          }
+        }
+      }
+    });
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/eslint-plugin-dialtone",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "dialtone eslint plugin",
   "keywords": [
     "Dialpad",
@@ -29,27 +29,27 @@
       "name": "Ignacio Ropolo",
       "email": "ignacio.ropolo@dialpad.com",
       "url": "https://github.com/iropolo"
+    },
+    {
+      "name": "Nina Repetto",
+      "email": "nina.repetto@dialpad.com",
+      "url": "https://github.com/ninamarina"
     }
   ],
-  "repository": "git@github.com:dialpad/eslint-plugin-dialtone.git",
   "bugs": {
     "email": "dialtone@dialpad.com"
   },
   "license": "MIT",
   "main": "./lib/index.js",
+  "files": [
+    "lib"
+  ],
   "exports": "./lib/index.js",
-  "scripts": {
-    "lint": "eslint .",
-    "test": "mocha tests --recursive"
-  },
   "dependencies": {
     "requireindex": "^1.2.0"
   },
   "devDependencies": {
-    "eslint": "^8.19.0",
-    "eslint-plugin-eslint-plugin": "^5.0.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-vue": "^9.17.0",
+    "eslint-plugin-eslint-plugin": "^5.2.1",
     "mocha": "^10.0.0"
   },
   "engines": {
@@ -57,5 +57,11 @@
   },
   "peerDependencies": {
     "eslint": ">=7"
+  },
+  "scripts": {
+    "lint": "run-s lint:docs lint:code",
+    "lint:code": "eslint '**/*.js'",
+    "lint:docs": "markdownlint 'docs/**/*.md'",
+    "test": "mocha tests --recursive"
   }
-}
+}

package/.eslintrc.js

@@ -1,23 +0,0 @@
-"use strict";
-
-module.exports = {
-  root: true,
-  extends: [
-    "eslint:recommended",
-    "plugin:eslint-plugin/recommended",
-    "plugin:node/recommended",
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    parser: "vue-eslint-parser"
-  },
-  env: {
-    node: true,
-  },
-  overrides: [
-    {
-      files: ["tests/**/*.js"],
-      env: { mocha: true },
-    },
-  ],
-};

package/docs/rules/custom-implementation.md

@@ -1,29 +0,0 @@
-# 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/deprecated-component.md

@@ -1,37 +0,0 @@
-# Finds deprecated components that should be replaced by Dialtone Vue components
-
-## Rule Details
-
-This informs developers of deprecated product side components that should be replaced by Dialtone Vue components. It will suggest a replacement component.
-
-Currently the components with the below filenames are considered deprecated:
-
-- select_menu
-- dropdown_menu
-- base_toggle
-- base_date_picker
-- checkbox
-
-This rule specifically targets components in ubervoice. If you are using Dialtone Vue outside of ubervoice you should not enable this rule.
-
-Examples of **incorrect** code for this rule:
-
-**import of a deprecated component**:
-
-```js
-import SelectMenu from '../components/select_menu.vue';
-```
-
-Examples of **correct** code for this rule:
-
-**import of a Dialtone Vue component**:
-
-```js
-import { DtComboboxWithPopover } from '@dialpad/dialtone-vue';
-```
-
-**import of a custom local component**:
-
-```js
-import MyComponent from './my_component.vue';
-```

package/docs/rules/deprecated-directive.md

@@ -1,31 +0,0 @@
-# Finds deprecated directives that should be replaced by Dialtone Vue directives
-
-## Rule Details
-
-This informs developers of deprecated product side directives that should be replaced by Dialtone Vue directives. It will suggest a replacement directive.
-
-Currently the directives with the below attribute names are considered deprecated:
-
-- v-tooltip
-
-This rule specifically targets components in ubervoice. If you are using Dialtone Vue outside of ubervoice you may want to disable this rule.
-
-Examples of **incorrect** code for this rule:
-
-**usage of a deprecated directive**:
-
-```html
-<template>
-  <button v-tooltip="tooltipText">Hover</button>
-</template>
-```
-
-Examples of **correct** code for this rule:
-
-**usage of the correct replacement directive**:
-
-```html
-<template>
-  <button v-dt-tooltip="tooltipText">Hover</button>
-</template>
-```

package/docs/rules/deprecated-icons.md

@@ -1,39 +0,0 @@
-# Finds deprecated dialtone svg and vue icons usage (deprecated-icons)
-
-We separated icons from dialtone into dialtone-icons repo, 
-so we are deprecating old svg and 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 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';
-import IconSettings from '@dialpad/dialtone/vue/icons/IconSettings';
-import IconSettings from '../node_modules/@dialpad/dialtone/vue/icons/IconSettings';
-```
-
-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" />
-```
-
-## Exceptions
-
-For now, we are allowing the importing of `brand` and `spot illustrations` icons from dialtone, so this rule will not trigger if you import an
-icon like: 
-
-```js
-import dialpadAiIcon from '../../node_modules/@dialpad/dialtone/lib/build/svg/brand/dialpad-ai.svg';
-```

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

@@ -1,44 +0,0 @@
-/**
- * @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/deprecated-component.js

@@ -1,123 +0,0 @@
-/**
- * @fileoverview Detects usages of old dialpad product side components which should be replaced by Dialtone components.
- * @author Brad Paugh
- */
-"use strict";
-
-//------------------------------------------------------------------------------
-// Requirements
-//------------------------------------------------------------------------------
-
-const rule = require("../../../lib/rules/deprecated-component"), RuleTester = require("eslint").RuleTester;
-
-
-//------------------------------------------------------------------------------
-// Tests
-//------------------------------------------------------------------------------
-
-const ruleTester = new RuleTester({parserOptions: {sourceType: 'module', ecmaVersion: 'latest'}});
-ruleTester.run("deprecated-component", rule, {
-    valid: [
-        {
-            name: 'Non deprecated component',
-            code: "import MyComponent from './my_component';",
-        },
-        {
-            name: 'Component that contains select_menu in the filename, but is not the file we are looking for',
-            code: "import SelectMenuOption from '../components/select_menu_option';",
-        },
-    ],
-
-    invalid: [
-        {
-            name: 'Deprecated SelectMenu',
-            code: "import SelectMenu from '../components/select_menu';",
-            errors: [
-                {
-                    messageId: "deprecatedComponent"
-                }
-            ],
-        },
-        {
-            name: 'Deprecated SelectMenu .vue',
-            code: "import SelectMenu from '../components/select_menu.vue';",
-            errors: [
-                {
-                    messageId: "deprecatedComponent"
-                }
-            ],
-        },
-        {
-            name: 'Deprecated DropdownMenu',
-            code: "import DropdownMenu from '../components/dropdown_menu';",
-            errors: [
-                {
-                    messageId: "deprecatedComponent"
-                }
-            ],
-        },
-        {
-            name: 'Deprecated DropdownMenu .vue',
-            code: "import DropdownMenu from '../components/dropdown_menu.vue';",
-            errors: [
-                {
-                    messageId: "deprecatedComponent"
-                }
-            ],
-        },
-        {
-            name: 'Deprecated BaseToggle',
-            code: "import BaseToggle from '../components/base_toggle';",
-            errors: [
-                {
-                    messageId: "deprecatedComponent"
-                }
-            ],
-        },
-        {
-            name: 'Deprecated BaseToggle .vue',
-            code: "import BaseToggle from '../components/base_toggle.vue';",
-            errors: [
-                {
-                    messageId: "deprecatedComponent"
-                }
-            ],
-        },
-        {
-            name: 'Deprecated BaseDatePicker',
-            code: "import BaseDatePicker from '../components/base_date_picker';",
-            errors: [
-                {
-                    messageId: "deprecatedComponent"
-                }
-            ],
-        },
-        {
-            name: 'Deprecated BaseDatePicker .vue',
-            code: "import BaseDatePicker from '../components/base_date_picker.vue';",
-            errors: [
-                {
-                    messageId: "deprecatedComponent"
-                }
-            ],
-        },
-        {
-            name: 'Deprecated Checkbox',
-            code: "import Checkbox from '../components/checkbox';",
-            errors: [
-                {
-                    messageId: "deprecatedComponent"
-                }
-            ],
-        },
-        {
-            name: 'Deprecated Checkbox .vue',
-            code: "import Checkbox from '../components/checkbox.vue';",
-            errors: [
-                {
-                    messageId: "deprecatedComponent"
-                }
-            ],
-        },
-    ],
-});

package/tests/lib/rules/deprecated-directive.js

@@ -1,40 +0,0 @@
-/**
- * @fileoverview Detects usages of old dialpad product side components which should be replaced by Dialtone components.
- * @author Brad Paugh
- */
-"use strict";
-
-//------------------------------------------------------------------------------
-// Requirements
-//------------------------------------------------------------------------------
-
-const rule = require("../../../lib/rules/deprecated-directive"), RuleTester = require("eslint").RuleTester;
-
-
-//------------------------------------------------------------------------------
-// Tests
-//------------------------------------------------------------------------------
-const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 'latest' }
-})
-ruleTester.run("deprecated-directive", rule, {
-  valid: [
-    {
-      name: 'Non deprecated directive',
-      code: "<template><dt-button v-dt-tooltip=\"'tooltip'\" /></template>",
-    },
-  ],
-
-  invalid: [
-    {
-      name: 'Deprecated directive',
-      code: "<template><button v-tooltip=\"'tooltip'\" /></template>",
-      errors: [
-        {
-            messageId: "deprecatedDirective"
-        }
-      ],
-    },
-  ],
-});

package/tests/lib/rules/deprecated-icons.js

@@ -1,72 +0,0 @@
-/**
- * @fileoverview Finds old dialtone svg icons usage
- * @author julio ortega
- */
-"use strict";
-
-//------------------------------------------------------------------------------
-// Requirements
-//------------------------------------------------------------------------------
-
-const rule = require("../../../lib/rules/deprecated-icons"), RuleTester = require("eslint").RuleTester;
-
-
-//------------------------------------------------------------------------------
-// Tests
-//------------------------------------------------------------------------------
-
-const ruleTester = new RuleTester({parserOptions: {sourceType: 'module', ecmaVersion: 'latest'}});
-ruleTester.run("deprecated-icons", rule, {
-    valid: [
-        {
-            name: 'New icon import',
-            code: "import svgLockIcon from '@dialpad/dialtone-icons/dist/svg/lock.svg';",
-        },
-        {
-            name: 'Brand SVG icon import',
-            code: "import dialpadAiIcon from '../../node_modules/@dialpad/dialtone/lib/build/svg/brand/dialpad-ai.svg';",
-        },
-        {
-            name: 'Brand VUE icon import',
-            code: "import IconDialpadAi from '@dialpad/dialtone/vue/icons/IconDialpadAi';",
-        },
-        {
-            name: 'Spot illustration import',
-            code: "import SpotBrowserTableGraph from '@dialpad/dialtone/vue/spot/SpotBrowserTableGraph';",
-        },
-        {
-            name: 'Dialtone Styles import',
-            code: "import dialtoneCSS from '@dialpad/dialtone/lib/build/less/dialtone.less';",
-        }
-    ],
-
-    invalid: [
-        {
-            name: 'Old SVG icon import from build',
-            code: "import svgLockIcon from '../node_modules/@dialpad/dialtone/lib/build/svg/system/lock.svg';",
-            errors: [
-                {
-                    messageId: "avoidDeprecatedImport"
-                }
-            ],
-        },
-        {
-            name: 'Old SVG icon import from dist',
-            code: "import svgLockIcon from '../node_modules/@dialpad/dialtone/lib/dist/svg/system/lock.svg';",
-            errors: [
-                {
-                    messageId: "avoidDeprecatedImport"
-                }
-            ],
-        },
-        {
-            name: 'Old VUE icon import',
-            code: "import IconSettings from '@dialpad/dialtone/vue/icons/IconSettings';",
-            errors: [
-                {
-                    messageId: "avoidDeprecatedImport"
-                }
-            ],
-        },
-    ],
-});