managarten/picture/packages/mobile-ui/MIGRATION.md
Till-JS c712a2504a feat: integrate uload and picture, unify package naming
- Add uload project with apps/web structure
  - Reorganize from flat to monorepo structure
  - Remove PocketBase binary and local data
  - Update to pnpm and @uload/web namespace

- Add picture project to monorepo
  - Remove embedded git repository

- Unify all package names to @{project}/{app} schema:
  - @maerchenzauber/* (was @storyteller/*)
  - @manacore/* (was manacore-*, manacore)
  - @manadeck/* (was web, backend, manadeck)
  - @memoro/* (was memoro-web, landing, memoro)
  - @picture/* (already unified)
  - @uload/web

- Add convenient dev scripts for all apps:
  - pnpm dev:{project}:web
  - pnpm dev:{project}:landing
  - pnpm dev:{project}:mobile
  - pnpm dev:{project}:backend

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-25 04:00:36 +01:00

121 lines
3.3 KiB
Markdown

# Migration: @memoro/ui → @memoro/mobile-ui
**Date:** 2025-10-08
**Reason:** Clarify framework compatibility in monorepo structure
## What Changed
### Package Rename
- **Old:** `@memoro/ui`
- **New:** `@memoro/mobile-ui`
- **Directory:** `packages/memoro-ui/``packages/mobile-ui/`
### Framework Scope
The package is now explicitly **React Native only**.
**Compatible:**
- ✅ React Native (Expo)
- ✅ Expo Router
- ✅ React Native apps
**Not Compatible:**
- ❌ SvelteKit (Web app)
- ❌ Astro (Landing page)
- ❌ Next.js / React DOM
- ❌ Any web framework
## Why This Change?
### Monorepo Structure
The picture project uses a monorepo with multiple apps:
```
picture/
├── apps/
│ ├── mobile/ # React Native (Expo) ✅ Can use @memoro/mobile-ui
│ ├── web/ # SvelteKit ❌ Cannot use
│ └── landing/ # Astro ❌ Cannot use
└── packages/
└── mobile-ui/ # React Native components only
```
### Technical Reason
All 17 components use React Native primitives:
- `View`, `Pressable`, `Text` (not DOM elements)
- `react-native-reanimated`
- `react-native-safe-area-context`
- NativeWind (Tailwind for React Native)
These dependencies are **not compatible** with web frameworks.
## What Was Updated
### Files Changed
1. **Package name:**
- `package.json``name: "@memoro/mobile-ui"`
- `registry.json``name: "@memoro/mobile-ui"`
2. **Documentation:**
- `README.md` - Added framework compatibility warning
- `STATUS.md` - Added target apps section
- `SUMMARY.md` - Added compatibility table
- `CLI.md` - Added React Native-only note
3. **All path references:**
- `packages/memoro-ui/``packages/mobile-ui/`
### No Breaking Changes
- Component code unchanged
- CLI tool works the same
- Import paths unchanged (still `@/components/ui/Button`)
- Registry structure unchanged
## For Developers
### If Using Mobile App (`@picture/mobile`)
**No action needed.** Everything works as before.
```bash
# Still works exactly the same
node packages/mobile-ui/cli/bin/cli.js list
node packages/mobile-ui/cli/bin/cli.js add button
```
### If Using Web App (`@picture/web`) or Landing
**Cannot use this library.** Build Svelte/Astro components instead.
Consider:
- Create `apps/web/src/lib/components/ui/` for Svelte components
- Create `apps/landing/src/components/` for Astro components
- Share design tokens (colors, spacing) via separate package
### Future: Shared Design Tokens
If UI consistency becomes important across all apps:
```
packages/
├── mobile-ui/ # React Native components
├── design-tokens/ # Shared colors, spacing, typography (NEW)
│ ├── colors.ts
│ ├── spacing.ts
│ └── tailwind.preset.js
└── shared/ # Supabase types (existing)
```
Then:
- Mobile app uses `@memoro/mobile-ui` + design tokens
- Web app builds Svelte components using same design tokens
- Landing builds Astro components using same design tokens
## Notes
- **No NPM publish yet** - Still embedded in picture monorepo
- **Future extraction:** Will move to `github.com/memoro/mobile-ui`
- **CLI location:** `packages/mobile-ui/cli/bin/cli.js`
## Questions?
See:
- [README.md](./README.md) - Main documentation
- [STATUS.md](./STATUS.md) - Current status and next steps
- [CLI.md](./CLI.md) - CLI usage guide