Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-08 07:50:43 -05:00
Code Issues Activity

Merge pull request #320 from tokens-studio/fix-dot-rename

Browse source 
🐛 Fix renaming token to other namespace not working
This commit is contained in:
Florian Schrödl 2024-11-04 13:45:44 +01:00 committed by GitHub
commit b3b8121d60
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 29 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
common/src/app/common/types/tokens_lib.cljc
View file

@ -147,9 +147,11 @@
Token references are strings delimited by curly braces. Token references are strings delimited by curly braces.
E.g.: {foo.bar.baz} -> foo.bar.baz" E.g.: {foo.bar.baz} -> foo.bar.baz"
[token-value] [token-value]
(some->> (re-seq #"\{([^}]*)\}" token-value) (if (string? token-value)
(map second) (some->> (re-seq #"\{([^}]*)\}" token-value)
(into #{}))) (map second)
(into #{}))
#{}))
(defn token-value-self-reference? (defn token-value-self-reference?
"Check if the token is self referencing with its `token-name` in `token-value`. "Check if the token is self referencing with its `token-name` in `token-value`.

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

@ -112,16 +112,20 @@ Token names should only contain letters and digits separated by . characters.")}
(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
(-> (update tokens token-name merge {:value value (let [tokens' (cond-> tokens
:name token-name ;; Remove previous token when renaming a token
:type (:type token)}) (not= name-value (:name token)) (dissoc (:name token))
(sd/resolve-tokens+) :always (update token-name #(ctob/make-token (merge % {:value value
(p/then :name token-name
(fn [resolved-tokens] :type (:type token)}))))]
(let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens token-name)] (-> tokens'
(cond (sd/resolve-tokens-interactive+)
resolved-value (p/resolved resolved-token) (p/then
:else (p/rejected {:errors (or errors (wte/get-error-code :error/unknown-error))}))))))))) (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 (defn use-debonced-resolve-callback
"Resolves a token values using `StyleDictionary`. "Resolves a token values using `StyleDictionary`.
@ -200,8 +204,7 @@ Token names should only contain letters and digits separated by . characters.")}
(mf/defc form (mf/defc form
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [token token-type action selected-token-set-id]}] [{:keys [token token-type action selected-token-set-id]}]
(let [validate-name? (mf/use-state (not (:id token))) (let [token (or token {:type token-type})
token (or token {:type token-type})
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)
@ -218,6 +221,7 @@ Token names should only contain letters and digits separated by . characters.")}
(d/dissoc-in token-path)))) (d/dissoc-in token-path))))
;; Name ;; Name
touched-name? (mf/use-state false)
name-ref (mf/use-var (:name token)) name-ref (mf/use-var (:name token))
name-errors (mf/use-state nil) name-errors (mf/use-state nil)
validate-name validate-name
@ -233,15 +237,14 @@ Token names should only contain letters and digits separated by . characters.")}
(debounce (fn [e] (debounce (fn [e]
(let [value (dom/get-target-val e) (let [value (dom/get-target-val e)
errors (validate-name value)] errors (validate-name value)]
;; Prevent showing error when just going to another field on a new token (when touched-name?
(when-not (and validate-name? (str/empty? value))
(reset! validate-name? false)
(reset! name-errors errors)))))) (reset! name-errors errors))))))
on-update-name on-update-name
(mf/use-fn (mf/use-fn
(mf/deps on-update-name-debounced) (mf/deps on-update-name-debounced)
(fn [e] (fn [e]
(reset! touched-name? true)
(reset! name-ref (dom/get-target-val e)) (reset! name-ref (dom/get-target-val e))
(on-update-name-debounced e))) (on-update-name-debounced e)))
@ -310,10 +313,10 @@ Token names should only contain letters and digits separated by . characters.")}
(mf/deps validate-name validate-descripion token resolved-tokens) (mf/deps validate-name validate-descripion token resolved-tokens)
(fn [e] (fn [e]
(dom/prevent-default e) (dom/prevent-default e)
;; We have to re-validate the current form values before submitting ;; We have to re-validate the current form values before submitting
;; because the validation is asynchronous/debounced ;; because the validation is asynchronous/debounced
;; and the user might have edited a valid form to make it invalid, ;; and the user might have edited a valid form to make it invalid,
;; and press enter before the next validations could return. ;; and press enter before the next validations could return.
(let [final-name (finalize-name @name-ref) (let [final-name (finalize-name @name-ref)
valid-name?+ (-> (validate-name final-name) schema-validation->promise) valid-name?+ (-> (validate-name final-name) schema-validation->promise)
final-value (finalize-value @value-ref) final-value (finalize-value @value-ref)
@ -326,8 +329,8 @@ Token names should only contain letters and digits separated by . characters.")}
:token token :token token
:tokens resolved-tokens})]) :tokens resolved-tokens})])
(p/finally (fn [result err] (p/finally (fn [result err]
;; 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! (dt/update-create-token {:token (ctob/make-token :name final-name
:type (or (:type token) token-type) :type (or (:type token) token-type)