@entur/typography 1.10.0-beta.1 → 1.10.0-beta.11

package/scripts/migrate-typography.js

@@ -14,25 +14,25 @@
  *     * <Heading1> becomes <Heading as="h1" variant="title-1">
  *     * <Paragraph> becomes <Text variant="paragraph">
  *     * <Link> becomes <LinkBeta>
+ *     * <Blockquote> becomes <BlockquoteBeta>
+ *     * <BlockquoteFooter> becomes <BlockquoteFooterBeta>
+ *     * <UnorderedList> becomes <UnorderedListBeta>
+ *     * <NumberedList> becomes <NumberedListBeta>
+ *     * <ListItem> becomes <ListItemBeta>
  *     * Props may need updates (e.g., different prop names)
  *     * 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
@@ -72,6 +72,31 @@ try {
 const OLD_IMPORT = '@entur/typography';
 const BETA_IMPORT = '@entur/typography';
 
+// Enhanced warning detection patterns - only truly problematic patterns
+const PROBLEMATIC_PATTERNS = {
+  // Style conflicts that will cause issues
+  styleMarginConflict: /style=.*margin=/g,
+  styleSpacingConflict: /style=.*spacing=/g,
+
+  // Invalid HTML structure
+  nestedTypography: /<Text[^>]*>.*<Text[^>]*>/g,
+
+  // Accessibility issues
+  missingAsProps: /<Heading[^>]*>(?!.*\bas=)/g,
+
+  // Semantic HTML mismatches
+  semanticMismatch: /<Heading[^>]*as="([^"]*)"[^>]*variant="([^"]*)"/g,
+};
+
+// Warning severity levels
+const WARNING_CATEGORIES = {
+  CRITICAL: 'critical', // Will break functionality
+  HIGH: 'high', // Likely to cause issues
+  MEDIUM: 'medium', // May cause styling issues
+  LOW: 'low', // Best practice suggestions
+  INFO: 'info', // Informational only
+};
+
 // =============================================================================
 // 🎯 MIGRATION FOLDERS CONFIGURATION
 // =============================================================================
@@ -114,6 +139,153 @@ function validateDirectoryPath(dir) {
   return !path.isAbsolute(dir) && !dir.includes('..') && !dir.includes('~');
 }
 
+// Enhanced file analysis for better warning detection - only truly problematic patterns
+function analyzeFile(filePath, content) {
+  const analysis = {
+    hasStyleConflicts: false,
+    hasNestedTypography: false,
+    hasAccessibilityIssues: false,
+    hasSemanticMismatches: false,
+    lineNumbers: {},
+    suggestions: [],
+    warnings: [],
+  };
+
+  // Line-by-line analysis for better context
+  content.split('\n').forEach((line, index) => {
+    const lineNum = index + 1;
+
+    // Check for style conflicts (style + margin/spacing)
+    if (
+      line.match(PROBLEMATIC_PATTERNS.styleMarginConflict) ||
+      line.match(PROBLEMATIC_PATTERNS.styleSpacingConflict)
+    ) {
+      analysis.hasStyleConflicts = true;
+      analysis.lineNumbers.styleConflicts = (
+        analysis.lineNumbers.styleConflicts || []
+      ).concat(lineNum);
+
+      // Generate warning message
+      analysis.warnings.push(
+        `Line ${lineNum}: Style conflicts detected - component has both style and margin/spacing props`,
+      );
+    }
+
+    // Check for nested typography components (invalid HTML)
+    if (line.match(PROBLEMATIC_PATTERNS.nestedTypography)) {
+      analysis.hasNestedTypography = true;
+      analysis.lineNumbers.nestedTypography = (
+        analysis.lineNumbers.nestedTypography || []
+      ).concat(lineNum);
+
+      // Generate warning message
+      analysis.warnings.push(
+        `Line ${lineNum}: Nested typography components detected - invalid HTML structure`,
+      );
+    }
+
+    // Check for missing as props (accessibility issue)
+    if (line.match(PROBLEMATIC_PATTERNS.missingAsProps)) {
+      analysis.hasAccessibilityIssues = true;
+      analysis.lineNumbers.missingAsProps = (
+        analysis.lineNumbers.missingAsProps || []
+      ).concat(lineNum);
+
+      // Generate warning message
+      analysis.warnings.push(
+        `Line ${lineNum}: Missing 'as' prop - accessibility issue for Heading component`,
+      );
+    }
+
+    // Check for semantic mismatches (e.g., h1 with subtitle variant)
+    if (line.match(PROBLEMATIC_PATTERNS.semanticMismatch)) {
+      analysis.hasSemanticMismatches = true;
+      analysis.lineNumbers.semanticMismatches = (
+        analysis.lineNumbers.semanticMismatches || []
+      ).concat(lineNum);
+
+      // Generate warning message
+      analysis.warnings.push(
+        `Line ${lineNum}: Semantic mismatch detected - heading level and variant combination may be incorrect`,
+      );
+    }
+  });
+
+  return analysis;
+}
+
+// Generate enhanced warnings with context and solutions
+function generateWarningWithSolution(warning, context, filePath, lineNumber) {
+  const severity = determineSeverity(warning);
+  const suggestion = generateSuggestion(warning, context);
+  const codeExample = generateCodeExample(warning);
+
+  return {
+    message: warning,
+    severity,
+    suggestion,
+    codeExample,
+    file: filePath,
+    line: lineNumber,
+    documentation: getRelevantDocs(warning),
+  };
+}
+
+// Determine warning severity based on content
+function determineSeverity(warning) {
+  if (warning.includes('will break') || warning.includes('fatal'))
+    return WARNING_CATEGORIES.CRITICAL;
+  if (warning.includes('conflict') || warning.includes('override'))
+    return WARNING_CATEGORIES.HIGH;
+  if (warning.includes('may cause') || warning.includes('styling'))
+    return WARNING_CATEGORIES.MEDIUM;
+  if (warning.includes('best practice') || warning.includes('consider'))
+    return WARNING_CATEGORIES.LOW;
+  return WARNING_CATEGORIES.INFO;
+}
+
+// Generate actionable suggestions
+function generateSuggestion(warning, context) {
+  if (warning.includes('style and margin')) {
+    return 'Remove the margin prop as it will be overridden by inline styles. Use spacing prop instead.';
+  }
+  if (warning.includes('missing variant')) {
+    return 'Add a variant prop to ensure consistent styling. Example: variant="title-1"';
+  }
+  if (warning.includes('nested typography')) {
+    return 'Avoid nesting Text components. Use spans or other inline elements for emphasis.';
+  }
+  if (warning.includes('deprecated margin')) {
+    return 'Replace margin prop with spacing prop for better consistency.';
+  }
+  return 'Review the component for potential styling conflicts.';
+}
+
+// Generate code examples for fixes
+function generateCodeExample(warning) {
+  if (warning.includes('style and margin')) {
+    return '// Before: <Text style={{color: "red"}} margin="bottom">\n// After:  <Text style={{color: "red"}} spacing="bottom">';
+  }
+  if (warning.includes('missing variant')) {
+    return '// Before: <Heading as="h1">Title</Heading>\n// After:  <Heading as="h1" variant="title-1">Title</Heading>';
+  }
+  if (warning.includes('nested typography')) {
+    return '// Before: <Text>Hello <Text>World</Text></Text>\n// After:  <Text>Hello <span>World</span></Text>';
+  }
+  return '';
+}
+
+// Get relevant documentation links
+function getRelevantDocs(warning) {
+  if (warning.includes('variant'))
+    return 'https://linje.entur.no/komponenter/ressurser/typography-beta#heading-variants';
+  if (warning.includes('spacing'))
+    return 'https://linje.entur.no/komponenter/ressurser/typography-beta#spacing';
+  if (warning.includes('semantic'))
+    return 'https://linje.entur.no/komponenter/ressurser/typography-beta#semantic-html';
+  return 'https://linje.entur.no/komponenter/ressurser/typography-beta';
+}
+
 let ALLOWED_DIRECTORIES = process.env.TYPOGRAPHY_MIGRATION_DIRS
   ? process.env.TYPOGRAPHY_MIGRATION_DIRS.split(',')
   : MIGRATION_FOLDERS;
@@ -170,15 +342,19 @@ 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' },
-  Link: { component: 'LinkBeta' },
-  Blockquote: { component: 'BlockquoteBeta' },
+  Link: { component: 'LinkBeta' }, // Convert Link to LinkBeta
+  Blockquote: { component: 'BlockquoteBeta' }, // Convert Blockquote to BlockquoteBeta
+  BlockquoteFooter: { component: 'BlockquoteFooterBeta' }, // Convert BlockquoteFooter to BlockquoteFooterBeta
+  UnorderedList: { component: 'UnorderedListBeta' },
+  NumberedList: { component: 'NumberedListBeta' },
+  ListItem: { component: 'ListItemBeta' },
 };
 
 // Props mapping for migration
