Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 06:02:32 -05:00
Code Issues Activity

Compute tokens from each activated set

Browse source
This commit is contained in:
Florian Schroedl 2024-08-19 15:46:42 +02:00
parent 8e02dced2f
commit 6049c32839
8 changed files with 63 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -16,12 +16,12 @@
[app.main.data.workspace.shapes :as dwsh]
[app.main.refs :as refs]
[app.main.ui.workspace.tokens.token :as wtt]
[app.main.ui.workspace.tokens.token-set :as wtts]
[app.main.ui.workspace.tokens.update :as wtu]
[beicon.v2.core :as rx]
[clojure.data :as data]
[cuerdas.core :as str]
[potok.v2.core :as ptk]
[app.main.ui.workspace.tokens.changes :as wdt]
[app.main.ui.workspace.tokens.token-set :as wtts]))
[potok.v2.core :as ptk]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Helpers
@ -126,7 +126,9 @@
new-themes (wtts/toggle-active-theme-id token-theme-id state)
changes (-> (pcb/empty-changes it)
(pcb/update-active-token-themes new-themes themes))]
(rx/of (dch/commit-changes changes))))))
(rx/of
(dch/commit-changes changes)
(wtu/update-workspace-tokens))))))
(defn delete-token-theme [token-theme-id]
(ptk/reify ::delete-token-theme
@ -136,7 +138,9 @@
changes (-> (pcb/empty-changes it)
(pcb/with-library-data data)
(pcb/delete-token-theme token-theme-id))]
(rx/of (dch/commit-changes changes))))))
(rx/of
(dch/commit-changes changes)
(wtu/update-workspace-tokens))))))
(defn create-token-set [token-set]
(let [new-token-set (merge
@ -165,7 +169,9 @@
(wtts/toggle-token-set-to-token-theme token-set-id theme)
theme)
(pcb/update-active-token-themes #{(wtts/update-theme-id state)} (wtts/get-active-theme-ids state)))]
(rx/of (dch/commit-changes changes))))))
(rx/of
(dch/commit-changes changes)
(wtu/update-workspace-tokens))))))
(defn delete-token-set [token-set-id]
(ptk/reify ::delete-token-set
@ -175,7 +181,9 @@
changes (-> (pcb/empty-changes it)
(pcb/with-library-data data)
(pcb/delete-token-set token-set-id))]
(rx/of (dch/commit-changes changes))))))
(rx/of
(dch/commit-changes changes)
(wtu/update-workspace-tokens))))))
(defn update-create-token
[token]

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

@ -259,6 +259,9 @@
st/state
=))
(def get-active-theme-sets-tokens
(l/derived wtts/get-active-theme-sets-tokens-names-map st/state =))
(def workspace-tokens
(l/derived
(fn [data]

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
View file

@ -101,7 +101,7 @@
selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
selection-parents (mf/deref selection-parents-ref)
tokens (-> (mf/deref refs/workspace-tokens)
tokens (-> (mf/deref refs/get-active-theme-sets-tokens)
(sd/use-resolved-tokens))
tokens-by-type (mf/use-memo (mf/deps tokens) #(wtc/group-tokens-by-type tokens))

12
frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
View file

@ -21,15 +21,12 @@
[app.main.ui.workspace.tokens.core :as wtc]
[app.main.ui.workspace.tokens.style-dictionary :as sd]
[app.main.ui.workspace.tokens.token :as wtt]
[app.main.ui.workspace.tokens.token-set :as wtts]
[app.main.ui.workspace.tokens.token-types :as wtty]
[app.main.ui.workspace.tokens.update :as wtu]
[app.util.dom :as dom]
[cuerdas.core :as str]
[okulary.core :as l]
[rumext.v2 :as mf]
[shadow.resource]
[clojure.set :as set]))
[shadow.resource]))
(def lens:token-type-open-status
(l/derived (l/in [:workspace-tokens :open-status]) st/state))
@ -223,8 +220,7 @@
[:li {:class [(when (= selected-token-set-id id) "selected")]
:on-click (fn []
(st/emit!
(wdt/set-selected-token-set-id id)
(wtu/update-workspace-tokens)))}
(wdt/set-selected-token-set-id id)))}
[:div.spaced
name
[:div.spaced
@ -248,9 +244,9 @@
selected (mf/deref refs/selected-shapes)
selected-shapes (into [] (keep (d/getf objects)) selected)
tokens (-> (mf/deref refs/workspace-tokens)
(sd/use-resolved-tokens))
tokens (sd/use-resolved-workspace-tokens)
token-groups (mf/with-memo [tokens]
(js/console.log "tokens" tokens)
(sorted-token-groups tokens))]
[:article
[:& token-sets]

48
frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
View file

@ -2,6 +2,7 @@
(:require
["@tokens-studio/sd-transforms" :as sd-transforms]
["style-dictionary$default" :as sd]
[app.common.data :refer [ordered-map]]
[app.main.refs :as refs]
[app.main.ui.workspace.tokens.token :as wtt]
[cuerdas.core :as str]
@ -79,8 +80,10 @@
(resolve-sd-tokens+ config))]
(let [resolved-tokens (reduce
(fn [acc ^js cur]
(let [id (uuid (.-uuid (.-id cur)))
origin-token (get tokens id)
(let [identifier (if (uuid? (ffirst tokens))
(uuid (.-uuid (.-id cur)))
(.. cur -original -name))
origin-token (get tokens identifier)
parsed-value (wtt/parse-token-value (.-value cur))
resolved-token (if (not parsed-value)
(assoc origin-token :errors [:style-dictionary/missing-reference])
@ -93,11 +96,6 @@
(js/console.log "Resolved tokens" resolved-tokens))
resolved-tokens)))
(defn resolve-workspace-tokens+
[& {:keys [debug?] :as config}]
(when-let [workspace-tokens @refs/workspace-tokens]
(resolve-tokens+ workspace-tokens)))
;; Hooks -----------------------------------------------------------------------
(defonce !tokens-cache (atom nil))
@ -112,7 +110,7 @@
then the state will be updated with the resolved tokens."
[tokens & {:keys [cache-atom]
:or {cache-atom !tokens-cache}}]
(let [tokens-state (mf/use-state (get @cache-atom tokens tokens))]
(let [tokens-state (mf/use-state (get @cache-atom tokens))]
(mf/use-effect
(mf/deps tokens)
(fn []
@ -133,37 +131,3 @@
(defn use-resolved-workspace-tokens [& {:as config}]
(-> (mf/deref refs/workspace-tokens)
(use-resolved-tokens config)))
;; Testing ---------------------------------------------------------------------
(comment
(defonce !output (atom nil))
(-> @refs/workspace-tokens
(resolve-tokens+ {:debug? false})
(.then js/console.log))
(-> (resolve-workspace-tokens+ {:debug? true})
(p/then #(reset! !output %)))
@!output
(->> @refs/workspace-tokens
(resolve-tokens+)
(#(doto % js/console.log)))
(->
(clj->js {"a" {:name "a" :value "5"}
"b" {:name "b" :value "{a} * 2"}})
(#(resolve-sd-tokens+ % {:debug? true})))
(defonce output (atom nil))
(require '[shadow.resource])
(let [example (-> (shadow.resource/inline "./data/example-tokens-set.json")
(js/JSON.parse)
.-core)]
(.then (resolve-sd-tokens+ example {:debug? true})
#(reset! output %)))
nil)

8
frontend/src/app/main/ui/workspace/tokens/token.cljs
View file

@ -4,6 +4,14 @@
[clojure.set :as set]
[cuerdas.core :as str]))
(defn get-workspace-tokens
[state]
(get-in state [:workspace-data :tokens] {}))
(defn get-workspace-token
[token-id state]
(get-in state [:workspace-data :tokens token-id]))
(def parseable-token-value-regexp
"Regexp that can be used to parse a number value out of resolved token value.
This regexp also trims whitespace around the value."

30
frontend/src/app/main/ui/workspace/tokens/token_set.cljs
View file

@ -1,6 +1,8 @@
(ns app.main.ui.workspace.tokens.token-set
(:require
[clojure.set :as set]))
[app.common.data :refer [ordered-map]]
[app.main.ui.workspace.tokens.token :as wtt]
[clojure.set :as set]))
;; Themes ----------------------------------------------------------------------
@ -102,9 +104,6 @@
;; Sets ------------------------------------------------------------------------
(defn get-workspace-tokens [state]
(get-in state [:workspace-data :tokens]))
(defn get-workspace-sets [state]
(get-in state [:workspace-data :token-sets-index]))
@ -112,6 +111,10 @@
(some-> (get-workspace-sets state)
(get set-id)))
(defn get-workspace-token-set-tokens [set-id state]
(-> (get-token-set set-id state)
:tokens))
(def default-token-set-name "Global")
(defn create-global-set [])
@ -129,11 +132,22 @@
(defn get-selected-token-set-tokens [state]
(when-let [token-set (get-selected-token-set state)]
(let [tokens (or (get-workspace-tokens state) {})]
(let [tokens (or (wtt/get-workspace-tokens state) {})]
(js/console.log "token-set" token-set (select-keys tokens (:tokens token-set)))
(select-keys tokens (:tokens token-set)))))
(defn get-token-set-tokens [{:keys [tokens] :as token-set} file]
(map #(get-in file [:data :tokens %]) tokens))
(defn assoc-selected-token-set-id [state id]
(assoc-in state [:workspace-local :selected-token-set-id] id))
(defn get-active-theme-sets-tokens-names-map [state]
(let [active-set-ids (get-active-set-ids state)]
(reduce
(fn [names-map-acc set-id]
(let [token-ids (get-workspace-token-set-tokens set-id state)]
(reduce
(fn [acc token-id]
(if-let [token (wtt/get-workspace-token token-id state)]
(assoc acc (wtt/token-identifier token) token)
acc))
names-map-acc token-ids)))
(ordered-map) active-set-ids)))

5
frontend/src/app/main/ui/workspace/tokens/update.cljs
View file

@ -121,7 +121,10 @@
ptk/WatchEvent
(watch [_ state _]
(->>
(rx/from (wtsd/resolve-tokens+ (wtts/get-selected-token-set-tokens state)))
(rx/from
(->
(wtts/get-active-theme-sets-tokens-names-map state)
(wtsd/resolve-tokens+)))
(rx/mapcat
(fn [sd-tokens]
(let [undo-id (js/Symbol)]