Merge pull request #379 from tokens-studio/florian/computed-set-checkmark

Display computed checkmark next to token set groups
2025-01-20 13:42:59 -05:00 · 2024-12-10 17:23:09 +01:00 · 2024-12-10 17:23:09 +01:00 · 15ba0746c6
commit 15ba0746c6
parent 88fdafa2c6 6e7a5e5c7f
5 changed files with 173 additions and 48 deletions
--- a/common/src/app/common/types/tokens_lib.cljc
+++ b/common/src/app/common/types/tokens_lib.cljc
@ -625,6 +625,11 @@ When `before-set-name` is nil, move set to bottom")
  (delete-token-from-set [_ set-name token-name] "delete a token from a set")
  (toggle-set-in-theme [_ group-name theme-name set-name] "toggle a set used / not used in a theme")
  (get-active-themes-set-names [_] "set of set names that are active in the the active themes")
+  (sets-at-path-all-active? [_ prefixed-path] "compute active state for child sets at `prefixed-path`.
+Will return a value that matches this schema:
+`:none`    None of the nested sets are active
+`:all`     All of the nested sets are active
+`:partial` Mixed active state of nested sets")
  (get-active-themes-set-tokens [_] "set of set names that are active in the the active themes")
  (encode-dtcg [_] "Encodes library to a dtcg compatible json string")
  (decode-dtcg-json [_ parsed-json] "Decodes parsed json containing tokens and converts to library")
@ -870,6 +875,19 @@ When `before-set-name` is nil, move set to bottom")
          (mapcat :sets)
          (get-active-themes this)))

