Migrate to official UI

frontend/src/app/main/ui/workspace/tokens/sets.cljs

@@ -7,95 +7,77 @@
 (ns app.main.ui.workspace.tokens.sets
   (:require-macros [app.main.style :as stl])
   (:require
-   [app.common.data.macros :as dm]
+   [app.main.data.tokens :as wdt]
+   [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
-   [okulary.core :as l]
-   [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
-(def active-sets #{#uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3"
-                   #uuid "d608877b-842a-473b-83ca-b5f8305caf83"})
-
-(def sets-root-order [#uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3"
-                      #uuid "9c5108aa-bdb4-409c-a3c8-c3dfce2f8bf8"
-                      #uuid "0381446e-1f1d-423f-912c-ab577d61b79b"])
-
-(def sets {#uuid "9c5108aa-bdb4-409c-a3c8-c3dfce2f8bf8" {:type :group
-                                                         :name "Group A"
-                                                         :children [#uuid "d1754e56-3510-493f-8287-5ef3417d4141"
-                                                                    #uuid "d608877b-842a-473b-83ca-b5f8305caf83"]}
-           #uuid "d608877b-842a-473b-83ca-b5f8305caf83" {:type :set
-                                                         :name "Set A / 1"}
-           #uuid "d1754e56-3510-493f-8287-5ef3417d4141" {:type :group
-                                                         :name "Group A / B"
-                                                         :children [#uuid "f608877b-842a-473b-83ca-b5f8305caf83"
-                                                                    #uuid "7cc05389-9391-426e-bc0e-ba5cb8f425eb"]}
-           #uuid "f608877b-842a-473b-83ca-b5f8305caf83" {:type :set
-                                                         :name "Set A / B / 1"}
-           #uuid "7cc05389-9391-426e-bc0e-ba5cb8f425eb" {:type :set
-                                                         :name "Set A / B / 2"}
-           #uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3" {:type :set
-                                                         :name "Set Root 1"}
-           #uuid "0381446e-1f1d-423f-912c-ab577d61b79b" {:type :set
-                                                         :name "Set Root 2"}})
-
 (def ^:private chevron-icon
   (i/icon-xref :arrow (stl/css :chevron-icon)))
 
-(defn set-selected-set
+(defn on-toggle-token-set-click [id event]
-  [set-id]
+  (dom/prevent-default event)
-  (dm/assert! (uuid? set-id))
+  (dom/stop-propagation event)
-  (ptk/reify ::set-selected-set
+  (st/emit! (wdt/toggle-token-set id)))
-    ptk/UpdateEvent
+
-    (update [_ state]
+(defn on-select-token-set-click [id event]
-      (assoc state :selected-set-id set-id))))
+  (dom/prevent-default event)
+  (dom/stop-propagation event)
+  (st/emit! (wdt/set-selected-token-set-id id)))
 
 (mf/defc sets-tree
-  [{:keys [selected-set-id set-id]}]
+  [{:keys [token-set token-set-active? token-set-selected?] :as _props}]
-  (let [set (get sets set-id)]
+  (let [{:keys [id name _children]} token-set
-    (when set
+        selected? (and set? (token-set-selected? id))
-      (let [{:keys [type name children]} set
+        visible? (token-set-active? id)
-            visible? (mf/use-state (contains? active-sets set-id))
+        collapsed? (mf/use-state false)
-            collapsed? (mf/use-state false)
+        set? true #_(= type :set)
-            icon (if (= type :set) i/document i/group)
+        group? false #_ (= type :group)]
-            selected? (mf/use-state (= set-id selected-set-id))
+    [:div {:class (stl/css :set-item-container)
-
+           :on-click #(on-select-token-set-click id %)}
-            on-click
+     [:div {:class (stl/css-case :set-item-group group?
-            (mf/use-fn
+                                 :set-item-set set?
-             (mf/deps type set-id)
+                                 :selected-set selected?)}
-             (fn [event]
+      (when group?
-               (dom/stop-propagation event)
+        [:span {:class (stl/css-case :collapsabled-icon true
-               (st/emit! (set-selected-set set-id))))]
+                                     :collapsed @collapsed?)
-        [:div {:class (stl/css :set-item-container)
+                :on-click #(swap! collapsed? not)}
-               :on-click on-click}
+         chevron-icon])
-         [:div {:class (stl/css-case :set-item-group (= type :group)
+      [:span {:class (stl/css :icon)}
-                                     :set-item-set  (= type :set)
+       (if set? i/document i/group)]
-                                     :selected-set  (and (= type :set) @selected?))}
+      [:div {:class (stl/css :set-name)} name]
-          (when (= type :group)
+      (when set?
-            [:span {:class (stl/css-case
+        [:span {:class (stl/css :action-btn)
-                            :collapsabled-icon true
+                :on-click #(on-toggle-token-set-click id %)}
-                            :collapsed @collapsed?)
+         (if visible? i/shown i/hide)])]
-                    :on-click #(when (= type :group) (swap! collapsed? not))}
+     #_(when (and children (not @collapsed?))
-             chevron-icon])
+         [:div {:class (stl/css :set-children)}
-          [:span {:class (stl/css :icon)} icon]
+          (for [child-id children]
-          [:div {:class (stl/css :set-name)} name]
+            [:& sets-tree (assoc props :key child-id
-          (when (= type :set)
+                                 {:key child-id}
-            [:span {:class (stl/css :action-btn)
+                                 :set-id child-id
-                    :on-click #(swap! visible? not)}
+                                 :selected-set-id selected-token-set-id)])])]))
-             (if @visible?
-               i/shown
-               i/hide)])]
-         (when (and children (not @collapsed?))
-           [:div {:class (stl/css :set-children)}
-            (for [child-id children]
-              [:& sets-tree {:key child-id :set-id child-id :selected-set-id selected-set-id}])])]))))
 
 (mf/defc sets-list
-  [{:keys [selected-set-id]}]
+  [{:keys []}]
-  [:ul {:class (stl/css :sets-list)}
+  (let [token-sets (mf/deref refs/workspace-token-sets)
-   (for [set-id sets-root-order]
+        selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)
-     [:& sets-tree {:key set-id
+        token-set-selected? (mf/use-callback
-                    :set-id set-id
+                             (mf/deps selected-token-set-id)
-                    :selected-set-id selected-set-id}])])
+                             (fn [id]
+                               (= id selected-token-set-id)))
+        active-token-set-ids (mf/deref refs/workspace-active-set-ids)
+        token-set-active? (mf/use-callback
+                           (mf/deps active-token-set-ids)
+                           (fn [id]
+                             (get active-token-set-ids id)))]
+    [:ul {:class (stl/css :sets-list)}
+     (for [[id token-set] token-sets]
+       [:& sets-tree
+        {:key id
+         :token-set token-set
+         :selected-token-set-id selected-token-set-id
+         :token-set-selected? token-set-selected?
+         :token-set-active? token-set-active?}])]))

frontend/src/app/main/ui/workspace/tokens/sidebar.cljs

@@ -40,6 +40,14 @@
 (def selected-set-id
   (l/derived :selected-set-id st/state))
 
+ ;; Event Functions -------------------------------------------------------------
+
+(defn on-set-add-click [_event]
+  (when-let [set-name (js/window.prompt "Set name")]
+    (st/emit! (wdt/create-token-set {:name set-name}))))
+
+;; Components ------------------------------------------------------------------
+
 (mf/defc token-pill
   {::mf/wrap-props false}
   [{:keys [on-click token theme-token highlighted? on-context-menu] :as props}]
@@ -174,10 +182,7 @@
 (mf/defc token-sets
   [_props]
   (let [active-theme-ids (mf/deref refs/workspace-active-theme-ids)
-        themes (mf/deref refs/workspace-ordered-token-themes)
+        themes (mf/deref refs/workspace-ordered-token-themes)]
-        selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)
-        active-set-ids (mf/deref refs/workspace-active-set-ids)
-        token-sets (mf/deref refs/workspace-token-sets)]
     [:div
      [:style
       (str "@scope {"
@@ -189,9 +194,7 @@
                       "b { font-weight: 600; }"])
            "}")]
      [:div.spaced-y
-      {:style {:border-bottom "2px solid grey"
+      {:style {:padding "10px"}}
-               :padding "10px"}}
-
       [:& tokene-theme-create]
       [:div.spaced-y
        [:b "Themes"]
@@ -216,31 +219,7 @@
                                        (dom/prevent-default e)
                                        (dom/stop-propagation e)
                                        (st/emit! (wdt/delete-token-theme id)))}
-                  "🗑️"]]]])]])]]
+                  "🗑️"]]]])]])]]]]))
-      [:div.spaced
-       [:b "Sets"]
-       [:button {:on-click #(when-let [set-name (js/window.prompt "Set name")]
-                              (st/emit! (wdt/create-token-set {:name set-name})))} "Create"]]
-      [:ul.spaced-y
-       (for [[_ {:keys [id name]}] token-sets]
-         [:li {:class [(when (= selected-token-set-id id) "selected")]
-               :on-click (fn []
-                           (st/emit!
-                            (wdt/set-selected-token-set-id id)))}
-          [:div.spaced
-           name
-           [:div.spaced
-            [:button
-             {:on-click (fn [e]
-                          (dom/prevent-default e)
-                          (dom/stop-propagation e)
-                          (st/emit! (wdt/toggle-token-set id)))}
-             (when (get active-set-ids id) "👁️")]
-            [:button {:on-click (fn [e]
-                                  (dom/prevent-default e)
-                                  (dom/stop-propagation e)
-                                  (st/emit! (wdt/delete-token-set id)))}
-             "🗑️"]]]])]]]))
 
 (mf/defc tokens-explorer
   [_props]
@@ -269,8 +248,7 @@
 
 (mf/defc sets-sidebar
   []
-  (let [selected-set-id (mf/deref selected-set-id)
+  (let [open? (mf/use-state true)]
-        open? (mf/use-state true)]
     [:div {:class (stl/css :sets-sidebar)}
      [:div {:class (stl/css :sidebar-header)}
       [:& title-bar {:collapsable true
@@ -279,10 +257,10 @@
                      :title "SETS"
                      :on-collapsed #(swap! open? not)}]
       [:button {:class (stl/css :add-set)
-                :on-click #(println "Add Set")}
+                :on-click on-set-add-click}
        i/add]]
      (when @open?
-       [:& sets-list {:selected-set-id selected-set-id}])]))
+       [:& sets-list])]))
 
 (defn dev-or-preview-url? [url]
   (let [host (-> url js/URL. .-host)