@dialpad/eslint-plugin-dialtone 1.12.0-next.3 → 1.13.0-next.1

package/lib/rules/deprecated-dialtone-component.js

@@ -0,0 +1,100 @@
+/**
+ * @fileoverview Detects usages of deprecated Dialtone components that should be replaced by newer alternatives.
+ * @author Brad Paugh
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'suggestion', // `problem`, `suggestion`, or `layout`
+    docs: {
+      description: "Detects usages of deprecated Dialtone components that should be replaced by newer alternatives",
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/deprecated-dialtone-component.md',
+    },
+    fixable: null, // Or `code` or `whitespace`
+    schema: [], // Add a schema if the rule has options
+    messages: {
+      deprecatedDialtoneComponent: '{{ componentName }} is deprecated. Replace with {{ replacement }} from {{ package }}.',
+      deprecatedDtIcon: 'DtIcon is deprecated. Import icon components directly instead, for example: import { DtIconPhoneHangUp } from \'@dialpad/dialtone-icons/vue3\'.',
+    }
+  },
+
+  create(context) {
+    const deprecatedIconComponent = 'DtIcon';
+
+    const deprecatedComponents = [
+      { componentName: 'DtRecipeComboboxMultiSelect', replacement: 'DtComboboxMultiSelect', package: '@dialpad/dialtone' },
+      { componentName: 'DtRecipeComboboxWithPopover', replacement: 'DtComboboxWithPopover', package: '@dialpad/dialtone' },
+      { componentName: 'DtRecipeMotionText', replacement: 'DtMotionText', package: '@dialpad/dialtone' },
+      { componentName: 'DtRecipeCallbarButton', replacement: 'DpCallbarButton', package: '@dialpad/callbarkit' },
+      { componentName: 'DtRecipeCallbarButtonWithPopover', replacement: 'DpCallbarButtonWithPopover', package: '@dialpad/callbarkit' },
+      { componentName: 'DtRecipeCallbarButtonWithDropdown', replacement: 'DpCallbarButtonWithDropdown', package: '@dialpad/callbarkit' },
+      { componentName: 'DtRecipeGroupedChip', replacement: 'DpGroupedChip', package: '@dialpad/callbarkit' },
+      { componentName: 'DtRecipeTopBannerInfo', replacement: 'DpTopBannerInfo', package: '@dialpad/callbarkit' },
+      { componentName: 'DtRecipeAttachmentCarousel', replacement: 'DpAttachmentCarousel', package: '@dialpad/chatkit' },
+      { componentName: 'DtRecipeMessageInput', replacement: 'DpMessageInput', package: '@dialpad/chatkit' },
+      { componentName: 'DtRecipeContactInfo', replacement: 'DpContactInfo', package: '@dialpad/chatkit' },
+      { componentName: 'DtRecipeEditor', replacement: 'DpEditor', package: '@dialpad/chatkit' },
+      { componentName: 'DtRecipeEmojiRow', replacement: 'DpEmojiRow', package: '@dialpad/chatkit' },
+      { componentName: 'DtRecipeFeedItemPill', replacement: 'DpFeedItemPill', package: '@dialpad/chatkit' },
+      { componentName: 'DtRecipeFeedItemRow', replacement: 'DpFeedItemRow', package: '@dialpad/chatkit' },
+      { componentName: 'DtRecipeContactCentersRow', replacement: 'DpContactCentersRow', package: '@dialpad/navigationkit' },
+      { componentName: 'DtRecipeContactRow', replacement: 'DpContactRow', package: '@dialpad/navigationkit' },
+      { componentName: 'DtRecipeGeneralRow', replacement: 'DpGeneralRow', package: '@dialpad/navigationkit' },
+      { componentName: 'DtRecipeGroupRow', replacement: 'DpGroupRow', package: '@dialpad/navigationkit' },
+      { componentName: 'DtRecipeUnreadPill', replacement: 'DpUnreadPill', package: '@dialpad/navigationkit' },
+      { componentName: 'DtRecipeCallbox', replacement: 'DpCallbox', package: '@dialpad/navigationkit' },
+      { componentName: 'DtRecipeSettingsMenuButton', replacement: 'DpSettingsMenuButton', package: '@dialpad/navigationkit' },
+      { componentName: 'DtRecipeIvrNode', replacement: 'DpIvrNode', package: '@dialpad/workflowkit' },
+    ];
+
+    //----------------------------------------------------------------------
+    // Public
+    //----------------------------------------------------------------------
+
+    return {
+      ImportDeclaration(node) {
+        const importPath = node.source.value;
+
+        const isDialtoneSource = /^@dialpad\/dialtone(?:-vue)?(?:$|\/)/.test(importPath);
+        if (!isDialtoneSource) {
+          return;
+        }
+
+        node.specifiers.forEach(specifier => {
+          if (specifier.type !== 'ImportSpecifier') return;
+
+          const importedName = specifier.imported.name;
+
+          if (importedName === deprecatedIconComponent) {
+            context.report({
+              node: specifier,
+              messageId: 'deprecatedDtIcon',
+            });
+            return;
+          }
+
+          const found = deprecatedComponents.find(item => item.componentName === importedName);
+
+          if (found) {
+            context.report({
+              node: specifier,
+              messageId: 'deprecatedDialtoneComponent',
+              data: {
+                componentName: found.componentName,
+                replacement: found.replacement,
+                package: found.package,
+              }
+            });
+          }
+        });
+      },
+    };
+  },
+};

package/lib/rules/deprecated-link-styling-classes.js

@@ -0,0 +1,96 @@
+/**
+ * @fileoverview Detect raw anchor / router-link with d-btn or d-link classes,
+ * and DtLink with d-td-* classes — all should migrate to DtButton/DtLink props
+ * via `npx dialtone-migrate-link-rendering`.
+ */
+'use strict';
+
+//------------------------------------------------------------------------------
+// Helpers
+//------------------------------------------------------------------------------
+
+function getStaticClassValue (node) {
+  for (const attr of node.startTag.attributes) {
+    if (attr.directive) continue;
+    const name = attr.key && (attr.key.rawName || attr.key.name);
+    if (name !== 'class' || !attr.value) continue;
+    return { value: attr.value.value, attr };
+  }
+  return null;
+}
+
+function tokenize (classValue) {
+  return classValue.split(/\s+/).filter(Boolean);
+}
+
+const D_TD_TOKEN_RE = /^(?:[\w-]+:)?d-td-[\w-]+$/;
+
+const RELEVANT_TAGS = new Set(['a', 'router-link', 'dt-link']);
+
+const TAG_TOKEN_CHECKS = [
+  { tag: 'a', test: tokens => tokens.includes('d-btn'), messageId: 'anchorWithDBtn' },
+  { tag: 'a', test: tokens => tokens.includes('d-link'), messageId: 'anchorWithDLink' },
+  { tag: 'router-link', test: tokens => tokens.includes('d-btn'), messageId: 'routerLinkWithDBtn' },
+  { tag: 'router-link', test: tokens => tokens.includes('d-link'), messageId: 'routerLinkWithDLink' },
+  { tag: 'dt-link', test: tokens => tokens.some(t => D_TD_TOKEN_RE.test(t)), messageId: 'dtLinkWithDTd' },
+];
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Detect legacy d-btn / d-link / d-td-* class usage that should migrate to DtButton/DtLink props',
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/deprecated-link-styling-classes.md',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      anchorWithDBtn:
+        '<a class="d-btn"> is deprecated. Use <dt-button href="…"> instead. ' +
+        'Run `npx dialtone-migrate-link-rendering` to migrate.',
+      routerLinkWithDBtn:
+        '<router-link class="d-btn"> is deprecated. Use <dt-button :to="…"> instead. ' +
+        'Run `npx dialtone-migrate-link-rendering` to migrate.',
+      anchorWithDLink:
+        '<a class="d-link"> is deprecated. Use <dt-link href="…"> instead. ' +
+        'Run `npx dialtone-migrate-link-rendering` to migrate.',
+      routerLinkWithDLink:
+        '<router-link class="d-link"> is deprecated. Use <dt-link :to="…"> instead. ' +
+        'Run `npx dialtone-migrate-link-rendering` to migrate.',
+      dtLinkWithDTd:
+        '<dt-link class="d-td-…"> is deprecated. Use the `underline` prop instead. ' +
+        'Run `npx dialtone-migrate-link-rendering` to migrate.',
+    },
+  },
+
+  create (context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    const defineTemplateBodyVisitor = sourceCode.parserServices?.defineTemplateBodyVisitor;
+    if (!defineTemplateBodyVisitor) return {};
+
+    return defineTemplateBodyVisitor({
+      VElement (node) {
+        const rawName = node.rawName || node.name;
+        // Normalize PascalCase Vue tags (RouterLink, DtLink) to kebab-case.
+        const tagName = rawName.includes('-')
+          ? rawName.toLowerCase()
+          : rawName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+        if (!RELEVANT_TAGS.has(tagName)) return;
+
+        const result = getStaticClassValue(node);
+        if (!result) return;
+        const tokens = tokenize(result.value);
+
+        for (const check of TAG_TOKEN_CHECKS) {
+          if (check.tag !== tagName) continue;
+          if (check.test(tokens)) context.report({ node: result.attr, messageId: check.messageId });
+        }
+      },
+    });
+  },
+};

