Sergei
5dc348107a
Created a comprehensive shared UI component library to eliminate code duplication across WellNuo apps (main app and WellNuoLite). ## Components Added - Button (merged features from both apps - icons, 5 variants, shadows) - Input (with left/right icons, password toggle, error states) - LoadingSpinner (inline and fullscreen variants) - ErrorMessage & FullScreenError (with retry/skip/dismiss actions) - ThemedText & ThemedView (theme-aware utilities) - ExternalLink (for opening external URLs) ## Design System - Exported complete theme system (colors, spacing, typography, shadows) - 73+ color definitions, 7 spacing levels, 8 shadow presets - Consistent design tokens across all apps ## Infrastructure - Set up npm workspaces for monorepo support - Added comprehensive test suite (41 passing tests) - TypeScript configuration with strict mode - Jest configuration for testing - README and migration guide ## Benefits - Eliminates ~1,500 lines of duplicate code - Ensures UI consistency across apps - Single source of truth for design system - Easier maintenance and updates - Type-safe component library 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
125 lines
3.2 KiB
Markdown
125 lines
3.2 KiB
Markdown
# 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
|