From 5c2891b247554488a1f60ddc3b14b64b358fb90b Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 18 Jun 2024 11:10:51 +0200
Subject: [PATCH] Use resolved tokens from style-dictionary

---
 .../app/main/ui/workspace/tokens/core.cljs    | 10 ++++---
 .../app/main/ui/workspace/tokens/sidebar.cljs | 30 ++++++++++++-------
 .../app/main/ui/workspace/tokens/sidebar.scss |  1 +
 .../ui/workspace/tokens/style_dictionary.cljs | 10 +++++--
 4 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/core.cljs b/frontend/src/app/main/ui/workspace/tokens/core.cljs
index b7906b5bd..20db33949 100644
--- a/frontend/src/app/main/ui/workspace/tokens/core.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/core.cljs
@@ -34,10 +34,12 @@
   [token shapes token-attributes]
   (some #(token-applied? token % token-attributes) shapes))
 
-(defn resolve-token-value [{:keys [value] :as token}]
-  (if-let [int-or-double (d/parse-double value)]
-    int-or-double
-    (throw (ex-info (str "Implement token value resolve for " value) token))))
+(defn resolve-token-value [{:keys [value resolved-value] :as token}]
+  (or
+   resolved-value
+   (if-let [int-or-double (d/parse-double value)]
+     int-or-double
+     (throw (ex-info (str "Implement token value resolve for " value) token)))))
 
 (defn maybe-resolve-token-value [{:keys [value] :as token}]
   (when value (resolve-token-value token)))
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 487917509..a3904e95b 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -15,7 +15,9 @@
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
    [app.main.ui.workspace.tokens.core :as wtc]
+   [app.main.ui.workspace.tokens.style-dictionary :as sd]
    [app.util.dom :as dom]
+   [cuerdas.core :as str]
    [okulary.core :as l]
    [rumext.v2 :as mf]
    [shadow.resource]))
@@ -26,16 +28,21 @@
 (mf/defc token-pill
   {::mf/wrap-props false}
   [{:keys [on-click token highlighted? on-context-menu]}]
-  (let [{:keys [name value]} token
-        resolved-value (try
-                         (wtc/resolve-token-value token)
-                         (catch js/Error _ nil))]
-    [:div {:class (stl/css-case :token-pill true
-                                :token-pill-highlighted highlighted?
-                                #_#_:token-pill-invalid (not resolved-value))
-           :title (str (if resolved-value "Token value: " "Invalid token value: ") value)
-           :on-click on-click
-           :on-context-menu on-context-menu}
+  (js/console.log "token" token)
+  (let [{:keys [name value resolved-value errors]} token
+        errors? (seq errors)]
+    [:button {:class (stl/css-case :token-pill true
+                                   :token-pill-highlighted highlighted?
+                                   :token-pill-invalid errors?)
+              :title (cond
+                       errors? (sd/humanize-errors token)
+                       :else (->> [(str "Token: " name)
+                                   (str "Original value: " value)
+                                   (str "Resolved value: " resolved-value)]
+                                  (str/join "\n")))
+              :on-click on-click
+              :on-context-menu on-context-menu
+              :disabled errors?}
      name]))
 
 (mf/defc token-section-icon
@@ -138,7 +145,8 @@
         selected (mf/deref refs/selected-shapes)
         selected-shapes (into [] (keep (d/getf objects)) selected)
 
-        tokens (mf/deref refs/workspace-tokens)
+        tokens (-> (mf/deref refs/workspace-tokens)
+                   (sd/use-resolved-tokens))
         token-groups (mf/with-memo [tokens]
                        (sorted-token-groups tokens))]
     [:article
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
index 3c4c4da6c..64f11a3ce 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
@@ -30,6 +30,7 @@
   }
 
   &.token-pill-invalid {
+    background-color: var(--button-secondary-background-color-rest);
     color: var(--status-color-error-500);
     opacity: 0.8;
   }
diff --git a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
index 016e6b70d..64fef32eb 100644
--- a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
@@ -4,6 +4,7 @@
    ["style-dictionary$default" :as sd]
    [app.common.data :as d]
    [app.main.refs :as refs]
+   [cuerdas.core :as str]
    [promesa.core :as p]
    [rumext.v2 :as mf]
    [shadow.resource]))
@@ -71,8 +72,13 @@
                      (js/console.log "Resolved tokens" resolved-tokens))
                    resolved-tokens))))))
 
-(def errors
-  {:style-dictionary/missing-reference {:user/message "Could not resolve reference token with the name: %s"}})
+(defn humanize-errors [{:keys [errors value] :as _token}]
+  (->> (map (fn [err]
+              (case err
+                :style-dictionary/missing-reference (str "Could not resolve reference token with the name: " value)
+                nil))
+            errors)
+       (str/join "\n")))
 
 (defn tokens-name-map [tokens]
   (->> tokens