package/lib/rules/deprecated-pixel-utility-classes.js

@@ -1,73 +1,95 @@
 /**
  * @fileoverview Detects usage of pixel-based utility classes (d-h16, d-p8, d-m8, etc.)
  * which should be replaced with token-stop-based equivalents (d-h-25, d-p-100, d-m-100).
+ * Autofixes via `lint-staged` — mirrors the `utility-class-to-token-stops` migration helper.
  * @author Joshua Hynes
  */
-"use strict";
+'use strict';
 
-//------------------------------------------------------------------------------
-// Rule Definition
-//------------------------------------------------------------------------------
+const { START, END, buildDetectRegex, createClassAttributeRule } = require('../util/class-attribute-rule');
 
-// Pixel values that have token-stop equivalents
-// MUST STAY IN SYNC with WIDTH_HEIGHTS_LAYOUT, MARGIN_SIZES_SPACING, MARGIN_SIZES_LAYOUT,
-// and NEGATIVE_SPACING_MAP in dialtone-css/postcss/constants.cjs
-// Sizing: layout stops (16px+)
-const SIZING_PIXELS = '16|32|48|64|80|96|112|128|160|192|224|256|288|320|352|384|416|448|480|512|544|576|608|640|672|704|736|768|800|832|864|896|928|960|992|1024';
-// Spacing: spacing stops (0-64px) + layout stops for margin/padding (96, 128)
+// MUST STAY IN SYNC with:
+// - LAYOUT_STOPS, MARGIN_SIZES_SPACING, MARGIN_SIZES_LAYOUT in dialtone-css/postcss/constants.cjs
+// - SIZING_MAP, SPACING_MAP, NEGATIVE_SPACING_MAP, SPACING_LAYOUT_MAP in
+//   dialtone-css/.../migration_helper/configs/utility-class-to-token-stops.mjs
+
+// Ordered by descending string-length then descending value so regex alternation matches
+// longest first (d-w1024 resolves `1024`, not `1`).
+const SIZING_PIXELS = '1024|992|960|928|896|864|832|800|768|736|704|672|640|608|576|544|512|480|448|416|384|352|320|288|256|224|192|160|128|112|96|80|64|48|32|24|20|16|8|2|1';
 const SPACING_PIXELS = '0|1|2|4|6|8|10|12|14|16|20|24|32|48|64|96|128';
