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

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

packages/hoppscotch-common/src/components/http/Authorization.vue

@@ -14,7 +14,10 @@
           :on-shown="() => tippyActions.focus()"
         >
           <span class="select-wrapper">
-            <ButtonSecondary class="pr-8 ml-2 rounded-none" :label="authName" />
+            <HoppButtonSecondary
+              class="pr-8 ml-2 rounded-none"
+              :label="authName"
+            />
           </span>
           <template #content="{ hide }">
             <div
@@ -23,7 +26,7 @@
               tabindex="0"
               @keyup.escape="hide()"
             >
-              <SmartItem
+              <HoppSmartItem
                 label="None"
                 :icon="authName === 'None' ? IconCircleDot : IconCircle"
                 :active="authName === 'None'"
@@ -34,7 +37,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 label="Basic Auth"
                 :icon="authName === 'Basic Auth' ? IconCircleDot : IconCircle"
                 :active="authName === 'Basic Auth'"
@@ -45,7 +48,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 label="Bearer Token"
                 :icon="authName === 'Bearer' ? IconCircleDot : IconCircle"
                 :active="authName === 'Bearer'"
@@ -56,7 +59,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 label="OAuth 2.0"
                 :icon="authName === 'OAuth 2.0' ? IconCircleDot : IconCircle"
                 :active="authName === 'OAuth 2.0'"
@@ -67,7 +70,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 label="API key"
                 :icon="authName === 'API key' ? IconCircleDot : IconCircle"
                 :active="authName === 'API key'"
@@ -83,26 +86,26 @@
         </tippy>
       </span>
       <div class="flex">
-        <!-- <SmartCheckbox
+        <!-- <HoppSmartCheckbox
           :on="!URLExcludes.auth"
           @change="setExclude('auth', !$event)"
         >
           {{ $t("authorization.include_in_url") }}
-        </SmartCheckbox>-->
-        <SmartCheckbox
+        </HoppSmartCheckbox>-->
+        <HoppSmartCheckbox
           :on="authActive"
           class="px-2"
           @change="authActive = !authActive"
-          >{{ t("state.enabled") }}</SmartCheckbox
+          >{{ t("state.enabled") }}</HoppSmartCheckbox
         >
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/authorization"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.clear')"
           :icon="IconTrash2"
@@ -121,7 +124,7 @@
         :alt="`${t('empty.authorization')}`"
       />
       <span class="pb-4 text-center">{{ t("empty.authorization") }}</span>
-      <ButtonSecondary
+      <HoppButtonSecondary
         outline
         :label="t('app.documentation')"
         to="https://docs.hoppscotch.io/features/authorization"
@@ -177,7 +180,7 @@
                 :on-shown="() => authTippyActions.focus()"
               >
                 <span class="select-wrapper">
-                  <ButtonSecondary
+                  <HoppButtonSecondary
                     :label="addTo || t('state.none')"
                     class="pr-8 ml-2 rounded-none"
                   />
@@ -189,7 +192,7 @@
                     tabindex="0"
                     @keyup.escape="hide()"
                   >
-                    <SmartItem
+                    <HoppSmartItem
                       :icon="addTo === 'Headers' ? IconCircleDot : IconCircle"
                       :active="addTo === 'Headers'"
                       :label="'Headers'"
@@ -200,7 +203,7 @@
                         }
                       "
                     />
-                    <SmartItem
+                    <HoppSmartItem
                       :icon="
                         addTo === 'Query params' ? IconCircleDot : IconCircle
                       "
@@ -226,7 +229,7 @@
         <div class="pb-2 text-secondaryLight">
           {{ t("helpers.authorization") }}
         </div>
-        <SmartAnchor
+        <HoppSmartAnchor
           class="link"
           :label="t('authorization.learn')"
           :icon="IconExternalLink"

packages/hoppscotch-common/src/components/http/Body.vue

@@ -14,7 +14,7 @@
           :on-shown="() => tippyActions.focus()"
         >
           <span class="select-wrapper">
-            <ButtonSecondary
+            <HoppButtonSecondary
               :label="contentType || t('state.none')"
               class="pr-8 ml-2 rounded-none"
             />
@@ -26,7 +26,7 @@
               tabindex="0"
               @keyup.escape="hide()"
             >
