🎉 Rename token group

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

@@ -5,6 +5,7 @@
    [app.common.types.shape.layout :as ctsl]
    [app.common.types.tokens-lib :as ctob]
    [app.config :as cf]
+   [app.main.data.modal :as modal]
    [app.main.data.style-dictionary :as sd]
    [app.main.data.workspace.tokens.application :as dwta]
    [app.main.data.workspace.tokens.library-edit :as dwtl]
@@ -13,6 +14,7 @@
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.ds.foundations.typography.text :refer [text*]]
    [app.main.ui.workspace.tokens.management.context-menu :refer [token-context-menu]]
+   [app.main.ui.workspace.tokens.management.forms.rename-node-modal :refer [rename-node-modal*]]
    [app.main.ui.workspace.tokens.management.group :refer [token-group*]]
    [app.main.ui.workspace.tokens.management.node-context-menu :refer [token-node-context-menu*]]
    [app.util.array :as array]
@@ -164,6 +166,17 @@
                 (st/emit! (dwtl/toggle-token-path (str (name type) "." path)))
                 (st/emit! (dwtl/toggle-token-path (name type)))))))
 
+        ;; node-to-rename (mf/use-state nil)
+        ;; node-to-rename* (deref node-to-rename)
+
+        rename-node
+        (mf/with-memo []
+          (fn [node type]
+            (mf/portal
+             (st/emit! (dwtl/assign-token-node-context-menu nil)
+                       (modal/show :tokens/rename-node {:node node
+                                                        :type type})))))
+
         delete-node
         (mf/with-memo [selected-token-set-tokens selected-token-set-id]
           (fn [node type]
@@ -191,7 +204,8 @@
 
     [:*
      [:& token-context-menu {:on-delete-token delete-token}]
-     [:> token-node-context-menu* {:on-delete-node delete-node}]
+     [:> token-node-context-menu* {:on-rename-node rename-node
+                                   :on-delete-node delete-node}]
 
      [:> selected-set-info* {:tokens-lib tokens-lib
                              :selected-token-set-id selected-token-set-id}]

frontend/src/app/main/ui/workspace/tokens/management/forms/rename_node_modal.cljs

@@ -0,0 +1,30 @@
+(ns app.main.ui.workspace.tokens.management.forms.rename-node-modal
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.main.data.modal :as modal]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.foundations.assets.icon :as i]
+   [app.util.i18n :refer [tr]]
+   [rumext.v2 :as mf]))
+
+(mf/defc rename-node-modal*
+  {::mf/register modal/components
+   ::mf/register-as :tokens/rename-node}
+  [{:keys [node type]}]
+
+  (let [on-close
+        (mf/use-fn
+         (mf/deps [])
+         (fn []
+           (prn "Close rename node modal")))]
+
+    [:div {:class (stl/css :modal-overlay)}
+     [:div {:class (stl/css :modal-dialog)}
+      [:> icon-button* {:class (stl/css :close-btn)
+                        :on-click on-close
+                        :aria-label (tr "labels.close")
+                        :variant "ghost"
+                        :icon i/close}]
+      "Rename node modal for node:"
+      [:pre (str node)]
+      [:pre (str type)]]]))

frontend/src/app/main/ui/workspace/tokens/management/node_context_menu.cljs

@@ -13,6 +13,7 @@
 
 (def ^:private schema:token-node-context-menu
   [:map
+   [:on-rename-node fn?]
    [:on-delete-node fn?]])
 
 (def ^:private tokens-node-menu-ref
@@ -25,7 +26,7 @@
 
 (mf/defc token-node-context-menu*
   {::mf/schema schema:token-node-context-menu}
-  [{:keys [on-delete-node]}]
+  [{:keys [on-rename-node on-delete-node]}]
   (let [mdata               (mf/deref tokens-node-menu-ref)
         is-open?            (boolean mdata)
         dropdown-ref        (mf/use-ref)
@@ -35,7 +36,13 @@
         dropdown-direction-change* (mf/use-ref 0)
         top                 (+ (get-in mdata [:position :y]) 5)
         left                (+ (get-in mdata [:position :x]) 5)
-
+        rename-node         (mf/use-fn
+                             (mf/deps mdata)
+                             (fn []
+                               (let [node (get mdata :node)
+                                     type (get mdata :type)]
+                                 (when node
+                                   on-rename-node node type))))
         delete-node          (mf/use-fn
                               (mf/deps mdata)
                               (fn []
@@ -75,6 +82,11 @@
                 :on-context-menu prevent-default}
           (when mdata
             [:ul {:class (stl/css :token-node-context-menu-list)}
+             [:li {:class (stl/css :token-node-context-menu-listitem)}
+              [:button {:class (stl/css :token-node-context-menu-action)
+                        :type "button"
+                        :on-click rename-node}
+               (tr "labels.rename")]]
              [:li {:class (stl/css :token-node-context-menu-listitem)}
               [:button {:class (stl/css :token-node-context-menu-action)
                         :type "button"