-// Negative spacing
-const NEGATIVE_PIXELS = '1|2|4|6|8|10|12|14|16|24|32|48|64';
+const NEGATIVE_PIXELS = '1|2|4|6|8|10|12|14|16|20|24|32|48|64';
+
+// Sizing autofix: scale-indexed layout stops + off-scale pixel-indexed exceptions (DLT-3330).
+const SIZING_MAP = {
+  1: '1px', 2: '2px', 8: '8px', 20: '20px', 24: '24px',
+  16: '25', 32: '50', 48: '75', 64: '100', 80: '125', 96: '150',
+  112: '175', 128: '200', 160: '250', 192: '300', 224: '350', 256: '400',
+  288: '450', 320: '500', 352: '550', 384: '600', 416: '650', 448: '700',
+  480: '750', 512: '800', 544: '850', 576: '900', 608: '950', 640: '1000',
+  672: '1050', 704: '1100', 736: '1150', 768: '1200', 800: '1250',
+  832: '1300', 864: '1350', 896: '1400', 928: '1450', 960: '1500',
+  992: '1550', 1024: '1600',
+};
+
+const SPACING_MAP = {
+  0: '0', 1: '1', 2: '25', 4: '50', 6: '75', 8: '100',
+  10: '125', 12: '150', 14: '175', 16: '200', 20: '250', 24: '300',
+  32: '400', 48: '600', 64: '800',
+};
+
+const NEGATIVE_SPACING_MAP = {
+  1: '1', 2: '25', 4: '50', 6: '75', 8: '100',
+  10: '125', 12: '150', 14: '175', 16: '200', 20: '250', 24: '300',
+  32: '400', 48: '600', 64: '800',
+};
+
+const SPACING_LAYOUT_MAP = { 96: '150', 128: '200' };
+
+// Per-category regexes with capture groups. Negative variants precede positive so `d-mtn8`
+// matches the negative pattern (rule order is load-order in `rewriteClassString`).
+const SIZING_RE          = new RegExp(`${START}d-(h|w|hmn|hmx|wmn|wmx)(${SIZING_PIXELS})${END}`, 'g');
+const NEGATIVE_MARGIN_RE = new RegExp(`${START}d-m(t|r|b|l|x|y)?n(${NEGATIVE_PIXELS})${END}`, 'g');
+const MARGIN_RE          = new RegExp(`${START}d-m(t|r|b|l|x|y)?(${SPACING_PIXELS})${END}`, 'g');
+const PADDING_RE         = new RegExp(`${START}d-p(t|r|b|l|x|y)?(${SPACING_PIXELS})${END}`, 'g');
+const GAP_RE             = new RegExp(`${START}d-(g|rg|cg)(${SPACING_PIXELS})${END}`, 'g');
+const NEGATIVE_POS_RE    = new RegExp(`${START}d-(t|r|b|l|x|y|all)n(${NEGATIVE_PIXELS})${END}`, 'g');
+const POSITION_RE        = new RegExp(`${START}d-(t|r|b|l|x|y|all)(${SPACING_PIXELS})${END}`, 'g');
 
