johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-11 22:14:05 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

🔧 Modify token sets by id instead of name and review usage

Browse Source
This commit is contained in:
Andrés Moya
2025-08-22 10:36:17 +02:00
committed by Andrés Moya
parent 03e05da41e
commit d76a5c615c
25 changed files with 519 additions and 558 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/src/app/main/data/workspace/tokens/library_edit.cljs
View File

@@ -24,7 +24,6 @@
[beicon.v2.core :as rx]
[potok.v2.core :as ptk]))
(declare set-selected-token-set-name)
(declare set-selected-token-set-id)
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -110,9 +109,9 @@
(ptk/reify ::toggle-token-theme-active?
ptk/WatchEvent
(watch [it state _]
(let [tokens-lib (get-tokens-lib state)
prev-active-token-themes (some-> tokens-lib
(ctob/get-active-theme-paths))
(let [data (dsh/lookup-file-data state)
tokens-lib (get-tokens-lib state)
active-token-themes (some-> tokens-lib
(ctob/toggle-theme-active? group name)
(ctob/get-active-theme-paths))
@@ -120,7 +119,8 @@
active-token-themes
(disj active-token-themes ctob/hidden-theme-path))
changes (-> (pcb/empty-changes it)
(pcb/update-active-token-themes active-token-themes' prev-active-token-themes))]
(pcb/with-library-data data)
(pcb/update-active-token-themes active-token-themes'))]
(rx/of
(dch/commit-changes changes)
(dwtp/propagate-workspace-tokens))))))
@@ -158,9 +158,8 @@
(let [token-set (ctob/make-token-set :name set-name)
changes (-> (pcb/empty-changes it)
(pcb/with-library-data data)
(pcb/set-token-set (ctob/get-id token-set) false token-set))]
(rx/of (set-selected-token-set-name set-name)
(set-selected-token-set-id (ctob/get-id token-set))
(pcb/set-token-set (ctob/get-id token-set) token-set))]
(rx/of (set-selected-token-set-id (ctob/get-id token-set))
(dch/commit-changes changes))))))))
(defn rename-token-set-group [set-group-path set-group-fname]
@@ -189,12 +188,11 @@
(let [changes (-> (pcb/empty-changes it)
(pcb/with-library-data data)
(pcb/rename-token-set (ctob/get-id token-set) name))]
(rx/of (set-selected-token-set-name name)
(set-selected-token-set-id (ctob/get-id token-set))
(rx/of (set-selected-token-set-id (ctob/get-id token-set))
(dch/commit-changes changes))))))))
(defn duplicate-token-set
[id is-group]
[id]
(ptk/reify ::duplicate-token-set
ptk/WatchEvent
(watch [it state _]
@@ -205,9 +203,8 @@
(when-let [token-set (ctob/duplicate-set id tokens-lib {:suffix suffix})]
(let [changes (-> (pcb/empty-changes it)
(pcb/with-library-data data)
(pcb/set-token-set (ctob/get-id token-set) is-group token-set))]
(rx/of (set-selected-token-set-name (ctob/get-name token-set))
(set-selected-token-set-id (ctob/get-id token-set))
(pcb/set-token-set (ctob/get-id token-set) token-set))]
(rx/of (set-selected-token-set-id (ctob/get-id token-set))
(dch/commit-changes changes))))))))
(defn toggle-token-set
@@ -248,16 +245,27 @@
(rx/of (dch/commit-changes changes)
(dwtp/propagate-workspace-tokens))))))
(defn delete-token-set-path
[group? path]
(ptk/reify ::delete-token-set-path
(defn delete-token-set
[id]
(ptk/reify ::delete-token-set
ptk/WatchEvent
(watch [it state _]
(prn "path" path)
(let [data (dsh/lookup-file-data state)
changes (-> (pcb/empty-changes it)
(pcb/with-library-data data)
(pcb/set-token-set (ctob/join-set-path path) group? nil))]
(pcb/set-token-set id nil))]
(rx/of (dch/commit-changes changes)
(dwtp/propagate-workspace-tokens))))))
(defn delete-token-set-group
[path]
(ptk/reify ::delete-token-set-group
ptk/WatchEvent
(watch [it state _]
(let [data (dsh/lookup-file-data state)
changes (-> (pcb/empty-changes it)
(pcb/with-library-data data)
(clt/generate-delete-token-set-group (get-tokens-lib state) path))]
(rx/of (dch/commit-changes changes)
(dwtp/propagate-workspace-tokens))))))
@@ -332,13 +340,12 @@
changes
(-> (pcb/empty-changes)
(pcb/with-library-data data)
(pcb/set-token-set set-name false token-set)
(pcb/set-token-set set-name token-set)
(pcb/set-token-theme (:group hidden-theme)
(:name hidden-theme)
hidden-theme-with-set)
(pcb/update-active-token-themes #{ctob/hidden-theme-path} #{}))]
(pcb/update-active-token-themes #{ctob/hidden-theme-path}))]
(rx/of (dch/commit-changes changes)
(set-selected-token-set-name set-name)
(set-selected-token-set-id (ctob/get-id token-set)))))))
(defn create-token
@@ -352,7 +359,7 @@
token-type (:type token)
changes (-> (pcb/empty-changes it)
(pcb/with-library-data data)
(pcb/set-token (ctob/get-name token-set)
(pcb/set-token (ctob/get-id token-set)
(:id token)
token))]
@@ -377,15 +384,15 @@
token-type (:type token)
changes (-> (pcb/empty-changes it)
(pcb/with-library-data data)
(pcb/set-token (ctob/get-name token-set)
(pcb/set-token (ctob/get-id token-set)
id
token'))]
(rx/of (dch/commit-changes changes)
(ptk/data-event ::ev/event {::ev/name "edit-token" :type token-type}))))))
(defn delete-token
[set-name token-id]
(dm/assert! (string? set-name))
[set-id token-id]
(dm/assert! (uuid? set-id))
(dm/assert! (uuid? token-id))
(ptk/reify ::delete-token
ptk/WatchEvent
@@ -393,7 +400,7 @@
(let [data (dsh/lookup-file-data state)
changes (-> (pcb/empty-changes it)
(pcb/with-library-data data)
(pcb/set-token set-name token-id nil))]
(pcb/set-token set-id token-id nil))]
(rx/of (dch/commit-changes changes))))))
(defn duplicate-token
@@ -453,13 +460,6 @@
(update state :workspace-tokens assoc :token-set-context-menu params)
(update state :workspace-tokens dissoc :token-set-context-menu)))))
(defn set-selected-token-set-name ;; TODO: remove this when all functions use set-id
[name]
(ptk/reify ::set-selected-token-set-name
ptk/UpdateEvent
(update [_ state]
(update state :workspace-tokens assoc :selected-token-set-name name))))
(defn set-selected-token-set-id
[id]
(ptk/reify ::set-selected-token-set-id
@@ -469,7 +469,8 @@
(defn start-token-set-edition
[edition-id]
(assert (string? edition-id) "expected a string for `edition-id`")
;; Path string for edition of a group, UUID for edition of a set.
(assert (or (string? edition-id) (uuid? edition-id)) "expected a string or uuid for `edition-id`")
(ptk/reify ::start-token-set-edition
ptk/UpdateEvent

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

@@ -459,9 +459,6 @@
(def workspace-token-themes-no-hidden
(l/derived #(remove ctob/hidden-theme? %) workspace-token-themes))
(def selected-token-set-name ;; FIXME: remove this when all functions use set-id
(l/derived (l/key :selected-token-set-name) workspace-tokens))
(def selected-token-set-id
(l/derived (l/key :selected-token-set-id) workspace-tokens))

6
frontend/src/app/main/ui/workspace/tokens/management.cljs
View File

@@ -115,8 +115,7 @@
(mf/with-memo [tokens-by-type]
(get-sorted-token-groups tokens-by-type))]
;; (mf/with-effect [tokens-lib selected-token-set-id]
(mf/with-effect []
(mf/with-effect [tokens-lib selected-token-set-id]
(when (and tokens-lib
(or (nil? selected-token-set-id)
(and selected-token-set-id
@@ -124,8 +123,7 @@
(let [match (->> (ctob/get-sets tokens-lib)
(first))]
(when match
(st/emit! (dwtl/set-selected-token-set-name (ctob/get-name match))
(dwtl/set-selected-token-set-id (ctob/get-id match)))))))
(st/emit! (dwtl/set-selected-token-set-id (ctob/get-id match)))))))
[:*
[:& token-context-menu]

11
frontend/src/app/main/ui/workspace/tokens/management/context_menu.cljs
View File

@@ -12,7 +12,6 @@
[app.common.files.tokens :as cft]
[app.common.types.shape.layout :as ctsl]
[app.common.types.token :as ctt]
[app.common.types.tokens-lib :as ctob]
[app.main.data.modal :as modal]
[app.main.data.workspace.shape-layout :as dwsl]
[app.main.data.workspace.tokens.application :as dwta]
@@ -318,7 +317,7 @@
(generic-attribute-actions #{:y} "Y" (assoc context-data :on-update-shape dwta/update-shape-position)))
(clean-separators)))}))
(defn default-actions [{:keys [token selected-token-set-name]}]
(defn default-actions [{:keys [token selected-token-set-id]}]
(let [{:keys [modal]} (dwta/get-token-properties token)]
[{:title (tr "workspace.tokens.edit")
:no-selectable true
@@ -331,7 +330,7 @@
:position :right
:fields fields
:action "edit"
:selected-token-set-name selected-token-set-name
:selected-token-set-id selected-token-set-id
:token token}))))}
{:title (tr "workspace.tokens.duplicate")
:no-selectable true
@@ -339,7 +338,7 @@
{:title (tr "workspace.tokens.delete")
:no-selectable true
:action #(st/emit! (dwtl/delete-token
(ctob/prefixed-set-path-string->set-name-string selected-token-set-name)
selected-token-set-id
(:id token)))}]))
(defn- allowed-shape-attributes [shapes]
@@ -472,7 +471,7 @@
token-id (:token-id mdata)
token (mf/deref (refs/workspace-token-in-selected-set token-id))
token-type (:type token)
selected-token-set-name (mf/deref refs/selected-token-set-name)
selected-token-set-id (mf/deref refs/selected-token-set-id)
selected-shapes
(mf/with-memo [selected objects]
@@ -487,7 +486,7 @@
[:& menu-tree {:submenu-offset width
:token token
:errors errors
:selected-token-set-name selected-token-set-name
:selected-token-set-id selected-token-set-id
:selected-shapes selected-shapes
:is-selected-inside-layout is-selected-inside-layout}]]))

