Compute tokens from each activated set

frontend/src/app/main/data/tokens.cljs

@@ -16,12 +16,12 @@
    [app.main.data.workspace.shapes :as dwsh]
    [app.main.refs :as refs]
    [app.main.ui.workspace.tokens.token :as wtt]
+   [app.main.ui.workspace.tokens.token-set :as wtts]
+   [app.main.ui.workspace.tokens.update :as wtu]
    [beicon.v2.core :as rx]
    [clojure.data :as data]
    [cuerdas.core :as str]
-   [potok.v2.core :as ptk]
+   [potok.v2.core :as ptk]))
-   [app.main.ui.workspace.tokens.changes :as wdt]
-   [app.main.ui.workspace.tokens.token-set :as wtts]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Helpers
@@ -126,7 +126,9 @@
             new-themes (wtts/toggle-active-theme-id token-theme-id state)
             changes (-> (pcb/empty-changes it)
                         (pcb/update-active-token-themes new-themes themes))]
-        (rx/of (dch/commit-changes changes))))))
+        (rx/of
+         (dch/commit-changes changes)
+         (wtu/update-workspace-tokens))))))
 
 (defn delete-token-theme [token-theme-id]
   (ptk/reify ::delete-token-theme
@@ -136,7 +138,9 @@
             changes (-> (pcb/empty-changes it)
                         (pcb/with-library-data data)
                         (pcb/delete-token-theme token-theme-id))]
-        (rx/of (dch/commit-changes changes))))))
+        (rx/of
+         (dch/commit-changes changes)
+         (wtu/update-workspace-tokens))))))
 
 (defn create-token-set [token-set]
   (let [new-token-set (merge
@@ -165,7 +169,9 @@
                          (wtts/toggle-token-set-to-token-theme token-set-id theme)
                          theme)
                         (pcb/update-active-token-themes #{(wtts/update-theme-id state)} (wtts/get-active-theme-ids state)))]
-        (rx/of (dch/commit-changes changes))))))
+        (rx/of
+         (dch/commit-changes changes)
+         (wtu/update-workspace-tokens))))))
 
 (defn delete-token-set [token-set-id]
   (ptk/reify ::delete-token-set
@@ -175,7 +181,9 @@
             changes (-> (pcb/empty-changes it)
                         (pcb/with-library-data data)
                         (pcb/delete-token-set token-set-id))]
-        (rx/of (dch/commit-changes changes))))))
+        (rx/of
+         (dch/commit-changes changes)
+         (wtu/update-workspace-tokens))))))
 
 (defn update-create-token
   [token]

frontend/src/app/main/refs.cljs

@@ -259,6 +259,9 @@
    st/state
    =))
 
