From 9d2117e2ac5d6f72eee144e4112d4d28eec044d8 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 17 Mar 2025 12:31:25 +0100 Subject: [PATCH 1/3] :paperclip: Replace use-callback with use-fn on token themes modal --- .../app/main/ui/workspace/tokens/modals/themes.cljs | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs index 0a2ba9f19..4e8a46022 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs +++ b/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) @@ -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)] @@ -429,7 +429,7 @@ 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,8 +442,8 @@ {::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)))] + [] + (let [handle-close-dialog (mf/use-fn #(st/emit! (modal/hide)))] [:div {:class (stl/css :modal-overlay)} [:div {:class (stl/css :modal-dialog) :data-testid "token-theme-update-create-modal"} From ebcf5b3177a9a847dc196c3dd17e8afe9cc775d8 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 17 Mar 2025 13:15:16 +0100 Subject: [PATCH 2/3] :bug: Avoid theme overwrite on creating a theme with existing name --- frontend/src/app/main/data/tokens.cljs | 25 +++++++----- .../ui/workspace/tokens/modals/themes.cljs | 38 +++++++++---------- frontend/translations/en.po | 3 ++ frontend/translations/es.po | 3 ++ 4 files changed, 41 insertions(+), 28 deletions(-) diff --git a/frontend/src/app/main/data/tokens.cljs b/frontend/src/app/main/data/tokens.cljs index ff6bd74e9..0e02f9f1d 100644 --- a/frontend/src/app/main/data/tokens.cljs +++ b/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) - (pcb/with-library-data data) - (pcb/set-token-theme (:group new-token-theme) - (:name new-token-theme) - new-token-theme))] - (rx/of - (dch/commit-changes changes))))))) + (let [data (dsh/lookup-file-data state) + 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 (dch/commit-changes changes))))))))) (defn update-token-theme [[group name] token-theme] (ptk/reify ::update-token-theme diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs index 4e8a46022..be7fee634 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs @@ -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! (wdt/create-token-theme theme)))) - (on-back))) + (st/emit! (ptk/event ::ev/event {::ev/name "create-tokens-theme"}) + (wdt/create-token-theme theme))) + (on-back)))) close-modal (mf/use-fn @@ -423,12 +423,13 @@ :on-save-form on-save-form :disabled? disabled?}]]]]]])) -(mf/defc themes-modal-body - [_] - (let [themes (mf/deref refs/workspace-token-themes-no-hidden) - state (mf/use-state (if (empty? themes) - {:type :create-theme} - {:type :themes-overview})) +(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) + {:type :create-theme} + {:type :themes-overview})) set-state (mf/use-fn #(swap! state %)) component (case (:type @state) :empty-themes empty-themes @@ -443,13 +444,12 @@ ::mf/register modal/components ::mf/register-as :tokens/themes} [] - (let [handle-close-dialog (mf/use-fn #(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 - :aria-label (tr "labels.close") - :variant "action" - :icon "close"}] - [:& themes-modal-body]]])) + [: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 modal/hide! + :aria-label (tr "labels.close") + :variant "action" + :icon "close"}] + [:> themes-modal-body*]]]) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 8c9efd877..3d436505e 100644 --- a/frontend/translations/en.po +++ b/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." diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 1ec601197..9eb46ef55 100644 --- a/frontend/translations/es.po +++ b/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" From 04c77a8532f7f45cb38d796518951da30cac7517 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 17 Mar 2025 14:17:03 +0100 Subject: [PATCH 3/3] :fire: Remove unused double token resolve operation on sidebar --- frontend/src/app/main/ui/workspace/tokens/sidebar.cljs | 4 ---- 1 file changed, 4 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index a2d35b10d..788886cd3 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/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