@@ -187,17 +363,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
@@ -211,30 +413,34 @@ const IMPORT_PATTERNS = [
 // 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;
 
@@ -244,7 +450,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) {
@@ -254,14 +460,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--;
@@ -279,25 +485,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
@@ -315,11 +519,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}`,
       );
     }
   }
@@ -346,8 +551,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 '';
   }
@@ -356,20 +608,30 @@ 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
+        } else if (originalSyntax[key] === 'jsx') {
           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(' ')
   );
 }
@@ -379,12 +641,46 @@ 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}'`);
   });
 
+  // Then, update destructured import names - only within @entur/typography imports
+  // Find all import statements from @entur/typography and update component names
+  const importRegex =
+    /import\s*{([^}]+)}\s*from\s*['"']@entur\/typography['"']/g;
+
+  updatedContent = updatedContent.replace(importRegex, (match, importList) => {
+    let updatedImportList = importList;
+    let hasChanges = false;
+    const uniqueComponents = new Set();
+
+    // Check each component in the import list
+    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;
+      }
+    });
+
+    if (hasChanges) {
+      changes++;
+      // Deduplicate components and create clean import statement
+      const finalImportList = Array.from(uniqueComponents).join(', ');
+      return `import {${finalImportList}} from '${BETA_IMPORT}'`;
+    }
+
+    return match;
+  });
+
   return { content: updatedContent, changes };
 }
 
