Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-15 16:31:25 -05:00
Code Issues Activity

✨ Validate if token values are too large

Browse source
This commit is contained in:
Andrés Moya 2025-03-10 10:57:04 +01:00 • committed by Andrés Moya
parent ba768f8744
commit e5bccc470b
5 changed files with 47 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/app/main/ui/workspace/tokens/errors.cljs
View file

@ -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 " " %))}

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

@ -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)

18
frontend/test/frontend_tests/tokens/style_dictionary_test.cljs
View file

@ -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

4
frontend/translations/en.po
View file

@ -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"

4
frontend/translations/es.po
View file

@ -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"