Sets sidebar

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

@@ -857,7 +857,7 @@
         shape (when-not multiple
                 (first (deref (refs/objects-by-id ids))))
         tokens (mf/deref refs/workspace-selected-token-set-tokens)
-        spacing-tokens (mf/use-memo (mf/deps tokens) #(:spacing (wtc/group-tokens-by-type tokens)))
+        spacing-tokens (mf/use-memo (mf/deps tokens) #(:spacing (wtc/group-tokens-by-type-OLD tokens)))
 
         spacing-column-options (mf/use-memo
                                 (mf/deps shape spacing-tokens)

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

@@ -103,7 +103,7 @@
 
         tokens (-> (mf/deref refs/workspace-active-theme-sets-tokens)
                    (sd/use-resolved-tokens))
-        tokens-by-type (mf/use-memo (mf/deps tokens) #(wtc/group-tokens-by-type tokens))
+        tokens-by-type (mf/use-memo (mf/deps tokens) #(wtc/group-tokens-by-type-OLD tokens))
 
         border-radius-tokens (:border-radius tokens-by-type)
         border-radius-options (mf/use-memo

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

@@ -11,7 +11,8 @@
    [app.main.ui.workspace.tokens.token :as wtt]
    [app.util.dom :as dom]
    [app.util.webapi :as wapi]
-   [cuerdas.core :as str]))
+   [cuerdas.core :as str]
+   [app.common.data.macros :as dm]))
 
 ;; Helpers ---------------------------------------------------------------------
 
@@ -29,6 +30,13 @@
   (->> (vals tokens)
        (group-by :type)))
 
+(dm/legacy
+ (defn group-tokens-by-type-OLD
+   "Groups tokens by their `:type` property."
+   [tokens]
+   (->> (vals tokens)
+        (group-by :type))))
+
 (defn tokens-name-map->select-options [{:keys [shape tokens attributes selected-attributes]}]
   (->> (wtt/token-names-map tokens)
        (map (fn [[_k {:keys [name] :as item}]]

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

@@ -72,7 +72,7 @@
            on-cancel]
     :as _props}]
   (let [{:keys [id name _children]} token-set
-        selected? (and set? (token-set-selected? id))
+        selected? (and set? (token-set-selected? name))
         visible? (token-set-active? id)
         collapsed? (mf/use-state false)
         set? true #_(= type :set)

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

@@ -241,7 +241,6 @@
         selected (mf/deref refs/selected-shapes)
         selected-shapes (into [] (keep (d/getf objects)) selected)
 
-
         active-theme-tokens (sd/use-active-theme-sets-tokens)
 
         tokens (sd/use-resolved-workspace-tokens)

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

@@ -72,34 +72,34 @@
 
 (defn resolve-tokens+
   [tokens & {:keys [names-map?] :as config}]
-  (p/let [sd-tokens (-> (wtt/token-names-tree tokens)
+  (let [{:keys [tree ids-map]} (wtt/token-names-tree-id-map tokens)]
-                        (resolve-sd-tokens+))]
+    (p/let [sd-tokens (resolve-sd-tokens+ tree)]
-    (let [resolved-tokens (reduce
+      (let [resolved-tokens (reduce
-                           (fn [acc ^js cur]
+                             (fn [acc ^js cur]
-                             (let [identifier (if names-map?
+                               (let [identifier (if names-map?
-                                                (.. cur -original -name)
+                                                  (.. cur -original -name)
-                                                (uuid (.-uuid (.-id cur))))
+                                                  (uuid (.-uuid (.-id cur))))
-                                   {:keys [type] :as origin-token} (get tokens identifier)
+                                     {:keys [type] :as origin-token} (get ids-map identifier)
-                                   value (.-value cur)
+                                     value (.-value cur)
-                                   token-or-err (case type
+                                     token-or-err (case type
-                                                  :color (if-let [tc (tinycolor/valid-color value)]
+                                                    :color (if-let [tc (tinycolor/valid-color value)]
-                                                           {:value value :unit (tinycolor/color-format tc)}
+                                                             {:value value :unit (tinycolor/color-format tc)}
-                                                           {:errors [(wte/error-with-value :error.token/invalid-color value)]})
+                                                             {:errors [(wte/error-with-value :error.token/invalid-color value)]})
-                                                  (or (wtt/parse-token-value value)
+                                                    (or (wtt/parse-token-value value)
-                                                      (if-let [references (-> (wtt/find-token-references value)
+                                                        (if-let [references (-> (wtt/find-token-references value)
-                                                                              (seq))]
+                                                                                (seq))]
-                                                        {:errors [(wte/error-with-value :error.style-dictionary/missing-reference references)]
+                                                          {:errors [(wte/error-with-value :error.style-dictionary/missing-reference references)]
-                                                         :references references}
+                                                           :references references}
-                                                        {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value value)]})))
+                                                          {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value value)]})))
-                                   output-token (if (:errors token-or-err)
+                                     output-token (if (:errors token-or-err)
-                                                  (merge origin-token token-or-err)
+                                                    (merge origin-token token-or-err)
-                                                  (assoc origin-token
+                                                    (assoc origin-token
-                                                         :resolved-value (:value token-or-err)
+                                                           :resolved-value (:value token-or-err)
-                                                         :unit (:unit token-or-err)))]
+                                                           :unit (:unit token-or-err)))]
-                               (assoc acc (wtt/token-identifier output-token) output-token)))
+                                 (assoc acc (wtt/token-identifier output-token) output-token)))
-                           {} sd-tokens)]
+                             {} sd-tokens)]
-      (l/debug :hint "Resolved tokens" :js/tokens resolved-tokens)
+        (l/debug :hint "Resolved tokens" :js/tokens resolved-tokens)
-      resolved-tokens)))
+        resolved-tokens))))
 
 ;; Hooks -----------------------------------------------------------------------
 
