@dialpad/dialtone-css 8.81.0-next.1 → 8.81.0-next.3

package/lib/dist/js/dialtone_migrate_typography/test.mjs

@@ -12,6 +12,7 @@ import {
   detectImportPathFor,
   removeMarkersForTest,
   validateDtTextProps,
+  injectComponentImport,
 } from './index.mjs';
 
 function run (input) {
@@ -987,6 +988,26 @@ describe('wrapper safety — positive cases still convert (no false positives)',
   });
 });
 
+describe('dynamic :class flagging — multi-line element', () => {
+  it('marker goes before the opening < of a multi-line element, not between attributes', () => {
+    const input = [
+      '<div',
+      '  v-if="condition"',
+      '  :class="{ \'d-headline--md\': isHeading }"',
+      '>x</div>',
+    ].join('\n');
+    const out = run(input);
+    // Marker must appear on its own line before <div, never inside the tag
+    assert.ok(out.includes('<!-- dt-text-migrate: review dynamic class -->'), 'should emit marker');
+    const markerIdx = out.indexOf('<!-- dt-text-migrate: review dynamic class -->');
+    const divIdx = out.indexOf('<div');
+    assert.ok(markerIdx < divIdx, 'marker must precede the opening <div');
+    // The tag itself must remain structurally intact (comment not injected mid-tag)
+    assert.ok(out.includes('  :class='), ':class line must be unchanged');
+    assert.ok(out.includes('  v-if='), 'v-if line must be unchanged');
+  });
+});
+
 describe('wrapper safety — override path (d-fw-*, d-fc-*, etc.) with component children', () => {
   // Override path mirrors the composed-path safety: if the rewriteable tag
   // wraps a component/block child, skip auto-conversion. Behavior here is a
@@ -1018,3 +1039,152 @@ describe('wrapper safety — override path (d-fw-*, d-fc-*, etc.) with component
     );
   });
 });
