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/reactflow@11.11.4/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,28 @@
 (ns parts.frontend.app
   (:require
-   ["htmx.org" :default htmx]))
+   ["htmx.org" :default htmx]
+   [uix.core :refer [defui $]]
+   [uix.dom]
+   ["reactflow" :refer [ReactFlow]]))
+
+(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 []
+  ($ :div {:style {:width "100vw" :height "100vh"}}
+     ($ ReactFlow {:nodes (clj->js initial-nodes)
+                   :edges (clj->js initial-edges)})))
+
+(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)))))