Pass in value with error

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

@@ -1,22 +1,43 @@
-(ns app.main.ui.workspace.tokens.errors)
+(ns app.main.ui.workspace.tokens.errors
+  (:require
+   [cuerdas.core :as str]))
 
 (def error-codes
   {:error.token/direct-self-reference
-   {:error/fn #(str "Token has self reference in name: " %)}
+   {:error/code :error.token/direct-self-reference
-   :error.token/invalid-color
+    :error/message "Token has self reference"}
-   {:error/fn #(str "Invalid color value: " %)}
-   :error.style-dictionary/missing-reference
-   {:error/fn #(str "Could not resolve reference token with name: " %)}
-   :error.style-dictionary/invalid-token-value
-   {:error/message "Invalid token value"}
-   :error/unknown
-   {:error/message "Unknown error"}})
 
-(defn humanize-errors [v errors]
+   :error.token/invalid-color
+   {:error/code :error.token/invalid-color
+    :error/fn #(str "Invalid color value: " %)}
+
+   :error.style-dictionary/missing-reference
+   {:error/code :error.style-dictionary/missing-reference
+    :error/fn #(str "Missing token references: " (str/join " " %))}
+
+   :error.style-dictionary/invalid-token-value
+   {:error/code :error.style-dictionary/invalid-token-value
+    :error/fn #(str "Invalid token value: " %)}
+
+   :error/unknown
+   {:error/code :error/unknown
+    :error/message "Unknown error"}})
+
+(defn get-error-code [error-key]
+  (get error-codes error-key (:error/unknown error-codes)))
+
+(defn error-with-value [error-key error-value]
+  (-> (get-error-code error-key)
+      (assoc :error/value error-value)))
+
+(defn has-error-code? [error-key errors]
+  (some #(= (:error/code %) error-key) errors))
+
+(defn humanize-errors [errors]
   (->> errors
        (map (fn [err]
-              (let [err' (get error-codes err err)]
+              (js/console.log "err" err)
               (cond
-                  (:error/fn err') ((:error/fn err') v)
+                (:error/fn err) ((:error/fn err) (:error/value err))
-                  (:error/message err') (:error/message err')
+                (:error/message err) (:error/message err)
-                  :else err'))))))
+                :else err)))))

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

@@ -104,10 +104,10 @@ Token names should only contain letters and digits separated by . characters.")}
         token-name (if (str/empty? name-value) "__TOKEN_STUDIO_SYSTEM.TEMP" name-value)]
     (cond
       (empty? (str/trim input))
-      (p/rejected {:errors #{:error/empty-input}})
+      (p/rejected {:errors [{:error/code :error/empty-input}]})
 
       (token-self-reference? token-name input)
-      (p/rejected {:errors #{:error.token/direct-self-reference}})
+      (p/rejected {:errors [(wte/get-error-code :error.token/direct-self-reference)]})
 
       :else
       (let [token-id (or (:id token) (random-uuid))
@@ -121,7 +121,7 @@ Token names should only contain letters and digits separated by . characters.")}
                (let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens token-name)]
                  (cond
                    resolved-value (p/resolved resolved-token)
-                   :else (p/rejected {:errors (or errors #{:error/unknown-error})}))))))))))
+                   :else (p/rejected {:errors (or errors (wte/get-error-code :error/unknown-error))}))))))))))
 
 (defn use-debonced-resolve-callback
   "Resolves a token values using `StyleDictionary`.
@@ -175,13 +175,13 @@ Token names should only contain letters and digits separated by . characters.")}
   [{:keys [result-or-errors]}]
   (let [{:keys [errors]} result-or-errors
         empty-message? (or (nil? result-or-errors)
-                           (= errors #{:error/empty-input}))]
+                           (wte/has-error-code? :error/empty-input errors))]
     [:div {:class (stl/css-case :resolved-value true
                                 :resolved-value-placeholder empty-message?
                                 :resolved-value-error (seq errors))}
      (cond
        empty-message? "Enter token value"
-       errors (->> (wte/humanize-errors (:value result-or-errors) errors)
+       errors (->> (wte/humanize-errors errors)
                    (str/join "\n"))
        :else [:p result-or-errors])]))
 

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

@@ -7,7 +7,8 @@
    [app.main.ui.workspace.tokens.token :as wtt]
    [cuerdas.core :as str]
    [promesa.core :as p]
-   [rumext.v2 :as mf]))
+   [rumext.v2 :as mf]
+   [app.main.ui.workspace.tokens.errors :as wte]))
 
 (def StyleDictionary
   "Initiates the global StyleDictionary instance with transforms
@@ -84,12 +85,13 @@
                                    token-or-err (case type
                                                   :color (if-let [tc (tinycolor/valid-color value)]
                                                            {:value value :unit (tinycolor/color-format tc)}
-                                                           {:errors #{:error.token/invalid-color}})
+                                                           {:errors [(wte/error-with-value :error.token/invalid-color value)]})
                                                   (or (wtt/parse-token-value value)
-                                                      (if-let [references (seq (wtt/find-token-references value))]
+                                                      (if-let [references (-> (wtt/find-token-references value)
-                                                        {:errors #{:error.style-dictionary/missing-reference}
+                                                                              (seq))]
+                                                        {:errors [(wte/error-with-value :error.style-dictionary/missing-reference references)]
                                                          :references references}
-                                                        {:errors #{:error.style-dictionary/invalid-token-value}})))
+                                                        {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value value)]})))
                                    output-token (if (:errors token-or-err)
                                                   (merge origin-token token-or-err)
                                                   (assoc origin-token