From 1519f8f56026a770476be2ab18a5ca68fd48a230 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Tue, 11 Jun 2024 15:12:30 +0200 Subject: [PATCH] Move to ns --- .../example-tokens-set.json} | 0 .../app/main/ui/workspace/tokens/sidebar.cljs | 50 ------------ .../ui/workspace/tokens/style_dictionary.cljs | 77 +++++++++++++++++++ 3 files changed, 77 insertions(+), 50 deletions(-) rename frontend/src/app/main/ui/workspace/tokens/{example-data.json => data/example-tokens-set.json} (100%) create mode 100644 frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs diff --git a/frontend/src/app/main/ui/workspace/tokens/example-data.json b/frontend/src/app/main/ui/workspace/tokens/data/example-tokens-set.json similarity index 100% rename from frontend/src/app/main/ui/workspace/tokens/example-data.json rename to frontend/src/app/main/ui/workspace/tokens/data/example-tokens-set.json diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 4532fd4bc..6a27130d4 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -56,56 +56,6 @@ :sizing [:div {:style {:rotate "45deg"}} i/constraint-horizontal] i/add)) - -(defn tokens->sd [tokens] - (let [data {:tokens tokens - :platforms {:json {:transformGroup "tokens-studio" - :files [{:format "custom/json" - :destination "foo"}]}} - :preprocessors ["tokens-studio"] - :log {:warnings "warn" - :verbosity "verbose"}} - js-data (clj->js data)] - (js/console.log "Input Data" js-data) - (js/window.StyleDictionary. js-data))) - -(defn simple-example [] - (let [math-token-id (random-uuid) - dynamic-token-id (random-uuid)] - {:dimension {"scale" {"value" "2px" - "type" :sizing} - "sm" {"value" "{dimension.scale} * {dimension.scale}" - "type" :sizing}}})) - -(defn tokens-studio-example [] - (-> (shadow.resource/inline "./example-data.json") - (js/JSON.parse) - .-core)) - -(defn test-tokens [data] - (let [performance-start (js/window.performance.now) - sd (tokens->sd data)] - (js/console.log "StyleDictionary" sd) - (-> sd - (.buildAllPlatforms sd "json") - (.catch js/console.error) - (.then (fn [resp] - (let [performance-end (js/window.performance.now) - duration-ms (- performance-end performance-start)] - (js/console.log "Time elapsed" duration-ms "ms") - (js/console.log "Finished" (.-allTokens resp)))))))) - -(comment - - (-> (tokens-studio-example) - (doto js/console.log)) - - (test-tokens (tokens-studio-example)) - - - - nil) - (mf/defc token-component [{:keys [type tokens selected-shapes token-type-props]}] (let [open? (mf/deref (-> (l/key type) diff --git a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs new file mode 100644 index 000000000..546d164d8 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs @@ -0,0 +1,77 @@ +(ns app.main.ui.workspace.tokens.style-dictionary + (:require + [app.main.refs :as refs] + [shadow.resource])) + +(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." + js/window.StyleDictionary) + +;; Helpers --------------------------------------------------------------------- + +(defn tokens->tree + "Convert flat tokens list into a tokens tree that is consumable by StyleDictionary." + [tokens] + (reduce + (fn [acc [_ {:keys [type name] :as token}]] + (assoc-in acc [type name] token)) + {} tokens)) + +;; Functions ------------------------------------------------------------------- + +(defn tokens->style-dictionary+ + "Resolves references and math expressions using StyleDictionary. + Returns a promise with the resolved dictionary." + [tokens {:keys [debug?]}] + (let [data (cond-> {:tokens tokens + :platforms {:json {:transformGroup "tokens-studio" + :files [{:format "custom/json" + :destination "fake-filename"}]}} + :preprocessors ["tokens-studio"]} + debug? (assoc :log {:warnings "warn" + :verbosity "verbose"})) + js-data (clj->js data)] + (when debug? + (js/console.log "Input Data" js-data)) + (StyleDictionary. js-data))) + +(defn resolve-tokens+ + "Resolves references and math expressions using StyleDictionary. + Returns a promise with the resolved dictionary." + [tokens & {:keys [debug?] :as config}] + (let [performance-start (js/window.performance.now) + sd (tokens->style-dictionary+ tokens config)] + (when debug? + (js/console.log "StyleDictionary" sd)) + (-> sd + (.buildAllPlatforms "json") + (.catch js/console.error) + (.then (fn [^js resp] + (let [performance-end (js/window.performance.now) + duration-ms (- performance-end performance-start) + resolved-tokens (.-allTokens resp)] + (when debug? + (js/console.log "Time elapsed" duration-ms "ms") + (js/console.log "Resolved tokens" resolved-tokens)) + resolved-tokens)))))) + +;; Testing --------------------------------------------------------------------- + +(defn tokens-studio-example [] + (-> (shadow.resource/inline "./data/example-tokens-set.json") + (js/JSON.parse) + .-core)) + +(comment + (-> @refs/workspace-tokens + (tokens->tree) + (clj->js) + (#(doto % js/console.log)) + (resolve-tokens+ {:debug? true})) + + (-> (tokens-studio-example) + (resolve-tokens+ {:debug? true})) + + nil)