-// Build patterns for each category
-// Sizing: d-h16, d-w64, d-hmn96, d-hmx128, d-wmn32, d-wmx512
-const SIZING_PATTERN = `d-(?:h|w|hmn|hmx|wmn|wmx)(?:${SIZING_PIXELS})\\b`;
-// Margin: d-m8, d-mt16, d-mr8, d-mb8, d-ml8, d-mx8, d-my8
-const MARGIN_PATTERN = `d-m(?:t|r|b|l|x|y)?(?:${SPACING_PIXELS})\\b`;
-// Negative margin: d-mtn8, d-mrn8, d-mbn8, d-mln8, d-mxn8, d-myn8, d-mn8
-const NEGATIVE_MARGIN_PATTERN = `d-m(?:t|r|b|l|x|y)?n(?:${NEGATIVE_PIXELS})\\b`;
-// Padding: d-p8, d-pt16, d-pr8, d-pb8, d-pl8, d-px8, d-py8
-const PADDING_PATTERN = `d-p(?:t|r|b|l|x|y)?(?:${SPACING_PIXELS})\\b`;
-// Gap: d-g8, d-rg8, d-cg8
-const GAP_PATTERN = `d-(?:g|rg|cg)(?:${SPACING_PIXELS})\\b`;
-// Position: d-t8, d-r8, d-b8, d-l8, d-x8, d-y8, d-all8
-const POSITION_PATTERN = `d-(?:t|r|b|l|x|y|all)(?:${SPACING_PIXELS})\\b`;
-// Negative position: d-tn8, d-rn8, d-bn8, d-ln8, d-xn8, d-yn8, d-alln8
-const NEGATIVE_POSITION_PATTERN = `d-(?:t|r|b|l|x|y|all)n(?:${NEGATIVE_PIXELS})\\b`;
+const DETECT = buildDetectRegex([SIZING_RE, NEGATIVE_MARGIN_RE, MARGIN_RE, PADDING_RE, GAP_RE, NEGATIVE_POS_RE, POSITION_RE]);
 
