edvoyui-component-library-test-flight 0.0.184 → 0.0.186

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

@@ -1,300 +0,0 @@
-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>`,
-  }),
-};