mirror of https://github.com/usememos/memos
chore: update frontend instructions
parent
493832aeb4
commit
49766ed920
@ -1,44 +0,0 @@
|
|||||||
# Memos Project - AI Assistant Instructions
|
|
||||||
|
|
||||||
## Frontend Refactoring Goal
|
|
||||||
|
|
||||||
**PRIORITY**: Replace all MUI Joy UI (@mui/joy) and @usememos/mui components with shadcn/ui + Tailwind CSS v4
|
|
||||||
|
|
||||||
## Key Rules
|
|
||||||
|
|
||||||
1. **Replace all MUI components** with shadcn/ui + Tailwind v4
|
|
||||||
2. **Never modify generated shadcn/ui files** from `pnpm dlx shadcn@latest add`
|
|
||||||
3. **Use https://tweakcn.com/ for custom variants** when standard components need customization
|
|
||||||
|
|
||||||
## Setup Commands
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Initialize shadcn/ui
|
|
||||||
pnpm dlx shadcn@latest init
|
|
||||||
|
|
||||||
# Add components
|
|
||||||
pnpm dlx shadcn@latest add [component]
|
|
||||||
```
|
|
||||||
|
|
||||||
## Migration Pattern
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// OLD
|
|
||||||
import { Button, Card, Input } from "@mui/joy";
|
|
||||||
|
|
||||||
// NEW
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Card } from "@/components/ui/card";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
```
|
|
||||||
|
|
||||||
## When Suggesting Changes
|
|
||||||
|
|
||||||
- Include `pnpm dlx shadcn@latest add [component]` commands
|
|
||||||
- Use Tailwind classes for styling
|
|
||||||
- Mention https://tweakcn.com/ for custom variants
|
|
||||||
- Preserve TypeScript types and accessibility
|
|
||||||
|
|
||||||
## Target Files
|
|
||||||
|
|
||||||
Files containing `@mui/joy` or `@usememos/mui` imports
|
|
@ -0,0 +1,92 @@
|
|||||||
|
## Frontend Copilot Instructions
|
||||||
|
|
||||||
|
### Tech Stack
|
||||||
|
|
||||||
|
- **Framework:** React + Vite
|
||||||
|
- **UI:** shadcn/ui + Tailwind CSS v4
|
||||||
|
- **State Management:** MobX
|
||||||
|
- **Package Manager:** pnpm
|
||||||
|
- **Color System:** Only use colors defined in `web/src/style.css`
|
||||||
|
- **Component Imports:** Only via `pnpm dlx shadcn@latest add [component]`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 💡 Guidelines
|
||||||
|
|
||||||
|
✅ **Allowed:**
|
||||||
|
|
||||||
|
- Use **shadcn/ui components only** (e.g., `Button`, `Input`, `Dialog`)
|
||||||
|
- Use **Tailwind utility classes** for layout, spacing, typography
|
||||||
|
- Use **Tailwind `bg-[var(--color-name)]`**, `text-[var(--color-name)]` referencing `web/src/style.css` for colors
|
||||||
|
- Use **MobX for state management** (`observable`, `computed`, `action`, `useLocalObservable`)
|
||||||
|
- Use **functional React components** with hooks
|
||||||
|
- Use **Tailwind v4 utility classes** for responsive layouts
|
||||||
|
|
||||||
|
❌ **Not Allowed:**
|
||||||
|
|
||||||
|
- Do not import or use **other component libraries** (e.g., Material UI, Ant Design, Chakra)
|
||||||
|
- Do not use **fixed color utilities** (e.g., `bg-gray-200`, `text-blue-500`)
|
||||||
|
- Do not use **className strings with hardcoded color values**
|
||||||
|
- Do not use **inline styles for colors**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 🎨 Color Usage
|
||||||
|
|
||||||
|
**All colors must be referenced from `web/src/style.css`**, for example:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<div className="bg-[var(--bg-secondary)] text-[var(--text-primary)] p-4">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Do not use** `bg-gray-200`, `text-gray-900`, etc.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 📦 Adding UI Components
|
||||||
|
|
||||||
|
To add new UI components, always use:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm dlx shadcn@latest add [component]
|
||||||
|
```
|
||||||
|
|
||||||
|
Examples:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm dlx shadcn@latest add button
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 🛠️ File Structure
|
||||||
|
|
||||||
|
- `web/src/components/` → shared React components
|
||||||
|
- `web/src/pages/` → route-based pages
|
||||||
|
- `web/src/store/v2/` → MobX stores
|
||||||
|
- `web/src/style.css` → color variables and global styles
|
||||||
|
- `web/src/hooks/` → reusable hooks
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 🧩 Component Development Conventions
|
||||||
|
|
||||||
|
1. **Functional Components + Hooks:**
|
||||||
|
|
||||||
|
- Use `useState`, `useEffect`.
|
||||||
|
- Always type props with `React.FC<Props>` or explicit `Props` interfaces.
|
||||||
|
|
||||||
|
2. **State:**
|
||||||
|
|
||||||
|
- Use **MobX** for shared state across components.
|
||||||
|
- Use local component state only for purely local UI state.
|
||||||
|
|
||||||
|
3. **Styling:**
|
||||||
|
|
||||||
|
- Use Tailwind utility classes, referencing colors from `style.css`.
|
||||||
|
- For complex styles, extend via Tailwind plugin if needed.
|
||||||
|
|
||||||
|
4. **Shadcn Integration:**
|
||||||
|
|
||||||
|
- Import components only after adding via `pnpm dlx shadcn@latest add [component]`.
|
||||||
|
- Do not modify the component source unless necessary; prefer composition and theming.
|
Loading…
Reference in New Issue