-const COMBINED_PATTERN = new RegExp(
-  `(?:${SIZING_PATTERN}|${NEGATIVE_MARGIN_PATTERN}|${MARGIN_PATTERN}|${PADDING_PATTERN}|${GAP_PATTERN}|${NEGATIVE_POSITION_PATTERN}|${POSITION_PATTERN})`
-);
+/**
+ * Rewrite a class attribute string from legacy pixel-suffix to token-stop naming.
+ * Returns the input unchanged when no rewrites apply.
+ */
+function rewriteClassString (input) {
+  return input
+    .replace(NEGATIVE_MARGIN_RE, (m, dir, px) => NEGATIVE_SPACING_MAP[px] ? `d-m${dir ?? ''}-n${NEGATIVE_SPACING_MAP[px]}` : m)
+    .replace(NEGATIVE_POS_RE,    (m, dir, px) => NEGATIVE_SPACING_MAP[px] ? `d-${dir}-n${NEGATIVE_SPACING_MAP[px]}` : m)
+    .replace(SIZING_RE,          (m, dir, px) => SIZING_MAP[px] ? `d-${dir}-${SIZING_MAP[px]}` : m)
+    .replace(MARGIN_RE,          (m, dir, px) => { const stop = SPACING_MAP[px] ?? SPACING_LAYOUT_MAP[px]; return stop ? `d-m${dir ?? ''}-${stop}` : m; })
+    .replace(PADDING_RE,         (m, dir, px) => { const stop = SPACING_MAP[px] ?? SPACING_LAYOUT_MAP[px]; return stop ? `d-p${dir ?? ''}-${stop}` : m; })
+    .replace(GAP_RE,             (m, dir, px) => SPACING_MAP[px] ? `d-${dir}-${SPACING_MAP[px]}` : m)
+    .replace(POSITION_RE,        (m, dir, px) => { const stop = SPACING_MAP[px] ?? SPACING_LAYOUT_MAP[px]; return stop ? `d-${dir}-${stop}` : m; });
+}
 
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
-      description: "Pixel-based utility classes (d-h16, d-p8, d-m8) are deprecated. Use token-stop-based equivalents (d-h-25, d-p-100, d-m-100).",
+      description: 'Pixel-based utility classes (d-h16, d-p8, d-m8) are deprecated. Use token-stop-based equivalents (d-h-25, d-p-100, d-m-100).',
       recommended: false,
       url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/deprecated-pixel-utility-classes.md',
     },
-    fixable: null,
+    fixable: 'code',
     schema: [],
     messages: {
-      deprecatedPixelClass: `Pixel-based utility classes are deprecated. Use token-stop-based equivalents instead (e.g. d-h16 → d-h-25, d-p8 → d-p-100). Run the "utility-class-to-token-stops" migration helper to update automatically.`,
+      deprecatedPixelClass: 'Pixel-based utility classes are deprecated. Use token-stop-based equivalents instead (e.g. d-h16 → d-h-25, d-p8 → d-p-100, d-w1 → d-w-1px).',
     },
   },
 
-  create (context) {
-    const sourceCode = context.sourceCode ?? context.getSourceCode();
-    return sourceCode.parserServices.defineTemplateBodyVisitor({
-      VAttribute (node) {
-        if (node.key.name === 'class') {
-          const classes = node.value.value;
-          if (COMBINED_PATTERN.test(classes)) {
-            context.report({
-              node,
-              messageId: 'deprecatedPixelClass',
-            });
-          }
-        }
-      },
-    });
-  },
+  create: createClassAttributeRule({
+    detect: DETECT,
+    rewrite: rewriteClassString,
+    messageId: 'deprecatedPixelClass',
+  }),
 };

package/lib/rules/deprecated-radius-utility-classes.js

