@dialpad/eslint-plugin-dialtone 1.3.0 → 1.5.0

package/.eslintrc.js

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

package/docs/rules/deprecated-directive.md

@@ -0,0 +1,31 @@
+# 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/lib/rules/deprecated-directive.js

@@ -0,0 +1,55 @@
+/**
+ * @fileoverview Detects usages of old dialpad product side components which should be replaced by Dialtone components.
+ * @author Brad Paugh
+ */
+'use strict';
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion', // `problem`, `suggestion`, or `layout`
+    docs: {
+      description:
+        'Detects usages of deprecated vue directives that should be replaced by Dialtone Vue directives',
+      recommended: false,
+      url: 'https://github.com/dialpad/eslint-plugin-dialtone/blob/main/docs/rules/deprecated-directive.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: {
+      deprecatedDirective:
+        'v-{{ directiveName }} is deprecated and should be replaced with the Dialtone Vue v-{{ replacement }} component.\n{{ link }}',
+    },
+  },
+
+  create(context) {
+    const deprecatedDirectives = [
+      {
+        directiveName: 'tooltip',
+        replacement: 'dt-tooltip',
+        link: 'https://vue.dialpad.design/?path=/docs/directives-tooltip--docs',
+      },
+    ];
+
+    return context.parserServices.defineTemplateBodyVisitor({
+      VAttribute(node) {
+        deprecatedDirectives.forEach((item) => {
+          if (node.directive && node.key.name.name === item.directiveName) {
+            context.report({
+              node: node,
+              messageId: 'deprecatedDirective',
+              data: {
+                directiveName: item.directiveName,
+                replacement: item.replacement,
+                link: item.link,
+              },
+            });
+          }
+        });
+      },
+    });
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/eslint-plugin-dialtone",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "dialtone eslint plugin",
   "keywords": [
     "Dialpad",
@@ -49,6 +49,7 @@
     "eslint": "^8.19.0",
     "eslint-plugin-eslint-plugin": "^5.0.0",
     "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-vue": "^9.17.0",
     "mocha": "^10.0.0"
   },
   "engines": {

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

@@ -0,0 +1,40 @@
+/**
+ * @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"
+        }
+      ],
+    },
+  ],
+});