3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-03 05:41:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #6375 from penpot/hiru-move-tokens-staging

Browse source 
🔧 Reorganize tokens data functions
This commit is contained in:
Andrey Antukh 2025-04-29 10:43:13 +02:00 • committed by GitHub
commit a60b3d4b08
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
29 changed files with 329 additions and 422 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/app/main/ui/workspace/tokens/token.cljs → common/src/app/common/files/tokens.cljc
View file

@ -1,8 +1,7 @@
(ns app.main.ui.workspace.tokens.token (ns app.common.files.tokens
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.ui.workspace.tokens.tinycolor :as tinycolor]
[clojure.set :as set] [clojure.set :as set]
[cuerdas.core :as str])) [cuerdas.core :as str]))
@ -128,18 +127,6 @@
(defn color-token? [token] (defn color-token? [token]
(= (:type token) :color)) (= (:type token) :color))
;; FIXME: this should be precalculated ? ;; FIXME: this should be precalculated ?
(defn is-reference? [token] (defn is-reference? [token]
(str/includes? (:value token) "{")) (str/includes? (:value token) "{"))
(defn color-bullet-color [token-color-value]
(when-let [tc (tinycolor/valid-color token-color-value)]
(if (tinycolor/alpha tc)
{:color (tinycolor/->hex-string tc)
:opacity (tinycolor/alpha tc)}
(tinycolor/->hex-string tc))))
(defn resolved-token-bullet-color [{:keys [resolved-value] :as token}]
(when (and resolved-value (color-token? token))
(color-bullet-color resolved-value)))

58
frontend/test/frontend_tests/tokens/token_test.cljs → common/test/common_tests/files/tokens_test.cljc
View file

