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

package/lib/rules/deprecated-physical-naming.js

@@ -0,0 +1,228 @@
+/**
+ * @fileoverview Detect deprecated physical direction names in Dialtone component
+ * slots, props, prop values, and events. Suggests logical replacements.
+ */
+'use strict';
+
+//------------------------------------------------------------------------------
+// Constants
+//------------------------------------------------------------------------------
+
+/**
+ * Maps component names to their deprecated slot names and replacements.
+ * null value = special handling (ambiguous, e.g. #icon on dt-button).
+ */
+const DEPRECATED_SLOTS = {
+  'dt-badge': { leftIcon: 'startIcon', rightIcon: 'endIcon' },
+  'dt-button': { icon: null },
+  'dt-input': { leftIcon: 'startIcon', rightIcon: 'endIcon' },
+  'dt-tab': { leftIcon: 'startIcon' },
+  'dt-split-button': { alphaIcon: 'startIcon', omegaIcon: 'endIcon', omega: 'end' },
+  'dt-item-layout': { left: 'start', right: 'end', bottom: 'blockEnd' },
+  'dt-recipe-callbox': { right: 'end', bottom: 'blockEnd' },
+  'dt-recipe-contact-centers-row': { right: 'end' },
+  'dt-recipe-general-row': { left: 'start' },
+  'dt-recipe-top-banner-info': { left: 'start', right: 'end' },
+  'dt-recipe-grouped-chip': {
+    leftIcon: 'startIcon',
+    rightIcon: 'endIcon',
+    leftContent: 'startContent',
+    rightContent: 'endContent',
+  },
+};
+
+/**
+ * Maps component names to their deprecated prop names (kebab-case) and replacements.
+ */
+const DEPRECATED_PROPS = {
+  'dt-item-layout': {
+    'left-class': 'start-class',
+    'right-class': 'end-class',
+    'bottom-class': 'block-end-class',
+  },
+  'dt-split-button': {
+    'alpha-active': 'start-active',
+    'alpha-aria-label': 'start-aria-label',
+    'alpha-icon-position': 'start-icon-position',
+    'alpha-leading-class': 'start-leading-class',
+    'alpha-trailing-class': 'start-trailing-class',
+    'alpha-label-class': 'start-label-class',
+    'alpha-disabled': 'start-disabled',
+    'alpha-loading': 'start-loading',
+    'alpha-tooltip-text': 'start-tooltip-text',
+    'omega-active': 'end-active',
+    'omega-aria-label': 'end-aria-label',
+    'omega-disabled': 'end-disabled',
+    'omega-id': 'end-id',
+    'omega-tooltip-text': 'end-tooltip-text',
+  },
+};
+
+/**
+ * Maps component names to props whose specific values are deprecated.
+ */
+const DEPRECATED_PROP_VALUES = {
+  'dt-button': {
+    'icon-position': { left: 'start', right: 'end', top: 'blockStart', bottom: 'blockEnd' },
+  },
+  'dt-root-layout': {
+    'sidebar-position': { left: 'start', right: 'end' },
+  },
+};
+
+/**
+ * Maps component names to their deprecated event names and replacements.
+ */
+const DEPRECATED_EVENTS = {
+  'dt-split-button': { 'alpha-clicked': 'start-clicked', 'omega-clicked': 'end-clicked' },
+};
+
+//------------------------------------------------------------------------------
+// Helpers
+//------------------------------------------------------------------------------
+
+/**
+ * Converts PascalCase or camelCase to kebab-case.
+ * e.g. 'DtBadge' → 'dt-badge', 'DtRecipeCallbox' → 'dt-recipe-callbox'
+ */
+function toKebabCase (str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Detect deprecated physical direction names in Dialtone component slots, props, prop values, and events',
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/deprecated-physical-naming.md',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      deprecatedSlot:
+        '#{{ oldSlot }} on <{{ component }}> is deprecated. Use #{{ newSlot }} instead.',
+      deprecatedIconSlot:
+        'The #icon slot on <dt-button> is deprecated. Use #startIcon, #endIcon, #blockStartIcon, or #blockEndIcon instead.',
+      deprecatedProp:
+        '{{ oldProp }} on <{{ component }}> is deprecated. Use {{ newProp }} instead.',
+      deprecatedPropValue:
+        '{{ prop }}="{{ oldValue }}" on <{{ component }}> is deprecated. Use {{ prop }}="{{ newValue }}" instead.',
+      deprecatedEvent:
+        '@{{ oldEvent }} on <{{ component }}> is deprecated. Use @{{ newEvent }} instead.',
+    },
+  },
+
+  create (context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    return sourceCode.parserServices.defineTemplateBodyVisitor({
+
+      VElement (node) {
+        const rawName = node.rawName || node.name;
+        const elementName = rawName.includes('-') ? rawName : toKebabCase(rawName);
+
+        const slotsMap = DEPRECATED_SLOTS[elementName];
+        const propsMap = DEPRECATED_PROPS[elementName];
+        const propValuesMap = DEPRECATED_PROP_VALUES[elementName];
+        const eventsMap = DEPRECATED_EVENTS[elementName];
+
+        // Check attributes in a single pass (props, prop values, events)
+        if (propsMap || propValuesMap || eventsMap) {
+          for (const attr of node.startTag.attributes) {
+            if (!attr.directive) {
+              // Static props: alpha-active, left-class="x", icon-position="left"
+              const attrName = attr.key && (attr.key.rawName || attr.key.name);
+              if (attrName && propsMap && propsMap[attrName]) {
+                context.report({
+                  node: attr,
+                  messageId: 'deprecatedProp',
+                  data: {
+                    component: elementName,
+                    oldProp: attrName,
+                    newProp: propsMap[attrName],
+                  },
+                });
+              }
+              if (attrName && propValuesMap && propValuesMap[attrName] && attr.value) {
+                const val = attr.value.value;
+                if (propValuesMap[attrName][val]) {
+                  context.report({
+                    node: attr,
+                    messageId: 'deprecatedPropValue',
+                    data: {
+                      component: elementName,
+                      prop: attrName,
+                      oldValue: val,
+                      newValue: propValuesMap[attrName][val],
+                    },
+                  });
+                }
+              }
+            } else if (attr.directive && attr.key.name.name === 'bind') {
+              // Dynamic props: :alpha-active="x", v-bind:omega-disabled="y"
+              const bindName = attr.key.argument && (attr.key.argument.rawName || attr.key.argument.name);
+              if (bindName && propsMap && propsMap[bindName]) {
+                context.report({
+                  node: attr,
+                  messageId: 'deprecatedProp',
+                  data: {
+                    component: elementName,
+                    oldProp: bindName,
+                    newProp: propsMap[bindName],
+                  },
+                });
+              }
+            } else if (eventsMap && attr.key.name.name === 'on') {
+              const eventName = attr.key.argument && (attr.key.argument.rawName || attr.key.argument.name);
+              if (eventName && eventsMap[eventName]) {
+                context.report({
+                  node: attr,
+                  messageId: 'deprecatedEvent',
+                  data: {
+                    component: elementName,
+                    oldEvent: eventName,
+                    newEvent: eventsMap[eventName],
+                  },
+                });
+              }
+            }
+          }
+        }
+
+        // Check child <template> elements for deprecated slot names
+        if (slotsMap) {
+          for (const child of node.children) {
+            if (child.type === 'VElement' && child.name === 'template') {
+              for (const attr of child.startTag.attributes) {
+                if (attr.directive && attr.key.name.name === 'slot') {
+                  const slotName = attr.key.argument && (attr.key.argument.rawName || attr.key.argument.name);
+                  if (slotName && slotName in slotsMap) {
+                    if (slotsMap[slotName] === null) {
+                      // #icon on dt-button is ambiguous — consumer must choose replacement
+                      context.report({ node: attr, messageId: 'deprecatedIconSlot' });
+                    } else {
+                      context.report({
+                        node: attr,
+                        messageId: 'deprecatedSlot',
+                        data: {
+                          component: elementName,
+                          oldSlot: slotName,
+                          newSlot: slotsMap[slotName],
+                        },
+                      });
+                    }
+                  }
+                  break;
+                }
+              }
+            }
+          }
+        }
+      },
+    });
+  },
+};

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

