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

Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>
2023-02-24 13:20:12 +05:30
parent 82c6f6f6bc
commit cae1840506
165 changed files with 2134 additions and 2069 deletions
--- a/packages/hoppscotch-common/src/components/graphql/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/graphql/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,27 +86,27 @@
        </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>
-        <ButtonSecondary
+        </HoppSmartCheckbox>
+        <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"
@@ -124,7 +127,7 @@
      <span class="pb-4 text-center">
        {{ t("empty.authorization") }}
      </span>
-      <ButtonSecondary
+      <HoppButtonSecondary
        outline
        :label="t('app.documentation')"
        to="https://docs.hoppscotch.io/features/authorization"
@@ -180,7 +183,7 @@
                :on-shown="() => authTippyActions.focus()"
              >
                <span class="select-wrapper">
-                  <ButtonSecondary
+                  <HoppButtonSecondary
                    :label="addTo || t('state.none')"
                    class="pr-8 ml-2 rounded-none"
                  />
@@ -192,7 +195,7 @@
                    tabindex="0"
                    @keyup.escape="hide()"
                  >
-                    <SmartItem
+                    <HoppSmartItem
                      :icon="addTo === 'Headers' ? IconCircleDot : IconCircle"
                      :active="addTo === 'Headers'"
                      :label="'Headers'"
@@ -203,7 +206,7 @@
                        }
                      "
                    />
-                    <SmartItem
+                    <HoppSmartItem
                      :icon="
                        addTo === 'Query params' ? IconCircleDot : IconCircle
                      "
@@ -229,7 +232,7 @@
        <div class="pb-2 text-secondaryLight">
          {{ t("helpers.authorization") }}
        </div>
-        <SmartAnchor
+        <HoppSmartAnchor
          class="link"
          :label="t('authorization.learn')"
          :icon="IconExternalLink"
--- a/packages/hoppscotch-common/src/components/graphql/Request.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Request.vue
@@ -14,7 +14,7 @@
        :disabled="connected"
        @keyup.enter="onConnectClick"
      />
-      <ButtonPrimary
+      <HoppButtonPrimary
        id="get"
        name="get"
        :label="!connected ? t('action.connect') : t('action.disconnect')"
--- a/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
@@ -1,11 +1,11 @@
 <template>
  <div class="flex flex-col flex-1 h-full">
-    <SmartTabs
+    <HoppSmartTabs
      v-model="selectedOptionTab"
      styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-upperPrimaryStickyFold z-10"
      render-inactive-tabs
    >
-      <SmartTab
+      <HoppSmartTab
        :id="'query'"
        :label="`${t('tab.query')}`"
        :indicator="gqlQueryString && gqlQueryString.length > 0 ? true : false"
@@ -17,7 +17,7 @@
            {{ t("request.query") }}
          </label>
          <div class="flex">
-            <ButtonSecondary
+            <HoppButtonSecondary
              v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
              :title="`${t(
                'request.run'
@@ -27,7 +27,7 @@
              class="rounded-none !text-accent !hover:text-accentDark"
              @click="runQuery()"
            />
-            <ButtonSecondary
+            <HoppButtonSecondary
              v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
              :title="`${t(
                'request.save'
@@ -37,33 +37,33 @@
              class="rounded-none"
              @click="saveRequest"
            />
-            <ButtonSecondary
+            <HoppButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              to="https://docs.hoppscotch.io/graphql"
              blank
              :title="t('app.wiki')"
              :icon="IconHelpCircle"
            />
-            <ButtonSecondary
+            <HoppButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="t('action.clear_all')"
              :icon="IconTrash2"
              @click="clearGQLQuery()"
            />
-            <ButtonSecondary
+            <HoppButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="t('state.linewrap')"
              :class="{ '!text-accent': linewrapEnabledQuery }"
              :icon="IconWrapText"
              @click.prevent="linewrapEnabledQuery = !linewrapEnabledQuery"
            />
-            <ButtonSecondary
+            <HoppButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="t('action.prettify')"
              :icon="prettifyQueryIcon"
              @click="prettifyQuery"
            />
-            <ButtonSecondary
+            <HoppButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="t('action.copy')"
              :icon="copyQueryIcon"
@@ -72,8 +72,8 @@
          </div>
        </div>
        <div ref="queryEditor" class="flex flex-col flex-1"></div>
-      </SmartTab>
-      <SmartTab
+      </HoppSmartTab>
+      <HoppSmartTab
        :id="'variables'"
        :label="`${t('tab.variables')}`"
        :indicator="variableString && variableString.length > 0 ? true : false"
