@a2v2ai/uikit 0.0.37 → 0.0.38

package/DataTable/DataTable.stories.tsx

@@ -0,0 +1,400 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { DataTable, type DataTableColumn } from "./DataTable"
+import { Badge } from "../Badge/Badge"
+
+interface Invoice {
+  id: string
+  invoice: string
+  paymentStatus: "Pending" | "Processing" | "Success" | "Failed"
+  totalAmount: string
+  paymentMethod: string
+}
+
+const invoices: Invoice[] = [
+  {
+    id: "1",
+    invoice: "INV001",
+    paymentStatus: "Success",
+    totalAmount: "$250.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    id: "2",
+    invoice: "INV002",
+    paymentStatus: "Pending",
+    totalAmount: "$150.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    id: "3",
+    invoice: "INV003",
+    paymentStatus: "Processing",
+    totalAmount: "$350.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    id: "4",
+    invoice: "INV004",
+    paymentStatus: "Failed",
+    totalAmount: "$450.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    id: "5",
+    invoice: "INV005",
+    paymentStatus: "Success",
+    totalAmount: "$550.00",
+    paymentMethod: "PayPal",
+  },
+]
+
+const meta: Meta<typeof DataTable> = {
+  title: "Components/DataTable",
+  component: DataTable,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof DataTable<Invoice>>
+
+const basicColumns: DataTableColumn<Invoice>[] = [
+  {
+    key: "invoice",
+    title: "Invoice",
+    dataIndex: "invoice",
+  },
+  {
+    key: "status",
+    title: "Status",
+    dataIndex: "paymentStatus",
+  },
+  {
+    key: "method",
+    title: "Method",
+    dataIndex: "paymentMethod",
+  },
+  {
+    key: "amount",
+    title: "Amount",
+    dataIndex: "totalAmount",
+  },
+]
+
+export const Default: Story = {
+  render: () => (
+    <DataTable columns={basicColumns} dataSource={invoices} rowKey="id" />
+  ),
+}
+
+const columnsWithRender: DataTableColumn<Invoice>[] = [
+  {
+    key: "invoice",
+    title: "Invoice",
+    dataIndex: "invoice",
+    render: (value) => <span className="font-medium">{value as string}</span>,
+  },
+  {
+    key: "status",
+    title: "Status",
+    dataIndex: "paymentStatus",
+    render: (value) => {
+      const status = value as Invoice["paymentStatus"]
+      const variant =
+        status === "Success"
+          ? "success"
+          : status === "Failed"
+            ? "destructive"
+            : status === "Processing"
+              ? "warning"
+              : "secondary"
+      return <Badge variant={variant}>{status}</Badge>
+    },
+  },
+  {
+    key: "method",
+    title: "Method",
+    dataIndex: "paymentMethod",
+    render: (value) => (
+      <span className="text-grey-600">{value as string}</span>
+    ),
+  },
+  {
+    key: "amount",
+    title: "Amount",
+    dataIndex: "totalAmount",
+    render: (value) => (
+      <span className="font-semibold text-main-900">{value as string}</span>
+    ),
+  },
+]
+
+export const WithCustomRenderers: Story = {
+  render: () => (
+    <DataTable
+      columns={columnsWithRender}
+      dataSource={invoices}
+      rowKey="id"
+    />
+  ),
+}
+
+const columnsWithWidth: DataTableColumn<Invoice>[] = [
+  {
+    key: "invoice",
+    title: "Invoice",
+    dataIndex: "invoice",
+    width: 100,
+  },
+  {
+    key: "status",
+    title: "Status",
+    dataIndex: "paymentStatus",
+    width: 120,
+  },
+  {
+    key: "method",
+    title: "Payment Method",
+    dataIndex: "paymentMethod",
+    width: 200,
+  },
+  {
+    key: "amount",
+    title: "Total Amount",
+    dataIndex: "totalAmount",
+    width: 150,
+  },
+]
+
+export const WithColumnWidths: Story = {
+  render: () => (
+    <DataTable columns={columnsWithWidth} dataSource={invoices} rowKey="id" />
+  ),
+}
+
+const columnsWithTitleRender: DataTableColumn<Invoice>[] = [
+  {
+    key: "invoice",
+    title: "Invoice",
+    dataIndex: "invoice",
+    titleRender: () => (
+      <span className="flex items-center gap-2">
+        <span>📄</span>
+        <span>Invoice</span>
+      </span>
+    ),
+  },
+  {
+    key: "status",
+    title: "Status",
+    dataIndex: "paymentStatus",
+    titleRender: () => (
+      <span className="flex items-center gap-2">
+        <span>🔄</span>
+        <span>Status</span>
+      </span>
+    ),
+    render: (value) => {
+      const status = value as Invoice["paymentStatus"]
+      const variant =
+        status === "Success"
+          ? "success"
+          : status === "Failed"
+            ? "destructive"
+            : status === "Processing"
+              ? "warning"
+              : "secondary"
+      return <Badge variant={variant}>{status}</Badge>
+    },
+  },
+  {
+    key: "method",
+    title: "Method",
+    dataIndex: "paymentMethod",
+    titleRender: () => (
+      <span className="flex items-center gap-2">
+        <span>💳</span>
+        <span>Method</span>
+      </span>
+    ),
+  },
+  {
+    key: "amount",
+    title: "Amount",
+    dataIndex: "totalAmount",
+    titleRender: () => (
+      <span className="flex items-center gap-2">
+        <span>💰</span>
+        <span>Amount</span>
+      </span>
+    ),
+  },
+]
+
+export const WithCustomTitleRender: Story = {
+  render: () => (
+    <DataTable
+      columns={columnsWithTitleRender}
+      dataSource={invoices}
+      rowKey="id"
+    />
+  ),
+}
+
+export const WithRowKeyFunction: Story = {
+  render: () => (
+    <DataTable
+      columns={basicColumns}
+      dataSource={invoices}
+      rowKey={(record) => `invoice-${record.id}`}
+    />
+  ),
+}
+
+export const EmptyState: Story = {
+  render: () => (
+    <DataTable columns={basicColumns} dataSource={[]} rowKey="id" />
+  ),
+}
+
+// Generate more invoices for pagination demo
+const manyInvoices: Invoice[] = Array.from({ length: 25 }, (_, i) => ({
+  id: String(i + 1),
+  invoice: `INV${String(i + 1).padStart(3, "0")}`,
+  paymentStatus: (["Success", "Pending", "Processing", "Failed"] as const)[i % 4],
+  totalAmount: `$${(100 + i * 50).toFixed(2)}`,
+  paymentMethod: (["Credit Card", "PayPal", "Bank Transfer"] as const)[i % 3],
+}))
+
+const WithPaginationComponent = () => {
+  const [currentPage, setCurrentPage] = useState(1)
+  const pageSize = 5
+
+  const paginatedData = manyInvoices.slice(
+    (currentPage - 1) * pageSize,
+    currentPage * pageSize
+  )
+
+  return (
+    <DataTable
+      columns={columnsWithRender}
+      dataSource={paginatedData}
+      rowKey="id"
+      pagination={{
+        current: currentPage,
+        pageSize,
+        total: manyInvoices.length,
+        onChange: setCurrentPage,
+      }}
+    />
+  )
+}
+
+export const WithPagination: Story = {
+  render: () => <WithPaginationComponent />,
+}
+
+const WithManyPagesComponent = () => {
+  const [currentPage, setCurrentPage] = useState(1)
+  const pageSize = 2
+
+  const paginatedData = manyInvoices.slice(
+    (currentPage - 1) * pageSize,
+    currentPage * pageSize
+  )
+
+  return (
+    <DataTable
+      columns={basicColumns}
+      dataSource={paginatedData}
+      rowKey="id"
+      pagination={{
+        current: currentPage,
+        pageSize,
+        total: manyInvoices.length,
+        onChange: setCurrentPage,
+      }}
+    />
+  )
+}
+
+export const WithManyPages: Story = {
+  render: () => <WithManyPagesComponent />,
+}
+
+export const WithScroll: Story = {
+  render: () => (
+    <DataTable
+      columns={columnsWithRender}
+      dataSource={manyInvoices}
+      rowKey="id"
+      scroll={{ y: 300 }}
+    />
+  ),
+}
+
+export const WithScrollAndPagination: Story = {
+  render: () => {
+    const [currentPage, setCurrentPage] = useState(1)
+    const pageSize = 10
+
+    const paginatedData = manyInvoices.slice(
+      (currentPage - 1) * pageSize,
+      currentPage * pageSize
+    )
+
+    return (
+      <DataTable
+        columns={columnsWithRender}
+        dataSource={paginatedData}
+        rowKey="id"
+        scroll={{ y: 250 }}
+        pagination={{
+          current: currentPage,
+          pageSize,
+          total: manyInvoices.length,
+          onChange: setCurrentPage,
+        }}
+      />
+    )
+  },
+}
+
+export const Loading: Story = {
+  render: () => (
+    <DataTable
+      columns={basicColumns}
+      dataSource={[]}
+      rowKey="id"
+      loading
+    />
+  ),
+}
+
+export const LoadingWithCustomRows: Story = {
+  render: () => (
+    <DataTable
+      columns={columnsWithWidth}
+      dataSource={[]}
+      rowKey="id"
+      loading
+      loadingRows={10}
+    />
+  ),
+}
+
+export const LoadingWithScroll: Story = {
+  render: () => (
+    <DataTable
+      columns={basicColumns}
+      dataSource={[]}
+      rowKey="id"
+      loading
+      loadingRows={8}
+      scroll={{ y: 300 }}
+    />
+  ),
+}

package/DataTable/DataTable.tsx

@@ -0,0 +1,207 @@
+import type { ReactNode } from "react"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../Table/Table"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "../Pagination/Pagination"
+import { Skeleton } from "../Skeleton/Skeleton"
+
+interface DataTableColumn<T> {
+  key: string
+  title: string
+  titleRender?: () => ReactNode
+  dataIndex?: keyof T
+  width?: string | number
+  render?: (value: unknown, record: T, index: number) => ReactNode
+  className?: string
+}
+
+interface DataTablePagination {
+  current: number
+  pageSize: number
+  total: number
+  onChange: (page: number) => void
+}
+
+interface DataTableScroll {
+  y?: number | string
+}
+
+interface DataTableProps<T extends object> {
+  columns: DataTableColumn<T>[]
+  dataSource: T[]
+  rowKey: keyof T | ((record: T) => string)
+  className?: string
+  pagination?: DataTablePagination
+  scroll?: DataTableScroll
+  loading?: boolean
+  loadingRows?: number
+}
+
+const getPageNumbers = (current: number, totalPages: number): (number | "ellipsis")[] => {
+  const pages: (number | "ellipsis")[] = []
+
+  if (totalPages <= 7) {
+    for (let i = 1; i <= totalPages; i++) {
+      pages.push(i)
+    }
+    return pages
+  }
+
+  // Always show first page
+  pages.push(1)
+
+  if (current <= 3) {
+    // Near the start
+    pages.push(2, 3, 4, "ellipsis", totalPages)
+  } else if (current >= totalPages - 2) {
+    // Near the end
+    pages.push("ellipsis", totalPages - 3, totalPages - 2, totalPages - 1, totalPages)
+  } else {
+    // In the middle
+    pages.push("ellipsis", current - 1, current, current + 1, "ellipsis", totalPages)
+  }
+
+  return pages
+}
+
+const DataTable = <T extends object>({
+  columns,
+  dataSource,
+  rowKey,
+  className,
+  pagination,
+  scroll,
+  loading,
+  loadingRows = 5,
+}: DataTableProps<T>) => {
+  const getRowKey = (record: T): string => {
+    if (typeof rowKey === "function") {
+      return rowKey(record)
+    }
+    return String(record[rowKey])
+  }
+
+  const getCellValue = (
+    record: T,
+    column: DataTableColumn<T>,
+    index: number
+  ): ReactNode => {
+    const value = column.dataIndex ? record[column.dataIndex] : undefined
+    if (column.render) {
+      return column.render(value, record, index)
+    }
+    return value as ReactNode
+  }
+
+  const totalPages = pagination ? Math.ceil(pagination.total / pagination.pageSize) : 0
+  const pageNumbers = pagination ? getPageNumbers(pagination.current, totalPages) : []
+
+  const tableContent = (
+    <Table className={className}>
+      <TableHeader className={scroll?.y ? "sticky top-0 z-10" : undefined}>
+        <TableRow>
+          {columns.map((column) => (
+            <TableHead
+              key={column.key}
+              className={column.className}
+              style={{ width: column.width }}
+            >
+              {column.titleRender ? column.titleRender() : column.title}
+            </TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {loading
+          ? Array.from({ length: loadingRows }).map((_, rowIndex) => (
+              <TableRow key={`skeleton-${rowIndex}`}>
+                {columns.map((column) => (
+                  <TableCell key={column.key}>
+                    <Skeleton className="h-4 w-full" />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          : dataSource.map((record, index) => (
+              <TableRow key={getRowKey(record)}>
+                {columns.map((column) => (
+                  <TableCell key={column.key}>
+                    {getCellValue(record, column, index)}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+      </TableBody>
+    </Table>
+  )
+
+  return (
+    <div className="w-full">
+      {scroll?.y ? (
+        <div
+          className="relative w-full overflow-auto"
+          style={{ maxHeight: scroll.y }}
+        >
+          {tableContent}
+        </div>
+      ) : (
+        tableContent
+      )}
+
+      {pagination && totalPages > 1 && (
+        <div className="mt-4">
+          <Pagination>
+            <PaginationContent>
+              <PaginationItem>
+                <PaginationPrevious
+                  disabled={pagination.current === 1}
+                  onClick={() => pagination.onChange(pagination.current - 1)}
+                />
+              </PaginationItem>
+
+              {pageNumbers.map((page, index) => (
+                <PaginationItem key={index}>
+                  {page === "ellipsis" ? (
+                    <PaginationEllipsis />
+                  ) : (
+                    <PaginationLink
+                      isActive={page === pagination.current}
+                      onClick={() => pagination.onChange(page)}
+                    >
+                      {page}
+                    </PaginationLink>
+                  )}
+                </PaginationItem>
+              ))}
+
+              <PaginationItem>
+                <PaginationNext
+                  disabled={pagination.current === totalPages}
+                  onClick={() => pagination.onChange(pagination.current + 1)}
+                />
+              </PaginationItem>
+            </PaginationContent>
+          </Pagination>
+        </div>
+      )}
+    </div>
+  )
+}
+
+DataTable.displayName = "DataTable"
+
+export { DataTable }
+export type { DataTableColumn, DataTableProps, DataTablePagination, DataTableScroll }