WellNuo/packages/@wellnuo/ui/MIGRATION.md

Migration Guide

Migrating Main App to @wellnuo/ui

1. Install dependencies

cd /Users/sergei/Documents/Projects/WellNuo
npm install

2. Update imports

Replace old imports with new ones:

Before:

import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
import { ErrorMessage } from '@/components/ui/ErrorMessage';
import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';
import { AppColors, Spacing } from '@/constants/theme';
import { useThemeColor } from '@/hooks/use-theme-color';

After:

import { Button, Input, LoadingSpinner, ErrorMessage } from '@wellnuo/ui';
import { ThemedText, ThemedView } from '@wellnuo/ui';
import { AppColors, Spacing } from '@wellnuo/ui';
import { useThemeColor } from '@wellnuo/ui';

3. Update TypeScript paths (optional)

If you want to keep using the @/ alias for app-specific code while using @wellnuo/ui for shared components, update tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"],
      "@wellnuo/ui": ["./packages/@wellnuo/ui/src"]
    }
  }
}

4. Remove duplicate components (after migration complete)

Once all imports are updated and tested:

# Remove old UI components
rm -rf components/ui/Button.tsx
rm -rf components/ui/Input.tsx
rm -rf components/ui/LoadingSpinner.tsx
rm -rf components/ui/ErrorMessage.tsx
rm -rf components/themed-text.tsx
rm -rf components/themed-view.tsx
rm -rf components/external-link.tsx

# Keep the old theme.ts as a re-export for backward compatibility
# Or update constants/theme.ts to re-export from @wellnuo/ui

5. Update constants/theme.ts (optional backward compatibility)

Create a re-export file to maintain backward compatibility:

// constants/theme.ts
export * from '@wellnuo/ui';

This allows existing code using @/constants/theme to keep working.

Migrating WellNuoLite

Follow the same steps for WellNuoLite:

1. Update WellNuoLite/package.json to include @wellnuo/ui dependency
2. Update imports in all components
3. Remove duplicate components after migration
4. Test thoroughly

Find and Replace Commands

Use these commands to help automate the migration:

# Find all imports from old locations
grep -r "from '@/components/ui/" .
grep -r "from '@/components/themed-" .
grep -r "from '@/constants/theme'" .

# Example: Update Button imports
find . -name "*.tsx" -o -name "*.ts" | xargs sed -i '' "s|from '@/components/ui/Button'|from '@wellnuo/ui'|g"

Testing Checklist

After migration:

• All UI components render correctly
• Theme colors are applied properly
• Buttons respond to interactions
• Inputs handle text entry and validation
• Loading states display correctly
• Error messages show with proper actions
• All existing tests pass
• No console errors or warnings
• Build succeeds without errors

Rollback Plan

If issues arise:

1. Revert package.json changes
2. Run npm install
3. Revert import changes
4. Report issues to the development team