feat(frontend): add UIx, add ReactFlow

deps.edn

@@ -44,7 +44,12 @@
   ;; https://code.thheller.com/blog/shadow-cljs/2024/10/18/fullstack-cljs-workflow-with-shadow-cljs.html
   thheller/shadow-cljs {:mvn/version "2.28.20"}
   cider/cider-nrepl {:mvn/version "0.51.1"}
-  refactor-nrepl/refactor-nrepl {:mvn/version "3.10.0"}}
+  refactor-nrepl/refactor-nrepl {:mvn/version "3.10.0"}
+  ;;
+  ;; UIx
+  ;; https://github.com/pitch-io/uix
+  com.pitch/uix.core {:mvn/version "1.3.1"}
+  com.pitch/uix.dom {:mvn/version "1.3.1"}}
 
  :aliases
  {:run/app

resources/public/css/flow.css

@@ -1,5 +1,3 @@
-/* From: https://unpkg.com/[email protected]/dist/style.css */
-
 /* this gets exported as style.css and can be used for the default theming */
 /* these are the necessary styles for React Flow, they get used by base.css and style.css */
 .react-flow {

src/dev/repl.clj

@@ -24,3 +24,6 @@
 (defn go []
   (stop)
   (start))
+
+(defn cljs-repl []
+  (shadow.cljs.devtools.api/repl :frontend))

src/main/parts/frontend/app.cljs

@@ -1,9 +1,56 @@
 (ns parts.frontend.app
+  ;; TODO: We probably need to split the nodes UI into a separate component and
+  ;; only load this when the user is signed in. It doesn't make sense to always
+  ;; be loading this.
   (:require
-   ["htmx.org" :default htmx]))
+   ["htmx.org" :default htmx]
+   ["reactflow" :refer [ReactFlow
+                        MiniMap
+                        Controls
+                        Background
+                        useNodesState
+                        useEdgesState
+                        addEdge]]
+   [uix.core :refer [defui $]]
+   [uix.dom]))
+
+;; NOTE: Layouting
+;; https://reactflow.dev/learn/layouting/layouting
+;; https://d3js.org/d3-force
+;; https://marvl.infotech.monash.edu/webcola/
+
+(def initial-nodes
+  [{:id "1" :position {:x 0 :y 0} :data {:label "1"}}
+   {:id "2" :position {:x 0 :y 100} :data {:label "2"}}])
+
+(def initial-edges
+  [{:id "e1-2" :source "1" :target "2"}])
+
+(defui app []
+  (let [[nodes setNodes onNodesChange] (useNodesState (clj->js initial-nodes))
+        [edges setEdges onEdgesChange] (useEdgesState (clj->js initial-edges))
+        on-connect (uix.core/use-callback
+                    (fn [params]
+                      (setEdges (fn [eds] (addEdge params eds))))
+                    [setEdges])]
+    ($ :div {:style {:width "100vw" :height "100vh"}}
+       ($ ReactFlow {:nodes nodes
+                     :edges edges
+                     :onNodesChange onNodesChange
+                     :onEdgesChange onEdgesChange
+                     :onConnect on-connect}
+          ($ MiniMap)
+          ($ Controls)
+          ($ Background {:variant "dots"
+                         :gap 12
+                         :size 1})))))
+
+(defonce root
+  (uix.dom/create-root (js/document.getElementById "root")))
 
 (defn ^:export init []
   (.on htmx "htmx:load"
-       (fn [evt]
+       (fn [_]
+         (uix.dom/render-root ($ app) root)
          (let [version (.-version htmx)]
            (js/console.log "HTMX loaded! Version:" version)))))