@dialpad/eslint-plugin-dialtone 1.11.0 → 1.11.1

package/lib/rules/deprecated-stack-alignment-classes.js

@@ -1,7 +1,26 @@
 /**
- * @fileoverview Recommends using align/justify props instead of CSS utilities on Stack component
+ * @fileoverview Recommends using props instead of CSS utilities on Stack component
  */
-"use strict";
+'use strict';
+
+//------------------------------------------------------------------------------
+// Constants
+//------------------------------------------------------------------------------
+
+/**
+ * Gap utility classes that have DtStack equivalents.
+ * Maps utility class suffix to DtStack gap prop value.
+ * Gaps > 64px have no equivalent and should not be flagged.
+ */
+const GAP_WITH_EQUIVALENTS = {
+  '0': '0',
+  '8': '400',
+  '16': '500',
+  '24': '550',
+  '32': '600',
+  '48': '650',
+  '64': '700',
+};
 
 //------------------------------------------------------------------------------
 // Rule Definition
@@ -11,7 +30,7 @@ module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
-      description: "Recommend using align/justify props instead of CSS utilities on Stack component",
+      description: 'Recommend using props instead of CSS utilities on Stack component',
       recommended: false,
       url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/deprecated-stack-alignment-classes.md',
     },
@@ -20,19 +39,23 @@ module.exports = {
     messages: {
       useAlignProp: 'Use the `align` prop instead of `d-ai-*` utility classes on <dt-stack>. See: https://dialtone.dialpad.com/components/stack.html#align',
       useJustifyProp: 'Use the `justify` prop instead of `d-jc-*` utility classes on <dt-stack>. See: https://dialtone.dialpad.com/components/stack.html#justify',
+      useDirectionProp: 'Use the `direction` prop instead of `d-fd-*` utility classes on <dt-stack>. See: https://dialtone.dialpad.com/components/stack.html#direction',
+      useGapProp: 'Use the `gap` prop instead of `d-g*` utility classes on <dt-stack>. See: https://dialtone.dialpad.com/components/stack.html#gap',
+      removeRedundantFlex: 'Remove `d-d-flex` from <dt-stack> - it is already a flex container.',
     },
   },
 
   create(context) {
     const sourceCode = context.sourceCode ?? context.getSourceCode();
     return sourceCode.parserServices.defineTemplateBodyVisitor({
+       
       VElement(node) {
         // Check if element is dt-stack or DtStack
         const elementName = node.name || node.rawName;
         if (elementName === 'dt-stack' || elementName === 'DtStack') {
           // Find class attribute
           const classAttr = node.startTag.attributes.find(
-            attr => attr.key && attr.key.name === 'class'
+            attr => attr.key && attr.key.name === 'class',
           );
 
           if (classAttr && classAttr.value && classAttr.value.value) {
@@ -53,9 +76,35 @@ module.exports = {
                 messageId: 'useJustifyProp',
               });
             }
+
+            // Check for d-fd-* classes (flex-direction utilities)
+            if (/d-fd-(row|column|row-reverse|column-reverse)/.test(classes)) {
+              context.report({
+                node: classAttr,
+                messageId: 'useDirectionProp',
+              });
+            }
+
+            // Check for d-g* and d-gg* classes (gap utilities) - only those with DtStack equivalents
+            // d-gg* uses deprecated grid-gap property but works the same as d-g*
+            const gapMatch = classes.match(/\bd-gg?(\d+)\b/);
+            if (gapMatch && GAP_WITH_EQUIVALENTS[gapMatch[1]]) {
+              context.report({
+                node: classAttr,
+                messageId: 'useGapProp',
+              });
+            }
+
+            // Check for d-d-flex (redundant on DtStack)
+            if (/\bd-d-flex\b/.test(classes)) {
+              context.report({
+                node: classAttr,
+                messageId: 'removeRedundantFlex',
+              });
+            }
           }
         }
-      }
+      },
     });
-  }
+  },
 };

package/lib/rules/prefer-stack-over-flex.js

