refactor: hoppscotch ui (#2887)

* feat: hopp ui initialized

* feat: button components added

* feat: windi css integration

* chore: package removed from hopp ui

* feat: storybook added

* feat: move all smart components hoppscotch-ui

* fix: import issue from components/smart

* fix: env input component import

* feat: add hoppui to windicss config

* fix: remove storybook

* feat: move components from hoppscotch-ui

* feat: storybook added

* feat: storybook progress

* feat: themeing storybook

* feat: add stories

* chore: package updated

* chore: stories added

* feat: stories added

* feat: stories added

* feat: icons resolved

* feat: i18n composable resolved

* feat: histoire added

* chore: resolved prettier issue

* feat: radio story added

* feat: story added for all components

* feat: new components added to stories

* fix: resolved issues

* feat: readme.md added

* feat: context/provider added

* chore: removed app component registry

* chore: remove importing of all components in hopp-ui to allow code splitting

* chore: fix vite config errors

* chore: jsdoc added

* chore: any replaced with smart-item

* chore: i18n added to ui components

* chore: clean up - removed a duplicate button

---------

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

packages/hoppscotch-ui/src/stories/Anchor.story.vue

@@ -0,0 +1,20 @@
+<template>
+  <Story title="Anchor">
+    <div class="text-secondaryLight text-tiny">
+      By signing in, you are agreeing to our
+      <SmartAnchor
+        class="link text-red-800"
+        to="https://docs.hoppscotch.io/terms"
+        blank
+        label="Terms of Service"
+      />
+      and
+      <SmartAnchor
+        class="link text-red-600"
+        to="https://docs.hoppscotch.io/privacy"
+        blank
+        label="Privacy Policy"
+      />
+    </div>
+  </Story>
+</template>

packages/hoppscotch-ui/src/stories/AutoComplete.story.vue

@@ -0,0 +1,55 @@
+<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()"
+      />
+    </div>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+
+type GQLHeader = {
+  key: string
+  value: string
+  active: boolean
+}
+
+const header = ref<GQLHeader[]>([
+  {
+    key: "Content-Type",
+    value: "application/json",
+    active: true,
+  },
+])
+
+const commonHeaders = [
+  "Push-Policy",
+  "Retry-After",
+  "Signature",
+  "Signed-Headers",
+  "Server-Timing",
+  "SourceMap",
+  "Upgrade",
+]
+
+const updateHeader = () => {
+  // alert("updated")
+}
+</script>

packages/hoppscotch-ui/src/stories/Button.story.vue

@@ -0,0 +1,10 @@
+<template>
+  <Story title="Button">
+    <Variant title="Primary">
+      <ButtonPrimary label="Button" />
+    </Variant>
+    <Variant title="Secondary">
+      <ButtonSecondary label="Button" />
+    </Variant>
+  </Story>
+</template>

packages/hoppscotch-ui/src/stories/Checkbox.story.vue

@@ -0,0 +1,13 @@
+<template>
+  <Story title="Checkbox">
+    <Variant title="Single">
+      <SmartCheckbox :on="on" />
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+
+const on = ref(true)
+</script>

packages/hoppscotch-ui/src/stories/ConfirmModal.story.vue

@@ -0,0 +1,21 @@
+<template>
+  <Story title="Confirm Modal">
+    <SmartConfirmModal
+      :show="show"
+      :title="'Confirm Modal'"
+      @hide-modal="show = false"
+      @resolve="resolveConfirmModal"
+    />
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue"
+
+const show = ref(true)
+
+const resolveConfirmModal = (resolve: string | null) => {
+  alert("resolved: " + resolve)
+  show.value = false
+}
+</script>

packages/hoppscotch-ui/src/stories/Item.story.vue

@@ -0,0 +1,7 @@
+<template>
+  <Story title="Item">
+    <Variant title="Single">
+      <SmartItem :label="'Item'" :active-info-icon="false" />
+    </Variant>
+  </Story>
+</template>

packages/hoppscotch-ui/src/stories/Link.story.vue

@@ -0,0 +1,18 @@
+<template>
+  <Story title="Link">
+    <Variant title="Text Link">
+      <SmartLink :to="link" :blank="true"> Click here </SmartLink>
+    </Variant>
+    <Variant title="Button Link">
+      <SmartLink :to="link" :blank="true">
+        <ButtonPrimary label="Click here" />
+      </SmartLink>
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+
+const link = ref("/graphql")
+</script>

packages/hoppscotch-ui/src/stories/Modal.story.vue

@@ -0,0 +1,21 @@
+<template>
+  <Story title="Modal">
+    <SmartModal
+      :show="show"
+      :title="'Modal Title'"
+      @hide-modal="show = false"
+      @resolve="resolveConfirmModal"
+    />
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue"
+
+const show = ref(true)
+
+const resolveConfirmModal = (resolve: string | null) => {
+  alert("resolved: " + resolve)
+  show.value = false
+}
+</script>

packages/hoppscotch-ui/src/stories/ProgressRing.story.vue

@@ -0,0 +1,15 @@
+<template>
+  <Story title="Progress Ring">
+    <SmartProgressRing
+      class="mr-2 text-red-500"
+      :radius="8"
+      :stroke="1.5"
+      :progress="(failedTests / totalTests) * 100"
+    />
+  </Story>
+</template>
+
+<script setup lang="ts">
+const totalTests = 10
+const failedTests = 2
+</script>

packages/hoppscotch-ui/src/stories/Radio.story.vue

@@ -0,0 +1,21 @@
+<template>
+  <Story title="Radio">
+    <Variant title="Single">
+      <SmartRadio />
+    </Variant>
+    <Variant title="Group">
+      <SmartRadioGroup :radios="radios" :model-value="selected" />
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+
+const selected = ref("option1")
+const radios = [
+  { label: "Option 1", value: "option1" },
+  { label: "Option 2", value: "option2" },
+  { label: "Option 3", value: "option3" },
+]
+</script>

packages/hoppscotch-ui/src/stories/SlideOver.story.vue

@@ -0,0 +1,15 @@
+<template>
+  <Story title="Slider Over">
+    <SmartSlideOver :show="show" :title="'Title'" @close="show = false">
+      <template #content>
+        <h1>Content</h1>
+      </template>
+    </SmartSlideOver>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue"
+
+const show = ref(true)
+</script>

packages/hoppscotch-ui/src/stories/Spinner.story.vue

@@ -0,0 +1,5 @@
+<template>
+  <Story title="Spinner">
+    <SmartSpinner />
+  </Story>
+</template>

packages/hoppscotch-ui/src/stories/Tab.story.vue

@@ -0,0 +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">
+          <h1>Tab 1 content</h1>
+        </SmartTab>
+        <SmartTab id="tab2" label="Tab 2">
+          <h1>Tab 2 content</h1>
+        </SmartTab>
+      </SmartTabs>
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+
+const selectedTab = ref("tab1")
+</script>

packages/hoppscotch-ui/src/stories/Toggle.story.vue

@@ -0,0 +1,15 @@
+<template>
+  <Story title="Toggle">
+    <SmartToggle :on="on" @change="change"> Turn on </SmartToggle>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+
+const on = ref(true)
+
+const change = () => {
+  alert("changed to: " + on.value)
+}
+</script>

packages/hoppscotch-ui/src/stories/Window.story.vue

@@ -0,0 +1,72 @@
+<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>
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+
+const selectedWindow = ref("window1")
+
+type Tab = {
+  id: string
+  name: string
+  removable: boolean
+}
+
+const tabs = ref<Tab[]>([
+  {
+    id: "1",
+    name: "window1",
+    removable: false,
+  },
+  {
+    id: "2",
+    name: "window2",
+    removable: true,
+  },
+  {
+    id: "3",
+    name: "window3",
+    removable: true,
+  },
+])
+
+const openNewTab = () => {
+  const newTab = {
+    id: Date.now().toString(),
+    name: "New Window",
+    removable: true,
+  }
+  tabs.value = [...tabs.value, { ...newTab }]
+  selectedWindow.value = newTab.id
+}
+
+const removeTab = (tabID: string) => {
+  tabs.value = tabs.value.filter((tab) => tab.id !== tabID)
+}
+
+const sortTabs = (e: { oldIndex: number; newIndex: number }) => {
+  const newTabs = [...tabs.value]
+  newTabs.splice(e.newIndex, 0, newTabs.splice(e.oldIndex, 1)[0])
+  tabs.value = newTabs
+}
+</script>