# Workflow Designer (React + shadcn/ui)

Modern workflow designer built with React 18, TypeScript, and shadcn/ui.

## 🚀 Quick Start

### Development

```bash
npm install
npm run dev
```

Open http://localhost:5173/

### Production Build

```bash
npm run build
```

Built files will be in `dist/` directory.

## 🛠️ Tech Stack

- **React 19** - UI framework
- **TypeScript** - Type safety
- **Vite** - Build tool
- **Tailwind CSS** - Styling
- **shadcn/ui** - UI components
- **Zustand** - State management
- **Axios** - HTTP client

## 📁 Project Structure

```
designer/
├── src/
│   ├── components/
│   │   ├── ui/              # shadcn/ui components
│   │   ├── layout/          # Layout components
│   │   ├── workflow/        # Workflow-specific (TODO)
│   │   └── form/            # Form designer (TODO)
│   ├── lib/                 # Utilities
│   ├── pages/               # Page components
│   │   └── WorkflowDesigner.tsx
│   ├── stores/              # Zustand stores (TODO)
│   ├── types/               # TypeScript types (TODO)
│   ├── App.tsx
│   └── main.tsx
├── public/
├── dist/                    # Build output
└── package.json
```

## 🌐 Backend Integration

The new designer is served via:
- **Development**: http://localhost:5173/
- **Production**: /api/workflow/designer-v2

Backend route: `main/default/routes/designer-v2.router.js`

## 📝 Features

### Implemented ✅
- Modern UI with shadcn/ui
- Responsive layout
- TypeScript type safety
- Basic component structure
- Development server
- Production build

### TODO 🚧
- Workflow canvas with React Flow
- Form designer components
- State management with Zustand
- API integration
- Internationalization (i18n)
- Unit tests
- More shadcn/ui components

## 🎨 Customization

### Tailwind Configuration

Edit `tailwind.config.js` to customize theme.

### Path Aliases

TypeScript path aliases are configured in `tsconfig.app.json`:
- `@/` maps to `./src/`

## 📦 Scripts

- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run lint` - Run ESLint
- `npm run preview` - Preview production build

## 🔗 Related Documentation

See parent directory for comprehensive planning docs:
- [Refactoring Plan](../DESIGNER_REFACTOR_PLAN.md)
- [URL Structure](../URL_STRUCTURE.md)
- [Quick Start Guide](../QUICK_START_GUIDE.md)

## 📄 License

MIT