@@ -125,7 +125,9 @@
        (let [cached (get @cache-atom tokens)]
          (cond
            ;; The tokens are already processing somewhere
-           (p/promise? cached) (p/then cached #(reset! tokens-state %))
+           (p/promise? cached) (-> cached
+                                   (p/then #(reset! tokens-state %))
+                                   #_(p/catch js/console.error))
            ;; Get the cached entry
            (some? cached) (reset! tokens-state cached)
            ;; No cached entry, start processing

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

@@ -1,9 +1,10 @@
 (ns app.main.ui.workspace.tokens.token
   (: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]
+   [cuerdas.core :as str]))
-   [app.main.ui.workspace.tokens.tinycolor :as tinycolor]))
 
 (defn get-workspace-tokens
   [state]
@@ -117,15 +118,32 @@
   (->> (map (fn [{:keys [name] :as token}] [name token]) tokens)
        (into {})))
 
-(defn token-names-tree
+(defonce a (atom nil))
-  "Convert tokens into a nested tree with their `:name` as the path."
+
-  [tokens]
+(defn token-names-tree-id-map [tokens]
+  (reset! a tokens)
   (reduce
-   (fn [acc [_ {:keys [name] :as token}]]
+   (fn [acc {:keys [name] :as token}]
      (when (string? name)
-       (let [path (token-name->path name)]
+       (let [temp-id (random-uuid)
-         (assoc-in acc path token))))
+             token (assoc token :temp/id temp-id)]
-   {} tokens))
+         (-> acc
+             (assoc-in (concat [:tree] (token-name->path name)) token)
+             (assoc-in [:ids-map temp-id] token)))))
+   {:tree {}
+    :ids-map {}}
+   tokens))
+
+(dm/legacy
+ (defn token-names-tree
+   "Convert tokens into a nested tree with their `:name` as the path."
+   [tokens]
+   (reduce
+    (fn [acc [_ {:keys [name] :as token}]]
+      (when (string? name)
+        (let [path (token-name->path name)]
+          (assoc-in acc path token))))
+    {} tokens)))
 
 (defn token-name-path-exists?
   "Traverses the path from `token-name` down a `token-tree` and checks if a token at that path exists.

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

@@ -2,7 +2,11 @@
   (:require
    [app.common.data :refer [ordered-map]]
    [app.main.ui.workspace.tokens.token :as wtt]
-   [clojure.set :as set]))
+   [clojure.set :as set]
+   [app.common.types.tokens-lib :as ctob]))
+
+(defn get-workspace-tokens-lib [state]
+  (get-in state [:workspace-data :tokens-lib]))
 
 ;; Themes ----------------------------------------------------------------------
 
@@ -146,21 +150,6 @@
   (-> (get-token-set set-id state)
       :tokens))
 
-(defn get-selected-token-set-id [state]
-  (or (get-in state [:workspace-local :selected-token-set-id])
-      (get-in state [:workspace-data :token-set-groups 0])))
-
-(defn get-selected-token-set [state]
-  (when-let [id (get-selected-token-set-id state)]
-    (get-token-set id state)))
-
-(defn get-selected-token-set-tokens [state]
-  (when-let [token-set (get-selected-token-set state)]
-    (let [tokens (or (wtt/get-workspace-tokens state) {})]
-      (select-keys tokens (:tokens token-set)))))
-
-(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-ordered-active-set-ids state)]
@@ -174,3 +163,24 @@
               acc))
           names-map-acc token-ids)))
      (ordered-map) active-set-ids)))
+
+;; === Set selection
+
+(defn get-selected-token-set-id [state]
+  (or (get-in state [:workspace-local :selected-token-set-id])
+      (some-> (get-workspace-tokens-lib state)
+              (ctob/get-sets)
+              (first)
+              (:name))))
+
+(defn get-selected-token-set [state]
+  (when-let [id (get-selected-token-set-id state)]
+    (some-> (get-workspace-tokens-lib state)
+            (ctob/get-set id))))
+
+(defn get-selected-token-set-tokens [state]
+  (some-> (get-selected-token-set state)
+          (ctob/get-tokens)))
+
+(defn assoc-selected-token-set-id [state id]
+  (assoc-in state [:workspace-local :selected-token-set-id] id))