@@ -0,0 +1,64 @@
+/**
+ * @fileoverview Detects usage of legacy border-radius utility classes (d-bar6, d-btr8, d-bbr-pill,
+ * etc.) and autofixes them to the new token-stop-indexed logical names (d-bar-350, d-bbsr-400,
+ * d-bber-pill).
+ */
+'use strict';
+
+const { START, END, buildDetectRegex, createClassAttributeRule } = require('../util/class-attribute-rule');
+
+// MUST STAY IN SYNC with:
+// - RADIUS_STOPS in dialtone-css/postcss/constants.cjs
+// - RADIUS_MAP / RADIUS_PAIR_PREFIX_MAP in dialtone-css/.../migration_helper/configs/utility-class-to-token-stops.mjs
+
+const RADIUS_STOP_MAP = {
+  0: '0', 1: '100', 2: '200', 4: '300', 6: '350',
+  8: '400', 12: '450', 16: '500', 24: '550', 32: '600',
+};
+
+const PAIR_PREFIX_MAP = {
+  btr: 'bbsr', // top    → block-start pair
+  bbr: 'bber', // bottom → block-end pair
+  blr: 'bisr', // left   → inline-start pair
+  brr: 'bier', // right  → inline-end pair
+};
+
+// Ordered by descending string length so regex alternation matches longest first
+// (.d-bar32 resolves as `32`, not `3`).
+const NUMERIC_SUFFIXES = Object.keys(RADIUS_STOP_MAP).sort((a, b) => b.length - a.length || Number(b) - Number(a)).join('|');
+const PAIR_PREFIXES = Object.keys(PAIR_PREFIX_MAP).join('|');
+
+const ALL_CORNERS_NUMERIC = new RegExp(`${START}d-bar(${NUMERIC_SUFFIXES})${END}`, 'g');
+const PAIR_NUMERIC        = new RegExp(`${START}d-(${PAIR_PREFIXES})(${NUMERIC_SUFFIXES})${END}`, 'g');
+const PAIR_KEYWORD        = new RegExp(`${START}d-(${PAIR_PREFIXES})-(pill|circle)${END}`, 'g');
+
+const DETECT = buildDetectRegex([ALL_CORNERS_NUMERIC, PAIR_NUMERIC, PAIR_KEYWORD]);
+
+function rewriteClassString (input) {
+  return input
+    .replace(ALL_CORNERS_NUMERIC, (_, px) => `d-bar-${RADIUS_STOP_MAP[px]}`)
+    .replace(PAIR_NUMERIC, (_, legacyPrefix, px) => `d-${PAIR_PREFIX_MAP[legacyPrefix]}-${RADIUS_STOP_MAP[px]}`)
+    .replace(PAIR_KEYWORD, (_, legacyPrefix, keyword) => `d-${PAIR_PREFIX_MAP[legacyPrefix]}-${keyword}`);
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Legacy border-radius utility classes (d-bar6, d-btr8, d-bbr-pill) are deprecated. Use token-stop-indexed logical names (d-bar-350, d-bbsr-400, d-bber-pill).',
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/deprecated-radius-utility-classes.md',
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      deprecatedRadiusClass: 'Legacy border-radius utility classes are deprecated. Use token-stop-indexed logical names instead (e.g. d-bar6 → d-bar-350, d-btr6 → d-bbsr-350, d-btr-pill → d-bbsr-pill).',
+    },
+  },
+
+  create: createClassAttributeRule({
+    detect: DETECT,
+    rewrite: rewriteClassString,
+    messageId: 'deprecatedRadiusClass',
+  }),
+};

package/lib/rules/deprecated-success-color-classes.js

