feat(client): add click-to-component to enhance development experience

apps/client/src/main.tsx

@@ -1,3 +1,4 @@
+import { ClickToComponent } from "click-to-react-component";
 import { StrictMode } from "react";
 import * as ReactDOM from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
@@ -9,6 +10,7 @@ const root = ReactDOM.createRoot(document.querySelector("#root")!);
 
 root.render(
   <StrictMode>
+    {process.env.NODE_ENV === "development" ? <ClickToComponent /> : null}
     <RouterProvider router={router} />
   </StrictMode>,
 );

package.json

@@ -195,6 +195,7 @@
     "axios-auth-refresh": "^3.3.6",
     "bcryptjs": "^2.4.3",
     "class-variance-authority": "^0.7.0",
+    "click-to-react-component": "^1.1.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "cookie-parser": "^1.4.6",

tools/compose/development-linux.yml

@@ -0,0 +1,65 @@
+version: "3.8"
+
+# In this Docker Compose example, we only fire up the services required for local development.
+# This is not advised for production use as it exposes ports to the database insecurely.
+# If you're looking for a production-ready Docker Compose file, check out the `traefik.yml` file.
+
+# Ensure Docker version is greater than 20.04 for host-gateway support
+
+services:
+  # Database (Postgres)
+  postgres:
+    image: postgres:16-alpine
+    restart: unless-stopped
+    ports:
+      - ${POSTGRES_PORT:-5432}:5432
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_DB: ${POSTGRES_DB:-postgres}
+      POSTGRES_USER: ${POSTGRES_USER:-postgres}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-postgres}
+    healthcheck:
+      test:
+        [
+          "CMD-SHELL",
+          "pg_isready -U ${POSTGRES_USER:-postgres} -d ${POSTGRES_DB:-postgres}",
+        ]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  # Storage (for image uploads)
+  minio:
+    image: minio/minio
+    restart: unless-stopped
+    command: server /data
+    ports:
+      - ${STORAGE_PORT:-9000}:9000
+      - "9001:9001" # Minio Console (Optional)
+    volumes:
+      - minio_data:/data
+    environment:
+      MINIO_ADDRESS: :9000
+      MINIO_CONSOLE_ADDRESS: :9001
+      MINIO_ROOT_USER: ${STORAGE_ACCESS_KEY:-minioadmin}
+      MINIO_ROOT_PASSWORD: ${STORAGE_SECRET_KEY:-minioadmin}
+
+  # Chrome Browser (for printing and previews)
+  chrome:
+    image: ghcr.io/browserless/chromium:latest
+    restart: unless-stopped
+    ports:
+      - ${CHROME_PORT:-8080}:3000
+    environment:
+      TIMEOUT: 10000
+      CONCURRENT: 10
+      TOKEN: ${CHROME_TOKEN:-chrome_token}
+      EXIT_ON_HEALTH_FAILURE: true
+      PRE_REQUEST_HEALTH_CHECK: true
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
+
+volumes:
+  minio_data:
+  postgres_data: