feat: add node help system and registry for extensible node types
- Implemented a help system for different node types (config, render, variable, function) with detailed usage instructions. - Created a node registry to manage node types, including registration, retrieval, and validation of connections between nodes. - Defined central node and edge types for the application to streamline state management. - Added Nunjucks autocomplete functionality to enhance user experience in template editing. - Developed a syntax highlighting parser for PlantUML and Nunjucks within the CodeMirror editor. - Registered built-in node types at application startup, including their default configurations and help entries. - Introduced a theme context provider to manage light/dark mode preferences across the application. - Created utility functions for class name management using clsx and tailwind-merge. - Set up Tailwind CSS for styling with custom themes and responsive design. - Configured Vite for development with proxy settings for backend API calls and Kroki diagram service.
This commit is contained in:
99
README.md
99
README.md
@@ -0,0 +1,99 @@
|
||||
# Zui
|
||||
|
||||
Node-based editor (React Flow) for configs, variables, and rendering (PlantUML, Markdown, etc.). Optional Node.js backend API for demos or future features (e.g. todos CRUD).
|
||||
|
||||
## Project layout
|
||||
|
||||
```
|
||||
my-app/
|
||||
├── frontend/ # React app (Vite, TypeScript)
|
||||
│ ├── Dockerfile # Multi-stage for prod (build → Nginx)
|
||||
│ ├── Dockerfile.dev # Dev with hot reload
|
||||
│ ├── src/
|
||||
│ ├── public/
|
||||
│ ├── nginx.conf
|
||||
│ └── package.json
|
||||
├── backend/ # Node.js/Express API
|
||||
│ ├── Dockerfile
|
||||
│ ├── src/
|
||||
│ │ └── index.js
|
||||
│ └── package.json
|
||||
├── docker-compose.yml
|
||||
├── .dockerignore
|
||||
└── .gitignore
|
||||
```
|
||||
|
||||
Ignored by git: `node_modules`, `dist`, `.env`, `.env.*` (see [.gitignore](.gitignore)). Local Docker overrides: `docker-compose.override.yml` (optional, not committed).
|
||||
|
||||
---
|
||||
|
||||
## Run locally (dev)
|
||||
|
||||
**Frontend only:**
|
||||
|
||||
```bash
|
||||
cd frontend && npm install && npm run dev
|
||||
# → http://localhost:3000
|
||||
```
|
||||
|
||||
**Frontend + backend** (so the app can show “Backend API: N todos”):
|
||||
|
||||
```bash
|
||||
# Terminal 1 – backend
|
||||
cd backend && npm install && npm run dev
|
||||
# → http://localhost:8080
|
||||
|
||||
# Terminal 2 – frontend
|
||||
cd frontend && npm install && npm run dev
|
||||
# → http://localhost:3000 (Vite proxies /api/todos to backend)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Run with Docker
|
||||
|
||||
```bash
|
||||
docker compose up --build
|
||||
```
|
||||
|
||||
- **Frontend**: http://localhost:3000 (Nginx; `/api/*` proxied to backend).
|
||||
- **Backend**: http://localhost:8080 (Express).
|
||||
|
||||
Environment variables (backend service):
|
||||
|
||||
| Variable | Default | Description |
|
||||
|-------------|----------------------------|-------------|
|
||||
| `PORT` | `8080` | Backend listen port. |
|
||||
| `CORS_ORIGIN` | `http://localhost:3000` | Allowed origin for CORS. |
|
||||
|
||||
For self-hosting (e.g. Tailscale/HTTPS): set `CORS_ORIGIN` to your frontend URL; put Caddy or Nginx in front for TLS if needed.
|
||||
|
||||
**Dev with Docker (frontend hot reload):** use `frontend/Dockerfile.dev` and mount `./frontend` as a volume, or run `cd frontend && npm run dev` locally.
|
||||
|
||||
---
|
||||
|
||||
## Scripts
|
||||
|
||||
| Command | Description |
|
||||
|--------|-------------|
|
||||
| `cd frontend && npm run dev` | Vite dev server. |
|
||||
| `cd frontend && npm run build` | Build frontend for production. |
|
||||
| `cd frontend && npm run preview` | Preview production build. |
|
||||
| `cd backend && npm run dev` | Backend with `--watch`. |
|
||||
| `cd backend && npm start` | Backend production run. |
|
||||
| `docker compose up --build` | Run frontend + backend in Docker. |
|
||||
|
||||
---
|
||||
|
||||
## Backend API (no DB)
|
||||
|
||||
| Method | Path | Description |
|
||||
|--------|------|-------------|
|
||||
| GET | `/api/todos` | List all todos. |
|
||||
| GET | `/api/todos/:id` | Get one todo. |
|
||||
| POST | `/api/todos` | Create (`{ "title": "...", "completed": false }`). |
|
||||
| PUT | `/api/todos/:id` | Update. |
|
||||
| DELETE | `/api/todos/:id` | Delete. |
|
||||
| GET | `/health` | Health check (e.g. for Docker). |
|
||||
|
||||
Data is in-memory (resets on restart). Add a JSON file or DB later if needed.
|
||||
|
||||
Reference in New Issue
Block a user