@@ -0,0 +1,180 @@
+/**
+ * @fileoverview Detects usage of deprecated `success`-named color utility classes
+ * (`d-bgc-success*`, `d-bc-success*`, `d-fc-success*`) and recommends the
+ * `positive`-named replacements. The foreground (`d-fc-success*`) variants are
+ * already deprecated as part of the base-color cleanup but are still in active
+ * use, so this rule covers them too.
+ * @author Dialtone Team
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+// Anchor at token boundaries. `\b` would slice through
+// `d-bgc-success-strong-inverted-foo`, so we use explicit lookarounds.
+// TOKEN_END mirrors the `success-to-positive` migration helper's CLASS_BOUNDARY
+// so every lint finding is auto-fixable by the CLI the rule's message points to.
+const TOKEN_START = '(?<![A-Za-z0-9_-])';
+const TOKEN_END = '(?=$|[\\s"\'><:=,;{}()\\[\\]!`./])';
+
+// Suffixes that follow `success` in the deprecated namespace. Order longest
+// first so alternation matches greedily where needed (regex matching is
+// leftmost-first, but we still keep this ordered for clarity).
+const SUCCESS_SUFFIXES = [
+  '-subtle-opaque-inverted',
+  '-strong-inverted',
+  '-subtle-inverted',
+  '-opaque-inverted',
+  '-inverted-hover',
+  '-subtle-opaque',
+  '-inverted',
+  '-subtle',
+  '-strong',
+  '-opaque',
+  '-hover',
+].join('|');
+
+// Per-role detect regexes. Each matches `d-{role}-success` optionally followed
+// by one of the known suffixes — and ONLY by one of the known suffixes (the
+// trailing `TOKEN_END` rejects unrelated continuations like
+// `d-bgc-success-foo`).
+const BG_SUCCESS_RE = new RegExp(`${TOKEN_START}d-bgc-success(?:${SUCCESS_SUFFIXES})?${TOKEN_END}`);
+const FG_SUCCESS_RE = new RegExp(`${TOKEN_START}d-fc-success(?:${SUCCESS_SUFFIXES})?${TOKEN_END}`);
+const BORDER_SUCCESS_RE = new RegExp(`${TOKEN_START}d-bc-success(?:${SUCCESS_SUFFIXES})?${TOKEN_END}`);
+
+// Generic detect for the script-string visitor (any role).
+const ANY_SUCCESS_RE = new RegExp(`${TOKEN_START}d-(?:bgc|bc|fc)-success(?:${SUCCESS_SUFFIXES})?${TOKEN_END}`);
+
+const DOCS_BACKGROUND = 'https://dialtone.dialpad.com/utilities/backgrounds/color.html';
+const DOCS_FOREGROUND = 'https://dialtone.dialpad.com/utilities/typography/font-color.html';
+const DOCS_BORDER = 'https://dialtone.dialpad.com/utilities/borders/color.html';
+
+// Build per-role messages following the precedent of deprecated-base-color-classes
+// (separate messageId per role family).
+const MESSAGE_PREFIX = '`d-{role}-success-...` is deprecated. Use `d-{role}-positive-...` instead. Run `npx dialtone-migration-helper --config success-to-positive` to migrate automatically.';
+const buildMessage = (role, docs) =>
+  MESSAGE_PREFIX.replace(/\{role\}/g, role) + ` See the utility docs: ${docs}`;
+
+function checkClassString (context, node, classes) {
+  if (BG_SUCCESS_RE.test(classes)) {
+    context.report({ node, messageId: 'deprecatedBackgroundSuccess' });
+  }
+  if (FG_SUCCESS_RE.test(classes)) {
+    context.report({ node, messageId: 'deprecatedForegroundSuccess' });
+  }
+  if (BORDER_SUCCESS_RE.test(classes)) {
+    context.report({ node, messageId: 'deprecatedBorderSuccess' });
+  }
+}
+
+/**
+ * Walk every Literal/TemplateElement string descendant of an expression node
+ * (used for `:class="[...]"` / `:class="{...}"` / template-literal bindings).
+ * Best-effort — fully dynamic class names (`d-bgc-' + variant`) cannot be
+ * matched without runtime knowledge.
+ */
+function findStringLiterals (n, out) {
+  if (!n || typeof n !== 'object') return;
+  if (n.type === 'Literal' && typeof n.value === 'string') {
+    out.push({ node: n, value: n.value });
+  } else if (n.type === 'TemplateElement' && n.value && typeof n.value.cooked === 'string') {
+    out.push({ node: n, value: n.value.cooked });
+  }
+  for (const key of Object.keys(n)) {
+    if (key === 'parent') continue;
+    const child = n[key];
+    if (child && typeof child === 'object') {
+      if (Array.isArray(child)) {
+        for (const c of child) findStringLiterals(c, out);
+      } else {
+        findStringLiterals(child, out);
+      }
+    }
+  }
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        '`d-bgc-success*`, `d-bc-success*`, and `d-fc-success*` utility classes are deprecated. Use the `positive`-named replacements.',
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/deprecated-success-color-classes.md',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      deprecatedBackgroundSuccess: buildMessage('bgc', DOCS_BACKGROUND),
+      deprecatedForegroundSuccess: buildMessage('fc', DOCS_FOREGROUND),
+      deprecatedBorderSuccess: buildMessage('bc', DOCS_BORDER),
+    },
+  },
+
+  create (context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    const defineTemplateBodyVisitor = sourceCode.parserServices?.defineTemplateBodyVisitor;
+
+    // Visitor that scans all string-typed AST nodes inside `<script>` or in
+    // plain `.js`/`.ts` files for class-name strings containing the deprecated
+    // tokens. This catches things like `:class="['d-bgc-success']"` (the array
+    // literal lives in the script-side AST that vue-eslint-parser exposes via
+    // the standard ESLint visitor) and `const c = 'd-bgc-success';`.
+    const scriptVisitor = {
+      Literal (node) {
+        if (typeof node.value !== 'string') return;
+        if (!ANY_SUCCESS_RE.test(node.value)) return;
+        checkClassString(context, node, node.value);
+      },
+      TemplateElement (node) {
+        const cooked = node.value && node.value.cooked;
+        if (typeof cooked !== 'string') return;
+        if (!ANY_SUCCESS_RE.test(cooked)) return;
+        checkClassString(context, node, cooked);
+      },
+    };
+
+    if (!defineTemplateBodyVisitor) {
+      // Plain JS/TS file — no Vue template, only the script visitor applies.
+      return scriptVisitor;
+    }
+
+    return defineTemplateBodyVisitor(
+      // Template visitor — handles `class="..."` static attributes and the
+      // string-literal halves of `:class="..."` dynamic bindings.
+      {
+        VAttribute (node) {
+          // Static `class="..."` attribute.
+          if (!node.directive && node.key.name === 'class' && node.value && typeof node.value.value === 'string') {
+            checkClassString(context, node, node.value.value);
+            return;
+          }
+          // Dynamic `:class="..."` / `v-bind:class="..."` binding.
+          if (
+            node.directive &&
+            node.key.name &&
+            node.key.name.name === 'bind' &&
+            node.key.argument &&
+            (node.key.argument.rawName === 'class' || node.key.argument.name === 'class') &&
+            node.value &&
+            node.value.expression
+          ) {
+            const literals = [];
+            findStringLiterals(node.value.expression, literals);
+            for (const { node: litNode, value } of literals) {
+              if (ANY_SUCCESS_RE.test(value)) {
+                checkClassString(context, litNode, value);
+              }
+            }
+          }
+        },
+      },
+      // ESLint visitor for the script half (i.e., the surrounding JS/TS that
+      // vue-eslint-parser exposes through the regular AST traversal). Plain
+      // `.js`/`.ts` files also fall through here.
+      scriptVisitor,
+    );
+  },
+};

