From 22e497398f2e4ae80e951df117503f2e2f32fbbe Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Wed, 7 Aug 2024 00:08:12 +0530 Subject: [PATCH] Initial commit --- .../app/main/ui/workspace/tokens/sets.cljs | 68 +++++++++++++++++ .../app/main/ui/workspace/tokens/sets.scss | 74 +++++++++++++++++++ .../app/main/ui/workspace/tokens/sidebar.cljs | 2 + 3 files changed, 144 insertions(+) create mode 100644 frontend/src/app/main/ui/workspace/tokens/sets.cljs create mode 100644 frontend/src/app/main/ui/workspace/tokens/sets.scss diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs new file mode 100644 index 000000000..8c56aa21b --- /dev/null +++ b/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]]) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss new file mode 100644 index 000000000..7a24a23d8 --- /dev/null +++ b/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; + } +} diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 7cab3ea9a..e976a9510 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/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}