moicle 1.0.0

package/assets/templates/monorepo/CLAUDE.md

@@ -0,0 +1,362 @@
+# CLAUDE.md - Monorepo Template (Frontend + Backend)
+
+## Project Overview
+
+Monorepo containing:
+- **Frontend**: React + TypeScript + Vite + Tailwind CSS
+- **Backend**: Go + Gin + GORM (or Node.js + Express alternative)
+- **Shared**: Common types and utilities
+
+## Quick Start
+
+```bash
+# Backend (Terminal 1)
+cd apps/backend && go run cmd/api/main.go  # Port 8080
+
+# Frontend (Terminal 2)
+cd apps/frontend && pnpm dev  # Port 5173
+
+# Or run both with task runner
+pnpm dev:all
+```
+
+## Project Structure
+
+```
+{project_name}/
+├── apps/
+│   ├── backend/                 # Backend application
+│   │   ├── cmd/
+│   │   │   └── api/
+│   │   │       └── main.go
+│   │   ├── internal/
+│   │   │   ├── config/
+│   │   │   ├── middleware/
+│   │   │   └── modules/
+│   │   │       ├── router/
+│   │   │       └── {module}/
+│   │   │           ├── controllers/
+│   │   │           ├── models/
+│   │   │           ├── usecases/
+│   │   │           └── init.go
+│   │   ├── pkg/
+│   │   │   ├── database/
+│   │   │   └── response/
+│   │   ├── config.yaml
+│   │   └── go.mod
+│   │
+│   └── frontend/                # Frontend application
+│       ├── src/
+│       │   ├── app/
+│       │   │   ├── config/
+│       │   │   ├── layouts/
+│       │   │   ├── modules/
+│       │   │   │   └── {module}/
+│       │   │   │       ├── components/
+│       │   │   │       ├── models/
+│       │   │   │       ├── viewmodels/
+│       │   │   │       └── pages/
+│       │   │   ├── shared/
+│       │   │   └── router.tsx
+│       │   ├── components/ui/
+│       │   ├── lib/
+│       │   │   └── api-client.ts
+│       │   └── main.tsx
+│       ├── package.json
+│       └── vite.config.ts
+│
+├── packages/                    # Shared packages (optional)
+│   └── shared-types/
+│       └── index.ts
+│
+├── scripts/                     # Development scripts
+├── docker-compose.yml
+├── package.json                 # Root package.json for scripts
+└── README.md
+```
+
+## Backend Module Structure
+
+### Module Init Pattern
+
+```go
+// internal/modules/{module}/init.go
+package module
+
+import (
+    "github.com/gin-gonic/gin"
+    "gorm.io/gorm"
+)
+
+func Init(r *gin.Engine, db *gorm.DB) {
+    repo := NewRepository(db)
+    uc := NewUseCase(repo)
+    ctrl := NewController(uc)
+
+    group := r.Group("/api/{module}")
+    {
+        group.GET("/", ctrl.List)
+        group.GET("/:id", ctrl.Get)
+        group.POST("/", ctrl.Create)
+        group.PUT("/:id", ctrl.Update)
+        group.DELETE("/:id", ctrl.Delete)
+    }
+}
+```
+
+### GORM Model Pattern
+
+```go
+// models/entity.go
+type Entity struct {
+    ID        string    `gorm:"type:char(36);primaryKey" json:"id"`
+    Name      string    `gorm:"type:varchar(255);not null" json:"name"`
+    Status    string    `gorm:"type:varchar(50);default:'active'" json:"status"`
+    CreatedAt time.Time `json:"created_at"`
+    UpdatedAt time.Time `json:"updated_at"`
+}
+```
+
+### Response Format
+
+```go
+// Success
+c.JSON(http.StatusOK, gin.H{"data": result})
+
+// Paginated
+c.JSON(http.StatusOK, gin.H{
+    "data":        items,
+    "total":       total,
+    "page":        page,
+    "limit":       limit,
+    "total_pages": totalPages,
+})
+```
+
+## Frontend Module Structure
+
+### MVVM Pattern
+
+**Model** - Data types and API functions:
+```typescript
+// models/entity.model.ts
+export interface Entity {
+  id: string;
+  name: string;
+  status: 'active' | 'inactive';
+}
+
+export async function getEntities(): Promise<Entity[]> {
+  return api.get<Entity[]>('/entities');
+}
+```
+
+**ViewModel** - Business logic:
+```typescript
+// viewmodels/use-entities.ts
+export function useEntitiesViewModel() {
+  const [data, setData] = useState<Entity[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const loadData = useCallback(async () => {
+    setIsLoading(true);
+    const entities = await getEntities();
+    setData(entities);
+    setIsLoading(false);
+  }, []);
+
+  return { data, isLoading, loadData };
+}
+```
+
+**View** - Pure UI:
+```typescript
+// components/entity-table.tsx
+interface Props {
+  data: Entity[];
+  onEdit: (entity: Entity) => void;
+}
+
+export function EntityTable({ data, onEdit }: Props) {
+  return <Table>...</Table>;
+}
+```
+
+### API Client
+
+```typescript
+// lib/api-client.ts
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+
+export const api = {
+  async get<T>(endpoint: string): Promise<T> {
+    const response = await fetch(`${API_BASE_URL}${endpoint}`);
+    const json = await response.json();
+    return json.data ?? json;
+  },
+
+  async post<T>(endpoint: string, data: unknown): Promise<T> {
+    const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+    return response.json();
+  },
+};
+```
+
+## Adding New Module
+
+### Backend Module
+
+1. Create directory structure:
+```bash
+mkdir -p apps/backend/internal/modules/{module}/{controllers,models,usecases}
+```
+
+2. Create model (`models/entity.go`)
+3. Create usecase (`usecases/usecase.go`)
+4. Create controller (`controllers/controller.go`)
+5. Create init.go and register in router
+
+### Frontend Module
+
+1. Create directory structure:
+```bash
+mkdir -p apps/frontend/src/app/modules/{module}/{models,viewmodels,components,pages}
+```
+
+2. Create model (`models/entity.model.ts`)
+3. Create viewmodel (`viewmodels/use-entity.ts`)
+4. Create components and pages
+5. Add route in router.tsx
+6. Add menu item in config/menu.ts
+
+## API Endpoints
+
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | /api/{resource}/ | List all |
+| GET | /api/{resource}/:id | Get by ID |
+| POST | /api/{resource}/ | Create |
+| PUT | /api/{resource}/:id | Update |
+| DELETE | /api/{resource}/:id | Delete |
+
+### Query Parameters
+- `page` - Page number (default: 1)
+- `limit` - Items per page (default: 10)
+- `search` - Search term
+- `sort_by` - Sort field
+- `order` - Sort order (asc/desc)
+
+## Configuration
+
+### Backend (config.yaml)
+```yaml
+server:
+  port: 8080
+  mode: debug
+
+database:
+  type: mysql
+  host: localhost
+  port: 3306
+  user: root
+  password: ""
+  dbname: {project_name}
+
+redis:
+  address: localhost:6379
+```
+
+### Frontend (.env)
+```
+VITE_API_BASE_URL=http://localhost:8080
+VITE_APP_NAME={project_name}
+```
+
+### Docker Compose
+```yaml
+version: '3.8'
+services:
+  backend:
+    build: ./apps/backend
+    ports:
+      - "8080:8080"
+    depends_on:
+      - db
+      - redis
+    environment:
+      - DATABASE_URL=mysql://root:password@db:3306/{project_name}
+
+  frontend:
+    build: ./apps/frontend
+    ports:
+      - "5173:80"
+
+  db:
+    image: mysql:8
+    environment:
+      MYSQL_ROOT_PASSWORD: password
+      MYSQL_DATABASE: {project_name}
+    volumes:
+      - db_data:/var/lib/mysql
+
+  redis:
+    image: redis:7-alpine
+
+volumes:
+  db_data:
+```
+
+## Development Scripts
+
+### Root package.json
+```json
+{
+  "scripts": {
+    "dev:backend": "cd apps/backend && go run cmd/api/main.go",
+    "dev:frontend": "cd apps/frontend && pnpm dev",
+    "dev:all": "concurrently \"pnpm dev:backend\" \"pnpm dev:frontend\"",
+    "build:backend": "cd apps/backend && go build -o bin/api cmd/api/main.go",
+    "build:frontend": "cd apps/frontend && pnpm build",
+    "test:backend": "cd apps/backend && go test ./...",
+    "test:frontend": "cd apps/frontend && pnpm test"
+  }
+}
+```
+
+## Conventions
+
+### Backend
+- File naming: `snake_case.go`
+- UUID primary keys
+- Nullable fields use pointers
+- No soft deletes
+
+### Frontend
+- File naming: `kebab-case.tsx`
+- Hook naming: `use-*.ts`
+- No direct API calls in components
+- Zod schemas in models folder
+
+## Shared Types (Optional)
+
+```typescript
+// packages/shared-types/index.ts
+export interface PaginatedResponse<T> {
+  data: T[];
+  total: number;
+  page: number;
+  limit: number;
+  total_pages: number;
+}
+
+export type Status = 'active' | 'inactive' | 'pending';
+```
+
+Use in frontend:
+```typescript
+import type { PaginatedResponse } from '@{project_name}/shared-types';
+```

