From e5bccc470bda00b6492ba517cc14f95fa150f19b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Mon, 10 Mar 2025 10:57:04 +0100 Subject: [PATCH] :sparkles: Validate if token values are too large --- .../app/main/ui/workspace/tokens/errors.cljs | 4 +++ .../ui/workspace/tokens/style_dictionary.cljs | 28 +++++++++++-------- .../tokens/style_dictionary_test.cljs | 18 ++++++++++++ frontend/translations/en.po | 4 +++ frontend/translations/es.po | 4 +++ 5 files changed, 47 insertions(+), 11 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/errors.cljs b/frontend/src/app/main/ui/workspace/tokens/errors.cljs index 2aab91809..fd9ee82c0 100644 --- a/frontend/src/app/main/ui/workspace/tokens/errors.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/errors.cljs @@ -28,6 +28,10 @@ {:error/code :error.token/invalid-color :error/fn #(str (tr "workspace.token.invalid-color" %))} + :error.token/number-too-large + {:error/code :error.token/number-too-large + :error/fn #(str (tr "workspace.token.number-too-large" %))} + :error.style-dictionary/missing-reference {:error/code :error.style-dictionary/missing-reference :error/fn #(str (tr "workspace.token.missing-references") (str/join " " %))} 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 26a4eaf23..2fc6de616 100644 --- a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs @@ -3,6 +3,7 @@ ["@tokens-studio/sd-transforms" :as sd-transforms] ["style-dictionary$default" :as sd] [app.common.logging :as l] + [app.common.schema :as sm] [app.common.transit :as t] [app.common.types.tokens-lib :as ctob] [app.main.ui.workspace.tokens.errors :as wte] @@ -42,7 +43,7 @@ :warnings "silent" :errors {:brokenReferences "console"}}}) -(defn parse-sd-token-color-value +(defn- parse-sd-token-color-value "Parses `value` of a color `sd-token` into a map like `{:value 1 :unit \"px\"}`. If the value is not parseable and/or has missing references returns a map with `:errors`." [value] @@ -50,18 +51,23 @@ {:value value :unit (tinycolor/color-format tc)} {:errors [(wte/error-with-value :error.token/invalid-color value)]})) -(defn parse-sd-token-dimensions-value - "Parses `value` of a dimensions `sd-token` into a map like `{:value 1 :unit \"px\"}`. +(defn- parse-sd-token-numeric-value + "Parses `value` of a numeric `sd-token` into a map like `{:value 1 :unit \"px\"}`. If the `value` is not parseable and/or has missing references returns a map with `:errors`." [value] - (or - (wtt/parse-token-value value) - (if-let [references (seq (ctob/find-token-value-references value))] - {:errors [(wte/error-with-value :error.style-dictionary/missing-reference references)] - :references references} - {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value value)]}))) + (let [parsed-value (wtt/parse-token-value value) + out-of-bounds (or (>= (:value parsed-value) sm/max-safe-int) + (<= (:value parsed-value) sm/min-safe-int))] + (if (and parsed-value (not out-of-bounds)) + parsed-value + (if out-of-bounds + {:errors [(wte/error-with-value :error.token/number-too-large value)]} + (if-let [references (seq (ctob/find-token-value-references value))] + {:errors [(wte/error-with-value :error.style-dictionary/missing-reference references)] + :references references} + {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value value)]}))))) -(defn parse-sd-token-opacity-value +(defn- parse-sd-token-opacity-value "Parses `value` of a dimensions `sd-token` into a map like `{:value 1 :unit \"px\"}`. If the `value` is not parseable and/or has missing references returns a map with `:errors`. If the `value` is parseable but is out of range returns a map with `warnings`." @@ -126,7 +132,7 @@ parsed-token-value (case (:type origin-token) :color (parse-sd-token-color-value value) :opacity (parse-sd-token-opacity-value value has-references?) - (parse-sd-token-dimensions-value value)) + (parse-sd-token-numeric-value value)) output-token (cond (:errors parsed-token-value) (merge origin-token parsed-token-value) (:warnings parsed-token-value) diff --git a/frontend/test/frontend_tests/tokens/style_dictionary_test.cljs b/frontend/test/frontend_tests/tokens/style_dictionary_test.cljs index 517f0d102..64841fb65 100644 --- a/frontend/test/frontend_tests/tokens/style_dictionary_test.cljs +++ b/frontend/test/frontend_tests/tokens/style_dictionary_test.cljs @@ -19,6 +19,15 @@ (ctob/add-token-in-set "core" (ctob/make-token {:value "{borderRadius.sm} * 2" :name "borderRadius.md-with-dashes" :type :border-radius})) + (ctob/add-token-in-set "core" (ctob/make-token {:name "borderRadius.large" + :value "123456789012345" + :type :border-radius})) + (ctob/add-token-in-set "core" (ctob/make-token {:name "borderRadius.largePx" + :value "123456789012345px" + :type :border-radius})) + (ctob/add-token-in-set "core" (ctob/make-token {:name "borderRadius.largeFn" + :value "{borderRadius.sm} * 200000000" + :type :border-radius})) (ctob/get-all-tokens))] (-> (sd/resolve-tokens+ tokens) (p/finally @@ -27,6 +36,15 @@ (t/is (= "px" (get-in resolved-tokens ["borderRadius.sm" :unit]))) (t/is (= 24 (get-in resolved-tokens ["borderRadius.md-with-dashes" :resolved-value]))) (t/is (= "px" (get-in resolved-tokens ["borderRadius.md-with-dashes" :unit]))) + (t/is (nil? (get-in resolved-tokens ["borderRadius.large" :resolved-value]))) + (t/is (= :error.token/number-too-large + (get-in resolved-tokens ["borderRadius.large" :errors 0 :error/code]))) + (t/is (nil? (get-in resolved-tokens ["borderRadius.largePx" :resolved-value]))) + (t/is (= :error.token/number-too-large + (get-in resolved-tokens ["borderRadius.largePx" :errors 0 :error/code]))) + (t/is (nil? (get-in resolved-tokens ["borderRadius.largeFn" :resolved-value]))) + (t/is (= :error.token/number-too-large + (get-in resolved-tokens ["borderRadius.largeFn" :errors 0 :error/code]))) (done)))))))) (t/deftest process-json-stream-test diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 54b627bf9..51fc9a687 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -6631,6 +6631,10 @@ msgstr "Invalid color value: %s" msgid "workspace.token.missing-references" msgstr "Missing token references: " +#: src/app/main/ui/workspace/tokens/errors.cljs +msgid "workspace.token.number-too-large" +msgstr "Invalid token value. The resolved value is too large: %s" + #: src/app/main/ui/workspace/tokens/errors.cljs msgid "workspace.token.invalid-value" msgstr "Invalid token value: %s" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 413a0e4d4..c2d337615 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -6610,6 +6610,10 @@ msgstr "Valor de color no válido: %s" msgid "workspace.token.missing-references" msgstr "Referéncias de tokens no encontradas:" +#: src/app/main/ui/workspace/tokens/errors.cljs +msgid "workspace.token.number-too-large" +msgstr "Valor de token no valido. El valor resuelto es muy grande: %s" + #: src/app/main/ui/workspace/tokens/errors.cljs msgid "workspace.token.invalid-value" msgstr "Valor de token no válido: %s"