npm - @dialpad/dialtone-css - Versions diffs - 8.78.0-next.1 → 8.78.0-next.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (108) hide show

package/README.md CHANGED Viewed

@@ -30,14 +30,12 @@ import '@dialpad/dialtone-css';
 - Light mode
 ```html
 <body class="dialtone-theme-light">...</body>
 ```
 - Dark mode
 ```html
 <body class="dialtone-theme-dark">...</body>
 ```

package/lib/build/js/dialtone_migrate_flex_to_stack/examples-edge-cases.vue CHANGED Viewed

@@ -292,6 +292,32 @@
   <!-- TEST 47: Empty element with flex - Should convert -->
   <div class="d-d-flex d-fd-column"></div>
+  <!-- ============================================ -->
+  <!-- NEW TESTS: NEW-FORMAT GAP UTILITIES (d-g-*) -->
+  <!-- ============================================ -->
+  <!-- TEST 48: New-format gap d-g-100 (8px) - Should convert to gap="100" -->
+  <div class="d-d-flex d-ai-center d-g-100">
+    <span>New gap format 8px</span>
+  </div>
+  <!-- TEST 49: New-format gap d-g-200 (16px) - Should convert to gap="200" -->
+  <div class="d-d-flex d-fd-row d-g-200">
+    <span>Item 1</span>
+    <span>Item 2</span>
+  </div>
+  <!-- TEST 50: New-format gap d-g-400 (32px) with other props - Should convert -->
+  <div class="d-d-flex d-fd-column d-ai-center d-jc-between d-g-400">
+    <span>Full props with new gap</span>
+    <span>Example</span>
+  </div>
+  <!-- TEST 51: New-format gap d-g-50 (4px) - Should convert to gap="50" -->
+  <div class="d-d-flex d-ai-center d-g-50">
+    <span>Small gap 4px</span>
+  </div>
 </template>
 <script setup>

package/lib/build/js/dialtone_migrate_flex_to_stack/index.mjs CHANGED Viewed

@@ -142,23 +142,64 @@ const FLEX_TO_PROP = {
   'd-fd-row-reverse': { prop: 'direction', value: 'row-reverse' },
   'd-fd-column-reverse': { prop: 'direction', value: 'column-reverse' },
-  // Gap mappings (d-g* → gap prop)
+  // Gap mappings (d-g* → gap prop) — old pixel-based utilities
   'd-g0': { prop: 'gap', value: '0' },
-  'd-g8': { prop: 'gap', value: '400' },
-  'd-g16': { prop: 'gap', value: '500' },
-  'd-g24': { prop: 'gap', value: '550' },
-  'd-g32': { prop: 'gap', value: '600' },
-  'd-g48': { prop: 'gap', value: '650' },
-  'd-g64': { prop: 'gap', value: '700' },
-  // Grid-gap mappings (d-gg* → gap prop) - deprecated utilities, same as d-g*
+  'd-g1': { prop: 'gap', value: '1' },
+  'd-g2': { prop: 'gap', value: '25' },
+  'd-g4': { prop: 'gap', value: '50' },
+  'd-g6': { prop: 'gap', value: '75' },
+  'd-g8': { prop: 'gap', value: '100' },
+  'd-g10': { prop: 'gap', value: '125' },
+  'd-g12': { prop: 'gap', value: '150' },
+  'd-g14': { prop: 'gap', value: '175' },
+  'd-g16': { prop: 'gap', value: '200' },
+  'd-g20': { prop: 'gap', value: '250' },
+  'd-g24': { prop: 'gap', value: '300' },
+  'd-g32': { prop: 'gap', value: '400' },
+  'd-g48': { prop: 'gap', value: '600' },
+  'd-g64': { prop: 'gap', value: '800' },
+  // Gap mappings (d-g-* → gap prop) — new token-stop-based utilities
+  'd-g-0': { prop: 'gap', value: '0' },
+  'd-g-1': { prop: 'gap', value: '1' },
+  'd-g-25': { prop: 'gap', value: '25' },
+  'd-g-50': { prop: 'gap', value: '50' },
+  'd-g-75': { prop: 'gap', value: '75' },
+  'd-g-100': { prop: 'gap', value: '100' },
+  'd-g-125': { prop: 'gap', value: '125' },
+  'd-g-150': { prop: 'gap', value: '150' },
+  'd-g-175': { prop: 'gap', value: '175' },
+  'd-g-200': { prop: 'gap', value: '200' },
+  'd-g-250': { prop: 'gap', value: '250' },
+  'd-g-300': { prop: 'gap', value: '300' },
+  'd-g-350': { prop: 'gap', value: '350' },
+  'd-g-400': { prop: 'gap', value: '400' },
+  'd-g-450': { prop: 'gap', value: '450' },
+  'd-g-500': { prop: 'gap', value: '500' },
+  'd-g-525': { prop: 'gap', value: '525' },
+  'd-g-550': { prop: 'gap', value: '550' },
+  'd-g-600': { prop: 'gap', value: '600' },
+  'd-g-650': { prop: 'gap', value: '650' },
+  'd-g-700': { prop: 'gap', value: '700' },
+  'd-g-750': { prop: 'gap', value: '750' },
+  'd-g-800': { prop: 'gap', value: '800' },
+  // Grid-gap mappings (d-gg* → gap prop) — deprecated utilities
   'd-gg0': { prop: 'gap', value: '0' },
-  'd-gg8': { prop: 'gap', value: '400' },
-  'd-gg16': { prop: 'gap', value: '500' },
-  'd-gg24': { prop: 'gap', value: '550' },
-  'd-gg32': { prop: 'gap', value: '600' },
-  'd-gg48': { prop: 'gap', value: '650' },
-  'd-gg64': { prop: 'gap', value: '700' },
+  'd-gg1': { prop: 'gap', value: '1' },
+  'd-gg2': { prop: 'gap', value: '25' },
+  'd-gg4': { prop: 'gap', value: '50' },
+  'd-gg6': { prop: 'gap', value: '75' },
+  'd-gg8': { prop: 'gap', value: '100' },
+  'd-gg10': { prop: 'gap', value: '125' },
+  'd-gg12': { prop: 'gap', value: '150' },
+  'd-gg14': { prop: 'gap', value: '175' },
+  'd-gg16': { prop: 'gap', value: '200' },
+  'd-gg20': { prop: 'gap', value: '250' },
+  'd-gg24': { prop: 'gap', value: '300' },
+  'd-gg32': { prop: 'gap', value: '400' },
+  'd-gg48': { prop: 'gap', value: '600' },
+  'd-gg64': { prop: 'gap', value: '800' },
 };
 // Classes to remove (redundant on dt-stack)

