@emara/ui 1.1.0

package/components/ui/data-table.stories.tsx

@@ -0,0 +1,227 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useMemo, useState } from "react";
+import type { ColumnDef } from "@tanstack/react-table";
+
+import { Badge } from "./badge";
+import { Button } from "./button";
+import { DataTable } from "./data-table";
+
+interface Charge {
+  id: string;
+  customer: string;
+  amount: number;
+  status: "paid" | "pending" | "failed" | "refunded";
+  date: string;
+}
+
+const SAMPLE: Charge[] = [
+  { id: "ch_001", customer: "Alice Lavoie", amount: 1250.0, status: "paid", date: "2026-04-12" },
+  { id: "ch_002", customer: "Bilal Othmani", amount: 49.99, status: "pending", date: "2026-04-13" },
+  { id: "ch_003", customer: "Catherine Lee", amount: 320.0, status: "failed", date: "2026-04-14" },
+  { id: "ch_004", customer: "Dan Park", amount: 89.5, status: "paid", date: "2026-04-14" },
+  { id: "ch_005", customer: "Elena Costa", amount: 1500.0, status: "refunded", date: "2026-04-15" },
+  { id: "ch_006", customer: "Fadi Younis", amount: 220.0, status: "paid", date: "2026-04-16" },
+  { id: "ch_007", customer: "Gloria Reyes", amount: 75.0, status: "pending", date: "2026-04-17" },
+  { id: "ch_008", customer: "Hassan Demir", amount: 425.5, status: "paid", date: "2026-04-18" },
+  { id: "ch_009", customer: "Iris Aoki", amount: 1100.0, status: "failed", date: "2026-04-19" },
+  { id: "ch_010", customer: "Joel Munoz", amount: 360.0, status: "paid", date: "2026-04-20" },
+  { id: "ch_011", customer: "Karim Ouali", amount: 95.0, status: "paid", date: "2026-04-21" },
+  { id: "ch_012", customer: "Lina Sato", amount: 1820.0, status: "refunded", date: "2026-04-22" },
+];
+
+function StatusBadge({ status }: { status: Charge["status"] }) {
+  const v =
+    status === "paid"
+      ? "success"
+      : status === "pending"
+        ? "warning"
+        : status === "failed"
+          ? "destructive"
+          : "secondary";
+  return (
+    <Badge size="sm" variant={v}>
+      {status}
+    </Badge>
+  );
+}
+
+function buildColumns(): ColumnDef<Charge, unknown>[] {
+  return [
+    {
+      accessorKey: "id",
+      header: "Charge",
+      meta: { width: 120 },
+    },
+    {
+      accessorKey: "customer",
+      header: "Customer",
+    },
+    {
+      accessorKey: "amount",
+      header: "Amount",
+      cell: ({ getValue }) =>
+        `$${(getValue<number>() ?? 0).toLocaleString(undefined, {
+          minimumFractionDigits: 2,
+        })}`,
+      meta: { align: "end" },
+    },
+    {
+      accessorKey: "status",
+      header: "Status",
+      cell: ({ getValue }) => <StatusBadge status={getValue<Charge["status"]>()} />,
+    },
+    {
+      accessorKey: "date",
+      header: "Date",
+      meta: { align: "end" },
+    },
+  ];
+}
+
+const meta: Meta<typeof DataTable<Charge>> = {
+  title: "Data/DataTable",
+  parameters: { layout: "padded" },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Static: Story = {
+  render: () => <DataTable<Charge> data={SAMPLE} columns={buildColumns()} />,
+};
+
+export const Sortable: Story = {
+  render: () => (
+    <DataTable<Charge>
+      data={SAMPLE}
+      columns={buildColumns()}
+      enableSorting
+      enableMultiSort
+      hoverable
+    />
+  ),
+};
+
+export const GlobalSearch: Story = {
+  render: () => (
+    <DataTable<Charge>
+      data={SAMPLE}
+      columns={buildColumns()}
+      enableSorting
+      enableGlobalSearch
+      hoverable
+    />
+  ),
+};
+
+export const Selection: Story = {
+  render: () => {
+    function Demo() {
+      const [selected, setSelected] = useState<Charge[]>([]);
+      return (
+        <div className="space-y-3">
+          <div className="text-sm text-muted-foreground">
+            {selected.length} selected
+          </div>
+          <DataTable<Charge>
+            data={SAMPLE}
+            columns={buildColumns()}
+            enableSorting
+            enableSelection="multi"
+            onSelectionChange={setSelected}
+            getRowId={(row) => row.id}
+            hoverable
+          />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const ColumnVisibility: Story = {
+  render: () => (
+    <DataTable<Charge>
+      data={SAMPLE}
+      columns={buildColumns()}
+      enableSorting
+      enableGlobalSearch
+      enableColumnVisibility
+      hoverable
+    />
+  ),
+};
+
+export const WithPagination: Story = {
+  render: () => {
+    function Demo() {
+      const data = useMemo(
+        () =>
+          Array.from({ length: 153 }, (_, i) => ({
+            ...SAMPLE[i % SAMPLE.length]!,
+            id: `ch_${String(i + 1).padStart(4, "0")}`,
+          })),
+        [],
+      );
+      return (
+        <DataTable<Charge>
+          data={data}
+          columns={buildColumns()}
+          enableSorting
+          enableGlobalSearch
+          enableColumnVisibility
+          enablePagination
+          pageSize={10}
+          hoverable
+        />
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const RowExpand: Story = {
+  render: () => (
+    <DataTable<Charge>
+      data={SAMPLE.slice(0, 5)}
+      columns={buildColumns()}
+      enableRowExpand
+      renderExpandedRow={(row) => (
+        <div className="text-sm">
+          <div className="font-medium">Charge details</div>
+          <pre className="mt-2 rounded bg-background p-2 text-xs">
+            {JSON.stringify(row, null, 2)}
+          </pre>
+        </div>
+      )}
+      hoverable
+    />
+  ),
+};
+
+export const Loading: Story = {
+  render: () => (
+    <DataTable<Charge> data={[]} columns={buildColumns()} loading pageSize={5} hoverable />
+  ),
+};
+
+export const Empty: Story = {
+  render: () => <DataTable<Charge> data={[]} columns={buildColumns()} />,
+};
+
+export const ErrorState: Story = {
+  render: () => (
+    <DataTable<Charge>
+      data={[]}
+      columns={buildColumns()}
+      error={
+        <div className="text-sm text-destructive">
+          Failed to load charges.{" "}
+          <Button variant="link" className="px-0">
+            Retry
+          </Button>
+        </div>
+      }
+    />
+  ),
+};