Merge pull request #68 from tokens-studio/65-dimensions

Dimensions Token

common/src/app/common/types/token.cljc

@@ -7,12 +7,27 @@
 (ns app.common.types.token
   (:require
    [app.common.schema :as sm]
-   [app.common.schema.registry :as sr]))
+   [app.common.schema.registry :as sr]
+   [malli.util :as mu]))
 
-(defn merge-schemas [& schema-keys]
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; HELPERS
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn merge-schemas
+  "Merge registered schemas."
+  [& schema-keys]
   (let [schemas (map #(get @sr/registry %) schema-keys)]
     (reduce sm/merge schemas)))
 
+(defn schema-keys
+  "Converts registed map schema into set of keys."
+  [registered-schema]
+  (->> (get @sr/registry registered-schema)
+       (sm/schema)
+       (mu/keys)
+       (into #{})))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; SCHEMA
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -49,6 +64,8 @@
    [:r3 {:optional true} ::sm/uuid]
    [:r4 {:optional true} ::sm/uuid]])
 
+(def border-radius-keys (schema-keys ::border-radius))
+
 (sm/def! ::dimensions
   [:map
    [:width {:optional true} ::sm/uuid]
@@ -58,6 +75,8 @@
    [:min-width {:optional true} ::sm/uuid]
    [:max-width {:optional true} ::sm/uuid]])
 
+(def dimensions-keys (schema-keys ::dimensions))
+
 (sm/def! ::spacing
   [:map
    [:spacing-column {:optional true} ::sm/uuid]

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

@@ -8,8 +8,10 @@
   (:require
    [app.common.data :as d :refer [ordered-map]]
    [app.common.types.shape.radius :as ctsr]
-   [app.main.data.tokens :as dt]
+   [app.common.types.token :as ctt]
-   [app.main.data.workspace.changes :as dch]))
+   [app.main.data.workspace.changes :as dch]
+   [app.main.data.workspace.transforms :as dwt]
+   [app.main.store :as st]))
 
 ;; Helpers ---------------------------------------------------------------------
 
@@ -30,27 +32,34 @@
 ;; Update functions ------------------------------------------------------------
 
 (defn update-shape-radius [value shape-ids]
-  (let [parsed-value (d/parse-integer value)]
+  (st/emit!
-    (dch/update-shapes shape-ids
+   (dch/update-shapes shape-ids
-                       (fn [shape]
+                      (fn [shape]
-                         (when (ctsr/has-radius? shape)
+                        (when (ctsr/has-radius? shape)
-                           (ctsr/set-radius-1 shape parsed-value)))
+                          (ctsr/set-radius-1 shape value)))
-                       {:reg-objects? true
+                      {:reg-objects? true
-                        :attrs [:rx :ry :r1 :r2 :r3 :r4]})))
+                       :attrs ctt/border-radius-keys})))
+
+(defn update-shape-dimensions [value shape-ids]
+  (st/emit!
+   (dwt/update-dimensions shape-ids :width value)
+   (dwt/update-dimensions shape-ids :height value)))
 
 ;; Token types -----------------------------------------------------------------
 
 (def token-types
   (ordered-map
-   [:boolean {:title "Boolean"
+   [:boolean
-              :modal {:key :tokens/boolean
+    {:title "Boolean"
-                      :fields [{:label "Boolean"}]}}]
+     :modal {:key :tokens/boolean
-   [:border-radius {:title "Border Radius"
+             :fields [{:label "Boolean"}]}}]
-                    :attributes #{:rx :ry :r1 :r2 :r3 :r4}
+   [:border-radius
-                    :modal {:key :tokens/border-radius
+    {:title "Border Radius"
-                            :fields [{:label "Border Radius"
+     :attributes ctt/border-radius-keys
-                                      :key :border-radius}]}
+     :on-update-shape update-shape-radius
-                    :on-update-shape update-shape-radius}]
+     :modal {:key :tokens/border-radius
+             :fields [{:label "Border Radius"
+                       :key :border-radius}]}}]
    [:box-shadow
     {:title "Box Shadow"
      :modal {:key :tokens/box-shadow
@@ -63,7 +72,9 @@
              :fields [{:label "Sizing"
                        :key :sizing}]}}]
    [:dimension
-    {:title "Dimension"
+    {:title "Dimensions"
+     :attributes ctt/dimensions-keys
+     :on-update-shape update-shape-dimensions
      :modal {:key :tokens/dimensions
              :fields [{:label "Dimensions"
                        :key :dimensions}]}}]

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

@@ -7,6 +7,7 @@
 (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]
@@ -25,12 +26,13 @@
         shape-ids (->> selected-shapes
                        (eduction
                         (remove #(tokens-applied? token % attributes))
-                        (map :id)))]
+                        (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}))
-      (st/emit! (on-update-shape (:value token) shape-ids)))))
+      (on-update-shape token-value shape-ids))))
 
 (mf/defc token-pill
   {::mf/wrap-props false}