|
1 | | -# Vite + React + DaisyUI Template |
| 1 | +# FORMATION Floorplan Editor |
2 | 2 |
|
3 | | -Minimal Vite + React 19 starter wired with Tailwind CSS 4, DaisyUI themes, and Vitest. Use it as a foundation for your next TypeScript front-end without hauling in application-specific code. |
| 3 | +Browser-based editor for creating and maintaining building/floor plans on top of a live map. |
| 4 | +The app is local-first (IndexedDB), supports import/export workflows, and is built with React + Vite + TypeScript. |
4 | 5 |
|
5 | 6 | ## Features |
6 | | -- Vite dev server with React SWC and fast HMR. |
7 | | -- Tailwind CSS v4 directives with DaisyUI light/dark themes. |
8 | | -- Ready-to-use theme toggle with local storage persistence. |
9 | | -- Vitest + Testing Library configured for browser-like component tests. |
10 | | -- Type-driven linting via the TypeScript compiler. |
11 | | - |
12 | | -## Getting Started |
| 7 | +- Interactive map canvas powered by MapLibre + MapTiler. |
| 8 | +- Building/floor hierarchy with selection-aware editing panels. |
| 9 | +- Draw/edit/delete support for point, line, and polygon floor features. |
| 10 | +- Floorplan image overlays with corner-based alignment. |
| 11 | +- Auto-save to IndexedDB with project snapshot sanitization and migration-safe loading. |
| 12 | +- GeoJSON and IMDF-oriented import/export + validation utilities. |
| 13 | +- Address search/recenter flow via OpenCage geocoding. |
| 14 | + |
| 15 | +## Run Locally |
| 16 | +1. Ensure Node.js `>=22` is installed. |
| 17 | +2. Install dependencies: |
13 | 18 |
|
14 | 19 | ```bash |
15 | | -git clone <repo-url> |
16 | | -cd vite-ts-template |
17 | | -nvm use |
18 | 20 | npm install |
19 | | -npm run dev |
20 | 21 | ``` |
21 | 22 |
|
22 | | -Visit the dev server at `http://localhost:5173`. |
23 | | - |
24 | | -## Available Scripts |
25 | | -- `npm run dev` – start the Vite dev server with hot module replacement. |
26 | | -- `npm run build` – type-check then emit a production bundle to `dist/`. |
27 | | -- `npm run preview` – serve the production build for smoke testing. |
28 | | -- `npm run test` – execute Vitest unit tests in a jsdom environment. |
29 | | -- `npm run test:browser` – run browser-smoke tests for app startup and runtime wiring. |
30 | | -- `npm run test:e2e` – run Playwright end-to-end coverage. |
31 | | -- `npm run lint` – run Biome for linting and formatting checks. |
32 | | -- `npm run lint:fix` – apply Biome fixes. |
33 | | -- `npm run format` – format the codebase with Biome. |
34 | | -- `npm run typecheck` – run TypeScript in `--noEmit` mode for static analysis. |
35 | | -- `npm run validate-imdf -- <dataset-dir>` – validate an IMDF dataset directory (`manifest.json` + per-type `*.geojson` files). |
36 | | -- `npm run validate:all` – run completion gate checks (`typecheck`, `lint`, `test`, `test:browser`, `test:e2e`, `build`). |
37 | | -- `npm run setup:hooks` – configure local git hooks path (`.githooks`) for pre-push validation. |
38 | | - |
39 | | -## Guardrails |
40 | | -- Run `npm run setup:hooks` once after clone to enforce local pre-push checks. |
41 | | -- CI publishes independent required checks (`typecheck`, `lint`, `unit-tests`, `browser-smoke`, `e2e`, `build`). |
42 | | -- Configure default branch protection using `/Users/jillesvangurp/git/formation/floorplan-editor/.github/branch-protection.md`. |
43 | | - |
44 | | -## Project Structure |
45 | | -- `src/main.tsx` – entry point that mounts the React app. |
46 | | -- `src/App.tsx` – starter UI with hello world copy and theme toggle. |
47 | | -- `src/App.test.tsx` – sample Vitest suite exercising the template. |
48 | | -- `src/test/setup.ts` – shared Testing Library and Vitest setup. |
49 | | -- `src/index.css` – Tailwind directives (`@import "tailwindcss";`, `@plugin "daisyui"`) and global resets. |
50 | | -- `vite.config.ts` – registers React SWC, `@tailwindcss/vite`, and Vitest globals. |
| 23 | +3. Create a local env file and add required API keys: |
51 | 24 |
|
52 | | -## Template TODO Checklist |
53 | | -Run through these before kicking off a new project: |
54 | | -- [ ] Update the project name, description, and author fields in `package.json`. |
55 | | -- [ ] Choose a license and add `LICENSE` if required by your organization. |
56 | | -- [ ] Reset or remove `README.md` sections that no longer fit your app. |
57 | | -- [ ] Update `.nvmrc` and `engines.node` if you need a different Node baseline. |
58 | | -- [ ] Decide whether to keep Biome defaults or customize `biome.json`. |
59 | | -- [ ] Adjust DaisyUI theme names, colors, or add additional themes in `src/index.css`. |
60 | | -- [ ] Replace the placeholder UI in `src/App.tsx` with your first feature. |
61 | | -- [ ] Add environment variables and document them in `.env.example` if needed. |
62 | | -- [ ] Configure CI (e.g., GitHub Actions) to run `npm run lint && npm run test`. |
63 | | -- [ ] Remove or tailor this checklist once setup is complete. |
| 25 | +```bash |
| 26 | +cp .env.example .env |
| 27 | +``` |
64 | 28 |
|
65 | | -## Deployment |
66 | | -Run `npm run build`, then deploy the contents of `dist/` to your preferred static hosting provider (e.g., Vercel, Netlify, S3 + CloudFront). |
| 29 | +Required variables: |
| 30 | +- `VITE_MAPTILER_API_KEY` (map rendering) |
| 31 | +- `VITE_OPENCAGE_API_KEY` (location search) |
67 | 32 |
|
68 | | -## IMDF Validation |
69 | | -- Exported IMDF datasets are packaged as `manifest.json` plus per-type `*.geojson` files. |
70 | | -- Run the validator locally: |
| 33 | +4. Start the dev server: |
71 | 34 |
|
72 | 35 | ```bash |
73 | | -npm run validate-imdf -- testdata/imdf-sample |
| 36 | +npm run dev |
74 | 37 | ``` |
| 38 | + |
| 39 | +Open `http://localhost:5173`. |
| 40 | + |
| 41 | +## Useful Commands |
| 42 | +- `npm run test` for unit tests. |
| 43 | +- `npm run test:browser` for browser smoke tests. |
| 44 | +- `npm run test:e2e` for Playwright end-to-end tests. |
| 45 | +- `npm run typecheck` for TypeScript checks. |
| 46 | +- `npm run lint` for Biome lint/format checks. |
| 47 | +- `npm run build` for production build output in `dist/`. |
| 48 | +- `npm run validate-imdf -- <dataset-dir>` to validate IMDF datasets. |
0 commit comments