@ -4,36 +4,36 @@
;; ;;
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns frontend-tests.tokens.token-test (ns common-tests.files.tokens-test
(:require (:require
[app.main.ui.workspace.tokens.token :as wtt] [app.common.files.tokens :as cft]
[cljs.test :as t :include-macros true])) [clojure.test :as t]))
(t/deftest test-parse-token-value (t/deftest test-parse-token-value
(t/testing "parses double from a token value" (t/testing "parses double from a token value"
(t/is (= {:value 100.1 :unit nil} (wtt/parse-token-value "100.1"))) (t/is (= {:value 100.1 :unit nil} (cft/parse-token-value "100.1")))
(t/is (= {:value -9 :unit nil} (wtt/parse-token-value "-9")))) (t/is (= {:value -9.0 :unit nil} (cft/parse-token-value "-9"))))
(t/testing "trims white-space" (t/testing "trims white-space"
(t/is (= {:value -1.3 :unit nil} (wtt/parse-token-value " -1.3 ")))) (t/is (= {:value -1.3 :unit nil} (cft/parse-token-value " -1.3 "))))
(t/testing "parses unit: px" (t/testing "parses unit: px"
(t/is (= {:value 70.3 :unit "px"} (wtt/parse-token-value " 70.3px ")))) (t/is (= {:value 70.3 :unit "px"} (cft/parse-token-value " 70.3px "))))
(t/testing "parses unit: %" (t/testing "parses unit: %"
(t/is (= {:value -10 :unit "%"} (wtt/parse-token-value "-10%")))) (t/is (= {:value -10.0 :unit "%"} (cft/parse-token-value "-10%"))))
(t/testing "parses unit: px") (t/testing "parses unit: px")
(t/testing "returns nil for any invalid characters" (t/testing "returns nil for any invalid characters"
(t/is (nil? (wtt/parse-token-value " -1.3a ")))) (t/is (nil? (cft/parse-token-value " -1.3a "))))
(t/testing "doesnt accept invalid double" (t/testing "doesnt accept invalid double"
(t/is (nil? (wtt/parse-token-value ".3"))))) (t/is (nil? (cft/parse-token-value ".3")))))
(t/deftest token-applied-test (t/deftest token-applied-test
(t/testing "matches passed token with `:token-attributes`" (t/testing "matches passed token with `:token-attributes`"
(t/is (true? (wtt/token-applied? {:name "a"} {:applied-tokens {:x "a"}} #{:x})))) (t/is (true? (cft/token-applied? {:name "a"} {:applied-tokens {:x "a"}} #{:x}))))
(t/testing "doesn't match empty token" (t/testing "doesn't match empty token"
(t/is (nil? (wtt/token-applied? {} {:applied-tokens {:x "a"}} #{:x})))) (t/is (nil? (cft/token-applied? {} {:applied-tokens {:x "a"}} #{:x}))))
(t/testing "does't match passed token `:id`" (t/testing "does't match passed token `:id`"
(t/is (nil? (wtt/token-applied? {:name "b"} {:applied-tokens {:x "a"}} #{:x})))) (t/is (nil? (cft/token-applied? {:name "b"} {:applied-tokens {:x "a"}} #{:x}))))
(t/testing "doesn't match passed `:token-attributes`" (t/testing "doesn't match passed `:token-attributes`"
(t/is (nil? (wtt/token-applied? {:name "a"} {:applied-tokens {:x "a"}} #{:y}))))) (t/is (nil? (cft/token-applied? {:name "a"} {:applied-tokens {:x "a"}} #{:y})))))
(t/deftest shapes-ids-by-applied-attributes (t/deftest shapes-ids-by-applied-attributes
(t/testing "Returns set of matched attributes that fit the applied token" (t/testing "Returns set of matched attributes that fit the applied token"
@ -54,7 +54,7 @@
shape-applied-x-y shape-applied-x-y
shape-applied-all shape-applied-all
shape-applied-none] shape-applied-none]
expected (wtt/shapes-ids-by-applied-attributes {:name "1"} shapes attributes)] expected (cft/shapes-ids-by-applied-attributes {:name "1"} shapes attributes)]
(t/is (= (:x expected) (shape-ids shape-applied-x (t/is (= (:x expected) (shape-ids shape-applied-x
shape-applied-x-y shape-applied-x-y
shape-applied-all))) shape-applied-all)))
@ -62,34 +62,34 @@
shape-applied-x-y shape-applied-x-y
shape-applied-all))) shape-applied-all)))
(t/is (= (:z expected) (shape-ids shape-applied-all))) (t/is (= (:z expected) (shape-ids shape-applied-all)))
(t/is (true? (wtt/shapes-applied-all? expected (shape-ids shape-applied-all) attributes))) (t/is (true? (cft/shapes-applied-all? expected (shape-ids shape-applied-all) attributes)))
(t/is (false? (wtt/shapes-applied-all? expected (apply shape-ids shapes) attributes))) (t/is (false? (cft/shapes-applied-all? expected (apply shape-ids shapes) attributes)))
(shape-ids shape-applied-x (shape-ids shape-applied-x
shape-applied-x-y shape-applied-x-y
shape-applied-all)))) shape-applied-all))))
(t/deftest tokens-applied-test (t/deftest tokens-applied-test
(t/testing "is true when single shape matches the token and attributes" (t/testing "is true when single shape matches the token and attributes"
(t/is (true? (wtt/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "a"}} (t/is (true? (cft/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "a"}}
{:applied-tokens {:x "b"}}] {:applied-tokens {:x "b"}}]
#{:x})))) #{:x}))))
(t/testing "is false when no shape matches the token or attributes" (t/testing "is false when no shape matches the token or attributes"
(t/is (nil? (wtt/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "b"}} (t/is (nil? (cft/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "b"}}
{:applied-tokens {:x "b"}}] {:applied-tokens {:x "b"}}]
#{:x}))) #{:x})))
(t/is (nil? (wtt/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "a"}} (t/is (nil? (cft/shapes-token-applied? {:name "a"} [{:applied-tokens {:x "a"}}
{:applied-tokens {:x "a"}}] {:applied-tokens {:x "a"}}]
#{:y}))))) #{:y})))))
(t/deftest name->path-test (t/deftest name->path-test
(t/is (= ["foo" "bar" "baz"] (wtt/token-name->path "foo.bar.baz"))) (t/is (= ["foo" "bar" "baz"] (cft/token-name->path "foo.bar.baz")))
(t/is (= ["foo" "bar" "baz"] (wtt/token-name->path "foo..bar.baz"))) (t/is (= ["foo" "bar" "baz"] (cft/token-name->path "foo..bar.baz")))
(t/is (= ["foo" "bar" "baz"] (wtt/token-name->path "foo..bar.baz....")))) (t/is (= ["foo" "bar" "baz"] (cft/token-name->path "foo..bar.baz...."))))
(t/deftest token-name-path-exists?-test (t/deftest token-name-path-exists?-test
(t/is (true? (wtt/token-name-path-exists? "border-radius" {"border-radius" {"sm" {:name "sm"}}}))) (t/is (true? (cft/token-name-path-exists? "border-radius" {"border-radius" {"sm" {:name "sm"}}})))
(t/is (true? (wtt/token-name-path-exists? "border-radius" {"border-radius" {:name "sm"}}))) (t/is (true? (cft/token-name-path-exists? "border-radius" {"border-radius" {:name "sm"}})))
(t/is (true? (wtt/token-name-path-exists? "border-radius.sm" {"border-radius" {:name "sm"}}))) (t/is (true? (cft/token-name-path-exists? "border-radius.sm" {"border-radius" {:name "sm"}})))
(t/is (true? (wtt/token-name-path-exists? "border-radius.sm.x" {"border-radius" {:name "sm"}}))) (t/is (true? (cft/token-name-path-exists? "border-radius.sm.x" {"border-radius" {:name "sm"}})))
(t/is (false? (wtt/token-name-path-exists? "other" {"border-radius" {:name "sm"}}))) (t/is (false? (cft/token-name-path-exists? "other" {"border-radius" {:name "sm"}})))
(t/is (false? (wtt/token-name-path-exists? "dark.border-radius.md" {"dark" {"border-radius" {"sm" {:name "sm"}}}})))) (t/is (false? (cft/token-name-path-exists? "dark.border-radius.md" {"dark" {"border-radius" {"sm" {:name "sm"}}}}))))

16
frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs → frontend/src/app/main/data/style_dictionary.cljs
View file

@ -1,15 +1,15 @@
(ns app.main.ui.workspace.tokens.style-dictionary (ns app.main.data.style-dictionary
(:require (:require
["@tokens-studio/sd-transforms" :as sd-transforms] ["@tokens-studio/sd-transforms" :as sd-transforms]
["style-dictionary$default" :as sd] ["style-dictionary$default" :as sd]
[app.common.files.tokens :as cft]
[app.common.logging :as l] [app.common.logging :as l]
[app.common.schema :as sm] [app.common.schema :as sm]
[app.common.transit :as t] [app.common.transit :as t]
[app.common.types.tokens-lib :as ctob] [app.common.types.tokens-lib :as ctob]
[app.main.ui.workspace.tokens.errors :as wte] [app.main.data.tinycolor :as tinycolor]
[app.main.ui.workspace.tokens.tinycolor :as tinycolor] [app.main.data.workspace.tokens.errors :as wte]
[app.main.ui.workspace.tokens.token :as wtt] [app.main.data.workspace.tokens.warnings :as wtw]
[app.main.ui.workspace.tokens.warnings :as wtw]
[app.util.time :as dt] [app.util.time :as dt]
[beicon.v2.core :as rx] [beicon.v2.core :as rx]
[cuerdas.core :as str] [cuerdas.core :as str]
@ -54,7 +54,7 @@
"Parses `value` of a numeric `sd-token` into a map like `{:value 1 :unit \"px\"}`. "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`." If the `value` is not parseable and/or has missing references returns a map with `:errors`."
[value] [value]
(let [parsed-value (wtt/parse-token-value value) (let [parsed-value (cft/parse-token-value value)
out-of-bounds (or (>= (:value parsed-value) sm/max-safe-int) out-of-bounds (or (>= (:value parsed-value) sm/max-safe-int)
(<= (:value parsed-value) sm/min-safe-int))] (<= (:value parsed-value) sm/min-safe-int))]
(if (and parsed-value (not out-of-bounds)) (if (and parsed-value (not out-of-bounds))
@ -72,7 +72,7 @@
If the `value` is parseable but is out of range returns a map with `warnings`." If the `value` is parseable but is out of range returns a map with `warnings`."
[value has-references?] [value has-references?]
(let [parsed-value (wtt/parse-token-value value) (let [parsed-value (cft/parse-token-value value)
out-of-scope (not (<= 0 (:value parsed-value) 1)) out-of-scope (not (<= 0 (:value parsed-value) 1))
references (seq (ctob/find-token-value-references value))] references (seq (ctob/find-token-value-references value))]
(cond (cond
@ -98,7 +98,7 @@
If the `value` is parseable but is out of range returns a map with `warnings`." If the `value` is parseable but is out of range returns a map with `warnings`."
[value has-references?] [value has-references?]
(let [parsed-value (wtt/parse-token-value value) (let [parsed-value (cft/parse-token-value value)
out-of-scope (< (:value parsed-value) 0) out-of-scope (< (:value parsed-value) 0)
references (seq (ctob/find-token-value-references value))] references (seq (ctob/find-token-value-references value))]
(cond (cond

2
frontend/src/app/main/ui/workspace/tokens/tinycolor.cljs → frontend/src/app/main/data/tinycolor.cljs
View file

@ -1,4 +1,4 @@
(ns app.main.ui.workspace.tokens.tinycolor (ns app.main.data.tinycolor
"Bindings for tinycolor2 which supports a wide range of css compatible colors. "Bindings for tinycolor2 which supports a wide range of css compatible colors.
This library was chosen as it is already used by StyleDictionary, This library was chosen as it is already used by StyleDictionary,

24
frontend/src/app/main/ui/workspace/tokens/changes.cljs → frontend/src/app/main/data/workspace/tokens/application.cljs
View file

@ -4,16 +4,19 @@
;; ;;
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.tokens.changes (ns app.main.data.workspace.tokens.application
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.files.tokens :as cft]
[app.common.types.shape.layout :as ctsl] [app.common.types.shape.layout :as ctsl]
[app.common.types.shape.radius :as ctsr] [app.common.types.shape.radius :as ctsr]
[app.common.types.token :as ctt] [app.common.types.token :as ctt]
[app.common.types.tokens-lib :as ctob] [app.common.types.tokens-lib :as ctob]
[app.main.data.event :as ev] [app.main.data.event :as ev]
[app.main.data.helpers :as dsh] [app.main.data.helpers :as dsh]
[app.main.data.style-dictionary :as sd]
[app.main.data.tinycolor :as tinycolor]
[app.main.data.workspace :as udw] [app.main.data.workspace :as udw]
[app.main.data.workspace.colors :as wdc] [app.main.data.workspace.colors :as wdc]
[app.main.data.workspace.shape-layout :as dwsl] [app.main.data.workspace.shape-layout :as dwsl]
@ -21,16 +24,13 @@
[app.main.data.workspace.transforms :as dwt] [app.main.data.workspace.transforms :as dwt]
[app.main.data.workspace.undo :as dwu] [app.main.data.workspace.undo :as dwu]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.workspace.tokens.style-dictionary :as sd]
[app.main.ui.workspace.tokens.tinycolor :as tinycolor]
[app.main.ui.workspace.tokens.token :as wtt]
[beicon.v2.core :as rx] [beicon.v2.core :as rx]
[clojure.set :as set] [clojure.set :as set]
[potok.v2.core :as ptk])) [potok.v2.core :as ptk]))
(declare token-properties) (declare token-properties)
;; Token Updates --------------------------------------------------------------- ;; Events to apply / unapply tokens to shapes ------------------------------------------------------------
(defn apply-token (defn apply-token
"Apply `attributes` that match `token` for `shape-ids`. "Apply `attributes` that match `token` for `shape-ids`.
@ -56,8 +56,8 @@
(keys)) (keys))
[]) [])
resolved-value (get-in resolved-tokens [(wtt/token-identifier token) :resolved-value]) resolved-value (get-in resolved-tokens [(cft/token-identifier token) :resolved-value])
tokenized-attributes (wtt/attributes-map attributes token)] tokenized-attributes (cft/attributes-map attributes token)]
(rx/of (rx/of
(st/emit! (ptk/event ::ev/event {::ev/name "apply-tokens"})) (st/emit! (ptk/event ::ev/event {::ev/name "apply-tokens"}))
(dwu/start-undo-transaction undo-id) (dwu/start-undo-transaction undo-id)
@ -80,7 +80,7 @@
ptk/WatchEvent ptk/WatchEvent
(watch [_ _ _] (watch [_ _ _]
(rx/of (rx/of
(let [remove-token #(when % (wtt/remove-attributes-for-token attributes token %))] (let [remove-token #(when % (cft/remove-attributes-for-token attributes token %))]
(dwsh/update-shapes (dwsh/update-shapes
shape-ids shape-ids
(fn [shape] (fn [shape]
@ -95,7 +95,7 @@
(get token-properties (:type token)) (get token-properties (:type token))
unapply-tokens? unapply-tokens?
(wtt/shapes-token-applied? token shapes (or all-attributes attributes)) (cft/shapes-token-applied? token shapes (or all-attributes attributes))
shape-ids (map :id shapes)] shape-ids (map :id shapes)]
(if unapply-tokens? (if unapply-tokens?
@ -109,7 +109,9 @@
:shape-ids shape-ids :shape-ids shape-ids
:on-update-shape on-update-shape}))))))) :on-update-shape on-update-shape})))))))
;; Shape Updates --------------------------------------------------------------- ;; Events to update the value of attributes with applied tokens ---------------------------------------------------------
;; (note that dwsh/update-shapes function returns an event)
(defn update-shape-radius-all (defn update-shape-radius-all
([value shape-ids attributes] (update-shape-radius-all value shape-ids attributes nil)) ([value shape-ids attributes] (update-shape-radius-all value shape-ids attributes nil))
@ -326,7 +328,7 @@
(dwsl/update-layout-child shape-ids props {:ignore-touched true (dwsl/update-layout-child shape-ids props {:ignore-touched true
:page-id page-id})))))))) :page-id page-id}))))))))
;; Token Types ----------------------------------------------------------------- ;; Map token types to different properties used along the cokde ---------------------------------------------------------
;; FIXME: the values should be lazy evaluated, probably a function, ;; FIXME: the values should be lazy evaluated, probably a function,
;; becasue on future we will need to translate that labels and that ;; becasue on future we will need to translate that labels and that

21
frontend/src/app/main/data/workspace/tokens/color.cljs Normal file
View file

@ -0,0 +1,21 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.data.workspace.tokens.color
(:require
[app.common.files.tokens :as cft]
[app.main.data.tinycolor :as tinycolor]))
(defn color-bullet-color [token-color-value]
(when-let [tc (tinycolor/valid-color token-color-value)]
(if (tinycolor/alpha tc)
{:color (tinycolor/->hex-string tc)
:opacity (tinycolor/alpha tc)}
(tinycolor/->hex-string tc))))
(defn resolved-token-bullet-color [{:keys [resolved-value] :as token}]
(when (and resolved-value (cft/color-token? token))
(color-bullet-color resolved-value)))

2
frontend/src/app/main/ui/workspace/tokens/errors.cljs → frontend/src/app/main/data/workspace/tokens/errors.cljs
View file

@ -1,4 +1,4 @@
(ns app.main.ui.workspace.tokens.errors (ns app.main.data.workspace.tokens.errors
(:require (:require
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[cuerdas.core :as str])) [cuerdas.core :as str]))

20
frontend/src/app/main/data/tokens.cljs → frontend/src/app/main/data/workspace/tokens/library_edit.cljs
View file

@ -4,7 +4,7 @@
;; ;;
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.data.tokens (ns app.main.data.workspace.tokens.library-edit
(:require (:require
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.files.changes-builder :as pcb] [app.common.files.changes-builder :as pcb]
@ -18,7 +18,7 @@
[app.main.data.helpers :as dsh] [app.main.data.helpers :as dsh]
[app.main.data.notifications :as ntf] [app.main.data.notifications :as ntf]
[app.main.data.workspace.shapes :as dwsh] [app.main.data.workspace.shapes :as dwsh]
[app.main.ui.workspace.tokens.update :as wtu] [app.main.data.workspace.tokens.propagation :as dwtp]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[beicon.v2.core :as rx] [beicon.v2.core :as rx]
[potok.v2.core :as ptk])) [potok.v2.core :as ptk]))
@ -123,7 +123,7 @@
(pcb/update-active-token-themes active-token-themes' prev-active-token-themes))] (pcb/update-active-token-themes active-token-themes' prev-active-token-themes))]
(rx/of (rx/of
(dch/commit-changes changes) (dch/commit-changes changes)
(wtu/update-workspace-tokens)))))) (dwtp/propagate-workspace-tokens))))))
(defn delete-token-theme [group theme-name] (defn delete-token-theme [group theme-name]
(ptk/reify ::delete-token-theme (ptk/reify ::delete-token-theme
@ -135,7 +135,7 @@
(pcb/set-token-theme group theme-name nil))] (pcb/set-token-theme group theme-name nil))]
(rx/of (rx/of
(dch/commit-changes changes) (dch/commit-changes changes)
(wtu/update-workspace-tokens)))))) (dwtp/propagate-workspace-tokens))))))
(defn create-token-set (defn create-token-set
[set-name] [set-name]
@ -221,7 +221,7 @@
(clt/generate-toggle-token-set tlib name))] (clt/generate-toggle-token-set tlib name))]
(rx/of (dch/commit-changes changes) (rx/of (dch/commit-changes changes)
(wtu/update-workspace-tokens)))))) (dwtp/propagate-workspace-tokens))))))
(defn toggle-token-set-group [group-path] (defn toggle-token-set-group [group-path]
(ptk/reify ::toggle-token-set-group (ptk/reify ::toggle-token-set-group
@ -233,7 +233,7 @@
(clt/generate-toggle-token-set-group (get-tokens-lib state) group-path))] (clt/generate-toggle-token-set-group (get-tokens-lib state) group-path))]
(rx/of (rx/of
(dch/commit-changes changes) (dch/commit-changes changes)
(wtu/update-workspace-tokens)))))) (dwtp/propagate-workspace-tokens))))))
(defn import-tokens-lib [lib] (defn import-tokens-lib [lib]
(ptk/reify ::import-tokens-lib (ptk/reify ::import-tokens-lib
@ -244,7 +244,7 @@
(pcb/with-library-data data) (pcb/with-library-data data)
(pcb/set-tokens-lib lib))] (pcb/set-tokens-lib lib))]
(rx/of (dch/commit-changes changes) (rx/of (dch/commit-changes changes)
(wtu/update-workspace-tokens)))))) (dwtp/propagate-workspace-tokens))))))
(defn delete-token-set-path (defn delete-token-set-path
[group? path] [group? path]
@ -256,7 +256,7 @@
(pcb/with-library-data data) (pcb/with-library-data data)
(pcb/set-token-set (ctob/join-set-path path) group? nil))] (pcb/set-token-set (ctob/join-set-path path) group? nil))]
(rx/of (dch/commit-changes changes) (rx/of (dch/commit-changes changes)
(wtu/update-workspace-tokens)))))) (dwtp/propagate-workspace-tokens))))))
(defn drop-error [{:keys [error to-path]}] (defn drop-error [{:keys [error to-path]}]
(ptk/reify ::drop-error (ptk/reify ::drop-error
@ -283,7 +283,7 @@
(when-let [changes (clt/generate-move-token-set-group (pcb/empty-changes it) (get-tokens-lib state) drop-opts)] (when-let [changes (clt/generate-move-token-set-group (pcb/empty-changes it) (get-tokens-lib state) drop-opts)]
(rx/of (rx/of
(dch/commit-changes changes) (dch/commit-changes changes)
(wtu/update-workspace-tokens))) (dwtp/propagate-workspace-tokens)))
(catch :default e (catch :default e
(rx/of (rx/of
(drop-error (ex-data e)))))))) (drop-error (ex-data e))))))))
@ -300,7 +300,7 @@
changes (-> (pcb/empty-changes it) changes (-> (pcb/empty-changes it)
(clt/generate-move-token-set tokens-lib params))] (clt/generate-move-token-set tokens-lib params))]
(rx/of (dch/commit-changes changes) (rx/of (dch/commit-changes changes)
(wtu/update-workspace-tokens))) (dwtp/propagate-workspace-tokens)))
(catch :default cause (catch :default cause
(rx/of (drop-error (ex-data cause)))))))) (rx/of (drop-error (ex-data cause))))))))

59
frontend/src/app/main/ui/workspace/tokens/update.cljs → frontend/src/app/main/data/workspace/tokens/propagation.cljs
View file

@ -4,18 +4,18 @@
;; ;;
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.tokens.update (ns app.main.data.workspace.tokens.propagation
(:require (:require
[app.common.files.helpers :as cfh] [app.common.files.helpers :as cfh]
[app.common.logging :as l] [app.common.logging :as l]
[app.common.types.token :as ctt] [app.common.types.token :as ctt]
[app.common.types.tokens-lib :as ctob] [app.common.types.tokens-lib :as ctob]
[app.main.data.helpers :as dsh] [app.main.data.helpers :as dsh]
[app.main.data.style-dictionary :as sd]
[app.main.data.workspace.shapes :as dwsh] [app.main.data.workspace.shapes :as dwsh]
[app.main.data.workspace.thumbnails :as dwt] [app.main.data.workspace.thumbnails :as dwt]
[app.main.data.workspace.tokens.application :as dwta]
[app.main.data.workspace.undo :as dwu] [app.main.data.workspace.undo :as dwu]
[app.main.ui.workspace.tokens.changes :as wtch]
[app.main.ui.workspace.tokens.style-dictionary :as wtsd]
[app.util.time :as dt] [app.util.time :as dt]
[beicon.v2.core :as rx] [beicon.v2.core :as rx]
[clojure.data :as data] [clojure.data :as data]
@ -24,21 +24,21 @@
;; Constants ------------------------------------------------------------------- ;; Constants -------------------------------------------------------------------
(def filter-existing-values? false) (def ^:private filter-existing-values? false)
(def attributes->shape-update (def ^:private attributes->shape-update
{ctt/border-radius-keys wtch/update-shape-radius-for-corners {ctt/border-radius-keys dwta/update-shape-radius-for-corners
ctt/color-keys wtch/update-fill-stroke ctt/color-keys dwta/update-fill-stroke
ctt/stroke-width-keys wtch/update-stroke-width ctt/stroke-width-keys dwta/update-stroke-width
ctt/sizing-keys wtch/update-shape-dimensions ctt/sizing-keys dwta/update-shape-dimensions
ctt/opacity-keys wtch/update-opacity ctt/opacity-keys dwta/update-opacity
#{:x :y} wtch/update-shape-position #{:x :y} dwta/update-shape-position
#{:p1 :p2 :p3 :p4} wtch/update-layout-padding #{:p1 :p2 :p3 :p4} dwta/update-layout-padding
#{:m1 :m2 :m3 :m4} wtch/update-layout-item-margin #{:m1 :m2 :m3 :m4} dwta/update-layout-item-margin
#{:column-gap :row-gap} wtch/update-layout-spacing #{:column-gap :row-gap} dwta/update-layout-spacing
#{:width :height} wtch/update-shape-dimensions #{:width :height} dwta/update-shape-dimensions
#{:layout-item-min-w :layout-item-min-h :layout-item-max-w :layout-item-max-h} wtch/update-layout-sizing-limits #{:layout-item-min-w :layout-item-min-h :layout-item-max-w :layout-item-max-h} dwta/update-layout-sizing-limits
ctt/rotation-keys wtch/update-rotation}) ctt/rotation-keys dwta/update-rotation})
(def attribute-actions-map (def attribute-actions-map
(reduce (reduce
@ -48,6 +48,7 @@
;; Helpers --------------------------------------------------------------------- ;; Helpers ---------------------------------------------------------------------
;; TODO: see if this can be replaced by more standard functions
(defn deep-merge (defn deep-merge
"Like d/deep-merge but unions set values." "Like d/deep-merge but unions set values."
([a b] ([a b]
@ -60,7 +61,7 @@
;; Data flows ------------------------------------------------------------------ ;; Data flows ------------------------------------------------------------------
(defn invert-collect-key-vals (defn- invert-collect-key-vals
[xs resolved-tokens shape] [xs resolved-tokens shape]
(-> (reduce (-> (reduce
(fn [acc [k v]] (fn [acc [k v]]
@ -74,7 +75,7 @@
(update acc resolved-value (fnil conj #{}) k)))) (update acc resolved-value (fnil conj #{}) k))))
{} xs))) {} xs)))
(defn split-attribute-groups [attrs-values-map] (defn- split-attribute-groups [attrs-values-map]
(reduce (reduce
(fn [acc [attrs v]] (fn [acc [attrs v]]
(cond (cond
@ -91,7 +92,7 @@
attrs (assoc acc attrs v))) attrs (assoc acc attrs v)))
{} attrs-values-map)) {} attrs-values-map))
(defn shape-ids-by-values (defn- shape-ids-by-values
[attrs-values-map object-id] [attrs-values-map object-id]
(->> (map (fn [[value attrs]] [attrs {value #{object-id}}]) attrs-values-map) (->> (map (fn [[value attrs]] [attrs {value #{object-id}}]) attrs-values-map)
(into {}))) (into {})))
@ -121,7 +122,6 @@
[tokens frame-ids text-ids]))) [tokens frame-ids text-ids])))
;; FIXME: revisit this
(defn- actionize-shapes-update-info [page-id shapes-update-info] (defn- actionize-shapes-update-info [page-id shapes-update-info]
(mapcat (fn [[attrs update-infos]] (mapcat (fn [[attrs update-infos]]
(let [action (some attribute-actions-map attrs)] (let [action (some attribute-actions-map attrs)]
@ -131,14 +131,15 @@
update-infos))) update-infos)))
shapes-update-info)) shapes-update-info))
(defn update-tokens (defn propagate-tokens
"Propagate tokens values to all shapes where they are applied"
[state resolved-tokens] [state resolved-tokens]
(let [file-id (get state :current-file-id) (let [file-id (get state :current-file-id)
current-page-id (get state :current-page-id) current-page-id (get state :current-page-id)
fdata (dsh/lookup-file-data state file-id) fdata (dsh/lookup-file-data state file-id)
tpoint (dt/tpoint-ms)] tpoint (dt/tpoint-ms)]
(l/inf :status "START" :hint "update-tokens") (l/inf :status "START" :hint "propagate-tokens")
(->> (rx/concat (->> (rx/concat
(rx/of current-page-id) (rx/of current-page-id)
(->> (rx/from (:pages fdata)) (->> (rx/from (:pages fdata))
@ -155,7 +156,7 @@
(actionize-shapes-update-info page-id attrs)] (actionize-shapes-update-info page-id attrs)]
(l/inf :status "PROGRESS" (l/inf :status "PROGRESS"
:hint "update-tokens" :hint "propagate-tokens"
:page-id (str page-id) :page-id (str page-id)
:elapsed (tpoint) :elapsed (tpoint)
::l/sync? true) ::l/sync? true)
@ -175,21 +176,21 @@
(rx/finalize (rx/finalize
(fn [_] (fn [_]
(let [elapsed (tpoint)] (let [elapsed (tpoint)]
(l/inf :status "END" :hint "update-tokens" :elapsed elapsed))))))) (l/inf :status "END" :hint "propagate-tokens" :elapsed elapsed)))))))
(defn update-workspace-tokens (defn propagate-workspace-tokens
[] []
(ptk/reify ::update-workspace-tokens (ptk/reify ::propagate-workspace-tokens
ptk/WatchEvent ptk/WatchEvent
(watch [_ state _] (watch [_ state _]
(when-let [tokens-lib (-> (dsh/lookup-file-data state) (when-let [tokens-lib (-> (dsh/lookup-file-data state)
(get :tokens-lib))] (get :tokens-lib))]
(let [tokens (-> (ctob/get-active-themes-set-tokens tokens-lib) (let [tokens (-> (ctob/get-active-themes-set-tokens tokens-lib)
(wtsd/resolve-tokens+))] (sd/resolve-tokens+))]
(->> (rx/from tokens) (->> (rx/from tokens)
(rx/mapcat (fn [sd-tokens] (rx/mapcat (fn [sd-tokens]
(let [undo-id (js/Symbol)] (let [undo-id (js/Symbol)]
(rx/concat (rx/concat
(rx/of (dwu/start-undo-transaction undo-id :timeout false)) (rx/of (dwu/start-undo-transaction undo-id :timeout false))
(update-tokens state sd-tokens) (propagate-tokens state sd-tokens)
(rx/of (dwu/commit-undo-transaction undo-id)))))))))))) (rx/of (dwu/commit-undo-transaction undo-id))))))))))))

2
frontend/src/app/main/data/workspace/tokens/selected_set.cljs
View file

@ -11,7 +11,7 @@
[app.common.types.tokens-lib :as ctob] [app.common.types.tokens-lib :as ctob]
[app.main.data.helpers :as dsh])) [app.main.data.helpers :as dsh]))
(defn get-selected-token-set-name [state] (defn- get-selected-token-set-name [state]
(or (get-in state [:workspace-tokens :selected-token-set-name]) (or (get-in state [:workspace-tokens :selected-token-set-name])
(some-> (dsh/lookup-file-data state) (some-> (dsh/lookup-file-data state)
(get :tokens-lib) (get :tokens-lib)

2
frontend/src/app/main/ui/workspace/tokens/warnings.cljs → frontend/src/app/main/data/workspace/tokens/warnings.cljs
View file

@ -1,4 +1,4 @@
(ns app.main.ui.workspace.tokens.warnings (ns app.main.data.workspace.tokens.warnings
(:require (:require
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[cuerdas.core :as str])) [cuerdas.core :as str]))

70
frontend/src/app/main/ui/workspace/tokens/common.cljs
View file

@ -1,70 +0,0 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.tokens.common
(:require
[app.common.data :as d]
[app.main.data.shortcuts :as dsc]
[app.main.store :as st]
[app.util.dom :as dom]
[app.util.globals :as globals]
[app.util.keyboard :as kbd]
[cuerdas.core :as str]
[goog.events :as events]
[rumext.v2 :as mf])
(:import goog.events.EventType))
;; Helpers ---------------------------------------------------------------------
(defn camel-keys [m]
(->> m
(d/deep-mapm
(fn [[k v]]
(if (or (keyword? k) (string? k))
[(keyword (str/camel (name k))) v]
[k v])))))
(defn direction-select
"Returns next `n` in `direction` while wrapping around at the last item at the count of `coll`.
`direction` accepts `:up` or `:down`."
[direction n coll]
(let [last-n (dec (count coll))
next-n (case direction
:up (dec n)
:down (inc n))
wrap-around-n (cond
(neg? next-n) last-n
(> next-n last-n) 0
:else next-n)]
wrap-around-n))
(defn use-arrow-highlight [{:keys [shortcuts-key options on-select]}]
(let [highlighted* (mf/use-state nil)
highlighted (deref highlighted*)
on-dehighlight #(reset! highlighted* nil)
on-keyup (fn [event]
(cond
(and (kbd/enter? event) highlighted) (on-select (nth options highlighted))
(kbd/up-arrow? event) (do
(dom/prevent-default event)
(->> (direction-select :up (or highlighted 0) options)
(reset! highlighted*)))
(kbd/down-arrow? event) (do
(dom/prevent-default event)
(->> (direction-select :down (or highlighted -1) options)
(reset! highlighted*)))))]
(mf/with-effect [highlighted]
(let [shortcuts-key shortcuts-key
keys [(events/listen globals/document EventType.KEYUP on-keyup)
(events/listen globals/document EventType.KEYDOWN dom/prevent-default)]]
(st/emit! (dsc/push-shortcuts shortcuts-key {}))
(fn []
(doseq [key keys]
(events/unlistenByKey key))
(st/emit! (dsc/pop-shortcuts shortcuts-key)))))
{:highlighted highlighted
:on-dehighlight on-dehighlight}))

4
frontend/src/app/main/ui/workspace/tokens/components/controls/input_token_color_bullet.cljs
View file

@ -7,8 +7,8 @@
(ns app.main.ui.workspace.tokens.components.controls.input-token-color-bullet (ns app.main.ui.workspace.tokens.components.controls.input-token-color-bullet
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.main.data.workspace.tokens.color :as dwtc]
[app.main.ui.components.color-bullet :refer [color-bullet]] [app.main.ui.components.color-bullet :refer [color-bullet]]
[app.main.ui.workspace.tokens.token :as wtt]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(def ^:private schema::input-token-color-bullet (def ^:private schema::input-token-color-bullet
@ -23,6 +23,6 @@
[:div {:data-testid "token-form-color-bullet" [:div {:data-testid "token-form-color-bullet"
:class (stl/css :input-token-color-bullet) :class (stl/css :input-token-color-bullet)
:on-click on-click} :on-click on-click}
(if-let [color' (wtt/color-bullet-color color)] (if-let [color' (dwtc/color-bullet-color color)]
[:> color-bullet {:color color' :mini true}] [:> color-bullet {:color color' :mini true}]
[:div {:class (stl/css :input-token-color-bullet-placeholder)}])]) [:div {:class (stl/css :input-token-color-bullet-placeholder)}])])

84
frontend/src/app/main/ui/workspace/tokens/context_menu.cljs
View file

@ -9,16 +9,16 @@
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.files.tokens :as cft]
[app.common.types.tokens-lib :as ctob] [app.common.types.tokens-lib :as ctob]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.tokens :as dt]
[app.main.data.workspace.shape-layout :as dwsl] [app.main.data.workspace.shape-layout :as dwsl]
[app.main.data.workspace.tokens.application :as dwta]
[app.main.data.workspace.tokens.library-edit :as dwtl]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]] [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.workspace.tokens.changes :as wtch]
[app.main.ui.workspace.tokens.token :as wtt]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[app.util.timers :as timers] [app.util.timers :as timers]
@ -30,15 +30,15 @@
;; Actions --------------------------------------------------------------------- ;; Actions ---------------------------------------------------------------------
(defn attribute-actions [token selected-shapes attributes] (defn attribute-actions [token selected-shapes attributes]
(let [ids-by-attributes (wtt/shapes-ids-by-applied-attributes token selected-shapes attributes) (let [ids-by-attributes (cft/shapes-ids-by-applied-attributes token selected-shapes attributes)
shape-ids (into #{} (map :id selected-shapes))] shape-ids (into #{} (map :id selected-shapes))]
{:all-selected? (wtt/shapes-applied-all? ids-by-attributes shape-ids attributes) {:all-selected? (cft/shapes-applied-all? ids-by-attributes shape-ids attributes)
:shape-ids shape-ids :shape-ids shape-ids
:selected-pred #(seq (% ids-by-attributes))})) :selected-pred #(seq (% ids-by-attributes))}))
(defn generic-attribute-actions [attributes title {:keys [token selected-shapes on-update-shape hint]}] (defn generic-attribute-actions [attributes title {:keys [token selected-shapes on-update-shape hint]}]
(let [on-update-shape-fn (or on-update-shape (let [on-update-shape-fn (or on-update-shape
(-> (wtch/get-token-properties token) (-> (dwta/get-token-properties token)
(:on-update-shape))) (:on-update-shape)))
{:keys [selected-pred shape-ids]} (attribute-actions token selected-shapes attributes)] {:keys [selected-pred shape-ids]} (attribute-actions token selected-shapes attributes)]
(map (fn [attribute] (map (fn [attribute]
@ -52,8 +52,8 @@
:selected? selected? :selected? selected?
:action (fn [] :action (fn []
(if selected? (if selected?
(st/emit! (wtch/unapply-token props)) (st/emit! (dwta/unapply-token props))
(st/emit! (wtch/apply-token (assoc props :on-update-shape on-update-shape-fn)))))})) (st/emit! (dwta/apply-token (assoc props :on-update-shape on-update-shape-fn)))))}))
attributes))) attributes)))
(defn all-or-separate-actions [{:keys [attribute-labels on-update-shape-all on-update-shape hint]} (defn all-or-separate-actions [{:keys [attribute-labels on-update-shape-all on-update-shape hint]}
@ -67,8 +67,8 @@
:selected? all-selected? :selected? all-selected?
:hint hint :hint hint
:action #(if all-selected? :action #(if all-selected?
(st/emit! (wtch/unapply-token props)) (st/emit! (dwta/unapply-token props))
(st/emit! (wtch/apply-token (assoc props :on-update-shape (or on-update-shape-all on-update-shape)))))}) (st/emit! (dwta/apply-token (assoc props :on-update-shape (or on-update-shape-all on-update-shape)))))})
single-actions (map (fn [[attr title]] single-actions (map (fn [[attr title]]
(let [selected? (selected-pred attr)] (let [selected? (selected-pred attr)]
{:title title {:title title
@ -78,10 +78,10 @@
:shape-ids shape-ids} :shape-ids shape-ids}
event (cond event (cond
all-selected? (-> (assoc props :attributes-to-remove attributes) all-selected? (-> (assoc props :attributes-to-remove attributes)
(wtch/apply-token)) (dwta/apply-token))
selected? (wtch/unapply-token props) selected? (dwta/unapply-token props)
:else (-> (assoc props :on-update-shape on-update-shape) :else (-> (assoc props :on-update-shape on-update-shape)
(wtch/apply-token)))] (dwta/apply-token)))]
(st/emit! event))})) (st/emit! event))}))
attribute-labels)] attribute-labels)]
(concat [all-action] single-actions))) (concat [all-action] single-actions)))
@ -105,17 +105,17 @@
:token token :token token
:shape-ids shape-ids}] :shape-ids shape-ids}]
(if all-selected? (if all-selected?
(st/emit! (wtch/unapply-token props)) (st/emit! (dwta/unapply-token props))
(st/emit! (wtch/apply-token (assoc props :on-update-shape on-update-shape))))))} (st/emit! (dwta/apply-token (assoc props :on-update-shape on-update-shape))))))}
{:title "Horizontal" {:title "Horizontal"
:selected? horizontal-selected? :selected? horizontal-selected?
:action (fn [] :action (fn []
(let [props {:token token (let [props {:token token
:shape-ids shape-ids} :shape-ids shape-ids}
event (cond event (cond
all-selected? (wtch/apply-token (assoc props :attributes-to-remove vertical-attrs)) all-selected? (dwta/apply-token (assoc props :attributes-to-remove vertical-attrs))
horizontal-selected? (wtch/apply-token (assoc props :attributes-to-remove horizontal-attrs)) horizontal-selected? (dwta/apply-token (assoc props :attributes-to-remove horizontal-attrs))
:else (wtch/apply-token (assoc props :else (dwta/apply-token (assoc props
:attributes horizontal-attrs :attributes horizontal-attrs
:on-update-shape on-update-shape)))] :on-update-shape on-update-shape)))]
(st/emit! event)))} (st/emit! event)))}
@ -125,9 +125,9 @@
(let [props {:token token (let [props {:token token
:shape-ids shape-ids} :shape-ids shape-ids}
event (cond event (cond
all-selected? (wtch/apply-token (assoc props :attributes-to-remove horizontal-attrs)) all-selected? (dwta/apply-token (assoc props :attributes-to-remove horizontal-attrs))
vertical-selected? (wtch/apply-token (assoc props :attributes-to-remove vertical-attrs)) vertical-selected? (dwta/apply-token (assoc props :attributes-to-remove vertical-attrs))
:else (wtch/apply-token (assoc props :else (dwta/apply-token (assoc props
:attributes vertical-attrs :attributes vertical-attrs
:on-update-shape on-update-shape)))] :on-update-shape on-update-shape)))]
(st/emit! event)))}] (st/emit! event)))}]
@ -147,10 +147,10 @@
:shape-ids shape-ids} :shape-ids shape-ids}
event (cond event (cond
all-selected? (-> (assoc props :attributes-to-remove attrs) all-selected? (-> (assoc props :attributes-to-remove attrs)
(wtch/apply-token)) (dwta/apply-token))
selected? (wtch/unapply-token props) selected? (dwta/unapply-token props)
:else (-> (assoc props :on-update-shape on-update-shape) :else (-> (assoc props :on-update-shape on-update-shape)
(wtch/apply-token)))] (dwta/apply-token)))]
(st/emit! event))})) (st/emit! event))}))
all-attr-labels)] all-attr-labels)]
(concat multi-items single-items))) (concat multi-items single-items)))
@ -159,13 +159,13 @@
(st/emit! (st/emit!
(when (= (count attributes) 1) (when (= (count attributes) 1)
(dwsl/update-layout shape-ids {:layout-padding-type :multiple})) (dwsl/update-layout shape-ids {:layout-padding-type :multiple}))
(wtch/update-layout-padding value shape-ids attributes))) (dwta/update-layout-padding value shape-ids attributes)))
(defn update-shape-layout-margin [value shape-ids attributes] (defn update-shape-layout-margin [value shape-ids attributes]
(st/emit! (st/emit!
(when (= (count attributes) 1) (when (= (count attributes) 1)
(dwsl/update-layout shape-ids {:layout-item-margin-type :multiple})) (dwsl/update-layout shape-ids {:layout-item-margin-type :multiple}))
(wtch/update-layout-item-margin value shape-ids attributes))) (dwta/update-layout-item-margin value shape-ids attributes)))
(defn spacing-attribute-actions [{:keys [token selected-shapes] :as context-data}] (defn spacing-attribute-actions [{:keys [token selected-shapes] :as context-data}]
(let [padding-items (layout-spacing-items {:token token (let [padding-items (layout-spacing-items {:token token
@ -195,7 +195,7 @@
gap-items (all-or-separate-actions {:attribute-labels {:column-gap "Column Gap" gap-items (all-or-separate-actions {:attribute-labels {:column-gap "Column Gap"
:row-gap "Row Gap"} :row-gap "Row Gap"}
:hint (tr "workspace.token.gaps") :hint (tr "workspace.token.gaps")
:on-update-shape wtch/update-layout-spacing} :on-update-shape dwta/update-layout-spacing}
context-data)] context-data)]
(concat gap-items (concat gap-items
[:separator] [:separator]
@ -208,25 +208,25 @@
(all-or-separate-actions {:attribute-labels {:width "Width" (all-or-separate-actions {:attribute-labels {:width "Width"
:height "Height"} :height "Height"}
:hint (tr "workspace.token.size") :hint (tr "workspace.token.size")
:on-update-shape wtch/update-shape-dimensions} :on-update-shape dwta/update-shape-dimensions}
context-data) context-data)
[:separator] [:separator]
(all-or-separate-actions {:attribute-labels {:layout-item-min-w "Min Width" (all-or-separate-actions {:attribute-labels {:layout-item-min-w "Min Width"
:layout-item-min-h "Min Height"} :layout-item-min-h "Min Height"}
:hint (tr "workspace.token.min-size") :hint (tr "workspace.token.min-size")
:on-update-shape wtch/update-layout-sizing-limits} :on-update-shape dwta/update-layout-sizing-limits}
context-data) context-data)
[:separator] [:separator]
(all-or-separate-actions {:attribute-labels {:layout-item-max-w "Max Width" (all-or-separate-actions {:attribute-labels {:layout-item-max-w "Max Width"
:layout-item-max-h "Max Height"} :layout-item-max-h "Max Height"}
:hint (tr "workspace.token.max-size") :hint (tr "workspace.token.max-size")
:on-update-shape wtch/update-layout-sizing-limits} :on-update-shape dwta/update-layout-sizing-limits}
context-data))) context-data)))
(defn update-shape-radius-for-corners [value shape-ids attributes] (defn update-shape-radius-for-corners [value shape-ids attributes]
(st/emit! (st/emit!
(ptk/data-event :expand-border-radius) (ptk/data-event :expand-border-radius)
(wtch/update-shape-radius-for-corners value shape-ids attributes))) (dwta/update-shape-radius-for-corners value shape-ids attributes)))
(def shape-attribute-actions-map (def shape-attribute-actions-map
(let [stroke-width (partial generic-attribute-actions #{:stroke-width} "Stroke Width")] (let [stroke-width (partial generic-attribute-actions #{:stroke-width} "Stroke Width")]
@ -235,11 +235,11 @@
:r4 "Bottom Left" :r4 "Bottom Left"
:r3 "Bottom Right"} :r3 "Bottom Right"}
:hint (tr "workspace.token.radius") :hint (tr "workspace.token.radius")
:on-update-shape-all wtch/update-shape-radius-all :on-update-shape-all dwta/update-shape-radius-all
:on-update-shape update-shape-radius-for-corners}) :on-update-shape update-shape-radius-for-corners})
:color (fn [context-data] :color (fn [context-data]
[(generic-attribute-actions #{:fill} "Fill" (assoc context-data :on-update-shape wtch/update-fill :hint (tr "workspace.token.color"))) [(generic-attribute-actions #{:fill} "Fill" (assoc context-data :on-update-shape dwta/update-fill :hint (tr "workspace.token.color")))
(generic-attribute-actions #{:stroke-color} "Stroke" (assoc context-data :on-update-shape wtch/update-stroke-color))]) (generic-attribute-actions #{:stroke-color} "Stroke" (assoc context-data :on-update-shape dwta/update-stroke-color))])
:spacing spacing-attribute-actions :spacing spacing-attribute-actions
:sizing sizing-attribute-actions :sizing sizing-attribute-actions
:rotation (partial generic-attribute-actions #{:rotation} "Rotation") :rotation (partial generic-attribute-actions #{:rotation} "Rotation")
@ -252,19 +252,19 @@
:separator :separator
{:title "Border Radius" :submenu :border-radius}] {:title "Border Radius" :submenu :border-radius}]
[:separator] [:separator]
(stroke-width (assoc context-data :on-update-shape wtch/update-stroke-width)) (stroke-width (assoc context-data :on-update-shape dwta/update-stroke-width))
[:separator] [:separator]
(generic-attribute-actions #{:x} "X" (assoc context-data :on-update-shape wtch/update-shape-position :hint (tr "workspace.token.axis"))) (generic-attribute-actions #{:x} "X" (assoc context-data :on-update-shape dwta/update-shape-position :hint (tr "workspace.token.axis")))
(generic-attribute-actions #{:y} "Y" (assoc context-data :on-update-shape wtch/update-shape-position))))})) (generic-attribute-actions #{:y} "Y" (assoc context-data :on-update-shape dwta/update-shape-position))))}))
(defn default-actions [{:keys [token selected-token-set-name]}] (defn default-actions [{:keys [token selected-token-set-name]}]
(let [{:keys [modal]} (wtch/get-token-properties token)] (let [{:keys [modal]} (dwta/get-token-properties token)]
[{:title (tr "workspace.token.edit") [{:title (tr "workspace.token.edit")
:no-selectable true :no-selectable true
:action (fn [event] :action (fn [event]
(let [{:keys [key fields]} modal] (let [{:keys [key fields]} modal]
(dom/stop-propagation event) (dom/stop-propagation event)
(st/emit! (dt/assign-token-context-menu nil) (st/emit! (dwtl/assign-token-context-menu nil)
(modal/show key {:x (.-clientX ^js event) (modal/show key {:x (.-clientX ^js event)
:y (.-clientY ^js event) :y (.-clientY ^js event)
:position :right :position :right
@ -274,10 +274,10 @@
:token token}))))} :token token}))))}
{:title (tr "workspace.token.duplicate") {:title (tr "workspace.token.duplicate")
:no-selectable true :no-selectable true
:action #(st/emit! (dt/duplicate-token (:name token)))} :action #(st/emit! (dwtl/duplicate-token (:name token)))}
{:title (tr "workspace.token.delete") {:title (tr "workspace.token.delete")
:no-selectable true :no-selectable true
:action #(st/emit! (dt/delete-token :action #(st/emit! (dwtl/delete-token
(ctob/prefixed-set-path-string->set-name-string selected-token-set-name) (ctob/prefixed-set-path-string->set-name-string selected-token-set-name)
(:name token)))}])) (:name token)))}]))
@ -446,7 +446,7 @@
(mf/portal (mf/portal
(mf/html (mf/html
[:& dropdown {:show is-open? [:& dropdown {:show is-open?
:on-close #(st/emit! (dt/assign-token-context-menu nil))} :on-close #(st/emit! (dwtl/assign-token-context-menu nil))}
[:div {:class (stl/css :token-context-menu) [:div {:class (stl/css :token-context-menu)
:data-testid "tokens-context-menu-for-token" :data-testid "tokens-context-menu-for-token"
:ref dropdown-ref :ref dropdown-ref

34
frontend/src/app/main/ui/workspace/tokens/core.cljs
View file

@ -1,34 +0,0 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.tokens.core
(:require
[app.common.data :as d]
[app.main.ui.workspace.tokens.token :as wtt]))
;; Helpers ---------------------------------------------------------------------
(defn resolve-token-value [{:keys [value resolved-value] :as _token}]
(or
resolved-value
(d/parse-double value)))
(defn maybe-resolve-token-value [{:keys [value] :as token}]
(when value (resolve-token-value token)))
(defn tokens->select-options [{:keys [shape tokens attributes selected-attributes]}]
(map
(fn [{:keys [name] :as token}]
(cond-> (assoc token :label name)
(wtt/token-applied? token shape (or selected-attributes attributes)) (assoc :selected? true)))
tokens))
(defn tokens-name-map->select-options [{:keys [shape tokens attributes selected-attributes]}]
(map
(fn [[_k {:keys [name] :as token}]]
(cond-> (assoc token :label name)
(wtt/token-applied? token shape (or selected-attributes attributes)) (assoc :selected? true)))
tokens))

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

@ -10,9 +10,16 @@
[app.common.colors :as c] [app.common.colors :as c]
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.files.tokens :as cft]
[app.common.types.tokens-lib :as ctob] [app.common.types.tokens-lib :as ctob]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.tokens :as dt] [app.main.data.style-dictionary :as sd]
[app.main.data.tinycolor :as tinycolor]
[app.main.data.workspace.tokens.application :as dwta]
[app.main.data.workspace.tokens.errors :as wte]
[app.main.data.workspace.tokens.library-edit :as dwtl]
[app.main.data.workspace.tokens.propagation :as dwtp]
[app.main.data.workspace.tokens.warnings :as wtw]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.ds.buttons.button :refer [button*]] [app.main.ui.ds.buttons.button :refer [button*]]
@ -22,15 +29,8 @@
[app.main.ui.ds.notifications.context-notification :refer [context-notification*]] [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
[app.main.ui.workspace.colorpicker :as colorpicker] [app.main.ui.workspace.colorpicker :as colorpicker]
[app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector*]] [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector*]]
[app.main.ui.workspace.tokens.changes :as wtch]
[app.main.ui.workspace.tokens.components.controls.input-token-color-bullet :refer [input-token-color-bullet*]] [app.main.ui.workspace.tokens.components.controls.input-token-color-bullet :refer [input-token-color-bullet*]]
[app.main.ui.workspace.tokens.components.controls.input-tokens :refer [input-tokens*]] [app.main.ui.workspace.tokens.components.controls.input-tokens :refer [input-tokens*]]
[app.main.ui.workspace.tokens.errors :as wte]
[app.main.ui.workspace.tokens.style-dictionary :as sd]
[app.main.ui.workspace.tokens.tinycolor :as tinycolor]
[app.main.ui.workspace.tokens.token :as wtt]
[app.main.ui.workspace.tokens.update :as wtu]
[app.main.ui.workspace.tokens.warnings :as wtw]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.functions :as uf] [app.util.functions :as uf]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
@ -64,7 +64,7 @@
(let [path-exists-schema (let [path-exists-schema
(m/-simple-schema (m/-simple-schema
{:type :token/name-exists {:type :token/name-exists
:pred #(not (wtt/token-name-path-exists? % tokens-tree)) :pred #(not (cft/token-name-path-exists? % tokens-tree))
:type-properties {:error/fn #(str "A token already exists at the path: " (:value %))}})] :type-properties {:error/fn #(str "A token already exists at the path: " (:value %))}})]
(m/schema (m/schema
[:and [:and
@ -239,8 +239,8 @@
[{:keys [token token-type action selected-token-set-name on-display-colorpicker]}] [{:keys [token token-type action selected-token-set-name on-display-colorpicker]}]
(let [create? (not (instance? ctob/Token token)) (let [create? (not (instance? ctob/Token token))
token (or token {:type token-type}) token (or token {:type token-type})
token-properties (wtch/get-token-properties token) token-properties (dwta/get-token-properties token)
color? (wtt/color-token? token) color? (cft/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 (cond-> (mf/deref refs/workspace-active-theme-sets-tokens) active-theme-tokens (cond-> (mf/deref refs/workspace-active-theme-sets-tokens)
@ -254,7 +254,7 @@
:interactive? true}) :interactive? true})
token-path (mf/use-memo token-path (mf/use-memo
(mf/deps (:name token)) (mf/deps (:name token))
#(wtt/token-name->path (:name token))) #(cft/token-name->path (:name token)))
selected-set-tokens-tree (mf/use-memo selected-set-tokens-tree (mf/use-memo
(mf/deps token-path selected-set-tokens) (mf/deps token-path selected-set-tokens)
@ -329,7 +329,7 @@
value-input-ref (mf/use-ref nil) value-input-ref (mf/use-ref nil)
value-ref (mf/use-var (:value token)) value-ref (mf/use-var (:value token))
token-resolve-result* (mf/use-state (get resolved-tokens (wtt/token-identifier token))) token-resolve-result* (mf/use-state (get resolved-tokens (cft/token-identifier token)))
token-resolve-result (deref token-resolve-result*) token-resolve-result (deref token-resolve-result*)
set-resolve-value set-resolve-value
@ -452,16 +452,16 @@
(when (and (seq result) (not err)) (when (and (seq result) (not err))
(st/emit! (st/emit!
(if (ctob/token? token) (if (ctob/token? token)
(dt/update-token (:name token) (dwtl/update-token (:name token)
{:name final-name {:name final-name
:value final-value :value final-value
:description final-description}) :description final-description})
(dt/create-token {:name final-name (dwtl/create-token {:name final-name
:type token-type :type token-type
:value final-value :value final-value
:description final-description})) :description final-description}))
(wtu/update-workspace-tokens) (dwtp/propagate-workspace-tokens)
(modal/hide))))))))) (modal/hide)))))))))
on-delete-token on-delete-token
@ -470,7 +470,7 @@
(fn [e] (fn [e]
(dom/prevent-default e) (dom/prevent-default e)
(modal/hide!) (modal/hide!)
(st/emit! (dt/delete-token (ctob/prefixed-set-path-string->set-name-string selected-token-set-name) (:name token))))) (st/emit! (dwtl/delete-token (ctob/prefixed-set-path-string->set-name-string selected-token-set-name) (:name token)))))
on-cancel on-cancel
(mf/use-fn (mf/use-fn

12
frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
View file

@ -12,7 +12,7 @@
[app.common.types.tokens-lib :as ctob] [app.common.types.tokens-lib :as ctob]
[app.main.data.event :as ev] [app.main.data.event :as ev]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.tokens :as wdt] [app.main.data.workspace.tokens.library-edit :as dwtl]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
@ -117,7 +117,7 @@
(fn [e] (fn [e]
(dom/prevent-default e) (dom/prevent-default e)
(dom/stop-propagation e) (dom/stop-propagation e)
(st/emit! (wdt/delete-token-theme group name))) (st/emit! (dwtl/delete-token-theme group name)))
on-edit-theme on-edit-theme
(fn [e] (fn [e]
(dom/prevent-default e) (dom/prevent-default e)
@ -131,7 +131,7 @@
[:div {:on-click (fn [e] [:div {:on-click (fn [e]
(dom/prevent-default e) (dom/prevent-default e)
(dom/stop-propagation e) (dom/stop-propagation e)
(st/emit! (wdt/toggle-token-theme-active? group name)))} (st/emit! (dwtl/toggle-token-theme-active? group name)))}
[:& switch {:name (tr "workspace.token.theme-name" name) [:& switch {:name (tr "workspace.token.theme-name" name)
:on-change (constantly nil) :on-change (constantly nil)
:selected? selected?}]]] :selected? selected?}]]]
@ -292,7 +292,7 @@
(mf/use-fn (mf/use-fn
(mf/deps current-theme on-back) (mf/deps current-theme on-back)
(fn [] (fn []
(st/emit! (wdt/delete-token-theme (:group current-theme) (:name current-theme))) (st/emit! (dwtl/delete-token-theme (:group current-theme) (:name current-theme)))
(on-back))) (on-back)))
;; Sets tree handlers ;; Sets tree handlers
@ -386,7 +386,7 @@
(mf/use-fn (mf/use-fn
(mf/deps theme) (mf/deps theme)
(fn [theme'] (fn [theme']
(st/emit! (wdt/update-token-theme [(:group theme) (:name theme)] theme'))))] (st/emit! (dwtl/update-token-theme [(:group theme) (:name theme)] theme'))))]
[:> edit-create-theme* [:> edit-create-theme*
{:change-view change-view {:change-view change-view
@ -402,7 +402,7 @@
(mf/use-fn (mf/use-fn
(fn [theme] (fn [theme]
(st/emit! (ptk/event ::ev/event {::ev/name "create-tokens-theme"}) (st/emit! (ptk/event ::ev/event {::ev/name "create-tokens-theme"})
(wdt/create-token-theme theme)))) (dwtl/create-token-theme theme))))
has-prev-view (has-prev-view (:prev-type state))] has-prev-view (has-prev-view (:prev-type state))]
[:> edit-create-theme* [:> edit-create-theme*

34
frontend/src/app/main/ui/workspace/tokens/sets.cljs
View file

@ -10,7 +10,7 @@
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.types.tokens-lib :as ctob] [app.common.types.tokens-lib :as ctob]
[app.main.data.event :as ev] [app.main.data.event :as ev]
[app.main.data.tokens :as dt] [app.main.data.workspace.tokens.library-edit :as dwtl]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.context :as ctx] [app.main.ui.context :as ctx]
@ -31,26 +31,26 @@
(defn- on-start-creation (defn- on-start-creation
[] []
(st/emit! (dt/start-token-set-creation []))) (st/emit! (dwtl/start-token-set-creation [])))
(defn- on-toggle-token-set-click [name] (defn- on-toggle-token-set-click [name]
(st/emit! (dt/toggle-token-set name))) (st/emit! (dwtl/toggle-token-set name)))
(defn- on-toggle-token-set-group-click [path] (defn- on-toggle-token-set-group-click [path]
(st/emit! (dt/toggle-token-set-group path))) (st/emit! (dwtl/toggle-token-set-group path)))
(defn- on-select-token-set-click [name] (defn- on-select-token-set-click [name]
(st/emit! (dt/set-selected-token-set-name name))) (st/emit! (dwtl/set-selected-token-set-name name)))
(defn on-update-token-set (defn on-update-token-set
[token-set name] [token-set name]
(st/emit! (dt/clear-token-set-edition) (st/emit! (dwtl/clear-token-set-edition)
(dt/update-token-set token-set name))) (dwtl/update-token-set token-set name)))
(defn- on-update-token-set-group (defn- on-update-token-set-group
[path name] [path name]
(st/emit! (dt/clear-token-set-edition) (st/emit! (dwtl/clear-token-set-edition)
(dt/rename-token-set-group path name))) (dwtl/rename-token-set-group path name)))
(defn- on-create-token-set (defn- on-create-token-set
[parent-set name] [parent-set name]
@ -63,7 +63,7 @@
(ctob/normalize-set-name name))] (ctob/normalize-set-name name))]
(st/emit! (ptk/data-event ::ev/event {::ev/name "create-token-set" :name name}) (st/emit! (ptk/data-event ::ev/event {::ev/name "create-token-set" :name name})
(dt/create-token-set name)))) (dwtl/create-token-set name))))
(defn group-edition-id (defn group-edition-id
"Prefix editing groups `edition-id` so it can be differentiated from sets with the same id." "Prefix editing groups `edition-id` so it can be differentiated from sets with the same id."
@ -167,7 +167,7 @@
(dom/prevent-default event) (dom/prevent-default event)
(dom/stop-propagation event) (dom/stop-propagation event)
(when (and can-edit? (not is-editing)) (when (and can-edit? (not is-editing))
(st/emit! (dt/assign-token-set-context-menu (st/emit! (dwtl/assign-token-set-context-menu
{:position (dom/get-client-position event) {:position (dom/get-client-position event)
:is-group true :is-group true
:id id :id id
@ -270,7 +270,7 @@
(dom/prevent-default event) (dom/prevent-default event)
(dom/stop-propagation event) (dom/stop-propagation event)
(when (and can-edit? (not is-editing)) (when (and can-edit? (not is-editing))
(st/emit! (dt/assign-token-set-context-menu (st/emit! (dwtl/assign-token-set-context-menu
{:position (dom/get-client-position event) {:position (dom/get-client-position event)
:is-group false :is-group false
:id id :id id
@ -383,8 +383,8 @@
:position position :position position
:collapsed-paths collapsed-paths}] :collapsed-paths collapsed-paths}]
(if (:is-group data) (if (:is-group data)
(st/emit! (dt/drop-token-set-group params)) (st/emit! (dwtl/drop-token-set-group params))
(st/emit! (dt/drop-token-set params)))))) (st/emit! (dwtl/drop-token-set params))))))
on-toggle-collapse on-toggle-collapse
(mf/use-fn (mf/use-fn
@ -560,15 +560,15 @@
(mf/deps can-edit?) (mf/deps can-edit?)
(fn [_] (fn [_]
(when can-edit? (when can-edit?
(st/emit! (dt/clear-token-set-edition) (st/emit! (dwtl/clear-token-set-edition)
(dt/clear-token-set-creation))))) (dwtl/clear-token-set-creation)))))
on-start-edition on-start-edition
(mf/use-fn (mf/use-fn
(mf/deps can-edit?) (mf/deps can-edit?)
(fn [id] (fn [id]
(when can-edit? (when can-edit?
(st/emit! (dt/start-token-set-edition id)))))] (st/emit! (dwtl/start-token-set-edition id)))))]
[:> controlled-sets-list* [:> controlled-sets-list*
{:token-sets token-sets {:token-sets token-sets

12
frontend/src/app/main/ui/workspace/tokens/sets_context_menu.cljs
View file

@ -8,7 +8,7 @@
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.data.tokens :as dt] [app.main.data.workspace.tokens.library-edit :as dwtl]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
@ -36,24 +36,24 @@
{::mf/private true} {::mf/private true}
[{:keys [is-group id edition-id path]}] [{:keys [is-group id edition-id path]}]
(let [create-set-at-path (let [create-set-at-path
(mf/use-fn (mf/deps path) #(st/emit! (dt/start-token-set-creation path))) (mf/use-fn (mf/deps path) #(st/emit! (dwtl/start-token-set-creation path)))
on-edit on-edit
(mf/use-fn (mf/use-fn
(mf/deps id) (mf/deps id)
(fn [] (fn []
(st/emit! (dt/start-token-set-edition edition-id)))) (st/emit! (dwtl/start-token-set-edition edition-id))))
on-duplicate on-duplicate
(mf/use-fn (mf/use-fn
(mf/deps is-group id) (mf/deps is-group id)
(fn [] (fn []
(st/emit! (dt/duplicate-token-set id is-group)))) (st/emit! (dwtl/duplicate-token-set id is-group))))
on-delete on-delete
(mf/use-fn (mf/use-fn
(mf/deps is-group path) (mf/deps is-group path)
#(st/emit! (dt/delete-token-set-path is-group path)))] #(st/emit! (dwtl/delete-token-set-path is-group path)))]
[:ul {:class (stl/css :context-list)} [:ul {:class (stl/css :context-list)}
(when is-group (when is-group
@ -75,7 +75,7 @@
(+ (dm/get-prop position :x) 5) (+ (dm/get-prop position :x) 5)
on-close on-close
(mf/use-fn #(st/emit! (dt/assign-token-set-context-menu nil)))] (mf/use-fn #(st/emit! (dwtl/assign-token-set-context-menu nil)))]
[:& dropdown {:show (some? position) [:& dropdown {:show (some? position)
:on-close on-close} :on-close on-close}

24
frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
View file

@ -13,7 +13,10 @@
[app.main.data.event :as ev] [app.main.data.event :as ev]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.notifications :as ntf] [app.main.data.notifications :as ntf]
[app.main.data.tokens :as dt] [app.main.data.style-dictionary :as sd]
[app.main.data.workspace.tokens.application :as dwta]
[app.main.data.workspace.tokens.errors :as wte]
[app.main.data.workspace.tokens.library-edit :as dwtl]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.dropdown-menu :refer [dropdown-menu dropdown-menu-item*]] [app.main.ui.components.dropdown-menu :refer [dropdown-menu dropdown-menu-item*]]
@ -26,12 +29,9 @@
[app.main.ui.hooks :as h] [app.main.ui.hooks :as h]
[app.main.ui.hooks.resize :refer [use-resize-hook]] [app.main.ui.hooks.resize :refer [use-resize-hook]]
[app.main.ui.workspace.sidebar.assets.common :as cmm] [app.main.ui.workspace.sidebar.assets.common :as cmm]
[app.main.ui.workspace.tokens.changes :as wtch]
[app.main.ui.workspace.tokens.context-menu :refer [token-context-menu]] [app.main.ui.workspace.tokens.context-menu :refer [token-context-menu]]
[app.main.ui.workspace.tokens.errors :as wte]
[app.main.ui.workspace.tokens.sets :as tsets] [app.main.ui.workspace.tokens.sets :as tsets]
[app.main.ui.workspace.tokens.sets-context-menu :refer [token-set-context-menu*]] [app.main.ui.workspace.tokens.sets-context-menu :refer [token-set-context-menu*]]
[app.main.ui.workspace.tokens.style-dictionary :as sd]
[app.main.ui.workspace.tokens.theme-select :refer [theme-select]] [app.main.ui.workspace.tokens.theme-select :refer [theme-select]]
[app.main.ui.workspace.tokens.token-pill :refer [token-pill*]] [app.main.ui.workspace.tokens.token-pill :refer [token-pill*]]
[app.util.array :as array] [app.util.array :as array]
@ -70,7 +70,7 @@
{::mf/private true} {::mf/private true}
[{:keys [type tokens selected-shapes active-theme-tokens is-open]}] [{:keys [type tokens selected-shapes active-theme-tokens is-open]}]
(let [{:keys [modal title]} (let [{:keys [modal title]}
(get wtch/token-properties type) (get dwta/token-properties type)
can-edit? can-edit?
(mf/use-ctx ctx/can-edit?) (mf/use-ctx ctx/can-edit?)
@ -83,7 +83,7 @@
(mf/use-fn (mf/use-fn
(fn [event token] (fn [event token]
(dom/prevent-default event) (dom/prevent-default event)
(st/emit! (dt/assign-token-context-menu (st/emit! (dwtl/assign-token-context-menu
{:type :token {:type :token
:position (dom/get-client-position event) :position (dom/get-client-position event)
:errors (:errors token) :errors (:errors token)
@ -92,14 +92,14 @@
on-toggle-open-click on-toggle-open-click
(mf/use-fn (mf/use-fn
(mf/deps is-open type) (mf/deps is-open type)
#(st/emit! (dt/set-token-type-section-open type (not is-open)))) #(st/emit! (dwtl/set-token-type-section-open type (not is-open))))
on-popover-open-click on-popover-open-click
(mf/use-fn (mf/use-fn
(mf/deps type title modal) (mf/deps type title modal)
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(st/emit! (dt/set-token-type-section-open type true) (st/emit! (dwtl/set-token-type-section-open type true)
;; FIXME: use dom/get-client-position ;; FIXME: use dom/get-client-position
(modal/show (:key modal) (modal/show (:key modal)
{:x (.-clientX ^js event) {:x (.-clientX ^js event)
@ -116,7 +116,7 @@
(fn [event token] (fn [event token]
(dom/stop-propagation event) (dom/stop-propagation event)
(when (seq selected-shapes) (when (seq selected-shapes)
(st/emit! (wtch/toggle-token {:token token (st/emit! (dwta/toggle-token {:token token
:shapes selected-shapes})))))] :shapes selected-shapes})))))]
[:div {:on-click on-toggle-open-click :class (stl/css :token-section-wrapper)} [:div {:on-click on-toggle-open-click :class (stl/css :token-section-wrapper)}
@ -151,7 +151,7 @@
[tokens-by-type] [tokens-by-type]
(loop [empty #js [] (loop [empty #js []
filled #js [] filled #js []
types (-> wtch/token-properties keys seq)] types (-> dwta/token-properties keys seq)]
(if-let [type (first types)] (if-let [type (first types)]
(if (not-empty (get tokens-by-type type)) (if (not-empty (get tokens-by-type type))
(recur empty (recur empty
@ -325,7 +325,7 @@
(let [match (->> (ctob/get-sets tokens-lib) (let [match (->> (ctob/get-sets tokens-lib)
(first) (first)
(:name))] (:name))]
(st/emit! (dt/set-selected-token-set-name match))))) (st/emit! (dwtl/set-selected-token-set-name match)))))
[:* [:*
[:& token-context-menu] [:& token-context-menu]
@ -394,7 +394,7 @@
(sd/process-json-stream {:file-name file-name}) (sd/process-json-stream {:file-name file-name})
(rx/subs! (fn [lib] (rx/subs! (fn [lib]
(st/emit! (ptk/data-event ::ev/event {::ev/name "import-tokens"}) (st/emit! (ptk/data-event ::ev/event {::ev/name "import-tokens"})
(dt/import-tokens-lib lib))) (dwtl/import-tokens-lib lib)))
(fn [err] (fn [err]
(js/console.error err) (js/console.error err)
(st/emit! (ntf/show {:content (wte/humanize-errors [(ex-data err)]) (st/emit! (ntf/show {:content (wte/humanize-errors [(ex-data err)])

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

@ -11,7 +11,7 @@
[app.common.types.tokens-lib :as ctob] [app.common.types.tokens-lib :as ctob]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.tokens :as wdt] [app.main.data.workspace.tokens.library-edit :as dwtl]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
@ -31,7 +31,7 @@
selected? (get active-theme-paths theme-id) selected? (get active-theme-paths theme-id)
select-theme (fn [e] select-theme (fn [e]
(dom/stop-propagation e) (dom/stop-propagation e)
(st/emit! (wdt/toggle-token-theme-active? group name)) (st/emit! (dwtl/toggle-token-theme-active? group name))
(on-close))]] (on-close))]]
[:li {:key theme-id [:li {:key theme-id
:role "option" :role "option"

24
frontend/src/app/main/ui/workspace/tokens/token_pill.cljs
View file

@ -11,12 +11,13 @@
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.files.helpers :as cfh] [app.common.files.helpers :as cfh]
[app.common.files.tokens :as cft]
[app.main.data.workspace.tokens.application :as dwta]
[app.main.data.workspace.tokens.color :as dwtc]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.ui.components.color-bullet :refer [color-bullet]] [app.main.ui.components.color-bullet :refer [color-bullet]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]] [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.ds.foundations.utilities.token.token-status :refer [token-status-icon*]] [app.main.ui.ds.foundations.utilities.token.token-status :refer [token-status-icon*]]
[app.main.ui.workspace.tokens.changes :as wtch]
[app.main.ui.workspace.tokens.token :as wtt]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[cuerdas.core :as str] [cuerdas.core :as str]
@ -80,6 +81,7 @@
:y "Y"}) :y "Y"})
;; Helper functions ;; Helper functions
(defn partially-applied-attr (defn partially-applied-attr
"Translates partially applied attributes based on the dictionary." "Translates partially applied attributes based on the dictionary."
[app-token-keys is-applied {:keys [attributes all-attributes]}] [app-token-keys is-applied {:keys [attributes all-attributes]}]
@ -106,7 +108,7 @@
(let [{:keys [name value type resolved-value]} token (let [{:keys [name value type resolved-value]} token
resolved-value-theme (:resolved-value theme-token) resolved-value-theme (:resolved-value theme-token)
resolved-value (or resolved-value-theme resolved-value) resolved-value (or resolved-value-theme resolved-value)
{:keys [title] :as token-props} (wtch/get-token-properties theme-token) {:keys [title] :as token-props} (dwta/get-token-properties theme-token)
applied-tokens (:applied-tokens shape) applied-tokens (:applied-tokens shape)
app-token-vals (set (vals applied-tokens)) app-token-vals (set (vals applied-tokens))
app-token-keys (keys applied-tokens) app-token-keys (keys applied-tokens)
@ -156,9 +158,9 @@
(defn- applied-all-attributes? (defn- applied-all-attributes?
[token selected-shapes attributes] [token selected-shapes attributes]
(let [ids-by-attributes (wtt/shapes-ids-by-applied-attributes token selected-shapes attributes) (let [ids-by-attributes (cft/shapes-ids-by-applied-attributes token selected-shapes attributes)
shape-ids (into #{} xf:map-id selected-shapes)] shape-ids (into #{} xf:map-id selected-shapes)]
(wtt/shapes-applied-all? ids-by-attributes shape-ids attributes))) (cft/shapes-applied-all? ids-by-attributes shape-ids attributes)))
(mf/defc token-pill* (mf/defc token-pill*
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
@ -166,11 +168,11 @@
(let [{:keys [name value errors]} token (let [{:keys [name value errors]} token
has-selected? (pos? (count selected-shapes)) has-selected? (pos? (count selected-shapes))
is-reference? (wtt/is-reference? token) is-reference? (cft/is-reference? token)
contains-path? (str/includes? name ".") contains-path? (str/includes? name ".")
{:keys [attributes all-attributes]} {:keys [attributes all-attributes]}
(get wtch/token-properties (:type token)) (get dwta/token-properties (:type token))
full-applied? full-applied?
(if has-selected? (if has-selected?
@ -179,7 +181,7 @@
applied? applied?
(if has-selected? (if has-selected?
(wtt/shapes-token-applied? token selected-shapes (d/nilv all-attributes attributes)) (cft/shapes-token-applied? token selected-shapes (d/nilv all-attributes attributes))
false) false)
half-applied? half-applied?
@ -201,10 +203,10 @@
no-valid-value) no-valid-value)
color color
(when (wtt/color-token? token) (when (cft/color-token? token)
(let [theme-token (get active-theme-tokens (:name token))] (let [theme-token (get active-theme-tokens (:name token))]
(or (wtt/resolved-token-bullet-color theme-token) (or (dwtc/resolved-token-bullet-color theme-token)
(wtt/resolved-token-bullet-color token)))) (dwtc/resolved-token-bullet-color token))))
on-click on-click
(mf/use-fn (mf/use-fn

78
frontend/test/frontend_tests/logic/components_and_tokens.cljs
View file

@ -15,11 +15,11 @@
[app.common.test-helpers.tokens :as ctht] [app.common.test-helpers.tokens :as ctht]
[app.common.types.tokens-lib :as ctob] [app.common.types.tokens-lib :as ctob]
[app.main.data.helpers :as dsh] [app.main.data.helpers :as dsh]
[app.main.data.tokens :as dt]
[app.main.data.workspace.libraries :as dwl] [app.main.data.workspace.libraries :as dwl]
[app.main.data.workspace.selection :as dws] [app.main.data.workspace.selection :as dws]
[app.main.ui.workspace.tokens.changes :as wtch] [app.main.data.workspace.tokens.application :as dwta]
[app.main.ui.workspace.tokens.update :as wtu] [app.main.data.workspace.tokens.library-edit :as dwtl]
[app.main.data.workspace.tokens.propagation :as dwtp]
[cljs.test :as t :include-macros true] [cljs.test :as t :include-macros true]
[frontend-tests.helpers.pages :as thp] [frontend-tests.helpers.pages :as thp]
[frontend-tests.helpers.state :as ths] [frontend-tests.helpers.state :as ths]
@ -134,10 +134,10 @@
store (ths/setup-store file) store (ths/setup-store file)
;; ==== Action ;; ==== Action
events [(wtch/apply-token {:shape-ids [(cthi/id :frame1)] events [(dwta/apply-token {:shape-ids [(cthi/id :frame1)]
:attributes #{:r1 :r2 :r3 :r4} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "test-token-2") :token (toht/get-token file "test-token-2")
:on-update-shape wtch/update-shape-radius-all})] :on-update-shape dwta/update-shape-radius-all})]
step2 (fn [_] step2 (fn [_]
(let [events2 [(dwl/sync-file (:id file) (:id file))]] (let [events2 [(dwl/sync-file (:id file) (:id file))]]
@ -171,7 +171,7 @@
store (ths/setup-store file) store (ths/setup-store file)
;; ==== Action ;; ==== Action
events [(wtch/unapply-token {:shape-ids [(cthi/id :frame1)] events [(dwta/unapply-token {:shape-ids [(cthi/id :frame1)]
:attributes #{:r1 :r2 :r3 :r4} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "test-token-1")})] :token (toht/get-token file "test-token-1")})]
@ -203,14 +203,14 @@
store (ths/setup-store file) store (ths/setup-store file)
;; ==== Action ;; ==== Action
events [(dt/set-selected-token-set-name "test-token-set") events [(dwtl/set-selected-token-set-name "test-token-set")
(dt/update-token "test-token-1" (dwtl/update-token "test-token-1"
{:name "test-token-1" {:name "test-token-1"
:type :border-radius :type :border-radius
:value 66})] :value 66})]
step2 (fn [_] step2 (fn [_]
(let [events2 [(wtu/update-workspace-tokens) (let [events2 [(dwtp/propagate-workspace-tokens)
(dwl/sync-file (:id file) (:id file))]] (dwl/sync-file (:id file) (:id file))]]
(tohs/run-store-async (tohs/run-store-async
store done events2 store done events2
@ -242,14 +242,14 @@
store (ths/setup-store file) store (ths/setup-store file)
;; ==== Action ;; ==== Action
events [(wtch/apply-token {:shape-ids [(cthi/id :c-frame1)] events [(dwta/apply-token {:shape-ids [(cthi/id :c-frame1)]
:attributes #{:r1 :r2 :r3 :r4} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "test-token-2") :token (toht/get-token file "test-token-2")
:on-update-shape wtch/update-shape-radius-all}) :on-update-shape dwta/update-shape-radius-all})
(wtch/apply-token {:shape-ids [(cthi/id :frame1)] (dwta/apply-token {:shape-ids [(cthi/id :frame1)]
:attributes #{:r1 :r2 :r3 :r4} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "test-token-3") :token (toht/get-token file "test-token-3")
:on-update-shape wtch/update-shape-radius-all})] :on-update-shape dwta/update-shape-radius-all})]
step2 (fn [_] step2 (fn [_]
(let [events2 [(dwl/sync-file (:id file) (:id file))]] (let [events2 [(dwl/sync-file (:id file) (:id file))]]
@ -283,13 +283,13 @@
store (ths/setup-store file) store (ths/setup-store file)
;; ==== Action ;; ==== Action
events [(wtch/unapply-token {:shape-ids [(cthi/id :c-frame1)] events [(dwta/unapply-token {:shape-ids [(cthi/id :c-frame1)]
:attributes #{:r1 :r2 :r3 :r4} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "test-token-1")}) :token (toht/get-token file "test-token-1")})
(wtch/apply-token {:shape-ids [(cthi/id :frame1)] (dwta/apply-token {:shape-ids [(cthi/id :frame1)]
:attributes #{:r1 :r2 :r3 :r4} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "test-token-3") :token (toht/get-token file "test-token-3")
:on-update-shape wtch/update-shape-radius-all})] :on-update-shape dwta/update-shape-radius-all})]
step2 (fn [_] step2 (fn [_]
(let [events2 [(dwl/sync-file (:id file) (:id file))]] (let [events2 [(dwl/sync-file (:id file) (:id file))]]
@ -359,28 +359,28 @@
store (ths/setup-store file) store (ths/setup-store file)
;; ==== Action ;; ==== Action
events [(dt/set-selected-token-set-name "test-token-set") events [(dwtl/set-selected-token-set-name "test-token-set")
(dt/update-token "token-radius" (dwtl/update-token "token-radius"
{:name "token-radius" {:name "token-radius"
:value 30}) :value 30})
(dt/update-token "token-rotation" (dwtl/update-token "token-rotation"
{:name "token-rotation" {:name "token-rotation"
:value 45}) :value 45})
(dt/update-token "token-opacity" (dwtl/update-token "token-opacity"
{:name "token-opacity" {:name "token-opacity"
:value 0.9}) :value 0.9})
(dt/update-token "token-stroke-width" (dwtl/update-token "token-stroke-width"
{:name "token-stroke-width" {:name "token-stroke-width"
:value 8}) :value 8})
(dt/update-token "token-color" (dwtl/update-token "token-color"
{:name "token-color" {:name "token-color"
:value "#ff0000"}) :value "#ff0000"})
(dt/update-token "token-dimensions" (dwtl/update-token "token-dimensions"
{:name "token-dimensions" {:name "token-dimensions"
:value 200})] :value 200})]
step2 (fn [_] step2 (fn [_]
(let [events2 [(wtu/update-workspace-tokens) (let [events2 [(dwtp/propagate-workspace-tokens)
(dwl/sync-file (:id file) (:id file))]] (dwl/sync-file (:id file) (:id file))]]
(tohs/run-store-async (tohs/run-store-async
store done events2 store done events2

2
frontend/test/frontend_tests/runner.cljs
View file

@ -13,7 +13,6 @@
[frontend-tests.tokens.logic.token-data-test] [frontend-tests.tokens.logic.token-data-test]
[frontend-tests.tokens.style-dictionary-test] [frontend-tests.tokens.style-dictionary-test]
[frontend-tests.tokens.token-form-test] [frontend-tests.tokens.token-form-test]
[frontend-tests.tokens.token-test]
[frontend-tests.util-range-tree-test] [frontend-tests.util-range-tree-test]
[frontend-tests.util-simple-math-test] [frontend-tests.util-simple-math-test]
[frontend-tests.util-snap-data-test])) [frontend-tests.util-snap-data-test]))
@ -42,5 +41,4 @@
'frontend-tests.tokens.logic.token-actions-test 'frontend-tests.tokens.logic.token-actions-test
'frontend-tests.tokens.logic.token-data-test 'frontend-tests.tokens.logic.token-data-test
'frontend-tests.tokens.style-dictionary-test 'frontend-tests.tokens.style-dictionary-test
'frontend-tests.tokens.token-test
'frontend-tests.tokens.token-form-test)) 'frontend-tests.tokens.token-form-test))

2
frontend/test/frontend_tests/tokens/helpers/state.cljs
View file

@ -2,7 +2,7 @@
(:require (:require
[app.common.types.tokens-lib :as ctob] [app.common.types.tokens-lib :as ctob]
[app.main.data.helpers :as dsh] [app.main.data.helpers :as dsh]
[app.main.ui.workspace.tokens.style-dictionary :as sd] [app.main.data.style-dictionary :as sd]
[beicon.v2.core :as rx] [beicon.v2.core :as rx]
[potok.v2.core :as ptk])) [potok.v2.core :as ptk]))

6
frontend/test/frontend_tests/tokens/helpers/tokens.cljs
View file

@ -1,8 +1,8 @@
(ns frontend-tests.tokens.helpers.tokens (ns frontend-tests.tokens.helpers.tokens
(:require (:require
[app.common.files.tokens :as cft]
[app.common.test-helpers.ids-map :as thi] [app.common.test-helpers.ids-map :as thi]
[app.common.types.tokens-lib :as ctob] [app.common.types.tokens-lib :as ctob]))
[app.main.ui.workspace.tokens.token :as wtt]))
(defn get-token [file name] (defn get-token [file name]
(some-> (get-in file [:data :tokens-lib]) (some-> (get-in file [:data :tokens-lib])
@ -14,7 +14,7 @@
(let [first-page-id (get-in file [:data :pages 0]) (let [first-page-id (get-in file [:data :pages 0])
shape-id (thi/id shape-label) shape-id (thi/id shape-label)
token (get-token file token-label) token (get-token file token-label)
applied-attributes (wtt/attributes-map attributes token)] applied-attributes (cft/attributes-map attributes token)]
(update-in file [:data (update-in file [:data
:pages-index first-page-id :pages-index first-page-id
:objects shape-id :objects shape-id

86
frontend/test/frontend_tests/tokens/logic/token_actions_test.cljs
View file

@ -4,7 +4,7 @@
[app.common.test-helpers.files :as cthf] [app.common.test-helpers.files :as cthf]
[app.common.test-helpers.shapes :as cths] [app.common.test-helpers.shapes :as cths]
[app.common.types.tokens-lib :as ctob] [app.common.types.tokens-lib :as ctob]
[app.main.ui.workspace.tokens.changes :as wtch] [app.main.data.workspace.tokens.application :as dwta]
[cljs.test :as t :include-macros true] [cljs.test :as t :include-macros true]
[frontend-tests.helpers.pages :as thp] [frontend-tests.helpers.pages :as thp]
[frontend-tests.helpers.state :as ths] [frontend-tests.helpers.state :as ths]
@ -48,10 +48,10 @@
(let [file (setup-file-with-tokens) (let [file (setup-file-with-tokens)
store (ths/setup-store file) store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1) rect-1 (cths/get-shape file :rect-1)
events [(wtch/apply-token {:shape-ids [(:id rect-1)] events [(dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:r1 :r2 :r3 :r4} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "borderRadius.md") :token (toht/get-token file "borderRadius.md")
:on-update-shape wtch/update-shape-radius-all})]] :on-update-shape dwta/update-shape-radius-all})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -73,14 +73,14 @@
(let [file (setup-file-with-tokens) (let [file (setup-file-with-tokens)
store (ths/setup-store file) store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1) rect-1 (cths/get-shape file :rect-1)
events [(wtch/apply-token {:shape-ids [(:id rect-1)] events [(dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:r1 :r2 :r3 :r4} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "borderRadius.sm") :token (toht/get-token file "borderRadius.sm")
:on-update-shape wtch/update-shape-radius-all}) :on-update-shape dwta/update-shape-radius-all})
(wtch/apply-token {:shape-ids [(:id rect-1)] (dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:r1 :r2 :r3 :r4} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "borderRadius.md") :token (toht/get-token file "borderRadius.md")
:on-update-shape wtch/update-shape-radius-all})]] :on-update-shape dwta/update-shape-radius-all})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -101,17 +101,17 @@
store (ths/setup-store file) store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1) rect-1 (cths/get-shape file :rect-1)
events [;; Apply "borderRadius.sm" to all border radius attributes events [;; Apply "borderRadius.sm" to all border radius attributes
(wtch/apply-token {:attributes #{:r1 :r2 :r3 :r4} (dwta/apply-token {:attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "borderRadius.sm") :token (toht/get-token file "borderRadius.sm")
:shape-ids [(:id rect-1)] :shape-ids [(:id rect-1)]
:on-update-shape wtch/update-shape-radius-all}) :on-update-shape dwta/update-shape-radius-all})
;; Apply single `:r1` attribute to same shape ;; Apply single `:r1` attribute to same shape
;; while removing other attributes from the border-radius set ;; while removing other attributes from the border-radius set
;; but keep `:r4` for testing purposes ;; but keep `:r4` for testing purposes
(wtch/apply-token {:attributes #{:r1 :r2 :r3} (dwta/apply-token {:attributes #{:r1 :r2 :r3}
:token (toht/get-token file "borderRadius.md") :token (toht/get-token file "borderRadius.md")
:shape-ids [(:id rect-1)] :shape-ids [(:id rect-1)]
:on-update-shape wtch/update-shape-radius-all})]] :on-update-shape dwta/update-shape-radius-all})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -133,14 +133,14 @@
store (ths/setup-store file) store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1) rect-1 (cths/get-shape file :rect-1)
rect-2 (cths/get-shape file :rect-2) rect-2 (cths/get-shape file :rect-2)
events [(wtch/apply-token {:shape-ids [(:id rect-1)] events [(dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:r3 :r4} :attributes #{:r3 :r4}
:token (toht/get-token file "borderRadius.sm") :token (toht/get-token file "borderRadius.sm")
:on-update-shape wtch/update-shape-radius-for-corners}) :on-update-shape dwta/update-shape-radius-for-corners})
(wtch/apply-token {:shape-ids [(:id rect-2)] (dwta/apply-token {:shape-ids [(:id rect-2)]
:attributes #{:r1 :r2 :r3 :r4} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "borderRadius.sm") :token (toht/get-token file "borderRadius.sm")
:on-update-shape wtch/update-shape-radius-all})]] :on-update-shape dwta/update-shape-radius-all})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -185,22 +185,22 @@
store (ths/setup-store file) store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1) rect-1 (cths/get-shape file :rect-1)
rect-2 (cths/get-shape file :rect-2) rect-2 (cths/get-shape file :rect-2)
events [(wtch/apply-token {:shape-ids [(:id rect-1)] events [(dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:color} :attributes #{:color}
:token (toht/get-token file "color.primary") :token (toht/get-token file "color.primary")
:on-update-shape wtch/update-fill}) :on-update-shape dwta/update-fill})
(wtch/apply-token {:shape-ids [(:id rect-1)] (dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:stroke-color} :attributes #{:stroke-color}
:token (toht/get-token file "color.primary") :token (toht/get-token file "color.primary")
:on-update-shape wtch/update-stroke-color}) :on-update-shape dwta/update-stroke-color})
(wtch/apply-token {:shape-ids [(:id rect-2)] (dwta/apply-token {:shape-ids [(:id rect-2)]
:attributes #{:color} :attributes #{:color}
:token (toht/get-token file "color.secondary") :token (toht/get-token file "color.secondary")
:on-update-shape wtch/update-fill}) :on-update-shape dwta/update-fill})
(wtch/apply-token {:shape-ids [(:id rect-2)] (dwta/apply-token {:shape-ids [(:id rect-2)]
:attributes #{:stroke-color} :attributes #{:stroke-color}
:token (toht/get-token file "color.secondary") :token (toht/get-token file "color.secondary")
:on-update-shape wtch/update-stroke-color})]] :on-update-shape dwta/update-stroke-color})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -239,10 +239,10 @@
#(ctob/add-token-in-set % "Set A" (ctob/make-token dimensions-token)))) #(ctob/add-token-in-set % "Set A" (ctob/make-token dimensions-token))))
store (ths/setup-store file) store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1) rect-1 (cths/get-shape file :rect-1)
events [(wtch/apply-token {:shape-ids [(:id rect-1)] events [(dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:width :height} :attributes #{:width :height}
:token (toht/get-token file "dimensions.sm") :token (toht/get-token file "dimensions.sm")
:on-update-shape wtch/update-shape-dimensions})]] :on-update-shape dwta/update-shape-dimensions})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -272,10 +272,10 @@
store (ths/setup-store file) store (ths/setup-store file)
frame-1 (cths/get-shape file :frame-1) frame-1 (cths/get-shape file :frame-1)
frame-2 (cths/get-shape file :frame-2) frame-2 (cths/get-shape file :frame-2)
events [(wtch/apply-token {:shape-ids [(:id frame-1) (:id frame-2)] events [(dwta/apply-token {:shape-ids [(:id frame-1) (:id frame-2)]
:attributes #{:padding} :attributes #{:padding}
:token (toht/get-token file "padding.sm") :token (toht/get-token file "padding.sm")
:on-update-shape wtch/update-layout-padding})]] :on-update-shape dwta/update-layout-padding})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -303,10 +303,10 @@
#(ctob/add-token-in-set % "Set A" (ctob/make-token sizing-token)))) #(ctob/add-token-in-set % "Set A" (ctob/make-token sizing-token))))
store (ths/setup-store file) store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1) rect-1 (cths/get-shape file :rect-1)
events [(wtch/apply-token {:shape-ids [(:id rect-1)] events [(dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:width :height} :attributes #{:width :height}
:token (toht/get-token file "sizing.sm") :token (toht/get-token file "sizing.sm")
:on-update-shape wtch/update-shape-dimensions})]] :on-update-shape dwta/update-shape-dimensions})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -344,18 +344,18 @@
rect-1 (cths/get-shape file :rect-1) rect-1 (cths/get-shape file :rect-1)
rect-2 (cths/get-shape file :rect-2) rect-2 (cths/get-shape file :rect-2)
rect-3 (cths/get-shape file :rect-3) rect-3 (cths/get-shape file :rect-3)
events [(wtch/apply-token {:shape-ids [(:id rect-1)] events [(dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:opacity} :attributes #{:opacity}
:token (toht/get-token file "opacity.float") :token (toht/get-token file "opacity.float")
:on-update-shape wtch/update-opacity}) :on-update-shape dwta/update-opacity})
(wtch/apply-token {:shape-ids [(:id rect-2)] (dwta/apply-token {:shape-ids [(:id rect-2)]
:attributes #{:opacity} :attributes #{:opacity}
:token (toht/get-token file "opacity.percent") :token (toht/get-token file "opacity.percent")
:on-update-shape wtch/update-opacity}) :on-update-shape dwta/update-opacity})
(wtch/apply-token {:shape-ids [(:id rect-3)] (dwta/apply-token {:shape-ids [(:id rect-3)]
:attributes #{:opacity} :attributes #{:opacity}
:token (toht/get-token file "opacity.invalid") :token (toht/get-token file "opacity.invalid")
:on-update-shape wtch/update-opacity})]] :on-update-shape dwta/update-opacity})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -388,10 +388,10 @@
#(ctob/add-token-in-set % "Set A" (ctob/make-token rotation-token)))) #(ctob/add-token-in-set % "Set A" (ctob/make-token rotation-token))))
store (ths/setup-store file) store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1) rect-1 (cths/get-shape file :rect-1)
events [(wtch/apply-token {:shape-ids [(:id rect-1)] events [(dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:rotation} :attributes #{:rotation}
:token (toht/get-token file "rotation.medium") :token (toht/get-token file "rotation.medium")
:on-update-shape wtch/update-rotation})]] :on-update-shape dwta/update-rotation})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -419,10 +419,10 @@
store (ths/setup-store file) store (ths/setup-store file)
rect-with-stroke (cths/get-shape file :rect-1) rect-with-stroke (cths/get-shape file :rect-1)
rect-without-stroke (cths/get-shape file :rect-2) rect-without-stroke (cths/get-shape file :rect-2)
events [(wtch/apply-token {:shape-ids [(:id rect-with-stroke) (:id rect-without-stroke)] events [(dwta/apply-token {:shape-ids [(:id rect-with-stroke) (:id rect-without-stroke)]
:attributes #{:stroke-width} :attributes #{:stroke-width}
:token (toht/get-token file "stroke-width.sm") :token (toht/get-token file "stroke-width.sm")
:on-update-shape wtch/update-stroke-width})]] :on-update-shape dwta/update-stroke-width})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -445,9 +445,9 @@
store (ths/setup-store file) store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1) rect-1 (cths/get-shape file :rect-1)
rect-2 (cths/get-shape file :rect-2) rect-2 (cths/get-shape file :rect-2)
events [(wtch/toggle-token {:shapes [rect-1 rect-2] events [(dwta/toggle-token {:shapes [rect-1 rect-2]
:token-type-props {:attributes #{:r1 :r2 :r3 :r4} :token-type-props {:attributes #{:r1 :r2 :r3 :r4}
:on-update-shape wtch/update-shape-radius-all} :on-update-shape dwta/update-shape-radius-all}
:token (toht/get-token file "borderRadius.md")})]] :token (toht/get-token file "borderRadius.md")})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
@ -476,7 +476,7 @@
rect-without-token (cths/get-shape file :rect-2) rect-without-token (cths/get-shape file :rect-2)
rect-with-other-token (cths/get-shape file :rect-3) rect-with-other-token (cths/get-shape file :rect-3)
events [(wtch/toggle-token {:shapes [rect-with-token rect-without-token rect-with-other-token] events [(dwta/toggle-token {:shapes [rect-with-token rect-without-token rect-with-other-token]
:token (toht/get-token file "borderRadius.sm") :token (toht/get-token file "borderRadius.sm")
:token-type-props {:attributes #{:r1 :r2 :r3 :r4}}})]] :token-type-props {:attributes #{:r1 :r2 :r3 :r4}}})]]
(tohs/run-store-async (tohs/run-store-async
@ -509,7 +509,7 @@
rect-without-token (cths/get-shape file :rect-2) rect-without-token (cths/get-shape file :rect-2)
rect-with-other-token-2 (cths/get-shape file :rect-3) rect-with-other-token-2 (cths/get-shape file :rect-3)
events [(wtch/toggle-token {:shapes [rect-with-other-token-1 rect-without-token rect-with-other-token-2] events [(dwta/toggle-token {:shapes [rect-with-other-token-1 rect-without-token rect-with-other-token-2]
:token (toht/get-token file "borderRadius.sm") :token (toht/get-token file "borderRadius.sm")
:token-type-props {:attributes #{:r1 :r2 :r3 :r4}}})]] :token-type-props {:attributes #{:r1 :r2 :r3 :r4}}})]]
(tohs/run-store-async (tohs/run-store-async

6
frontend/test/frontend_tests/tokens/logic/token_data_test.cljs
View file

@ -2,7 +2,7 @@
(:require (:require
[app.common.test-helpers.files :as cthf] [app.common.test-helpers.files :as cthf]
[app.common.types.tokens-lib :as ctob] [app.common.types.tokens-lib :as ctob]
[app.main.data.tokens :as dt] [app.main.data.workspace.tokens.library-edit :as dwtl]
[cljs.test :as t :include-macros true] [cljs.test :as t :include-macros true]
[frontend-tests.helpers.pages :as thp] [frontend-tests.helpers.pages :as thp]
[frontend-tests.helpers.state :as ths] [frontend-tests.helpers.state :as ths]
@ -27,7 +27,7 @@
done done
(let [file (setup-file-with-token-lib) (let [file (setup-file-with-token-lib)
store (ths/setup-store file) store (ths/setup-store file)
events [(dt/duplicate-token-set "Set A" false)]] events [(dwtl/duplicate-token-set "Set A" false)]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
@ -46,7 +46,7 @@
done done
(let [file (setup-file-with-token-lib) (let [file (setup-file-with-token-lib)
store (ths/setup-store file) store (ths/setup-store file)
events [(dt/duplicate-token-set "Set B" false)]] events [(dwtl/duplicate-token-set "Set B" false)]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events

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

@ -2,7 +2,7 @@
(:require (:require
[app.common.transit :as tr] [app.common.transit :as tr]
[app.common.types.tokens-lib :as ctob] [app.common.types.tokens-lib :as ctob]
[app.main.ui.workspace.tokens.style-dictionary :as sd] [app.main.data.style-dictionary :as sd]
[beicon.v2.core :as rx] [beicon.v2.core :as rx]
[cljs.test :as t :include-macros true] [cljs.test :as t :include-macros true]
[promesa.core :as p])) [promesa.core :as p]))