8
frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs
View File

@@ -279,7 +279,7 @@ custom-input-token-value: Custom component for editing/displaying the token valu
custom-input-token-value-props: Custom props passed to the custom-input-token-value merged with the default props"
[{:keys [token
token-type
selected-token-set-name
selected-token-set-id
action
input-value-placeholder
@@ -493,13 +493,11 @@ custom-input-token-value-props: Custom props passed to the custom-input-token-va
on-delete-token
(mf/use-fn
(mf/deps selected-token-set-name)
(mf/deps selected-token-set-id)
(fn [e]
(dom/prevent-default e)
(modal/hide!)
(st/emit! (dwtl/delete-token
(ctob/prefixed-set-path-string->set-name-string selected-token-set-name)
(:id token)))))
(st/emit! (dwtl/delete-token selected-token-set-id (:id token)))))
on-cancel
(mf/use-fn

4
frontend/src/app/main/ui/workspace/tokens/management/create/modals.cljs
View File

@@ -68,7 +68,7 @@
(mf/defc token-update-create-modal
{::mf/wrap-props false}
[{:keys [x y position token token-type action selected-token-set-name] :as _args}]
[{:keys [x y position token token-type action selected-token-set-id] :as _args}]
(let [wrapper-style (use-viewport-position-style x y position (= token-type :color))
modal-size-large* (mf/use-state (= token-type :typography))
modal-size-large? (deref modal-size-large*)
@@ -90,7 +90,7 @@
:aria-label (tr "labels.close")}]
[:> form-wrapper* {:token token
:action action
:selected-token-set-name selected-token-set-name
:selected-token-set-id selected-token-set-id
:token-type token-type
:on-display-colorpicker update-modal-size}]]))

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

