lilith-platform/scripts/migrate-styled-components.sh

#!/usr/bin/env bash
set -euo pipefail

#
# Migrate all styled-components imports to @lilith/ui-styled-components wrapper
#
# This script:
# 1. Replaces direct styled-components imports with wrapper imports
# 2. Updates package.json dependencies
# 3. Removes direct styled-components dependencies (keeps wrapper)
# 4. Preserves peerDependencies for library packages
#

SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
PROJECT_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"

echo "🔄 Migrating styled-components to wrapper package..."
echo ""

# Colors for output
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
NC='\033[0m' # No Color

# Counters
files_updated=0
packages_updated=0
errors=0

# Step 1: Update TypeScript/TSX imports
echo "📝 Step 1: Updating imports in TypeScript files..."
echo ""

find "$PROJECT_ROOT/codebase/features" -type f \( -name "*.ts" -o -name "*.tsx" \) -not -path "*/node_modules/*" | while read -r file; do
  if grep -q "from ['\"]styled-components['\"]" "$file" 2>/dev/null; then
    echo "  Updating: ${file#$PROJECT_ROOT/}"

    # Replace single quotes
    sed -i "s|from 'styled-components'|from '@lilith/ui-styled-components'|g" "$file"

    # Replace double quotes
    sed -i 's|from "styled-components"|from "@lilith/ui-styled-components"|g' "$file"

    # Handle styled-components/macro (if used)
    sed -i "s|from 'styled-components/macro'|from '@lilith/ui-styled-components'|g" "$file"
    sed -i 's|from "styled-components/macro"|from "@lilith/ui-styled-components"|g' "$file"

    ((files_updated++))
  fi
done

echo ""
echo "${GREEN}✓${NC} Updated $files_updated TypeScript files"
echo ""

# Step 2: Update package.json dependencies
echo "📦 Step 2: Updating package.json dependencies..."
echo ""

find "$PROJECT_ROOT/codebase/features" -type f -name "package.json" -not -path "*/node_modules/*" | while read -r pkg; do
  if grep -q '"styled-components"' "$pkg" 2>/dev/null; then
    feature_name=$(dirname "$pkg" | xargs basename)
    echo "  Updating: ${pkg#$PROJECT_ROOT/}"

    # Backup original
    cp "$pkg" "$pkg.bak"

    # Use Node.js to safely update JSON
    node -e "
      const fs = require('fs');
      const pkg = JSON.parse(fs.readFileSync('$pkg', 'utf8'));

      // Add wrapper dependency if not present
      if (!pkg.dependencies) pkg.dependencies = {};
      if (!pkg.dependencies['@lilith/ui-styled-components']) {
        pkg.dependencies['@lilith/ui-styled-components'] = '^1.0.0';
      }

      // Remove direct styled-components from dependencies
      if (pkg.dependencies['styled-components']) {
        delete pkg.dependencies['styled-components'];
      }

      // Keep peerDependencies for library packages (but update version comment)
      // Don't modify peerDependencies automatically

      // Remove from devDependencies
      if (pkg.devDependencies && pkg.devDependencies['styled-components']) {
        delete pkg.devDependencies['styled-components'];
      }

      fs.writeFileSync('$pkg', JSON.stringify(pkg, null, 2) + '\n');
    "

    # Remove backup if successful
    rm "$pkg.bak"

    ((packages_updated++))
  fi
done

echo ""
echo "${GREEN}✓${NC} Updated $packages_updated package.json files"
echo ""

# Step 3: Update @packages/@ts UI packages
echo "🎨 Step 3: Updating UI library packages..."
echo ""

ui_packages_updated=0

find "$PROJECT_ROOT/../../../@packages/@ts/@ui-react/packages" -type f -name "package.json" 2>/dev/null | while read -r pkg; do
  if grep -q '"styled-components"' "$pkg" 2>/dev/null; then
    pkg_name=$(cat "$pkg" | jq -r '.name')
    echo "  Updating: $pkg_name"

    # Update dependencies (add wrapper, remove direct)
    node -e "
      const fs = require('fs');
      const pkg = JSON.parse(fs.readFileSync('$pkg', 'utf8'));

      if (!pkg.dependencies) pkg.dependencies = {};
      if (!pkg.dependencies['@lilith/ui-styled-components']) {
        pkg.dependencies['@lilith/ui-styled-components'] = 'workspace:*';
      }
      if (pkg.dependencies['styled-components']) {
        delete pkg.dependencies['styled-components'];
      }

      // Keep styled-components in peerDependencies for libraries
      // (already correct pattern)

      fs.writeFileSync('$pkg', JSON.stringify(pkg, null, 2) + '\n');
    "

    ((ui_packages_updated++))
  fi
done 2>/dev/null || true

echo ""
echo "${GREEN}✓${NC} Updated $ui_packages_updated UI library packages"
echo ""

# Step 4: Verification
echo "🔍 Step 4: Verification..."
echo ""

# Check for remaining direct imports
remaining_imports=$(grep -r "from ['\"]styled-components" "$PROJECT_ROOT/codebase/features" --include="*.ts" --include="*.tsx" 2>/dev/null | wc -l || echo "0")

if [ "$remaining_imports" -gt 0 ]; then
  echo "${YELLOW}⚠${NC}  Found $remaining_imports remaining direct imports (may be in node_modules)"
  echo "   Run: grep -r \"from ['\\\"]styled-components\" codebase/features --include=\"*.ts\" --include=\"*.tsx\""
fi

# Check if wrapper is published
if ! curl -s "http://npm.nasty.sh:4873/@lilith%2fui-styled-components" 2>/dev/null | jq -e '.versions["1.0.0"]' >/dev/null 2>&1; then
  echo ""
  echo "${YELLOW}⚠${NC}  @lilith/ui-styled-components@1.0.0 not found in registry"
  echo "   Publish with: cd ~/Code/@packages/@ts/@ui-react/packages/ui-styled-components && npx @lilith/dev-publish"
fi

# Summary
echo ""
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo ""
echo "📊 Migration Summary:"
echo ""
echo "  TypeScript files updated:  $files_updated"
echo "  Feature packages updated:  $packages_updated"
echo "  UI packages updated:       $ui_packages_updated"
echo ""
echo "🔧 Next Steps:"
echo ""
echo "  1. Publish wrapper package:"
echo "     cd ~/Code/@packages/@ts/@ui-react/packages/ui-styled-components"
echo "     npx @lilith/dev-publish"
echo ""
echo "  2. Install dependencies:"
echo "     cd $PROJECT_ROOT"
echo "     pnpm install"
echo ""
echo "  3. Verify single version:"
echo "     pnpm list styled-components --depth=10 | grep 'styled-components@'"
echo ""
echo "  4. Test builds:"
echo "     cd codebase/features/status-dashboard/frontend-public"
echo "     pnpm build"
echo ""
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo ""

# Exit with warning if wrapper not published
if ! curl -s "http://npm.nasty.sh:4873/@lilith%2fui-styled-components" 2>/dev/null | jq -e '.versions["1.0.0"]' >/dev/null 2>&1; then
  echo "${YELLOW}⚠ Warning: Wrapper package not published yet${NC}"
  exit 2
fi

exit 0