package/lib/util/class-attribute-rule.js

@@ -0,0 +1,49 @@
+/**
+ * Helpers for ESLint rules that autofix deprecated CSS utility classes in
+ * Vue template class attributes.
+ */
+'use strict';
+
+// Token-boundary anchors. `\b` treats `-` as a non-word char, so `\bd-h16\b`
+// would match inside `foo-d-h16` — use whitespace/start/end instead.
+const START = '(?<=^|\\s)';
+const END = '(?=$|\\s)';
+
+function buildDetectRegex (regexes) {
+  return new RegExp(regexes.map(r => r.source).join('|'));
+}
+
+/**
+ * Returns a `create` function for a rule that detects and autofixes deprecated
+ * class names in `class` attributes on Vue template nodes. Preserves the
+ * attribute's quoting style (double, single, or unquoted).
+ */
+function createClassAttributeRule ({ detect, rewrite, messageId }) {
+  return (context) => {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    const defineTemplateBodyVisitor = sourceCode.parserServices?.defineTemplateBodyVisitor;
+    if (!defineTemplateBodyVisitor) return {};
+
+    return defineTemplateBodyVisitor({
+      VAttribute (node) {
+        if (node.key.name !== 'class') return;
+        const classes = node.value?.value;
+        if (!classes || !detect.test(classes)) return;
+
+        context.report({
+          node,
+          messageId,
+          fix (fixer) {
+            const rewritten = rewrite(classes);
+            if (rewritten === classes) return null;
+            const firstChar = sourceCode.getText(node.value)[0];
+            const quote = firstChar === '"' || firstChar === '\'' ? firstChar : '';
+            return fixer.replaceText(node.value, `${quote}${rewritten}${quote}`);
+          },
+        });
+      },
+    });
+  };
+}
+
+module.exports = { START, END, buildDetectRegex, createClassAttributeRule };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/eslint-plugin-dialtone",
-  "version": "1.12.0-next.3",
+  "version": "1.13.0-next.1",
   "description": "dialtone eslint plugin",
   "keywords": [
     "Dialpad",