@cryptlex/web-components 5.1.0 → 5.2.0

package/lib/components/data-table/data-table.tsx

@@ -0,0 +1,593 @@
+"use client";
+import type { components, operations } from "@cryptlex/web-api-types";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import {
+	type AccessorFnColumnDef,
+	type Column,
+	type ColumnDef,
+	type ColumnOrderState,
+	createColumnHelper,
+	getCoreRowModel,
+	type TableState,
+	type Updater,
+	useReactTable,
+	type VisibilityState
+} from "@tanstack/react-table";
+import { ArrowDownNarrowWide, ArrowDownWideNarrow, ArrowUpDown, Columns3, GripVertical, Info } from "lucide-react";
+import React, { createContext, useContext, useEffect, useId, useMemo, useState } from "react";
+
+/** Reserved name for actions column */
+export const ACTIONS_COLUMN_ID = "tableActions";
+
+export type Schemas = ApiSchema<keyof components['schemas']>;
+export type OperationKeys = keyof operations;
+
+type DataTableFactory<TData extends Schemas> = {
+	fetchFn: TableFetchFn<TData, OperationKeys>;
+	columns: ColumnDef<TData, any>[]
+	allowSelection?: boolean;
+	columnsToHideByDefault?: VisibilityState; // Columns that are hidden by default
+	filterConfig: FiltersConfig<OperationKeys>
+}
+
+
+type DataTableState = Pick<TableState, 'sorting' | 'rowSelection' | 'pagination'> & {};
+/**
+ * Hook for handling all data-table state. Used in DataTableContext
+ */
+export function useDataTableState<TData extends Schemas>({ columns, fetchFn, columnsToHideByDefault = {}, allowSelection = false, filterConfig }: DataTableFactory<TData>) {
+	const id = useId();
+
+	// TODO: Would it be better for this state to be more granular?
+	const [tableState, _setTableState] = useState<DataTableState>({
+		/** TODO Reflect in URL  */
+		pagination: { pageIndex: 0, pageSize: 20 }, // Pagination state
+		sorting: [], // Sorting state
+
+		/** Ephemeral */
+		rowSelection: {}, // Row selection state
+	});
+
+	/** TODO Reflect in URL  */
+	const [searchQuery, setSearchQuery] = useState('');
+
+	/** TODO Store on browser as preference */
+	const [columnOrder, setColumnOrder] = useState<ColumnOrderState>([])
+	// TODO Store on browser
+	const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
+		id: false,
+		updatedAt: false,
+		...columnsToHideByDefault,
+	});
+
+	const [filters, setFilters] = useState<ApiFilters<OperationKeys>[]>([]);
+
+	const mergedFilters = useMemo(() => {
+		return filters.reduce((acc, current) => {
+			return merge(acc, current);
+		}, {});
+	}, [filters])
+
+	// Update table state with new values
+	const updateTableState = (updates: Partial<DataTableState>) => {
+		_setTableState((prev) => ({ ...prev, ...updates }));
+	};
+
+	const {
+		sorting,
+		rowSelection,
+		pagination,
+	} = tableState;
+
+	const query = useQuery({
+		queryKey: [id, pagination, sorting, searchQuery],
+		queryFn: () => fetchFn(pagination, sorting, searchQuery, mergedFilters),
+		placeholderData: keepPreviousData, // Keep previous data while loading new data
+		retry: 0,
+		refetchOnWindowFocus: false,
+	});
+
+	useEffect(() => {
+		// TODO, store in localStorage
+	}, [columnVisibility])
+
+	const columnHelper = useMemo(() => createColumnHelper<TData>(), []);
+
+	const metadataColumns = useMemo<AccessorFnColumnDef<TData, string>[]>(() => {
+		const data = query.data?.data;
+		if (!data?.length) return [];
+
+		type WithMeta = TData & { metadata: ApiSchema<'MetadataDto'>[] };
+		const rowHasMetadata = (row: TData): row is WithMeta => row != null &&
+			typeof row === 'object' &&
+			'metadata' in row &&
+			Array.isArray((row).metadata);
+
+		const rowsWithMeta = data.filter(
+			rowHasMetadata
+		);
+		if (rowsWithMeta.length === 0) return [];
+		const keys = Array.from(new Set(rowsWithMeta.flatMap(r => r.metadata?.map(m => m.key) ?? [])));
+
+		return keys.map(key =>
+			columnHelper.accessor(
+				(row) => {
+					if (rowHasMetadata(row)) {
+						return row?.metadata?.find(m => m.key === key)?.value ?? '';
+					}
+					return '';
+				},
+				{
+					id: key,
+					header: key, // tooltip header
+					enableSorting: false,
+					cell: (info) => {
+						const value = info.getValue();
+						// Handle null/undefined values
+						if (value === null || value === undefined) return "";
+						// For primitive types, return the string representation
+						return String(value);
+					},
+				}
+			));
+	}, [query.data?.data]);
+
+	/**
+	 * ID,createdAt and updatedAt will be added by default for all tables
+	 * If selection is allowed, checkbox will be added
+	 * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)
+	 * If there are actions for the table, they will be placed fixed at the right side of table.
+	 */
+	const cols: ColumnDef<any, any>[] = [
+		...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),
+		...TABLE_ID_COLUMN,
+		...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),
+		...(metadataColumns.length ? metadataColumns : []),
+		...TABLE_DEFAULT_DATE_COLUMNS,
+		// Actions column
+		...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),
+	];
+
+	// Type-guard for updater
+	function isUpdaterFunction<T>(updater: Updater<T>): updater is (old: T) => T {
+		return typeof updater === "function";
+	}
+	// Utility function to resolve updater
+	function resolveUpdater<T>(updater: Updater<T>, currentValue: T) {
+		if (isUpdaterFunction(updater)) {
+			return updater(currentValue);
+		}
+		return updater;
+	}
+
+	// Use react-table's hook to create the table instance
+	const tanTable = useReactTable({
+		data: query.data?.data ?? [],
+		columns: cols,
+		getCoreRowModel: getCoreRowModel(),
+		rowCount: query.data?.total,
+		manualPagination: true, // Handle pagination manually since pagination is done server side for data tables
+		onPaginationChange: (updater) => {
+			updateTableState({ pagination: resolveUpdater(updater, pagination) });
+		},
+		manualSorting: true, // Handle sorting manually since sorting is done server side for data tables
+		onSortingChange: (updater) => {
+			updateTableState({ sorting: [...resolveUpdater(updater, sorting)], rowSelection: {} }); // Reset selection when sorting.
+		},
+		manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables
+		onColumnVisibilityChange: (updater) => {
+			setColumnVisibility(resolveUpdater(updater, columnVisibility));
+		},
+		onRowSelectionChange: (updater) => {
+			updateTableState({ rowSelection: resolveUpdater(updater, rowSelection) });
+		},
+		onColumnOrderChange: (updater) => {
+			setColumnOrder(resolveUpdater(updater, columnOrder));
+		},
+		state: {
+			sorting: sorting,
+			columnVisibility: columnVisibility,
+			pagination: pagination,
+			rowSelection: rowSelection,
+			columnOrder: columnOrder
+		},
+		meta: {
+			refetch: query.refetch,
+		},
+	});
+
+	// By default, ColumnDef does not give guarantees of column.id existing. Once useReactTable is called, all columns are assigned IDs.
+	// This populates the columnIds in the columnOrder state
+	// TODO, add localStorage access layer for this. 
+	useEffect(() => {
+		setColumnOrder([...tanTable.getAllLeafColumns().map(c => c.id)]);
+	}, [])
+
+	return { tableState, updateTableState, query, setSearchQuery, searchQuery, tanTable, mergedFilters, filters, setFilters, filterConfig }
+}
+
+export const DataTableContext = createContext<ReturnType<typeof useDataTableState> | null>(null);
+
+export const useDataTable = () => {
+	const ctx = useContext(DataTableContext);
+	if (!ctx) {
+		throw Error("DataTable should be used within DataTableProvider.")
+	}
+	return ctx;
+}
+
+export function DataTableProvider({ children, ...props }: { children: React.ReactNode; } & ReturnType<typeof useDataTableState>) {
+	return (
+		<DataTableContext.Provider value={props}>
+			{children}
+		</DataTableContext.Provider>
+	)
+}
+
+
+export type DataTableProps = React.ComponentProps<'section'> & {
+	tableActions: TableActions;
+
+	// filterConfig: {
+	// 	filters: Record<keyof ApiFilters<TOperation>, 'date' | 'string' | 'known-string' | 'number'>,
+	// }
+}
+export function DataTable({
+	tableActions,
+	className,
+	...props
+	// filterableFields,
+}: DataTableProps) {
+	// State for managing table data and filters
+	const { query, tanTable } = useDataTable();
+
+	return (
+		<>
+			{/* Table Actions Section */}
+			<section {...props} className={cn("flex flex-col bg-card", className)}>
+				<Actions tableActions={tableActions} />
+				{/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}
+				<div className="w-full overflow-auto border-x grow min-h-table relative" tabIndex={0}>
+					{/* Table overlay with loader */}
+					{query.isLoading && (
+						<TableOverlay className="cursor-wait">
+							<Loader />
+						</TableOverlay>
+					)}
+					{/* Table overlay for empty table */}
+					{!query.isLoading && tanTable.getRowModel().rows.length === 0 && (
+						// Empty table
+						<TableOverlay className="cursor-not-allowed">
+							{!query.isFetching &&
+								(query.isError ? (
+									<span className="flex gap-3 justify-center items-center">
+										{/* TODO (mudasir-pandith) Check for 403 explicitly!! */}
+										{/* <span>{query.error}</span> */}
+										<Info />
+										<span>
+											You don't have the required permissions. Please contact your
+											admin.
+										</span>
+									</span>
+								) : !query.data?.data ? (
+									<>No results found.</>
+								) : (
+									<>Unknown error. Please contact customer support.</>
+								))}
+						</TableOverlay>
+					)}
+					{!query.isLoading && tanTable.getRowModel().rows.length !== 0 &&
+						<TableContent className="size-full" />}
+				</div>
+
+				{/* Table Footer Section with Pagination and Column Picker */}
+				<div className="flex w-full justify-between border gap-icon p-icon overflow-x-auto">
+					<div className="flex gap-icon">
+						<ColumnPicker />
+						<PageSize />
+					</div>
+					<Paginator />
+				</div>
+			</section>
+		</>
+	);
+}
+/** Table overlay to be shown for loaders or other messages */
+function TableOverlay({
+	children,
+	className,
+}: { children: React.ReactNode; className?: string }) {
+	return (
+		<>
+			<span
+				className={cn(
+					className,
+					"absolute top-0 bg-card z-20 size-full text-sm flex items-center justify-center",
+				)}
+			>
+				{children}
+			</span>
+			{/* Keep something in document flow with the correct height */}
+			<span className="relative h-full w-0 block" />
+		</>
+	);
+}
+
+import {
+	arrayMove,
+	SortableContext,
+	sortableKeyboardCoordinates,
+	useSortable,
+	verticalListSortingStrategy
+} from '@dnd-kit/sortable';
+
+function ColumnPicker() {
+	const { tanTable } = useDataTable();
+	const [activeId, setActiveId] = useState<string | null>(null);
+
+	const resourceFormatter = useResourceFormatter();
+
+	const sensors = useSensors(
+		useSensor(PointerSensor),
+		useSensor(KeyboardSensor, {
+			coordinateGetter: sortableKeyboardCoordinates,
+		})
+	);
+	return (
+		<DndContext
+			sensors={sensors}
+			collisionDetection={closestCenter}
+			onDragStart={(event) => {
+				const { active } = event;
+				setActiveId(active.id.toString());
+			}}
+			onDragEnd={(event) => {
+				const { active, over } = event;
+
+				if (over && active.id !== over.id) {
+					const columnOrder = tanTable.getState().columnOrder;
+					const oldIndex = columnOrder.indexOf(active.id.toString());
+					const newIndex = columnOrder.indexOf(over.id.toString());
+					tanTable.setColumnOrder([...arrayMove(columnOrder, oldIndex, newIndex)]);
+				}
+
+				setActiveId(null);
+			}}
+		>
+			<SortableContext
+				items={tanTable.getState().columnOrder}
+				strategy={verticalListSortingStrategy}
+			>
+				<EasyMenu label={<><Columns3 />Columns</>} selectionMode="multiple" items={tanTable.getAllFlatColumns()} selectedKeys={tanTable.getIsAllColumnsVisible() ? 'all' : tanTable.getVisibleFlatColumns().map(c => c.id)}>
+					<MenuItem onAction={() => tanTable.toggleAllColumnsVisible()} className={'italic'}>(select all)</MenuItem>
+					{tanTable.getState().columnOrder.map(colId => {
+						const col = tanTable.getAllFlatColumns().find(c => c.id === colId);
+						if (!col) return null;
+						return <SortableItem key={col.id} column={col} />
+					})}
+				</EasyMenu>
+				<DragOverlay>
+					{activeId ? <div className="dropdown-item opacity-70 border-2 border-primary">{resourceFormatter(activeId)}</div> : null}
+				</DragOverlay>
+			</SortableContext>
+		</DndContext>
+	);
+
+
+	function SortableItem({ column }: { column: Column<any, unknown> }) {
+		const {
+			attributes,
+			listeners,
+			setNodeRef,
+			transform,
+			transition,
+		} = useSortable({ id: column.id });
+		const style = {
+			transform: CSS.Transform.toString(transform),
+			transition,
+			zIndex: '999'
+		};
+		return <MenuItem
+			ref={setNodeRef}
+			style={style}
+			{...attributes}
+			id={column.id}
+			onAction={() => column.toggleVisibility()}
+			isDisabled={!column.getCanHide()} className="flex items-center">
+			<GripVertical {...listeners} className="size-icon cursor-grab" />
+			{resourceFormatter(column.id)}
+			{column.getIsSorted() && <SortIcon className="size-icon" direction={column.getIsSorted()} />}
+		</MenuItem>;
+	}
+}
+
+
+
+import {
+	ChevronFirst,
+	ChevronLast,
+	ChevronLeft,
+	ChevronRight,
+} from "lucide-react";
+
+function Paginator() {
+	const { tanTable, query } = useDataTable();
+	const rowCount = query.data?.total ?? 0
+	return (
+		<div className="flex items-center gap-2">
+			<span className="whitespace-nowrap caption text-muted">
+				{`${tanTable.getState().pagination.pageIndex * tanTable.getState().pagination.pageSize + 1} - ${Math.min(
+					(tanTable.getState().pagination.pageIndex + 1) *
+					tanTable.getState().pagination.pageSize,
+					rowCount,
+				)} of ${rowCount?.toLocaleString()}`}
+			</span>
+
+			<Button
+				onPress={() => tanTable.firstPage()}
+				isDisabled={!tanTable.getCanPreviousPage()}
+				variant="neutral"
+				size={"icon"}
+			><ChevronFirst /></Button>
+			<Button
+				onPress={() => tanTable.previousPage()}
+				isDisabled={!tanTable.getCanPreviousPage()}
+				variant="neutral"
+				size={"icon"}
+			><ChevronLeft /></Button>
+			<Button
+				onPress={() => tanTable.nextPage()}
+				isDisabled={!tanTable.getCanNextPage()}
+				variant="neutral"
+				size={"icon"}
+			><ChevronRight /></Button>
+			<Button
+				onClick={() => tanTable.lastPage()}
+				isDisabled={!tanTable.getCanNextPage()}
+				variant="neutral"
+				size={"icon"}
+			><ChevronLast /></Button>
+		</div>
+	);
+}
+
+
+function PageSize() {
+	const { tanTable } = useDataTable();
+	const PAGE_SIZES = [10, 20, 30, 40, 50];
+
+	return (
+		<EasyMenu label={tanTable.getState().pagination.pageSize.toString()} selectionMode="single" selectedKeys={[tanTable.getState().pagination.pageSize.toString()]} items={PAGE_SIZES.map(s => ({ id: s.toString(), value: s }))}>
+			{
+				(items) => <MenuItem onAction={() => tanTable.setPageSize(items.value)}>{items.value}</MenuItem>
+			}
+		</EasyMenu>
+	);
+}
+
+
+import { RotateCw } from "lucide-react";
+
+function Actions({ tableActions }: { tableActions: TableActions }) {
+	const { query, tanTable, searchQuery, setSearchQuery } = useDataTable();
+
+	return (
+		<section className="flex bg-card justify-between my-0 p-icon border gap-icon overflow-auto">
+			<div className="flex gap-icon">
+				<Button
+					isPending={query.isFetching}
+					onClick={() => query.refetch()}
+					variant={"neutral"}
+					size={"icon"}
+				><RotateCw /></Button>
+
+				{tableActions
+					.filter(ta => ta.bulk === tanTable.getSelectedRowModel().rows.length > 0)
+					.map((ta, i) => {
+						const Icon = ta.icon;
+						return (<Button key={`${i}-${ta.bulk}`} type="button" isDisabled={query.isFetching} className="animate-in fade-in slide-in-from-left-15 duration-300 transition-transform" onPress={(e) => { ta.onClick(e, tanTable) }} size={'icon'}><Icon /></Button>)
+					}
+					)}
+			</div>
+			<div className="flex gap-icon">
+				<DataTableFilter />
+				{(
+					<SearchField value={searchQuery} onChange={setSearchQuery} />
+				)}
+			</div>
+		</section>
+	);
+}
+
+
+import { closestCenter, DndContext, DragOverlay, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { CSS } from "@dnd-kit/utilities";
+import {
+	flexRender
+} from "@tanstack/react-table";
+import { DataTableFilter, type FiltersConfig } from "lib/components/data-table/data-table-filter";
+import { type ApiFilters, type ApiSchema, TABLE_CHECK_BOX_COLUMN, TABLE_DEFAULT_DATE_COLUMNS, TABLE_ID_COLUMN, type TableActions, type TableFetchFn } from "lib/components/data-table/table-commons";
+import { SearchField } from "lib/components/inputs/searchfield";
+import { Button } from "lib/components/ui/button";
+import { Loader } from "lib/components/ui/loader";
+import { EasyMenu, MenuItem } from "lib/components/ui/menu";
+import {
+	TableBody,
+	TableCell,
+	Table as TableComponent,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "lib/components/ui/table";
+import { cn } from "lib/utils/primitives";
+import { useResourceFormatter } from "lib/utils/resource-names";
+import { merge } from "lodash-es";
+
+function SortIcon({ direction, ...props }: { direction: 'asc' | 'desc' | false } & Omit<React.ComponentProps<'svg'>, 'direction'>) {
+	if (direction === 'asc') return <ArrowDownNarrowWide {...props} />
+	else if (direction === 'desc') return <ArrowDownWideNarrow {...props} />
+	else return <ArrowUpDown {...props} />
+}
+
+// TODO, automate checking valid HTML
+function TableContent({ className }: React.ComponentProps<typeof TableComponent>) {
+	const { tanTable } = useDataTable();
+	const tableCellStyle = (isSticky: boolean, className?: string) => cn("animate-in fade-in slide-in-from-top-10", "px-icon py-2 text-left text-sm font-medium whitespace-nowrap", isSticky && "bg-card sticky right-0 z-50 text-center", className)
+	return (
+		<TableComponent className={cn(className)}>
+			<TableHeader className="sticky top-0 z-10">
+				{tanTable.getHeaderGroups().map((headerGroup) => (
+					<TableRow className={cn("h-input")} key={headerGroup.id}>
+						{headerGroup.headers.map((header) => (
+							<TableHead
+								key={header.id}
+								className={tableCellStyle(false, "bg-card")}
+							>
+								{!header.column.getCanSort() && !header.isPlaceholder
+									&& <>{flexRender(
+										header.column.columnDef.header,
+										header.getContext(),
+									)}</>}
+								{/* TODO Align header text with table text */}
+								{header.column.getCanSort() && (
+									<Button
+										variant="ghost"
+										className="w-full !justify-start !px-1.5"
+										onPress={header.column.getToggleSortingHandler()}
+									>
+										{flexRender(
+											header.column.columnDef.header,
+											header.getContext(),
+										)}
+										<SortIcon direction={header.column.getIsSorted()} />
+									</Button>
+								)}
+							</TableHead>
+						))}
+					</TableRow>
+				))}
+			</TableHeader>
+			<TableBody className="flex-1 overflow-y-auto relative">
+				{tanTable.getRowModel().rows.map((row) => (
+					<TableRow
+						className={cn("h-input transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20")}
+						key={row.id}
+						data-selected={row.getIsSelected()}
+					>
+						{row.getVisibleCells().map((cell) => (
+							<TableCell
+								key={cell.id}
+								className={tableCellStyle(cell.column.id === ACTIONS_COLUMN_ID)}
+							>
+								{flexRender(
+									cell.column.columnDef.cell,
+									cell.getContext(),
+								)}
+							</TableCell>
+						))}
+					</TableRow>
+				))}
+			</TableBody>
+		</TableComponent>
+	);
+}