♻️ Restructure UI files for import/export and common files

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

@@ -32,9 +32,11 @@
    [app.main.ui.workspace.sidebar :refer [left-sidebar* right-sidebar*]]
    [app.main.ui.workspace.sidebar.collapsable-button :refer [collapsed-button]]
    [app.main.ui.workspace.sidebar.history :refer [history-toolbox*]]
+   [app.main.ui.workspace.tokens.export]
+   [app.main.ui.workspace.tokens.export.modal]
+   [app.main.ui.workspace.tokens.import]
+   [app.main.ui.workspace.tokens.import.modal]
    [app.main.ui.workspace.tokens.modals]
-   [app.main.ui.workspace.tokens.modals.export]
-   [app.main.ui.workspace.tokens.modals.import]
    [app.main.ui.workspace.tokens.settings]
    [app.main.ui.workspace.tokens.themes.create-modal]
    [app.main.ui.workspace.viewport :refer [viewport*]]

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

@@ -4,7 +4,7 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.workspace.tokens.context-menu
+(ns app.main.ui.workspace.tokens.common.context-menu
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]

frontend/src/app/main/ui/workspace/tokens/common/context_menu.scss

@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "../../ds/typography.scss" as *;
+@use "../../../ds/typography.scss" as *;
 @import "refactor/common-refactor.scss";
 
 .token-context-menu {

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

@@ -0,0 +1,27 @@
+;; 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.export
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.main.data.modal :as modal]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.workspace.tokens.export.modal :refer [export-modal-body*]]
+   [app.util.i18n :refer [tr]]
+   [rumext.v2 :as mf]))
+
+(mf/defc export-modal*
+  {::mf/register modal/components
+   ::mf/register-as :tokens/export}
+  []
+  [:div {:class (stl/css :modal-overlay)}
+   [:div {:class (stl/css :modal-dialog)}
+    [:> icon-button* {:class (stl/css :close-btn)
+                      :on-click modal/hide!
+                      :aria-label (tr "labels.close")
+                      :variant "ghost"
+                      :icon "close"}]
+    [:> export-modal-body*]]])

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

@@ -0,0 +1,30 @@
+// 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
+
+@use "../../ds/typography.scss" as t;
+@use "../../ds/_sizes.scss" as *;
+@use "../../ds/_borders.scss" as *;
+@import "refactor/common-refactor.scss";
+
+.modal-overlay {
+  @extend .modal-overlay-base;
+}
+
+.modal-dialog {
+  --modal-width: 32rem;
+  --modal-padding: var(--sp-xxxl);
+  --container-max-height: 16rem;
+  @extend .modal-container-base;
+  user-select: none;
+  width: var(--modal-width);
+  max-width: 100%;
+}
+
+.close-btn {
+  position: absolute;
+  inset-block-start: var(--sp-s);
+  inset-inline-end: var(--sp-s);
+}

frontend/src/app/main/ui/workspace/tokens/export/modal.cljs

@@ -4,7 +4,7 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.workspace.tokens.modals.export
+(ns app.main.ui.workspace.tokens.export.modal
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.json :as json]
@@ -15,7 +15,6 @@
    [app.main.store :as st]
    [app.main.ui.components.code-block :refer [code-block]]
    [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
    [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
    [app.main.ui.ds.foundations.typography.text :refer [text*]]
@@ -134,16 +133,3 @@
       {:tabs tabs
        :selected @selected-tab
        :on-change-tab on-change-tab}]]))
-
-(mf/defc export-modal*
-  {::mf/register modal/components
-   ::mf/register-as :tokens/export}
-  []
-  [:div {:class (stl/css :modal-overlay)}
-   [:div {:class (stl/css :modal-dialog)}
-    [:> icon-button* {:class (stl/css :close-btn)
-                      :on-click modal/hide!
-                      :aria-label (tr "labels.close")
-                      :variant "ghost"
-                      :icon "close"}]
-    [:> export-modal-body*]]])

frontend/src/app/main/ui/workspace/tokens/export/modal.scss

@@ -9,20 +9,6 @@
 @use "../../../ds/_borders.scss" as *;
 @import "refactor/common-refactor.scss";
 
