@cryptlex/web-components 5.2.0 → 5.3.0

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

@@ -1,593 +0,0 @@
-"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>
-	);
-}