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

Token resolving on add fixed

Browse source
This commit is contained in:
Florian Schroedl 2024-09-27 11:14:34 +02:00
parent 1d50bacfbc
commit 93ed1ded17
3 changed files with 26 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -25,6 +25,7 @@
[app.main.ui.workspace.tokens.update :as wtu]
[app.util.dom :as dom]
[cuerdas.core :as str]
[linked.map :as lkm]
[malli.core :as m]
[malli.error :as me]
[promesa.core :as p]
@ -99,30 +100,28 @@ Token names should only contain letters and digits separated by . characters.")}
(defn validate-token-value+
"Validates token value by resolving the value `input` using `StyleDictionary`.
Returns a promise of either resolved tokens or rejects with an error state."
[{:keys [input name-value token tokens]}]
(let [ ;; When creating a new token we dont have a token name yet,
[{:keys [value name-value token tokens]}]
(let [;; When creating a new token we dont have a token name yet,
;; so we use a temporary token name that hopefully doesn't clash with any of the users token names
token-name (if (str/empty? name-value) "__TOKEN_STUDIO_SYSTEM.TEMP" name-value)]
(cond
(empty? (str/trim input))
(empty? (str/trim value))
(p/rejected {:errors [{:error/code :error/empty-input}]})
(token-self-reference? token-name input)
(token-self-reference? token-name value)
(p/rejected {:errors [(wte/get-error-code :error.token/direct-self-reference)]})
:else
(let [token-id (or (:id token) (random-uuid))
new-tokens (update tokens token-name merge {:id token-id
:value input
:name token-name
:type (:type token)})]
(-> (sd/resolve-tokens+ new-tokens {:names-map? true})
(p/then
(fn [resolved-tokens]
(let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens token-name)]
(cond
resolved-value (p/resolved resolved-token)
:else (p/rejected {:errors (or errors (wte/get-error-code :error/unknown-error))}))))))))))
(-> (update tokens token-name merge {:value value
:name token-name
:type (:type token)})
(sd/resolve-tokens+ {:names-map? true})
(p/then
(fn [resolved-tokens]
(let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens token-name)]
(cond
resolved-value (p/resolved resolved-token)
:else (p/rejected {:errors (or errors (wte/get-error-code :error/unknown-error))})))))))))
(defn use-debonced-resolve-callback
"Resolves a token values using `StyleDictionary`.
@ -141,7 +140,7 @@ Token names should only contain letters and digits separated by . characters.")}
(js/setTimeout
(fn []
(when (not (timeout-outdated-cb?))
(-> (validate-token-value+ {:input value
(-> (validate-token-value+ {:value value
:name-value @name-ref
:token token
:tokens tokens})
@ -203,9 +202,9 @@ Token names should only contain letters and digits separated by . characters.")}
color? (wtt/color-token? token)
selected-set-tokens (mf/deref refs/workspace-selected-token-set-tokens)
active-theme-tokens (mf/deref refs/workspace-active-theme-sets-tokens)
resolved-tokens (sd/use-resolved-tokens (vals active-theme-tokens) {:names-map? true
:cache-atom form-token-cache-atom})
_ (js/console.log "resolved-tokens" resolved-tokens)
resolved-tokens (sd/use-resolved-tokens (vals active-theme-tokens)
{:names-map? true
:cache-atom form-token-cache-atom})
token-path (mf/use-memo
(mf/deps (:name token))
#(wtt/token-name->path (:name token)))
@ -310,7 +309,7 @@ Token names should only contain letters and digits separated by . characters.")}
valid-description?+ (some-> final-description validate-descripion schema-validation->promise)]
(-> (p/all [valid-name?+
valid-description?+
(validate-token-value+ {:input final-value
(validate-token-value+ {:value final-value
:name-value final-name
:token token
:tokens resolved-tokens})])

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

@ -76,10 +76,9 @@
(p/let [sd-tokens (resolve-sd-tokens+ tree)]
(let [resolved-tokens (reduce
(fn [acc ^js cur]
(let [identifier (if names-map?
(.. cur -original -name)
(uuid (.-uuid (.-id cur))))
{:keys [type] :as origin-token} (get ids-map identifier)
(let [{:keys [type] :as origin-token} (if names-map?
(get tokens (.. cur -original -name))
(get ids-map (uuid (.-uuid (.-id cur)))))
value (.-value cur)
token-or-err (case type
:color (if-let [tc (tinycolor/valid-color value)]
@ -115,7 +114,7 @@
This hook will return the unresolved tokens as state until they are processed,
then the state will be updated with the resolved tokens."
[tokens & {:keys [cache-atom _names-map?]
[tokens & {:keys [cache-atom names-map?]
:or {cache-atom !tokens-cache}
:as config}]
(let [tokens-state (mf/use-state (get @cache-atom tokens))]
@ -124,6 +123,7 @@
(fn []
(let [cached (get @cache-atom tokens)]
(cond
(nil? tokens) (if names-map? {} [])
;; The tokens are already processing somewhere
(p/promise? cached) (-> cached
(p/then #(reset! tokens-state %))

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

@ -108,18 +108,9 @@
(->> (map (fn [{:keys [name] :as token}] [name token]) tokens)
(into {})))
(defonce a (atom nil))
(comment
(token-names-tree-id-map @a)
nil)
(defn token-names-tree-id-map [tokens]
(reset! a tokens)
(reduce
(fn [acc {:keys [name] :as token}]
(fn [acc [_ {:keys [name] :as token}]]
(when (string? name)
(let [temp-id (random-uuid)
token (assoc token :temp/id temp-id)]