-              <SmartItem
+              <HoppSmartItem
                 :label="t('state.none')"
                 :info-icon="contentType === null ? IconDone : null"
                 :active-info-icon="contentType === null"
@@ -50,7 +50,7 @@
                   </span>
                 </div>
                 <div class="flex flex-col">
-                  <SmartItem
+                  <HoppSmartItem
                     v-for="(
                       contentTypeItem, contentTypeIndex
                     ) in contentTypeItems.contentTypes"
@@ -72,7 +72,7 @@
             </div>
           </template>
         </tippy>
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="t('request.override_help')"
           :label="
@@ -109,7 +109,7 @@
         :alt="`${t('empty.body')}`"
       />
       <span class="pb-4 text-center">{{ t("empty.body") }}</span>
-      <ButtonSecondary
+      <HoppButtonSecondary
         outline
         :label="`${t('app.documentation')}`"
         to="https://docs.hoppscotch.io/features/body"

packages/hoppscotch-common/src/components/http/BodyParameters.vue

@@ -7,20 +7,20 @@
         {{ t("request.body") }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/body"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.clear_all')"
           :icon="IconTrash2"
           @click="clearContent"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('add.new')"
           :icon="IconPlus"
@@ -44,7 +44,7 @@
           class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
         >
           <span>
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{
                 theme: 'tooltip',
                 delay: [500, 20],
@@ -76,10 +76,10 @@
           />
           <div v-if="entry.isFile" class="file-chips-container">
             <div class="space-x-2 file-chips-wrapper">
-              <SmartFileChip
+              <HoppSmartFileChip
                 v-for="(file, fileIndex) in entry.value"
                 :key="`param-${index}-file-${fileIndex}`"
-                >{{ file.name }}</SmartFileChip
+                >{{ file.name }}</HoppSmartFileChip
               >
             </div>
           </div>
@@ -110,7 +110,7 @@
             </label>
           </span>
           <span>
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="
                 entry.hasOwnProperty('active')
@@ -140,7 +140,7 @@
             />
           </span>
           <span>
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.remove')"
               :icon="IconTrash"
@@ -163,7 +163,7 @@
         :alt="`${t('empty.body')}`"
       />
       <span class="pb-4 text-center">{{ t("empty.body") }}</span>
-      <ButtonSecondary
+      <HoppButtonSecondary
         :label="`${t('add.new')}`"
         filled
         :icon="IconPlus"
@@ -188,7 +188,7 @@ import * as O from "fp-ts/Option"
 import * as A from "fp-ts/Array"
 import { FormDataKeyValue } from "@hoppscotch/data"
 import { isEqual, clone } from "lodash-es"
-import draggable from "vuedraggable"
+import draggable from "vuedraggable-es"
 import { pluckRef } from "@composables/ref"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"

packages/hoppscotch-common/src/components/http/CodegenModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="`${t('request.generate_code')}`"
@@ -18,7 +18,7 @@
           :on-shown="() => tippyActions.focus()"
         >
           <span class="select-wrapper">
-            <ButtonSecondary
+            <HoppButtonSecondary
               :label="
                 CodegenDefinitions.find((x) => x.name === codegenType).caption
               "
@@ -43,7 +43,7 @@
                 tabindex="0"
                 @keyup.escape="hide()"
               >
-                <SmartItem
+                <HoppSmartItem
                   v-for="codegen in filteredCodegenDefinitions"
                   :key="codegen.name"
                   :label="codegen.caption"
@@ -89,20 +89,20 @@
               {{ t("request.generated_code") }}
             </label>
             <div class="flex items-center">
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('state.linewrap')"
                 :class="{ '!text-accent': linewrapEnabled }"
                 :icon="IconWrapText"
                 @click.prevent="linewrapEnabled = !linewrapEnabled"
               />
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip', allowHTML: true }"
                 :title="t('action.download_file')"
                 :icon="downloadIcon"
                 @click="downloadResponse"
               />
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip', allowHTML: true }"
                 :title="t('action.copy')"
                 :icon="copyIcon"
@@ -119,13 +119,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="`${t('action.copy')}`"
           :icon="copyCodeIcon"
           outline
           @click="copyRequestCode"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="`${t('action.dismiss')}`"
           outline
           filled
@@ -133,7 +133,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">

packages/hoppscotch-common/src/components/http/Headers.vue

@@ -7,20 +7,20 @@
         {{ t("request.header_list") }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/headers"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.clear_all')"
           :icon="IconTrash2"
           @click="clearContent()"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="bulkMode"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
@@ -28,14 +28,14 @@
           :icon="IconWrapText"
           @click.prevent="linewrapEnabled = !linewrapEnabled"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.bulk_mode')"
           :icon="IconEdit"
           :class="{ '!text-accent': bulkMode }"
           @click="bulkMode = !bulkMode"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('add.new')"
           :icon="IconPlus"
@@ -61,7 +61,7 @@
             class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
           >
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{
                   theme: 'tooltip',
                   delay: [500, 20],
@@ -79,7 +79,7 @@
                 tabindex="-1"
               />
             </span>
-            <SmartAutoComplete
+            <HoppSmartAutoComplete
               :placeholder="`${t('count.header', { count: index + 1 })}`"
               :source="commonHeaders"
               :spellcheck="false"
@@ -110,7 +110,7 @@
               "
             />
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="
                   header.hasOwnProperty('active')
@@ -138,7 +138,7 @@
               />
             </span>
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('action.remove')"
                 :icon="IconTrash"
@@ -165,7 +165,7 @@
             class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
           >
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 :icon="IconLock"
                 class="opacity-25 cursor-auto text-secondaryLight bg-divider"
                 tabindex="-1"
@@ -182,19 +182,19 @@
               readonly
             />
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-if="header.source === 'auth'"
                 :icon="masking ? IconEye : IconEyeOff"
                 @click="toggleMask()"
               />
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-else
                 :icon="IconArrowUpRight"
                 class="cursor-auto text-primary hover:text-primary"
               />
             </span>
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 :icon="IconArrowUpRight"
                 @click="changeTab(header.source)"
               />
@@ -213,7 +213,7 @@
           :alt="`${t('empty.headers')}`"
         />
         <span class="pb-4 text-center">{{ t("empty.headers") }}</span>
-        <ButtonSecondary
+        <HoppButtonSecondary
           filled
           :label="`${t('add.new')}`"
           :icon="IconPlus"
@@ -253,7 +253,7 @@ import * as RA from "fp-ts/ReadonlyArray"
 import * as E from "fp-ts/Either"
 import * as O from "fp-ts/Option"
 import * as A from "fp-ts/Array"
-import draggable from "vuedraggable"
+import draggable from "vuedraggable-es"
 import { RequestOptionTabs } from "./RequestOptions.vue"
 import { useCodemirror } from "@composables/codemirror"
 import {

packages/hoppscotch-common/src/components/http/ImportCurl.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="`${t('import.curl')}`"
@@ -13,26 +13,26 @@
               cURL
             </label>
             <div class="flex items-center">
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('action.clear_all')"
                 :icon="IconTrash2"
                 @click="clearContent()"
               />
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('state.linewrap')"
                 :class="{ '!text-accent': linewrapEnabled }"
                 :icon="IconWrapText"
                 @click.prevent="linewrapEnabled = !linewrapEnabled"
               />
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip', allowHTML: true }"
                 :title="t('action.download_file')"
                 :icon="downloadIcon"
                 @click="downloadResponse"
               />
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip', allowHTML: true }"
                 :title="t('action.copy')"
                 :icon="copyIcon"
@@ -51,13 +51,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           ref="importButton"
           :label="`${t('import.title')}`"
           outline
           @click="handleImport"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="`${t('action.cancel')}`"
           outline
           filled
@@ -65,7 +65,7 @@
         />
       </span>
       <span class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           :icon="pasteIcon"
           :label="`${t('action.paste')}`"
           filled
@@ -74,7 +74,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">

packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue

@@ -22,7 +22,7 @@
       <SmartEnvInput v-model="scope" placeholder="Scope" />
     </div>
     <div class="p-2">
-      <ButtonSecondary
+      <HoppButtonSecondary
         filled
         :label="`${t('authorization.generate_token')}`"
         @click="handleAccessTokenRequest()"

packages/hoppscotch-common/src/components/http/Parameters.vue

@@ -7,20 +7,20 @@
         {{ t("request.parameter_list") }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/parameters"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.clear_all')"
           :icon="IconTrash2"
           @click="clearContent()"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="bulkMode"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
@@ -28,14 +28,14 @@
           :icon="IconWrapText"
           @click.prevent="linewrapEnabled = !linewrapEnabled"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.bulk_mode')"
           :icon="IconEdit"
           :class="{ '!text-accent': bulkMode }"
           @click="bulkMode = !bulkMode"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('add.new')"
           :icon="IconPlus"
@@ -61,7 +61,7 @@
             class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
           >
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{
                   theme: 'tooltip',
                   delay: [500, 20],
@@ -104,7 +104,7 @@
               "
             />
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="
                   param.hasOwnProperty('active')
@@ -134,7 +134,7 @@
               />
             </span>
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('action.remove')"
                 :icon="IconTrash"
@@ -157,7 +157,7 @@
           :alt="`${t('empty.parameters')}`"
         />
         <span class="pb-4 text-center">{{ t("empty.parameters") }}</span>
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="`${t('add.new')}`"
           :icon="IconPlus"
           filled
@@ -192,7 +192,7 @@ import {
   RawKeyValueEntry,
 } from "@hoppscotch/data"
 import { isEqual, cloneDeep } from "lodash-es"
-import draggable from "vuedraggable"
+import draggable from "vuedraggable-es"
 import linter from "~/helpers/editor/linting/rawKeyValue"
 import { useCodemirror } from "@composables/codemirror"
 import { useColorMode } from "@composables/theming"

packages/hoppscotch-common/src/components/http/PreRequestScript.vue

@@ -7,20 +7,20 @@
         {{ t("preRequest.javascript_code") }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/pre-request-script"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.clear')"
           :icon="IconTrash2"
           @click="clearContent"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
@@ -39,7 +39,7 @@
         <div class="pb-2 text-secondaryLight">
           {{ t("helpers.pre_request_script") }}
         </div>
-        <SmartAnchor
+        <HoppSmartAnchor
           :label="`${t('preRequest.learn')}`"
           to="https://docs.hoppscotch.io/features/pre-request-script"
           blank

packages/hoppscotch-common/src/components/http/RawBody.vue

@@ -7,27 +7,27 @@
         {{ t("request.raw_body") }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/body"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.clear')"
           :icon="IconTrash2"
           @click="clearContent"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
           :icon="IconWrapText"
           @click.prevent="linewrapEnabled = !linewrapEnabled"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="
             [
               'application/json',
@@ -43,7 +43,7 @@
           @click="prettifyRequestBody"
         />
         <label for="payload">
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('import.title')"
             :icon="IconFilePlus"

packages/hoppscotch-common/src/components/http/ReqChangeConfirmModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('modal.confirm')"
@@ -13,28 +13,28 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           v-focus
           :label="t('action.save')"
           :loading="loading"
           outline
           @click="saveChange"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="t('action.dont_save')"
           outline
           filled
           @click="discardChange"
         />
       </span>
-      <ButtonSecondary
+      <HoppButtonSecondary
         :label="t('action.cancel')"
         outline
         filled
         @click="hideModal"
       />
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">

packages/hoppscotch-common/src/components/http/Request.vue

@@ -30,7 +30,7 @@
                 tabindex="0"
                 @keyup.escape="hide()"
               >
-                <SmartItem
+                <HoppSmartItem
                   v-for="(method, index) in methods"
                   :key="`method-${index}`"
                   :label="method"
@@ -58,7 +58,7 @@
       </div>
     </div>
     <div class="flex mt-2 sm:mt-0">
-      <ButtonPrimary
+      <HoppButtonPrimary
         id="send"
         v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
         :title="`${t('action.send')} <kbd>${getSpecialKey()}</kbd><kbd>↩</kbd>`"
@@ -73,7 +73,7 @@
           theme="popover"
           :on-shown="() => sendTippyActions.focus()"
         >
-          <ButtonPrimary
+          <HoppButtonPrimary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('app.options')"
             :icon="IconChevronDown"
@@ -90,7 +90,7 @@
               @keyup.delete="clearAll.$el.click()"
               @keyup.escape="hide()"
             >
-              <SmartItem
+              <HoppSmartItem
                 ref="curl"
                 :label="`${t('import.curl')}`"
                 :icon="IconFileCode"
@@ -102,7 +102,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 ref="show"
                 :label="`${t('show.code')}`"
                 :icon="IconCode2"
@@ -114,7 +114,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 ref="clearAll"
                 :label="`${t('action.clear_all')}`"
                 :icon="IconRotateCCW"
@@ -131,7 +131,7 @@
         </tippy>
       </span>
       <span class="flex ml-2 transition border rounded border-divider">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
           :title="`${t(
             'request.save'
@@ -149,7 +149,7 @@
             theme="popover"
             :on-shown="() => saveTippyActions.focus()"
           >
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('app.options')"
               :icon="IconChevronDown"
@@ -175,7 +175,7 @@
                   class="mb-2 input !bg-primaryContrast"
                   @keyup.enter="hide()"
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="copyRequestAction"
                   :label="shareButtonText"
                   :icon="copyLinkIcon"
@@ -187,13 +187,13 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   :icon="IconLink2"
                   :label="`${t('request.view_my_links')}`"
                   to="/profile"
                 />
                 <hr />
-                <SmartItem
+                <HoppSmartItem
                   ref="saveRequestAction"
                   :label="`${t('request.save_as')}`"
                   :icon="IconFolderPlus"

packages/hoppscotch-common/src/components/http/RequestOptions.vue

@@ -1,30 +1,30 @@
 <template>
-  <SmartTabs
+  <HoppSmartTabs
     v-model="selectedRealtimeTab"
     styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-upperMobilePrimaryStickyFold sm:top-upperPrimaryStickyFold z-10"
     render-inactive-tabs
   >
-    <SmartTab
+    <HoppSmartTab
       :id="'params'"
       :label="`${t('tab.parameters')}`"
       :info="`${newActiveParamsCount$}`"
     >
       <HttpParameters />
-    </SmartTab>
-    <SmartTab :id="'bodyParams'" :label="`${t('tab.body')}`">
+    </HoppSmartTab>
+    <HoppSmartTab :id="'bodyParams'" :label="`${t('tab.body')}`">
       <HttpBody @change-tab="changeTab" />
-    </SmartTab>
-    <SmartTab
+    </HoppSmartTab>
+    <HoppSmartTab
       :id="'headers'"
       :label="`${t('tab.headers')}`"
       :info="`${newActiveHeadersCount$}`"
     >
       <HttpHeaders @change-tab="changeTab" />
-    </SmartTab>
-    <SmartTab :id="'authorization'" :label="`${t('tab.authorization')}`">
+    </HoppSmartTab>
+    <HoppSmartTab :id="'authorization'" :label="`${t('tab.authorization')}`">
       <HttpAuthorization />
-    </SmartTab>
-    <SmartTab
+    </HoppSmartTab>
+    <HoppSmartTab
       :id="'preRequestScript'"
       :label="`${t('tab.pre_request_script')}`"
       :indicator="
@@ -32,15 +32,15 @@
       "
     >
       <HttpPreRequestScript />
-    </SmartTab>
-    <SmartTab
+    </HoppSmartTab>
+    <HoppSmartTab
       :id="'tests'"
       :label="`${t('tab.tests')}`"
       :indicator="testScript && testScript.length > 0 ? true : false"
     >
       <HttpTests />
-    </SmartTab>
-  </SmartTabs>
+    </HoppSmartTab>
+  </HoppSmartTabs>
 </template>
 
 <script setup lang="ts">

packages/hoppscotch-common/src/components/http/ResponseMeta.vue

@@ -8,7 +8,7 @@
         v-if="response.type === 'loading'"
         class="flex flex-col items-center justify-center"
       >
-        <SmartSpinner class="my-4" />
+        <HoppSmartSpinner class="my-4" />
         <span class="text-secondaryLight">{{ t("state.loading") }}</span>
       </div>
       <div

packages/hoppscotch-common/src/components/http/Sidebar.vue

@@ -1,28 +1,32 @@
 <template>
-  <SmartTabs
+  <HoppSmartTabs
     v-model="selectedNavigationTab"
     styles="sticky overflow-x-auto flex-shrink-0 bg-primary z-10 top-0"
     vertical
     render-inactive-tabs
   >
-    <SmartTab :id="'history'" :icon="IconClock" :label="`${t('tab.history')}`">
+    <HoppSmartTab
+      :id="'history'"
+      :icon="IconClock"
+      :label="`${t('tab.history')}`"
+    >
       <History :page="'rest'" />
-    </SmartTab>
-    <SmartTab
+    </HoppSmartTab>
+    <HoppSmartTab
       :id="'collections'"
       :icon="IconFolder"
       :label="`${t('tab.collections')}`"
     >
       <Collections />
-    </SmartTab>
-    <SmartTab
+    </HoppSmartTab>
+    <HoppSmartTab
       :id="'env'"
       :icon="IconLayers"
       :label="`${t('environment.title')}`"
     >
       <Environments />
-    </SmartTab>
-  </SmartTabs>
+    </HoppSmartTab>
+  </HoppSmartTabs>
 </template>
 
 <script setup lang="ts">

packages/hoppscotch-common/src/components/http/TestResult.vue

@@ -14,7 +14,7 @@
         <label class="font-semibold truncate text-secondaryLight">
           {{ t("test.report") }}
         </label>
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.clear')"
           :icon="IconTrash2"
@@ -48,13 +48,13 @@
                     {{ t("environment.no_environment_description") }}
                   </p>
                   <p class="flex mt-3 space-x-2">
-                    <ButtonSecondary
+                    <HoppButtonSecondary
                       :label="t('environment.add_to_global')"
                       class="text-tiny !bg-primary"
                       filled
                       @click="addEnvToGlobal()"
                     />
-                    <ButtonSecondary
+                    <HoppButtonSecondary
                       :label="t('environment.create_new')"
                       class="text-tiny !bg-primary"
                       filled
@@ -186,7 +186,7 @@
       <span class="pb-4 text-center">
         {{ t("helpers.tests") }}
       </span>
-      <ButtonSecondary
+      <HoppButtonSecondary
         outline
         :label="`${t('action.learn_more')}`"
         to="https://docs.hoppscotch.io/features/tests"

packages/hoppscotch-common/src/components/http/TestResultReport.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center px-4 py-2">
-    <SmartProgressRing
+    <HoppSmartProgressRing
       class="mr-2 text-red-500"
       :radius="8"
       :stroke="1.5"

packages/hoppscotch-common/src/components/http/Tests.vue

@@ -7,20 +7,20 @@
         {{ t("test.javascript_code") }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/tests"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.clear')"
           :icon="IconTrash2"
           @click="clearContent"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
@@ -39,7 +39,7 @@
         <div class="pb-2 text-secondaryLight">
           {{ t("helpers.post_request_tests") }}
         </div>
-        <SmartAnchor
+        <HoppSmartAnchor
           :label="`${t('test.learn')}`"
           to="https://docs.hoppscotch.io/features/tests"
           blank

packages/hoppscotch-common/src/components/http/URLEncodedParams.vue

@@ -7,20 +7,20 @@
         {{ t("request.body") }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/body"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.clear_all')"
           :icon="IconTrash2"
           @click="clearContent()"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="bulkMode"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
@@ -28,14 +28,14 @@
           :icon="IconWrapText"
           @click.prevent="linewrapEnabled = !linewrapEnabled"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.bulk_mode')"
           :icon="IconEdit"
           :class="{ '!text-accent': bulkMode }"
           @click="bulkMode = !bulkMode"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('add.new')"
           :icon="IconPlus"
@@ -61,7 +61,7 @@
             class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
           >
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{
                   theme: 'tooltip',
                   delay: [500, 20],
@@ -104,7 +104,7 @@
               "
             />
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="
                   param.hasOwnProperty('active')
@@ -132,7 +132,7 @@
               />
             </span>
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('action.remove')"
                 :icon="IconTrash"
@@ -156,7 +156,7 @@
         <span class="pb-4 text-center">
           {{ t("empty.body") }}
         </span>
-        <ButtonSecondary
+        <HoppButtonSecondary
           filled
           :label="`${t('add.new')}`"
           :icon="IconPlus"
@@ -191,7 +191,7 @@ import * as A from "fp-ts/Array"
 import * as O from "fp-ts/Option"
 import * as RA from "fp-ts/ReadonlyArray"
 import * as E from "fp-ts/Either"
-import draggable from "vuedraggable"
+import draggable from "vuedraggable-es"
 import { useCodemirror } from "@composables/codemirror"
 import linter from "~/helpers/editor/linting/rawKeyValue"
 import { useRESTRequestBody } from "~/newstore/RESTSession"