# Migration Guide

## Migrating Main App to @wellnuo/ui

### 1. Install dependencies

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

### 2. Update imports

Replace old imports with new ones:

**Before:**
```typescript
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:**
```typescript
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`:

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

### 4. Remove duplicate components (after migration complete)

Once all imports are updated and tested:

```bash
# 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:

```typescript
// 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:

```bash
# 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