3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-31 03:46:11 +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
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.ui.workspace.tokens.tinycolor :as tinycolor]
[clojure.set :as set]
[cuerdas.core :as str]))
@ -128,18 +127,6 @@
(defn color-token? [token]
(= (:type token) :color))
;; FIXME: this should be precalculated ?
(defn is-reference? [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
(ns frontend-tests.tokens.token-test
(ns common-tests.files.tokens-test
(:require
[app.main.ui.workspace.tokens.token :as wtt]
[cljs.test :as t :include-macros true]))
[app.common.files.tokens :as cft]
[clojure.test :as t]))
(t/deftest test-parse-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 -9 :unit nil} (wtt/parse-token-value "-9"))))
(t/is (= {:value 100.1 :unit nil} (cft/parse-token-value "100.1")))
(t/is (= {:value -9.0 :unit nil} (cft/parse-token-value "-9"))))
(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/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/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 "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/is (nil? (wtt/parse-token-value ".3")))))
(t/is (nil? (cft/parse-token-value ".3")))))
(t/deftest token-applied-test
(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/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/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/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/testing "Returns set of matched attributes that fit the applied token"
@ -54,7 +54,7 @@
shape-applied-x-y
shape-applied-all
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
shape-applied-x-y
shape-applied-all)))
@ -62,34 +62,34 @@
shape-applied-x-y
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 (false? (wtt/shapes-applied-all? expected (apply shape-ids shapes) attributes)))
(t/is (true? (cft/shapes-applied-all? expected (shape-ids shape-applied-all) attributes)))
(t/is (false? (cft/shapes-applied-all? expected (apply shape-ids shapes) attributes)))
(shape-ids shape-applied-x
shape-applied-x-y
shape-applied-all))))
(t/deftest tokens-applied-test
(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"}}]
#{:x}))))
(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"}}]
#{: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"}}]
#{:y})))))
(t/deftest name->path-test
(t/is (= ["foo" "bar" "baz"] (wtt/token-name->path "foo.bar.baz")))
(t/is (= ["foo" "bar" "baz"] (wtt/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"] (cft/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/is (true? (wtt/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? (wtt/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 (false? (wtt/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 (true? (cft/token-name-path-exists? "border-radius" {"border-radius" {"sm" {:name "sm"}}})))
(t/is (true? (cft/token-name-path-exists? "border-radius" {"border-radius" {:name "sm"}})))
(t/is (true? (cft/token-name-path-exists? "border-radius.sm" {"border-radius" {:name "sm"}})))
(t/is (true? (cft/token-name-path-exists? "border-radius.sm.x" {"border-radius" {:name "sm"}})))
(t/is (false? (cft/token-name-path-exists? "other" {"border-radius" {: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
["@tokens-studio/sd-transforms" :as sd-transforms]
["style-dictionary$default" :as sd]
[app.common.files.tokens :as cft]
[app.common.logging :as l]
[app.common.schema :as sm]
[app.common.transit :as t]
[app.common.types.tokens-lib :as ctob]
[app.main.ui.workspace.tokens.errors :as wte]
[app.main.ui.workspace.tokens.tinycolor :as tinycolor]
[app.main.ui.workspace.tokens.token :as wtt]
[app.main.ui.workspace.tokens.warnings :as wtw]
[app.main.data.tinycolor :as tinycolor]
[app.main.data.workspace.tokens.errors :as wte]
[app.main.data.workspace.tokens.warnings :as wtw]
[app.util.time :as dt]
[beicon.v2.core :as rx]
[cuerdas.core :as str]
@ -54,7 +54,7 @@
"Parses `value` of a numeric `sd-token` into a map like `{:value 1 :unit \"px\"}`.
If the `value` is not parseable and/or has missing references returns a map with `:errors`."
[value]
(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)
(<= (:value parsed-value) sm/min-safe-int))]
(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`."
[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))
references (seq (ctob/find-token-value-references value))]
(cond
@ -98,7 +98,7 @@
If the `value` is parseable but is out of range returns a map with `warnings`."
[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)
references (seq (ctob/find-token-value-references value))]
(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.
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
(ns app.main.ui.workspace.tokens.changes
(ns app.main.data.workspace.tokens.application
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.files.tokens :as cft]
[app.common.types.shape.layout :as ctsl]
[app.common.types.shape.radius :as ctsr]
[app.common.types.token :as ctt]
[app.common.types.tokens-lib :as ctob]
[app.main.data.event :as ev]
[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.colors :as wdc]
[app.main.data.workspace.shape-layout :as dwsl]
@ -21,16 +24,13 @@
[app.main.data.workspace.transforms :as dwt]
[app.main.data.workspace.undo :as dwu]
[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]
[clojure.set :as set]
[potok.v2.core :as ptk]))
(declare token-properties)
;; Token Updates ---------------------------------------------------------------
;; Events to apply / unapply tokens to shapes ------------------------------------------------------------
(defn apply-token
"Apply `attributes` that match `token` for `shape-ids`.
@ -56,8 +56,8 @@
(keys))
[])
resolved-value (get-in resolved-tokens [(wtt/token-identifier token) :resolved-value])
tokenized-attributes (wtt/attributes-map attributes token)]
resolved-value (get-in resolved-tokens [(cft/token-identifier token) :resolved-value])
tokenized-attributes (cft/attributes-map attributes token)]
(rx/of
(st/emit! (ptk/event ::ev/event {::ev/name "apply-tokens"}))
(dwu/start-undo-transaction undo-id)
@ -80,7 +80,7 @@
ptk/WatchEvent
(watch [_ _ _]
(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
shape-ids
(fn [shape]
@ -95,7 +95,7 @@
(get token-properties (:type token))
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)]
(if unapply-tokens?
@ -109,7 +109,9 @@
:shape-ids shape-ids
: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
([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
: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,
;; 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
[app.util.i18n :refer [tr]]
[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
(ns app.main.data.tokens
(ns app.main.data.workspace.tokens.library-edit
(:require
[app.common.data.macros :as dm]
[app.common.files.changes-builder :as pcb]
@ -18,7 +18,7 @@
[app.main.data.helpers :as dsh]
[app.main.data.notifications :as ntf]
[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]]
[beicon.v2.core :as rx]
[potok.v2.core :as ptk]))
@ -123,7 +123,7 @@
(pcb/update-active-token-themes active-token-themes' prev-active-token-themes))]
(rx/of
(dch/commit-changes changes)
(wtu/update-workspace-tokens))))))
(dwtp/propagate-workspace-tokens))))))
(defn delete-token-theme [group theme-name]
(ptk/reify ::delete-token-theme
@ -135,7 +135,7 @@
(pcb/set-token-theme group theme-name nil))]
(rx/of
(dch/commit-changes changes)
(wtu/update-workspace-tokens))))))
(dwtp/propagate-workspace-tokens))))))
(defn create-token-set
[set-name]
@ -221,7 +221,7 @@
(clt/generate-toggle-token-set tlib name))]
(rx/of (dch/commit-changes changes)
(wtu/update-workspace-tokens))))))
(dwtp/propagate-workspace-tokens))))))
(defn toggle-token-set-group [group-path]
(ptk/reify ::toggle-token-set-group
@ -233,7 +233,7 @@
(clt/generate-toggle-token-set-group (get-tokens-lib state) group-path))]
(rx/of
(dch/commit-changes changes)
(wtu/update-workspace-tokens))))))
(dwtp/propagate-workspace-tokens))))))
(defn import-tokens-lib [lib]
(ptk/reify ::import-tokens-lib
@ -244,7 +244,7 @@
(pcb/with-library-data data)
(pcb/set-tokens-lib lib))]
(rx/of (dch/commit-changes changes)
(wtu/update-workspace-tokens))))))
(dwtp/propagate-workspace-tokens))))))
(defn delete-token-set-path
[group? path]
@ -256,7 +256,7 @@
(pcb/with-library-data data)
(pcb/set-token-set (ctob/join-set-path path) group? nil))]
(rx/of (dch/commit-changes changes)
(wtu/update-workspace-tokens))))))
(dwtp/propagate-workspace-tokens))))))
(defn drop-error [{:keys [error to-path]}]
(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)]
(rx/of
(dch/commit-changes changes)
(wtu/update-workspace-tokens)))
(dwtp/propagate-workspace-tokens)))
(catch :default e
(rx/of
(drop-error (ex-data e))))))))
@ -300,7 +300,7 @@
changes (-> (pcb/empty-changes it)
(clt/generate-move-token-set tokens-lib params))]
(rx/of (dch/commit-changes changes)
(wtu/update-workspace-tokens)))
(dwtp/propagate-workspace-tokens)))
(catch :default 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
(ns app.main.ui.workspace.tokens.update
(ns app.main.data.workspace.tokens.propagation
(:require
[app.common.files.helpers :as cfh]
[app.common.logging :as l]
[app.common.types.token :as ctt]
[app.common.types.tokens-lib :as ctob]
[app.main.data.helpers :as dsh]
[app.main.data.style-dictionary :as sd]
[app.main.data.workspace.shapes :as dwsh]
[app.main.data.workspace.thumbnails :as dwt]
[app.main.data.workspace.tokens.application :as dwta]
[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]
[beicon.v2.core :as rx]
[clojure.data :as data]
@ -24,21 +24,21 @@
;; Constants -------------------------------------------------------------------
(def filter-existing-values? false)
(def ^:private filter-existing-values? false)
(def attributes->shape-update
{ctt/border-radius-keys wtch/update-shape-radius-for-corners
ctt/color-keys wtch/update-fill-stroke
ctt/stroke-width-keys wtch/update-stroke-width
ctt/sizing-keys wtch/update-shape-dimensions
ctt/opacity-keys wtch/update-opacity
#{:x :y} wtch/update-shape-position
#{:p1 :p2 :p3 :p4} wtch/update-layout-padding
#{:m1 :m2 :m3 :m4} wtch/update-layout-item-margin
#{:column-gap :row-gap} wtch/update-layout-spacing
#{:width :height} wtch/update-shape-dimensions
#{:layout-item-min-w :layout-item-min-h :layout-item-max-w :layout-item-max-h} wtch/update-layout-sizing-limits
ctt/rotation-keys wtch/update-rotation})
(def ^:private attributes->shape-update
{ctt/border-radius-keys dwta/update-shape-radius-for-corners
ctt/color-keys dwta/update-fill-stroke
ctt/stroke-width-keys dwta/update-stroke-width
ctt/sizing-keys dwta/update-shape-dimensions
ctt/opacity-keys dwta/update-opacity
#{:x :y} dwta/update-shape-position
#{:p1 :p2 :p3 :p4} dwta/update-layout-padding
#{:m1 :m2 :m3 :m4} dwta/update-layout-item-margin
#{:column-gap :row-gap} dwta/update-layout-spacing
#{:width :height} dwta/update-shape-dimensions
#{:layout-item-min-w :layout-item-min-h :layout-item-max-w :layout-item-max-h} dwta/update-layout-sizing-limits
ctt/rotation-keys dwta/update-rotation})
(def attribute-actions-map
(reduce
@ -48,6 +48,7 @@
;; Helpers ---------------------------------------------------------------------
;; TODO: see if this can be replaced by more standard functions
(defn deep-merge
"Like d/deep-merge but unions set values."
([a b]
@ -60,7 +61,7 @@
;; Data flows ------------------------------------------------------------------
(defn invert-collect-key-vals
(defn- invert-collect-key-vals
[xs resolved-tokens shape]
(-> (reduce
(fn [acc [k v]]
@ -74,7 +75,7 @@
(update acc resolved-value (fnil conj #{}) k))))
{} xs)))
(defn split-attribute-groups [attrs-values-map]
(defn- split-attribute-groups [attrs-values-map]
(reduce
(fn [acc [attrs v]]
(cond
@ -91,7 +92,7 @@
attrs (assoc acc attrs v)))
{} attrs-values-map))
(defn shape-ids-by-values
(defn- shape-ids-by-values
[attrs-values-map object-id]
(->> (map (fn [[value attrs]] [attrs {value #{object-id}}]) attrs-values-map)
(into {})))
@ -121,7 +122,6 @@
[tokens frame-ids text-ids])))
;; FIXME: revisit this
(defn- actionize-shapes-update-info [page-id shapes-update-info]
(mapcat (fn [[attrs update-infos]]
(let [action (some attribute-actions-map attrs)]
@ -131,14 +131,15 @@
update-infos)))
shapes-update-info))
(defn update-tokens
(defn propagate-tokens
"Propagate tokens values to all shapes where they are applied"
[state resolved-tokens]
(let [file-id (get state :current-file-id)
current-page-id (get state :current-page-id)
fdata (dsh/lookup-file-data state file-id)
tpoint (dt/tpoint-ms)]
(l/inf :status "START" :hint "update-tokens")
(l/inf :status "START" :hint "propagate-tokens")
(->> (rx/concat
(rx/of current-page-id)
(->> (rx/from (:pages fdata))
@ -155,7 +156,7 @@
(actionize-shapes-update-info page-id attrs)]
(l/inf :status "PROGRESS"
:hint "update-tokens"
:hint "propagate-tokens"
:page-id (str page-id)
:elapsed (tpoint)
::l/sync? true)
@ -175,21 +176,21 @@
(rx/finalize
(fn [_]
(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
(watch [_ state _]
(when-let [tokens-lib (-> (dsh/lookup-file-data state)
(get :tokens-lib))]
(let [tokens (-> (ctob/get-active-themes-set-tokens tokens-lib)
(wtsd/resolve-tokens+))]
(sd/resolve-tokens+))]
(->> (rx/from tokens)
(rx/mapcat (fn [sd-tokens]
(let [undo-id (js/Symbol)]
(rx/concat
(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))))))))))))

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.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])
(some-> (dsh/lookup-file-data state)
(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
[app.util.i18n :refer [tr]]
[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
(:require-macros [app.main.style :as stl])
(:require
[app.main.data.workspace.tokens.color :as dwtc]
[app.main.ui.components.color-bullet :refer [color-bullet]]
[app.main.ui.workspace.tokens.token :as wtt]
[rumext.v2 :as mf]))
(def ^:private schema::input-token-color-bullet
@ -23,6 +23,6 @@
[:div {:data-testid "token-form-color-bullet"
:class (stl/css :input-token-color-bullet)
: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}]
[: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
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.files.tokens :as cft]
[app.common.types.tokens-lib :as ctob]
[app.main.data.modal :as modal]
[app.main.data.tokens :as dt]
[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.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
[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.i18n :refer [tr]]
[app.util.timers :as timers]
@ -30,15 +30,15 @@
;; Actions ---------------------------------------------------------------------
(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))]
{: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
:selected-pred #(seq (% ids-by-attributes))}))
(defn generic-attribute-actions [attributes title {:keys [token selected-shapes on-update-shape hint]}]
(let [on-update-shape-fn (or on-update-shape
(-> (wtch/get-token-properties token)
(-> (dwta/get-token-properties token)
(:on-update-shape)))
{:keys [selected-pred shape-ids]} (attribute-actions token selected-shapes attributes)]
(map (fn [attribute]
@ -52,8 +52,8 @@
:selected? selected?
:action (fn []
(if selected?
(st/emit! (wtch/unapply-token props))
(st/emit! (wtch/apply-token (assoc props :on-update-shape on-update-shape-fn)))))}))
(st/emit! (dwta/unapply-token props))
(st/emit! (dwta/apply-token (assoc props :on-update-shape on-update-shape-fn)))))}))
attributes)))
(defn all-or-separate-actions [{:keys [attribute-labels on-update-shape-all on-update-shape hint]}
@ -67,8 +67,8 @@
:selected? all-selected?
:hint hint
:action #(if all-selected?
(st/emit! (wtch/unapply-token props))
(st/emit! (wtch/apply-token (assoc props :on-update-shape (or on-update-shape-all on-update-shape)))))})
(st/emit! (dwta/unapply-token props))
(st/emit! (dwta/apply-token (assoc props :on-update-shape (or on-update-shape-all on-update-shape)))))})
single-actions (map (fn [[attr title]]
(let [selected? (selected-pred attr)]
{:title title
@ -78,10 +78,10 @@
:shape-ids shape-ids}
event (cond
all-selected? (-> (assoc props :attributes-to-remove attributes)
(wtch/apply-token))
selected? (wtch/unapply-token props)
(dwta/apply-token))
selected? (dwta/unapply-token props)
:else (-> (assoc props :on-update-shape on-update-shape)
(wtch/apply-token)))]
(dwta/apply-token)))]
(st/emit! event))}))
attribute-labels)]
(concat [all-action] single-actions)))
@ -105,17 +105,17 @@
:token token
:shape-ids shape-ids}]
(if all-selected?
(st/emit! (wtch/unapply-token props))
(st/emit! (wtch/apply-token (assoc props :on-update-shape on-update-shape))))))}
(st/emit! (dwta/unapply-token props))
(st/emit! (dwta/apply-token (assoc props :on-update-shape on-update-shape))))))}
{:title "Horizontal"
:selected? horizontal-selected?
:action (fn []
(let [props {:token token
:shape-ids shape-ids}
event (cond
all-selected? (wtch/apply-token (assoc props :attributes-to-remove vertical-attrs))
horizontal-selected? (wtch/apply-token (assoc props :attributes-to-remove horizontal-attrs))
:else (wtch/apply-token (assoc props
all-selected? (dwta/apply-token (assoc props :attributes-to-remove vertical-attrs))
horizontal-selected? (dwta/apply-token (assoc props :attributes-to-remove horizontal-attrs))
:else (dwta/apply-token (assoc props
:attributes horizontal-attrs
:on-update-shape on-update-shape)))]
(st/emit! event)))}
@ -125,9 +125,9 @@
(let [props {:token token
:shape-ids shape-ids}
event (cond
all-selected? (wtch/apply-token (assoc props :attributes-to-remove horizontal-attrs))
vertical-selected? (wtch/apply-token (assoc props :attributes-to-remove vertical-attrs))
:else (wtch/apply-token (assoc props
all-selected? (dwta/apply-token (assoc props :attributes-to-remove horizontal-attrs))
vertical-selected? (dwta/apply-token (assoc props :attributes-to-remove vertical-attrs))
:else (dwta/apply-token (assoc props
:attributes vertical-attrs
:on-update-shape on-update-shape)))]
(st/emit! event)))}]
@ -147,10 +147,10 @@
:shape-ids shape-ids}
event (cond
all-selected? (-> (assoc props :attributes-to-remove attrs)
(wtch/apply-token))
selected? (wtch/unapply-token props)
(dwta/apply-token))
selected? (dwta/unapply-token props)
:else (-> (assoc props :on-update-shape on-update-shape)
(wtch/apply-token)))]
(dwta/apply-token)))]
(st/emit! event))}))
all-attr-labels)]
(concat multi-items single-items)))
@ -159,13 +159,13 @@
(st/emit!
(when (= (count attributes) 1)
(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]
(st/emit!
(when (= (count attributes) 1)
(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}]
(let [padding-items (layout-spacing-items {:token token
@ -195,7 +195,7 @@
gap-items (all-or-separate-actions {:attribute-labels {:column-gap "Column Gap"
:row-gap "Row Gap"}
:hint (tr "workspace.token.gaps")
:on-update-shape wtch/update-layout-spacing}
:on-update-shape dwta/update-layout-spacing}
context-data)]
(concat gap-items
[:separator]
@ -208,25 +208,25 @@
(all-or-separate-actions {:attribute-labels {:width "Width"
:height "Height"}
:hint (tr "workspace.token.size")
:on-update-shape wtch/update-shape-dimensions}
:on-update-shape dwta/update-shape-dimensions}
context-data)
[:separator]
(all-or-separate-actions {:attribute-labels {:layout-item-min-w "Min Width"
:layout-item-min-h "Min Height"}
:hint (tr "workspace.token.min-size")
:on-update-shape wtch/update-layout-sizing-limits}
:on-update-shape dwta/update-layout-sizing-limits}
context-data)
[:separator]
(all-or-separate-actions {:attribute-labels {:layout-item-max-w "Max Width"
:layout-item-max-h "Max Height"}
:hint (tr "workspace.token.max-size")
:on-update-shape wtch/update-layout-sizing-limits}
:on-update-shape dwta/update-layout-sizing-limits}
context-data)))
(defn update-shape-radius-for-corners [value shape-ids attributes]
(st/emit!
(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
(let [stroke-width (partial generic-attribute-actions #{:stroke-width} "Stroke Width")]
@ -235,11 +235,11 @@
:r4 "Bottom Left"
:r3 "Bottom Right"}
: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})
: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 #{:stroke-color} "Stroke" (assoc context-data :on-update-shape wtch/update-stroke-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 dwta/update-stroke-color))])
:spacing spacing-attribute-actions
:sizing sizing-attribute-actions
:rotation (partial generic-attribute-actions #{:rotation} "Rotation")
@ -252,19 +252,19 @@
:separator
{:title "Border Radius" :submenu :border-radius}]
[: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]
(generic-attribute-actions #{:x} "X" (assoc context-data :on-update-shape wtch/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 #{: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 dwta/update-shape-position))))}))
(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")
:no-selectable true
:action (fn [event]
(let [{:keys [key fields]} modal]
(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)
:y (.-clientY ^js event)
:position :right
@ -274,10 +274,10 @@
:token token}))))}
{:title (tr "workspace.token.duplicate")
:no-selectable true
:action #(st/emit! (dt/duplicate-token (:name token)))}
:action #(st/emit! (dwtl/duplicate-token (:name token)))}
{:title (tr "workspace.token.delete")
: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)
(:name token)))}]))
@ -446,7 +446,7 @@
(mf/portal
(mf/html
[:& 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)
:data-testid "tokens-context-menu-for-token"
: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.data :as d]
[app.common.data.macros :as dm]
[app.common.files.tokens :as cft]
[app.common.types.tokens-lib :as ctob]
[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.store :as st]
[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.workspace.colorpicker :as colorpicker]
[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-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.functions :as uf]
[app.util.i18n :refer [tr]]
@ -64,7 +64,7 @@
(let [path-exists-schema
(m/-simple-schema
{: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 %))}})]
(m/schema
[:and
@ -239,8 +239,8 @@
[{:keys [token token-type action selected-token-set-name on-display-colorpicker]}]
(let [create? (not (instance? ctob/Token token))
token (or token {:type token-type})
token-properties (wtch/get-token-properties token)
color? (wtt/color-token? token)
token-properties (dwta/get-token-properties token)
color? (cft/color-token? token)
selected-set-tokens (mf/deref refs/workspace-selected-token-set-tokens)
active-theme-tokens (cond-> (mf/deref refs/workspace-active-theme-sets-tokens)
@ -254,7 +254,7 @@
:interactive? true})
token-path (mf/use-memo
(mf/deps (:name token))
#(wtt/token-name->path (:name token)))
#(cft/token-name->path (:name token)))
selected-set-tokens-tree (mf/use-memo
(mf/deps token-path selected-set-tokens)
@ -329,7 +329,7 @@
value-input-ref (mf/use-ref nil)
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*)
set-resolve-value
@ -452,16 +452,16 @@
(when (and (seq result) (not err))
(st/emit!
(if (ctob/token? token)
(dt/update-token (:name token)
{:name final-name
:value final-value
:description final-description})
(dwtl/update-token (:name token)
{:name final-name
:value final-value
:description final-description})
(dt/create-token {:name final-name
:type token-type
:value final-value
:description final-description}))
(wtu/update-workspace-tokens)
(dwtl/create-token {:name final-name
:type token-type
:value final-value
:description final-description}))
(dwtp/propagate-workspace-tokens)
(modal/hide)))))))))
on-delete-token
@ -470,7 +470,7 @@
(fn [e]
(dom/prevent-default e)
(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
(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.main.data.event :as ev]
[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.store :as st]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
@ -117,7 +117,7 @@
(fn [e]
(dom/prevent-default e)
(dom/stop-propagation e)
(st/emit! (wdt/delete-token-theme group name)))
(st/emit! (dwtl/delete-token-theme group name)))
on-edit-theme
(fn [e]
(dom/prevent-default e)
@ -131,7 +131,7 @@
[:div {:on-click (fn [e]
(dom/prevent-default 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)
:on-change (constantly nil)
:selected? selected?}]]]
@ -292,7 +292,7 @@
(mf/use-fn
(mf/deps current-theme on-back)
(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)))
;; Sets tree handlers
@ -386,7 +386,7 @@
(mf/use-fn
(mf/deps 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*
{:change-view change-view
@ -402,7 +402,7 @@
(mf/use-fn
(fn [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))]
[:> 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.types.tokens-lib :as ctob]
[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.store :as st]
[app.main.ui.context :as ctx]
@ -31,26 +31,26 @@
(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]
(st/emit! (dt/toggle-token-set name)))
(st/emit! (dwtl/toggle-token-set name)))
(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]
(st/emit! (dt/set-selected-token-set-name name)))
(st/emit! (dwtl/set-selected-token-set-name name)))
(defn on-update-token-set
[token-set name]
(st/emit! (dt/clear-token-set-edition)
(dt/update-token-set token-set name)))
(st/emit! (dwtl/clear-token-set-edition)
(dwtl/update-token-set token-set name)))
(defn- on-update-token-set-group
[path name]
(st/emit! (dt/clear-token-set-edition)
(dt/rename-token-set-group path name)))
(st/emit! (dwtl/clear-token-set-edition)
(dwtl/rename-token-set-group path name)))
(defn- on-create-token-set
[parent-set name]
@ -63,7 +63,7 @@
(ctob/normalize-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
"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/stop-propagation event)
(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)
:is-group true
:id id
@ -270,7 +270,7 @@
(dom/prevent-default event)
(dom/stop-propagation event)
(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)
:is-group false
:id id
@ -383,8 +383,8 @@
:position position
:collapsed-paths collapsed-paths}]
(if (:is-group data)
(st/emit! (dt/drop-token-set-group params))
(st/emit! (dt/drop-token-set params))))))
(st/emit! (dwtl/drop-token-set-group params))
(st/emit! (dwtl/drop-token-set params))))))
on-toggle-collapse
(mf/use-fn
@ -560,15 +560,15 @@
(mf/deps can-edit?)
(fn [_]
(when can-edit?
(st/emit! (dt/clear-token-set-edition)
(dt/clear-token-set-creation)))))
(st/emit! (dwtl/clear-token-set-edition)
(dwtl/clear-token-set-creation)))))
on-start-edition
(mf/use-fn
(mf/deps can-edit?)
(fn [id]
(when can-edit?
(st/emit! (dt/start-token-set-edition id)))))]
(st/emit! (dwtl/start-token-set-edition id)))))]
[:> controlled-sets-list*
{: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
[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.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
@ -36,24 +36,24 @@
{::mf/private true}
[{:keys [is-group id edition-id 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
(mf/use-fn
(mf/deps id)
(fn []
(st/emit! (dt/start-token-set-edition edition-id))))
(st/emit! (dwtl/start-token-set-edition edition-id))))
on-duplicate
(mf/use-fn
(mf/deps is-group id)
(fn []
(st/emit! (dt/duplicate-token-set id is-group))))
(st/emit! (dwtl/duplicate-token-set id is-group))))
on-delete
(mf/use-fn
(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)}
(when is-group
@ -75,7 +75,7 @@
(+ (dm/get-prop position :x) 5)
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)
: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.modal :as modal]
[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.store :as st]
[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.resize :refer [use-resize-hook]]
[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.errors :as wte]
[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.style-dictionary :as sd]
[app.main.ui.workspace.tokens.theme-select :refer [theme-select]]
[app.main.ui.workspace.tokens.token-pill :refer [token-pill*]]
[app.util.array :as array]
@ -70,7 +70,7 @@
{::mf/private true}
[{:keys [type tokens selected-shapes active-theme-tokens is-open]}]
(let [{:keys [modal title]}
(get wtch/token-properties type)
(get dwta/token-properties type)
can-edit?
(mf/use-ctx ctx/can-edit?)
@ -83,7 +83,7 @@
(mf/use-fn
(fn [event token]
(dom/prevent-default event)
(st/emit! (dt/assign-token-context-menu
(st/emit! (dwtl/assign-token-context-menu
{:type :token
:position (dom/get-client-position event)
:errors (:errors token)
@ -92,14 +92,14 @@
on-toggle-open-click
(mf/use-fn
(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
(mf/use-fn
(mf/deps type title modal)
(fn [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
(modal/show (:key modal)
{:x (.-clientX ^js event)
@ -116,7 +116,7 @@
(fn [event token]
(dom/stop-propagation event)
(when (seq selected-shapes)
(st/emit! (wtch/toggle-token {:token token
(st/emit! (dwta/toggle-token {:token token
:shapes selected-shapes})))))]
[:div {:on-click on-toggle-open-click :class (stl/css :token-section-wrapper)}
@ -151,7 +151,7 @@
[tokens-by-type]
(loop [empty #js []
filled #js []
types (-> wtch/token-properties keys seq)]
types (-> dwta/token-properties keys seq)]
(if-let [type (first types)]
(if (not-empty (get tokens-by-type type))
(recur empty
@ -325,7 +325,7 @@
(let [match (->> (ctob/get-sets tokens-lib)
(first)
(:name))]
(st/emit! (dt/set-selected-token-set-name match)))))
(st/emit! (dwtl/set-selected-token-set-name match)))))
[:*
[:& token-context-menu]
@ -394,7 +394,7 @@
(sd/process-json-stream {:file-name file-name})
(rx/subs! (fn [lib]
(st/emit! (ptk/data-event ::ev/event {::ev/name "import-tokens"})
(dt/import-tokens-lib lib)))
(dwtl/import-tokens-lib lib)))
(fn [err]
(js/console.error 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.uuid :as uuid]
[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.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
@ -31,7 +31,7 @@
selected? (get active-theme-paths theme-id)
select-theme (fn [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))]]
[:li {:key theme-id
:role "option"

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

@ -11,12 +11,13 @@
(:require
[app.common.data :as d]
[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.ui.components.color-bullet :refer [color-bullet]]
[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.workspace.tokens.changes :as wtch]
[app.main.ui.workspace.tokens.token :as wtt]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
[cuerdas.core :as str]
@ -80,6 +81,7 @@
:y "Y"})
;; Helper functions
(defn partially-applied-attr
"Translates partially applied attributes based on the dictionary."
[app-token-keys is-applied {:keys [attributes all-attributes]}]
@ -106,7 +108,7 @@
(let [{:keys [name value type resolved-value]} token
resolved-value-theme (:resolved-value theme-token)
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)
app-token-vals (set (vals applied-tokens))
app-token-keys (keys applied-tokens)
@ -156,9 +158,9 @@
(defn- applied-all-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)]
(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/wrap [mf/memo]}
@ -166,11 +168,11 @@
(let [{:keys [name value errors]} token
has-selected? (pos? (count selected-shapes))
is-reference? (wtt/is-reference? token)
is-reference? (cft/is-reference? token)
contains-path? (str/includes? name ".")
{:keys [attributes all-attributes]}
(get wtch/token-properties (:type token))
(get dwta/token-properties (:type token))
full-applied?
(if has-selected?
@ -179,7 +181,7 @@
applied?
(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)
half-applied?
@ -201,10 +203,10 @@
no-valid-value)
color
(when (wtt/color-token? token)
(when (cft/color-token? token)
(let [theme-token (get active-theme-tokens (:name token))]
(or (wtt/resolved-token-bullet-color theme-token)
(wtt/resolved-token-bullet-color token))))
(or (dwtc/resolved-token-bullet-color theme-token)
(dwtc/resolved-token-bullet-color token))))
on-click
(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.types.tokens-lib :as ctob]
[app.main.data.helpers :as dsh]
[app.main.data.tokens :as dt]
[app.main.data.workspace.libraries :as dwl]
[app.main.data.workspace.selection :as dws]
[app.main.ui.workspace.tokens.changes :as wtch]
[app.main.ui.workspace.tokens.update :as wtu]
[app.main.data.workspace.tokens.application :as dwta]
[app.main.data.workspace.tokens.library-edit :as dwtl]
[app.main.data.workspace.tokens.propagation :as dwtp]
[cljs.test :as t :include-macros true]
[frontend-tests.helpers.pages :as thp]
[frontend-tests.helpers.state :as ths]
@ -134,10 +134,10 @@
store (ths/setup-store file)
;; ==== Action
events [(wtch/apply-token {:shape-ids [(cthi/id :frame1)]
events [(dwta/apply-token {:shape-ids [(cthi/id :frame1)]
:attributes #{:r1 :r2 :r3 :r4}
: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 [_]
(let [events2 [(dwl/sync-file (:id file) (:id file))]]
@ -171,7 +171,7 @@
store (ths/setup-store file)
;; ==== Action
events [(wtch/unapply-token {:shape-ids [(cthi/id :frame1)]
events [(dwta/unapply-token {:shape-ids [(cthi/id :frame1)]
:attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "test-token-1")})]
@ -203,14 +203,14 @@
store (ths/setup-store file)
;; ==== Action
events [(dt/set-selected-token-set-name "test-token-set")
(dt/update-token "test-token-1"
{:name "test-token-1"
:type :border-radius
:value 66})]
events [(dwtl/set-selected-token-set-name "test-token-set")
(dwtl/update-token "test-token-1"
{:name "test-token-1"
:type :border-radius
:value 66})]
step2 (fn [_]
(let [events2 [(wtu/update-workspace-tokens)
(let [events2 [(dwtp/propagate-workspace-tokens)
(dwl/sync-file (:id file) (:id file))]]
(tohs/run-store-async
store done events2
@ -242,14 +242,14 @@
store (ths/setup-store file)
;; ==== 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}
:token (toht/get-token file "test-token-2")
:on-update-shape wtch/update-shape-radius-all})
(wtch/apply-token {:shape-ids [(cthi/id :frame1)]
:on-update-shape dwta/update-shape-radius-all})
(dwta/apply-token {:shape-ids [(cthi/id :frame1)]
:attributes #{:r1 :r2 :r3 :r4}
: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 [_]
(let [events2 [(dwl/sync-file (:id file) (:id file))]]
@ -283,13 +283,13 @@
store (ths/setup-store file)
;; ==== 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}
: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}
: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 [_]
(let [events2 [(dwl/sync-file (:id file) (:id file))]]
@ -359,28 +359,28 @@
store (ths/setup-store file)
;; ==== Action
events [(dt/set-selected-token-set-name "test-token-set")
(dt/update-token "token-radius"
{:name "token-radius"
:value 30})
(dt/update-token "token-rotation"
{:name "token-rotation"
:value 45})
(dt/update-token "token-opacity"
{:name "token-opacity"
:value 0.9})
(dt/update-token "token-stroke-width"
{:name "token-stroke-width"
:value 8})
(dt/update-token "token-color"
{:name "token-color"
:value "#ff0000"})
(dt/update-token "token-dimensions"
{:name "token-dimensions"
:value 200})]
events [(dwtl/set-selected-token-set-name "test-token-set")
(dwtl/update-token "token-radius"
{:name "token-radius"
:value 30})
(dwtl/update-token "token-rotation"
{:name "token-rotation"
:value 45})
(dwtl/update-token "token-opacity"
{:name "token-opacity"
:value 0.9})
(dwtl/update-token "token-stroke-width"
{:name "token-stroke-width"
:value 8})
(dwtl/update-token "token-color"
{:name "token-color"
:value "#ff0000"})
(dwtl/update-token "token-dimensions"
{:name "token-dimensions"
:value 200})]
step2 (fn [_]
(let [events2 [(wtu/update-workspace-tokens)
(let [events2 [(dwtp/propagate-workspace-tokens)
(dwl/sync-file (:id file) (:id file))]]
(tohs/run-store-async
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.style-dictionary-test]
[frontend-tests.tokens.token-form-test]
[frontend-tests.tokens.token-test]
[frontend-tests.util-range-tree-test]
[frontend-tests.util-simple-math-test]
[frontend-tests.util-snap-data-test]))
@ -42,5 +41,4 @@
'frontend-tests.tokens.logic.token-actions-test
'frontend-tests.tokens.logic.token-data-test
'frontend-tests.tokens.style-dictionary-test
'frontend-tests.tokens.token-test
'frontend-tests.tokens.token-form-test))

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

@ -2,7 +2,7 @@
(:require
[app.common.types.tokens-lib :as ctob]
[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]
[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
(:require
[app.common.files.tokens :as cft]
[app.common.test-helpers.ids-map :as thi]
[app.common.types.tokens-lib :as ctob]
[app.main.ui.workspace.tokens.token :as wtt]))
[app.common.types.tokens-lib :as ctob]))
(defn get-token [file name]
(some-> (get-in file [:data :tokens-lib])
@ -14,7 +14,7 @@
(let [first-page-id (get-in file [:data :pages 0])
shape-id (thi/id shape-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
:pages-index first-page-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.shapes :as cths]
[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]
[frontend-tests.helpers.pages :as thp]
[frontend-tests.helpers.state :as ths]
@ -48,10 +48,10 @@
(let [file (setup-file-with-tokens)
store (ths/setup-store file)
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}
: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
store done events
(fn [new-state]
@ -73,14 +73,14 @@
(let [file (setup-file-with-tokens)
store (ths/setup-store file)
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}
:token (toht/get-token file "borderRadius.sm")
:on-update-shape wtch/update-shape-radius-all})
(wtch/apply-token {:shape-ids [(:id rect-1)]
:on-update-shape dwta/update-shape-radius-all})
(dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:r1 :r2 :r3 :r4}
: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
store done events
(fn [new-state]
@ -101,17 +101,17 @@
store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1)
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")
: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
;; while removing other attributes from the border-radius set
;; 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")
: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
store done events
(fn [new-state]
@ -133,14 +133,14 @@
store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1)
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}
:token (toht/get-token file "borderRadius.sm")
:on-update-shape wtch/update-shape-radius-for-corners})
(wtch/apply-token {:shape-ids [(:id rect-2)]
:on-update-shape dwta/update-shape-radius-for-corners})
(dwta/apply-token {:shape-ids [(:id rect-2)]
:attributes #{:r1 :r2 :r3 :r4}
: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
store done events
(fn [new-state]
@ -185,22 +185,22 @@
store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1)
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}
:token (toht/get-token file "color.primary")
:on-update-shape wtch/update-fill})
(wtch/apply-token {:shape-ids [(:id rect-1)]
:on-update-shape dwta/update-fill})
(dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:stroke-color}
:token (toht/get-token file "color.primary")
:on-update-shape wtch/update-stroke-color})
(wtch/apply-token {:shape-ids [(:id rect-2)]
:on-update-shape dwta/update-stroke-color})
(dwta/apply-token {:shape-ids [(:id rect-2)]
:attributes #{:color}
:token (toht/get-token file "color.secondary")
:on-update-shape wtch/update-fill})
(wtch/apply-token {:shape-ids [(:id rect-2)]
:on-update-shape dwta/update-fill})
(dwta/apply-token {:shape-ids [(:id rect-2)]
:attributes #{:stroke-color}
: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
store done events
(fn [new-state]
@ -239,10 +239,10 @@
#(ctob/add-token-in-set % "Set A" (ctob/make-token dimensions-token))))
store (ths/setup-store file)
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}
: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
store done events
(fn [new-state]
@ -272,10 +272,10 @@
store (ths/setup-store file)
frame-1 (cths/get-shape file :frame-1)
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}
: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
store done events
(fn [new-state]
@ -303,10 +303,10 @@
#(ctob/add-token-in-set % "Set A" (ctob/make-token sizing-token))))
store (ths/setup-store file)
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}
: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
store done events
(fn [new-state]
@ -344,18 +344,18 @@
rect-1 (cths/get-shape file :rect-1)
rect-2 (cths/get-shape file :rect-2)
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}
:token (toht/get-token file "opacity.float")
:on-update-shape wtch/update-opacity})
(wtch/apply-token {:shape-ids [(:id rect-2)]
:on-update-shape dwta/update-opacity})
(dwta/apply-token {:shape-ids [(:id rect-2)]
:attributes #{:opacity}
:token (toht/get-token file "opacity.percent")
:on-update-shape wtch/update-opacity})
(wtch/apply-token {:shape-ids [(:id rect-3)]
:on-update-shape dwta/update-opacity})
(dwta/apply-token {:shape-ids [(:id rect-3)]
:attributes #{:opacity}
:token (toht/get-token file "opacity.invalid")
:on-update-shape wtch/update-opacity})]]
:on-update-shape dwta/update-opacity})]]
(tohs/run-store-async
store done events
(fn [new-state]
@ -388,10 +388,10 @@
#(ctob/add-token-in-set % "Set A" (ctob/make-token rotation-token))))
store (ths/setup-store file)
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}
:token (toht/get-token file "rotation.medium")
:on-update-shape wtch/update-rotation})]]
:on-update-shape dwta/update-rotation})]]
(tohs/run-store-async
store done events
(fn [new-state]
@ -419,10 +419,10 @@
store (ths/setup-store file)
rect-with-stroke (cths/get-shape file :rect-1)
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}
: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
store done events
(fn [new-state]
@ -445,9 +445,9 @@
store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1)
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}
:on-update-shape wtch/update-shape-radius-all}
:on-update-shape dwta/update-shape-radius-all}
:token (toht/get-token file "borderRadius.md")})]]
(tohs/run-store-async
store done events
@ -476,7 +476,7 @@
rect-without-token (cths/get-shape file :rect-2)
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-type-props {:attributes #{:r1 :r2 :r3 :r4}}})]]
(tohs/run-store-async
@ -509,7 +509,7 @@
rect-without-token (cths/get-shape file :rect-2)
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-type-props {:attributes #{:r1 :r2 :r3 :r4}}})]]
(tohs/run-store-async

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

@ -2,7 +2,7 @@
(:require
[app.common.test-helpers.files :as cthf]
[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]
[frontend-tests.helpers.pages :as thp]
[frontend-tests.helpers.state :as ths]
@ -27,7 +27,7 @@
done
(let [file (setup-file-with-token-lib)
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
store done events
@ -46,7 +46,7 @@
done
(let [file (setup-file-with-token-lib)
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
store done events

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

@ -2,7 +2,7 @@
(:require
[app.common.transit :as tr]
[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]
[cljs.test :as t :include-macros true]
[promesa.core :as p]))