Convert to monorepo

Makefile

@@ -43,13 +43,13 @@ version-increase:
 start:
 	docker run -u $(CONTAINER_UID_GID) --rm -it \
 		-v $(PWD):/home/reconmapper \
-		-v $(PWD)/$(ENV_FILE_NAME):/home/reconmapper/public/environment.js \
+		-v $(PWD)/$(ENV_FILE_NAME):/home/reconmapper/packages/app/public/environment.js \
 		-p 5500:5500 \
 		-e VITE_GIT_COMMIT_HASH=$(GIT_COMMIT_HASH) \
 		-e NODE_OPTIONS="--max-old-space-size=8192" \
 		--entrypoint yarn \
 		--name $(DOCKER_CONTAINER_NAME) \
-		$(DOCKER_DEV_TAG) start
+		$(DOCKER_DEV_TAG) workspace @reconmap/app start
 
 .PHONY: stop
 stop:
@@ -59,8 +59,8 @@ stop:
 tests:
 	docker run -u $(CONTAINER_UID_GID) --rm -it \
 		-v $(PWD):/home/reconmapper \
-		-v $(PWD)/$(ENV_FILE_NAME):/home/reconmapper/public/environment.js \
-		--entrypoint yarn -e CI=true $(DOCKER_DEV_TAG) test
+		-v $(PWD)/$(ENV_FILE_NAME):/home/reconmapper/packages/app/public/environment.js \
+		--entrypoint yarn -e CI=true $(DOCKER_DEV_TAG) workspace @reconmap/app test
 	docker run -u $(CONTAINER_UID_GID) --rm -it \
 		-v $(PWD):/home/reconmapper \
 		-v $(PWD)/$(ENV_FILE_NAME):/home/reconmapper/public/environment.js \

package.json

@@ -1,87 +1,6 @@
 {
-  "name": "reconmap-web-client",
-  "version": "0.9.204",
   "private": true,
-  "type": "module",
-  "dependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@fortawesome/fontawesome-free": "^6.6.0",
-    "@types/node": "^22.9.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@uiw/react-md-editor": "^4.0.4",
-    "bulma": "^1.0.2",
-    "countries-and-timezones": "^3.7.2",
-    "cron-parser": "^4.9.0",
-    "cronstrue": "^2.51.0",
-    "dayjs": "^1.11.13",
-    "friendly-mimes": "^3.0.1",
-    "http-status-codes": "^2.3.0",
-    "i18next": "^23.16.5",
-    "i18next-browser-languagedetector": "^8.0.0",
-    "javascript-time-ago": "^2.5.11",
-    "keycloak-js": "^26.0.5",
-    "path-browserify": "^1.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-dropzone": "^14.3.5",
-    "react-hot-toast": "^2.4.1",
-    "react-i18next": "^15.1.1",
-    "react-markdown": "^9.0.1",
-    "react-router-dom": "^6.28.0",
-    "react-select": "^5.8.3",
-    "react-time-ago": "^7.3.3",
-    "recharts": "^2.13.3",
-    "typescript": "^5.6.3",
-    "ua-parser-js": "^1.0.39",
-    "xterm": "^5.3.0"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
-    "@typescript-eslint/eslint-plugin": "^8.14.0",
-    "@typescript-eslint/parser": "^8.14.0",
-    "@vitejs/plugin-react": "^4.3.3",
-    "@vitest/coverage-v8": "^2.1.5",
-    "eslint": "^9.15.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "jsdom": "^25.0.1",
-    "npm-check-updates": "^17.1.11",
-    "prettier": "^3.3.3",
-    "stylelint": "^16.10.0",
-    "stylelint-config-standard": "^36.0.1",
-    "vite": "^5.4.11",
-    "vite-plugin-svgr": "^4.3.0",
-    "vite-tsconfig-paths": "^5.1.2",
-    "vitest": "^2.1.5"
-  },
-  "scripts": {
-    "lint": "eslint . --ext .js",
-    "start": "VITE_VERSION=$npm_package_version PORT=5500 BROWSER=none vite",
-    "build": "VITE_VERSION=$npm_package_version tsc && vite build",
-    "test": "vitest run",
-    "test:watch": "vitest watch",
-    "test:coverage": "vitest run --coverage",
-    "test:ci": "CI=true vitest run --coverage",
-    "serve": "vite preview"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "packageManager": "[email protected]"
+  "workspaces": [
+    "packages/*"
+  ]
 }

