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/components/button/Primary.vue

@@ -0,0 +1,101 @@
+<template>
+  <SmartLink
+    :to="to"
+    :blank="blank"
+    class="relative inline-flex items-center justify-center py-2 font-bold transition focus:outline-none focus-visible:bg-accentDark"
+    :class="[
+      color
+        ? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus-visible:(text-${color}-900 bg-${color}-300)`
+        : `text-accentContrast bg-accent hover:bg-accentDark focus-visible:bg-accentDark`,
+      label ? 'px-4' : 'px-2',
+      rounded ? 'rounded-full' : 'rounded',
+      { 'opacity-75 cursor-not-allowed': disabled },
+      { 'pointer-events-none': loading },
+      { 'px-6 py-4 text-lg': large },
+      { 'shadow-lg hover:shadow-xl': shadow },
+      {
+        'text-white bg-gradient-to-tr from-gradientFrom via-gradientVia to-gradientTo':
+          gradient,
+      },
+      {
+        'border border-accent hover:border-accentDark focus-visible:border-accentDark':
+          outline,
+      },
+    ]"
+    :disabled="disabled"
+    :tabindex="loading ? '-1' : '0'"
+    role="button"
+  >
+    <span
+      class="inline-flex items-center justify-center whitespace-nowrap"
+      :class="[{ 'flex-row-reverse': reverse }, { 'opacity-50': loading }]"
+    >
+      <component
+        :is="icon"
+        v-if="icon"
+        class="svg-icons"
+        :class="[
+          { '!text-2xl': large },
+          label ? (reverse ? 'ml-2' : 'mr-2') : '',
+        ]"
+      />
+      {{ label }}
+      <div v-if="shortcut.length" class="<sm:hidden">
+        <kbd
+          v-for="(key, index) in shortcut"
+          :key="`key-${index}`"
+          class="shortcut-key !bg-accentDark !border-accentLight"
+        >
+          {{ key }}
+        </kbd>
+      </div>
+    </span>
+    <span
+      v-if="loading"
+      class="absolute inset-0 flex items-center justify-center"
+    >
+      <SmartSpinner />
+    </span>
+  </SmartLink>
+</template>
+
+<script setup lang="ts">
+import type { Component } from "vue"
+
+interface Props {
+  to?: string
+  exact?: boolean
+  blank?: boolean
+  label?: string
+  icon?: object | null | Component // It is a component!
+  svg?: object | null | Component // It is a component!
+  color?: string
+  disabled?: boolean
+  loading?: boolean
+  large?: boolean
+  shadow?: boolean
+  reverse?: boolean
+  rounded?: boolean
+  gradient?: boolean
+  outline?: boolean
+  shortcut?: string[]
+}
+withDefaults(defineProps<Props>(), {
+  to: "",
+  exact: true,
+  blank: false,
+  label: "",
+  icon: null,
+  svg: null,
+  color: "",
+  disabled: false,
+  loading: false,
+  large: false,
+  shadow: false,
+  reverse: false,
+  rounded: false,
+  gradient: false,
+  outline: false,
+  shortcut: () => [],
+})
+</script>

packages/hoppscotch-ui/src/components/button/Secondary.vue

@@ -0,0 +1,96 @@
+<template>
+  <SmartLink
+    :to="to"
+    :exact="exact"
+    :blank="blank"
+    class="inline-flex items-center justify-center py-2 font-semibold transition whitespace-nowrap focus:outline-none"
+    :class="[
+      color
+        ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
+        : 'text-secondary hover:text-secondaryDark focus-visible:text-secondaryDark',
+      { 'pointer-events-none': loading },
+      label ? 'rounded px-4' : 'px-2',
+      { 'rounded-full': rounded },
+      { 'opacity-75 cursor-not-allowed': disabled },
+      { 'flex-row-reverse': reverse },
+      { 'px-6 py-4 text-lg': large },
+      {
+        'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
+          outline,
+      },
+      {
+        'bg-primaryLight hover:bg-primaryDark focus-visible:bg-primaryDark':
+          filled,
+      },
+    ]"
+    :disabled="disabled"
+    :tabindex="loading ? '-1' : '0'"
+    role="button"
+  >
+    <span
+      v-if="!loading"
+      class="inline-flex items-center justify-center whitespace-nowrap"
+      :class="{ 'flex-row-reverse': reverse }"
+    >
+      <component
+        :is="icon"
+        v-if="icon"
+        class="svg-icons"
+        :class="[
+          { '!text-2xl': large },
+          label ? (reverse ? 'ml-2' : 'mr-2') : '',
+        ]"
+      />
+      {{ label }}
+      <div v-if="shortcut.length" class="<sm:hidden">
+        <kbd
+          v-for="(key, index) in shortcut"
+          :key="`key-${index}`"
+          class="shortcut-key !bg-inherit"
+        >
+          {{ key }}
+        </kbd>
+      </div>
+    </span>
+    <SmartSpinner v-else />
+  </SmartLink>
+</template>
+
+<script setup lang="ts">
+import type { Component } from "vue"
+
+interface Props {
+  to?: string
+  exact?: boolean
+  blank?: boolean
+  label?: string
+  icon?: object | null | Component // It is a component!
+  svg?: object | null | Component // It is a component!
+  color?: string
+  disabled?: boolean
+  loading?: boolean
+  reverse?: boolean
+  rounded?: boolean
+  large?: boolean
+  outline?: boolean
+  shortcut?: string[]
+  filled?: boolean
+}
+withDefaults(defineProps<Props>(), {
+  to: "",
+  exact: true,
+  blank: false,
+  label: "",
+  icon: null,
+  svg: null,
+  color: "",
+  disabled: false,
+  loading: false,
+  reverse: false,
+  rounded: false,
+  large: false,
+  outline: false,
+  shortcut: () => [],
+  filled: false,
+})
+</script>