🎉 Rename token group - display modal

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]
@@ -143,8 +145,7 @@
            (let [token-ids (set tokens-in-path-ids)
                  remaining-tokens (filter (fn [token]
                                             (not (contains? token-ids (:id token))))
-                                          selected-token-set-tokens)
-                 _ (prn "Remaining tokens:" remaining-tokens)]
+                                          selected-token-set-tokens)]
              (seq remaining-tokens))))
 
         delete-token
@@ -164,6 +165,22 @@
                 (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
+        ;; (fn [node type]
+        ;;   (st/emit! (dwtl/assign-token-node-context-menu nil))
+        ;;   (st/emit! (modal/show :tokens/rename-node {:node node
+        ;;                                              :type type})))
+
+        rename-node
+        (mf/use-fn
+         (fn [node type]
+           (prn "Open rename node modal")
+           (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 +208,9 @@
 
     [:*
      [:& 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}]
+     ;;  [:> rename-node-modal* {}]
 
      [:> 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,28 @@
+(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 []
+           (modal/hide!)))]
+
+    [: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}]
+      (str "Rename node modal for node: " node " of type: " type)]]))

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

@@ -0,0 +1,41 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "ds/_sizes.scss" as *;
+@use "ds/typography.scss" as t;
+
+@use "refactor/common-refactor.scss" as deprecated;
+
+.modal-overlay {
+  --modal-title-foreground-color: var(--color-foreground-primary);
+  --modal-text-foreground-color: var(--color-foreground-secondary);
+
+  @extend .modal-overlay-base;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  block-size: 100%;
+  inline-size: 100%;
+  background-color: var(--overlay-color);
+}
+
+.close-btn {
+  position: absolute;
+  inset-block-start: $sz-6;
+  inset-inline-end: $sz-6;
+}
+
+.modal-dialog {
+  @extend .modal-container-base;
+  inline-size: 100%;
+  max-inline-size: 32rem;
+  max-block-size: unset;
+  user-select: none;
+  position: relative;
+}

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"