mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-17 15:49:40 +02:00
d36b321d9d
Applied formatting to 1487+ files using pnpm format:write - TypeScript/JavaScript files - Svelte components - Astro pages - JSON configs - Markdown docs 13 files still need manual review (Astro JSX comments)
136 lines
3.3 KiB
Markdown
136 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
|