@a2v2ai/uikit 0.0.38 → 0.0.39

package/DataTable/DataTable.stories.tsx

@@ -1,400 +0,0 @@
-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

@@ -1,207 +0,0 @@
-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 }