-.modal-overlay {
-  @extend .modal-overlay-base;
-}
-
-.modal-dialog {
-  --modal-width: 32rem;
-  --modal-padding: var(--sp-xxxl);
-  --container-max-height: 16rem;
-  @extend .modal-container-base;
-  user-select: none;
-  width: var(--modal-width);
-  max-width: 100%;
-}
-
 .export-modal-wrapper {
   display: flex;
   flex-direction: column;
@@ -92,12 +78,6 @@
   gap: var(--sp-s);
 }
 
-.close-btn {
-  position: absolute;
-  inset-block-start: var(--sp-s);
-  inset-inline-end: var(--sp-s);
-}
-
 .json-preview {
   width: 100%;
 }

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

@@ -0,0 +1,21 @@
+(ns app.main.ui.workspace.tokens.import
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.main.data.modal :as modal]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.workspace.tokens.import.modal :refer [import-modal-body*]]
+   [app.util.i18n :refer [tr]]
+   [rumext.v2 :as mf]))
+
+(mf/defc import-modal*
+  {::mf/register modal/components
+   ::mf/register-as :tokens/import}
+  []
+  [:div {:class (stl/css :modal-overlay)}
+   [:div {:class (stl/css :modal-dialog)}
+    [:> icon-button* {:class (stl/css :close-btn)
+                      :on-click modal/hide!
+                      :aria-label (tr "labels.close")
+                      :variant "ghost"
+                      :icon "close"}]
+    [:> import-modal-body*]]])

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

@@ -0,0 +1,25 @@
+// 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
+
+@use "../../ds/typography.scss" as t;
+@use "../../ds/_borders.scss" as *;
+@use "../../ds/_sizes.scss" as *;
+@import "refactor/common-refactor.scss";
+
+.modal-overlay {
+  @extend .modal-overlay-base;
+}
+
+.modal-dialog {
+  @extend .modal-container-base;
+  user-select: none;
+}
+
+.close-btn {
+  position: absolute;
+  inset-block-start: var(--sp-s);
+  inset-inline-end: var(--sp-s);
+}

frontend/src/app/main/ui/workspace/tokens/import/modal.cljs

@@ -4,7 +4,7 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.workspace.tokens.modals.import
+(ns app.main.ui.workspace.tokens.import.modal
   (:require-macros [app.main.style :as stl])
   (:require
    [app.main.data.event :as ev]
@@ -16,7 +16,6 @@
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.controls.shared.options-dropdown :refer [options-dropdown*]]
    [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
    [app.main.ui.ds.foundations.typography.text :refer [text*]]
@@ -274,16 +273,3 @@
         :on-click handle-import-action
         :text-render render-button-text
         :default :zip}]]]))
-
-(mf/defc import-modal*
-  {::mf/register modal/components
-   ::mf/register-as :tokens/import}
-  []
-  [:div {:class (stl/css :modal-overlay)}
-   [:div {:class (stl/css :modal-dialog)}
-    [:> icon-button* {:class (stl/css :close-btn)
-                      :on-click modal/hide!
-                      :aria-label (tr "labels.close")
-                      :variant "ghost"
-                      :icon "close"}]
-    [:> import-modal-body*]]])

frontend/src/app/main/ui/workspace/tokens/import/modal.scss

@@ -9,15 +9,6 @@
 @use "../../../ds/_sizes.scss" as *;
 @import "refactor/common-refactor.scss";
 
-.modal-overlay {
-  @extend .modal-overlay-base;
-}
-
-.modal-dialog {
-  @extend .modal-container-base;
-  user-select: none;
-}
-
 .import-modal-wrapper {
   display: flex;
   flex-direction: column;
@@ -45,12 +36,6 @@
   gap: var(--sp-s);
 }
 
-.close-btn {
-  position: absolute;
-  inset-block-start: var(--sp-s);
-  inset-inline-end: var(--sp-s);
-}
-
 .dropdown-trigger-btn {
   border-start-start-radius: 0;
   border-end-start-radius: 0;

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

@@ -27,7 +27,7 @@
    [app.main.ui.hooks :as h]
    [app.main.ui.hooks.resize :refer [use-resize-hook]]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
-   [app.main.ui.workspace.tokens.context-menu :refer [token-context-menu]]
+   [app.main.ui.workspace.tokens.common.context-menu :refer [token-context-menu]]
    [app.main.ui.workspace.tokens.sets :as tsets]
    [app.main.ui.workspace.tokens.sets-context-menu :refer [token-set-context-menu*]]
    [app.main.ui.workspace.tokens.themes :refer [themes-header*]]