From 32bbd8c1e7cd470790e7128395ec52c74a153a5a Mon Sep 17 00:00:00 2001
From: Gosha Tcherednitchenko <git@gosha.net>
Date: Sat, 1 Feb 2025 05:59:07 +0000
Subject: [PATCH] feat(frontend): add UIx, add ReactFlow

---
 deps.edn                         |  7 ++++++-
 resources/public/css/flow.css    |  2 --
 src/dev/repl.clj                 |  3 +++
 src/main/parts/frontend/app.cljs | 23 +++++++++++++++++++++--
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/deps.edn b/deps.edn
index fd3f0aa..64f0de8 100644
--- a/deps.edn
+++ b/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
diff --git a/resources/public/css/flow.css b/resources/public/css/flow.css
index a087c28..3b53bb2 100644
--- a/resources/public/css/flow.css
+++ b/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 {
diff --git a/src/dev/repl.clj b/src/dev/repl.clj
index 1953375..f191a1b 100644
--- a/src/dev/repl.clj
+++ b/src/dev/repl.clj
@@ -24,3 +24,6 @@
 (defn go []
   (stop)
   (start))
+
+(defn cljs-repl []
+  (shadow.cljs.devtools.api/repl :frontend))
diff --git a/src/main/parts/frontend/app.cljs b/src/main/parts/frontend/app.cljs
index 7aba8fc..c0bc6e4 100644
--- a/src/main/parts/frontend/app.cljs
+++ b/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)))))