#!/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