Initial commit

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

@@ -0,0 +1,68 @@
+(ns app.main.ui.workspace.tokens.sets
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.main.ui.icons :as i]
+   [rumext.v2 :as mf]))
+
+;; Sample data
+(def active-sets #{#uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3"
+                   #uuid "d608877b-842a-473b-83ca-b5f8305caf83"})
+
+(def sets-root-order [#uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3"
+                      #uuid "9c5108aa-bdb4-409c-a3c8-c3dfce2f8bf8"
+                      #uuid "0381446e-1f1d-423f-912c-ab577d61b79b"])
+
+(def sets {#uuid "9c5108aa-bdb4-409c-a3c8-c3dfce2f8bf8" {:type :group
+                                                         :name "Group A"
+                                                         :children [#uuid "d1754e56-3510-493f-8287-5ef3417d4141"
+                                                                    #uuid "d608877b-842a-473b-83ca-b5f8305caf83"]}
+           #uuid "d608877b-842a-473b-83ca-b5f8305caf83" {:type :set
+                                                         :name "Set A / 1"}
+           #uuid "d1754e56-3510-493f-8287-5ef3417d4141" {:type :group
+                                                         :name "Group A / B"
+                                                         :children [#uuid "d608877b-842a-473b-83ca-b5f8305caf83"
+                                                                    #uuid "7cc05389-9391-426e-bc0e-ba5cb8f425eb"]}
+           #uuid "f608877b-842a-473b-83ca-b5f8305caf83" {:type :set
+                                                         :name "Set A / B / 1"}
+           #uuid "7cc05389-9391-426e-bc0e-ba5cb8f425eb" {:type :set
+                                                         :name "Set A / B / 2"}
+           #uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3" {:type :set
+                                                         :name "Set Root 1"}
+           #uuid "0381446e-1f1d-423f-912c-ab577d61b79b" {:type :set
+                                                         :name "Set Root 2"}})
+
+(defn render-set [set-id]
+  (println "Rendering set with ID:" set-id)
+  (let [set (get sets set-id)
+        {:keys [type name children]} set
+        icon (if (= type :group) i/document i/document)] ;; Correct icon for groups
+    [:div {:class (stl/css-case :set-item true :group (= type :group))}
+     [:div {:class (stl/css :set-icon)} icon]
+     [:span {:class (stl/css :set-name)} name]
+     (when children
+       [:div {:class (stl/css :set-children)}
+        (for [child-id children]
+          (do
+            (println "Rendering child ID:" child-id)
+            ^{:key (str child-id)} [render-set child-id]))])]))
+
+(mf/defc sets-list
+  {::mf/wrap-props false}
+  []
+  (println "Rendering Sets List with root order:" sets-root-order)
+  [:div.assets-bar
+   (for [set-id sets-root-order]
+     ^{:key (str set-id)}
+     [:& render-set {:key (str set-id) :set-id set-id}])])
+
+(mf/defc sets-sidebar
+  {::mf/wrap-props false}
+  []
+  (println "Rendering sets sidebar")
+  [:div {:class (stl/css :sets-sidebar)}
+   [:div {:class (stl/css :sidebar-header)}
+    "SETS"
+    [:button {:class (stl/css :add-button)
+              :on-click #(println "Add Set")} 
+     "Add"]]
+   [:& sets-list]])

frontend/src/app/main/ui/workspace/tokens/sets.scss

@@ -0,0 +1,74 @@
+// 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
+
+@import "refactor/common-refactor.scss";
+
+.sets-sidebar {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  height: var(--height, $s-200);
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-left: $s-2;
+  color: var(--title-foreground-color-hover);
+}
+
+.add-button {
+  @extend .button-tertiary;
+  height: $s-32;
+  width: $s-28;
+  padding: 0;
+  margin-right: $s-12;
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+  }
+}
+
+.sets-list {
+  width: 100%;
+  max-height: $s-152;
+  margin-bottom: $s-12;
+}
+
+.set-item {
+  @include bodySmallTypography;
+  min-height: $s-32;
+  width: 100%;
+  cursor: pointer;
+  &.group {
+    padding-left: $s-12;
+  }
+  .set-name {
+    @include textEllipsis;
+    flex-grow: 1;
+    padding-left: $s-2;
+  }
+  .set-icon {
+    @include flexCenter;
+    height: $s-32;
+    width: $s-24;
+    padding: 0 $s-4 0 $s-8;
+    svg {
+      @extend .button-icon-small;
+      height: $s-12;
+      width: $s-12;
+      color: transparent;
+      fill: none;
+      stroke: var(--icon-foreground);
+    }
+  }
+  .set-children {
+    padding-left: $s-12;
+  }
+}

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

@@ -20,6 +20,7 @@
    [app.main.ui.workspace.tokens.style-dictionary :as sd]
    [app.main.ui.workspace.tokens.token :as wtt]
    [app.main.ui.workspace.tokens.token-types :as wtty]
+   [app.main.ui.workspace.tokens.sets :refer [sets-sidebar]]
    [app.util.dom :as dom]
    [cuerdas.core :as str]
    [okulary.core :as l]
@@ -171,6 +172,7 @@
    ::mf/wrap-props false}
   [_props]
   [:div {:class (stl/css :sidebar-tab-wrapper)}
+   [:& sets-sidebar]  ;; Add sets sidebar here
    [:& tokens-explorer]
    [:button {:class (stl/css :download-json-button)
              :on-click wtc/download-tokens-as-json}