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-ui/src/stories/Anchor.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Anchor.story.vue
@@ -2,19 +2,14 @@
  <Story title="Anchor">
    <div class="text-secondaryLight text-tiny">
      By signing in, you are agreeing to our
-      <SmartAnchor
-        class="text-red-800 link"
-        to="https://docs.hoppscotch.io/terms"
-        blank
-        label="Terms of Service"
-      />
+      <HoppSmartAnchor class="text-red-800 link" to="https://docs.hoppscotch.io/terms" blank label="Terms of Service" />
      and
-      <SmartAnchor
-        class="text-red-600 link"
-        to="https://docs.hoppscotch.io/privacy"
-        blank
-        label="Privacy Policy"
-      />
+      <HoppSmartAnchor class="text-red-600 link" to="https://docs.hoppscotch.io/privacy" blank label="Privacy Policy" />
    </div>
  </Story>
 </template>
+
+<script setup lang="ts">
+import { HoppSmartAnchor } from "../components/smart"
+</script>
+
--- a/packages/hoppscotch-ui/src/stories/AutoComplete.story.vue
+++ b/packages/hoppscotch-ui/src/stories/AutoComplete.story.vue
@@ -1,28 +1,21 @@
 <template>
  <Story title="Auto Complete">
    <div class="h-[50vh]">
-      <SmartAutoComplete
-        placeholder="Select a header"
-        :source="commonHeaders"
-        :spellcheck="false"
-        :value="header[0].key"
-        autofocus
-        styles="
-                bg-transparent
-                flex
-                flex-1
-                py-1
-                px-4
-                truncate
-              "
-        class="flex-1 !flex"
-        @input="updateHeader()"
-      />
+      <HoppSmartAutoComplete placeholder="Select a header" :source="commonHeaders" :spellcheck="false"
+        :value="header[0].key" autofocus styles="
+                      bg-transparent
+                      flex
+                      flex-1
+                      py-1
+                      px-4
+                      truncate
+                    " class="flex-1 !flex" @input="updateHeader()" />
    </div>
  </Story>
 </template>

 <script setup lang="ts">