package/assets/templates/react-vite/CLAUDE.md

@@ -0,0 +1,304 @@
+# CLAUDE.md - React + Vite + TypeScript Frontend Template
+
+## Project Overview
+
+Frontend application built with:
+- **React 19** - UI library
+- **TypeScript** - Type safety
+- **Vite 6** - Build tool
+- **Tailwind CSS 4** - Utility-first CSS
+- **shadcn/ui** - UI component library
+- **React Router 7** - Client-side routing
+- **TanStack Query** - Server state management
+
+## Quick Start
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run development server
+pnpm dev
+
+# Build for production
+pnpm build
+
+# Preview production build
+pnpm preview
+
+# Run linter
+pnpm lint
+```
+
+## Project Structure
+
+```
+{project_name}/
+├── src/
+│   ├── app/
+│   │   ├── config/              # App configuration
+│   │   │   ├── routes.ts        # Route definitions
+│   │   │   └── menu.ts          # Navigation menu
+│   │   ├── layouts/             # Layout components
+│   │   │   ├── root-layout.tsx
+│   │   │   └── sidebar-layout.tsx
+│   │   ├── modules/             # Feature modules (MVVM)
+│   │   │   └── {module}/
+│   │   │       ├── components/
+│   │   │       ├── models/
+│   │   │       ├── viewmodels/
+│   │   │       └── pages/
+│   │   ├── shared/              # Shared utilities
+│   │   │   ├── components/
+│   │   │   ├── contexts/
+│   │   │   └── hooks/
+│   │   └── router.tsx           # Router setup
+│   ├── components/ui/           # shadcn/ui components
+│   ├── lib/
+│   │   ├── api-client.ts        # API client
+│   │   └── utils.ts             # Utility functions
+│   ├── main.tsx                 # App entry
+│   └── index.css                # Global styles
+├── public/
+├── .env
+├── vite.config.ts
+├── tailwind.config.ts
+├── tsconfig.json
+└── package.json
+```
+
+## Key Patterns and Conventions
+
+### File Naming
+- Use `kebab-case.tsx` for components
+- Use `use-*.ts` for hooks
+- Use `*.model.ts` for models
+- Use `*.schema.ts` for Zod schemas
+
+### MVVM Pattern
+
+**Model** - Data types and API functions:
+```typescript
+// models/entity.model.ts
+export interface Entity {
+  id: string;
+  name: string;
+  status: 'active' | 'inactive';
+}
+
+export async function getEntities(): Promise<Entity[]> {
+  return api.get<Entity[]>('/entities');
+}
+
+export async function createEntity(data: CreateEntityDTO): Promise<Entity> {
+  return api.post<Entity>('/entities', data);
+}
+```
+
+**ViewModel** - Business logic and state:
+```typescript
+// viewmodels/use-entities.ts
+export function useEntitiesViewModel() {
+  const [data, setData] = useState<Entity[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadData = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const entities = await getEntities();
+      setData(entities);
+    } catch (err) {
+      setError('Failed to load data');
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  return { data, isLoading, error, loadData };
+}
+```
+
+**View** - Pure UI components:
+```typescript
+// components/entity-table.tsx
+interface EntityTableProps {
+  data: Entity[];
+  onEdit: (entity: Entity) => void;
+  onDelete: (entity: Entity) => void;
+}
+
+export function EntityTable({ data, onEdit, onDelete }: EntityTableProps) {
+  return (
+    <Table>
+      {data.map((entity) => (
+        <TableRow key={entity.id}>
+          <TableCell>{entity.name}</TableCell>
+          <TableCell>
+            <Button onClick={() => onEdit(entity)}>Edit</Button>
+          </TableCell>
+        </TableRow>
+      ))}
+    </Table>
+  );
+}
+```
+
+### API Client
+
+```typescript
+// lib/api-client.ts
+import { getAuth } from '@/app/shared/contexts/auth-context';
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+
+export const api = {
+  async get<T>(endpoint: string, options?: { requireAuth?: boolean }): Promise<T> {
+    const headers: HeadersInit = { 'Content-Type': 'application/json' };
+    if (options?.requireAuth !== false) {
+      const token = await getAuth().currentUser?.getIdToken();
+      headers['Authorization'] = `Bearer ${token}`;
+    }
+    const response = await fetch(`${API_BASE_URL}${endpoint}`, { headers });
+    return response.json();
+  },
+
+  async post<T>(endpoint: string, data: unknown): Promise<T> {
+    // Similar to get with method: 'POST' and body
+  },
+};
+```
+
+### Page Component Pattern
+
+```typescript
+// pages/entities-page.tsx
+export default function EntitiesPage() {
+  const vm = useEntitiesPageViewModel();
+
+  useEffect(() => {
+    vm.loadData();
+  }, [vm.loadData]);
+
+  return (
+    <div className="container mx-auto p-6">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold">Entities</h1>
+        <Button onClick={() => vm.setIsFormOpen(true)}>Add New</Button>
+      </div>
+
+      <EntityTable
+        data={vm.data}
+        isLoading={vm.isLoading}
+        onEdit={vm.handleEdit}
+        onDelete={vm.handleDelete}
+      />
+
+      <EntityFormDialog
+        open={vm.isFormOpen}
+        onOpenChange={vm.setIsFormOpen}
+        entity={vm.editingEntity}
+        onSubmit={vm.handleSubmit}
+      />
+    </div>
+  );
+}
+```
+
+## Adding New Module
+
+1. Create module directory structure:
+```bash
+mkdir -p src/app/modules/{module}/{models,viewmodels,components,pages}
+```
+
+2. Create model (`models/entity.model.ts`)
+3. Create viewmodel (`viewmodels/use-entity.ts`)
+4. Create components (`components/*.tsx`)
+5. Create page (`pages/entity-page.tsx`)
+6. Add route in `src/app/router.tsx`
+7. Add menu item in `src/app/config/menu.ts`
+
+## Component Guidelines
+
+### Form with Zod Validation
+
+```typescript
+// models/entity.schema.ts
+import { z } from 'zod';
+
+export const entitySchema = z.object({
+  name: z.string().min(1, 'Name is required'),
+  email: z.string().email('Invalid email'),
+});
+
+export type EntityFormData = z.infer<typeof entitySchema>;
+```
+
+```typescript
+// components/entity-form.tsx
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+export function EntityForm({ onSubmit }: Props) {
+  const form = useForm<EntityFormData>({
+    resolver: zodResolver(entitySchema),
+  });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField name="name" control={form.control} render={...} />
+      </form>
+    </Form>
+  );
+}
+```
+
+### Loading States
+
+```typescript
+// Use skeleton for initial load
+{isLoading && <TableSkeleton rows={5} />}
+
+// Use overlay for data refresh
+{isRefreshing && (
+  <div className="absolute inset-0 bg-background/50 flex items-center justify-center">
+    <Spinner />
+  </div>
+)}
+```
+
+## Configuration
+
+### Environment Variables (.env)
+```
+VITE_API_BASE_URL=http://localhost:8080
+VITE_APP_NAME={project_name}
+```
+
+### Tailwind Config
+```typescript
+// tailwind.config.ts
+export default {
+  content: ['./src/**/*.{ts,tsx}'],
+  theme: {
+    extend: {
+      // Custom theme extensions
+    },
+  },
+  plugins: [],
+};
+```
+
+### Path Aliases (tsconfig.json)
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
+```