From 62fc2cf65262bf32638b7443b62e956453cb07a1 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Sun, 23 Jun 2024 00:10:02 +0530 Subject: [PATCH 1/9] Add initial working export tokens-json --- frontend/src/app/libs/file_builder.cljs | 168 +++++++++++++++++- .../app/main/ui/workspace/tokens/sidebar.cljs | 35 +++- .../app/main/ui/workspace/tokens/sidebar.scss | 38 ++++ frontend/src/app/util/json.cljs | 6 + 4 files changed, 245 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/libs/file_builder.cljs b/frontend/src/app/libs/file_builder.cljs index 63df0eb876..4848d39e4a 100644 --- a/frontend/src/app/libs/file_builder.cljs +++ b/frontend/src/app/libs/file_builder.cljs @@ -273,5 +273,171 @@ (binding [cfeat/*current* cfeat/default-features] (File. (fb/create-file name)))) +(def tokens-json + {:core + {:dimension + {:scale {:value "2" :type "dimension"} + :xs {:value "4" :type "dimension"} + :sm {:value "{dimension.xs} * {dimension.scale}" :type "dimension"} + :md {:value "{dimension.sm} * {dimension.scale}" :type "dimension"} + :lg {:value "{dimension.md} * {dimension.scale}" :type "dimension"} + :xl {:value "{dimension.lg} * {dimension.scale}" :type "dimension"}} + :spacing + {:xs {:value "{dimension.xs}" :type "spacing"} + :sm {:value "{dimension.sm}" :type "spacing"} + :md {:value "{dimension.md}" :type "spacing"} + :lg {:value "{dimension.lg}" :type "spacing"} + :xl {:value "{dimension.xl}" :type "spacing"} + :multi-value {:value "{dimension.sm} {dimension.xl}" :type "spacing" + :description "You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-value-spacing-tokens"}} + :borderRadius + {:sm {:value "4" :type "borderRadius"} + :lg {:value "8" :type "borderRadius"} + :xl {:value "16" :type "borderRadius"} + :multi-value {:value "{borderRadius.sm} {borderRadius.lg}" :type "borderRadius" + :description "You can have multiple values in a single radius token. Read more on these: https://docs.tokens.studio/available-tokens/border-radius-tokens#single--multiple-values"}} + :colors + {:black {:value "#000000" :type "color"} + :white {:value "#ffffff" :type "color"} + :gray + {"100" {:value "#f7fafc" :type "color"} + "200" {:value "#edf2f7" :type "color"} + "300" {:value "#e2e8f0" :type "color"} + "400" {:value "#cbd5e0" :type "color"} + "500" {:value "#a0aec0" :type "color"} + "600" {:value "#718096" :type "color"} + "700" {:value "#4a5568" :type "color"} + "800" {:value "#2d3748" :type "color"} + "900" {:value "#1a202c" :type "color"}} + :red + {"100" {:value "#fff5f5" :type "color"} + "200" {:value "#fed7d7" :type "color"} + "300" {:value "#feb2b2" :type "color"} + "400" {:value "#fc8181" :type "color"} + "500" {:value "#f56565" :type "color"} + "600" {:value "#e53e3e" :type "color"} + "700" {:value "#c53030" :type "color"} + "800" {:value "#9b2c2c" :type "color"} + "900" {:value "#742a2a" :type "color"}} + :orange + {"100" {:value "#fffaf0" :type "color"} + "200" {:value "#feebc8" :type "color"} + "300" {:value "#fbd38d" :type "color"} + "400" {:value "#f6ad55" :type "color"} + "500" {:value "#ed8936" :type "color"} + "600" {:value "#dd6b20" :type "color"} + "700" {:value "#c05621" :type "color"} + "800" {:value "#9c4221" :type "color"} + "900" {:value "#7b341e" :type "color"}} + :yellow + {"100" {:value "#fffff0" :type "color"} + "200" {:value "#fefcbf" :type "color"} + "300" {:value "#faf089" :type "color"} + "400" {:value "#f6e05e" :type "color"} + "500" {:value "#ecc94b" :type "color"} + "600" {:value "#d69e2e" :type "color"} + "700" {:value "#b7791f" :type "color"} + "800" {:value "#975a16" :type "color"} + "900" {:value "#744210" :type "color"}} + :green + {"100" {:value "#f0fff4" :type "color"} + "200" {:value "#c6f6d5" :type "color"} + "300" {:value "#9ae6b4" :type "color"} + "400" {:value "#68d391" :type "color"} + "500" {:value "#48bb78" :type "color"} + "600" {:value "#38a169" :type "color"} + "700" {:value "#2f855a" :type "color"} + "800" {:value "#276749" :type "color"} + "900" {:value "#22543d" :type "color"}} + :teal + {"100" {:value "#e6fffa" :type "color"} + "200" {:value "#b2f5ea" :type "color"} + "300" {:value "#81e6d9" :type "color"} + "400" {:value "#4fd1c5" :type "color"} + "500" {:value "#38b2ac" :type "color"} + "600" {:value "#319795" :type "color"} + "700" {:value "#2c7a7b" :type "color"} + "800" {:value "#285e61" :type "color"} + "900" {:value "#234e52" :type "color"}} + :blue + {"100" {:value "#ebf8ff" :type "color"} + "200" {:value "#bee3f8" :type "color"} + "300" {:value "#90cdf4" :type "color"} + "400" {:value "#63b3ed" :type "color"} + "500" {:value "#4299e1" :type "color"} + "600" {:value "#3182ce" :type "color"} + "700" {:value "#2b6cb0" :type "color"} + "800" {:value "#2c5282" :type "color"} + "900" {:value "#2a4365" :type "color"}} + :indigo + {"100" {:value "#ebf4ff" :type "color"} + "200" {:value "#c3dafe" :type "color"} + "300" {:value "#a3bffa" :type "color"} + "400" {:value "#7f9cf5" :type "color"} + "500" {:value "#667eea" :type "color"} + "600" {:value "#5a67d8" :type "color"} + "700" {:value "#4c51bf" :type "color"} + "800" {:value "#434190" :type "color"} + "900" {:value "#3c366b" :type "color"}} + :purple + {"100" {:value "#faf5ff" :type "color"} + "200" {:value "#e9d8fd" :type "color"} + "300" {:value "#d6bcfa" :type "color"} + "400" {:value "#b794f4" :type "color"} + "500" {:value "#9f7aea" :type "color"} + "600" {:value "#805ad5" :type "color"} + "700" {:value "#6b46c1" :type "color"} + "800" {:value "#553c9a" :type "color"} + "900" {:value "#44337a" :type "color"}} + :pink + {"100" {:value "#fff5f7" :type "color"} + "200" {:value "#fed7e2" :type "color"} + "300" {:value "#fbb6ce" :type "color"} + "400" {:value "#f687b3" :type "color"} + "500" {:value "#ed64a6" :type "color"} + "600" {:value "#d53f8c" :type "color"} + "700" {:value "#b83280" :type "color"} + "800" {:value "#97266d" :type "color"} + "900" {:value "#702459" :type "color"}}} + :opacity + {:low {:value "10%" :type "opacity"} + :md {:value "50%" :type "opacity"} + :high {:value "90%" :type "opacity"}} + :fontFamilies + {:heading {:value "Inter" :type "fontFamilies"} + :body {:value "Roboto" :type "fontFamilies"}} + :lineHeights + {:heading {:value "110%" :type "lineHeights"} + :body {:value "140%" :type "lineHeights"}} + :letterSpacing + {:default {:value "0" :type "letterSpacing"} + :increased {:value "150%" :type "letterSpacing"} + :decreased {:value "-5%" :type "letterSpacing"}} + :paragraphSpacing + {:h1 {:value "32" :type "paragraphSpacing"} + :h2 {:value "26" :type "paragraphSpacing"}} + :fontWeights + {:headingRegular {:value "Regular" :type "fontWeights"} + :headingBold {:value "Bold" :type "fontWeights"} + :bodyRegular {:value "Regular" :type "fontWeights"} + :bodyBold {:value "Bold" :type "fontWeights"}} + :fontSizes + {:h1 {:value "{fontSizes.h2} * 1.25" :type "fontSizes"} + :h2 {:value "{fontSizes.h3} * 1.25" :type "fontSizes"} + :h3 {:value "{fontSizes.h4} * 1.25" :type "fontSizes"} + :h4 {:value "{fontSizes.h5} * 1.25" :type "fontSizes"} + :h5 {:value "{fontSizes.h6} * 1.25" :type "fontSizes"} + :h6 {:value "{fontSizes.body} * 1" :type "fontSizes"} + :body {:value "16" :type "fontSizes"} + :sm {:value "{fontSizes.body} * 0.85" :type "fontSizes"} + :xs {:value "{fontSizes.body} * 0.65" :type "fontSizes"}}}}) + +(defn export-tokens-file [tokens-json] + (let [file-name "tokens.json" + file-content (json/encode-tokens tokens-json) + blob (wapi/create-blob (clj->js file-content) "application/json")] + (dom/trigger-download file-name blob))) + (defn exports [] - #js {:createFile create-file-export}) + #js {:createFile create-file-export + :exportTokens export-tokens-file}) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index d3350b3d50..88acf8a6f7 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -8,6 +8,7 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] + [app.libs.file-builder :as fb] [app.main.data.modal :as modal] [app.main.data.tokens :as dt] [app.main.refs :as refs] @@ -25,6 +26,32 @@ (def lens:token-type-open-status (l/derived (l/in [:workspace-tokens :open-status]) st/state)) +(def ^:private download-icon + (i/icon-xref :download (stl/css :download-icon))) + +(defn transform-tokens [tokens] + (let [grouped-tokens (group-by (comp keyword :type second) tokens) + map-token (fn [[_ token]] + [(keyword (:name token)) + {:value (:value token) + :type (:type token)}])] + (js/console.log grouped-tokens) + (js/console.log map-token) + {:core (into (sorted-map) + (map (fn [[type tokens]] + [type + (into (sorted-map) + (map map-token tokens))]) + grouped-tokens))})) + +(defn download-tokens-as-json [] + (let [all-tokens (deref refs/workspace-tokens) + transformed-tokens-json (transform-tokens all-tokens)] + (js/console.log transformed-tokens-json) + (fb/export-tokens-file transformed-tokens-json))) + + + (mf/defc token-pill {::mf/wrap-props false} [{:keys [on-click token highlighted? on-context-menu]}] @@ -163,4 +190,10 @@ ::mf/wrap-props false} [_props] [:div {:class (stl/css :sidebar-tab-wrapper)} - [:& tokens-explorer]]) + [:& tokens-explorer] + [:button {:class (stl/css :download-json-button) + :on-click download-tokens-as-json} "Download Tokens as JSON" + [:span.separator] + download-icon] + ]) + \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss index 64f11a3ce0..1484ae70aa 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss @@ -49,3 +49,41 @@ // Align better with the label translate: 0px -1px; } + +.download-json-button { + position: absolute; + bottom: $s-12; + right: $s-12; + padding: $s-8 $s-16; + font-size: $fs-12; + background-color: var(--button-primary-background-color-rest); + color: var(--button-primary-foreground-color-rest); + border: none; + border-radius: $br-4; + display: flex; + align-items: center; + cursor: pointer; + + &:hover { + background-color: var(--button-primary-background-color-hover); + } + + &:active { + background-color: var(--button-primary-background-color-active); + } + + .download-icon { + @extend .button-icon; + stroke: var(--icon-foreground); + width:20px; + height:20px; + margin-left: $s-8; + } + + .separator { + height: 16px; + width: 1px; + background-color: var(--button-primary-foreground-color-rest); + margin-left: $s-8; + } +} \ No newline at end of file diff --git a/frontend/src/app/util/json.cljs b/frontend/src/app/util/json.cljs index 536d29e15b..6481544ee2 100644 --- a/frontend/src/app/util/json.cljs +++ b/frontend/src/app/util/json.cljs @@ -17,3 +17,9 @@ (-> data (clj->js) (js/JSON.stringify))) + +(defn encode-tokens + [data] + (-> data + (clj->js) + (js/JSON.stringify nil 2))) From 75bdda6b077b43412f4771ab1f725904490429b4 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Sun, 23 Jun 2024 00:16:15 +0530 Subject: [PATCH 2/9] add some formatting --- .../src/app/main/ui/workspace/tokens/sidebar.cljs | 12 +++++------- .../src/app/main/ui/workspace/tokens/sidebar.scss | 6 +++--- frontend/src/app/util/json.cljs | 2 +- 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 88acf8a6f7..f4092988df 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -35,8 +35,8 @@ [(keyword (:name token)) {:value (:value token) :type (:type token)}])] - (js/console.log grouped-tokens) - (js/console.log map-token) + (js/console.log grouped-tokens) + (js/console.log map-token) {:core (into (sorted-map) (map (fn [[type tokens]] [type @@ -47,7 +47,7 @@ (defn download-tokens-as-json [] (let [all-tokens (deref refs/workspace-tokens) transformed-tokens-json (transform-tokens all-tokens)] - (js/console.log transformed-tokens-json) + (js/console.log transformed-tokens-json) (fb/export-tokens-file transformed-tokens-json))) @@ -192,8 +192,6 @@ [:div {:class (stl/css :sidebar-tab-wrapper)} [:& tokens-explorer] [:button {:class (stl/css :download-json-button) - :on-click download-tokens-as-json} "Download Tokens as JSON" + :on-click download-tokens-as-json} "Download Tokens as JSON" [:span.separator] - download-icon] - ]) - \ No newline at end of file + download-icon]]) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss index 1484ae70aa..4b54e51b22 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss @@ -75,8 +75,8 @@ .download-icon { @extend .button-icon; stroke: var(--icon-foreground); - width:20px; - height:20px; + width: 20px; + height: 20px; margin-left: $s-8; } @@ -86,4 +86,4 @@ background-color: var(--button-primary-foreground-color-rest); margin-left: $s-8; } -} \ No newline at end of file +} diff --git a/frontend/src/app/util/json.cljs b/frontend/src/app/util/json.cljs index 6481544ee2..1cf3f21bdf 100644 --- a/frontend/src/app/util/json.cljs +++ b/frontend/src/app/util/json.cljs @@ -22,4 +22,4 @@ [data] (-> data (clj->js) - (js/JSON.stringify nil 2))) + (js/JSON.stringify nil 2))) From bbb09567f6a3c99374316ec07093175f36d50abf Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Mon, 24 Jun 2024 14:18:35 +0530 Subject: [PATCH 3/9] Remove sample json data --- frontend/src/app/libs/file_builder.cljs | 159 ------------------------ 1 file changed, 159 deletions(-) diff --git a/frontend/src/app/libs/file_builder.cljs b/frontend/src/app/libs/file_builder.cljs index 4848d39e4a..21891bcdc1 100644 --- a/frontend/src/app/libs/file_builder.cljs +++ b/frontend/src/app/libs/file_builder.cljs @@ -273,165 +273,6 @@ (binding [cfeat/*current* cfeat/default-features] (File. (fb/create-file name)))) -(def tokens-json - {:core - {:dimension - {:scale {:value "2" :type "dimension"} - :xs {:value "4" :type "dimension"} - :sm {:value "{dimension.xs} * {dimension.scale}" :type "dimension"} - :md {:value "{dimension.sm} * {dimension.scale}" :type "dimension"} - :lg {:value "{dimension.md} * {dimension.scale}" :type "dimension"} - :xl {:value "{dimension.lg} * {dimension.scale}" :type "dimension"}} - :spacing - {:xs {:value "{dimension.xs}" :type "spacing"} - :sm {:value "{dimension.sm}" :type "spacing"} - :md {:value "{dimension.md}" :type "spacing"} - :lg {:value "{dimension.lg}" :type "spacing"} - :xl {:value "{dimension.xl}" :type "spacing"} - :multi-value {:value "{dimension.sm} {dimension.xl}" :type "spacing" - :description "You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-value-spacing-tokens"}} - :borderRadius - {:sm {:value "4" :type "borderRadius"} - :lg {:value "8" :type "borderRadius"} - :xl {:value "16" :type "borderRadius"} - :multi-value {:value "{borderRadius.sm} {borderRadius.lg}" :type "borderRadius" - :description "You can have multiple values in a single radius token. Read more on these: https://docs.tokens.studio/available-tokens/border-radius-tokens#single--multiple-values"}} - :colors - {:black {:value "#000000" :type "color"} - :white {:value "#ffffff" :type "color"} - :gray - {"100" {:value "#f7fafc" :type "color"} - "200" {:value "#edf2f7" :type "color"} - "300" {:value "#e2e8f0" :type "color"} - "400" {:value "#cbd5e0" :type "color"} - "500" {:value "#a0aec0" :type "color"} - "600" {:value "#718096" :type "color"} - "700" {:value "#4a5568" :type "color"} - "800" {:value "#2d3748" :type "color"} - "900" {:value "#1a202c" :type "color"}} - :red - {"100" {:value "#fff5f5" :type "color"} - "200" {:value "#fed7d7" :type "color"} - "300" {:value "#feb2b2" :type "color"} - "400" {:value "#fc8181" :type "color"} - "500" {:value "#f56565" :type "color"} - "600" {:value "#e53e3e" :type "color"} - "700" {:value "#c53030" :type "color"} - "800" {:value "#9b2c2c" :type "color"} - "900" {:value "#742a2a" :type "color"}} - :orange - {"100" {:value "#fffaf0" :type "color"} - "200" {:value "#feebc8" :type "color"} - "300" {:value "#fbd38d" :type "color"} - "400" {:value "#f6ad55" :type "color"} - "500" {:value "#ed8936" :type "color"} - "600" {:value "#dd6b20" :type "color"} - "700" {:value "#c05621" :type "color"} - "800" {:value "#9c4221" :type "color"} - "900" {:value "#7b341e" :type "color"}} - :yellow - {"100" {:value "#fffff0" :type "color"} - "200" {:value "#fefcbf" :type "color"} - "300" {:value "#faf089" :type "color"} - "400" {:value "#f6e05e" :type "color"} - "500" {:value "#ecc94b" :type "color"} - "600" {:value "#d69e2e" :type "color"} - "700" {:value "#b7791f" :type "color"} - "800" {:value "#975a16" :type "color"} - "900" {:value "#744210" :type "color"}} - :green - {"100" {:value "#f0fff4" :type "color"} - "200" {:value "#c6f6d5" :type "color"} - "300" {:value "#9ae6b4" :type "color"} - "400" {:value "#68d391" :type "color"} - "500" {:value "#48bb78" :type "color"} - "600" {:value "#38a169" :type "color"} - "700" {:value "#2f855a" :type "color"} - "800" {:value "#276749" :type "color"} - "900" {:value "#22543d" :type "color"}} - :teal - {"100" {:value "#e6fffa" :type "color"} - "200" {:value "#b2f5ea" :type "color"} - "300" {:value "#81e6d9" :type "color"} - "400" {:value "#4fd1c5" :type "color"} - "500" {:value "#38b2ac" :type "color"} - "600" {:value "#319795" :type "color"} - "700" {:value "#2c7a7b" :type "color"} - "800" {:value "#285e61" :type "color"} - "900" {:value "#234e52" :type "color"}} - :blue - {"100" {:value "#ebf8ff" :type "color"} - "200" {:value "#bee3f8" :type "color"} - "300" {:value "#90cdf4" :type "color"} - "400" {:value "#63b3ed" :type "color"} - "500" {:value "#4299e1" :type "color"} - "600" {:value "#3182ce" :type "color"} - "700" {:value "#2b6cb0" :type "color"} - "800" {:value "#2c5282" :type "color"} - "900" {:value "#2a4365" :type "color"}} - :indigo - {"100" {:value "#ebf4ff" :type "color"} - "200" {:value "#c3dafe" :type "color"} - "300" {:value "#a3bffa" :type "color"} - "400" {:value "#7f9cf5" :type "color"} - "500" {:value "#667eea" :type "color"} - "600" {:value "#5a67d8" :type "color"} - "700" {:value "#4c51bf" :type "color"} - "800" {:value "#434190" :type "color"} - "900" {:value "#3c366b" :type "color"}} - :purple - {"100" {:value "#faf5ff" :type "color"} - "200" {:value "#e9d8fd" :type "color"} - "300" {:value "#d6bcfa" :type "color"} - "400" {:value "#b794f4" :type "color"} - "500" {:value "#9f7aea" :type "color"} - "600" {:value "#805ad5" :type "color"} - "700" {:value "#6b46c1" :type "color"} - "800" {:value "#553c9a" :type "color"} - "900" {:value "#44337a" :type "color"}} - :pink - {"100" {:value "#fff5f7" :type "color"} - "200" {:value "#fed7e2" :type "color"} - "300" {:value "#fbb6ce" :type "color"} - "400" {:value "#f687b3" :type "color"} - "500" {:value "#ed64a6" :type "color"} - "600" {:value "#d53f8c" :type "color"} - "700" {:value "#b83280" :type "color"} - "800" {:value "#97266d" :type "color"} - "900" {:value "#702459" :type "color"}}} - :opacity - {:low {:value "10%" :type "opacity"} - :md {:value "50%" :type "opacity"} - :high {:value "90%" :type "opacity"}} - :fontFamilies - {:heading {:value "Inter" :type "fontFamilies"} - :body {:value "Roboto" :type "fontFamilies"}} - :lineHeights - {:heading {:value "110%" :type "lineHeights"} - :body {:value "140%" :type "lineHeights"}} - :letterSpacing - {:default {:value "0" :type "letterSpacing"} - :increased {:value "150%" :type "letterSpacing"} - :decreased {:value "-5%" :type "letterSpacing"}} - :paragraphSpacing - {:h1 {:value "32" :type "paragraphSpacing"} - :h2 {:value "26" :type "paragraphSpacing"}} - :fontWeights - {:headingRegular {:value "Regular" :type "fontWeights"} - :headingBold {:value "Bold" :type "fontWeights"} - :bodyRegular {:value "Regular" :type "fontWeights"} - :bodyBold {:value "Bold" :type "fontWeights"}} - :fontSizes - {:h1 {:value "{fontSizes.h2} * 1.25" :type "fontSizes"} - :h2 {:value "{fontSizes.h3} * 1.25" :type "fontSizes"} - :h3 {:value "{fontSizes.h4} * 1.25" :type "fontSizes"} - :h4 {:value "{fontSizes.h5} * 1.25" :type "fontSizes"} - :h5 {:value "{fontSizes.h6} * 1.25" :type "fontSizes"} - :h6 {:value "{fontSizes.body} * 1" :type "fontSizes"} - :body {:value "16" :type "fontSizes"} - :sm {:value "{fontSizes.body} * 0.85" :type "fontSizes"} - :xs {:value "{fontSizes.body} * 0.65" :type "fontSizes"}}}}) - (defn export-tokens-file [tokens-json] (let [file-name "tokens.json" file-content (json/encode-tokens tokens-json) From 0a73cbc6f1026507ff55d290801bd9fba3e94ace Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Mon, 24 Jun 2024 14:18:57 +0530 Subject: [PATCH 4/9] Move transform and download functionality to core.cljs --- .../app/main/ui/workspace/tokens/core.cljs | 21 +++++++++++++++ .../app/main/ui/workspace/tokens/sidebar.cljs | 26 +------------------ 2 files changed, 22 insertions(+), 25 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/core.cljs b/frontend/src/app/main/ui/workspace/tokens/core.cljs index dc86af1284..9a68f70eaf 100644 --- a/frontend/src/app/main/ui/workspace/tokens/core.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/core.cljs @@ -9,11 +9,13 @@ [app.common.data :as d :refer [ordered-map]] [app.common.types.shape.radius :as ctsr] [app.common.types.token :as ctt] + [app.libs.file-builder :as fb] [app.main.data.tokens :as dt] [app.main.data.workspace :as udw] [app.main.data.workspace.changes :as dch] [app.main.data.workspace.shape-layout :as dwsl] [app.main.data.workspace.transforms :as dwt] + [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.workspace.tokens.style-dictionary :as sd] [promesa.core :as p])) @@ -128,6 +130,25 @@ (st/emit! (dwsl/update-layout [shape-id] layout-update))))) +;; JSON export functions ------------------------------------------------------- +(defn transform-tokens-into-json-format [tokens] + (let [grouped-tokens (group-by (comp keyword :type second) tokens) + map-token (fn [[_ token]] + [(keyword (:name token)) + {:value (:value token) + :type (:type token)}])] + {:core (into (sorted-map) + (map (fn [[type tokens]] + [type + (into (sorted-map) + (map map-token tokens))]) + grouped-tokens))})) + +(defn download-tokens-as-json [] + (let [all-tokens (deref refs/workspace-tokens) + transformed-tokens-json (transform-tokens-into-json-format all-tokens)] + (fb/export-tokens-file transformed-tokens-json))) + ;; Token types ----------------------------------------------------------------- (def token-types diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index f4092988df..acd5cc62d2 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -8,7 +8,6 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] - [app.libs.file-builder :as fb] [app.main.data.modal :as modal] [app.main.data.tokens :as dt] [app.main.refs :as refs] @@ -29,29 +28,6 @@ (def ^:private download-icon (i/icon-xref :download (stl/css :download-icon))) -(defn transform-tokens [tokens] - (let [grouped-tokens (group-by (comp keyword :type second) tokens) - map-token (fn [[_ token]] - [(keyword (:name token)) - {:value (:value token) - :type (:type token)}])] - (js/console.log grouped-tokens) - (js/console.log map-token) - {:core (into (sorted-map) - (map (fn [[type tokens]] - [type - (into (sorted-map) - (map map-token tokens))]) - grouped-tokens))})) - -(defn download-tokens-as-json [] - (let [all-tokens (deref refs/workspace-tokens) - transformed-tokens-json (transform-tokens all-tokens)] - (js/console.log transformed-tokens-json) - (fb/export-tokens-file transformed-tokens-json))) - - - (mf/defc token-pill {::mf/wrap-props false} [{:keys [on-click token highlighted? on-context-menu]}] @@ -192,6 +168,6 @@ [:div {:class (stl/css :sidebar-tab-wrapper)} [:& tokens-explorer] [:button {:class (stl/css :download-json-button) - :on-click download-tokens-as-json} "Download Tokens as JSON" + :on-click wtc/download-tokens-as-json} "Download Tokens as JSON" [:span.separator] download-icon]]) From 2b3f60231236d5129aac8fed306d28ccbe47686d Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Mon, 24 Jun 2024 17:50:24 +0530 Subject: [PATCH 5/9] Move json encode functionalities to tokens namespace --- frontend/src/app/libs/file_builder.cljs | 9 +-------- .../src/app/main/ui/workspace/tokens/core.cljs | 16 +++++++++++++++- frontend/src/app/util/json.cljs | 6 ------ 3 files changed, 16 insertions(+), 15 deletions(-) diff --git a/frontend/src/app/libs/file_builder.cljs b/frontend/src/app/libs/file_builder.cljs index 21891bcdc1..63df0eb876 100644 --- a/frontend/src/app/libs/file_builder.cljs +++ b/frontend/src/app/libs/file_builder.cljs @@ -273,12 +273,5 @@ (binding [cfeat/*current* cfeat/default-features] (File. (fb/create-file name)))) -(defn export-tokens-file [tokens-json] - (let [file-name "tokens.json" - file-content (json/encode-tokens tokens-json) - blob (wapi/create-blob (clj->js file-content) "application/json")] - (dom/trigger-download file-name blob))) - (defn exports [] - #js {:createFile create-file-export - :exportTokens export-tokens-file}) + #js {:createFile create-file-export}) diff --git a/frontend/src/app/main/ui/workspace/tokens/core.cljs b/frontend/src/app/main/ui/workspace/tokens/core.cljs index 9a68f70eaf..ead2f8ec77 100644 --- a/frontend/src/app/main/ui/workspace/tokens/core.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/core.cljs @@ -18,6 +18,8 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.workspace.tokens.style-dictionary :as sd] + [app.util.dom :as dom] + [app.util.webapi :as wapi] [promesa.core :as p])) ;; Helpers --------------------------------------------------------------------- @@ -131,6 +133,18 @@ (dwsl/update-layout [shape-id] layout-update))))) ;; JSON export functions ------------------------------------------------------- +(defn encode-tokens + [data] + (-> data + (clj->js) + (js/JSON.stringify nil 2))) + +(defn export-tokens-file [tokens-json] + (let [file-name "tokens.json" + file-content (encode-tokens tokens-json) + blob (wapi/create-blob (clj->js file-content) "application/json")] + (dom/trigger-download file-name blob))) + (defn transform-tokens-into-json-format [tokens] (let [grouped-tokens (group-by (comp keyword :type second) tokens) map-token (fn [[_ token]] @@ -147,7 +161,7 @@ (defn download-tokens-as-json [] (let [all-tokens (deref refs/workspace-tokens) transformed-tokens-json (transform-tokens-into-json-format all-tokens)] - (fb/export-tokens-file transformed-tokens-json))) + (export-tokens-file transformed-tokens-json))) ;; Token types ----------------------------------------------------------------- diff --git a/frontend/src/app/util/json.cljs b/frontend/src/app/util/json.cljs index 1cf3f21bdf..536d29e15b 100644 --- a/frontend/src/app/util/json.cljs +++ b/frontend/src/app/util/json.cljs @@ -17,9 +17,3 @@ (-> data (clj->js) (js/JSON.stringify))) - -(defn encode-tokens - [data] - (-> data - (clj->js) - (js/JSON.stringify nil 2))) From db26b38e816d6f007ea2b1808ca525c92aee0839 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Mon, 24 Jun 2024 18:47:12 +0530 Subject: [PATCH 6/9] Modify transform tokens to nest within token names --- .../app/main/ui/workspace/tokens/core.cljs | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/core.cljs b/frontend/src/app/main/ui/workspace/tokens/core.cljs index ead2f8ec77..f5c91870e4 100644 --- a/frontend/src/app/main/ui/workspace/tokens/core.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/core.cljs @@ -20,6 +20,7 @@ [app.main.ui.workspace.tokens.style-dictionary :as sd] [app.util.dom :as dom] [app.util.webapi :as wapi] + [cuerdas.core :as str] [promesa.core :as p])) ;; Helpers --------------------------------------------------------------------- @@ -133,6 +134,10 @@ (dwsl/update-layout [shape-id] layout-update))))) ;; JSON export functions ------------------------------------------------------- +(defn kebab-to-camel [token-type] + (let [parts (str/split token-type #"-")] + (apply str (first parts) (str/capital (second parts))))) + (defn encode-tokens [data] (-> data @@ -146,17 +151,15 @@ (dom/trigger-download file-name blob))) (defn transform-tokens-into-json-format [tokens] - (let [grouped-tokens (group-by (comp keyword :type second) tokens) - map-token (fn [[_ token]] - [(keyword (:name token)) - {:value (:value token) - :type (:type token)}])] - {:core (into (sorted-map) - (map (fn [[type tokens]] - [type - (into (sorted-map) - (map map-token tokens))]) - grouped-tokens))})) + (let [grouped-tokens (group-by #(keyword (:name (second %))) tokens) + map-token (fn [token] + {:value (:value token) + :type (kebab-to-camel (:type token))})] + {:global (into (sorted-map) + (map (fn [[name tokens]] + [(keyword name) + (map-token (second (first tokens)))]) + grouped-tokens))})) (defn download-tokens-as-json [] (let [all-tokens (deref refs/workspace-tokens) From fb7b11a13937b8f8f7eb4fe8ca8f440c49e1b83d Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Mon, 24 Jun 2024 18:50:36 +0530 Subject: [PATCH 7/9] Remove : from token type in export --- frontend/src/app/main/ui/workspace/tokens/core.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/core.cljs b/frontend/src/app/main/ui/workspace/tokens/core.cljs index f5c91870e4..f8befea98c 100644 --- a/frontend/src/app/main/ui/workspace/tokens/core.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/core.cljs @@ -154,7 +154,7 @@ (let [grouped-tokens (group-by #(keyword (:name (second %))) tokens) map-token (fn [token] {:value (:value token) - :type (kebab-to-camel (:type token))})] + :type (kebab-to-camel (name (:type token)))})] {:global (into (sorted-map) (map (fn [[name tokens]] [(keyword name) From 29e3171bd97a91a6c6c607b3945e5a528123ecd5 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Mon, 24 Jun 2024 19:07:53 +0530 Subject: [PATCH 8/9] Incorporate styling changes to match Penpot design language --- .../app/main/ui/workspace/tokens/sidebar.cljs | 6 ++--- .../app/main/ui/workspace/tokens/sidebar.scss | 27 +++---------------- 2 files changed, 7 insertions(+), 26 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index acd5cc62d2..3ab3519e01 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -168,6 +168,6 @@ [:div {:class (stl/css :sidebar-tab-wrapper)} [:& tokens-explorer] [:button {:class (stl/css :download-json-button) - :on-click wtc/download-tokens-as-json} "Download Tokens as JSON" - [:span.separator] - download-icon]]) + :on-click wtc/download-tokens-as-json} + download-icon + "Export JSON"]]) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss index 4b54e51b22..67ff95ee03 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss @@ -51,39 +51,20 @@ } .download-json-button { + @extend .button-secondary; position: absolute; bottom: $s-12; right: $s-12; - padding: $s-8 $s-16; - font-size: $fs-12; - background-color: var(--button-primary-background-color-rest); - color: var(--button-primary-foreground-color-rest); - border: none; - border-radius: $br-4; display: flex; align-items: center; - cursor: pointer; - - &:hover { - background-color: var(--button-primary-background-color-hover); - } - - &:active { - background-color: var(--button-primary-background-color-active); - } + padding: $s-6 $s-8; + text-transform: uppercase; + gap: $s-8; .download-icon { @extend .button-icon; stroke: var(--icon-foreground); width: 20px; height: 20px; - margin-left: $s-8; - } - - .separator { - height: 16px; - width: 1px; - background-color: var(--button-primary-foreground-color-rest); - margin-left: $s-8; } } From ee057c498e94aaa6e23db72b34f3f062f344a51e Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Mon, 24 Jun 2024 20:44:08 +0530 Subject: [PATCH 9/9] Simplify tranform tokens function --- .../src/app/main/ui/workspace/tokens/core.cljs | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/core.cljs b/frontend/src/app/main/ui/workspace/tokens/core.cljs index f8befea98c..29d58d0e97 100644 --- a/frontend/src/app/main/ui/workspace/tokens/core.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/core.cljs @@ -134,9 +134,6 @@ (dwsl/update-layout [shape-id] layout-update))))) ;; JSON export functions ------------------------------------------------------- -(defn kebab-to-camel [token-type] - (let [parts (str/split token-type #"-")] - (apply str (first parts) (str/capital (second parts))))) (defn encode-tokens [data] @@ -151,15 +148,12 @@ (dom/trigger-download file-name blob))) (defn transform-tokens-into-json-format [tokens] - (let [grouped-tokens (group-by #(keyword (:name (second %))) tokens) - map-token (fn [token] - {:value (:value token) - :type (kebab-to-camel (name (:type token)))})] - {:global (into (sorted-map) - (map (fn [[name tokens]] - [(keyword name) - (map-token (second (first tokens)))]) - grouped-tokens))})) + (let [global (reduce + (fn [acc [_ {:keys [name value type]}]] + (assoc acc name {:value value + :type (str/camel type)})) + (sorted-map) tokens)] + {:global global})) (defn download-tokens-as-json [] (let [all-tokens (deref refs/workspace-tokens)