package/lib/build/js/dialtone_migrate_tshirt_to_numeric/index.mjs ADDED Viewed

@@ -0,0 +1,233 @@
+#!/usr/bin/env node
+/**
+ * @fileoverview Migration script to convert t-shirt size props to numeric scale on Dialtone components.
+ *
+ * Transforms: size="sm" → :size="200", label-size="xs" → :label-size="100", speed="md" → :speed="300"
+ *
+ * Usage:
+ *   npx dialtone-migrate-tshirt-to-numeric [options]
+ *
+ * Options:
+ *   --cwd <path>     Working directory (default: current directory)
+ *   --dry-run        Show changes without applying them
+ *   --yes            Apply all changes without prompting
+ *   --help           Show help
+ *
+ * Examples:
+ *   npx dialtone-migrate-tshirt-to-numeric
+ *   npx dialtone-migrate-tshirt-to-numeric --dry-run
+ *   npx dialtone-migrate-tshirt-to-numeric --cwd ./src
+ */
+import fs from 'fs/promises';
+import { realpathSync } from 'node:fs';
+import path from 'path';
+import readline from 'readline';
+import { fileURLToPath } from 'node:url';
+// ---------------------------------------------------------------------------
+// Mapping
+// ---------------------------------------------------------------------------
+const SIZE_MAP = {
+  xs: '100',
+  sm: '200',
+  md: '300',
+  lg: '400',
+  xl: '500',
+  '2xl': '600',
+  '3xl': '700',
+};
+const TSHIRT_VALUES = Object.keys(SIZE_MAP).join('|');
+// Match any prop ending in size/Size/speed/Speed with a t-shirt value.
+// In the replacer, check that the character before the match is NOT a colon (v-bind).
+const PROP_REGEX = new RegExp(
+  `([\\w-]*(?:[Ss]ize|[Ss]peed))="(${TSHIRT_VALUES})"`,
+  'g',
+);
+// Props that end in "size" but are NOT component scale sizes — exclude from migration
+const EXCLUDED_PROPS = ['button-width-size', 'buttonWidthSize', 'background-size', 'backgroundSize', 'font-size', 'fontSize'];
+// Only match on Dialtone component tags
+// Use [\s\S] instead of [^>] to match across newlines in multiline tags
+const DT_TAG_PATTERN = /<(dt-[\w-]+|Dt\w+)\b[\s\S]*?>/g;
+// ---------------------------------------------------------------------------
+// File finder
+// ---------------------------------------------------------------------------
+async function findFiles (dir, extensions, ignore = []) {
+  const results = [];
+  async function walk (currentDir) {
+    try {
+      const entries = await fs.readdir(currentDir, { withFileTypes: true });
+      for (const entry of entries) {
+        const fullPath = path.join(currentDir, entry.name);
+        if (ignore.some(ig => fullPath.includes(ig))) continue;
+        if (entry.isDirectory()) {
+          await walk(fullPath);
+        } else if (entry.isFile()) {
+          if (extensions.some(ext => entry.name.endsWith(ext))) {
+            results.push(fullPath);
+          }
+        }
+      }
+    } catch {
+      // Skip unreadable directories
+    }
+  }
+  await walk(dir);
+  return results;
+}
+// ---------------------------------------------------------------------------
+// Transform logic
+// ---------------------------------------------------------------------------
+function transformContent (content) {
+  let transformed = content;
+  let count = 0;
+  // Replace t-shirt sizes only within Dialtone component tags
+  transformed = transformed.replace(DT_TAG_PATTERN, (tag) => {
+    PROP_REGEX.lastIndex = 0;
+    return tag.replace(PROP_REGEX, (match, propName, tshirt, offset, fullTag) => {
+      // Skip if preceded by ':' (already a v-bind expression)
+      if (offset > 0 && fullTag[offset - 1] === ':') return match;
+      // Skip excluded prop names (not component scale sizes)
+      if (EXCLUDED_PROPS.includes(propName)) return match;
+      if (SIZE_MAP[tshirt]) {
+        count++;
+        return `:${propName}="${SIZE_MAP[tshirt]}"`;
+      }
+      return match;
+    });
+  });
+  return { transformed, count };
+}
+export { transformContent, SIZE_MAP };
+// ---------------------------------------------------------------------------
+// CLI
+// ---------------------------------------------------------------------------
+function printHelp () {
+  console.log(`
+Usage: npx dialtone-migrate-tshirt-to-numeric [options]
+Converts t-shirt size props to numeric scale on Dialtone components.
+  size="sm"       → :size="200"
+  label-size="xs" → :label-size="100"
+  speed="md"      → :speed="300"
+Options:
+  --cwd <path>     Working directory (default: current directory)
+  --dry-run        Show changes without applying them
+  --yes            Apply all changes without prompting
+  --help           Show help
+Size mapping:
+  xs → 100    sm → 200    md → 300    lg → 400    xl → 500
+  2xl → 600   3xl → 700
+`);
+}
+async function prompt (question) {
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise(resolve => {
+    rl.question(question, answer => {
+      rl.close();
+      resolve(answer.trim().toLowerCase());
+    });
+  });
+}
+// eslint-disable-next-line complexity
+async function main () {
+  const args = process.argv.slice(2);
+  if (args.includes('--help')) {
+    printHelp();
+    process.exit(0);
+  }
+  const dryRun = args.includes('--dry-run');
+  const autoYes = args.includes('--yes');
+  const cwdIndex = args.indexOf('--cwd');
+  const cwd = cwdIndex !== -1 && args[cwdIndex + 1]
+    ? path.resolve(args[cwdIndex + 1])
+    : process.cwd();
+  console.log(`\nScanning ${cwd} for t-shirt size usage on Dialtone components...\n`);
+  const extensions = ['.vue', '.md', '.html', '.js', '.ts', '.jsx', '.tsx'];
+  const ignore = ['node_modules', 'dist', '.git', '.vuepress/public'];
+  const files = await findFiles(cwd, extensions, ignore);
+  const changes = [];
+  for (const file of files) {
+    const content = await fs.readFile(file, 'utf8');
+    const { transformed, count } = transformContent(content);
+    if (count > 0) {
+      changes.push({ file, content, transformed, count });
+    }
+  }
+  if (changes.length === 0) {
+    console.log('No t-shirt size usage found. Nothing to migrate.');
+    process.exit(0);
+  }
+  console.log(`Found ${changes.reduce((sum, c) => sum + c.count, 0)} t-shirt size references across ${changes.length} files:\n`);
+  for (const { file, count } of changes) {
+    const rel = path.relative(cwd, file);
+    console.log(`  ${rel} (${count} change${count > 1 ? 's' : ''})`);
+  }
+  if (dryRun) {
+    console.log('\n--dry-run: No files were modified.\n');
+    process.exit(0);
+  }
+  if (!autoYes) {
+    const answer = await prompt('\nApply changes? (y/N) ');
+    if (answer !== 'y' && answer !== 'yes') {
+      console.log('Cancelled.');
+      process.exit(0);
+    }
+  }
+  for (const { file, transformed } of changes) {
+    await fs.writeFile(file, transformed, 'utf8');
+  }
+  console.log(`\nMigrated ${changes.reduce((sum, c) => sum + c.count, 0)} references across ${changes.length} files.\n`);
+}
+// Only run CLI when executed directly (not when imported for testing).
+// Uses realpathSync to resolve symlinks from npx/npm bin shims.
+const isDirectRun = (() => {
+  try {
+    return realpathSync(process.argv[1]) === fileURLToPath(import.meta.url);
+  } catch {
+    return false;
+  }
+})();
+if (isDirectRun) {
+  main().catch(err => {
+    console.error(err);
+    process.exit(1);
+  });
+}