feat: smart-tree component added to hoppscotch-ui (#3210)

packages/hoppscotch-common/src/components.d.ts

@@ -186,8 +186,8 @@ declare module '@vue/runtime-core' {
     SmartTab: typeof import('./../../hoppscotch-ui/src/components/smart/Tab.vue')['default']
     SmartTabs: typeof import('./../../hoppscotch-ui/src/components/smart/Tabs.vue')['default']
     SmartToggle: typeof import('./../../hoppscotch-ui/src/components/smart/Toggle.vue')['default']
-    SmartTree: typeof import('./components/smart/Tree.vue')['default']
+    SmartTree: typeof import('./../../hoppscotch-ui/src/components/smart/Tree.vue')['default']
-    SmartTreeBranch: typeof import('./components/smart/TreeBranch.vue')['default']
+    SmartTreeBranch: typeof import('./../../hoppscotch-ui/src/components/smart/TreeBranch.vue')['default']
     SmartWindow: typeof import('./../../hoppscotch-ui/src/components/smart/Window.vue')['default']
     SmartWindows: typeof import('./../../hoppscotch-ui/src/components/smart/Windows.vue')['default']
     TabPrimary: typeof import('./components/tab/Primary.vue')['default']

packages/hoppscotch-common/src/components/collections/MyCollections.vue

@@ -32,7 +32,7 @@
       </span>
     </div>
     <div class="flex flex-col flex-1">
-      <SmartTree :adapter="myAdapter">
+      <HoppSmartTree :adapter="myAdapter">
         <template
           #content="{ node, toggleChildren, isOpen, highlightChildren }"
         >
@@ -291,7 +291,7 @@
           >
           </HoppSmartPlaceholder>
         </template>
-      </SmartTree>
+      </HoppSmartTree>
     </div>
   </div>
 </template>
@@ -303,7 +303,10 @@ import IconHelpCircle from "~icons/lucide/help-circle"
 import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
 import { computed, PropType, Ref, toRef } from "vue"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
-import { ChildrenResult, SmartTreeAdapter } from "~/helpers/treeAdapter"
+import {
+  ChildrenResult,
+  SmartTreeAdapter,
+} from "@hoppscotch/ui/dist/helpers/treeAdapter"
 import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
 import { pipe } from "fp-ts/function"

packages/hoppscotch-common/src/components/collections/TeamCollections.vue

@@ -46,7 +46,7 @@
       </span>
     </div>
     <div class="flex flex-col overflow-hidden">
-      <SmartTree :adapter="teamAdapter">
+      <HoppSmartTree :adapter="teamAdapter">
         <template
           #content="{ node, toggleChildren, isOpen, highlightChildren }"
         >
@@ -311,7 +311,7 @@
             </HoppSmartPlaceholder>
           </div>
         </template>
-      </SmartTree>
+      </HoppSmartTree>
     </div>
   </div>
 </template>
@@ -326,7 +326,10 @@ import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
 import { TeamCollection } from "~/helpers/teams/TeamCollection"
 import { TeamRequest } from "~/helpers/teams/TeamRequest"
-import { ChildrenResult, SmartTreeAdapter } from "~/helpers/treeAdapter"
+import {
+  ChildrenResult,
+  SmartTreeAdapter,
+} from "@hoppscotch/ui/dist/helpers/treeAdapter"
 import { cloneDeep } from "lodash-es"
 import { HoppRESTRequest } from "@hoppscotch/data"
 import { pipe } from "fp-ts/function"

packages/hoppscotch-ui/package.json

@@ -97,6 +97,7 @@
   "main": "./dist/index.es.js",
   "exports": {
     ".": "./dist/index.es.js",
+    "./helpers/treeAdapter.ts": "./src/helpers/treeAdapter.ts",
     "./style.css": "./dist/style.css"
   },
   "types": "./dist/index.d.ts"

packages/hoppscotch-ui/src/components/smart/Tree.vue

@@ -25,6 +25,7 @@
               :highlight-children="(id:string|null) => highlightChildren(id)"
             ></slot>
           </template>
+
           <template #emptyNode="{ node }">
             <slot name="emptyNode" :node="node"></slot>
           </template>
@@ -35,8 +36,8 @@
       v-else-if="rootNodes.status === 'loading'"
       class="flex flex-col items-center justify-center flex-1 p-4"
     >
-      <HoppSmartSpinner class="my-4" />
+      <SmartSpinner class="my-4" />
-      <span class="text-secondaryLight">{{ t("state.loading") }}</span>
+      <span class="text-secondaryLight">{{ t?.("state.loading") }}</span>
     </div>
     <div
       v-if="rootNodes.status === 'loaded' && rootNodes.data.length === 0"
@@ -48,9 +49,12 @@
 </template>
 
 <script setup lang="ts" generic="T extends any">
-import { computed } from "vue"
+import { computed, inject } from "vue"
-import { useI18n } from "~/composables/i18n"
+import SmartTreeBranch from "./TreeBranch.vue"
+import SmartSpinner from "./Spinner.vue"
 import { SmartTreeAdapter, TreeNode } from "~/helpers/treeAdapter"
+import { HOPP_UI_OPTIONS, HoppUIPluginOptions } from "./../../plugin"
+const { t } = inject<HoppUIPluginOptions>(HOPP_UI_OPTIONS) ?? {}
 
 const props = defineProps<{
   /**
@@ -60,8 +64,6 @@ const props = defineProps<{
   adapter: SmartTreeAdapter<T>
 }>()
 
-const t = useI18n()
-
 /**
  * Fetch the root nodes from the adapter by passing the node id as null
  */

packages/hoppscotch-ui/src/components/smart/TreeBranch.vue

@@ -25,7 +25,7 @@
         'bg-divider': highlightNode,
       }"
     >
-      <TreeBranch
+      <SmartTreeBranch
         v-for="childNode in childNodes.data"
         :key="childNode.id"
         :node-item="childNode"
@@ -51,15 +51,15 @@
         <template #emptyNode="{ node }">
           <slot name="emptyNode" :node="node"></slot>
         </template>
-      </TreeBranch>
+      </SmartTreeBranch>
     </div>
 
     <div
       v-if="childNodes.status === 'loading'"
       class="flex flex-col items-center justify-center flex-1 p-4"
     >
-      <HoppSmartSpinner class="my-4" />
+      <SmartSpinner class="my-4" />
-      <span class="text-secondaryLight">{{ t("state.loading") }}</span>
+      <span class="text-secondaryLight">{{ t?.("state.loading") }}</span>
     </div>
     <div
       v-if="childNodes.status === 'loaded' && childNodes.data.length === 0"
@@ -71,9 +71,12 @@
 </template>
 
 <script setup lang="ts" generic="T extends any">
-import { computed, ref } from "vue"
+import { computed, inject, ref } from "vue"
-import { useI18n } from "~/composables/i18n"
+import SmartTreeBranch from "./TreeBranch.vue"
+import SmartSpinner from "./Spinner.vue"
 import { SmartTreeAdapter, TreeNode } from "~/helpers/treeAdapter"
+import { HOPP_UI_OPTIONS, HoppUIPluginOptions } from "./../../plugin"
+const { t } = inject<HoppUIPluginOptions>(HOPP_UI_OPTIONS) ?? {}
 
 const props = defineProps<{
   /**
@@ -92,7 +95,6 @@ const props = defineProps<{
 }>()
 
 const CHILD_SLOT_NAME = "default"
-const t = useI18n()
 
 const isOnlyRootChild = computed(() => props.rootNodesLength === 1)
 

packages/hoppscotch-ui/src/components/smart/index.ts

@@ -21,3 +21,5 @@ export { default as HoppSmartWindow } from "./Window.vue"
 export { default as HoppSmartWindows } from "./Windows.vue"
 export { default as HoppSmartPicture } from "./Picture.vue"
 export { default as HoppSmartPlaceholder } from "./Placeholder.vue"
+export { default as HoppSmartTree } from "./Tree.vue"
+export { default as HoppSmartTreeBranch } from "./TreeBranch.vue"