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/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>