Merge pull request #254 from tokens-studio/fix-token-editing

Fix token editing

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

@@ -8,14 +8,15 @@
   (:require-macros [app.main.style :as stl])
   (:require
    ["lodash.debounce" :as debounce]
-   [app.main.ui.workspace.tokens.update :as wtu]
    [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.workspace.tokens.common :as tokens.common]
    [app.main.ui.workspace.tokens.style-dictionary :as sd]
    [app.main.ui.workspace.tokens.token :as wtt]
+   [app.main.ui.workspace.tokens.update :as wtu]
    [app.util.dom :as dom]
    [cuerdas.core :as str]
    [malli.core :as m]
@@ -141,14 +142,15 @@ Token names should only contain letters and digits separated by . characters.")}
 (mf/defc form
   {::mf/wrap-props false}
   [{:keys [token token-type] :as _args}]
-  (let [tokens (sd/use-resolved-workspace-tokens)
+  (let [tokens (mf/deref refs/workspace-tokens)
+        resolved-tokens (sd/use-resolved-tokens tokens)
         token-path (mf/use-memo
                     (mf/deps (:name token))
                     #(wtt/token-name->path (:name token)))
         tokens-tree (mf/use-memo
-                     (mf/deps token-path tokens)
+                     (mf/deps token-path resolved-tokens)
                      (fn []
-                       (-> (wtt/token-names-tree tokens)
+                       (-> (wtt/token-names-tree resolved-tokens)
                            ;; Allow setting editing token to it's own path
                            (d/dissoc-in token-path))))
 
@@ -177,7 +179,7 @@ Token names should only contain letters and digits separated by . characters.")}
 
         ;; Value
         value-ref (mf/use-var (:value token))
-        token-resolve-result (mf/use-state (get-in tokens [(:id token) :resolved-value]))
+        token-resolve-result (mf/use-state (get-in resolved-tokens [(wtt/token-identifier token) :resolved-value]))
         set-resolve-value (mf/use-callback
                            (fn [token-or-err]
                              (let [v (cond
@@ -219,7 +221,7 @@ Token names should only contain letters and digits separated by . characters.")}
                       (not valid-description-field?))
 
         on-submit (mf/use-callback
-                   (mf/deps validate-name validate-descripion token tokens)
+                   (mf/deps validate-name validate-descripion token resolved-tokens)
                    (fn [e]
                      (dom/prevent-default e)
                      ;; We have to re-validate the current form values before submitting
@@ -236,7 +238,7 @@ Token names should only contain letters and digits separated by . characters.")}
                                    (validate-token-value+ {:input final-value
                                                            :name-value final-name
                                                            :token token
-                                                           :tokens tokens})])
+                                                           :tokens resolved-tokens})])
                            (p/finally (fn [result err]
                                         ;; The result should be a vector of all resolved validations
                                         ;; We do not handle the error case as it will be handled by the components validations

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

@@ -9,9 +9,8 @@
    [rumext.v2 :as mf]))
 
 (def StyleDictionary
-  "The global StyleDictionary instance used as an external library for now,
-  as the package would need webpack to be bundled,
-  because shadow-cljs doesn't support some of the more modern bundler features."
+  "Initiates the global StyleDictionary instance with transforms
+  from tokens-studio used to parse and resolved token values."
   (do
     (sd-transforms/registerTransforms sd)
     (.registerFormat sd #js {:name "custom/json"

frontend/test/token_tests/style_dictionary_test.cljs

@@ -0,0 +1,37 @@
+(ns token-tests.style-dictionary-test
+  (:require
+   [app.main.ui.workspace.tokens.style-dictionary :as sd]
+   [cljs.test :as t :include-macros true]
+   [promesa.core :as p]))
+
+(def border-radius-token
+  {:id #uuid "8c868278-7c8d-431b-bbc9-7d8f15c8edb9"
+   :value "12px"
+   :name "borderRadius.sm"
+   :type :border-radius})
+
+(def reference-border-radius-token
+  {:id #uuid "b9448d78-fd5b-4e3d-aa32-445904063f5b"
+   :value "{borderRadius.sm} * 2"
+   :name "borderRadius.md-with-dashes"
+   :type :border-radius})
+
+(def tokens {(:id border-radius-token) border-radius-token
+             (:id reference-border-radius-token) reference-border-radius-token})
+
+(t/deftest resolve-tokens-test
+  (t/async
+    done
+    (t/testing "resolves tokens using style-dictionary"
+      (-> (sd/resolve-tokens+ tokens)
+          (p/finally (fn [resolved-tokens]
+                       (let [expected-tokens {"borderRadius.sm"
+                                              (assoc border-radius-token
+                                                     :resolved-value 12
+                                                     :resolved-unit "px")
+                                              "borderRadius.md-with-dashes"
+                                              (assoc reference-border-radius-token
+                                                     :resolved-value 24
+                                                     :resolved-unit "px")}]
+                         (t/is (= expected-tokens resolved-tokens))
+                         (done))))))))