github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-06-16 04:12:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

🔧 Use token-status to show status in the left sidebar

Browse Source
This commit is contained in:
Andrés Moya 2026-06-08 21:01:16 +02:00
parent b70d4a2d4d
commit 5066096198
10 changed files with 124 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
common/src/app/common/test_helpers/tokens.cljc
View File

@ -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))]

5
frontend/src/app/main/data/helpers.cljs
View File

@ -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]))

3
frontend/src/app/main/refs.cljs
View File

@ -460,6 +460,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))

2
frontend/src/app/main/ui/context.cljs
View File

@ -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))

50
frontend/src/app/main/ui/workspace/sidebar.cljs
View File

@ -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)}]]]))

15
frontend/src/app/main/ui/workspace/tokens/sets.cljs
View File

@ -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

11
frontend/src/app/main/ui/workspace/tokens/sets/lists.cljs
View File

@ -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

21
frontend/src/app/main/ui/workspace/tokens/themes/create_modal.cljs
View File

@ -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*]]]]))

2
frontend/test/frontend_tests/runner.cljs
View File

@ -36,6 +36,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]
@ -84,6 +85,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

58
frontend/test/frontend_tests/tokens/token_status_test.cljs Normal file
View File

@ -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"))))