+import { HoppSmartAutoComplete } from "../components/smart"
 import { ref } from "vue"

 type GQLHeader = {
--- a/packages/hoppscotch-ui/src/stories/Button.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Button.story.vue
@@ -1,10 +1,14 @@
 <template>
  <Story title="Button">
    <Variant title="Primary">
-      <ButtonPrimary label="Button" />
+      <HoppButtonPrimary label="Button" />
    </Variant>
    <Variant title="Secondary">
-      <ButtonSecondary label="Button" />
+      <HoppButtonSecondary label="Button" />
    </Variant>
  </Story>
 </template>
+
+<script setup lang="ts">
+import { HoppButtonPrimary, HoppButtonSecondary } from "../components/button"
+</script>
--- a/packages/hoppscotch-ui/src/stories/Checkbox.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Checkbox.story.vue
@@ -1,12 +1,14 @@
 <template>
  <Story title="Checkbox">
    <Variant title="Single">
-      <SmartCheckbox :on="on" />
+      <HoppSmartCheckbox :on="on" />
    </Variant>
  </Story>
 </template>

 <script setup lang="ts">
+import { HoppSmartCheckbox } from "../components/smart"
+
 import { ref } from "vue"

 const on = ref(true)
--- a/packages/hoppscotch-ui/src/stories/ConfirmModal.story.vue
+++ b/packages/hoppscotch-ui/src/stories/ConfirmModal.story.vue
@@ -1,16 +1,13 @@
 <template>
  <Story title="Confirm Modal">
-    <SmartConfirmModal
-      :show="show"
-      :title="'Confirm Modal'"
-      @hide-modal="show = false"
-      @resolve="resolveConfirmModal"
-    />
+    <HoppSmartConfirmModal :show="show" :title="'Confirm Modal'" @hide-modal="show = false"
+      @resolve="resolveConfirmModal" />
  </Story>
 </template>

 <script lang="ts" setup>
 import { ref } from "vue"
+import { HoppSmartConfirmModal } from "../components/smart"

 const show = ref(true)

--- a/packages/hoppscotch-ui/src/stories/Expand.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Expand.story.vue
@@ -0,0 +1,20 @@
+<template>
+  <Story title="Expand">
+    <HoppSmartExpand>
+      <template #body>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia quas culpa ea nesciunt, magni natus ex numquam perspiciatis,
+        reprehenderit reiciendis necessitatibus nostrum laudantium illum tempora ducimus! Dignissimos officiis sed nisi.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia quas culpa ea nesciunt, magni natus ex numquam perspiciatis,
+        reprehenderit reiciendis necessitatibus nostrum laudantium illum tempora ducimus! Dignissimos officiis sed nisi.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia quas culpa ea nesciunt, magni natus ex numquam perspiciatis,
+        reprehenderit reiciendis necessitatibus nostrum laudantium illum tempora ducimus! Dignissimos officiis sed nisi.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia quas culpa ea nesciunt, magni natus ex numquam perspiciatis,
+        reprehenderit reiciendis necessitatibus nostrum laudantium illum tempora ducimus! Dignissimos officiis sed nisi.
+      </template>
+    </HoppSmartExpand>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { HoppSmartExpand } from "../components/smart"
+</script>
--- a/packages/hoppscotch-ui/src/stories/Item.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Item.story.vue
@@ -1,7 +1,11 @@
 <template>
  <Story title="Item">
    <Variant title="Single">
-      <SmartItem :label="'Item'" :active-info-icon="false" />
+      <HoppSmartItem :label="'Item'" :active-info-icon="false" />
    </Variant>
  </Story>
 </template>
+
+<script setup lang="ts">
+import { HoppSmartItem } from "../components/smart"
+</script>
--- a/packages/hoppscotch-ui/src/stories/Link.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Link.story.vue
@@ -1,17 +1,19 @@
 <template>
  <Story title="Link">
    <Variant title="Text Link">
-      <SmartLink :to="link" :blank="true"> Click here </SmartLink>
+      <HoppSmartLink :to="link" :blank="true"> Click here </HoppSmartLink>
    </Variant>
    <Variant title="Button Link">
-      <SmartLink :to="link" :blank="true">
-        <ButtonPrimary label="Click here" />
-      </SmartLink>
+      <HoppSmartLink :to="link" :blank="true">
+        <HoppButtonPrimary label="Click here" />
+      </HoppSmartLink>
    </Variant>
  </Story>
 </template>

 <script setup lang="ts">
+import { HoppSmartLink } from "../components/smart"
+import { HoppButtonPrimary } from "../components/button"
 import { ref } from "vue"

 const link = ref("/")
--- a/packages/hoppscotch-ui/src/stories/Modal.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Modal.story.vue
@@ -1,15 +1,11 @@
 <template>
  <Story title="Modal">
-    <SmartModal
-      :show="show"
-      :title="'Modal Title'"
-      @hide-modal="show = false"
-      @resolve="resolveConfirmModal"
-    />
+    <HoppSmartModal :show="show" :title="'Modal Title'" @hide-modal="show = false" @resolve="resolveConfirmModal" />
  </Story>
 </template>

 <script lang="ts" setup>
+import { HoppSmartModal } from "../components/smart"
 import { ref } from "vue"

 const show = ref(true)
--- a/packages/hoppscotch-ui/src/stories/ProgressRing.story.vue
+++ b/packages/hoppscotch-ui/src/stories/ProgressRing.story.vue
@@ -1,15 +1,12 @@
 <template>
  <Story title="Progress Ring">
-    <SmartProgressRing
-      class="mr-2 text-red-500"
-      :radius="8"
-      :stroke="1.5"
-      :progress="(failedTests / totalTests) * 100"
-    />
+    <HoppSmartProgressRing class="mr-2 text-red-500" :radius="8" :stroke="1.5"
+      :progress="(failedTests / totalTests) * 100" />
  </Story>
 </template>

 <script setup lang="ts">
+import { HoppSmartProgressRing } from "../components/smart"
 const totalTests = 10
 const failedTests = 2
 </script>
--- a/packages/hoppscotch-ui/src/stories/Radio.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Radio.story.vue
@@ -1,16 +1,17 @@
 <template>
  <Story title="Radio">
    <Variant title="Single">
-      <SmartRadio />
+      <HoppSmartRadio />
    </Variant>
    <Variant title="Group">
-      <SmartRadioGroup :radios="radios" :model-value="selected" />
+      <HoppSmartRadioGroup :radios="radios" :model-value="selected" />
    </Variant>
  </Story>
 </template>

 <script setup lang="ts">
 import { ref } from "vue"
+import { HoppSmartRadio, HoppSmartRadioGroup } from "../components/smart"

 const selected = ref("option1")
 const radios = [
--- a/packages/hoppscotch-ui/src/stories/SlideOver.story.vue
+++ b/packages/hoppscotch-ui/src/stories/SlideOver.story.vue
@@ -1,14 +1,15 @@
 <template>
  <Story title="Slider Over">
-    <SmartSlideOver :show="show" :title="'Title'" @close="show = false">
+    <HoppSmartSlideOver :show="show" :title="'Title'" @close="show = false">
      <template #content>
        <h1>Content</h1>
      </template>
-    </SmartSlideOver>
+    </HoppSmartSlideOver>
  </Story>
 </template>

-<script lang="ts" setup>
+<script setup lang="ts">
+import { HoppSmartSlideOver } from "../components/smart"
 import { ref } from "vue"

 const show = ref(true)
--- a/packages/hoppscotch-ui/src/stories/Spinner.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Spinner.story.vue
@@ -1,5 +1,9 @@
 <template>
  <Story title="Spinner">
-    <SmartSpinner />
+    <HoppSmartSpinner />
  </Story>
 </template>
+
+<script setup lang="ts">
+import { HoppSmartSpinner } from "../components/smart"
+</script>
--- a/packages/hoppscotch-ui/src/stories/Tab.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Tab.story.vue
@@ -1,19 +1,20 @@
 <template>
  <Story title="Tab">
    <Variant title="Single">
-      <SmartTabs id="my-tab" v-model="selectedTab" render-inactive-tabs>
-        <SmartTab id="tab1" label="Tab 1">
+      <HoppSmartTabs id="my-tab" v-model="selectedTab" render-inactive-tabs>
+        <HoppSmartTab id="tab1" label="Tab 1">
          <h1>Tab 1 content</h1>
-        </SmartTab>
-        <SmartTab id="tab2" label="Tab 2">
+        </HoppSmartTab>
+        <HoppSmartTab id="tab2" label="Tab 2">
          <h1>Tab 2 content</h1>
-        </SmartTab>
-      </SmartTabs>
+        </HoppSmartTab>
+      </HoppSmartTabs>
    </Variant>
  </Story>
 </template>

 <script setup lang="ts">
+import { HoppSmartTabs, HoppSmartTab } from "../components/smart"
 import { ref } from "vue"

 const selectedTab = ref("tab1")
--- a/packages/hoppscotch-ui/src/stories/Toggle.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Toggle.story.vue
@@ -1,10 +1,11 @@
 <template>
  <Story title="Toggle">
-    <SmartToggle :on="on" @change="change"> Turn on </SmartToggle>
+    <HoppSmartToggle :on="on" @change="change"> Turn on </HoppSmartToggle>
  </Story>
 </template>

 <script setup lang="ts">
+import { HoppSmartToggle } from "../components/smart"
 import { ref } from "vue"

 const on = ref(true)
--- a/packages/hoppscotch-ui/src/stories/Window.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Window.story.vue
@@ -1,27 +1,18 @@
 <template>
  <Story title="Window">
    <Variant title="Single">
-      <SmartWindows
-        :id="'my-window'"
-        v-model="selectedWindow"
-        @add-tab="openNewTab"
-        @remove-tab="removeTab"
-        @sort="sortTabs"
-      >
-        <SmartWindow
-          v-for="window in tabs"
-          :id="window.id"
-          :key="'tab_' + window.id"
-          :label="window.name"
-          :is-removable="window.removable"
-        >
-        </SmartWindow>
-      </SmartWindows>
+      <HoppSmartWindows :id="'my-window'" v-model="selectedWindow" @add-tab="openNewTab" @remove-tab="removeTab"
+        @sort="sortTabs">
+        <HoppSmartWindow v-for="window in tabs" :id="window.id" :key="'tab_' + window.id" :label="window.name"
+          :is-removable="window.removable">
+        </HoppSmartWindow>
+      </HoppSmartWindows>
    </Variant>
  </Story>
 </template>

 <script setup lang="ts">
+import { HoppSmartWindows, HoppSmartWindow } from "../components/smart"
 import { ref } from "vue"

 const selectedWindow = ref("window1")