From 6be2ca8491a4ea402d543360a2fab89fd8e4e922 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Thu, 15 Aug 2024 09:21:18 +0200 Subject: [PATCH 1/5] Fix resolved value not showing up when editing token --- frontend/src/app/main/ui/workspace/tokens/form.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs index 452190628..20e1b3dc4 100644 --- a/frontend/src/app/main/ui/workspace/tokens/form.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs @@ -177,7 +177,7 @@ Token names should only contain letters and digits separated by . characters.")} ;; Value value-ref (mf/use-var (:value token)) - token-resolve-result (mf/use-state (get-in tokens [(:id token) :resolved-value])) + token-resolve-result (mf/use-state (get-in resolved-tokens [(wtt/token-identifier token) :resolved-value])) set-resolve-value (mf/use-callback (fn [token-or-err] (let [v (cond From c6d13af071d82ea401c7d73c5ced00f58d1c0e31 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Thu, 15 Aug 2024 09:21:49 +0200 Subject: [PATCH 2/5] Fix validation not working while editing [*] [*] We've passed the resolved tokens to the validation, but the validation needs the original tokens set. --- .../src/app/main/ui/workspace/tokens/form.cljs | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs index 20e1b3dc4..5e3351940 100644 --- a/frontend/src/app/main/ui/workspace/tokens/form.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs @@ -8,14 +8,15 @@ (:require-macros [app.main.style :as stl]) (:require ["lodash.debounce" :as debounce] - [app.main.ui.workspace.tokens.update :as wtu] [app.common.data :as d] [app.main.data.modal :as modal] [app.main.data.tokens :as dt] + [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.workspace.tokens.common :as tokens.common] [app.main.ui.workspace.tokens.style-dictionary :as sd] [app.main.ui.workspace.tokens.token :as wtt] + [app.main.ui.workspace.tokens.update :as wtu] [app.util.dom :as dom] [cuerdas.core :as str] [malli.core :as m] @@ -141,14 +142,15 @@ Token names should only contain letters and digits separated by . characters.")} (mf/defc form {::mf/wrap-props false} [{:keys [token token-type] :as _args}] - (let [tokens (sd/use-resolved-workspace-tokens) + (let [tokens (mf/deref refs/workspace-tokens) + resolved-tokens (sd/use-resolved-tokens tokens) token-path (mf/use-memo (mf/deps (:name token)) #(wtt/token-name->path (:name token))) tokens-tree (mf/use-memo - (mf/deps token-path tokens) + (mf/deps token-path resolved-tokens) (fn [] - (-> (wtt/token-names-tree tokens) + (-> (wtt/token-names-tree resolved-tokens) ;; Allow setting editing token to it's own path (d/dissoc-in token-path)))) @@ -219,7 +221,7 @@ Token names should only contain letters and digits separated by . characters.")} (not valid-description-field?)) on-submit (mf/use-callback - (mf/deps validate-name validate-descripion token tokens) + (mf/deps validate-name validate-descripion token resolved-tokens) (fn [e] (dom/prevent-default e) ;; We have to re-validate the current form values before submitting @@ -236,7 +238,7 @@ Token names should only contain letters and digits separated by . characters.")} (validate-token-value+ {:input final-value :name-value final-name :token token - :tokens tokens})]) + :tokens resolved-tokens})]) (p/finally (fn [result err] ;; 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 From e4e488a9eee087befc68aaede1060d381b239af3 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Thu, 15 Aug 2024 10:03:25 +0200 Subject: [PATCH 3/5] Adds style-dictionary test --- .../token_tests/style_dictionary_test.cljs | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 frontend/test/token_tests/style_dictionary_test.cljs diff --git a/frontend/test/token_tests/style_dictionary_test.cljs b/frontend/test/token_tests/style_dictionary_test.cljs new file mode 100644 index 000000000..f15870a60 --- /dev/null +++ b/frontend/test/token_tests/style_dictionary_test.cljs @@ -0,0 +1,37 @@ +(ns token-tests.style-dictionary-test + (:require + [app.main.ui.workspace.tokens.style-dictionary :as sd] + [cljs.test :as t :include-macros true] + [promesa.core :as p])) + +(def border-radius-token + {:id #uuid "8c868278-7c8d-431b-bbc9-7d8f15c8edb9" + :value "12" + :name "borderRadius.sm" + :type :border-radius}) + +(def reference-border-radius-token + {:id #uuid "b9448d78-fd5b-4e3d-aa32-445904063f5b" + :value "{borderRadius.sm} * 2" + :name "borderRadius.md-with-dashes" + :type :border-radius}) + +(def tokens {(:id border-radius-token) border-radius-token + (:id reference-border-radius-token) reference-border-radius-token}) + +(t/deftest resolve-tokens-test + (t/async + done + (t/testing "resolves tokens using style-dictionary" + (-> (sd/resolve-tokens+ tokens) + (p/finally (fn [resolved-tokens] + (let [expected-tokens {"borderRadius.sm" + (assoc border-radius-token + :resolved-value 12 + :resolved-unit nil) + "borderRadius.md-with-dashes" + (assoc reference-border-radius-token + :resolved-value 24 + :resolved-unit nil)}] + (t/is (= expected-tokens resolved-tokens)) + (done)))))))) From 4bd3b14adbe6c1b98cbbd4fa177c9c8887305851 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Thu, 15 Aug 2024 10:07:12 +0200 Subject: [PATCH 4/5] Add unit to tests --- frontend/test/token_tests/style_dictionary_test.cljs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/test/token_tests/style_dictionary_test.cljs b/frontend/test/token_tests/style_dictionary_test.cljs index f15870a60..cc96abe1b 100644 --- a/frontend/test/token_tests/style_dictionary_test.cljs +++ b/frontend/test/token_tests/style_dictionary_test.cljs @@ -6,7 +6,7 @@ (def border-radius-token {:id #uuid "8c868278-7c8d-431b-bbc9-7d8f15c8edb9" - :value "12" + :value "12px" :name "borderRadius.sm" :type :border-radius}) @@ -28,10 +28,10 @@ (let [expected-tokens {"borderRadius.sm" (assoc border-radius-token :resolved-value 12 - :resolved-unit nil) + :resolved-unit "px") "borderRadius.md-with-dashes" (assoc reference-border-radius-token :resolved-value 24 - :resolved-unit nil)}] + :resolved-unit "px")}] (t/is (= expected-tokens resolved-tokens)) (done)))))))) From 43e064a768b3fea692120c13574f3585f08d9e79 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Thu, 15 Aug 2024 10:12:45 +0200 Subject: [PATCH 5/5] Update doc string --- .../src/app/main/ui/workspace/tokens/style_dictionary.cljs | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs index 81881d810..3ce334a02 100644 --- a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs @@ -9,9 +9,8 @@ [rumext.v2 :as mf])) (def StyleDictionary - "The global StyleDictionary instance used as an external library for now, - as the package would need webpack to be bundled, - because shadow-cljs doesn't support some of the more modern bundler features." + "Initiates the global StyleDictionary instance with transforms + from tokens-studio used to parse and resolved token values." (do (sd-transforms/registerTransforms sd) (.registerFormat sd #js {:name "custom/json"