edvoyui-component-library-test-flight 0.0.170 → 0.0.173

package/src/components/table/EUITable.stories.ts

@@ -0,0 +1,300 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import {
+  EUITable,
+  EUITableCheckbox,
+  EUIPageLimit,
+  EUIStudentPagination,
+  EUIDashboardTable,
+  EUIPagination,
+  UTable,
+  UCheckbox,
+  GrowthTable,
+} from "..";
+import {
+  growthTableData,
+  growthTableHeaders,
+  studentData,
+  studentHeader,
+  tableData,
+  tableHeaders,
+} from "../../data/table";
+
+// Meta configuration for the EUItabs stories
+const meta = {
+  title: "Components/Table",
+  component: EUITable,
+  tags: ["autodocs"],
+  argTypes: {
+    headers: {
+      control: "object",
+      description: "Array of header objects to define table columns",
+      defaultValue: () => [
+        { text: "ID", value: "id", sortable: true, width: 50 },
+        { text: "Name", value: "name", sortable: true },
+        { text: "Age", value: "age", sortable: true },
+        { text: "Grade", value: "grade", sortable: true },
+      ],
+    },
+    items: {
+      control: "object",
+      description: "Array of table row data",
+      defaultValue: () => [
+        { id: 1, name: "John Doe", age: 20, grade: "A" },
+        { id: 2, name: "Jane Smith", age: 22, grade: "B" },
+        { id: 3, name: "Alice Johnson", age: 21, grade: "A" },
+        { id: 4, name: "Robert Brown", age: 23, grade: "C" },
+      ],
+    },
+    checkable: {
+      control: "boolean",
+      description: "Toggle to enable checkboxes for rows",
+    },
+    paginated: {
+      control: "boolean",
+      description: "Toggle pagination for the table",
+    },
+    total: {
+      control: "number",
+      description: "Total number of items for pagination",
+    },
+    perPage: {
+      control: "number",
+      description: "Number of items to show per page",
+    },
+    currentPage: {
+      control: "number",
+      description: "Current page number in paginated view",
+    },
+    search: {
+      control: "text",
+      description: "Search text for filtering rows",
+    },
+    tableExpanded: {
+      control: "boolean",
+      description: "Indicates if the table rows should be expanded by default",
+    },
+    tableHeight: {
+      control: "text",
+      description:
+        "CSS height of the table (e.g., 'h-[calc(100svh-20rem)] max-h-[calc(100svh-20rem)]')",
+    },
+    tableLoading: {
+      control: "boolean",
+      description:
+        "Controls the visibility of the table loader. Set to `true` to show the loading state.",
+    },
+  },
+} satisfies Meta<typeof EUITable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    headers: [
+      { text: "ID", value: "id", sortable: true, width: 50 },
+      { text: "Name", value: "name", sortable: true },
+      { text: "Age", value: "age", sortable: true },
+      { text: "Grade", value: "grade", sortable: true },
+    ],
+    items: [
+      { id: 1, name: "John Doe", age: 20, grade: "A" },
+      { id: 2, name: "Jane Smith", age: 22, grade: "B" },
+      { id: 3, name: "Alice Johnson", age: 21, grade: "A" },
+      { id: 4, name: "Robert Brown", age: 23, grade: "C" },
+    ],
+    paginated: true,
+    perPage: 2,
+    total: 4,
+    currentPage: 1,
+  },
+  render: (args) => ({
+    components: {
+      EUITable,
+      EUIPageLimit,
+      EUIStudentPagination,
+    },
+    setup() {
+      return { args };
+    },
+    template: `<EUITable v-bind="args"></EUITable>`,
+  }),
+};
+
+export const StudentTable: Story = {
+  args: {
+    headers: studentHeader,
+    items: studentData,
+    checkable: true,
+    paginated: true,
+    perPage: 10,
+    total: studentData.length,
+    currentPage: 1,
+  },
+  render: (args) => ({
+    components: {
+      UTable,
+      UCheckbox,
+      EUIPageLimit,
+      EUIStudentPagination,
+    },
+    setup() {
+      return { args };
+    },
+    template: `<UTable v-bind="args">
+                  <template #item.firstName="{ row, rowIndex }">
+                   <div class="space-y-0.5">
+                    <div class="block text-sm font-medium leading-snug">
+                      {{row?.firstName + " " + row?.lastName }}
+                    </div>
+                    <div class="text-xs font-medium text-gray-900 leading-[normal]">
+                      {{ row?.referenceId }}
+                    </div>
+                  </div>
+                  </template>
+                  <template #item.activeUser="{ row, rowIndex }">
+                    {{ row?.activeUser?.user?.firstName }}
+                    {{ row?.activeUser?.user?.lastName }}
+                  </template>
+              </UTable>`,
+  }),
+};
+
+export const DashboardTable: Story = {
+  args: {
+    headers: tableHeaders,
+    items: tableData,
+    checkable: true,
+    paginated: true,
+    perPage: 5,
+    total: tableData.length,
+    currentPage: 1,
+  },
+  render: (args) => ({
+    components: {
+      EUIDashboardTable,
+      EUITableCheckbox,
+      EUIPageLimit,
+      EUIPagination,
+    },
+    setup() {
+      return { args };
+    },
+    template: `<EUIDashboardTable v-bind="args">
+                  <template #item.introducer_details="{ row, rowIndex }">
+                   <div class="flex flex-row items-center gap-2">
+                    <div
+                      class="flex items-center justify-center text-sm font-bold text-gray-900 bg-gray-100 rounded-full size-8"
+                    >
+                      <img
+                        :src="row?.introducer_details?.url"
+                        class="size-8 rounded-3xl"
+                        alt=""
+                      />
+                    </div>
+                    <div class="text-sm">{{ row?.introducer_details?.name }}</div>
+                  </div>
+                </template>
+          </EUIDashboardTable>`,
+  }),
+};
+
+export const NormalTable: Story = {
+  args: {
+    headers: studentHeader,
+    items: studentData,
+    checkable: true,
+    paginated: true,
+    perPage: 10,
+    total: studentData.length,
+    currentPage: 1,
+  },
+  render: (args) => ({
+    components: {
+      EUITable,
+      EUITableCheckbox,
+      EUIPageLimit,
+      EUIStudentPagination,
+    },
+    setup() {
+      return { args };
+    },
+    template: `<EUITable v-bind="args">
+                  <template #item.firstName="{ row, rowIndex }">
+                   <div class="space-y-0.5">
+                    <div class="block text-sm font-medium leading-snug">
+                      {{row?.firstName + " " + row?.lastName }}
+                    </div>
+                    <div class="text-xs font-medium text-gray-900 leading-[normal]">
+                      {{ row?.referenceId }}
+                    </div>
+                  </div>
+                  </template>
+                  <template #item.activeUser="{ row, rowIndex }">
+                    {{ row?.activeUser?.user?.firstName }}
+                    {{ row?.activeUser?.user?.lastName }}
+                  </template>
+              </EUITable>`,
+  }),
+};
+
+export const DashboardGrowthTable: Story = {
+  args: {
+    checkable: true,
+    paginated: true,
+    perPage: 10,
+    total: studentData.length,
+    currentPage: 1,
+    headers: growthTableHeaders,
+    items: growthTableData,
+  },
+  render: (args) => ({
+    components: {
+      GrowthTable,
+      EUITableCheckbox,
+      EUIPageLimit,
+      EUIPagination,
+    },
+    setup() {
+      return { args };
+    },
+    template: `<GrowthTable v-bind="args">
+                  <template #item.firstName="{ row, rowIndex }">
+                   <div class="space-y-0.5">
+                    <div class="block text-sm font-medium leading-snug">
+                      {{row?.firstName + " " + row?.lastName }}
+                    </div>
+                    <div class="text-xs font-medium text-gray-900 leading-[normal]">
+                      {{ row?.referenceId }}
+                    </div>
+                  </div>
+                  </template>
+
+                  <template #item.active_allagents="{ row, rowIndex }">
+        <div class="flex flex-row items-center gap-4 justify-between bg-violet-50 pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.active_allagents" >{{ data.value || '-' }}</span>
+        </div>
+      </template>
+      <template #item.active_active_allagents="{ row, rowIndex }">
+        <div class="flex flex-row items-center gap-4 justify-between bg-violet-50 pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.active_active_allagents">{{ data.value || '-' }}</span>
+        </div>
+      </template>
+      <template #item.active_dormant="{ row, rowIndex }">
+        <div class="flex flex-row items-center gap-4 justify-between bg-violet-50 pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.active_dormant" >{{ data.value || '-' }}</span>
+        </div>
+      </template>
+      <template #item.totalDepositCount="{ row, rowIndex }">
+        <div class="flex flex-row items-center gap-4 justify-between bg-violet-50 pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.totalDepositCount" >{{ data.value || '-' }}</span>
+        </div>
+      </template>
+      <template #item.totalStudentCount="{ row, rowIndex }">
+        <div class="flex flex-row items-center gap-4 justify-between bg-violet-50 pl-2 pr-10 rounded-[0.625rem] py-2 h-full">
+           <span v-for="(data, idx) in row?.totalStudentCount">{{ data.value || '-' }}</span>
+        </div>
+      </template>
+    </GrowthTable>`,
+  }),
+};