@dialpad/eslint-plugin-dialtone 1.10.0 → 1.11.1-next.1

package/README.md

@@ -62,4 +62,12 @@ Then configure the rules you want to use under the rules section.
 
 ## Supported Rules
 
-* Fill in provided rules here
+* [custom-implementation](docs/rules/custom-implementation.md)
+* [deprecated-base-color-classes](docs/rules/deprecated-base-color-classes.md)
+* [deprecated-component](docs/rules/deprecated-component.md)
+* [deprecated-directive](docs/rules/deprecated-directive.md)
+* [deprecated-flex-gap-classes](docs/rules/deprecated-flex-gap-classes.md)
+* [deprecated-grid-gap-classes](docs/rules/deprecated-grid-gap-classes.md)
+* [deprecated-icons](docs/rules/deprecated-icons.md)
+* [deprecated-stack-alignment-classes](docs/rules/deprecated-stack-alignment-classes.md)
+* [recommend-typography-style](docs/rules/recommend-typography-style.md)

package/lib/rules/deprecated-headline-sizes.js

@@ -0,0 +1,77 @@
+/**
+ * @fileoverview Detects usage of deprecated xxl/xxxl headline sizes which have been renamed to 2xl/3xl.
+ * @author Dialtone Team
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+const SIZE_MAP = {
+  xxxl: '3xl',
+  xxl: '2xl',
+};
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Headline sizes xxl/xxxl have been renamed to 2xl/3xl.',
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/deprecated-headline-sizes.md',
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      deprecatedSize: 'Headline size "{{oldSize}}" has been renamed to "{{newSize}}". Update size="{{oldSize}}" to size="{{newSize}}".',
+      deprecatedClass: 'CSS class "{{oldClass}}" has been renamed to "{{newClass}}". Update to use the new class name.',
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    return sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute(node) {
+        // Check size prop (e.g., size="xxl" or size="xxxl")
+        if (node.key.name === 'size' && node.value && node.value.value) {
+          const sizeValue = node.value.value;
+          if (SIZE_MAP[sizeValue]) {
+            context.report({
+              node,
+              messageId: 'deprecatedSize',
+              data: {
+                oldSize: sizeValue,
+                newSize: SIZE_MAP[sizeValue],
+              },
+              fix(fixer) {
+                return fixer.replaceText(node.value, `"${SIZE_MAP[sizeValue]}"`);
+              },
+            });
+          }
+        }
+
+        // Check class attributes for deprecated d-text-headline--xxl/xxxl classes
+        // Note: We only flag d-text-headline-- (current system), NOT d-headline-- (legacy system)
+        if (node.key.name === 'class' && node.value && node.value.value) {
+          const classValue = node.value.value;
+          // Match d-text-headline--xxl or d-text-headline--xxxl (but NOT d-headline--xxl)
+          const match = classValue.match(/\bd-text-headline--(xxx?l)\b/);
+          if (match && SIZE_MAP[match[1]]) {
+            const oldClass = `d-text-headline--${match[1]}`;
+            const newClass = `d-text-headline--${SIZE_MAP[match[1]]}`;
+            context.report({
+              node,
+              messageId: 'deprecatedClass',
+              data: { oldClass, newClass },
+              fix(fixer) {
+                const newValue = classValue.replace(oldClass, newClass);
+                return fixer.replaceText(node.value, `"${newValue}"`);
+              },
+            });
+          }
+        }
+      },
+    });
+  },
+};

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

@@ -0,0 +1,110 @@
+/**
+ * @fileoverview Recommends using props instead of CSS utilities on Stack component
+ */
+'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
+//------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      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',
+    },
+    fixable: null,
+    schema: [],
+    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',
+          );
+
+          if (classAttr && classAttr.value && classAttr.value.value) {
+            const classes = classAttr.value.value;
+
+            // Check for d-ai-* classes (align-items utilities)
+            if (/d-ai-(normal|flex-start|center|flex-end|stretch|baseline)/.test(classes)) {
+              context.report({
+                node: classAttr,
+                messageId: 'useAlignProp',
+              });
+            }
+
+            // Check for d-jc-* classes (justify-content utilities)
+            if (/d-jc-(flex-start|center|flex-end|space-around|space-between|space-evenly)/.test(classes)) {
+              context.report({
+                node: classAttr,
+                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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/eslint-plugin-dialtone",
-  "version": "1.10.0",
+  "version": "1.11.1-next.1",
   "description": "dialtone eslint plugin",
   "keywords": [
     "Dialpad",
@@ -20,11 +20,6 @@
       "email": "francis.rupert@dialpad.com",
       "url": "https://github.com/francisrupert"
     },
-    {
-      "name": "Julio Ortega",
-      "email": "julio.ortega@dialpad.com",
-      "url": "https://github.com/juliodialpad"
-    },
     {
       "name": "Ignacio Ropolo",
       "email": "ignacio.ropolo@dialpad.com",
@@ -40,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"