mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-15 15:59: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)
141 lines
2.7 KiB
Markdown
141 lines
2.7 KiB
Markdown
# @memoro/ui CLI
|
|
|
|
CLI tool for copying UI components into your app (shadcn-style).
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install -g @memoro/ui
|
|
```
|
|
|
|
Or use directly with npx:
|
|
|
|
```bash
|
|
npx @memoro/ui add button
|
|
```
|
|
|
|
## Commands
|
|
|
|
### `add <component>`
|
|
|
|
Add a component to your project.
|
|
|
|
```bash
|
|
memoro-ui add button
|
|
memoro-ui add text
|
|
memoro-ui add card
|
|
```
|
|
|
|
Options:
|
|
|
|
- `-y, --yes` - Skip confirmation prompts
|
|
|
|
The CLI will:
|
|
|
|
1. Check if the component exists in the registry
|
|
2. Resolve and install dependencies automatically
|
|
3. Copy component files to your `components/` directory
|
|
4. Show import instructions
|
|
|
|
### `list`
|
|
|
|
List all available components.
|
|
|
|
```bash
|
|
memoro-ui list
|
|
```
|
|
|
|
Options:
|
|
|
|
- `-c, --category <category>` - Filter by category (ui, navigation)
|
|
|
|
Shows:
|
|
|
|
- All available components
|
|
- Which components are already installed (✓)
|
|
- Component descriptions
|
|
- Dependencies
|
|
|
|
## How it Works
|
|
|
|
This CLI follows the **shadcn** approach:
|
|
|
|
1. **No NPM dependencies** - Components are copied into your project
|
|
2. **Full control** - You own the code, modify as needed
|
|
3. **Dependencies** - Automatically installs component dependencies
|
|
4. **Type-safe** - All components are fully typed with TypeScript
|
|
|
|
## Component Structure
|
|
|
|
Components are copied to:
|
|
|
|
```
|
|
your-project/
|
|
└── components/
|
|
├── ui/
|
|
│ ├── Button/
|
|
│ │ ├── Button.tsx
|
|
│ │ ├── index.ts
|
|
│ │ └── README.md
|
|
│ ├── Text/
|
|
│ └── ...
|
|
└── navigation/
|
|
└── ...
|
|
```
|
|
|
|
## Import Pattern
|
|
|
|
```tsx
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Text } from '@/components/ui/Text';
|
|
|
|
function MyScreen() {
|
|
return <Button title="Click me" onPress={() => {}} />;
|
|
}
|
|
```
|
|
|
|
## Development
|
|
|
|
Build the CLI:
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Watch mode:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Link locally for testing:
|
|
|
|
```bash
|
|
npm link
|
|
memoro-ui list
|
|
```
|
|
|
|
## Available Components
|
|
|
|
Run `memoro-ui list` to see all available components.
|
|
|
|
Current components:
|
|
|
|
- **UI** (14): Button, Text, Icon, Container, EmptyState, ErrorBanner, Slider, Skeleton, FAB, Tag, Badge, Card, Select, ToggleGroup
|
|
- **Navigation** (coming soon): Header, TabBar, HeaderButton
|
|
|
|
## Philosophy
|
|
|
|
**Copy, don't install** - This CLI doesn't create NPM dependencies. It copies component source code into your project. This gives you:
|
|
|
|
- ✅ Full control over the code
|
|
- ✅ No version conflicts
|
|
- ✅ Customize freely without worrying about updates
|
|
- ✅ Smaller bundle size (only what you use)
|
|
- ✅ Better for AI context (components in your codebase)
|
|
|
|
When you want updates, run `memoro-ui add <component>` again to get the latest version (with confirmation).
|
|
|
|
## License
|
|
|
|
Private - memoro internal use only.
|