+
+// ---------------------------------------------------------------------------
+// injectComponentImport — auto import insertion
+// ---------------------------------------------------------------------------
+
+describe('injectComponentImport — <script setup>', () => {
+  it('inserts import after the last existing import', () => {
+    const content = [
+      '<script setup>',
+      'import { DtStack } from \'@dialpad/dialtone-vue\';',
+      '</script>',
+      '<template><p>x</p></template>',
+    ].join('\n');
+    const out = injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue');
+    assert.ok(out.includes('import { DtText } from \'@dialpad/dialtone-vue\';'), 'import inserted');
+    const stackIdx = out.indexOf('DtStack');
+    const textIdx = out.indexOf('DtText');
+    assert.ok(textIdx > stackIdx, 'DtText import comes after DtStack import');
+  });
+
+  it('inserts import when no existing imports present', () => {
+    const content = [
+      '<script setup>',
+      'const x = 1;',
+      '</script>',
+    ].join('\n');
+    const out = injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue');
+    assert.ok(out.includes('import { DtText } from \'@dialpad/dialtone-vue\';'), 'import inserted');
+  });
+
+  it('returns null when component is already imported', () => {
+    const content = [
+      '<script setup>',
+      'import { DtText } from \'@dialpad/dialtone-vue\';',
+      '</script>',
+    ].join('\n');
+    assert.equal(injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue'), null);
+  });
+
+  it('does not add to components object (not needed for script setup)', () => {
+    const content = [
+      '<script setup>',
+      'import { DtStack } from \'@dialpad/dialtone-vue\';',
+      '</script>',
+    ].join('\n');
+    const out = injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue');
+    assert.ok(!out.includes('components:'), 'no components object added for script setup');
+  });
+
+  it('handles <script setup lang="ts">', () => {
+    const content = [
+      '<script setup lang="ts">',
+      'import { DtStack } from \'@dialpad/dialtone-vue\';',
+      '</script>',
+    ].join('\n');
+    const out = injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue');
+    assert.ok(out !== null, 'should succeed');
+    assert.ok(out.includes('import { DtText } from \'@dialpad/dialtone-vue\';'));
+  });
+});
+
+describe('injectComponentImport — Options API', () => {
+  it('inserts import and adds to existing components object', () => {
+    const content = [
+      '<script>',
+      'import { DtStack } from \'@dialpad/dialtone-vue\';',
+      'export default {',
+      '  components: {',
+      '    DtStack,',
+      '  },',
+      '};',
+      '</script>',
+    ].join('\n');
+    const out = injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue');
+    assert.ok(out.includes('import { DtText } from \'@dialpad/dialtone-vue\';'), 'import inserted');
+    assert.ok(out.includes('DtText,'), 'DtText added to components');
+    assert.ok(out.includes('DtStack,'), 'existing DtStack preserved');
+  });
+
+  it('returns null when no components object exists', () => {
+    const content = [
+      '<script>',
+      'export default {',
+      '  data () { return {}; },',
+      '};',
+      '</script>',
+    ].join('\n');
+    assert.equal(injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue'), null);
+  });
+
+  it('returns null when no script block found', () => {
+    const content = '<template><p>x</p></template>';
+    assert.equal(injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue'), null);
+  });
+
+  it('returns null when component is already imported', () => {
+    const content = [
+      '<script>',
+      'import { DtText } from \'@dialpad/dialtone-vue\';',
+      'export default { components: { DtText } };',
+      '</script>',
+    ].join('\n');
+    assert.equal(injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue'), null);
+  });
+
+  it('does not corrupt a helper object with components: { before export default', () => {
+    const content = [
+      '<script>',
+      'import { DtStack } from \'@dialpad/dialtone-vue\';',
+      'const editorConfig = { components: { toolbar: true } };',
+      'export default {',
+      '  components: {',
+      '    DtStack,',
+      '  },',
+      '};',
+      '</script>',
+    ].join('\n');
+    const out = injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue');
+    assert.ok(out, 'should return updated content');
+    assert.ok(out.includes('import { DtText } from \'@dialpad/dialtone-vue\';'), 'import inserted');
+    // DtText must be added to export default components, not to the editorConfig object
+    const editorConfigIdx = out.indexOf('editorConfig');
+    const dtTextIdx = out.indexOf('DtText,');
+    const exportDefaultIdx = out.indexOf('export default');
+    assert.ok(dtTextIdx > exportDefaultIdx, 'DtText registered after export default');
+    assert.ok(dtTextIdx > editorConfigIdx, 'DtText not inserted into editorConfig helper');
+    assert.ok(!out.slice(0, exportDefaultIdx).includes('DtText,'), 'DtText not in pre-export-default scope');
+  });
+
+  it('returns null when components: { appears only in a template binding, not in export default', () => {
+    // Simulate a file where the script has no components option but the template
+    // has a :config="{ components: { ... } }" binding — the template is masked
+    // during injectComponentImport (which operates on the full SFC), so the
+    // components: { in the template must not be matched.
+    const content = [
+      '<template>',
+      '  <some-editor :config="{ components: { toolbar: MyBar } }" />',
+      '</template>',
+      '<script>',
+      'import { DtStack } from \'@dialpad/dialtone-vue\';',
+      'export default {',
+      '  data () { return {}; },',
+      '};',
+      '</script>',
+    ].join('\n');
+    // No components: { in export default → should return null (can't auto-register)
+    assert.equal(injectComponentImport(content, 'DtText', '@dialpad/dialtone-vue'), null);
+  });
+});

package/lib/dist/js/dialtone_migration_helper/configs/space-to-spacing.mjs

@@ -28,8 +28,8 @@ export default {
       'eg. var(--dt-space-400) → var(--dt-spacing-100)\n' +
     '- Replaces var(--dt-space-{stop}-negative) with var(--dt-spacing-{newSuffix}-negative)\n\t' +
       'eg. var(--dt-space-400-negative) → var(--dt-spacing-100-negative)\n' +
-    '- Replaces var(--dt-space-{stop}-percent) with var(--dt-spacing-{newSuffix}-percent)\n\t' +
-      'eg. var(--dt-space-400-percent) → var(--dt-spacing-100-percent)\n' +
+    '- var(--dt-space-{stop}-percent) is left unchanged — percent tokens live under\n\t' +
+      '--dt-layout-*-percent (a different stop axis), so there is no safe automated mapping.\n' +
     '- Tokens with no equivalent (720, 730, 750+) are left unchanged for manual review.\n',
   patterns: ['**/*.{css,less,scss,sass,styl,html,vue,md,js,ts,jsx,tsx}'],
   globbyConfig: {
@@ -37,7 +37,10 @@ export default {
   },
   expressions: [
     {
-      from: /var\(--dt-space-([0-9]+)(-negative|-percent)?\)/g,
+      // -percent variants are intentionally excluded: --dt-spacing-*-percent tokens do not
+      // exist. Percent tokens live under --dt-layout-*-percent with a different stop axis
+      // (0/5/10…100 = percentages) and cannot be automatically mapped from space pixel stops.
+      from: /var\(--dt-space-([0-9]+)(-negative)?\)/g,
       to: (match, stop, suffix) => {
         const newSuffix = MAP[Number(stop)];
         if (newSuffix == null) return match;

package/lib/dist/js/dialtone_migration_helper/configs/stack-gap-to-spacing.mjs

@@ -35,6 +35,9 @@ function isAlreadyMigrated (content) {
 }
 
 export default {
+  // Gap values map directly to new spacing stops; the output of one pass (e.g. 200)
+  // is also a valid old input (200 → 25). A second pass would double-transform.
+  singlePass: true,
   description:
     'Migrates DtStack and DtDescriptionList gap prop values from old size stops to new spacing stops.\n' +
     '- Replaces gap="400" with gap="100" (8px)\n' +

package/lib/dist/js/dialtone_migration_helper/configs/utility-class-to-token-stops.mjs

@@ -36,7 +36,7 @@ const NEGATIVE_SPACING_MAP = {
   32: '400', 48: '600', 64: '800',
 };
 
-// Layout sizes for margin/padding (96px, 128px use layout tokens)
+// Layout sizes for sizing (96px, 128px use layout tokens)
 const SPACING_LAYOUT_MAP = {
   96: '150', 128: '200',
 };
@@ -77,8 +77,8 @@ export default {
     'Migrates pixel-based utility class names to token-stop-based names.\n' +
     '- Sizing: d-h16 → d-h-25, d-w64 → d-w-100, d-hmn96 → d-hmn-150\n' +
     '- Off-scale sizing: d-w1 → d-w-1px, d-h24 → d-h-24px (pixel-indexed exceptions)\n' +
-    '- Margin: d-m8 → d-m-100, d-mt16 → d-mt-200, d-mtn8 → d-mt-n100\n' +
-    '- Padding: d-p8 → d-p-100, d-pt16 → d-pt-200\n' +
+    '- Margin: d-m8 → d-m-100, d-mt16 → d-mt-200, d-mtn8 → d-mt-n100 (values ≥ 96px left unchanged)\n' +
+    '- Padding: d-p8 → d-p-100, d-pt16 → d-pt-200 (values ≥ 96px left unchanged — no layout-token padding class exists)\n' +
     '- Gap: d-g8 → d-g-100, d-rg16 → d-rg-200\n' +
     '- Position: d-t8 → d-t-100, d-tn8 → d-t-n100\n' +
     '- Border-radius all: d-bar6 → d-bar-350, d-bar24 → d-bar-550\n' +
@@ -134,18 +134,13 @@ export default {
     ]),
 
     // ── Margin: d-m{px} → d-m-{spacing-stop} ─────────────────────────────
-    ...['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my'].flatMap(prefix => [
-      // Spacing sizes (0-64px)
-      {
-        from: buildClassRegex(`d-${prefix}`, SPACING_MAP),
-        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_MAP[px]}${post}`,
-      },
-      // Layout sizes (96, 128px)
-      {
-        from: buildClassRegex(`d-${prefix}`, SPACING_LAYOUT_MAP),
-        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_LAYOUT_MAP[px]}${post}`,
-      },
-    ]),
+    // Only spacing-scale values (0-64px) are migrated. Values ≥ 96px (e.g. d-mt96)
+    // are left unchanged: token-stop margin classes use spacing tokens only, so
+    // d-mt-150 resolves to --dt-spacing-150 (12px), not --dt-layout-150 (96px).
+    ...['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my'].map(prefix => ({
+      from: buildClassRegex(`d-${prefix}`, SPACING_MAP),
+      to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_MAP[px]}${post}`,
+    })),
 
     // ── Negative margin: d-m{dir}n{px} → d-m{dir}-n{spacing-stop} ────────
     ...['mt', 'mr', 'mb', 'ml', 'mx', 'my', 'm'].map(prefix => ({
@@ -154,16 +149,13 @@ export default {
     })),
 
     // ── Padding: d-p{px} → d-p-{spacing-stop} ────────────────────────────
-    ...['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py'].flatMap(prefix => [
-      {
-        from: buildClassRegex(`d-${prefix}`, SPACING_MAP),
-        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_MAP[px]}${post}`,
-      },
-      {
-        from: buildClassRegex(`d-${prefix}`, SPACING_LAYOUT_MAP),
-        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_LAYOUT_MAP[px]}${post}`,
-      },
-    ]),
+    // Only spacing-scale values (0-64px) are migrated. Values ≥ 96px (e.g. d-pt96)
+    // are left unchanged: token-stop padding classes use spacing tokens only, so
+    // d-pt-150 resolves to --dt-spacing-150 (12px), not --dt-layout-150 (96px).
+    ...['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py'].map(prefix => ({
+      from: buildClassRegex(`d-${prefix}`, SPACING_MAP),
+      to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_MAP[px]}${post}`,
+    })),
 
     // ── Gap: d-g{px} → d-g-{spacing-stop} ────────────────────────────────
     ...['g', 'rg', 'cg'].map(prefix => ({
@@ -172,17 +164,13 @@ export default {
     })),
 
     // ── Position: d-t{px} → d-t-{spacing-stop} ───────────────────────────
-    ...['t', 'r', 'b', 'l', 'x', 'y', 'all'].flatMap(prefix => [
-      {
-        from: buildClassRegex(`d-${prefix}`, SPACING_MAP),
-        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_MAP[px]}${post}`,
-      },
-      // Layout position sizes (96px)
-      {
-        from: buildClassRegex(`d-${prefix}`, SPACING_LAYOUT_MAP),
-        to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_LAYOUT_MAP[px]}${post}`,
-      },
-    ]),
+    // Only spacing-scale values (0-64px) are migrated. Values ≥ 96px (e.g. d-t96)
+    // are left unchanged: token-stop position classes use spacing tokens only, so
+    // d-t-150 resolves to --dt-spacing-150 (12px), not --dt-layout-150 (96px).
+    ...['t', 'r', 'b', 'l', 'x', 'y', 'all'].map(prefix => ({
+      from: buildClassRegex(`d-${prefix}`, SPACING_MAP),
+      to: (match, pre, px, post) => `${pre}d-${prefix}-${SPACING_MAP[px]}${post}`,
+    })),
 
     // ── Negative position: d-{dir}n{px} → d-{dir}-n{spacing-stop} ────────
     ...['t', 'r', 'b', 'l', 'x', 'y', 'all'].map(prefix => ({

package/lib/dist/js/dialtone_migration_helper/tests/space-to-spacing-test-examples.vue

@@ -149,23 +149,19 @@
 }
 
 /* ============================================ */
-/* PERCENT VARIANTS                             */
+/* SKIP CASES (should NOT be modified)          */
 /* ============================================ */
 
-/* space-400-percent → spacing-100-percent */
-.test-percent-400 {
+/* -percent variants — no --dt-spacing-*-percent tokens exist; percent tokens live under
+   --dt-layout-*-percent with a different stop axis, so these are left for manual review */
+.test-skip-percent-400 {
   padding: var(--dt-space-400-percent);
 }
 
-/* space-600-percent → spacing-400-percent */
-.test-percent-600 {
+.test-skip-percent-600 {
   gap: var(--dt-space-600-percent);
 }
 
-/* ============================================ */
-/* SKIP CASES (should NOT be modified)          */
-/* ============================================ */
-
 /* Stops with no --dt-spacing-* equivalent — leave unchanged */
 .test-skip-720 {
   padding: var(--dt-space-720); /* 72px — no spacing equivalent */

package/lib/dist/js/dialtone_migration_helper/tests/utility-class-to-token-stops.test.mjs

@@ -89,6 +89,28 @@ describe('utility-class-to-token-stops config', () => {
     });
   });
 
+
+  // ─── Large spacing values (≥ 96px) pass through unchanged ────────────
+  //
+  // Token-stop margin/padding/position classes (d-mt-{stop}, d-pt-{stop}, d-t-{stop})
+  // use spacing tokens only. d-mt-150 = --dt-spacing-150 (12px), not --dt-layout-150 (96px).
+  // These classes must be left for manual review rather than silently changed.
+
+  describe('large margin/padding/position values — pass through unchanged', () => {
+    const unchanged = [
+      'd-mt96', 'd-mb96', 'd-ml96', 'd-mr96', 'd-mx96', 'd-my96', 'd-m96',
+      'd-mt128', 'd-mb128', 'd-ml128', 'd-mr128', 'd-mx128', 'd-my128', 'd-m128',
+      'd-pt96', 'd-pb96', 'd-pl96', 'd-pr96', 'd-px96', 'd-py96', 'd-p96',
+      'd-pt128', 'd-pb128', 'd-pl128', 'd-pr128', 'd-px128', 'd-py128', 'd-p128',
+      'd-t96', 'd-r96', 'd-b96', 'd-l96',
+    ];
+    for (const cls of unchanged) {
+      it(`${cls} is left unchanged`, () => {
+        assert.equal(apply(`<div class="${cls}" />`), `<div class="${cls}" />`);
+      });
+    }
+  });
+
   // ─── Border-radius migration (DLT-3329) ───────────────────────────────
 
   describe('border-radius all-corners — legacy pixel-suffix to token stop', () => {