+(def get-active-theme-sets-tokens
+  (l/derived wtts/get-active-theme-sets-tokens-names-map st/state =))
+
 (def workspace-tokens
   (l/derived
    (fn [data]

frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs

@@ -101,7 +101,7 @@
         selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
         selection-parents     (mf/deref selection-parents-ref)
 
-        tokens (-> (mf/deref refs/workspace-tokens)
+        tokens (-> (mf/deref refs/get-active-theme-sets-tokens)
                    (sd/use-resolved-tokens))
         tokens-by-type (mf/use-memo (mf/deps tokens) #(wtc/group-tokens-by-type tokens))
 

frontend/src/app/main/ui/workspace/tokens/sidebar.cljs

@@ -21,15 +21,12 @@
    [app.main.ui.workspace.tokens.core :as wtc]
    [app.main.ui.workspace.tokens.style-dictionary :as sd]
    [app.main.ui.workspace.tokens.token :as wtt]
-   [app.main.ui.workspace.tokens.token-set :as wtts]
    [app.main.ui.workspace.tokens.token-types :as wtty]
-   [app.main.ui.workspace.tokens.update :as wtu]
    [app.util.dom :as dom]
    [cuerdas.core :as str]
    [okulary.core :as l]
    [rumext.v2 :as mf]
-   [shadow.resource]
+   [shadow.resource]))
-   [clojure.set :as set]))
 
 (def lens:token-type-open-status
   (l/derived (l/in [:workspace-tokens :open-status]) st/state))
@@ -223,8 +220,7 @@
          [:li {:class [(when (= selected-token-set-id id) "selected")]
                :on-click (fn []
                            (st/emit!
-                            (wdt/set-selected-token-set-id id)
+                            (wdt/set-selected-token-set-id id)))}
-                            (wtu/update-workspace-tokens)))}
           [:div.spaced
            name
            [:div.spaced
@@ -248,9 +244,9 @@
         selected (mf/deref refs/selected-shapes)
         selected-shapes (into [] (keep (d/getf objects)) selected)
 
-        tokens (-> (mf/deref refs/workspace-tokens)
+        tokens (sd/use-resolved-workspace-tokens)
-                   (sd/use-resolved-tokens))
         token-groups (mf/with-memo [tokens]
+                       (js/console.log "tokens" tokens)
                        (sorted-token-groups tokens))]
     [:article
      [:& token-sets]

frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs

@@ -2,6 +2,7 @@
   (:require
    ["@tokens-studio/sd-transforms" :as sd-transforms]
    ["style-dictionary$default" :as sd]
+   [app.common.data :refer [ordered-map]]
    [app.main.refs :as refs]
    [app.main.ui.workspace.tokens.token :as wtt]
    [cuerdas.core :as str]
@@ -79,8 +80,10 @@
                         (resolve-sd-tokens+ config))]
     (let [resolved-tokens (reduce
                            (fn [acc ^js cur]
-                             (let [id (uuid (.-uuid (.-id cur)))
+                             (let [identifier (if (uuid? (ffirst tokens))
-                                   origin-token (get tokens id)
+                                                (uuid (.-uuid (.-id cur)))
+                                                (.. cur -original -name))
+                                   origin-token (get tokens identifier)
                                    parsed-value (wtt/parse-token-value (.-value cur))
                                    resolved-token (if (not parsed-value)
                                                     (assoc origin-token :errors [:style-dictionary/missing-reference])
@@ -93,11 +96,6 @@
         (js/console.log "Resolved tokens" resolved-tokens))
       resolved-tokens)))
 
-(defn resolve-workspace-tokens+
-  [& {:keys [debug?] :as config}]
-  (when-let [workspace-tokens @refs/workspace-tokens]
-    (resolve-tokens+ workspace-tokens)))
-
 ;; Hooks -----------------------------------------------------------------------
 
 (defonce !tokens-cache (atom nil))
@@ -112,7 +110,7 @@
   then the state will be updated with the resolved tokens."
   [tokens & {:keys [cache-atom]
              :or {cache-atom !tokens-cache}}]
-  (let [tokens-state (mf/use-state (get @cache-atom tokens tokens))]
+  (let [tokens-state (mf/use-state (get @cache-atom tokens))]
     (mf/use-effect
      (mf/deps tokens)
      (fn []
@@ -133,37 +131,3 @@
 (defn use-resolved-workspace-tokens [& {:as config}]
   (-> (mf/deref refs/workspace-tokens)
       (use-resolved-tokens config)))
-
-;; Testing ---------------------------------------------------------------------
-
-(comment
-  (defonce !output (atom nil))
-
-  (-> @refs/workspace-tokens
-      (resolve-tokens+ {:debug? false})
-      (.then js/console.log))
-
-  (-> (resolve-workspace-tokens+ {:debug? true})
-      (p/then #(reset! !output %)))
-
-  @!output
-
-  (->> @refs/workspace-tokens
-       (resolve-tokens+)
-       (#(doto % js/console.log)))
-
-  (->
-   (clj->js {"a" {:name "a" :value "5"}
-             "b" {:name "b" :value "{a} * 2"}})
-
-   (#(resolve-sd-tokens+ % {:debug? true})))
-
-  (defonce output (atom nil))
-  (require '[shadow.resource])
-  (let [example (-> (shadow.resource/inline "./data/example-tokens-set.json")
-                    (js/JSON.parse)
-                    .-core)]
-    (.then (resolve-sd-tokens+ example {:debug? true})
-           #(reset! output %)))
-
-  nil)

frontend/src/app/main/ui/workspace/tokens/token.cljs

@@ -4,6 +4,14 @@
    [clojure.set :as set]
    [cuerdas.core :as str]))
 
+(defn get-workspace-tokens
+  [state]
+  (get-in state [:workspace-data :tokens] {}))
+
+(defn get-workspace-token
+  [token-id state]
+  (get-in state [:workspace-data :tokens token-id]))
+
 (def parseable-token-value-regexp
   "Regexp that can be used to parse a number value out of resolved token value.
   This regexp also trims whitespace around the value."

frontend/src/app/main/ui/workspace/tokens/token_set.cljs

@@ -1,6 +1,8 @@
 (ns app.main.ui.workspace.tokens.token-set
   (:require
-    [clojure.set :as set]))
+   [app.common.data :refer [ordered-map]]
+   [app.main.ui.workspace.tokens.token :as wtt]
+   [clojure.set :as set]))
 
 ;; Themes ----------------------------------------------------------------------
 
@@ -102,9 +104,6 @@
 
  ;; Sets ------------------------------------------------------------------------
 
-(defn get-workspace-tokens [state]
-  (get-in state [:workspace-data :tokens]))
-
 (defn get-workspace-sets [state]
   (get-in state [:workspace-data :token-sets-index]))
 
@@ -112,6 +111,10 @@
   (some-> (get-workspace-sets state)
           (get set-id)))
 
+(defn get-workspace-token-set-tokens [set-id state]
+  (-> (get-token-set set-id state)
+      :tokens))
+
 (def default-token-set-name "Global")
 
 (defn create-global-set [])
@@ -129,11 +132,22 @@
 
 (defn get-selected-token-set-tokens [state]
   (when-let [token-set (get-selected-token-set state)]
-    (let [tokens (or (get-workspace-tokens state) {})]
+    (let [tokens (or (wtt/get-workspace-tokens state) {})]
+      (js/console.log "token-set" token-set (select-keys tokens (:tokens token-set)))
       (select-keys tokens (:tokens token-set)))))
 
-(defn get-token-set-tokens [{:keys [tokens] :as token-set} file]
-  (map #(get-in file [:data :tokens %]) tokens))
-
 (defn assoc-selected-token-set-id [state id]
   (assoc-in state [:workspace-local :selected-token-set-id] id))
+
+(defn get-active-theme-sets-tokens-names-map [state]
+  (let [active-set-ids (get-active-set-ids state)]
+    (reduce
+     (fn [names-map-acc set-id]
+       (let [token-ids (get-workspace-token-set-tokens set-id state)]
+         (reduce
+          (fn [acc token-id]
+            (if-let [token (wtt/get-workspace-token token-id state)]
+              (assoc acc (wtt/token-identifier token) token)
+              acc))
+          names-map-acc token-ids)))
+     (ordered-map) active-set-ids)))

frontend/src/app/main/ui/workspace/tokens/update.cljs

@@ -121,7 +121,10 @@
     ptk/WatchEvent
     (watch [_ state _]
       (->>
-       (rx/from (wtsd/resolve-tokens+ (wtts/get-selected-token-set-tokens state)))
+       (rx/from
+        (->
+          (wtts/get-active-theme-sets-tokens-names-map state)
+          (wtsd/resolve-tokens+)))
        (rx/mapcat
         (fn [sd-tokens]
           (let [undo-id (js/Symbol)]