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:
2026-03-09 20:04:31 +01:00
parent 11fd9cd54d
commit b3c2c6711f
67 changed files with 1286 additions and 2124 deletions

View File

@@ -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.