feat: introducing a new smart input hoppscotch ui component (#3089)

Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>

packages/hoppscotch-sh-admin/src/components.d.ts

@@ -14,6 +14,22 @@ declare module '@vue/runtime-core' {
     AppSidebar: typeof import('./components/app/Sidebar.vue')['default']
     AppToast: typeof import('./components/app/Toast.vue')['default']
     DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default']
+    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
+    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
+    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
+    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
+    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
+    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']
+    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
+    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
+    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
+    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
+    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
+    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
+    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
+    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
+    IconLucideUser: typeof import('~icons/lucide/user')['default']
     TeamsAdd: typeof import('./components/teams/Add.vue')['default']
     TeamsDetails: typeof import('./components/teams/Details.vue')['default']
     TeamsInvite: typeof import('./components/teams/Invite.vue')['default']

packages/hoppscotch-sh-admin/src/components/app/Login.vue

@@ -41,22 +41,14 @@
         class="flex flex-col space-y-4"
         @submit.prevent="signInWithEmail"
       >
-        <div class="flex flex-col">
-          <input
-            id="email"
-            v-model="form.email"
-            class="input floating-input"
-            placeholder=" "
-            type="email"
-            name="email"
-            autocomplete="off"
-            required
-            spellcheck="false"
-            v-focus
-            autofocus
-          />
-          <label for="email"> Email </label>
-        </div>
+        <HoppSmartInput
+          v-model="form.email"
+          type="email"
+          placeholder=" "
+          input-styles="floating-input"
+          label="Email"
+        />
+
         <HoppButtonPrimary
           :loading="signingInWithEmail"
           type="submit"

packages/hoppscotch-sh-admin/src/components/teams/Add.vue

@@ -18,18 +18,8 @@
             @input="(email: string) => getOwnerEmail(email)"
           />
         </div>
-        <div class="flex flex-col">
-          <label for="teamName" class="py-2">{{ t('teams.name') }} </label>
-          <input
-            id="teamName"
-            v-model="teamName"
-            v-focus
-            class="input relative"
-            placeholder=""
-            type="email"
-            autocomplete="off"
-          />
-        </div>
+        <label for="teamName"> {{ t('teams.name') }} </label>
+        <HoppSmartInput v-model="teamName" placeholder="" class="!my-2" />
       </div>
     </template>
     <template #footer>

packages/hoppscotch-sh-admin/src/components/teams/Details.vue

@@ -20,24 +20,26 @@
             '!border-accent': showRenameInput,
           }"
         >
-          <input
-            class="bg-transparent flex-1 p-3 rounded-md !rounded-r-none disabled:select-none border-r-0 disabled:cursor-default disabled:opacity-50"
-            type="text"
+          <HoppSmartInput
             v-model="newTeamName"
+            styles="bg-transparent flex-1 rounded-md !rounded-r-none disabled:select-none border-r-0 disabled:cursor-default disabled:opacity-50"
             placeholder="Team Name"
-            autofocus
             :disabled="!showRenameInput"
-            v-focus
-          />
-          <HoppButtonPrimary
-            class="!rounded-l-none"
-            filled
-            :icon="showRenameInput ? IconSave : IconEdit"
-            :label="
-              showRenameInput ? `${t('teams.rename')}` : `${t('teams.edit')}`
-            "
-            @click="handleNameEdit()"
-          />
+          >
+            <template #button>
+              <HoppButtonPrimary
+                class="!rounded-l-none"
+                filled
+                :icon="showRenameInput ? IconSave : IconEdit"
+                :label="
+                  showRenameInput
+                    ? `${t('teams.rename')}`
+                    : `${t('teams.edit')}`
+                "
+                @click="handleNameEdit()"
+              />
+            </template>
+          </HoppSmartInput>
         </div>
       </div>
 

packages/hoppscotch-sh-admin/src/components/users/InviteModal.vue

@@ -6,19 +6,11 @@
     @close="$emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="inviteUserEmail"
-          v-model="email"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="sendInvite"
-        />
-        <label for="inviteUserEmail">{{ t('users.email_address') }}</label>
-      </div>
+      <HoppSmartInput
+        v-model="email"
+        :label="t('users.email_address')"
+        input-styles="floating-input"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">