@@ -0,0 +1,74 @@
+/**
+ * @fileoverview Prefer DtStack component over flex utility classes
+ */
+'use strict';
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Prefer DtStack component over flex utility classes',
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/prefer-stack-over-flex.md',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      preferStack: 'Consider using `<dt-stack>` instead of `d-d-flex`. See: https://dialtone.dialpad.com/components/stack.html',
+      dynamicFlexBinding: 'Flex utilities detected in dynamic `:class` binding. Consider using `<dt-stack>` with conditional props instead. Manual migration required.',
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    return sourceCode.parserServices.defineTemplateBodyVisitor({
+      VElement(node) {
+        // Skip if already dt-stack or DtStack
+        const elementName = node.name || node.rawName;
+        if (elementName === 'dt-stack' || elementName === 'DtStack') return;
+
+        // Find class attribute
+        const classAttr = node.startTag.attributes.find(
+          attr => attr.key && attr.key.name === 'class',
+        );
+
+        if (classAttr && classAttr.value && classAttr.value.value) {
+          const classes = classAttr.value.value;
+
+          // Flag any element with d-d-flex (no exclusions)
+          if (/\bd-d-flex\b/.test(classes)) {
+            context.report({
+              node: classAttr,
+              messageId: 'preferStack',
+            });
+          }
+        }
+      },
+
+      VAttribute(node) {
+        // Check for :class or v-bind:class directives
+        if (node.directive &&
+            node.key.name.name === 'bind' &&
+            node.key.argument?.name === 'class') {
+
+          // Get the raw source of the binding expression
+          const bindingText = sourceCode.getText(node.value);
+
+          // Check if it contains flex utilities (as string literals)
+          // Look for patterns like 'd-d-flex', 'd-ai-', 'd-jc-', 'd-fd-', 'd-g\d', 'd-gg\d'
+          if (/['"]d-d-flex['"]|['"]d-ai-|['"]d-jc-|['"]d-fd-|['"]d-gg?\d/.test(bindingText)) {
+            context.report({
+              node: node,
+              messageId: 'dynamicFlexBinding',
+            });
+          }
+        }
+      },
+    });
+  },
+};

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

@@ -1,5 +1,5 @@
 /**
- * @fileoverview Utilities to set Font family, Font weight, Font size, and Line height separately are discouraged in favor of composed typography utilities
+ * @fileoverview Combining multiple typography utility categories is discouraged in favor of composed typography utilities
  * @author Nina Repetto
  */
 'use strict';
@@ -8,21 +8,30 @@
 // Rule Definition
 // ------------------------------------------------------------------------------
 
+const typographyCategories = {
+  'font-weight': ['d-fw-normal', 'd-fw-medium', 'd-fw-semibold', 'd-fw-bold'],
+  'font-size': ['d-fs'], // prefix match
+  'line-height': ['d-lh'], // prefix match
+  'font-family': ['d-ff-custom', 'd-ff-sans', 'd-ff-mono', 'd-ff-marketing', 'd-ff-unset'],
+};
+
 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',
+      description: 'Combining multiple typography utility categories is discouraged in favor of composed typography utilities',
       recommended: false,
       url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/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:
+      recommendTypographyStyle: `Combining multiple typography utility categories (Font family, Font weight, Font size, Line height) is
+      discouraged in favor of composed typography utilities. Check out 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.`,
+      conflictingTypographyUtilities: `Conflicting typography utilities detected: multiple {{category}} classes found ({{classes}}).
+      Only one will be applied. Remove the conflicting classes.`,
     }, // Add messageId and message
   },
 
@@ -33,28 +42,43 @@ module.exports = {
       VAttribute (node) {
         if (node.key.name === 'class') {
           const classes = node.value.value.split(' ');
-          const typographyClasses = [
-            'd-fs',
-            'd-fw-normal',
-            'd-fw-medium',
-            'd-fw-semibold',
-            'd-fw-bold',
-            'd-lh',
-            'd-ff-custom',
-            'd-ff-sans',
-            'd-ff-mono',
-            'd-ff-marketing',
-            'd-ff-unset',
-          ];
-          const typographyClassesFound = classes.filter((className) =>
-            typographyClasses.some((typographyClass) => className.includes(typographyClass)),
-          );
-          if (typographyClassesFound.length > 0) {
+
+          // For each class, determine which category it belongs to and track all matches
+          const categoryCounts = {};
+          classes.forEach((className) => {
+            for (const [category, patterns] of Object.entries(typographyCategories)) {
+              if (patterns.some((pattern) => className.startsWith(pattern))) {
+                if (!categoryCounts[category]) {
+                  categoryCounts[category] = [];
+                }
+                categoryCounts[category].push(className);
+              }
+            }
+          });
+
+          const categoriesFound = Object.keys(categoryCounts);
+
+          // Report if 2+ different categories are present
+          if (categoriesFound.length >= 2) {
             context.report({
               node,
               messageId: 'recommendTypographyStyle',
             });
           }
+
+          // Report conflicting utilities within the same category
+          for (const [category, matchedClasses] of Object.entries(categoryCounts)) {
+            if (matchedClasses.length >= 2) {
+              context.report({
+                node,
+                messageId: 'conflictingTypographyUtilities',
+                data: {
+                  category,
+                  classes: matchedClasses.join(', '),
+                },
+              });
+            }
+          }
         }
       },
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/eslint-plugin-dialtone",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "description": "dialtone eslint plugin",
   "keywords": [
     "Dialpad",
@@ -35,6 +35,11 @@
     "email": "dialtone@dialpad.com"
   },
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dialpad/dialtone.git",
+    "directory": "packages/eslint-plugin-dialtone"
+  },
   "main": "./lib/index.js",
   "files": [
     "lib"