Merge pull request #6086 from penpot/niwinz-develop-token-fixes-2

✨ Several bugfixes related to tokens (part 2)

frontend/src/app/main/data/tokens.cljs

@@ -66,19 +66,26 @@
 ;; TOKENS Actions
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(defn create-token-theme [token-theme]
+(defn create-token-theme
+  [token-theme]
   (let [new-token-theme token-theme]
     (ptk/reify ::create-token-theme
       ptk/WatchEvent
       (watch [it state _]
         (let [data       (dsh/lookup-file-data state)
-              changes (-> (pcb/empty-changes it)
+              tokens-lib (get data :tokens-lib)]
+
+          (if (and tokens-lib (ctob/get-theme tokens-lib (:group token-theme) (:name token-theme)))
+            (rx/of (ntf/show {:content (tr "errors.token-theme-already-exists")
+                              :type :toast
+                              :level :error
+                              :timeout 9000}))
+            (let [changes (-> (pcb/empty-changes it)
                               (pcb/with-library-data data)
                               (pcb/set-token-theme (:group new-token-theme)
                                                    (:name new-token-theme)
                                                    new-token-theme))]
-          (rx/of
+              (rx/of (dch/commit-changes changes)))))))))
-           (dch/commit-changes changes)))))))
 
 (defn update-token-theme [[group name] token-theme]
   (ptk/reify ::update-token-theme

frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs

@@ -128,7 +128,7 @@
                   :class (stl/css :theme-row)}
              [:div {:class (stl/css :theme-row-left)}
 
-              ;; FIREEEEEEEEEE THIS
+              ;; FIXME: FIREEEEEEEEEE THIS
               [:div {:on-click (fn [e]
                                  (dom/prevent-default e)
                                  (dom/stop-propagation e)
@@ -261,7 +261,7 @@
            (swap! theme-state* #(assoc % field value))))
 
         on-save-form
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps theme-state)
          (fn [e]
            (dom/prevent-default e)
@@ -270,9 +270,9 @@
                            (update :group str/trim)
                            (update :description str/trim))]
              (when-not (str/empty? (:name theme))
-               (st/emit! (ptk/event ::ev/event {::ev/name "create-tokens-theme"}))
+               (st/emit! (ptk/event ::ev/event {::ev/name "create-tokens-theme"})
-               (st/emit! (wdt/create-token-theme theme))))
+                         (wdt/create-token-theme theme)))
-           (on-back)))
+             (on-back))))
 
         close-modal
         (mf/use-fn
@@ -378,7 +378,7 @@
                                    (clt/toggle-token-set-group group-path lib' theme'))))))
 
         on-click-token-set
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps on-toggle-token-set)
          (fn [prefixed-set-path-str]
            (let [set-name (ctob/prefixed-set-path-string->set-name-string prefixed-set-path-str)]
@@ -423,13 +423,14 @@
                                    :on-save-form on-save-form
                                    :disabled? disabled?}]]]]]]))
 
-(mf/defc themes-modal-body
+(mf/defc themes-modal-body*
-  [_]
+  {::mf/private true}
+  []
   (let [themes    (mf/deref refs/workspace-token-themes-no-hidden)
-        state (mf/use-state (if (empty? themes)
+        state     (mf/use-state #(if (empty? themes)
                                    {:type :create-theme}
                                    {:type :themes-overview}))
-        set-state (mf/use-callback #(swap! state %))
+        set-state (mf/use-fn #(swap! state %))
         component (case (:type @state)
                     :empty-themes empty-themes
                     :themes-overview (if (empty? themes) empty-themes themes-overview)
@@ -442,14 +443,13 @@
   {::mf/wrap-props false
    ::mf/register modal/components
    ::mf/register-as :tokens/themes}
-  [_args]
+  []
-  (let [handle-close-dialog (mf/use-callback #(st/emit! (modal/hide)))]
   [:div {:class (stl/css :modal-overlay)}
    [:div {:class (stl/css :modal-dialog)
           :data-testid "token-theme-update-create-modal"}
     [:> icon-button* {:class (stl/css :close-btn)
-                        :on-click handle-close-dialog
+                      :on-click modal/hide!
                       :aria-label (tr "labels.close")
                       :variant "action"
                       :icon "close"}]
-      [:& themes-modal-body]]]))
+    [:> themes-modal-body*]]])

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

@@ -266,10 +266,6 @@
             (ctob/get-active-themes-set-tokens tokens-lib)
             {}))
 
-        ;; Resolve tokens as second step
-        active-theme-tokens
-        (sd/use-resolved-tokens* active-theme-tokens)
-
         ;; This only checks for the currently explicitly selected set
         ;; name, it is ephimeral and can be nil
         selected-token-set-name

frontend/translations/en.po

@@ -1166,6 +1166,9 @@ msgstr "Cannot drop a parent set to an own child path."
 msgid "errors.token-set-already-exists"
 msgstr "A set with the same name already exists"
 
+msgid "errors.token-theme-already-exists"
+msgstr "Theme Option with the same name exists"
+
 #: src/app/main/data/tokens.cljs:198
 msgid "errors.token-set-exists-on-drop"
 msgstr "Cannot complete drop, a set with same name already exists at path %s."

frontend/translations/es.po

@@ -7185,3 +7185,6 @@ msgstr "Extiende Penpot con plugins creados por la comunidad para funcionalidad
 
 msgid "errors.token-set-already-exists"
 msgstr "Ya existe un set con el mismo nombre"
+
+msgid "errors.token-theme-already-exists"
+msgstr "Ya existe un theme con este nombre"