feat: introduced table component in storybook

packages/hoppscotch-sh-admin/src/pages/teams/index.vue

@@ -193,7 +193,8 @@ const createTeam = async (newTeamName: string, ownerEmail: string) => {
 
 // Go To Individual Team Details Page
 const router = useRouter();
-const goToTeamDetails = (team: any) => router.push('/teams/' + team.id);
+const goToTeamDetails = (team: { id: string }) =>
+  router.push('/teams/' + team.id);
 
 // Reload Teams Page when routed back to the teams page
 const route = useRoute();
@@ -207,7 +208,7 @@ const teamDeletion = useMutation(RemoveTeamDocument);
 const confirmDeletion = ref(false);
 const deleteTeamID = ref<string | null>(null);
 
-const deleteTeam = (team: any) => {
+const deleteTeam = (team: { id: string }) => {
   confirmDeletion.value = true;
   deleteTeamID.value = team.id;
 };

packages/hoppscotch-sh-admin/src/pages/users/index.vue

@@ -38,7 +38,7 @@
           :headings="headings"
           @goToDetails="goToUserDetails"
           :badge-name="t('users.admin')"
-          :badge-row-index="adminUsersIndexes"
+          :badge-row-indices="adminUsersIndices"
           badge-col-name="name"
           :subtitles="subtitles"
         >
@@ -195,13 +195,12 @@ const isUserAdmin = (
 };
 
 // Returns index of all the admin users
-const adminUsersIndexes = computed(() =>
+const adminUsersIndices = computed(() => {
-  usersList.value.map((user, index) => {
+  const indices = [];
-    if (user.isAdmin) {
+  for (let index = 0; index < usersList.value.length; index++)
-      return index;
+    if (usersList.value[index].isAdmin) indices.push(index);
-    }
+  return indices;
-  })
+});
-);
 
 // Returns created time of all the users
 const createdTime = computed(() =>
@@ -248,7 +247,8 @@ const sendInvite = async (email: string) => {
 // Go to Individual User Details Page
 const route = useRoute();
 const router = useRouter();
-const goToUserDetails = (user: any) => router.push('/users/' + user.uid);
+const goToUserDetails = (user: { uid: string }) =>
+  router.push('/users/' + user.uid);
 
 watch(
   () => route.params.id,
@@ -284,7 +284,7 @@ const userToAdmin = useMutation(MakeUserAdminDocument);
 const confirmUserToAdmin = ref(false);
 const userToAdminUID = ref<string | null>(null);
 
-const makeUserAdmin = (user: any) => {
+const makeUserAdmin = (user: { uid: string }) => {
   confirmUserToAdmin.value = true;
   userToAdminUID.value = user.uid;
 };
@@ -318,12 +318,12 @@ const adminToUser = useMutation(RemoveUserAsAdminDocument);
 const confirmAdminToUser = ref(false);
 const adminToUserUID = ref<string | null>(null);
 
-const makeAdminToUser = (user: any) => {
+const makeAdminToUser = (user: { uid: string }) => {
   confirmAdminToUser.value = true;
   adminToUserUID.value = user.uid;
 };
 
-const deleteUser = (user: any) => {
+const deleteUser = (user: { uid: string }) => {
   confirmDeletion.value = true;
   deleteUserUID.value = user.uid;
 };

packages/hoppscotch-ui/src/components/smart/Table.vue

@@ -16,7 +16,7 @@
           v-for="(item, rowIndex) in list"
           :key="rowIndex"
           class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
-          :class="xBorder ? 'divide-x divide-divider' : ''"
+          :class="yBorder ? 'divide-x divide-divider' : ''"
         >
           <td
             v-for="(data, colIndex) in item"
@@ -30,7 +30,7 @@
               <div
                 v-if="
                   colIndex.toString() === badgeColName &&
-                  badgeRowIndex.includes(rowIndex)
+                  badgeRowIndices?.includes(rowIndex)
                 "
               >
                 <div class="flex flex-col truncate">
@@ -87,27 +87,37 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup generic="Item extends Record<string, unknown>">
 import { computed } from "vue"
 
 const props = defineProps<{
-  xBorder: boolean
+  /** Whether to show the vertical border between columns */
-  list: Record<string, unknown>[]
+  yBorder?: boolean
+  /**  The list of items to be displayed in the table */
+  list: Item[]
+  /** The headings of the table */
   headings: string[]
-  cellStyles: string
+  /** The styles to be applied to the table cells */
-  badgeName: string
+  cellStyles?: string
-  badgeRowIndex: (number | undefined)[]
+  /** The name of the badge */
-  badgeColName: string
+  badgeName?: string
-  subtitles: [
+  /** The indices of the rows that needs to have a badge */
+  badgeRowIndices?: (number | undefined)[]
+  /** The index of the column that needs to have a badge */
+  badgeColName?: string
+  /** The subtitles to be displayed for the columns */
+  subtitles?: [
     {
+      /** The name of the column that needs to have a subtitle */
       colName: string
+      /** The subtitle to be displayed for the column */
       subtitle: string | string[]
     }
   ]
 }>()
 
 defineEmits<{
-  (event: "goToDetails", uid: string): void
+  (event: "goToDetails", item: Item): void
 }>()
 
 // Returns all the columns that needs to have a subtitle

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

@@ -0,0 +1,32 @@
+<template>
+  <Story title="Table">
+    <Variant title="Single">
+      <HoppSmartTable
+        cell-styles="px-6 py-2"
+        :list="list"
+        :headings="headings"
+      />
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { HoppSmartTable } from "../components/smart"
+
+const headings = ["UID", "Name", "Email", "Role"]
+
+const list = [
+  {
+    uid: "123455",
+    name: "Joel",
+    email: "joel@gmail.com",
+    role: "Frontend Engineer",
+  },
+  {
+    uid: "123456",
+    name: "Anwar",
+    email: "anwar@gmail.com",
+    role: "Frontend Engineer",
+  },
+]
+</script>