@wealthx/shadcn 0.0.2 → 1.0.0

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

@@ -0,0 +1,490 @@
+"use client"
+
+/**
+ * DataTable — WealthX Design System
+ *
+ * A headless, composable data-table built on \@tanstack/react-table.
+ * Composes existing WealthX shadcn components:
+ *   - Table, TableHeader, TableBody, TableRow, TableHead, TableCell
+ *   - Input (column filter)
+ *   - Button (pagination actions, column toggle)
+ *   - Checkbox (row selection)
+ *   - Select (page-size selector)
+ *   - Pagination (page navigation)
+ *   - Skeleton (loading state)
+ *   - DropdownMenu (column visibility toggle)
+ *
+ * All colors use design tokens — no hex codes.
+ */
+import { type ReactElement } from "react"
+import * as React from "react"
+import {
+  type ColumnDef,
+  type ColumnFiltersState,
+  type SortingState,
+  type VisibilityState,
+  type RowSelectionState,
+  type Table as TanstackTable,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import {
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
+  SlidersHorizontal,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Skeleton } from "@/components/ui/skeleton"
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface DataTableProps<TData, TValue> {
+  /** Column definitions — pass ColumnDef[] from \@tanstack/react-table */
+  columns: ColumnDef<TData, TValue>[]
+  /** Row data */
+  data: TData[]
+  /** Show a global search/filter input above the table */
+  searchKey?: string
+  /** Placeholder for the search input */
+  searchPlaceholder?: string
+  /** Enable row selection with checkboxes */
+  enableRowSelection?: boolean
+  /** Enable column visibility toggle dropdown */
+  enableColumnVisibility?: boolean
+  /** Page size options for the page-size selector */
+  pageSizeOptions?: number[]
+  /** Show loading skeleton */
+  loading?: boolean
+  /** Number of skeleton rows to show while loading */
+  skeletonRows?: number
+  /** Callback when row selection changes */
+  onRowSelectionChange?: (selection: RowSelectionState) => void
+  /** Additional className for the root wrapper */
+  className?: string
+  /** Render a toolbar above the table (replaces default toolbar) */
+  toolbar?: (table: TanstackTable<TData>) => React.ReactNode
+  /** Text shown when no results found */
+  emptyText?: string
+}
+
+// ---------------------------------------------------------------------------
+// Helper: sortable header
+// ---------------------------------------------------------------------------
+
+export function DataTableColumnHeader({
+  column,
+  title,
+  className,
+}: {
+  column: { getIsSorted: () => false | "asc" | "desc"; toggleSorting: (desc?: boolean) => void; getCanSort: () => boolean }
+  title: string
+  className?: string
+}): ReactElement {
+  if (!column.getCanSort()) {
+    return <span className={className}>{title}</span>
+  }
+
+  const sorted = column.getIsSorted()
+
+  let sortIcon: ReactElement
+  if (sorted === "asc") {
+    sortIcon = <ArrowUp className="ml-1 size-3.5" />
+  } else if (sorted === "desc") {
+    sortIcon = <ArrowDown className="ml-1 size-3.5" />
+  } else {
+    sortIcon = <ArrowUpDown className="ml-1 size-3.5" />
+  }
+
+  return (
+    <Button
+      className={cn("-ml-3 h-8 font-medium text-muted-foreground hover:text-foreground", className)}
+      onClick={() => { column.toggleSorting(sorted === "asc"); }}
+      size="sm"
+      variant="ghost"
+    >
+      {title}
+      {sortIcon}
+    </Button>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Helper: selection column
+// ---------------------------------------------------------------------------
+
+export function getSelectionColumn<TData>(): ColumnDef<TData> {
+  return {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        aria-label="Select all"
+        checked={table.getIsAllPageRowsSelected()}
+        indeterminate={table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected()}
+        onCheckedChange={(checked) => { table.toggleAllPageRowsSelected(Boolean(checked)); }}
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        aria-label="Select row"
+        checked={row.getIsSelected()}
+        onCheckedChange={(checked) => { row.toggleSelected(Boolean(checked)); }}
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+function DataTableToolbar<TData>({
+  table,
+  searchKey,
+  searchPlaceholder,
+  enableColumnVisibility,
+}: {
+  table: TanstackTable<TData>
+  searchKey?: string
+  searchPlaceholder?: string
+  enableColumnVisibility?: boolean
+}): ReactElement {
+  return (
+    <div className="flex items-center justify-between gap-2 py-4" data-slot="data-table-toolbar">
+      <div className="flex flex-1 items-center gap-2">
+        {searchKey ? <Input
+            className="max-w-xs"
+            onChange={(e) => table.getColumn(searchKey)?.setFilterValue(e.target.value)}
+            placeholder={searchPlaceholder ?? `Filter ${searchKey}...`}
+            value={table.getColumn(searchKey)?.getFilterValue() as string}
+          /> : null}
+      </div>
+      {enableColumnVisibility ? <DropdownMenu>
+          <DropdownMenuTrigger
+            render={<Button className="ml-auto h-8 gap-1.5" size="sm" variant="outline" />}
+          >
+            <SlidersHorizontal className="size-3.5" />
+            <span className="hidden sm:inline">Columns</span>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              {table
+                .getAllColumns()
+                .filter((col) => col.getCanHide())
+                .map((col) => (
+                  <DropdownMenuCheckboxItem
+                    checked={col.getIsVisible()}
+                    className="capitalize"
+                    key={col.id}
+                    onCheckedChange={(value) => { col.toggleVisibility(Boolean(value)); }}
+                  >
+                    {col.id}
+                  </DropdownMenuCheckboxItem>
+                ))}
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu> : null}
+    </div>
+  )
+}
+
+function DataTablePagination<TData>({
+  table,
+  pageSizeOptions = [10, 20, 30, 50],
+}: {
+  table: TanstackTable<TData>
+  pageSizeOptions?: number[]
+}): ReactElement {
+  return (
+    <div
+      className="flex items-center justify-between gap-4 py-4"
+      data-slot="data-table-pagination"
+    >
+      {/* Selected rows info */}
+      <p className="text-sm text-muted-foreground">
+        {table.getFilteredSelectedRowModel().rows.length > 0 && (
+          <>
+            {table.getFilteredSelectedRowModel().rows.length} of{" "}
+            {table.getFilteredRowModel().rows.length} row(s) selected.
+          </>
+        )}
+      </p>
+
+      <div className="flex items-center gap-6">
+        {/* Page size selector */}
+        <div className="flex items-center gap-2">
+          <p className="text-sm text-muted-foreground whitespace-nowrap">Rows per page</p>
+          <Select
+            onValueChange={(value) => { table.setPageSize(Number(value)); }}
+            value={`${table.getState().pagination.pageSize}`}
+          >
+            <SelectTrigger className="w-[70px]" size="sm">
+              <SelectValue placeholder={`${table.getState().pagination.pageSize}`} />
+            </SelectTrigger>
+            <SelectContent>
+              {pageSizeOptions.map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Page info */}
+        <p className="text-sm text-muted-foreground whitespace-nowrap">
+          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+        </p>
+
+        {/* Page navigation */}
+        <div className="flex items-center gap-1">
+          <Button
+            aria-label="Go to first page"
+            disabled={!table.getCanPreviousPage()}
+            onClick={() => { table.setPageIndex(0); }}
+            size="icon-sm"
+            variant="outline"
+          >
+            <ChevronsLeftIcon className="size-4" />
+          </Button>
+          <Button
+            aria-label="Go to previous page"
+            disabled={!table.getCanPreviousPage()}
+            onClick={() => { table.previousPage(); }}
+            size="icon-sm"
+            variant="outline"
+          >
+            <ChevronLeftIcon className="size-4" />
+          </Button>
+          <Button
+            aria-label="Go to next page"
+            disabled={!table.getCanNextPage()}
+            onClick={() => { table.nextPage(); }}
+            size="icon-sm"
+            variant="outline"
+          >
+            <ChevronRightIcon className="size-4" />
+          </Button>
+          <Button
+            aria-label="Go to last page"
+            disabled={!table.getCanNextPage()}
+            onClick={() => { table.setPageIndex(table.getPageCount() - 1); }}
+            size="icon-sm"
+            variant="outline"
+          >
+            <ChevronsRightIcon className="size-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Loading skeleton
+// ---------------------------------------------------------------------------
+
+function DataTableSkeleton({
+  columnCount,
+  rowCount = 5,
+}: {
+  columnCount: number
+  rowCount?: number
+}): ReactElement {
+  return (
+    <>
+      {Array.from({ length: rowCount }).map((_, rowIdx) => (
+        <TableRow key={`skeleton-row-${String(rowIdx)}`}>
+          {Array.from({ length: columnCount }).map((_inner, colIdx) => (
+            <TableCell key={`skeleton-cell-${String(rowIdx)}-${String(colIdx)}`}>
+              <Skeleton className="h-4 w-3/4" />
+            </TableCell>
+          ))}
+        </TableRow>
+      ))}
+    </>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Main DataTable
+// ---------------------------------------------------------------------------
+
+function DataTable<TData, TValue>({
+  columns: userColumns,
+  data,
+  searchKey,
+  searchPlaceholder,
+  enableRowSelection = false,
+  enableColumnVisibility = false,
+  pageSizeOptions = [10, 20, 30, 50],
+  loading = false,
+  skeletonRows = 5,
+  onRowSelectionChange,
+  className,
+  toolbar,
+  emptyText = "No results.",
+}: DataTableProps<TData, TValue>): ReactElement {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
+
+  // Prepend selection column if enabled
+  const resolvedColumns = React.useMemo(() => {
+    if (!enableRowSelection) return userColumns
+    return [getSelectionColumn<TData>(), ...userColumns] as ColumnDef<TData, TValue>[]
+  }, [userColumns, enableRowSelection])
+
+  const table = useReactTable({
+    data,
+    columns: resolvedColumns,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: (updater) => {
+      const next = typeof updater === "function" ? updater(rowSelection) : updater
+      setRowSelection(next)
+      onRowSelectionChange?.(next)
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    enableRowSelection,
+  })
+
+  function renderTableBody(): ReactElement {
+    if (loading) {
+      return <DataTableSkeleton columnCount={resolvedColumns.length} rowCount={skeletonRows} />
+    }
+
+    if (table.getRowModel().rows.length) {
+      return (
+        <>
+          {table.getRowModel().rows.map((row) => (
+            <TableRow
+              data-state={row.getIsSelected() ? "selected" : undefined}
+              key={row.id}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <TableCell key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </>
+      )
+    }
+
+    return (
+      <TableRow>
+        <TableCell
+          className="h-24 text-center text-muted-foreground"
+          colSpan={resolvedColumns.length}
+        >
+          {emptyText}
+        </TableCell>
+      </TableRow>
+    )
+  }
+
+  return (
+    <div className={cn("w-full font-sans", className)} data-slot="data-table">
+      {/* Toolbar */}
+      {toolbar
+        ? toolbar(table)
+        : (searchKey || enableColumnVisibility) && (
+            <DataTableToolbar
+              enableColumnVisibility={enableColumnVisibility}
+              searchKey={searchKey}
+              searchPlaceholder={searchPlaceholder}
+              table={table}
+            />
+          )}
+
+      {/* Table */}
+      <div className="border border-border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {renderTableBody()}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Pagination */}
+      <DataTablePagination pageSizeOptions={pageSizeOptions} table={table} />
+    </div>
+  )
+}
+
+export {
+  DataTable,
+  DataTableToolbar,
+  DataTablePagination,
+  DataTableSkeleton,
+}
+
+// Re-export tanstack types for consumer convenience
+export type { ColumnDef, SortingState, ColumnFiltersState, VisibilityState, RowSelectionState }

package/src/components/ui/date-picker.tsx

@@ -0,0 +1,133 @@
+"use client"
+
+import { type ReactElement } from "react"
+import * as React from "react"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+/**
+ * DatePicker — WealthX Design System
+ * Figma: https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn?node-id=73-226
+ *
+ * Composes Popover + Calendar + Button.
+ * Variants:
+ *  - Date-only picker (default)
+ *  - Date + Time picker (showTimePicker)
+ */
+
+export interface DatePickerProps {
+  value?: Date
+  onChange?: (date: Date | undefined) => void
+  placeholder?: string
+  /** Show a time input below the calendar */
+  showTimePicker?: boolean
+  disabled?: boolean
+  className?: string
+  /** Passed through to Calendar (e.g. fromYear, toYear, captionLayout) */
+  calendarProps?: Omit<
+    React.ComponentProps<typeof Calendar>,
+    "mode" | "selected" | "onSelect"
+  >
+}
+
+function DatePicker({
+  value,
+  onChange,
+  placeholder = "Pick a date",
+  showTimePicker = false,
+  disabled = false,
+  className,
+  calendarProps,
+}: DatePickerProps): ReactElement {
+  const [open, setOpen] = React.useState(false)
+
+  function handleDaySelect(day: Date | undefined): void {
+    if (!day) {
+      onChange?.(undefined)
+      return
+    }
+    // Preserve existing time when selecting a new day
+    if (showTimePicker && value) {
+      day.setHours(value.getHours(), value.getMinutes())
+    }
+    onChange?.(day)
+    if (!showTimePicker) setOpen(false)
+  }
+
+  function handleTimeChange(e: React.ChangeEvent<HTMLInputElement>): void {
+    const [hours, minutes] = e.target.value.split(":").map(Number)
+    const next = value ? new Date(value) : new Date()
+    next.setHours(hours, minutes, 0, 0)
+    onChange?.(next)
+  }
+
+  const timeValue = value
+    ? `${String(value.getHours()).padStart(2, "0")}:${String(value.getMinutes()).padStart(2, "0")}`
+    : ""
+
+  let displayValue: string | undefined
+  if (value && showTimePicker) {
+    displayValue = format(value, "dd/MM/yyyy HH:mm")
+  } else if (value) {
+    displayValue = format(value, "dd/MM/yyyy")
+  }
+
+  return (
+    <Popover onOpenChange={disabled ? undefined : setOpen} open={open}>
+      <PopoverTrigger
+        render={
+          <Button
+            className={cn(
+              "w-full justify-start rounded-none font-normal data-[empty=true]:text-muted-foreground",
+              className
+            )}
+            data-empty={!value}
+            data-slot="date-picker-trigger"
+            disabled={disabled}
+            variant="outline"
+          />
+        }
+      >
+        <CalendarIcon />
+        {value ? displayValue : placeholder}
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="w-auto rounded-none p-0 shadow-sm"
+      >
+        <Calendar
+          captionLayout="dropdown"
+          mode="single"
+          onSelect={handleDaySelect}
+          selected={value}
+          {...calendarProps}
+          className={cn(
+            "rounded-none border-0 shadow-none",
+            calendarProps?.className
+          )}
+        />
+        {showTimePicker ? <div className="border-t border-border px-3 pb-3 pt-2">
+            <label className="mb-1.5 block text-xs font-medium text-muted-foreground">
+              Time
+              <input
+                className="mt-1.5 h-8 w-full rounded-none border border-input bg-transparent px-2 text-sm font-sans outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+                onChange={handleTimeChange}
+                type="time"
+                value={timeValue}
+              />
+            </label>
+          </div> : null}
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export { DatePicker }