@@ -0,0 +1,136 @@
+/**
+ * @fileoverview Detects usage of deprecated t-shirt size props (xs, sm, md, lg, xl) on Dialtone
+ * components and suggests numeric equivalents (100, 200, 300, 400, 500).
+ * @author Dialtone Team
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+const SIZE_MAP = {
+  xs: '100',
+  sm: '200',
+  md: '300',
+  lg: '400',
+  xl: '500',
+  '2xl': '600',
+  '3xl': '700',
+};
+
+const TSHIRT_VALUES = new Set(Object.keys(SIZE_MAP));
+
+// Props that accept the component size scale
+const SIZE_PROPS = ['size', 'label-size', 'labelSize'];
+
+// Speed prop on motion-text also uses the same scale
+const SPEED_PROPS = ['speed'];
+
+// All size-related prop names
+const ALL_SIZE_PROPS = [...SIZE_PROPS, ...SPEED_PROPS];
+
+// Only flag on Dialtone components (dt-* or Dt*)
+function isDialtoneComponent (node) {
+  const parent = node.parent;
+  if (!parent || parent.type !== 'VStartTag') return false;
+  const element = parent.parent;
+  if (!element || element.type !== 'VElement') return false;
+  const name = element.rawName || element.name || '';
+  return name.startsWith('dt-') || name.startsWith('Dt');
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'T-shirt sizes (xs, sm, md, lg, xl) are deprecated. Use numeric scale (100, 200, 300, 400, 500) instead.',
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/deprecated-tshirt-sizes.md',
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      deprecatedSize: 'Size "{{oldSize}}" is deprecated. Use :{{prop}}="{{newSize}}" instead.',
+      deprecatedSizeInBinding: 'T-shirt size "{{oldSize}}" in dynamic binding is deprecated. Use numeric {{newSize}} instead.',
+    },
+  },
+
+  create (context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    return sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute (node) {
+        if (!isDialtoneComponent(node)) return;
+
+        // Get the prop name and check if it's a size-related prop
+        const isDirective = node.directive;
+        const propName = isDirective
+          ? (node.key.argument && node.key.argument.name)
+          : node.key.name;
+
+        if (!propName || !ALL_SIZE_PROPS.includes(propName)) return;
+
+        // --- Static attributes: size="sm" → auto-fixable ---
+        if (!isDirective && 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],
+                prop: propName,
+              },
+              fix (fixer) {
+                const newAttr = `:${propName}="${SIZE_MAP[sizeValue]}"`;
+                return fixer.replaceTextRange(
+                  [node.range[0], node.range[1]],
+                  newAttr,
+                );
+              },
+            });
+          }
+          return;
+        }
+
+        // --- Dynamic bindings: :size="'sm'" or :size="x ? 'sm' : 'md'" ---
+        if (isDirective && node.value && node.value.expression) {
+          // Walk the expression tree for string literals with t-shirt values
+          const expression = node.value.expression;
+          const literals = [];
+
+          (function findLiterals (n) {
+            if (!n) return;
+            if (n.type === 'Literal' && typeof n.value === 'string' && TSHIRT_VALUES.has(n.value)) {
+              literals.push(n);
+            }
+            // Walk child nodes
+            for (const key of Object.keys(n)) {
+              if (key === 'parent') continue;
+              const child = n[key];
+              if (child && typeof child === 'object') {
+                if (Array.isArray(child)) {
+                  child.forEach(c => { if (c && c.type) findLiterals(c); });
+                } else if (child.type) {
+                  findLiterals(child);
+                }
+              }
+            }
+          })(expression);
+
+          for (const literal of literals) {
+            context.report({
+              node: literal,
+              messageId: 'deprecatedSizeInBinding',
+              data: {
+                oldSize: literal.value,
+                newSize: SIZE_MAP[literal.value],
+              },
+            });
+          }
+        }
+      },
+    });
+  },
+};

package/lib/rules/focusgroup-requires-label.js

@@ -0,0 +1,52 @@
+/**
+ * @fileoverview Warns when v-dt-focusgroup is used without an accessible label on the same element.
+ * @author Dialtone
+ */
+'use strict';
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Warns when v-dt-focusgroup is used on an element without aria-label or aria-labelledby. ' +
+        'Screen readers need an accessible name to identify the widget.',
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/focusgroup-requires-label.md',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      missingLabel:
+        'v-dt-focusgroup requires an accessible name via "aria-label" or "aria-labelledby" ' +
+        'so screen readers can identify the widget.',
+    },
+  },
+
+  create (context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    return sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute (node) {
+        if (!node.directive) return;
+        if (node.key.name.name !== 'dt-focusgroup') return;
+
+        const element = node.parent;
+        const hasLabel = element.attributes.some(
+          attr =>
+            (!attr.directive && (
+              attr.key.name === 'aria-label' ||
+              attr.key.name === 'aria-labelledby'
+            )) ||
+            (attr.directive && attr.key.name.name === 'bind' && (
+              attr.key.argument?.name === 'aria-label' ||
+              attr.key.argument?.name === 'aria-labelledby'
+            )),
+        );
+
+        if (!hasLabel) {
+          context.report({ node, messageId: 'missingLabel' });
+        }
+      },
+    });
+  },
+};

package/lib/rules/focusgroup-requires-role.js

@@ -0,0 +1,46 @@
+/**
+ * @fileoverview Warns when v-dt-focusgroup is used without a role attribute on the same element.
+ * @author Dialtone
+ */
+'use strict';
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Warns when v-dt-focusgroup is used on an element without a role attribute. ' +
+        'Screen readers need a role to announce the widget correctly.',
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/focusgroup-requires-role.md',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      missingRole:
+        'v-dt-focusgroup requires a "role" attribute (e.g. toolbar, tablist, listbox, radiogroup, menu) ' +
+        'so screen readers can announce the widget correctly.',
+    },
+  },
+
+  create (context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    return sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute (node) {
+        if (!node.directive) return;
+        if (node.key.name.name !== 'dt-focusgroup') return;
+
+        const element = node.parent;
+        const hasRole = element.attributes.some(
+          attr =>
+            (!attr.directive && attr.key.name === 'role') ||
+            (attr.directive && attr.key.name.name === 'bind' && attr.key.argument?.name === 'role'),
+        );
+
+        if (!hasRole) {
+          context.report({ node, messageId: 'missingRole' });
+        }
+      },
+    });
+  },
+};

package/package.json

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