From dac9e1df5f40f7c3a3166a754ab7469dc051dbb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Mon, 8 Jun 2026 21:01:16 +0200 Subject: [PATCH] :wrench: Use token-status to show status in the left sidebar --- .../src/app/common/test_helpers/tokens.cljc | 5 ++ frontend/src/app/main/data/helpers.cljs | 5 ++ frontend/src/app/main/refs.cljs | 3 + frontend/src/app/main/ui/context.cljs | 2 + .../src/app/main/ui/workspace/sidebar.cljs | 50 ++++++++-------- .../app/main/ui/workspace/tokens/sets.cljs | 15 ++--- .../main/ui/workspace/tokens/sets/lists.cljs | 11 ++-- .../workspace/tokens/themes/create_modal.cljs | 21 ++++--- frontend/test/frontend_tests/runner.cljs | 2 + .../tokens/token_status_test.cljs | 58 +++++++++++++++++++ 10 files changed, 124 insertions(+), 48 deletions(-) create mode 100644 frontend/test/frontend_tests/tokens/token_status_test.cljs diff --git a/common/src/app/common/test_helpers/tokens.cljc b/common/src/app/common/test_helpers/tokens.cljc index 01da59e616..edd8220907 100644 --- a/common/src/app/common/test_helpers/tokens.cljc +++ b/common/src/app/common/test_helpers/tokens.cljc @@ -20,6 +20,7 @@ (:tokens-lib (ctf/file-data file))) (defn add-tokens-lib + "Ensure the file has a tokens-lib and a token-statusin its data, creating empty ones if not" [file] (ctf/update-file-data file ctf/ensure-tokens-lib)) @@ -27,6 +28,10 @@ [file f] (ctf/update-file-data file #(update % :tokens-lib f))) +(defn update-token-status + [file f] + (ctf/update-file-data file #(update % :token-status f))) + (defn get-token [file set-id token-id] (let [tokens-lib (:tokens-lib (:data file))] diff --git a/frontend/src/app/main/data/helpers.cljs b/frontend/src/app/main/data/helpers.cljs index d106299572..e3f4c4d538 100644 --- a/frontend/src/app/main/data/helpers.cljs +++ b/frontend/src/app/main/data/helpers.cljs @@ -44,6 +44,11 @@ tokens-file-data (lookup-file-data state tokens-file-id)] (:tokens-lib tokens-file-data))) +(defn lookup-token-status + [state] + (let [current-file-data (lookup-file-data state)] + (:token-status current-file-data))) + (defn get-page [fdata page-id] (dm/get-in fdata [:pages-index page-id])) diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index d8888f10d4..d913884bd3 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -469,6 +469,9 @@ (def tokens-lib (l/derived dsh/lookup-tokens-lib st/state)) +(def token-status + (l/derived dsh/lookup-token-status st/state)) + (def workspace-token-theme-groups (l/derived (d/nilf ctob/get-theme-groups) tokens-lib)) diff --git a/frontend/src/app/main/ui/context.cljs b/frontend/src/app/main/ui/context.cljs index 1986876c9f..c7eabeca44 100644 --- a/frontend/src/app/main/ui/context.cljs +++ b/frontend/src/app/main/ui/context.cljs @@ -25,6 +25,8 @@ (def libraries (mf/create-context nil)) (def design-tokens (mf/create-context nil)) (def token-inputs (mf/create-context nil)) +(def tokens-lib (mf/create-context nil)) +(def token-status (mf/create-context nil)) (def current-scroll (mf/create-context nil)) (def current-zoom (mf/create-context nil)) diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index 6e17e7f0c7..648d836aab 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -22,7 +22,7 @@ [app.main.features :as features] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.context :as muc] + [app.main.ui.context :as ctx] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]] @@ -177,7 +177,7 @@ (mf/with-memo [] (mf/html [:> collapse-button* {}]))] - [:> (mf/provider muc/sidebar) {:value :left} + [:> (mf/provider ctx/sidebar) {:value :left} [:aside {:ref parent-ref :id "left-sidebar-aside" :data-testid "left-sidebar" @@ -320,8 +320,8 @@ (mf/with-memo [active-tokens] (delay (ctob/group-by-type active-tokens)))] - [:> (mf/provider muc/sidebar) {:value :right} - [:> (mf/provider muc/active-tokens-by-type) {:value active-tokens-by-type} + [:> (mf/provider ctx/sidebar) {:value :right} + [:> (mf/provider ctx/active-tokens-by-type) {:value active-tokens-by-type} [:aside {:class (stl/css-case :right-settings-bar true :not-expand (not can-be-expanded?) @@ -368,6 +368,9 @@ (let [tokens-lib (mf/deref refs/tokens-lib) + token-status + (mf/deref refs/token-status) + active-tokens (mf/with-memo [tokens-lib] (if tokens-lib @@ -399,25 +402,26 @@ resolved-active-tokens-force-set (sd/use-resolved-tokens* active-tokens-force-set)] - [:* - (if (:collapse-left-sidebar layout) - [:> collapsed-button*] - [:> left-sidebar* {:layout layout + [:> (mf/provider ctx/tokens-lib) {:value tokens-lib} + [:> (mf/provider ctx/token-status) {:value token-status} + (if (:collapse-left-sidebar layout) + [:> collapsed-button*] + [:> left-sidebar* {:layout layout + :file file + :page-id page-id + :tokens-lib tokens-lib + :active-tokens active-tokens-force-set + :resolved-active-tokens (if tokenscript? + tokenscript-resolved-active-tokens-force-set + resolved-active-tokens-force-set)}]) + [:> right-sidebar* {:section section + :selected selected + :drawing-tool drawing-tool + :layout layout :file file + :file-id file-id :page-id page-id :tokens-lib tokens-lib - :active-tokens active-tokens-force-set - :resolved-active-tokens (if tokenscript? - tokenscript-resolved-active-tokens-force-set - resolved-active-tokens-force-set)}]) - [:> right-sidebar* {:section section - :selected selected - :drawing-tool drawing-tool - :layout layout - :file file - :file-id file-id - :page-id page-id - :tokens-lib tokens-lib - :active-tokens (if tokenscript? - tokenscript-resolved-active-tokens - resolved-active-tokens)}]])) + :active-tokens (if tokenscript? + tokenscript-resolved-active-tokens + resolved-active-tokens)}]]])) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 460b508a18..2efa03753b 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -26,21 +26,17 @@ (st/emit! (dwtl/toggle-token-set-group path))) (mf/defc sets-list* - [{:keys [tokens-lib selected new-path edition-id]}] + [{:keys [selected new-path edition-id]}] - (let [token-sets + (let [tokens-lib + (mf/use-ctx ctx/tokens-lib) + + token-sets (some-> tokens-lib (ctob/get-set-tree)) can-edit? (mf/use-ctx ctx/can-edit?) - token-set-active? - (mf/use-fn - (mf/deps tokens-lib) - (fn [name] - (when tokens-lib - (ctob/token-set-active? tokens-lib name)))) - token-set-group-active? (mf/use-fn (fn [group-path] @@ -66,7 +62,6 @@ {:tokens-lib tokens-lib :token-sets token-sets - :is-token-set-active token-set-active? :is-token-set-group-active token-set-group-active? :on-select on-select-token-set-click diff --git a/frontend/src/app/main/ui/workspace/tokens/sets/lists.cljs b/frontend/src/app/main/ui/workspace/tokens/sets/lists.cljs index e835234ea9..fb51250a81 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets/lists.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets/lists.cljs @@ -9,6 +9,7 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.data.macros :as dm] + [app.common.types.token-status :as ctos] [app.common.types.tokens-lib :as ctob] [app.main.data.workspace.tokens.library-edit :as dwtl] [app.main.store :as st] @@ -313,7 +314,6 @@ [{:keys [is-draggable selected is-token-set-group-active - is-token-set-active on-start-edition on-reset-edition on-edit-submit-set @@ -326,7 +326,9 @@ new-path edition-id]}] - (let [collapsed-paths* (mf/use-state #{}) + (let [token-status (mf/use-ctx ctx/token-status) + + collapsed-paths* (mf/use-state #{}) collapsed-paths (deref collapsed-paths*) collapsed? @@ -418,7 +420,7 @@ :set token-set :label (peek path) :is-editing (= edition-id id) - :is-active (is-token-set-active (ctob/get-name token-set)) + :is-active (ctos/set-active? token-status id) :is-selected (= selected id) :is-draggable is-draggable :is-new false @@ -440,7 +442,6 @@ selected on-update-token-set on-update-token-set-group - is-token-set-active is-token-set-group-active on-create-token-set on-toggle-token-set @@ -453,7 +454,6 @@ edition-id]}] (assert (fn? is-token-set-group-active) "expected a function for `is-token-set-group-active` prop") - (assert (fn? is-token-set-active) "expected a function for `is-token-set-active` prop") (let [theme-modal? (= origin "theme-modal") can-edit? (mf/use-ctx ctx/can-edit?) @@ -492,7 +492,6 @@ :token-sets token-sets :selected selected :on-select on-select - :is-token-set-active is-token-set-active :is-token-set-group-active is-token-set-group-active :on-toggle-set on-toggle-token-set :on-toggle-set-group on-toggle-token-set-group diff --git a/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.cljs b/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.cljs index 5d583a22be..f6f47954d1 100644 --- a/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.cljs @@ -19,6 +19,7 @@ [app.main.data.workspace.tokens.library-edit :as dwtl] [app.main.refs :as refs] [app.main.store :as st] + [app.main.ui.context :as ctx] [app.main.ui.ds.buttons.button :refer [button*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.ds.controls.combobox :refer [combobox*]] @@ -450,12 +451,14 @@ ::mf/register modal/components ::mf/register-as :tokens/themes} [] - [: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 i/close}] - [:> themes-modal-body*]]]) + (let [token-status (mf/deref refs/token-status)] + [:> (mf/provider ctx/token-status) {:value token-status} + [: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 i/close}] + [:> themes-modal-body*]]]])) diff --git a/frontend/test/frontend_tests/runner.cljs b/frontend/test/frontend_tests/runner.cljs index da17eeed40..527f8a218f 100644 --- a/frontend/test/frontend_tests/runner.cljs +++ b/frontend/test/frontend_tests/runner.cljs @@ -38,6 +38,7 @@ [frontend-tests.tokens.logic.token-remapping-test] [frontend-tests.tokens.style-dictionary-test] [frontend-tests.tokens.token-errors-test] + [frontend-tests.tokens.token-status-test] [frontend-tests.tokens.workspace-tokens-remap-test] [frontend-tests.ui.ds-controls-numeric-input-test] [frontend-tests.util-object-test] @@ -88,6 +89,7 @@ frontend-tests.tokens.logic.token-remapping-test frontend-tests.tokens.style-dictionary-test frontend-tests.tokens.token-errors-test + frontend-tests.tokens.token-status-test frontend-tests.tokens.workspace-tokens-remap-test frontend-tests.ui.ds-controls-numeric-input-test frontend-tests.render-wasm.process-objects-test diff --git a/frontend/test/frontend_tests/tokens/token_status_test.cljs b/frontend/test/frontend_tests/tokens/token_status_test.cljs new file mode 100644 index 0000000000..8d14c58965 --- /dev/null +++ b/frontend/test/frontend_tests/tokens/token_status_test.cljs @@ -0,0 +1,58 @@ +(ns frontend-tests.tokens.token-status-test + (:require + [app.common.test-helpers.files :as thf] + [app.common.test-helpers.ids-map :as thi] + [app.common.test-helpers.tokens :as tht] + [app.common.types.token-status :as ctos] + [app.common.types.tokens-lib :as ctob] + [app.main.data.helpers :as dsh] + [clojure.test :as t])) + +(defn- setup-file-with-tokens + "Create a file with several token themes and token sets, some active and + some inactive. Returns the file map with :tokens-lib and :token-status + in its :data." + [] + (-> (thf/sample-file :file1) + (tht/add-tokens-lib) + (tht/update-tokens-lib + #(-> % + ;; Add token sets + (ctob/add-set (ctob/make-token-set :id (thi/new-id! :set-active) + :name "set-active")) + (ctob/add-set (ctob/make-token-set :id (thi/new-id! :set-inactive) + :name "set-inactive")) + ;; Add themes + (ctob/add-theme (ctob/make-token-theme :id (thi/new-id! :theme-active) + :name "theme-active" + :group "group-1" + :sets #{"set-active"})) + (ctob/add-theme (ctob/make-token-theme :id (thi/new-id! :theme-inactive) + :name "theme-inactive" + :group "group-1" + :sets #{"set-inactive"})))) + (tht/update-token-status + #(-> % + (ctos/activate-theme (thi/id :theme-active)) + (ctos/activate-set (thi/id :set-active)))))) + +(t/deftest test-token-status-active-inactive + (t/testing "lookup helpers and active checks" + (let [file (setup-file-with-tokens) + state {:current-file-id (:id file) + :current-page-id (thf/current-page-id file) + :files {(:id file) file}} + token-status (dsh/lookup-token-status state)] + + ;; Theme lookup via token-status + (t/is (ctos/theme-active? token-status (thi/id :theme-active)) + "active theme should be active via status") + (t/is (not (ctos/theme-active? token-status (thi/id :theme-inactive))) + "inactive theme should be inactive via status") + + ;; Set lookup via token-status + (t/is (ctos/set-active? token-status (thi/id :set-active)) + "active set should be active via status") + (t/is (not (ctos/set-active? token-status (thi/id :set-inactive))) + "inactive set should be inactive via status")))) +