@entur/typography 1.10.0-beta.9 → 2.0.0-beta.1

package/scripts/migrate-typography.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 
 /**
+ * NOTICE: This script is generated using AI with human guidance.
  * Typography Migration Script
  *
  * This script helps you migrate from old typography components to new beta typography.
@@ -11,28 +12,38 @@
  *   - Updates import paths AND component usage
  *   - Replaces old components with beta components
  *   - CONSEQUENCES:
- *     * <Heading1> becomes <Heading as="h1" variant="title-1">
+ *     * <Heading1-6> becomes <Heading as="h1-6" variant="title-1|title-2|subtitle-1|subtitle-2|section-1|section-2">
  *     * <Paragraph> becomes <Text variant="paragraph">
- *     * <Link> becomes <LinkBeta>
- *     * Props may need updates (e.g., different prop names)
+ *     * <LeadParagraph> becomes <Text variant="leading">
+ *     * <SmallText> becomes <Text variant="subparagraph">
+ *     * <StrongText> becomes <Text as="strong" weight="bold">
+ *     * <SubLabel> becomes <Text variant="sublabel">
+ *     * <SubParagraph> becomes <Text variant="subparagraph">
+ *     * <Label> becomes <Text variant="label"> (or <Text as="label" variant="label"> if htmlFor prop exists)
+ *     * <EmphasizedText> becomes <Text variant="emphasized">
+ *     * <CodeText> becomes <Text variant="code-text">
+ *     * <PreformattedText> becomes <Text variant="preformatted-text">
+ *     * <Link> becomes <Link> (from @entur/typography/beta)
+ *     * <Blockquote> becomes <Blockquote> (from @entur/typography/beta)
+ *     * <BlockquoteFooter> becomes <BlockquoteFooter> (from @entur/typography/beta)
+ *     * <UnorderedList> becomes <UnorderedList> (from @entur/typography/beta)
+ *     * <NumberedList> becomes <NumberedList> (from @entur/typography/beta)
+ *     * <ListItem> becomes <ListItem> (from @entur/typography/beta)
+ *     * Import paths change from @entur/typography to @entur/typography/beta
+ *     * Props may need updates (e.g., margin becomes spacing)
  *     * Styling classes may change
  *     * Test thoroughly after migration!
  *
- * 📝 Import-Only Mode (--import-only):
- *   - Only updates import paths from '@entur/typography' to '@entur/typography'
- *   - Keeps your existing component usage unchanged
- *   - Minimal risk, allows gradual migration
- *   - You can manually update components later
+
  *
  * Usage:
  * 1. Run this script in your project root
- * 2. Choose your migration mode (complete or import-only)
+ * 2. Choose your migration mode (complete)
  * 3. Update your styles as needed
  * 4. Test your application thoroughly
  *
  * Options:
  *   --dry-run        Show what would be changed without modifying files
- *   --import-only    Import-only migration: update import paths only
  *
  * Environment Variables:
  *   TYPOGRAPHY_MIGRATION_DIRS  Comma-separated list of directories to scan
@@ -46,31 +57,44 @@
  *
  */
 
-const fs = require('fs');
-const path = require('path');
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Get __dirname equivalent for ES modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 // Check if glob is available
 let glob;
 try {
-  glob = require('glob');
+  const globModule = await import('glob');
+  glob = globModule.default || globModule;
 } catch (error) {
   console.error(
     '❌ Error: The "glob" package is required to run this migration script.',
   );
   console.error('');
-  console.error('Please install it:');
+  console.error('Please install it first:');
   console.error('  npm install glob');
   console.error('  yarn add glob');
+  console.error('  pnpm add glob');
   console.error('');
-  console.error('Or use npx which will handle dependencies automatically:');
+  console.error('Then run the migration:');
   console.error('  npx @entur/typography@latest migrate');
+  console.error('  yarn dlx @entur/typography@latest migrate');
+  console.error('');
+  console.error('📚 For more information, see:');
+  console.error(
+    '  https://linje.entur.no/komponenter/ressurser/typography-migration',
+  );
   console.error('');
   process.exit(1);
 }
 
 // Configuration
 const OLD_IMPORT = '@entur/typography';
