3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-23 21:56:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Simplify token creation mechanism

Browse source
This commit is contained in:
Andrey Antukh 2025-02-12 17:00:15 +01:00
parent aa867adbd3
commit f68b0117c4
3 changed files with 126 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

142
frontend/src/app/main/data/tokens.cljs
View file

@ -18,7 +18,6 @@
[app.main.data.helpers :as dsh] [app.main.data.helpers :as dsh]
[app.main.data.notifications :as ntf] [app.main.data.notifications :as ntf]
[app.main.data.workspace.shapes :as dwsh] [app.main.data.workspace.shapes :as dwsh]
[app.main.data.workspace.tokens.selected-set :as dwts]
[app.main.ui.workspace.tokens.update :as wtu] [app.main.ui.workspace.tokens.update :as wtu]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[beicon.v2.core :as rx] [beicon.v2.core :as rx]
@ -38,6 +37,14 @@
(-> (dsh/lookup-file-data state) (-> (dsh/lookup-file-data state)
(get :tokens-lib))) (get :tokens-lib)))
(defn lookup-token-set
([state]
(when-let [selected (dm/get-in state [:workspace-tokens :selected-token-set-name])]
(lookup-token-set state selected)))
([state name]
(some-> (get-tokens-lib state)
(ctob/get-set name))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Helpers ;; Helpers
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@ -233,49 +240,72 @@
(rx/of (rx/of
(drop-error (ex-data e)))))))) (drop-error (ex-data e))))))))
;; FIXME: the the name is very confusing (defn- create-token-with-set
(defn update-create-token "A special case when a first token is created and no set exists"
[{:keys [token prev-token-name]}] [token]
(ptk/reify ::update-create-token (ptk/reify ::create-token-and-set
ptk/WatchEvent
(watch [_ _ _]
(let [set-name "Global"
token-set
(-> (ctob/make-token-set :name set-name)
(ctob/add-token token))
hidden-theme
(ctob/make-hidden-token-theme :sets [set-name])
changes
(pcb/add-token-set (pcb/empty-changes) token-set)
changes
(-> changes
(pcb/add-token-theme hidden-theme)
(pcb/update-active-token-themes #{ctob/hidden-token-theme-path} #{}))]
(rx/of (set-selected-token-set-name set-name)
(dch/commit-changes changes))))))
(defn create-token
[params]
(let [token (ctob/make-token params)]
(ptk/reify ::create-token
ptk/WatchEvent
(watch [it state _]
(if-let [token-set (lookup-token-set state)]
(let [data (dsh/lookup-file-data state)
changes (-> (pcb/empty-changes it)
(pcb/with-library-data data)
(pcb/set-token (:name token-set)
(:name token)
token))]
(rx/of (dch/commit-changes changes)
(ptk/data-event ::ev/event {::ev/name "create-token"})))
(rx/of (create-token-with-set token)))))))
(defn update-token
[name params]
(assert (string? name) "expected string for `name`")
(ptk/reify ::update-token
ptk/WatchEvent ptk/WatchEvent
(watch [it state _] (watch [it state _]
(let [data (dsh/lookup-file-data state) (let [token-set (lookup-token-set state)
selected (dm/get-in state [:workspace-tokens :selected-token-set-name]) data (dsh/lookup-file-data state)
token (ctob/get-token token-set name)
token' (->> (merge token params)
(into {})
(ctob/make-token))
tokens-lib (get-tokens-lib state) changes (-> (pcb/empty-changes it)
token-set (if selected (pcb/with-library-data data)
(some-> tokens-lib (ctob/get-set selected)) (pcb/set-token (:name token-set)
(some-> tokens-lib (ctob/get-sets) (first))) (:name token)
token'))]
set-name (or (:name token-set) "Global") (rx/of (dch/commit-changes changes))))))
changes (if (not token-set)
;; No set created add a global set
(let [token-set (ctob/make-token-set :name set-name :tokens {(:name token) token})
hidden-theme (ctob/make-hidden-token-theme :sets [set-name])
active-theme-paths (some-> tokens-lib ctob/get-active-theme-paths)
add-to-hidden-theme? (= active-theme-paths #{ctob/hidden-token-theme-path})
base-changes (pcb/add-token-set (pcb/empty-changes) token-set)]
(cond
(not tokens-lib)
(-> base-changes
(pcb/add-token-theme hidden-theme)
(pcb/update-active-token-themes #{ctob/hidden-token-theme-path} #{}))
add-to-hidden-theme?
(let [prev-hidden-theme (ctob/get-theme tokens-lib ctob/hidden-token-theme-group ctob/hidden-token-theme-name)]
(-> base-changes
(pcb/update-token-theme (ctob/toggle-set prev-hidden-theme ctob/hidden-token-theme-path) prev-hidden-theme)))
:else base-changes))
(-> (pcb/empty-changes it)
(pcb/with-library-data data)
(pcb/set-token set-name (or prev-token-name (:name token)) token)))]
(rx/of
(set-selected-token-set-name set-name)
(when-not prev-token-name
(ptk/event ::ev/event {::ev/name "create-tokens"}))
(dch/commit-changes changes))))))
(defn delete-token (defn delete-token
[set-name token-name] [set-name token-name]
@ -296,21 +326,23 @@
(ptk/reify ::duplicate-token (ptk/reify ::duplicate-token
ptk/WatchEvent ptk/WatchEvent
(watch [_ state _] (watch [_ state _]
(let [token-set (dwts/get-selected-token-set state) (when-let [token-set (lookup-token-set state)]
token (some-> token-set (ctob/get-token token-name)) (when-let [token (ctob/get-token token-set token-name)]
tokens (some-> token-set (ctob/get-tokens)) (let [tokens (ctob/get-tokens token-set)
suffix-fn (fn [copy-count] unames (map :name tokens)
(let [suffix (tr "workspace.token.duplicate-suffix")]
(str/concat "-" suffix-fn
suffix (fn [copy-count]
(when (> copy-count 1) (let [suffix (tr "workspace.token.duplicate-suffix")]
(str "-" copy-count))))) (str/concat "-"
unames (map :name tokens) suffix
copy-name (cfh/generate-unique-name token-name unames :suffix-fn suffix-fn)] (when (> copy-count 1)
(when token (str "-" copy-count)))))
(rx/of
(update-create-token copy-name
{:token (assoc token :name copy-name)}))))))) (cfh/generate-unique-name token-name unames :suffix-fn suffix-fn)]
(rx/of (create-token (assoc token :name copy-name)))))))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; TOKEN UI OPS ;; TOKEN UI OPS

21
frontend/src/app/main/ui/workspace/tokens/form.cljs
View file

@ -397,13 +397,20 @@
;; The result should be a vector of all resolved validations ;; The result should be a vector of all resolved validations
;; We do not handle the error case as it will be handled by the components validations ;; We do not handle the error case as it will be handled by the components validations
(when (and (seq result) (not err)) (when (and (seq result) (not err))
(st/emit! (dt/update-create-token {:token (ctob/make-token :name final-name (st/emit!
:type (or (:type token) token-type) (if (ctob/token? token)
:value final-value (dt/update-token (:name token)
:description final-description) {:name final-name
:prev-token-name (:name token)})) :value final-value
(st/emit! (wtu/update-workspace-tokens)) :description final-description})
(modal/hide!))))))))
(dt/create-token {:name final-name
:type token-type
:value final-value
:description final-description}))
(wtu/update-workspace-tokens)
(modal/hide)))))))))
on-delete-token on-delete-token
(mf/use-fn (mf/use-fn
(mf/deps selected-token-set-name) (mf/deps selected-token-set-name)

54
frontend/test/frontend_tests/logic/components_and_tokens.cljs
View file

@ -203,10 +203,11 @@
store (ths/setup-store file) store (ths/setup-store file)
;; ==== Action ;; ==== Action
events [(dt/update-create-token {:token (ctob/make-token :name "test-token-1" events [(dt/set-selected-token-set-name "test-token-set")
:type :border-radius (dt/update-token "test-token-1"
:value 66) {:name "test-token-1"
:prev-token-name "test-token-1"})] :type :border-radius
:value 66})]
step2 (fn [_] step2 (fn [_]
(let [events2 [(wtu/update-workspace-tokens) (let [events2 [(wtu/update-workspace-tokens)
@ -358,30 +359,25 @@
store (ths/setup-store file) store (ths/setup-store file)
;; ==== Action ;; ==== Action
events [(dt/update-create-token {:token (ctob/make-token :name "token-radius" events [(dt/set-selected-token-set-name "test-token-set")
:type :border-radius (dt/update-token "token-radius"
:value 30) {:name "token-radius"
:prev-token-name "token-radius"}) :value 30})
(dt/update-create-token {:token (ctob/make-token :name "token-rotation" (dt/update-token "token-rotation"
:type :rotation {:name "token-rotation"
:value 45) :value 45})
:prev-token-name "token-rotation"}) (dt/update-token "token-opacity"
(dt/update-create-token {:token (ctob/make-token :name "token-opacity" {:name "token-opacity"
:type :opacity :value 0.9})
:value 0.9) (dt/update-token "token-stroke-width"
:prev-token-name "token-opacity"}) {:name "token-stroke-width"
(dt/update-create-token {:token (ctob/make-token :name "token-stroke-width" :value 8})
:type :stroke-width (dt/update-token "token-color"
:value 8) {:name "token-color"
:prev-token-name "token-stroke-width"}) :value "#ff0000"})
(dt/update-create-token {:token (ctob/make-token :name "token-color" (dt/update-token "token-dimensions"
:type :color {:name "token-dimensions"
:value "#ff0000") :value 200})]
:prev-token-name "token-color"})
(dt/update-create-token {:token (ctob/make-token :name "token-dimensions"
:type :dimensions
:value 200)
:prev-token-name "token-dimensions"})]
step2 (fn [_] step2 (fn [_]
(let [events2 [(wtu/update-workspace-tokens) (let [events2 [(wtu/update-workspace-tokens)
@ -391,7 +387,7 @@
(fn [new-state] (fn [new-state]
(let [;; ==== Get (let [;; ==== Get
file' (ths/get-file-from-state new-state) file' (ths/get-file-from-state new-state)
frame1' (cths/get-shape file' :frame1) frame1' (cths/get-shape file' :frame1)
c-frame1' (cths/get-shape file' :c-frame1) c-frame1' (cths/get-shape file' :c-frame1)
tokens-frame1' (:applied-tokens c-frame1')] tokens-frame1' (:applied-tokens c-frame1')]