@@ -85,20 +85,20 @@
            {{ t("request.variables") }}
          </label>
          <div class="flex">
-            <ButtonSecondary
+            <HoppButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              to="https://docs.hoppscotch.io/graphql"
              blank
              :title="t('app.wiki')"
              :icon="IconHelpCircle"
            />
-            <ButtonSecondary
+            <HoppButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="t('action.clear_all')"
              :icon="IconTrash2"
              @click="clearGQLVariables()"
            />
-            <ButtonSecondary
+            <HoppButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="t('state.linewrap')"
              :class="{ '!text-accent': linewrapEnabledVariable }"
@@ -107,13 +107,13 @@
                linewrapEnabledVariable = !linewrapEnabledVariable
              "
            />
-            <ButtonSecondary
+            <HoppButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="t('action.prettify')"
              :icon="prettifyVariablesIcon"
              @click="prettifyVariableString"
            />
-            <ButtonSecondary
+            <HoppButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="t('action.copy')"
              :icon="copyVariablesIcon"
@@ -122,8 +122,8 @@
          </div>
        </div>
        <div ref="variableEditor" class="flex flex-col flex-1"></div>
-      </SmartTab>
-      <SmartTab
+      </HoppSmartTab>
+      <HoppSmartTab
        :id="'headers'"
        :label="`${t('tab.headers')}`"
        :info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`"
@@ -135,34 +135,34 @@
            {{ t("tab.headers") }}
          </label>
          <div class="flex">
-            <ButtonSecondary
+            <HoppButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              to="https://docs.hoppscotch.io/graphql"
              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('state.linewrap')"
              :class="{ '!text-accent': linewrapEnabled }"
              :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"
@@ -192,7 +192,7 @@
                class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
              >
                <span>
-                  <ButtonSecondary
+                  <HoppButtonSecondary
                    v-tippy="{
                      theme: 'tooltip',
                      delay: [500, 20],
@@ -210,7 +210,7 @@
                    tabindex="-1"
                  />
                </span>
-                <SmartAutoComplete
+                <HoppSmartAutoComplete
                  :placeholder="`${t('count.header', { count: index + 1 })}`"
                  :source="commonHeaders"
                  :spellcheck="false"
@@ -250,7 +250,7 @@
                  "
                />
                <span>
-                  <ButtonSecondary
+                  <HoppButtonSecondary
                    v-tippy="{ theme: 'tooltip' }"
                    :title="
                      header.hasOwnProperty('active')
@@ -278,7 +278,7 @@
                  />
                </span>
                <span>
-                  <ButtonSecondary
+                  <HoppButtonSecondary
                    v-tippy="{ theme: 'tooltip' }"
                    :title="t('action.remove')"
                    :icon="IconTrash"
@@ -302,7 +302,7 @@
            <span class="pb-4 text-center">
              {{ t("empty.headers") }}
            </span>
-            <ButtonSecondary
+            <HoppButtonSecondary
              :label="`${t('add.new')}`"
              filled
              :icon="IconPlus"
@@ -311,11 +311,11 @@
            />
          </div>
        </div>
-      </SmartTab>
-      <SmartTab :id="'authorization'" :label="`${t('tab.authorization')}`">
+      </HoppSmartTab>
+      <HoppSmartTab :id="'authorization'" :label="`${t('tab.authorization')}`">
        <GraphqlAuthorization />
-      </SmartTab>
-    </SmartTabs>
+      </HoppSmartTab>
+    </HoppSmartTabs>
    <CollectionsSaveRequest
      mode="graphql"
      :show="showSaveRequestModal"
@@ -354,7 +354,7 @@ import {
  parseRawKeyValueEntriesE,
  RawKeyValueEntry,
 } from "@hoppscotch/data"
-import draggable from "vuedraggable"
+import draggable from "vuedraggable-es"
 import { clone, cloneDeep, isEqual } from "lodash-es"
 import { refAutoReset } from "@vueuse/core"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
--- a/packages/hoppscotch-common/src/components/graphql/Response.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Response.vue
@@ -4,7 +4,7 @@
      v-if="responseString === 'loading'"
      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
    >
-      <SmartSpinner class="my-4" />
+      <HoppSmartSpinner class="my-4" />
      <span class="text-secondaryLight">{{ t("state.loading") }}</span>
    </div>
    <div v-else-if="responseString" class="flex flex-col flex-1">
@@ -15,14 +15,14 @@
          {{ t("response.title") }}
        </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'
@@ -30,7 +30,7 @@
            :icon="downloadResponseIcon"
            @click="downloadResponse"
          />
-          <ButtonSecondary
+          <HoppButtonSecondary
            v-tippy="{ theme: 'tooltip', allowHTML: true }"
            :title="`${t(
              'action.copy'
--- a/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
@@ -1,21 +1,25 @@
 <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="'graphql'" @use-history="handleUseHistory" />
-    </SmartTab>
-    <SmartTab
+    </HoppSmartTab>
+    <HoppSmartTab
      :id="'collections'"
      :icon="IconFolder"
      :label="`${t('tab.collections')}`"
    >
      <CollectionsGraphql />
-    </SmartTab>
-    <SmartTab
+    </HoppSmartTab>
+    <HoppSmartTab
      :id="'docs'"
      :icon="IconBookOpen"
      :label="`${t('tab.documentation')}`"
@@ -51,7 +55,7 @@
            class="flex flex-1 p-4 py-2 bg-transparent"
          />
          <div class="flex">
-            <ButtonSecondary
+            <HoppButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              to="https://docs.hoppscotch.io/quickstart/graphql"
              blank
@@ -60,12 +64,12 @@
            />
          </div>
        </div>
-        <SmartTabs
+        <HoppSmartTabs
          v-model="selectedGqlTab"
          styles="border-t border-b border-dividerLight bg-primary sticky overflow-x-auto flex-shrink-0 z-10 top-sidebarPrimaryStickyFold"
          render-inactive-tabs
        >
-          <SmartTab
+          <HoppSmartTab
            v-if="queryFields.length > 0"
            :id="'queries'"
            :label="`${t('tab.queries')}`"
@@ -78,8 +82,8 @@
              :jump-type-callback="handleJumpToType"
              class="p-4"
            />
-          </SmartTab>
-          <SmartTab
+          </HoppSmartTab>
+          <HoppSmartTab
            v-if="mutationFields.length > 0"
            :id="'mutations'"
            :label="`${t('graphql.mutations')}`"
@@ -92,8 +96,8 @@
              :jump-type-callback="handleJumpToType"
              class="p-4"
            />
-          </SmartTab>
-          <SmartTab
+          </HoppSmartTab>
+          <HoppSmartTab
            v-if="subscriptionFields.length > 0"
            :id="'subscriptions'"
            :label="`${t('graphql.subscriptions')}`"
@@ -106,8 +110,8 @@
              :jump-type-callback="handleJumpToType"
              class="p-4"
            />
-          </SmartTab>
-          <SmartTab
+          </HoppSmartTab>
+          <HoppSmartTab
            v-if="graphqlTypes.length > 0"
            :id="'types'"
            :label="`${t('tab.types')}`"
@@ -122,11 +126,11 @@
              :highlighted-fields="getGqlTypeHighlightedFields(type)"
              :jump-type-callback="handleJumpToType"
            />
-          </SmartTab>
-        </SmartTabs>
+          </HoppSmartTab>
+        </HoppSmartTabs>
      </div>
-    </SmartTab>
-    <SmartTab :id="'schema'" :icon="IconBox" :label="`${t('tab.schema')}`">
+    </HoppSmartTab>
+    <HoppSmartTab :id="'schema'" :icon="IconBox" :label="`${t('tab.schema')}`">
      <div
        v-if="schemaString"
        class="sticky top-0 z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
@@ -135,27 +139,27 @@
          {{ t("graphql.schema") }}
        </label>
        <div class="flex">
-          <ButtonSecondary
+          <HoppButtonSecondary
            v-tippy="{ theme: 'tooltip' }"
            to="https://docs.hoppscotch.io/quickstart/graphql"
            blank
            :title="t('app.wiki')"
            :icon="IconHelpCircle"
          />
-          <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' }"
            :title="t('action.download_file')"
            :icon="downloadSchemaIcon"
            @click="downloadSchema"
          />
-          <ButtonSecondary
+          <HoppButtonSecondary
            v-tippy="{ theme: 'tooltip' }"
            :title="t('action.copy')"
            :icon="copySchemaIcon"
@@ -182,8 +186,8 @@
          {{ t("empty.schema") }}
        </span>
      </div>
-    </SmartTab>
-  </SmartTabs>
+    </HoppSmartTab>
+  </HoppSmartTabs>
 </template>

 <script setup lang="ts">