-const BETA_IMPORT = '@entur/typography';
+const BETA_IMPORT = '@entur/typography/beta';
 
 // Enhanced warning detection patterns - only truly problematic patterns
 const PROBLEMATIC_PATTERNS = {
@@ -123,6 +147,7 @@ const MIGRATION_FOLDERS = [
   'app/**',
   'apps/**',
   'components/**',
+  'packages/**',
   'pages/**',
   'lib/**',
   'utils/**',
@@ -342,13 +367,20 @@ const COMPONENT_MAPPING = {
   Heading6: { component: 'Heading', as: 'h6', variant: 'section-2' },
   Paragraph: { component: 'Text', variant: 'paragraph' },
   LeadParagraph: { component: 'Text', variant: 'leading' },
-  SmallText: { component: 'Text', variant: 'subparagraph', size: 's' },
-  StrongText: { component: 'Text', variant: 'emphasized', weight: 'semibold' },
-  SubLabel: { component: 'Text', variant: 'sublabel', size: 'xs' },
+  SmallText: { component: 'Text', variant: 'subparagraph' },
+  StrongText: { component: 'Text', as: 'strong', weight: 'bold' },
+  SubLabel: { component: 'Text', variant: 'sublabel' },
   SubParagraph: { component: 'Text', variant: 'subparagraph' },
   Label: { component: 'Text', variant: 'label' },
   EmphasizedText: { component: 'Text', variant: 'emphasized' },
   CodeText: { component: 'Text', variant: 'code-text' },
+  PreformattedText: { component: 'Text', variant: 'preformatted-text' },
+  Link: { component: 'Link' }, // Convert Link to beta Link
+  Blockquote: { component: 'Blockquote' }, // Convert Blockquote to beta Blockquote
+  BlockquoteFooter: { component: 'BlockquoteFooter' }, // Convert BlockquoteFooter to beta BlockquoteFooter
+  UnorderedList: { component: 'UnorderedList' },
+  NumberedList: { component: 'NumberedList' },
+  ListItem: { component: 'ListItem' },
 };
 
 // Props mapping for migration
@@ -357,17 +389,43 @@ const PROPS_MAPPING = {
 };
 
 // Spacing value mapping from old margin to new spacing
+// Based on the actual CSS classes in src/beta/styles.scss
+// and the old margin prop values: "top" | "bottom" | "both" | "none"
 const SPACING_MAPPING = {
-  none: 'none',
-  top: 'md-top',
-  bottom: 'md-bottom',
-  left: 'md-left',
-  right: 'md-right',
+  // Old margin values mapped to new spacing values
+  none: 'none', // No spacing
+  top: 'md-top', // Top margin only (medium size)
+  bottom: 'md-bottom', // Bottom margin only (medium size)
+  both: 'md', // Both top and bottom margins (medium size)
+
+  // Additional spacing values for more granular control
+  // These weren't in the old margin prop but are available in new spacing
+  left: 'md-left', // Left margin (medium size)
+  right: 'md-right', // Right margin (medium size)
+
+  // Size-based spacing (applies to both top and bottom)
   xs: 'xs',
   sm: 'sm',
   md: 'md',
   lg: 'lg',
   xl: 'xl',
+
+  // Specific directional spacing with sizes
+  'xs-top': 'xs-top',
+  'xs-bottom': 'xs-bottom',
+  'sm-top': 'sm-top',
+  'sm-bottom': 'sm-bottom',
+  'md-top': 'md-top',
+  'md-bottom': 'md-bottom',
+  'lg-top': 'lg-top',
+  'lg-bottom': 'lg-bottom',
+  'xl-top': 'xl-top',
+  'xl-bottom': 'xl-bottom',
+
+  // Extra small variants
+  xs2: 'xs2',
+  'xs2-top': 'xs2-top',
+  'xs2-bottom': 'xs2-bottom',
 };
 
 // Import patterns to handle
@@ -376,35 +434,40 @@ const IMPORT_PATTERNS = [
   /from\s+['"`]@entur\/typography\/dist['"`]/g,
   /from\s+['"`]@entur\/typography\/dist\/index['"`]/g,
   /from\s+['"`]@entur\/typography\/dist\/styles\.css['"`]/g,
+  /from\s+['"`]@entur\/typography\/styles['"`]/g,
 ];
 
 // Parse JSX props more robustly
 function parseJSXProps(propsString) {
   if (!propsString || !propsString.trim()) {
-    return { props: {}, warnings: [] };
+    return { props: {}, warnings: [], spreadProps: [] };
   }
 
   const props = {};
   const warnings = [];
-  const MAX_ITERATIONS = 100; // Prevent infinite loops
-  let iterationCount = 0;
+  const spreadProps = []; // Track spread props separately
+  const originalSyntax = {}; // Track original JSX syntax for each prop
 
   try {
     // Parse props manually to handle complex cases
     let remaining = propsString.trim();
-    let lastRemainingLength = remaining.length;
 
-    while (remaining.length > 0 && iterationCount < MAX_ITERATIONS) {
-      iterationCount++;
+    // First, extract all spread props
+    const spreadRegex = /\.\.\.\{?(\w+)\}?/g;
+    let spreadMatch;
+    while ((spreadMatch = spreadRegex.exec(remaining)) !== null) {
+      spreadProps.push(spreadMatch[1]);
+    }
 
-      // Safety check: if we're not making progress, break
-      if (remaining.length >= lastRemainingLength) {
-        warnings.push(`Parser stuck at iteration ${iterationCount}, breaking`);
-        break;
-      }
-      lastRemainingLength = remaining.length;
+    // Remove spread props from the string to parse regular props
+    remaining = remaining.replace(/\.\.\.\{?(\w+)\}?/g, '');
+
+    // Now parse regular props
+    while (remaining.trim().length > 0) {
+      // Skip whitespace
+      remaining = remaining.replace(/^\s+/, '');
 
-      // Match prop name - more efficient regex
+      // Match prop name
       const nameMatch = remaining.match(/^(\w+)=/);
       if (!nameMatch) break;
 
@@ -414,7 +477,7 @@ function parseJSXProps(propsString) {
 
       // Match prop value
       if (remaining.startsWith('"') || remaining.startsWith("'")) {
-        // String value - use indexOf for better performance
+        // String value
         const quote = remaining[0];
         const endQuoteIndex = remaining.indexOf(quote, 1);
         if (endQuoteIndex === -1) {
@@ -424,14 +487,14 @@ function parseJSXProps(propsString) {
 
         const propValue = remaining.substring(1, endQuoteIndex);
         props[propName] = propValue;
+        originalSyntax[propName] = 'string'; // Mark as string literal
         remaining = remaining.substring(endQuoteIndex + 1);
       } else if (remaining.startsWith('{')) {
-        // Object value - find matching closing brace with bounds checking
+        // Object value - find matching closing brace
         let braceCount = 0;
         let endIndex = -1;
-        const maxSearchLength = Math.min(remaining.length, 1000); // Limit search length
 
-        for (let i = 0; i < maxSearchLength; i++) {
+        for (let i = 0; i < remaining.length; i++) {
           if (remaining[i] === '{') braceCount++;
           if (remaining[i] === '}') {
             braceCount--;
@@ -449,25 +512,23 @@ function parseJSXProps(propsString) {
 
         const propValue = remaining.substring(1, endIndex);
         props[propName] = propValue;
+        originalSyntax[propName] = 'jsx'; // Mark as JSX expression
         remaining = remaining.substring(endIndex + 1);
       } else {
-        // Boolean prop (e.g., disabled) or invalid syntax
+        // Boolean prop
         props[propName] = true;
+        originalSyntax[propName] = 'boolean'; // Mark as boolean
         break;
       }
 
-      // Skip whitespace more efficiently
+      // Skip whitespace
       remaining = remaining.replace(/^\s+/, '');
     }
-
-    if (iterationCount >= MAX_ITERATIONS) {
-      warnings.push(`Maximum parsing iterations (${MAX_ITERATIONS}) reached`);
-    }
   } catch (error) {
     warnings.push(`Failed to parse props: ${error.message}`);
   }
 
-  return { props, warnings };
+  return { props, warnings, spreadProps, originalSyntax };
 }
 
 // Migrate props from old to new format
@@ -485,11 +546,12 @@ function migrateProps(props, oldComponent) {
         `Migrated 'margin="${props.margin}"' to 'spacing="${newSpacing}"'`,
       );
     } else {
-      // Unknown margin value - keep as is but warn
-      migratedProps.spacing = props.margin;
+      // Unknown margin value - suggest alternatives
+      const suggestions = getSpacingSuggestions(props.margin);
+      migratedProps.spacing = props.margin; // Keep original value for now
       delete migratedProps.margin;
       warnings.push(
-        `Migrated 'margin="${props.margin}"' to 'spacing="${props.margin}"' (unknown value - may need manual review)`,
+        `Migrated 'margin="${props.margin}"' to 'spacing="${props.margin}"' (unknown value). ${suggestions}`,
       );
     }
   }
@@ -516,8 +578,55 @@ function migrateProps(props, oldComponent) {
   return { props: migratedProps, warnings };
 }
 
+// Helper function to suggest spacing alternatives for unknown margin values
+function getSpacingSuggestions(unknownMargin) {
+  const suggestions = [];
+
+  // Check if it might be one of the old margin values
+  if (['top', 'bottom', 'both', 'none'].includes(unknownMargin)) {
+    suggestions.push(
+      `"${unknownMargin}" is a valid old margin value and will be migrated correctly.`,
+    );
+    return suggestions.join(' ');
+  }
+
+  // Check if it might be a directional value
+  if (
+    unknownMargin.includes('top') ||
+    unknownMargin.includes('bottom') ||
+    unknownMargin.includes('left') ||
+    unknownMargin.includes('right')
+  ) {
+    suggestions.push(
+      'Consider using directional spacing like "md-top", "sm-bottom", etc.',
+    );
+  }
+
+  // Check if it might be a size value
+  if (['xs', 'sm', 'md', 'lg', 'xl'].includes(unknownMargin)) {
+    suggestions.push(
+      'Consider using size-based spacing like "xs", "sm", "md", "lg", "xl".',
+    );
+  }
+
+  // Check if it might be a specific variant
+  if (unknownMargin.includes('xs2')) {
+    suggestions.push(
+      'Consider using "xs2", "xs2-top", or "xs2-bottom" for extra small spacing.',
+    );
+  }
+
+  if (suggestions.length === 0) {
+    suggestions.push(
+      'Old margin values: "none", "top", "bottom", "both". New spacing values: "xs", "sm", "md", "lg", "xl", and directional variants.',
+    );
+  }
+
+  return suggestions.join(' ');
+}
+
 // Convert props object back to JSX string
-function propsToString(props) {
+function propsToString(props, originalSyntax = {}) {
   if (!props || Object.keys(props).length === 0) {
     return '';
   }
@@ -526,20 +635,46 @@ function propsToString(props) {
     ' ' +
     Object.entries(props)
       .map(([key, value]) => {
-        // Handle different value types
-        if (typeof value === 'string' && !value.includes('{')) {
+        // Use original syntax information if available
+        if (originalSyntax[key] === 'string') {
           return `${key}="${value}"`;
-        } else if (
-          typeof value === 'string' &&
-          value.startsWith('{') &&
-          value.endsWith('}')
-        ) {
-          // Already a JSX object, don't add extra braces
-          return `${key}={${value}}`;
+        } else if (originalSyntax[key] === 'jsx') {
+          // Check if the JSX expression is actually a string literal (e.g., 'a' or "a")
+          if (
+            typeof value === 'string' &&
+            ((value.startsWith("'") &&
+              value.endsWith("'") &&
+              value.length > 1) ||
+              (value.startsWith('"') &&
+                value.endsWith('"') &&
+                value.length > 1))
+          ) {
+            // It's a string literal in JSX, convert to string prop
+            const stringValue = value.slice(1, -1); // Remove quotes
+            return `${key}="${stringValue}"`;
+          } else {
+            // It's a real JSX expression, keep as is
+            return `${key}={${value}}`;
+          }
+        } else if (originalSyntax[key] === 'boolean') {
+          return value ? key : '';
         } else {
-          return `${key}={${value}}`;
+          // Fallback logic for when originalSyntax is not available
+          if (typeof value === 'string' && !value.includes('{')) {
+            return `${key}="${value}"`;
+          } else if (
+            typeof value === 'string' &&
+            value.startsWith('{') &&
+            value.endsWith('}')
+          ) {
+            // Already a JSX object, don't add extra braces
+            return `${key}={${value}}`;
+          } else {
+            return `${key}={${value}}`;
+          }
         }
       })
+      .filter(prop => prop.length > 0) // Remove empty props (like false booleans)
       .join(' ')
   );
 }
@@ -549,40 +684,113 @@ function updateImports(content) {
   let updatedContent = content;
   let changes = 0;
 
-  // First, update import paths
-  IMPORT_PATTERNS.forEach(pattern => {
-    const matches = content.match(pattern) || [];
-    changes += matches.length;
-    updatedContent = updatedContent.replace(pattern, `from '${BETA_IMPORT}'`);
-  });
+  // Handle CSS imports separately - these should stay with the main package
+  const cssImportPattern = /from\s+['"`]@entur\/typography\/styles['"`]/g;
+  if (cssImportPattern.test(content)) {
+    // CSS imports should remain unchanged as they're still in the main package
+    // No changes needed for CSS imports
+  }
 
-  // Then, update destructured import names - only within @entur/typography imports
-  // Find all import statements from @entur/typography and update component names
+  // Handle component imports - only migrate if they contain components that need migration
   const importRegex =
     /import\s*{([^}]+)}\s*from\s*['"']@entur\/typography['"']/g;
 
   updatedContent = updatedContent.replace(importRegex, (match, importList) => {
+    const components = importList
+      .split(',')
+      .map(comp => comp.trim())
+      .filter(comp => comp);
+
+    // Check if any of the imported components need migration
+    // Need to check both the full import (e.g., "Link as Li") and just the component name (e.g., "Link")
+    const needsMigration = components.some(comp => {
+      // Extract the actual component name from aliased imports
+      const componentName = comp.includes(' as ')
+        ? comp.split(' as ')[0].trim()
+        : comp;
+      return Object.keys(COMPONENT_MAPPING).includes(componentName);
+    });
+
+    if (!needsMigration) {
+      // No migration needed, keep the import as is
+      return match;
+    }
+
     let updatedImportList = importList;
     let hasChanges = false;
     const uniqueComponents = new Set();
+    const processedComponents = new Set(); // Track which components we've already processed
+
+    // First, collect all existing components that should be preserved
+    const existingComponents = components.filter(comp => {
+      // Extract the actual component name from aliased imports
+      const componentName = comp.includes(' as ')
+        ? comp.split(' as ')[0].trim()
+        : comp;
+
+      // Keep components that are:
+      // 1. Not in the migration mapping (old components), OR
+      // 2. Are the target components (new beta components)
+      const isOldComponent =
+        Object.keys(COMPONENT_MAPPING).includes(componentName);
+      const isTargetComponent = Object.values(COMPONENT_MAPPING).some(
+        mapping => mapping.component === componentName,
+      );
 
-    // Check each component in the import list
+      return !isOldComponent || isTargetComponent;
+    });
+
+    // Then, update components that need migration
     Object.entries(COMPONENT_MAPPING).forEach(([oldComponent, mapping]) => {
-      const componentRegex = new RegExp(`\\b${oldComponent}\\b`, 'g');
-      if (componentRegex.test(updatedImportList)) {
-        updatedImportList = updatedImportList.replace(
-          componentRegex,
-          mapping.component,
-        );
-        uniqueComponents.add(mapping.component);
-        hasChanges = true;
+      // Check if this old component exists in any form (aliased or not)
+      const hasComponent = components.some(comp => {
+        const componentName = comp.includes(' as ')
+          ? comp.split(' as ')[0].trim()
+          : comp;
+        return componentName === oldComponent;
+      });
+
+      if (hasComponent && !processedComponents.has(oldComponent)) {
+        // Replace the old component with the new one, preserving aliases
+        const componentRegex = new RegExp(`\\b${oldComponent}\\b`, 'g');
+        if (componentRegex.test(updatedImportList)) {
+          updatedImportList = updatedImportList.replace(
+            componentRegex,
+            mapping.component,
+          );
+
+          // Only add to uniqueComponents if the component isn't already present in aliased form
+          const componentAlreadyPresent = components.some(comp => {
+            const componentName = comp.includes(' as ')
+              ? comp.split(' as ')[0].trim()
+              : comp;
+            return componentName === mapping.component;
+          });
+
+          if (!componentAlreadyPresent) {
+            uniqueComponents.add(mapping.component);
+          }
+
+          processedComponents.add(oldComponent);
+          hasChanges = true;
+        }
       }
     });
 
     if (hasChanges) {
       changes++;
-      // Deduplicate components and create clean import statement
-      const finalImportList = Array.from(uniqueComponents).join(', ');
+      // Combine existing components with migrated components
+      const allComponents = [
+        ...existingComponents,
+        ...Array.from(uniqueComponents),
+      ];
+
+      // Filter out any empty components and deduplicate
+      const finalComponents = allComponents
+        .filter(comp => comp && comp.trim())
+        .filter((comp, index, arr) => arr.indexOf(comp) === index); // Remove duplicates
+
+      const finalImportList = finalComponents.join(', ');
       return `import {${finalImportList}} from '${BETA_IMPORT}'`;
     }
 
@@ -608,8 +816,12 @@ function updateComponents(content) {
         changes++;
 
         // Parse existing props
-        const { props: existingProps, warnings: parseWarnings } =
-          parseJSXProps(propsString);
+        const {
+          props: existingProps,
+          warnings: parseWarnings,
+          spreadProps,
+          originalSyntax,
+        } = parseJSXProps(propsString);
         warnings.push(...parseWarnings);
 
         // Migrate props
@@ -629,8 +841,46 @@ function updateComponents(content) {
 
         // Handle Heading components
         if (mapping.component === 'Heading') {
-          const asValue = newProps.as || mapping.as;
-          const variantValue = newProps.variant || mapping.variant;
+          // Preserve existing 'as' prop if it exists, otherwise use mapping default
+          const asValue = existingProps.as || mapping.as;
+          // Preserve existing 'variant' prop if it exists, otherwise use mapping default
+          const variantValue = existingProps.variant || mapping.variant;
+
+          // Remove as and variant from props since we'll add them separately
+          delete newProps.as;
+          delete newProps.variant;
+
+          // Create props object with as and variant, preserving original syntax
+          const headingProps = {
+            as: asValue,
+            variant: variantValue,
+            ...newProps,
+          };
+
+          // Create original syntax object for as and variant
+          const headingOriginalSyntax = {
+            as: originalSyntax.as || 'string',
+            variant: originalSyntax.variant || 'string',
+            ...originalSyntax,
+          };
+
+          const propsString = propsToString(
+            headingProps,
+            headingOriginalSyntax,
+          );
+          const spreadPropsString =
+            spreadProps.length > 0 ? ` {...${spreadProps.join(', ...')}}` : '';
+          return `<Heading${propsString}${spreadPropsString}>`;
+        }
+
+        // Handle Label components with special case for htmlFor prop
+        if (oldComponent === 'Label' && mapping.component === 'Text') {
+          // If htmlFor prop exists, add as="label" to ensure proper semantic HTML
+          // Otherwise, use existing as prop or default to undefined (no as prop)
+          const asValue = existingProps.htmlFor
+            ? 'label'
+            : existingProps.as || undefined;
+          const variantValue = existingProps.variant || mapping.variant;
 
           // Remove as and variant from props since we'll add them separately
           delete newProps.as;
@@ -644,8 +894,13 @@ function updateComponents(content) {
           }
           Object.assign(orderedProps, newProps);
 
-          const propsString = propsToString(orderedProps);
-          return `<Heading as="${asValue}" variant="${variantValue}"${propsString}>`;
+          const propsString = propsToString(orderedProps, originalSyntax);
+          const spreadPropsString =
+            spreadProps.length > 0 ? ` {...${spreadProps.join(', ...')}}` : '';
+
+          // Only add as prop if it has a value
+          const asProp = asValue ? ` as="${asValue}"` : '';
+          return `<Text${asProp} variant="${variantValue}"${propsString}${spreadPropsString}>`;
         }
 
         // Handle other components
@@ -667,8 +922,10 @@ function updateComponents(content) {
         });
         Object.assign(finalProps, newProps);
 
-        const otherPropsString = propsToString(finalProps);
-        return `<${componentName}${otherPropsString}>`;
+        const otherPropsString = propsToString(finalProps, originalSyntax);
+        const spreadPropsString =
+          spreadProps.length > 0 ? ` {...${spreadProps.join(', ...')}}` : '';
+        return `<${componentName}${otherPropsString}${spreadPropsString}>`;
       },
     );
 
@@ -696,15 +953,33 @@ function updateComponents(content) {
  * @returns {string[]} Array of matching file paths
  */
 function findFiles(pattern) {
-  // Create a single glob pattern that covers all allowed directories
-  // Uses brace expansion: {src,app,components}/**/*.{ts,tsx,js,jsx}
-  const combinedPattern = `{${ALLOWED_DIRECTORIES.join(',')}}/${pattern}`;
-
-  // Use a single glob call instead of multiple calls
-  const allFiles = glob.sync(combinedPattern, {
-    ignore: BLOCKED_DIRECTORIES,
-    nodir: true,
-    absolute: false,
+  const allFiles = [];
+
+  // Process directory patterns
+  const directoryPatterns = ALLOWED_DIRECTORIES.filter(dir =>
+    dir.includes('**'),
+  );
+  const filePatterns = ALLOWED_DIRECTORIES.filter(dir => !dir.includes('**'));
+
+  // Handle directory patterns (e.g., src/**, app/**)
+  if (directoryPatterns.length > 0) {
+    const combinedDirPattern = `{${directoryPatterns.join(',')}}/${pattern}`;
+    const dirFiles = glob.sync(combinedDirPattern, {
+      ignore: BLOCKED_DIRECTORIES,
+      nodir: true,
+      absolute: false,
+    });
+    allFiles.push(...dirFiles);
+  }
+
+  // Handle file patterns (e.g., *.jsx, *.tsx)
+  filePatterns.forEach(filePattern => {
+    const files = glob.sync(filePattern, {
+      ignore: BLOCKED_DIRECTORIES,
+      nodir: true,
+      absolute: false,
+    });
+    allFiles.push(...files);
   });
 
   // Use Set for efficient deduplication and filtering
@@ -725,37 +1000,29 @@ function findFiles(pattern) {
   return uniqueFiles;
 }
 
-function updateImportsAndComponents(content, strategy) {
+function updateImportsAndComponents(content) {
   let updatedContent = content;
   let changes = 0;
   let warnings = [];
 
-  if (strategy === 'import-only') {
-    // Only update imports
-    const { content: newContent, changes: importChanges } =
-      updateImports(content);
-    updatedContent = newContent;
-    changes = importChanges;
-  } else if (strategy === 'complete') {
-    // Update both imports and components
-    const { content: newContent, changes: importChanges } =
-      updateImports(content);
-    const {
-      content: finalContent,
-      changes: componentChanges,
-      warnings: componentWarnings,
-    } = updateComponents(newContent);
-    updatedContent = finalContent;
-    changes = importChanges + componentChanges;
-    warnings = componentWarnings;
-  }
+  // Update both imports and components
+  const { content: newContent, changes: importChanges } =
+    updateImports(content);
+  const {
+    content: finalContent,
+    changes: componentChanges,
+    warnings: componentWarnings,
+  } = updateComponents(newContent);
+  updatedContent = finalContent;
+  changes = importChanges + componentChanges;
+  warnings = componentWarnings;
 
   return { content: updatedContent, changes, warnings };
 }
 
-function generateMigrationReport(files, strategy, isDryRun = false) {
+function generateMigrationReport(files, isDryRun = false) {
   const report = {
-    strategy,
+    strategy: 'complete',
     totalFiles: files.length,
     migratedFiles: 0,
     totalChanges: 0,
@@ -776,7 +1043,7 @@ function generateMigrationReport(files, strategy, isDryRun = false) {
         content: updatedContent,
         changes,
         warnings,
-      } = updateImportsAndComponents(content, strategy);
+      } = updateImportsAndComponents(content);
 
       // Combine migration warnings with file analysis warnings
       const allWarnings = [...warnings, ...fileAnalysis.warnings];
@@ -1006,23 +1273,13 @@ function printReport(report) {
   }
 }
 
-function showNextSteps(strategy) {
+function showNextSteps() {
   console.log('\n📝 Next Steps');
   console.log('=============');
 
-  if (strategy === 'import-only') {
-    console.log('1. ✅ Import statements updated');
-    console.log('2. 🔄 Update component usage manually when ready:');
-    Object.entries(COMPONENT_MAPPING).forEach(([old, new_]) => {
-      console.log(`   ${old} → ${new_}`);
-    });
-    console.log('3. 🧪 Test your application');
-    console.log('4. 📚 Read the migration guide on our website');
-  } else if (strategy === 'complete') {
-    console.log('1. 🧪 Test your application thoroughly');
-    console.log('2. 🔄 Review and adjust any component props if needed');
-    console.log('3. 📚 Read the migration guide on our website');
-  }
+  console.log('1. 🧪 Test your application thoroughly');
+  console.log('2. 🔄 Review and adjust any component props if needed');
+  console.log('3. 📚 Read the migration guide on our website');
 
   console.log('\n⚠️  Important Notes:');
   console.log('- Check warnings above for potential issues');
@@ -1030,7 +1287,7 @@ function showNextSteps(strategy) {
   console.log('- Test thoroughly, especially components with custom styling');
 }
 
-function main() {
+async function main() {
   // Show help if requested
   if (process.argv.includes('--help') || process.argv.includes('-h')) {
     console.log('🎨 Typography Migration Script');
@@ -1047,40 +1304,34 @@ function main() {
     console.log('  # Local development');
     console.log('  npm run migrate');
     console.log('');
-    console.log('Options:');
+    console.log('📋 Prerequisites:');
+    console.log('  - Install glob package: npm install glob');
     console.log(
-      '  --dry-run        Show what would be changed without modifying files',
+      '  - Or use npx/yarn dlx which handles dependencies automatically',
     );
+    console.log('');
+    console.log('Options:');
     console.log(
-      '  --import-only    Import-only migration: update import paths only',
+      '  --dry-run        Show what would be changed without modifying files',
     );
-
     console.log('  --help, -h       Show this help message');
     console.log('');
-    console.log('Migration Modes:');
-    console.log('  🚀 Complete Mode (default): Updates everything');
+    console.log('Migration Mode:');
+    console.log('  🚀 Complete Mode: Updates everything');
     console.log('     - Replaces old components with beta components');
-    console.log('     - May require prop/styling updates');
+    console.log('     - Heading1-6 → Heading with as/variant props');
+    console.log('     - Text components → Text with variant props');
+    console.log('     - All typography components migrate to beta versions');
+    console.log('     - Import paths change to @entur/typography/beta');
+    console.log('     - May require prop/styling updates (margin → spacing)');
     console.log('     - Test thoroughly after migration');
     console.log('');
-    console.log(
-      '  📝 Import-Only Mode (--import-only): Only updates import paths',
-    );
-    console.log('     - Keeps your existing component usage unchanged');
-    console.log('     - Minimal risk, gradual migration');
-    console.log('');
     console.log('Examples:');
     console.log('  # See what would be changed');
     console.log('  npx @entur/typography@latest migrate --dry-run');
     console.log('');
     console.log('  # Complete migration: update everything (default)');
     console.log('  npx @entur/typography@latest migrate');
-    console.log('');
-    console.log('  # Import-only migration: update import paths only');
-    console.log('  npx @entur/typography@latest migrate --import-only');
-    console.log('');
-
-    console.log('');
 
     console.log('Environment Variables:');
     console.log(
@@ -1096,7 +1347,7 @@ function main() {
     console.log('    Add/remove folder patterns between the 👇 and 👆 markers');
     console.log('    Examples: "src/**", "app/**", "packages/my-app/**"');
     console.log('');
-    console.log('  Option 2: Set environment variable (for CI/CD)');
+    console.log('  Option 2: Set environment variable');
     console.log(
       '    export TYPOGRAPHY_MIGRATION_DIRS="src/**,app/**,components/**"',
     );
@@ -1164,47 +1415,48 @@ function main() {
 
   // Parse command line options
   const isDryRun = process.argv.includes('--dry-run');
-  const isImportOnly = process.argv.includes('--import-only');
 
   if (isDryRun) {
     console.log('🔍 DRY RUN MODE: No files will be modified');
     console.log('');
   }
 
-  if (isImportOnly) {
-    console.log('📝 IMPORT-ONLY MIGRATION: Updating import paths only');
-    console.log('   - Your component usage will remain unchanged');
-    console.log('   - You can update components manually later');
-  } else {
-    console.log('🚀 COMPLETE MIGRATION: Updating imports + component usage');
-    console.log('⚠️  WARNING: This will modify your component usage!');
-    console.log('   - Old components will be replaced with beta components');
-    console.log('   - You may need to update props and styling');
-    console.log('   - Test thoroughly after migration');
-    console.log('   (Use --import-only for import-only migration)');
-  }
+  console.log('🚀 COMPLETE MIGRATION: Updating imports + component usage');
+  console.log('⚠️  WARNING: This will modify your component usage!');
+  console.log('   - Old components will be replaced with beta components');
+  console.log('   - Import paths will change to @entur/typography/beta');
+  console.log(
+    '   - Link → Link, Blockquote → Blockquote, Lists → List components (from beta)',
+  );
+  console.log(
+    '   - List components → UnorderedList, NumberedList, ListItem (from beta)',
+  );
+  console.log('   - Props may change (margin → spacing)');
+  console.log('   - Test thoroughly after migration');
 
   console.log('');
 
   // Perform migration
-  const report = generateMigrationReport(
-    allFiles,
-    isImportOnly ? 'import-only' : 'complete',
-    isDryRun,
-  );
+  const report = generateMigrationReport(allFiles, isDryRun);
   printReport(report);
-  showNextSteps(isImportOnly ? 'import-only' : 'complete');
+  showNextSteps();
 
   console.log('\n🎯 Migration complete!');
 }
 
-if (require.main === module) {
-  main();
+// Check if this module is being run directly
+if (import.meta.url === `file://${process.argv[1]}`) {
+  main().catch(error => {
+    console.error('❌ Migration failed:', error);
+    process.exit(1);
+  });
 }
 
-module.exports = {
+export {
   updateImportsAndComponents,
   generateMigrationReport,
   COMPONENT_MAPPING,
   PROPS_MAPPING,
+  parseJSXProps,
+  propsToString,
 };