Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-01 11:59:17 -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.main.ui.workspace.tokens.update :as wtu]
[app.util.dom :as dom] [app.util.dom :as dom]
[cuerdas.core :as str] [cuerdas.core :as str]
[linked.map :as lkm]
[malli.core :as m] [malli.core :as m]
[malli.error :as me] [malli.error :as me]
[promesa.core :as p] [promesa.core :as p]
@ -99,30 +100,28 @@ Token names should only contain letters and digits separated by . characters.")}
(defn validate-token-value+ (defn validate-token-value+
"Validates token value by resolving the value `input` using `StyleDictionary`. "Validates token value by resolving the value `input` using `StyleDictionary`.
Returns a promise of either resolved tokens or rejects with an error state." Returns a promise of either resolved tokens or rejects with an error state."
[{:keys [input name-value token tokens]}] [{:keys [value name-value token tokens]}]
(let [ ;; When creating a new token we dont have a token name yet, (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 ;; 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)] token-name (if (str/empty? name-value) "__TOKEN_STUDIO_SYSTEM.TEMP" name-value)]
(cond (cond
(empty? (str/trim input)) (empty? (str/trim value))
(p/rejected {:errors [{:error/code :error/empty-input}]}) (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)]}) (p/rejected {:errors [(wte/get-error-code :error.token/direct-self-reference)]})
:else :else
(let [token-id (or (:id token) (random-uuid)) (-> (update tokens token-name merge {:value value
new-tokens (update tokens token-name merge {:id token-id :name token-name
:value input :type (:type token)})
:name token-name (sd/resolve-tokens+ {:names-map? true})
:type (:type token)})] (p/then
(-> (sd/resolve-tokens+ new-tokens {:names-map? true}) (fn [resolved-tokens]
(p/then (let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens token-name)]
(fn [resolved-tokens] (cond
(let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens token-name)] resolved-value (p/resolved resolved-token)
(cond :else (p/rejected {:errors (or errors (wte/get-error-code :error/unknown-error))})))))))))
resolved-value (p/resolved resolved-token)
:else (p/rejected {:errors (or errors (wte/get-error-code :error/unknown-error))}))))))))))
(defn use-debonced-resolve-callback (defn use-debonced-resolve-callback
"Resolves a token values using `StyleDictionary`. "Resolves a token values using `StyleDictionary`.
@ -141,7 +140,7 @@ Token names should only contain letters and digits separated by . characters.")}
(js/setTimeout (js/setTimeout
(fn [] (fn []
(when (not (timeout-outdated-cb?)) (when (not (timeout-outdated-cb?))
(-> (validate-token-value+ {:input value (-> (validate-token-value+ {:value value
:name-value @name-ref :name-value @name-ref
:token token :token token
:tokens tokens}) :tokens tokens})
@ -203,9 +202,9 @@ Token names should only contain letters and digits separated by . characters.")}
color? (wtt/color-token? token) color? (wtt/color-token? token)
selected-set-tokens (mf/deref refs/workspace-selected-token-set-tokens) selected-set-tokens (mf/deref refs/workspace-selected-token-set-tokens)
active-theme-tokens (mf/deref refs/workspace-active-theme-sets-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 resolved-tokens (sd/use-resolved-tokens (vals active-theme-tokens)
:cache-atom form-token-cache-atom}) {:names-map? true
_ (js/console.log "resolved-tokens" resolved-tokens) :cache-atom form-token-cache-atom})
token-path (mf/use-memo token-path (mf/use-memo
(mf/deps (:name token)) (mf/deps (:name token))
#(wtt/token-name->path (: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)] valid-description?+ (some-> final-description validate-descripion schema-validation->promise)]
(-> (p/all [valid-name?+ (-> (p/all [valid-name?+
valid-description?+ valid-description?+
(validate-token-value+ {:input final-value (validate-token-value+ {:value final-value
:name-value final-name :name-value final-name
:token token :token token
:tokens resolved-tokens})]) :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)] (p/let [sd-tokens (resolve-sd-tokens+ tree)]
(let [resolved-tokens (reduce (let [resolved-tokens (reduce
(fn [acc ^js cur] (fn [acc ^js cur]
(let [identifier (if names-map? (let [{:keys [type] :as origin-token} (if names-map?
(.. cur -original -name) (get tokens (.. cur -original -name))
(uuid (.-uuid (.-id cur)))) (get ids-map (uuid (.-uuid (.-id cur)))))
{:keys [type] :as origin-token} (get ids-map identifier)
value (.-value cur) value (.-value cur)
token-or-err (case type token-or-err (case type
:color (if-let [tc (tinycolor/valid-color value)] :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, This hook will return the unresolved tokens as state until they are processed,
then the state will be updated with the resolved tokens." 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} :or {cache-atom !tokens-cache}
:as config}] :as config}]
(let [tokens-state (mf/use-state (get @cache-atom tokens))] (let [tokens-state (mf/use-state (get @cache-atom tokens))]
@ -124,6 +123,7 @@
(fn [] (fn []
(let [cached (get @cache-atom tokens)] (let [cached (get @cache-atom tokens)]
(cond (cond
(nil? tokens) (if names-map? {} [])
;; The tokens are already processing somewhere ;; The tokens are already processing somewhere
(p/promise? cached) (-> cached (p/promise? cached) (-> cached
(p/then #(reset! tokens-state %)) (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) (->> (map (fn [{:keys [name] :as token}] [name token]) tokens)
(into {}))) (into {})))
(defonce a (atom nil))
(comment
(token-names-tree-id-map @a)
nil)
(defn token-names-tree-id-map [tokens] (defn token-names-tree-id-map [tokens]
(reset! a tokens)
(reduce (reduce
(fn [acc {:keys [name] :as token}] (fn [acc [_ {:keys [name] :as token}]]
(when (string? name) (when (string? name)
(let [temp-id (random-uuid) (let [temp-id (random-uuid)
token (assoc token :temp/id temp-id)] token (assoc token :temp/id temp-id)]