@@ -15,9 +15,8 @@
[app.main.ui.workspace.tokens.sets.lists :refer [controlled-sets-list*]]
[rumext.v2 :as mf]))
(defn- on-select-token-set-click [id name]
(st/emit! (dwtl/set-selected-token-set-id id)
(dwtl/set-selected-token-set-name name)))
(defn- on-select-token-set-click [id]
(st/emit! (dwtl/set-selected-token-set-id id)))
(defn- on-toggle-token-set-click [name]
(st/emit! (dwtl/toggle-token-set name)))

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

@@ -34,7 +34,7 @@
(mf/defc menu*
{::mf/private true}
[{:keys [is-group id edition-id path]}]
[{:keys [is-group id path]}]
(let [create-set-at-path
(mf/use-fn (mf/deps path) #(st/emit! (dwtl/start-token-set-creation path)))
@@ -42,18 +42,20 @@
(mf/use-fn
(mf/deps id)
(fn []
(st/emit! (dwtl/start-token-set-edition edition-id))))
(st/emit! (dwtl/start-token-set-edition id))))
on-duplicate
(mf/use-fn
(mf/deps is-group id)
(fn []
(st/emit! (dwtl/duplicate-token-set id is-group))))
(st/emit! (dwtl/duplicate-token-set id))))
on-delete
(mf/use-fn
(mf/deps is-group path)
#(st/emit! (dwtl/delete-token-set-path is-group path)))]
(if is-group
#(st/emit! (dwtl/delete-token-set-group path))
#(st/emit! (dwtl/delete-token-set id))))]
[:ul {:class (stl/css :context-list)}
(when is-group
@@ -65,7 +67,7 @@
(mf/defc token-set-context-menu*
[]
(let [{:keys [position is-group id edition-id path]}
(let [{:keys [position is-group id path]}
(mf/deref ref:token-sets-context-menu)
position-top
@@ -86,5 +88,4 @@
:on-context-menu prevent-default}
[:> menu* {:is-group is-group
:id id
:edition-id edition-id
:path path}]]]))

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

@@ -32,5 +32,3 @@
(st/emit! (ptk/data-event ::ev/event {::ev/name "create-token-set" :name name})
(dwtl/create-token-set name))))

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

@@ -30,12 +30,6 @@
[]
(st/emit! (dwtl/start-token-set-creation [])))
(defn- group-edition-id
"Prefix editing groups `edition-id` so it can be differentiated from sets with the same id."
[edition-id]
(str "group-" edition-id))
(mf/defc editing-label*
{::mf/private true}
[{:keys [default-value on-cancel on-submit]}]
@@ -113,8 +107,8 @@
(mf/defc sets-tree-set-group*
{::mf/private true}
[{:keys [id label tree-depth tree-path is-active is-selected is-draggable is-collapsed tree-index on-drop
on-toggle-collapse on-toggle is-editing on-start-edition on-reset-edition on-edit-submit]}]
[{:keys [id label is-editing is-active is-selected is-draggable is-collapsed path depth index
on-toggle on-drop on-start-edition on-reset-edition on-edit-submit on-toggle-collapse]}]
(let [can-edit?
(mf/use-ctx ctx/can-edit?)
@@ -124,7 +118,7 @@
on-context-menu
(mf/use-fn
(mf/deps is-editing id tree-path can-edit?)
(mf/deps is-editing id path can-edit?)
(fn [event]
(dom/prevent-default event)
(dom/stop-propagation event)
@@ -133,47 +127,46 @@
{:position (dom/get-client-position event)
:is-group true
:id id
:edition-id (group-edition-id id)
:path tree-path})))))
:path path})))))
on-collapse-click
(mf/use-fn
(fn [event]
(dom/prevent-default event)
(dom/stop-propagation event)
(on-toggle-collapse tree-path)))
(on-toggle-collapse path)))
on-double-click
(mf/use-fn (mf/deps id) #(on-start-edition (group-edition-id id)))
(mf/use-fn (mf/deps id) #(on-start-edition id))
on-checkbox-click
(mf/use-fn
(mf/deps on-toggle tree-path can-edit?)
#(on-toggle tree-path))
(mf/deps on-toggle path can-edit?)
#(on-toggle path))
on-edit-submit'
(mf/use-fn
(mf/deps tree-path on-edit-submit can-edit?)
#(on-edit-submit tree-path %))
(mf/deps path on-edit-submit can-edit?)
#(on-edit-submit path %))
on-drop
(mf/use-fn
(mf/deps tree-index on-drop)
(mf/deps index on-drop)
(fn [position data]
(on-drop tree-index position data)))
(on-drop index position data)))
[dprops dref]
(h/use-sortable
:data-type "penpot/token-set"
:on-drop on-drop
:data {:index tree-index
:data {:index index
:is-group true}
:detect-center? true
:draggable? is-draggable)]
[:div {:ref dref
:data-testid "tokens-set-group-item"
:style {"--tree-depth" tree-depth}
:style {"--tree-depth" depth}
:class (stl/css-case :set-item-container true
:set-item-group true
:selected-set is-selected
@@ -211,25 +204,23 @@
:arial-label (tr "workspace.tokens.select-set")}]])]))
(mf/defc sets-tree-set*
[{:keys [id set label tree-depth tree-path tree-index is-selected is-active is-draggable is-editing
on-select on-drop on-toggle on-start-edition on-reset-edition on-edit-submit is-new]}]
[{:keys [id set label is-editing is-active is-selected is-draggable is-new path depth index
on-select on-toggle on-drop on-start-edition on-reset-edition on-edit-submit]}]
(let [set-id (ctob/get-id set)
set-name (ctob/get-name set)
can-edit? (mf/use-ctx ctx/can-edit?)
(let [can-edit? (mf/use-ctx ctx/can-edit?)
on-click
(mf/use-fn
(mf/deps is-editing tree-path)
(mf/deps is-editing on-select id)
(fn [event]
(dom/stop-propagation event)
(when-not is-editing
(when (fn? on-select)
(on-select set-id set-name)))))
(on-select id)))))
on-context-menu
(mf/use-fn
(mf/deps is-editing id tree-path can-edit?)
(mf/deps is-editing id path can-edit?)
(fn [event]
(dom/prevent-default event)
(dom/stop-propagation event)
@@ -238,8 +229,7 @@
{:position (dom/get-client-position event)
:is-group false
:id id
:edition-id id
:path tree-path})))))
:path path})))))
on-double-click
(mf/use-fn
@@ -250,11 +240,11 @@
on-checkbox-click
(mf/use-fn
(mf/deps set-name on-toggle)
(mf/deps id on-toggle)
(fn [event]
(dom/stop-propagation event)
(when (fn? on-toggle)
(on-toggle set-name))))
(on-toggle (ctob/get-name set)))))
on-edit-submit'
(mf/use-fn
@@ -263,23 +253,23 @@
on-drag
(mf/use-fn
(mf/deps tree-path)
(mf/deps path)
(fn [_]
(when-not is-selected
(on-select tree-path))))
(on-select path))))
on-drop
(mf/use-fn
(mf/deps tree-index on-drop)
(mf/deps index on-drop)
(fn [position data]
(on-drop tree-index position data)))
(on-drop index position data)))
[dprops dref]
(h/use-sortable
:data-type "penpot/token-set"
:on-drag on-drag
:on-drop on-drop
:data {:index tree-index
:data {:index index
:is-group false}
:draggable? is-draggable)
@@ -290,7 +280,7 @@
:role "button"
:data-testid "tokens-set-item"
:id (str "token-set-item-" (str/join "/" tree-path))
:style {"--tree-depth" tree-depth}
:style {"--tree-depth" depth}
:class (stl/css-case :set-item-container true
:selected-set is-selected
:dnd-over (= drop-over :center)
@@ -304,7 +294,7 @@
[:> icon*
{:icon-id i/document
:class (stl/css-case :icon true
:root-icon (not tree-depth))}]
:root-icon (not depth))}]
(if is-editing
[:> editing-label*
{:default-value label
@@ -346,9 +336,9 @@
on-drop
(mf/use-fn
(mf/deps collapsed-paths)
(fn [tree-index position data]
(fn [index position data]
(let [params {:from-index (:index data)
:to-index tree-index
:to-index index
:position position
:collapsed-paths collapsed-paths}]
(if (:is-group data)
@@ -372,76 +362,76 @@
(fn []
(rx/dispose! sub))))
(for [{:keys [id token-set index is-new is-group path parent-path depth] :as node}
(for [{:keys [token-set id index is-new is-group path parent-path depth] :as node}
(ctob/sets-tree-seq token-sets
{:skip-children-pred collapsed?
:new-at-path new-path})]
(cond
^boolean is-group
[:> sets-tree-set-group*
{:key index
:label (peek path)
:id id
:is-active (is-token-set-group-active path)
:is-selected false
:is-draggable is-draggable
:is-editing (= edition-id (group-edition-id id))
:is-collapsed (collapsed? path)
:on-select on-select
(do
(cond
^boolean is-group
[:> sets-tree-set-group*
{:key index
:id id
:label (peek path)
:is-editing (= edition-id id)
:is-active (is-token-set-group-active path)
:is-selected false
:is-draggable is-draggable
:is-collapsed (collapsed? path)
:tree-path path
:tree-depth depth
:tree-index index
:tree-parent-path parent-path
:path path
:depth depth
:index index
:on-drop on-drop
:on-start-edition on-start-edition
:on-reset-edition on-reset-edition
:on-edit-submit on-edit-submit-group
:on-toggle-collapse on-toggle-collapse
:on-toggle on-toggle-set-group}]
:on-toggle on-toggle-set-group
:on-drop on-drop
:on-start-edition on-start-edition
:on-reset-edition on-reset-edition
:on-edit-submit on-edit-submit-group
:on-toggle-collapse on-toggle-collapse}]
^boolean is-new
[:> sets-tree-set*
{:key index
:set token-set
:label ""
:id id
:is-editing true
:is-active true
:is-selected true
:is-new true
:tree-path path
:tree-depth depth
:tree-index index
:tree-parent-path parent-path
^boolean is-new
[:> sets-tree-set*
{:key index
:id id
:set token-set
:label ""
:is-editing true
:is-active true
:is-selected true
:is-draggable false
:is-new true
:on-drop on-drop
:on-reset-edition on-reset-edition
:on-edit-submit sets-helpers/on-create-token-set}]
:path path
:depth depth
:index index
:else
[:> sets-tree-set*
{:key index
:set token-set
:id id
:label (peek path)
:is-editing (= edition-id id)
:is-active (is-token-set-active id)
:is-selected (= selected id)
:is-draggable is-draggable
:on-select on-select
:tree-path path
:tree-depth depth
:tree-index index
:is-new false
:tree-parent-path parent-path
:on-toggle on-toggle-set
:edition-id edition-id
:on-start-edition on-start-edition
:on-drop on-drop
:on-reset-edition on-reset-edition
:on-edit-submit on-edit-submit-set}]))))
:on-drop on-drop
:on-reset-edition on-reset-edition
:on-edit-submit sets-helpers/on-create-token-set}]
:else
[:> sets-tree-set*
{:key index
:id id
:set token-set
:label (peek path)
:is-editing (= edition-id id)
:is-active (is-token-set-active (ctob/get-name token-set))
:is-selected (= selected id)
:is-draggable is-draggable
:is-new false
:path path
:depth depth
:index index
:on-select on-select
:on-toggle on-toggle-set
:on-drop on-drop
:on-start-edition on-start-edition
:on-reset-edition on-reset-edition
:on-edit-submit on-edit-submit-set}])))))
(mf/defc controlled-sets-list*
[{:keys [token-sets

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

@@ -35,13 +35,8 @@
(mf/defc token-sets-list*
{::mf/private true}
[{:keys [tokens-lib]}]
(let [;; FIXME: This is an inneficient operation just for being
;; ability to check if there are some sets and lookup the
;; first one when no set is selected, should be REFACTORED; is
;; inneficient because instead of return the sets as-is (tree)
;; it firstly makes it a plain seq from tree.
token-sets
(some-> tokens-lib (ctob/get-sets))
(let [token-sets
(some-> tokens-lib (ctob/get-set-tree))
selected-token-set-id
(mf/deref refs/selected-token-set-id)

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

@@ -318,9 +318,8 @@
on-click-token-set
(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)]
(on-toggle-token-set set-name))))]
(fn [set-id]
(on-toggle-token-set set-id)))]
[:div {:class (stl/css :themes-modal-wrapper)}
[:> heading* {:level 2 :typography "headline-medium" :class (stl/css :themes-modal-title)}

20
frontend/test/frontend_tests/logic/components_and_tokens.cljs
View File

@@ -39,17 +39,17 @@
(ctob/add-theme (ctob/make-token-theme :name "test-theme"
:sets #{"test-token-set"}))
(ctob/set-active-themes #{"/test-theme"})
(ctob/add-token-in-set "test-token-set"
(ctob/add-token-in-set (cthi/id :test-token-set)
(ctob/make-token :id (cthi/new-id! :test-token-1)
:name "test-token-1"
:type :border-radius
:value 25))
(ctob/add-token-in-set "test-token-set"
(ctob/add-token-in-set (cthi/id :test-token-set)
(ctob/make-token :id (cthi/new-id! :test-token-2)
:name "test-token-2"
:type :border-radius
:value 50))
(ctob/add-token-in-set "test-token-set"
(ctob/add-token-in-set (cthi/id :test-token-set)
(ctob/make-token :id (cthi/new-id! :test-token-3)
:name "test-token-3"
:type :border-radius
@@ -208,7 +208,6 @@
;; ==== Action
events [(dwtl/set-selected-token-set-id (cthi/id :test-token-set))
(dwtl/set-selected-token-set-name "test-token-set")
(dwtl/update-token (cthi/id :test-token-1)
{:name "test-token-1"
:type :border-radius
@@ -328,32 +327,32 @@
(ctob/add-theme (ctob/make-token-theme :name "test-theme"
:sets #{"test-token-set"}))
(ctob/set-active-themes #{"/test-theme"})
(ctob/add-token-in-set "test-token-set"
(ctob/add-token-in-set (cthi/id :test-token-set)
(ctob/make-token :id (cthi/new-id! :token-radius)
:name "token-radius"
:type :border-radius
:value 10))
(ctob/add-token-in-set "test-token-set"
(ctob/add-token-in-set (cthi/id :test-token-set)
(ctob/make-token :id (cthi/new-id! :token-rotation)
:name "token-rotation"
:type :rotation
:value 30))
(ctob/add-token-in-set "test-token-set"
(ctob/add-token-in-set (cthi/id :test-token-set)
(ctob/make-token :id (cthi/new-id! :token-opacity)
:name "token-opacity"
:type :opacity
:value 0.7))
(ctob/add-token-in-set "test-token-set"
(ctob/add-token-in-set (cthi/id :test-token-set)
(ctob/make-token :id (cthi/new-id! :token-stroke-width)
:name "token-stroke-width"
:type :stroke-width
:value 2))
(ctob/add-token-in-set "test-token-set"
(ctob/add-token-in-set (cthi/id :test-token-set)
(ctob/make-token :id (cthi/new-id! :token-color)
:name "token-color"
:type :color
:value "#00ff00"))
(ctob/add-token-in-set "test-token-set"
(ctob/add-token-in-set (cthi/id :test-token-set)
(ctob/make-token :id (cthi/new-id! :token-dimensions)
:name "token-dimensions"
:type :dimensions
@@ -372,7 +371,6 @@
;; ==== Action
events [(dwtl/set-selected-token-set-id (cthi/id :test-token-set))
(dwtl/set-selected-token-set-name "test-token-set")
(dwtl/update-token (cthi/id :token-radius)
{:name "token-radius"
:value 30})

17
frontend/test/frontend_tests/tokens/context_menu_test.cljs
View File

@@ -2,6 +2,7 @@
(:require
[app.common.test-helpers.compositions :as tho]
[app.common.test-helpers.files :as thf]
[app.common.test-helpers.ids-map :as thi]
[app.common.test-helpers.shapes :as ths]
[app.common.test-helpers.tokens :as tht]
[app.common.types.tokens-lib :as ctob]
@@ -16,35 +17,35 @@
(ctob/add-theme (ctob/make-token-theme :name "test-theme"
:sets #{"test-token-set"}))
(ctob/set-active-themes #{"/test-theme"})
(ctob/add-token-in-set "test-token-set"
(ctob/add-token-in-set (thi/id :test-token-set)
(ctob/make-token :name "token-radius"
:type :border-radius
:value 10))
(ctob/add-token-in-set "test-token-set"
(ctob/add-token-in-set (thi/id :test-token-set)
(ctob/make-token :name "token-color"
:type :color
:value "red"))
(ctob/add-token-in-set "test-token-set"
(ctob/add-token-in-set (thi/id :test-token-set)
(ctob/make-token :name "token-spacing"
:type :spacing
:value 10))
(ctob/add-token-in-set "test-token-set"
(ctob/add-token-in-set (thi/id :test-token-set)
(ctob/make-token :name "token-sizing"
:type :sizing
:value 10))
(ctob/add-token-in-set "test-token-set"
(ctob/add-token-in-set (thi/id :test-token-set)
(ctob/make-token :name "token-rotation"
:type :rotation
:value 10))
(ctob/add-token-in-set "test-token-set"
(ctob/add-token-in-set (thi/id :test-token-set)
(ctob/make-token :name "token-opacity"
:type :opacity
:value 10))
(ctob/add-token-in-set "test-token-set"
(ctob/add-token-in-set (thi/id :test-token-set)
(ctob/make-token :name "token-dimensions"
:type :dimensions
:value 10))
(ctob/add-token-in-set "test-token-set"
(ctob/add-token-in-set (thi/id :test-token-set)
(ctob/make-token :name "token-number"
:type :number
:value 10))))

95
frontend/test/frontend_tests/tokens/logic/token_actions_test.cljs
View File

@@ -47,9 +47,12 @@
(-> (ctob/make-tokens-lib)
(ctob/add-theme (ctob/make-token-theme :name "Theme A" :sets #{"Set A"}))
(ctob/set-active-themes #{"/Theme A"})
(ctob/add-set (ctob/make-token-set :name "Set A"))
(ctob/add-token-in-set "Set A" (ctob/make-token border-radius-token))
(ctob/add-token-in-set "Set A" (ctob/make-token reference-border-radius-token))))))
(ctob/add-set (ctob/make-token-set :id (cthi/new-id! :set-a)
:name "Set A"))
(ctob/add-token-in-set (cthi/id :set-a)
(ctob/make-token border-radius-token))
(ctob/add-token-in-set (cthi/id :set-a)
(ctob/make-token reference-border-radius-token))))))
(t/deftest test-apply-token
(t/testing "applies token to shape and updates shape attributes to resolved value"
@@ -190,8 +193,10 @@
file (-> (setup-file-with-tokens)
(update-in [:data :tokens-lib]
#(-> %
(ctob/add-token-in-set "Set A" (ctob/make-token color-token))
(ctob/add-token-in-set "Set A" (ctob/make-token color-alpha-token)))))
(ctob/add-token-in-set (cthi/id :set-a)
(ctob/make-token color-token))
(ctob/add-token-in-set (cthi/id :set-a)
(ctob/make-token color-alpha-token)))))
store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1)
rect-2 (cths/get-shape file :rect-2)
@@ -248,7 +253,8 @@
:type :dimensions}
file (-> (setup-file-with-tokens)
(update-in [:data :tokens-lib]
#(ctob/add-token-in-set % "Set A" (ctob/make-token dimensions-token))))
#(ctob/add-token-in-set % (cthi/id :set-a)
(ctob/make-token dimensions-token))))
store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1)
events [(dwta/apply-token {:shape-ids [(:id rect-1)]
@@ -280,7 +286,8 @@
(ctho/add-frame :frame-1)
(ctho/add-frame :frame-2 {:layout :grid})
(update-in [:data :tokens-lib]
#(ctob/add-token-in-set % "Set A" (ctob/make-token spacing-token))))
#(ctob/add-token-in-set % (cthi/id :set-a)
(ctob/make-token spacing-token))))
store (ths/setup-store file)
frame-1 (cths/get-shape file :frame-1)
frame-2 (cths/get-shape file :frame-2)
@@ -319,7 +326,8 @@
:type :sizing}
file (-> (setup-file-with-tokens)
(update-in [:data :tokens-lib]
#(ctob/add-token-in-set % "Set A" (ctob/make-token sizing-token))))
#(ctob/add-token-in-set % (cthi/id :set-a)
(ctob/make-token sizing-token))))
store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1)
events [(dwta/apply-token {:shape-ids [(:id rect-1)]
@@ -356,9 +364,12 @@
file (-> (setup-file-with-tokens)
(update-in [:data :tokens-lib]
#(-> %
(ctob/add-token-in-set "Set A" (ctob/make-token opacity-float))
(ctob/add-token-in-set "Set A" (ctob/make-token opacity-percent))
(ctob/add-token-in-set "Set A" (ctob/make-token opacity-invalid)))))
(ctob/add-token-in-set (cthi/id :set-a)
(ctob/make-token opacity-float))
(ctob/add-token-in-set (cthi/id :set-a)
(ctob/make-token opacity-percent))
(ctob/add-token-in-set (cthi/id :set-a)
(ctob/make-token opacity-invalid)))))
store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1)
rect-2 (cths/get-shape file :rect-2)
@@ -404,7 +415,8 @@
:type :rotation}
file (-> (setup-file-with-tokens)
(update-in [:data :tokens-lib]
#(ctob/add-token-in-set % "Set A" (ctob/make-token rotation-token))))
#(ctob/add-token-in-set % (cthi/id :set-a)
(ctob/make-token rotation-token))))
store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1)
events [(dwta/apply-token {:shape-ids [(:id rect-1)]
@@ -434,7 +446,8 @@
:stroke-opacity 1,
:stroke-width 5}]}})
(update-in [:data :tokens-lib]
#(ctob/add-token-in-set % "Set A" (ctob/make-token stroke-width-token))))
#(ctob/add-token-in-set % (cthi/id :set-a)
(ctob/make-token stroke-width-token))))
store (ths/setup-store file)
rect-with-stroke (cths/get-shape file :rect-1)
rect-without-stroke (cths/get-shape file :rect-2)
@@ -465,7 +478,8 @@
:type :font-size}
file (-> (setup-file-with-tokens)
(update-in [:data :tokens-lib]
#(ctob/add-token-in-set % "Set A" (ctob/make-token font-size-token))))
#(ctob/add-token-in-set % (cthi/id :set-a)
(ctob/make-token font-size-token))))
store (ths/setup-store file)
text-1 (cths/get-shape file :text-1)
events [(dwta/apply-token {:shape-ids [(:id text-1)]
@@ -499,7 +513,8 @@
:type :number}
file (-> (setup-file-with-tokens)
(update-in [:data :tokens-lib]
#(ctob/add-token-in-set % "Set A" (ctob/make-token line-height-token))))
#(ctob/add-token-in-set % (cthi/id :set-a)
(ctob/make-token line-height-token))))
store (ths/setup-store file)
text-1 (cths/get-shape file :text-1)
events [(dwta/apply-token {:shape-ids [(:id text-1)]
@@ -533,7 +548,8 @@
:type :letter-spacing}
file (-> (setup-file-with-tokens)
(update-in [:data :tokens-lib]
#(ctob/add-token-in-set % "Set A" (ctob/make-token letter-spacing-token))))
#(ctob/add-token-in-set % (cthi/id :set-a)
(ctob/make-token letter-spacing-token))))
store (ths/setup-store file)
text-1 (cths/get-shape file :text-1)
events [(dwta/apply-token {:shape-ids [(:id text-1)]
@@ -567,7 +583,8 @@
:type :font-family}
file (-> (setup-file-with-tokens)
(update-in [:data :tokens-lib]
#(ctob/add-token-in-set % "Set A" (ctob/make-token font-family-token))))
#(ctob/add-token-in-set % (cthi/id :set-a)
(ctob/make-token font-family-token))))
store (ths/setup-store file)
text-1 (cths/get-shape file :text-1)
events [(dwta/apply-token {:shape-ids [(:id text-1)]
@@ -601,7 +618,8 @@
:type :text-case}
file (-> (setup-file-with-tokens)
(update-in [:data :tokens-lib]
#(ctob/add-token-in-set % "Set A" (ctob/make-token text-case-token))))
#(ctob/add-token-in-set % (cthi/id :set-a)
(ctob/make-token text-case-token))))
store (ths/setup-store file)
text-1 (cths/get-shape file :text-1)
events [(dwta/apply-token {:shape-ids [(:id text-1)]
@@ -635,7 +653,8 @@
:type :text-decoration}
file (-> (setup-file-with-tokens)
(update-in [:data :tokens-lib]
#(ctob/add-token-in-set % "Set A" (ctob/make-token text-decoration-token))))
#(ctob/add-token-in-set % (cthi/id :set-a)
(ctob/make-token text-decoration-token))))
store (ths/setup-store file)
text-1 (cths/get-shape file :text-1)
events [(dwta/apply-token {:shape-ids [(:id text-1)]
@@ -669,7 +688,8 @@
:type :font-weight}
file (-> (setup-file-with-tokens)
(update-in [:data :tokens-lib]
#(ctob/add-token-in-set % "Set A" (ctob/make-token font-weight-token))))
#(ctob/add-token-in-set % (cthi/id :set-a)
(ctob/make-token font-weight-token))))
store (ths/setup-store file)
text-1 (cths/get-shape file :text-1)
events [(dwta/apply-token {:shape-ids [(:id text-1)]
@@ -795,7 +815,8 @@
{:frame-params {:layout :grid}})
(ctho/add-rect :rect-regular)
(update-in [:data :tokens-lib]
#(ctob/add-token-in-set % "Set A" (ctob/make-token spacing-token))))
#(ctob/add-token-in-set % (cthi/id :set-a)
(ctob/make-token spacing-token))))
store (ths/setup-store file)
frame-layout (cths/get-shape file :frame-layout)
rect-in-layout (cths/get-shape file :rect-in-layout)
@@ -838,7 +859,8 @@
file (setup-file-with-tokens)
file (-> file
(update-in [:data :tokens-lib]
#(ctob/add-token-in-set % "Set A" (ctob/make-token color-token)))
#(ctob/add-token-in-set % (cthi/id :set-a)
(ctob/make-token color-token)))
(cths/add-sample-library-color :color1 {:name "Test color"
:color "#abcdef"})
(cths/update-shape :rect-1 :fills
@@ -882,9 +904,9 @@
file (-> (setup-file-with-tokens)
(update-in [:data :tokens-lib]
#(-> %
(ctob/add-token-in-set "Set A" (ctob/make-token font-size-token))
(ctob/add-token-in-set "Set A" (ctob/make-token font-family-token))
(ctob/add-token-in-set "Set A" (ctob/make-token typography-token)))))
(ctob/add-token-in-set (cthi/id :set-a) (ctob/make-token font-size-token))
(ctob/add-token-in-set (cthi/id :set-a) (ctob/make-token font-family-token))
(ctob/add-token-in-set (cthi/id :set-a) (ctob/make-token typography-token)))))
store (ths/setup-store file)
text-1 (cths/get-shape file :text-1)
events [(dwta/apply-token {:shape-ids [(:id text-1)]
@@ -932,9 +954,9 @@
file (-> (setup-file-with-tokens)
(update-in [:data :tokens-lib]
#(-> %
(ctob/add-token-in-set "Set A" (ctob/make-token font-size-token))
(ctob/add-token-in-set "Set A" (ctob/make-token font-family-token))
(ctob/add-token-in-set "Set A" (ctob/make-token typography-token)))))
(ctob/add-token-in-set (cthi/id :set-a) (ctob/make-token font-size-token))
(ctob/add-token-in-set (cthi/id :set-a) (ctob/make-token font-family-token))
(ctob/add-token-in-set (cthi/id :set-a) (ctob/make-token typography-token)))))
store (ths/setup-store file)
text-1 (cths/get-shape file :text-1)
events [(dwta/apply-token {:shape-ids [(:id text-1)]
@@ -973,8 +995,8 @@
file (-> (setup-file-with-tokens)
(update-in [:data :tokens-lib]
#(-> %
(ctob/add-token-in-set "Set A" (ctob/make-token font-size-token))
(ctob/add-token-in-set "Set A" (ctob/make-token typography-token)))))
(ctob/add-token-in-set (cthi/id :set-a) (ctob/make-token font-size-token))
(ctob/add-token-in-set (cthi/id :set-a) (ctob/make-token typography-token)))))
store (ths/setup-store file)
text-1 (cths/get-shape file :text-1)
events [(dwta/apply-token {:shape-ids [(:id text-1)]
@@ -1007,8 +1029,8 @@
file (-> (setup-file-with-tokens)
(update-in [:data :tokens-lib]
#(-> %
(ctob/add-token-in-set "Set A" (ctob/make-token font-size-token))
(ctob/add-token-in-set "Set A" (ctob/make-token typography-token)))))
(ctob/add-token-in-set (cthi/id :set-a) (ctob/make-token font-size-token))
(ctob/add-token-in-set (cthi/id :set-a) (ctob/make-token typography-token)))))
store (ths/setup-store file)
text-1 (cths/get-shape file :text-1)
events [(dwta/apply-token {:shape-ids [(:id text-1)]
@@ -1044,9 +1066,12 @@
file (-> (setup-file-with-tokens)
(update-in [:data :tokens-lib]
#(-> %
(ctob/add-token-in-set "Set A" (ctob/make-token font-size-token))
(ctob/add-token-in-set "Set A" (ctob/make-token line-height-token))
(ctob/add-token-in-set "Set A" (ctob/make-token letter-spacing-token))))
(ctob/add-token-in-set (cthi/id :set-a)
(ctob/make-token font-size-token))
(ctob/add-token-in-set (cthi/id :set-a)
(ctob/make-token line-height-token))
(ctob/add-token-in-set (cthi/id :set-a)
(ctob/make-token letter-spacing-token))))
(cths/add-sample-typography :typography1 {:name "Test typography"}))
content {:type "root"
:children [{:type "paragraph-set"

7
frontend/test/frontend_tests/tokens/logic/token_data_test.cljs
View File

@@ -9,6 +9,7 @@
[app.common.test-helpers.files :as cthf]
[app.common.test-helpers.ids-map :as cthi]
[app.common.types.tokens-lib :as ctob]
[app.common.uuid :as uuid]
[app.main.data.workspace.tokens.library-edit :as dwtl]
[cljs.test :as t :include-macros true]
[frontend-tests.helpers.pages :as thp]
@@ -76,7 +77,7 @@
done
(let [file (setup-file-with-token-lib)
store (ths/setup-store file)
events [(dwtl/duplicate-token-set (cthi/id :test-token-set) false)]]
events [(dwtl/duplicate-token-set (cthi/id :test-token-set))]]
(tohs/run-store-async
store done events
@@ -93,7 +94,7 @@
done
(let [file (setup-file-with-token-lib)
store (ths/setup-store file)
events [(dwtl/duplicate-token-set "Set B" false)]]
events [(dwtl/duplicate-token-set (uuid/next))]]
(tohs/run-store-async
store done events
@@ -110,7 +111,7 @@
done
(let [file (setup-file-with-token-lib)
store (ths/setup-store file)
events [(dwtl/delete-token-set-path (ctob/split-set-name "Set A") false)]]
events [(dwtl/delete-token-set (cthi/id :test-token-set))]]
(tohs/run-store-async
store done events

39
frontend/test/frontend_tests/tokens/style_dictionary_test.cljs
View File

@@ -6,6 +6,7 @@
(ns frontend-tests.tokens.style-dictionary-test
(:require
[app.common.test-helpers.ids-map :as cthi]
[app.common.types.tokens-lib :as ctob]
[app.main.data.style-dictionary :as sd]
[beicon.v2.core :as rx]
@@ -16,22 +17,28 @@
done
(t/testing "resolves tokens using style-dictionary from a ids map"
(let [tokens (-> (ctob/make-tokens-lib)
(ctob/add-set (ctob/make-token-set :name "core"))
(ctob/add-token-in-set "core" (ctob/make-token {:name "borderRadius.sm"
:value "12px"
:type :border-radius}))
(ctob/add-token-in-set "core" (ctob/make-token {:value "{borderRadius.sm} * 2"
:name "borderRadius.md-with-dashes"
:type :border-radius}))
(ctob/add-token-in-set "core" (ctob/make-token {:name "borderRadius.large"
:value "123456789012345"
:type :border-radius}))
(ctob/add-token-in-set "core" (ctob/make-token {:name "borderRadius.largePx"
:value "123456789012345px"
:type :border-radius}))
(ctob/add-token-in-set "core" (ctob/make-token {:name "borderRadius.largeFn"
:value "{borderRadius.sm} * 200000000"
:type :border-radius}))
(ctob/add-set (ctob/make-token-set :id (cthi/new-id! :core-set)
:name "core"))
(ctob/add-token-in-set (cthi/id :core-set)
(ctob/make-token {:name "borderRadius.sm"
:value "12px"
:type :border-radius}))
(ctob/add-token-in-set (cthi/id :core-set)
(ctob/make-token {:value "{borderRadius.sm} * 2"
:name "borderRadius.md-with-dashes"
:type :border-radius}))
(ctob/add-token-in-set (cthi/id :core-set)
(ctob/make-token {:name "borderRadius.large"
:value "123456789012345"
:type :border-radius}))
(ctob/add-token-in-set (cthi/id :core-set)
(ctob/make-token {:name "borderRadius.largePx"
:value "123456789012345px"
:type :border-radius}))
(ctob/add-token-in-set (cthi/id :core-set)
(ctob/make-token {:name "borderRadius.largeFn"
:value "{borderRadius.sm} * 200000000"
:type :border-radius}))
(ctob/get-all-tokens))]
(-> (sd/resolve-tokens tokens)
(rx/sub!