@@ -404,8 +700,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
@@ -425,8 +725,10 @@ 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;
@@ -440,8 +742,10 @@ 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(', ...')}}` : '';
+          return `<Heading as="${asValue}" variant="${variantValue}"${propsString}${spreadPropsString}>`;
         }
 
         // Handle other components
@@ -463,8 +767,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}>`;
       },
     );
 
@@ -492,15 +798,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
@@ -521,37 +845,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,
@@ -564,21 +880,32 @@ function generateMigrationReport(files, strategy, isDryRun = false) {
   files.forEach(file => {
     try {
       const content = fs.readFileSync(file, 'utf8');
+
+      // Analyze file for problematic patterns BEFORE migration
+      const fileAnalysis = analyzeFile(file, content);
+
       const {
         content: updatedContent,
         changes,
         warnings,
-      } = updateImportsAndComponents(content, strategy);
+      } = updateImportsAndComponents(content);
+
+      // Combine migration warnings with file analysis warnings
+      const allWarnings = [...warnings, ...fileAnalysis.warnings];
 
-      if (changes > 0) {
+      if (changes > 0 || fileAnalysis.warnings.length > 0) {
         if (!isDryRun) {
           fs.writeFileSync(file, updatedContent, 'utf8');
         }
-        report.migratedFiles++;
-        report.totalChanges += changes;
-        report.totalWarnings += warnings.length;
-        report.files.push({ file, changes, warnings });
-        report.warnings.push(...warnings.map(warning => `${file}: ${warning}`));
+        if (changes > 0) {
+          report.migratedFiles++;
+          report.totalChanges += changes;
+        }
+        report.totalWarnings += allWarnings.length;
+        report.files.push({ file, changes, warnings: allWarnings });
+        report.warnings.push(
+          ...allWarnings.map(warning => `${file}: ${warning}`),
+        );
       }
     } catch (error) {
       report.warnings.push(`${file}: Error processing file - ${error.message}`);
@@ -620,24 +947,135 @@ function printReport(report) {
       w.includes('check for conflicts'),
     );
 
+    // New warning types from file analysis
+    const styleConflictWarnings = report.warnings.filter(
+      w => w.includes('style conflicts') || w.includes('style and margin'),
+    );
+    const nestedTypographyWarnings = report.warnings.filter(w =>
+      w.includes('nested typography'),
+    );
+    const accessibilityWarnings = report.warnings.filter(
+      w => w.includes('missing as prop') || w.includes('accessibility'),
+    );
+    const semanticMismatchWarnings = report.warnings.filter(w =>
+      w.includes('semantic mismatch'),
+    );
+
     if (marginWarnings.length > 0) {
       console.log(
         `\n  🔄 Margin → Spacing Migrations (${marginWarnings.length}):`,
       );
-      marginWarnings.forEach(warning => console.log(`    ${warning}`));
+      // Show first 5 warnings, then summarize the rest
+      marginWarnings
+        .slice(0, 5)
+        .forEach(warning => console.log(`    ${warning}`));
+      if (marginWarnings.length > 5) {
+        console.log(
+          `    ... and ${marginWarnings.length - 5} more similar warnings`,
+        );
+      }
     }
 
     if (semanticWarnings.length > 0) {
       console.log(`\n  🎯 Semantic HTML Issues (${semanticWarnings.length}):`);
-      semanticWarnings.forEach(warning => console.log(`    ${warning}`));
+      // Show first 5 warnings, then summarize the rest
+      semanticWarnings
+        .slice(0, 5)
+        .forEach(warning => console.log(`    ${warning}`));
+      if (semanticWarnings.length > 5) {
+        console.log(
+          `    ... and ${semanticWarnings.length - 5} more similar warnings`,
+        );
+      }
     }
 
     if (conflictWarnings.length > 0) {
       console.log(`\n  🚨 Style Conflicts (${conflictWarnings.length}):`);
-      conflictWarnings.forEach(warning => console.log(`    ${warning}`));
+      // Show first 5 warnings, then summarize the rest
+      conflictWarnings
+        .slice(0, 5)
+        .forEach(warning => console.log(`    ${warning}`));
+      if (conflictWarnings.length > 5) {
+        console.log(
+          `    ... and ${conflictWarnings.length - 5} more similar warnings`,
+        );
+      }
       console.log(`    → Review these components for styling conflicts`);
     }
 
+    // Display new warning types
+    if (styleConflictWarnings.length > 0) {
+      console.log(
+        `\n  🎨 Style + Margin Conflicts (${styleConflictWarnings.length}):`,
+      );
+      styleConflictWarnings
+        .slice(0, 5)
+        .forEach(warning => console.log(`    ${warning}`));
+      if (styleConflictWarnings.length > 5) {
+        console.log(
+          `    ... and ${
+            styleConflictWarnings.length - 5
+          } more similar warnings`,
+        );
+      }
+      console.log(`    → Remove margin prop when using inline styles`);
+    }
+
+    if (nestedTypographyWarnings.length > 0) {
+      console.log(
+        `\n  🚫 Nested Typography (${nestedTypographyWarnings.length}):`,
+      );
+      nestedTypographyWarnings
+        .slice(0, 5)
+        .forEach(warning => console.log(`    ${warning}`));
+      if (nestedTypographyWarnings.length > 5) {
+        console.log(
+          `    ... and ${
+            nestedTypographyWarnings.length - 5
+          } more similar warnings`,
+        );
+      }
+      console.log(
+        `    → Use spans or other inline elements instead of nested Text components`,
+      );
+    }
+
+    if (accessibilityWarnings.length > 0) {
+      console.log(
+        `\n  ♿ Accessibility Issues (${accessibilityWarnings.length}):`,
+      );
+      accessibilityWarnings
+        .slice(0, 5)
+        .forEach(warning => console.log(`    ${warning}`));
+      if (accessibilityWarnings.length > 5) {
+        console.log(
+          `    ... and ${
+            accessibilityWarnings.length - 5
+          } more similar warnings`,
+        );
+      }
+      console.log(
+        `    → Add 'as' prop to Heading components for proper semantic HTML`,
+      );
+    }
+
+    if (semanticMismatchWarnings.length > 0) {
+      console.log(
+        `\n  🔍 Semantic Mismatches (${semanticMismatchWarnings.length}):`,
+      );
+      semanticMismatchWarnings
+        .slice(0, 5)
+        .forEach(warning => console.log(`    ${warning}`));
+      if (semanticMismatchWarnings.length > 5) {
+        console.log(
+          `    ... and ${
+            semanticMismatchWarnings.length - 5
+          } more similar warnings`,
+        );
+      }
+      console.log(`    → Review heading level and variant combinations`);
+    }
+
     console.log('\n📋 Summary:');
     if (marginWarnings.length > 0)
       console.log(
@@ -651,26 +1089,42 @@ function printReport(report) {
       console.log(
         `  • ${conflictWarnings.length} style conflicts need manual review`,
       );
+    if (styleConflictWarnings.length > 0)
+      console.log(
+        `  • ${styleConflictWarnings.length} style + margin conflicts detected`,
+      );
+    if (nestedTypographyWarnings.length > 0)
+      console.log(
+        `  • ${nestedTypographyWarnings.length} nested typography components found`,
+      );
+    if (accessibilityWarnings.length > 0)
+      console.log(
+        `  • ${accessibilityWarnings.length} accessibility issues need attention`,
+      );
+    if (semanticMismatchWarnings.length > 0)
+      console.log(
+        `  • ${semanticMismatchWarnings.length} semantic mismatches detected`,
+      );
+
+    // Add helpful note about warning limits
+    if (report.warnings.length > 15) {
+      console.log(
+        '\n💡 Note: Only showing first 5 warnings of each type to avoid overwhelming output.',
+      );
+      console.log(
+        '   All warnings are still logged in the migration report above.',
+      );
+    }
   }
 }
 
-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');
@@ -699,23 +1153,19 @@ function main() {
     console.log(
       '  --dry-run        Show what would be changed without modifying files',
     );
-    console.log(
-      '  --import-only    Import-only migration: update import paths only',
-    );
-
     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('     - Test thoroughly after migration');
-    console.log('');
+    console.log('     - Heading1-6 → Heading with as/variant props');
+    console.log('     - Text components → Text with variant props');
+    console.log('     - Link → LinkBeta, Blockquote → BlockquoteBeta');
     console.log(
-      '  📝 Import-Only Mode (--import-only): Only updates import paths',
+      '     - Lists → UnorderedListBeta, NumberedListBeta, ListItemBeta',
     );
-    console.log('     - Keeps your existing component usage unchanged');
-    console.log('     - Minimal risk, gradual migration');
+    console.log('     - May require prop/styling updates');
+    console.log('     - Test thoroughly after migration');
     console.log('');
     console.log('Examples:');
     console.log('  # See what would be changed');
@@ -723,12 +1173,6 @@ function main() {
     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(
@@ -744,7 +1188,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/**"',
     );
@@ -812,36 +1256,30 @@ 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(
+    '   - Link → LinkBeta, Blockquote → BlockquoteBeta, Lists → ListBeta components',
+  );
+  console.log(
+    '   - List components → UnorderedListBeta, NumberedListBeta, ListItemBeta',
+  );
+  console.log('   - You may need to update props and styling');
+  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!');
 }