refactor: update hopp-ui to be independent (#2927)

Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>

packages/hoppscotch-common/src/components/environments/my/Details.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t(`environment.${action}`)"
@@ -28,13 +28,13 @@
             {{ t("environment.variable_list") }}
           </label>
           <div class="flex">
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.clear_all')"
               :icon="clearIcon"
               @click="clearContent()"
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :icon="IconPlus"
               :title="t('add.new')"
@@ -69,7 +69,7 @@
               :name="'value' + index"
             />
             <div class="flex">
-              <ButtonSecondary
+              <HoppButtonSecondary
                 id="variable"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('action.remove')"
@@ -92,7 +92,7 @@
             <span class="pb-4 text-center">
               {{ t("empty.environments") }}
             </span>
-            <ButtonSecondary
+            <HoppButtonSecondary
               :label="`${t('add.new')}`"
               filled
               class="mb-4"
@@ -104,12 +104,12 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="`${t('action.save')}`"
           outline
           @click="saveEnvironment"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="`${t('action.cancel')}`"
           outline
           filled
@@ -117,7 +117,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">

packages/hoppscotch-common/src/components/environments/my/Environment.vue

@@ -33,7 +33,7 @@
         theme="popover"
         :on-shown="() => tippyActions!.focus()"
       >
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.more')"
           :icon="IconMoreVertical"
@@ -53,7 +53,7 @@
             "
             @keyup.escape="hide()"
           >
-            <SmartItem
+            <HoppSmartItem
               ref="edit"
               :icon="IconEdit"
               :label="`${t('action.edit')}`"
@@ -65,7 +65,7 @@
                 }
               "
             />
-            <SmartItem
+            <HoppSmartItem
               ref="duplicate"
               :icon="IconCopy"
               :label="`${t('action.duplicate')}`"
@@ -77,7 +77,7 @@
                 }
               "
             />
-            <SmartItem
+            <HoppSmartItem
               v-if="environmentIndex !== 'Global'"
               ref="deleteAction"
               :icon="IconTrash2"
@@ -94,7 +94,7 @@
         </template>
       </tippy>
     </span>
-    <SmartConfirmModal
+    <HoppSmartConfirmModal
       :show="confirmRemove"
       :title="`${t('confirm.remove_environment')}`"
       @hide-modal="confirmRemove = false"
@@ -122,7 +122,7 @@ import {
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { TippyComponent } from "vue-tippy"
-import SmartItem from "@hoppscotch/ui/src/components/smart/Item.vue"
+import { HoppSmartItem } from "@hoppscotch/ui"
 
 const t = useI18n()
 const toast = useToast()
@@ -140,9 +140,9 @@ const confirmRemove = ref(false)
 
 const tippyActions = ref<TippyComponent | null>(null)
 const options = ref<TippyComponent | null>(null)
-const edit = ref<typeof SmartItem>()
-const duplicate = ref<typeof SmartItem>()
-const deleteAction = ref<typeof SmartItem>()
+const edit = ref<typeof HoppSmartItem>()
+const duplicate = ref<typeof HoppSmartItem>()
+const deleteAction = ref<typeof HoppSmartItem>()
 
 const removeEnvironment = () => {
   if (props.environmentIndex === null) return

packages/hoppscotch-common/src/components/environments/my/index.vue

@@ -3,21 +3,21 @@
     <div
       class="sticky z-10 flex justify-between flex-1 flex-shrink-0 overflow-x-auto border-b top-upperPrimaryStickyFold border-dividerLight bg-primary"
     >
-      <ButtonSecondary
+      <HoppButtonSecondary
         :icon="IconPlus"
         :label="`${t('action.new')}`"
         class="!rounded-none"
         @click="displayModalAdd(true)"
       />
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/environments"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconArchive"
           :title="t('modal.import_export')"
@@ -45,7 +45,7 @@
       <span class="pb-4 text-center">
         {{ t("empty.environments") }}
       </span>
-      <ButtonSecondary
+      <HoppButtonSecondary
         :label="`${t('add.new')}`"
         filled
         outline