+  (sets-at-path-all-active? [this prefixed-path]
+    (let [active-set-names (get-active-themes-set-names this)]
+      (if (seq active-set-names)
+        (let [path-active-set-names (->> (get-sets-at-prefix-path this prefixed-path)
+                                         (map :name)
+                                         (into #{}))
+              difference (set/difference path-active-set-names active-set-names)]
+          (cond
+            (empty? difference) :all
+            (seq (set/intersection path-active-set-names active-set-names)) :partial
+            :else :none))
+        :none)))
+
  (get-active-themes-set-tokens [this]
    (let [sets-order (get-ordered-set-names this)
          active-themes (get-active-themes this)
--- a/common/test/common_tests/types/tokens_lib_test.cljc
+++ b/common/test/common_tests/types/tokens_lib_test.cljc
@ -399,8 +399,39 @@
          expected-tokens (ctob/get-active-themes-set-tokens tokens-lib)
          expected-token-names (mapv key expected-tokens)]
      (t/is (= '("set-a" "set-b" "inactive-set") expected-order))
-      (t/is (= ["set-a-token" "set-b-token"] expected-token-names)))))
+      (t/is (= ["set-a-token" "set-b-token"] expected-token-names))))

+  (t/testing "sets-at-path-active-state"
+    (let [tokens-lib  (-> (ctob/make-tokens-lib)
+
+                          (ctob/add-set (ctob/make-token-set :name "foo/bar/baz"))
+                          (ctob/add-set (ctob/make-token-set :name "foo/bar/bam"))
+
+                          (ctob/add-theme (ctob/make-token-theme :name "none"))
+                          (ctob/add-theme (ctob/make-token-theme :name "partial"
+                                                                 :sets #{"foo/bar/baz"}))
+                          (ctob/add-theme (ctob/make-token-theme :name "all"
+                                                                 :sets #{"foo/bar/baz"
+                                                                         "foo/bar/bam"}))
+                          (ctob/add-theme (ctob/make-token-theme :name "invalid"
+                                                                 :sets #{"foo/missing"})))
+
+          expected-none (-> tokens-lib
+                            (ctob/set-active-themes #{"/none"})
+                            (ctob/sets-at-path-all-active? "G-foo"))
+          expected-all (-> tokens-lib
+                           (ctob/set-active-themes #{"/all"})
+                           (ctob/sets-at-path-all-active? "G-foo"))
+          expected-partial (-> tokens-lib
+                               (ctob/set-active-themes #{"/partial"})
+                               (ctob/sets-at-path-all-active? "G-foo"))
+          expected-invalid-none (-> tokens-lib
+                                    (ctob/set-active-themes #{"/invalid"})
+                                    (ctob/sets-at-path-all-active? "G-foo"))]
+      (t/is (= :none expected-none))
+      (t/is (= :all expected-all))
+      (t/is (= :partial expected-partial))
+      (t/is (= :none expected-invalid-none)))))

 (t/deftest token-theme-in-a-lib
  (t/testing "add-token-theme"
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@ -502,6 +502,14 @@
 (def workspace-active-theme-paths
  (l/derived (d/nilf ctob/get-active-theme-paths) tokens-lib))

+(defn token-sets-at-path-all-active?
+  [prefixed-path]
+  (l/derived
+   (fn [lib]
+     (when lib
+       (ctob/sets-at-path-all-active? lib prefixed-path)))
+   tokens-lib))
+
 (def workspace-active-theme-paths-no-hidden
  (l/derived #(disj % ctob/hidden-token-theme-path) workspace-active-theme-paths))

--- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
@ -254,41 +254,41 @@
  [{:keys [state set-state]}]
  (let [{:keys [theme-path]} @state
        [_ theme-group theme-name] theme-path
+        ordered-token-sets (mf/deref refs/workspace-ordered-token-sets)
        token-sets (mf/deref refs/workspace-token-sets-tree)
        theme (mf/deref (refs/workspace-token-theme theme-group theme-name))
+        theme-state (mf/use-state theme)
+        lib (-> (ctob/make-tokens-lib)
+                (ctob/add-theme @theme-state)
+                (ctob/add-sets ordered-token-sets)
+                (ctob/activate-theme (:group @theme-state) (:name @theme-state)))
+
+        ;; Form / Modal handlers
        on-back #(set-state (constantly {:type :themes-overview}))
        on-submit #(st/emit! (wdt/update-token-theme [(:group theme) (:name theme)] %))
        {:keys [dropdown-open? _on-open-dropdown on-close-dropdown on-toggle-dropdown]} (wtco/use-dropdown-open-state)
-        theme-state (mf/use-state theme)
        disabled? (-> (:name @theme-state)
                      (str/trim)
                      (str/empty?))
-        token-set-active? (mf/use-callback
-                           (mf/deps theme-state)
-                           (fn [set-name]
-                             (get-in @theme-state [:sets set-name])))
-        on-toggle-token-set (mf/use-callback
-                             (mf/deps theme-state)
-                             (fn [set-name]
-                               (swap! theme-state #(ctob/toggle-set % set-name))))
-        on-click-token-set (mf/use-callback
-                            (mf/deps on-toggle-token-set)
-                            (fn [prefixed-set-path-str]
-                              (let [set-name (ctob/prefixed-set-path-string->set-name-string prefixed-set-path-str)]
-                                (on-toggle-token-set set-name))))
-        on-change-field (fn [field value]
-                          (swap! theme-state #(assoc % field value)))
-        on-save-form (mf/use-callback
-                      (mf/deps theme-state on-submit)
-                      (fn [e]
-                        (dom/prevent-default e)
-                        (let [theme (-> @theme-state
-                                        (update :name str/trim)
-                                        (update :group str/trim)
-                                        (update :description str/trim))]
-                          (when-not (str/empty? (:name theme))
-                            (on-submit theme)))
-                        (on-back)))
+
+        on-change-field
+        (mf/use-fn
+         (fn [field value]
+           (swap! theme-state #(assoc % field value))))
+
+        on-save-form
+        (mf/use-callback
+         (mf/deps theme-state on-submit)
+         (fn [e]
+           (dom/prevent-default e)
+           (let [theme (-> @theme-state
+                           (update :name str/trim)
+                           (update :group str/trim)
+                           (update :description str/trim))]
+             (when-not (str/empty? (:name theme))
+               (on-submit theme)))
+           (on-back)))
+
        close-modal
        (mf/use-fn
         (fn [e]
@ -300,7 +300,33 @@
         (mf/deps theme on-back)
         (fn []
           (st/emit! (wdt/delete-token-theme (:group theme) (:name theme)))
-           (on-back)))]
+           (on-back)))
+
+        ;; Sets tree handlers
+        token-set-group-active?
+        (mf/use-callback
+         (mf/deps theme-state)
+         (fn [prefixed-path]
+           (ctob/sets-at-path-all-active? lib prefixed-path)))
+
+        token-set-active?
+        (mf/use-callback
+         (mf/deps theme-state)
+         (fn [set-name]
+           (get-in @theme-state [:sets set-name])))
+
+        on-toggle-token-set
+        (mf/use-callback
+         (mf/deps theme-state)
+         (fn [set-name]
+           (swap! theme-state #(ctob/toggle-set % set-name))))
+
+        on-click-token-set
+        (mf/use-callback
+         (mf/deps on-toggle-token-set)
+         (fn [prefixed-set-path-str]
+           (let [set-name (ctob/prefixed-set-path-string->set-name-string prefixed-set-path-str)]
+             (on-toggle-token-set set-name))))]

    [:div {:class (stl/css :themes-modal-wrapper)}
     [:> heading* {:level 2 :typography "headline-medium" :class (stl/css :themes-modal-title)}
@ -327,6 +353,7 @@
         {:token-sets token-sets
          :token-set-selected? (constantly false)
          :token-set-active? token-set-active?
+          :token-set-group-active? token-set-group-active?
          :on-select on-click-token-set
          :on-toggle-token-set on-toggle-token-set
          :origin "theme-modal"
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@ -7,6 +7,7 @@
 (ns app.main.ui.workspace.tokens.sets
  (:require-macros [app.main.style :as stl])
  (:require
+   [app.common.data.macros :as dm]
   [app.common.types.tokens-lib :as ctob]
   [app.main.data.tokens :as wdt]
   [app.main.refs :as refs]
@ -59,9 +60,28 @@
      :auto-focus true
      :default-value default-value}]))

+(mf/defc checkbox
+  [{:keys [checked aria-label on-click]}]
+  (let [all? (true? checked)
+        mixed? (= checked "mixed")
+        checked? (or all? mixed?)]
+    [:div {:role "checkbox"
+           :aria-checked (dm/str checked)
+           :tabindex 0
+           :class (stl/css-case :checkbox-style true
+                                :checkbox-checked-style checked?)
+           :on-click on-click}
+     (when checked?
+       [:> icon*
+        {:aria-label aria-label
+         :class (stl/css :check-icon)
+         :size "s"
+         :id (if mixed? ic/remove ic/tick)}])]))
+
 (mf/defc sets-tree-set-group
-  [{:keys [label tree-depth tree-path selected? collapsed? editing? on-edit on-edit-reset _on-edit-submit]}]
+  [{:keys [label tree-depth tree-path active? selected? collapsed? editing? on-edit on-edit-reset _on-edit-submit]}]
  (let [editing?' (editing? tree-path)
+        active?' (active? tree-path)
        on-context-menu
        (mf/use-fn
         (mf/deps editing? tree-path)
@ -97,9 +117,16 @@
         :on-create on-edit-reset
         ;; TODO Implement set group renaming
         :on-submit (constantly nil)}]
-       [:div {:class (stl/css :set-name)
-              :on-double-click #(on-edit tree-path)}
-        label])]))
+       [:*
+        [:div {:class (stl/css :set-name)
+               :on-double-click #(on-edit tree-path)}
+         label]
+        [:& checkbox
+         {:checked (case active?'
+                     :all true
+                     :partial "mixed"
+                     :none false)
+          :arial-label (tr "workspace.token.select-set")}]])]))

 (mf/defc sets-tree-set
  [{:keys [set label tree-depth tree-path selected? on-select active? on-toggle editing? on-edit on-edit-reset on-edit-submit]}]
@ -150,18 +177,25 @@
        [:div {:class (stl/css :set-name)
               :on-double-click #(on-edit tree-path)}
         label]
-        [:button {:type "button"
-                  :on-click on-checkbox-click
-                  :class (stl/css-case :checkbox-style true
-                                       :checkbox-checked-style active?')}
-         (when active?'
-           [:> icon* {:aria-label (tr "workspace.token.select-set")
-                      :class (stl/css :check-icon)
-                      :size "s"
-                      :id ic/tick}])]])]))
+        [:& checkbox
+         {:on-click on-checkbox-click
+          :arial-label (tr "workspace.token.select-set")
+          :checked active?'}]])]))

 (mf/defc sets-tree
-  [{:keys [set-path set-node tree-depth tree-path on-select selected? on-toggle active? editing? on-edit on-edit-reset on-edit-submit]
+  [{:keys [active?
+           group-active?
+           editing?
+           on-edit
+           on-edit-reset
+           on-edit-submit
+           on-select
+           on-toggle
+           selected?
+           set-node
+           set-path
+           tree-depth
+           tree-path]
    :or {tree-depth 0}
    :as props}]
  (let [[set-path-prefix set-fname] (some-> set-path (ctob/split-set-str-path-prefix))
@ -192,6 +226,7 @@
       set-group?
       [:& sets-tree-set-group
        {:selected? (selected? tree-path)
+         :active? group-active?
         :on-select on-select
         :label set-fname
         :collapsed? collapsed?
@ -214,6 +249,7 @@
           :selected? selected?
           :on-toggle on-toggle
           :active? active?
+           :group-active? group-active?
           :editing? editing?
           :on-edit on-edit
           :on-edit-reset on-edit-reset
@ -224,6 +260,7 @@
           on-update-token-set
           token-set-selected?
           token-set-active?
+           token-set-group-active?
           on-create-token-set
           on-toggle-token-set
           origin
@ -231,10 +268,9 @@
           context]
    :as _props}]
  (let [{:keys [editing? new? on-edit on-reset] :as ctx} (or context (sets-context/use-context))]
-    [:ul {:class (stl/css :sets-list)}
-     (if (and
-          (= origin "theme-modal")
-          (empty? token-sets))
+    [:fieldset {:class (stl/css :sets-list)}
+     (if (and (= origin "theme-modal")
+              (empty? token-sets))
       [:> text* {:as "span" :typography "body-small" :class (stl/css :empty-state-message-sets)}
        (tr "workspace.token.no-sets-create")]
       (if (and (= origin "theme-modal")
@ -247,6 +283,7 @@
            :selected? token-set-selected?
            :on-select on-select
            :active? token-set-active?
+            :group-active? token-set-group-active?
            :on-toggle on-toggle-token-set
            :editing? editing?
            :on-edit on-edit
@ -276,11 +313,15 @@
        token-set-active? (mf/use-fn
                           (mf/deps active-token-set-names)
                           (fn [set-name]
-                             (get active-token-set-names set-name)))]
+                             (get active-token-set-names set-name)))
+        token-set-group-active? (mf/use-fn
+                                 (fn [prefixed-path]
+                                   @(refs/token-sets-at-path-all-active? prefixed-path)))]
    [:& controlled-sets-list
     {:token-sets token-sets
      :token-set-selected? token-set-selected?
      :token-set-active? token-set-active?
+      :token-set-group-active? token-set-group-active?
      :on-select on-select-token-set-click
      :origin "set-panel"
      :on-toggle-token-set on-toggle-token-set-click