packages/app/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@reconmap/app",
+  "version": "0.9.203",
+  "type": "module",
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.6.0",
+    "@types/node": "^22.9.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@uiw/react-md-editor": "^4.0.4",
+    "bulma": "^1.0.2",
+    "countries-and-timezones": "^3.7.2",
+    "cron-parser": "^4.9.0",
+    "cronstrue": "^2.51.0",
+    "dayjs": "^1.11.13",
+    "friendly-mimes": "^3.0.1",
+    "http-status-codes": "^2.3.0",
+    "i18next": "^23.16.5",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "javascript-time-ago": "^2.5.11",
+    "keycloak-js": "^26.0.5",
+    "path-browserify": "^1.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-dropzone": "^14.3.5",
+    "react-hot-toast": "^2.4.1",
+    "react-i18next": "^15.1.1",
+    "react-markdown": "^9.0.1",
+    "react-router-dom": "^6.28.0",
+    "react-select": "^5.8.3",
+    "react-time-ago": "^7.3.3",
+    "recharts": "^2.13.3",
+    "typescript": "^5.6.3",
+    "ua-parser-js": "^1.0.39",
+    "xterm": "^5.3.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@typescript-eslint/eslint-plugin": "^8.14.0",
+    "@typescript-eslint/parser": "^8.14.0",
+    "@vitejs/plugin-react": "^4.3.3",
+    "@vitest/coverage-v8": "^2.1.5",
+    "eslint": "^9.15.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "jsdom": "^25.0.1",
+    "npm-check-updates": "^17.1.11",
+    "prettier": "^3.3.3",
+    "stylelint": "^16.10.0",
+    "stylelint-config-standard": "^36.0.1",
+    "vite": "^5.4.11",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.2",
+    "vitest": "^2.1.5"
+  },
+  "scripts": {
+    "lint": "eslint . --ext .js",
+    "start": "VITE_VERSION=$npm_package_version PORT=5500 BROWSER=none vite",
+    "build": "VITE_VERSION=$npm_package_version tsc && vite build",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:coverage": "vitest run --coverage",
+    "test:ci": "CI=true vitest run --coverage",
+    "serve": "vite preview"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "packageManager": "[email protected]"
+}

src/components/documents/DocumentsListPage.jsx → packages/app/src/components/documents/DocumentsListPage.jsx

@@ -1,10 +1,9 @@
 import { deleteDocument, getDocuments } from "api/documents";
 import CreateButton from "components/ui/buttons/Create";
-import useDocumentTitle from "hooks/useDocumentTitle";
+import Title from "components/ui/Title";
 import useFetchRequest from "hooks/useFetchRequest";
 import { useNavigate } from "react-router-dom";
 import Breadcrumb from "../ui/Breadcrumb.jsx";
-import Title from "../ui/Title.js";
 import DocumentsTable from "./Table.jsx";
 
 const DocumentsListPage = () => {
@@ -21,8 +20,6 @@ const DocumentsListPage = () => {
         fetch(deleteDocument(documentId)).then(refetch);
     };
 
-    useDocumentTitle("Documents");
-
     return (
         <div>
             <div className="heading">

src/components/layout/Header.jsx → packages/app/src/components/layout/Header.jsx

@@ -78,6 +78,7 @@ const Header = () => {
                     {MenuLinks.map((menuLink) => {
                         return (
                             <div
+                                key={menuLink.name}
                                 className={`navbar-item has-dropdown ${activeMenu === menuLink.name ? "is-active" : ""}`}
                             >
                                 <a

src/components/layout/SidemenuLayout.jsx → packages/app/src/components/layout/SidemenuLayout.jsx

@@ -7,11 +7,15 @@ const SidemenuLayout = ({ children, links }) => {
                 <aside className="menu">
                     {links.map((item) => {
                         if (item.type === "label") {
-                            return <p className="menu-label">{item.name}</p>;
+                            return (
+                                <p key={item.name} className="menu-label">
+                                    {item.name}
+                                </p>
+                            );
                         }
 
                         return (
-                            <ul className="menu-list">
+                            <ul key={item.name} className="menu-list">
                                 <li>
                                     <Link className={location.pathname == item.url ? "is-active" : ""} to={item.url}>
                                         {item.name}

src/components/tasks/TasksListPage.jsx → packages/app/src/components/tasks/TasksListPage.jsx

@@ -1,19 +1,18 @@
 import NativeSelect from "components/form/NativeSelect";
 import RestrictedComponent from "components/logic/RestrictedComponent";
 import DeleteButton from "components/ui/buttons/Delete";
+import Title from "components/ui/Title";
 import { actionCompletedToast } from "components/ui/toast";
-import useDocumentTitle from "hooks/useDocumentTitle";
 import { useCallback, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import secureApiFetch from "services/api";
 import useDelete from "../../hooks/useDelete.js";
 import TaskStatuses from "../../models/TaskStatuses.js";
 import Breadcrumb from "../ui/Breadcrumb.jsx";
 import CreateButton from "../ui/buttons/Create.jsx";
-import Title from "../ui/Title.js";
 import TaskFilters from "./Filters.jsx";
 import TasksTable from "./TasksTable.jsx";
-import TaskTableModel from "./TaskTableModel.js";
+import TaskTableModel from "./TaskTableModel";
 
 const TasksListPage = () => {
     const navigate = useNavigate();
@@ -86,8 +85,6 @@ const TasksListPage = () => {
 
     const destroy = useDelete("/tasks/", reloadTasks);
 
-    useDocumentTitle("Tasks");
-
     useEffect(() => {
         reloadTasks();
     }, [reloadTasks, tableModel.filters]);