Merge pull request #81 from tokens-studio/value-resolve

Value resolve

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

@@ -9,6 +9,7 @@
    [app.common.data :as d :refer [ordered-map]]
    [app.common.types.shape.radius :as ctsr]
    [app.common.types.token :as ctt]
+   [app.main.data.tokens :as dt]
    [app.main.data.workspace.changes :as dch]
    [app.main.data.workspace.shape-layout :as dwsl]
    [app.main.data.workspace.state-helpers :as wsh]
@@ -31,8 +32,27 @@
   [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))))
+
 ;; Update functions ------------------------------------------------------------
 
+(defn on-apply-token [{:keys [token token-type-props selected-shapes] :as _props}]
+  (let [{:keys [attributes on-apply on-update-shape]
+         :or {on-apply dt/update-token-from-attributes}} token-type-props
+        shape-ids (->> selected-shapes
+                       (eduction
+                        (remove #(tokens-applied? token % attributes))
+                        (map :id)))
+        token-value (resolve-token-value token)]
+    (doseq [shape selected-shapes]
+      (st/emit! (on-apply {:token-id (:id token)
+                           :shape-id (:id shape)
+                           :attributes attributes}))
+      (on-update-shape token-value shape-ids))))
+
 (defn update-shape-radius [value shape-ids]
   (st/emit!
    (dch/update-shapes shape-ids

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

@@ -7,12 +7,9 @@
 (ns app.main.ui.workspace.tokens.sidebar
   (:require-macros [app.main.style :as stl])
   (:require
-   [app.common.data :as d]
    [app.main.data.modal :as modal]
-   [app.main.data.tokens :as dt]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.search-bar :refer [search-bar]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
    [app.main.ui.workspace.tokens.common :refer [workspace-shapes]]
@@ -20,27 +17,17 @@
    [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
-(defn on-apply-token [{:keys [token token-type-props selected-shapes] :as _props}]
-  (let [{:keys [attributes on-apply on-update-shape]
-         :or {on-apply dt/update-token-from-attributes}} token-type-props
-        shape-ids (->> selected-shapes
-                       (eduction
-                        (remove #(tokens-applied? token % attributes))
-                        (map :id)))
-        token-value (d/parse-integer (:value token))]
-    (doseq [shape selected-shapes]
-      (st/emit! (on-apply {:token-id (:id token)
-                           :shape-id (:id shape)
-                           :attributes attributes}))
-      (on-update-shape token-value shape-ids))))
-
 (mf/defc token-pill
   {::mf/wrap-props false}
   [{:keys [on-click token highlighted?]}]
-  (let [{:keys [name value]} token]
+  (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?)
-           :title (str "Token value: " value)
+                                :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}
      name]))
 
@@ -66,7 +53,7 @@
                              (mf/deps selected-shapes token-type-props)
                              (fn [event token]
                                (dom/stop-propagation event)
-                               (on-apply-token {:token token
+                               (wtc/on-apply-token {:token token
                                                     :token-type-props token-type-props
                                                     :selected-shapes selected-shapes})))
         tokens-count (count tokens)]

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

@@ -28,4 +28,9 @@
     color: var(--button-primary-foreground-color-rest);
     background: var(--button-primary-background-color-rest);
   }
+
+  &.token-pill-invalid {
+    color: var(--status-color-error-500);
+    opacity: 0.8;
+  }
 }