♻️ Move token-types to changes ns

And rename it to token-properties

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

@@ -6,6 +6,8 @@
 
 (ns app.main.ui.workspace.tokens.changes
   (:require
+   [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.types.shape.layout :as ctsl]
    [app.common.types.shape.radius :as ctsr]
    [app.common.types.token :as ctt]
@@ -26,6 +28,8 @@
    [clojure.set :as set]
    [potok.v2.core :as ptk]))
 
+(declare token-properties)
+
 ;; Token Updates ---------------------------------------------------------------
 
 (defn apply-token
@@ -76,12 +80,16 @@
             (update shape :applied-tokens remove-token))))))))
 
 (defn toggle-token
-  [{:keys [token-type-props token shapes] :as _props}]
+  [{:keys [token shapes]}]
   (ptk/reify ::on-toggle-token
     ptk/WatchEvent
     (watch [_ _ _]
-      (let [{:keys [attributes all-attributes on-update-shape]} token-type-props
+      (let [{:keys [attributes all-attributes on-update-shape]}
-            unapply-tokens? (wtt/shapes-token-applied? token shapes (or all-attributes attributes))
+            (get token-properties (:type token))
+
+            unapply-tokens?
+            (wtt/shapes-token-applied? token shapes (or all-attributes attributes))
+
             shape-ids (map :id shapes)]
         (if unapply-tokens?
           (rx/of
@@ -252,3 +260,88 @@
                        (select-keys attributes))]
          (dwsl/update-layout-child shape-ids props {:ignore-touched true
                                                     :page-id page-id}))))))
+
+;; Token Types -----------------------------------------------------------------
+
+;; FIXME: the values should be lazy evaluated, probably a function,
+;; becasue on future we will need to translate that labels and that
+;; can not be done statically
+
+(def token-properties
+  "A map of default properties by token type"
+  (d/ordered-map
+   :border-radius
+   {:title "Border Radius"
+    :attributes ctt/border-radius-keys
+    :on-update-shape update-shape-radius-all
+    :modal {:key :tokens/border-radius
+            :fields [{:label "Border Radius"
+                      :key :border-radius}]}}
+
+   :color
+   {:title "Color"
+    :attributes #{:fill}
+    :all-attributes ctt/color-keys
+    :on-update-shape update-fill-stroke
+    :modal {:key :tokens/color
+            :fields [{:label "Color" :key :color}]}}
+
+   :stroke-width
+   {:title "Stroke Width"
+    :attributes ctt/stroke-width-keys
+    :on-update-shape update-stroke-width
+    :modal {:key :tokens/stroke-width
+            :fields [{:label "Stroke Width"
+                      :key :stroke-width}]}}
+
+   :sizing
+   {:title "Sizing"
+    :attributes #{:width :height}
+    :all-attributes ctt/sizing-keys
+    :on-update-shape update-shape-dimensions
+    :modal {:key :tokens/sizing
+            :fields [{:label "Sizing"
+                      :key :sizing}]}}
+   :dimensions
+   {:title "Dimensions"
+    :attributes #{:width :height}
+    :all-attributes (set/union
+                     ctt/spacing-keys
+                     ctt/sizing-keys
+                     ctt/border-radius-keys
+                     ctt/stroke-width-keys)
+    :on-update-shape update-shape-dimensions
+    :modal {:key :tokens/dimensions
+            :fields [{:label "Dimensions"
+                      :key :dimensions}]}}
+
+   :opacity
+   {:title "Opacity"
+    :attributes ctt/opacity-keys
+    :on-update-shape update-opacity
+    :modal {:key :tokens/opacity
+            :fields [{:label "Opacity"
+                      :key :opacity}]}}
+
+   :rotation
+   {:title "Rotation"
+    :attributes ctt/rotation-keys
+    :on-update-shape update-rotation
+    :modal {:key :tokens/rotation
+            :fields [{:label "Rotation"
+                      :key :rotation}]}}
+   :spacing
+   {:title "Spacing"
+    :attributes #{:column-gap :row-gap}
+    :all-attributes ctt/spacing-keys
+    :on-update-shape update-layout-spacing
+    :modal {:key :tokens/spacing
+            :fields [{:label "Spacing"
+                      :key :spacing}]}}))
+
+(defn get-token-properties [token]
+  (get token-properties (:type token)))
+
+(defn token-attributes [token-type]
+  (dm/get-in token-properties [token-type :attributes]))
+

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

@@ -18,7 +18,6 @@
    [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
    [app.main.ui.workspace.tokens.changes :as wtch]
    [app.main.ui.workspace.tokens.token :as wtt]
-   [app.main.ui.workspace.tokens.token-types :as wtty]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
    [app.util.timers :as timers]
@@ -37,7 +36,7 @@
 
 (defn generic-attribute-actions [attributes title {:keys [token selected-shapes on-update-shape]}]
   (let [on-update-shape-fn (or on-update-shape
-                               (-> (wtty/get-token-properties token)
+                               (-> (wtch/get-token-properties token)
                                    (:on-update-shape)))
         {:keys [selected-pred shape-ids]} (attribute-actions token selected-shapes attributes)]
     (map (fn [attribute]
@@ -214,7 +213,7 @@
                     (generic-attribute-actions #{:y} "Y" (assoc context-data :on-update-shape wtch/update-shape-position))))}))
 
 (defn default-actions [{:keys [token selected-token-set-name]}]
-  (let [{:keys [modal]} (wtty/get-token-properties token)]
+  (let [{:keys [modal]} (wtch/get-token-properties token)]
     [{:title (tr "workspace.token.edit")
       :no-selectable true
       :action (fn [event]

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

@@ -21,13 +21,13 @@
    [app.main.ui.notifications.context-notification :refer [context-notification]]
    [app.main.ui.workspace.colorpicker :as colorpicker]
    [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector*]]
+   [app.main.ui.workspace.tokens.changes :as wtch]
    [app.main.ui.workspace.tokens.components.controls.input-token-color-bullet :refer [input-token-color-bullet*]]
    [app.main.ui.workspace.tokens.components.controls.input-tokens :refer [input-tokens*]]
    [app.main.ui.workspace.tokens.errors :as wte]
    [app.main.ui.workspace.tokens.style-dictionary :as sd]
    [app.main.ui.workspace.tokens.tinycolor :as tinycolor]
    [app.main.ui.workspace.tokens.token :as wtt]
-   [app.main.ui.workspace.tokens.token-types :as wtty]
    [app.main.ui.workspace.tokens.update :as wtu]
    [app.main.ui.workspace.tokens.warnings :as wtw]
    [app.util.dom :as dom]
@@ -223,7 +223,7 @@
   [{:keys [token token-type action selected-token-set-name on-display-colorpicker]}]
   (let [create? (not (instance? ctob/Token token))
         token (or token {:type token-type})
-        token-properties (wtty/get-token-properties token)
+        token-properties (wtch/get-token-properties token)
         color? (wtt/color-token? token)
         selected-set-tokens (mf/deref refs/workspace-selected-token-set-tokens)
         active-theme-tokens (mf/deref refs/workspace-active-theme-sets-tokens)

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

@@ -34,7 +34,6 @@
    [app.main.ui.workspace.tokens.theme-select :refer [theme-select]]
    [app.main.ui.workspace.tokens.token :as wtt]
    [app.main.ui.workspace.tokens.token-pill :refer [token-pill*]]
-   [app.main.ui.workspace.tokens.token-types :as wtty]
    [app.util.array :as array]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
@@ -80,7 +79,7 @@
                             (l/derived lens:token-type-open-status)))
 
         {:keys [modal attributes all-attributes title] :as token-type-props}
-        (get wtty/token-types type)
+        (get wtch/token-properties type)
 
         tokens
         (mf/with-memo [tokens]
@@ -119,14 +118,12 @@
 
         on-token-pill-click
         (mf/use-fn
-         (mf/deps selected-shapes token-type-props)
+         (mf/deps selected-shapes)
          (fn [event token]
            (dom/stop-propagation event)
            (when (seq selected-shapes)
-             (st/emit!
+             (st/emit! (wtch/toggle-token {:token token
-              (wtch/toggle-token {:token token
+                                           :shapes selected-shapes})))))
-                                  :shapes selected-shapes
-                                  :token-type-props token-type-props})))))
         tokens-count (count tokens)
         can-edit?  (:can-edit (deref refs/permissions))]
 
@@ -171,7 +168,7 @@
   [tokens-by-type]
   (loop [empty  #js []
          filled #js []
-         types  (-> wtty/token-types keys seq)]
+         types  (-> wtch/token-properties keys seq)]
     (if-let [type (first types)]
       (if (not-empty (get tokens-by-type type))
         (recur empty

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

@@ -8,8 +8,8 @@
    [app.main.ui.components.color-bullet :refer [color-bullet]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
    [app.main.ui.ds.foundations.utilities.token.token-status :refer [token-status-icon*]]
+   [app.main.ui.workspace.tokens.changes :as wtch]
    [app.main.ui.workspace.tokens.token :as wtt]
-   [app.main.ui.workspace.tokens.token-types :as wtty]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
    [cuerdas.core :as str]
@@ -75,9 +75,8 @@
 ;; Helper functions
 (defn partially-applied-attr
   "Translates partially applied attributes based on the dictionary."
-  [app-token-keys is-applied token-type-props]
+  [app-token-keys is-applied {:keys [attributes all-attributes]}]
-  (let [{:keys [attributes all-attributes]} token-type-props
+  (let [filtered-keys (if all-attributes
-        filtered-keys (if all-attributes
                         (filter #(contains? all-attributes %) app-token-keys)
                         (filter #(contains? attributes %) app-token-keys))]
     (when is-applied
@@ -98,7 +97,7 @@
   "Generates a tooltip for a given token"
   [is-viewer shape token half-applied no-valid-value ref-not-in-active-set]
   (let [{:keys [name value resolved-value type]} token
-        {:keys [title] :as token-type-props} (get wtty/token-types (:type token))
+        {:keys [title] :as token-props} (wtch/get-token-properties token)
         applied-tokens (:applied-tokens shape)
         app-token-vals (set (vals applied-tokens))
         app-token-keys (keys applied-tokens)
@@ -106,7 +105,7 @@
 
 
         applied-to (if half-applied
-                     (partially-applied-attr app-token-keys is-applied? token-type-props)
+                     (partially-applied-attr app-token-keys is-applied? token-props)
                      (tr "labels.all"))
         grouped-values (group-by dimensions-dictionary app-token-keys)
 

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

@@ -1,89 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.workspace.tokens.token-types
-  (:require
-   [app.common.data :as d :refer [ordered-map]]
-   [app.common.types.token :as ctt]
-   [app.main.ui.workspace.tokens.changes :as wtch]
-   [clojure.set :as set]))
-
-(def token-types
-  (ordered-map
-   :border-radius
-   {:title "Border Radius"
-    :attributes ctt/border-radius-keys
-    :on-update-shape wtch/update-shape-radius-all
-    :modal {:key :tokens/border-radius
-            :fields [{:label "Border Radius"
-                      :key :border-radius}]}}
-
-   :color
-   {:title "Color"
-    :attributes #{:fill}
-    :all-attributes ctt/color-keys
-    :on-update-shape wtch/update-fill-stroke
-    :modal {:key :tokens/color
-            :fields [{:label "Color" :key :color}]}}
-
-   :stroke-width
-   {:title "Stroke Width"
-    :attributes ctt/stroke-width-keys
-    :on-update-shape wtch/update-stroke-width
-    :modal {:key :tokens/stroke-width
-            :fields [{:label "Stroke Width"
-                      :key :stroke-width}]}}
-
-   :sizing
-   {:title "Sizing"
-    :attributes #{:width :height}
-    :all-attributes ctt/sizing-keys
-    :on-update-shape wtch/update-shape-dimensions
-    :modal {:key :tokens/sizing
-            :fields [{:label "Sizing"
-                      :key :sizing}]}}
-   :dimensions
-   {:title "Dimensions"
-    :attributes #{:width :height}
-    :all-attributes (set/union
-                     ctt/spacing-keys
-                     ctt/sizing-keys
-                     ctt/border-radius-keys
-                     ctt/stroke-width-keys)
-    :on-update-shape wtch/update-shape-dimensions
-    :modal {:key :tokens/dimensions
-            :fields [{:label "Dimensions"
-                      :key :dimensions}]}}
-
-   :opacity
-   {:title "Opacity"
-    :attributes ctt/opacity-keys
-    :on-update-shape wtch/update-opacity
-    :modal {:key :tokens/opacity
-            :fields [{:label "Opacity"
-                      :key :opacity}]}}
-
-   :rotation
-   {:title "Rotation"
-    :attributes ctt/rotation-keys
-    :on-update-shape wtch/update-rotation
-    :modal {:key :tokens/rotation
-            :fields [{:label "Rotation"
-                      :key :rotation}]}}
-   :spacing
-   {:title "Spacing"
-    :attributes #{:column-gap :row-gap}
-    :all-attributes ctt/spacing-keys
-    :on-update-shape wtch/update-layout-spacing
-    :modal {:key :tokens/spacing
-            :fields [{:label "Spacing"
-                      :key :spacing}]}}))
-
-(defn get-token-properties [token]
-  (get token-types (:type token)))
-
-(defn token-attributes [token-type]
-  (get-in token-types [token-type :attributes]))