@maxal_studio/kratosjs-react 1.0.0

package/src/components/table/GridView.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { SerializedTable } from '@maxal_studio/kratosjs';
+import { GridCard } from './GridCard';
+import { cn } from '../../utils/classNames';
+import { Spinner } from '../ui/Spinner';
+import { EmptyState } from '../ui/EmptyState';
+import { ErrorAlert } from '../ui/ErrorAlert';
+import { translate } from '../../i18n/activeLocale';
+
+interface GridViewProps {
+	schema: SerializedTable;
+	data: any[];
+	visibleColumns: any[];
+	selectedRows: Set<any>;
+	changedRows: Map<any, any>;
+	openActionsRowId: any;
+	onRowSelect: (rowId: any) => void;
+	onCellChange: (rowId: any, columnName: string, value: any) => void;
+	onRowAction: (actionName: string, rowId: any) => void;
+	onSaveRow: (rowId: any) => void;
+	onResetRow: (rowId: any) => void;
+	onToggleActions: (rowId: any) => void;
+	isLoading: boolean;
+	error: string | null;
+	visibleActions: any[];
+	/** When true, loading/empty/error states omit outer card wrapper. */
+	embedded?: boolean;
+}
+
+export function GridView({
+	schema,
+	data,
+	visibleColumns,
+	selectedRows,
+	changedRows,
+	openActionsRowId,
+	onRowSelect,
+	onCellChange,
+	onRowAction,
+	onSaveRow,
+	onResetRow,
+	onToggleActions,
+	isLoading,
+	error,
+	visibleActions,
+	embedded = false,
+}: GridViewProps) {
+	const generateGridClasses = (): string => {
+		const config = schema.contentGrid || { md: 2, xl: 3 };
+		const classes = ['grid', 'grid-cols-1'];
+
+		const breakpointMap: Record<string, string> = {
+			sm: 'sm:grid-cols-',
+			md: 'md:grid-cols-',
+			lg: 'lg:grid-cols-',
+			xl: 'xl:grid-cols-',
+			'2xl': '2xl:grid-cols-',
+		};
+
+		for (const [breakpoint, cols] of Object.entries(config)) {
+			const prefix = breakpointMap[breakpoint];
+			if (prefix) {
+				classes.push(`${prefix}${cols}`);
+			}
+		}
+
+		classes.push('gap-4');
+		return classes.join(' ');
+	};
+
+	const gridClasses = generateGridClasses();
+	const stateWrapper = embedded ? 'px-4 py-12' : 'rounded-xl border border-border bg-surface px-4 py-12';
+
+	if (isLoading) {
+		return (
+			<div className={stateWrapper}>
+				<div className="flex items-center justify-center">
+					<Spinner label={translate('core:common.loading_ellipsis')} />
+				</div>
+			</div>
+		);
+	}
+
+	if (error) {
+		return (
+			<div className={embedded ? 'p-4' : 'rounded-xl border border-border bg-surface p-4'}>
+				<ErrorAlert message={error} />
+			</div>
+		);
+	}
+
+	if (data.length === 0) {
+		return (
+			<div className={stateWrapper}>
+				<EmptyState
+					title={translate('core:table.no_records')}
+					description={translate('core:table.no_records_hint')}
+				/>
+			</div>
+		);
+	}
+
+	return (
+		<div className={cn(gridClasses, embedded && 'p-4')}>
+			{data.map((row, rowIndex) => {
+				const rowId = row.id || row._id || rowIndex;
+				const hasChanges = changedRows.has(rowId);
+				const isSelected = selectedRows.has(rowId);
+
+				const filteredSchema = {
+					...schema,
+					actions: visibleActions,
+				};
+
+				return (
+					<GridCard
+						key={rowId}
+						schema={filteredSchema}
+						row={row}
+						rowIndex={rowIndex}
+						totalRows={data.length}
+						rowId={rowId}
+						visibleColumns={visibleColumns}
+						isSelected={isSelected}
+						hasChanges={hasChanges}
+						openActionsRowId={openActionsRowId}
+						onRowSelect={onRowSelect}
+						onCellChange={onCellChange}
+						onRowAction={onRowAction}
+						onSaveRow={onSaveRow}
+						onResetRow={onResetRow}
+						onToggleActions={onToggleActions}
+					/>
+				);
+			})}
+		</div>
+	);
+}

package/src/components/table/LayoutToggle.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Icon } from '../utils/Icon';
+import { TableToolbarIconButton } from '../../table/components/TableToolbarButton';
+import { translate } from '../../i18n/activeLocale';
+
+interface LayoutToggleProps {
+	layout: 'table' | 'grid';
+	onLayoutChange: (layout: 'table' | 'grid') => void;
+}
+
+export function LayoutToggle({ layout, onLayoutChange }: LayoutToggleProps) {
+	const isTable = layout === 'table';
+	const nextLayout = isTable ? 'grid' : 'table';
+
+	return (
+		<TableToolbarIconButton
+			onClick={() => onLayoutChange(nextLayout)}
+			title={isTable ? translate('core:table.switch_grid') : translate('core:table.switch_table')}
+			aria-label={isTable ? translate('core:table.switch_grid') : translate('core:table.switch_table')}
+			aria-pressed={!isTable}>
+			<Icon name={isTable ? 'Table' : 'LayoutGrid'} size={16} />
+		</TableToolbarIconButton>
+	);
+}

package/src/components/table/TableActionsDropdown.tsx

@@ -0,0 +1,114 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { SerializedTable } from '@maxal_studio/kratosjs';
+import { Icon } from '../utils/Icon';
+import { cn } from '../../utils/classNames';
+import { translate } from '../../i18n/activeLocale';
+
+interface TableActionsDropdownProps {
+	schema: SerializedTable;
+	rowId: any;
+	rowIndex: number;
+	totalRows: number;
+	isOpen: boolean;
+	onToggle: () => void;
+	onAction: (actionName: string, rowId: any) => void;
+}
+
+export function TableActionsDropdown({
+	schema,
+	rowId,
+	rowIndex,
+	totalRows,
+	isOpen,
+	onToggle,
+	onAction,
+}: TableActionsDropdownProps) {
+	if (!schema.actions || schema.actions.length === 0) {
+		return null;
+	}
+
+	const buttonRef = useRef<HTMLButtonElement>(null);
+	const [dropdownPosition, setDropdownPosition] = useState<{
+		top: number;
+		right: number;
+		opensUpward: boolean;
+	} | null>(null);
+	const opensUpward = rowIndex >= totalRows - 3;
+
+	useEffect(() => {
+		if (isOpen && buttonRef.current) {
+			const rect = buttonRef.current.getBoundingClientRect();
+			if (opensUpward) {
+				setDropdownPosition({
+					top: rect.top - 4,
+					right: window.innerWidth - rect.right,
+					opensUpward: true,
+				});
+			} else {
+				setDropdownPosition({
+					top: rect.bottom + 4,
+					right: window.innerWidth - rect.right,
+					opensUpward: false,
+				});
+			}
+		} else {
+			setDropdownPosition(null);
+		}
+	}, [isOpen, opensUpward]);
+
+	return (
+		<div className="relative inline-block">
+			<button
+				ref={buttonRef}
+				onClick={onToggle}
+				className={cn(
+					'inline-flex h-8 w-8 items-center justify-center rounded-full bg-raised text-fg-secondary transition-colors',
+					'hover:bg-hover hover:text-fg',
+					isOpen && 'bg-raised text-fg shadow-soft-sm ring-1 ring-border',
+				)}
+				title={translate('core:common.actions')}
+				aria-label={translate('core:table.row_actions')}
+				aria-expanded={isOpen}>
+				<Icon name="MoreVertical" size={16} />
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<>
+						<div className="fixed inset-0" style={{ zIndex: 40 }} onClick={onToggle} />
+
+						{dropdownPosition && (
+							<div
+								className="fixed w-48 overflow-hidden rounded-xl border border-border bg-raised shadow-soft-lg"
+								style={{
+									zIndex: 60,
+									top: `${dropdownPosition.top}px`,
+									right: `${dropdownPosition.right}px`,
+									transform: dropdownPosition.opensUpward ? 'translateY(-100%)' : 'none',
+								}}>
+								<div className="py-1">
+									{schema.actions.map(action => (
+										<button
+											key={action.name}
+											onClick={() => {
+												onToggle();
+												onAction(action.name, rowId);
+											}}
+											className={cn(
+												'flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors hover:bg-hover/70',
+												action.color || 'text-fg',
+											)}>
+											{action.icon && <Icon name={action.icon} size={16} />}
+											<span>{action.label || action.name}</span>
+										</button>
+									))}
+								</div>
+							</div>
+						)}
+					</>,
+					document.body,
+				)}
+		</div>
+	);
+}

package/src/components/table/TableBulkActions.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { SerializedTable } from '@maxal_studio/kratosjs';
+import { Icon } from '../utils/Icon';
+import { cn } from '../../utils/classNames';
+import { translate } from '../../i18n/activeLocale';
+
+interface TableBulkActionsProps {
+	schema: SerializedTable;
+	selectedCount: number;
+	onBulkAction: (actionName: string, selectedIds: any[]) => void;
+	onClearSelection: () => void;
+	canDelete?: boolean;
+}
+
+export function TableBulkActions({
+	schema,
+	selectedCount,
+	onBulkAction,
+	onClearSelection,
+	canDelete = true,
+}: TableBulkActionsProps) {
+	if (selectedCount === 0 || !schema.bulkActions || schema.bulkActions.length === 0) {
+		return null;
+	}
+
+	const visibleBulkActions = schema.bulkActions.filter(action => {
+		if ((action.name === 'delete' || action.name === 'bulkDelete') && !canDelete) {
+			return false;
+		}
+		return true;
+	});
+
+	if (visibleBulkActions.length === 0) {
+		return null;
+	}
+
+	return (
+		<div className="mb-4 flex items-center justify-between gap-3 rounded-full border border-border bg-raised/60 px-4 py-2.5 shadow-soft-sm">
+			<span className="text-sm font-medium text-fg">
+				{selectedCount} {selectedCount === 1 ? 'item' : 'items'} selected
+			</span>
+			<div className="flex flex-wrap items-center gap-2">
+				{visibleBulkActions.map(action => (
+					<button
+						key={action.name}
+						onClick={() => onBulkAction(action.name, [])}
+						className={cn(
+							'inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium transition-colors',
+							action.color
+								? `${action.color} hover:opacity-90`
+								: 'text-fg-secondary hover:bg-hover/70 hover:text-fg',
+						)}>
+						{action.icon && <Icon name={action.icon} size={16} />}
+						{action.label || action.name}
+					</button>
+				))}
+				<button
+					onClick={onClearSelection}
+					className="rounded-full px-3 py-1.5 text-sm font-medium text-fg-muted transition-colors hover:bg-hover/70 hover:text-fg">
+					{translate('core:common.clear')}
+				</button>
+			</div>
+		</div>
+	);
+}

package/src/components/table/TableHeader.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { SerializedTable } from '@maxal_studio/kratosjs';
+import { cn } from '../../utils/classNames';
+import { Checkbox } from '../Checkbox';
+import { translate } from '../../i18n/activeLocale';
+
+interface TableHeaderProps {
+	schema: SerializedTable;
+	visibleColumns: any[];
+	sortColumn?: string;
+	sortDirection: 'asc' | 'desc';
+	onSort: (column: string) => void;
+	selectedRowsCount: number;
+	totalRows: number;
+	onSelectAll: () => void;
+}
+
+export function TableHeader({
+	schema,
+	visibleColumns,
+	sortColumn,
+	sortDirection,
+	onSort,
+	selectedRowsCount,
+	totalRows,
+	onSelectAll,
+}: TableHeaderProps) {
+	return (
+		<thead className="sticky top-0 z-30 border-b border-border bg-base/80 backdrop-blur-sm">
+			<tr>
+				{schema.bulkActions && schema.bulkActions.length > 0 && (
+					<th className="w-12 px-4 py-3">
+						<Checkbox checked={selectedRowsCount === totalRows && totalRows > 0} onChange={onSelectAll} />
+					</th>
+				)}
+
+				{visibleColumns.map(column => {
+					const width = column.width
+						? typeof column.width === 'number'
+							? `${column.width}px`
+							: /^\d+$/.test(column.width)
+								? `${column.width}px`
+								: column.width
+						: undefined;
+
+					const widthStyle = width ? { width, minWidth: width, maxWidth: width } : undefined;
+					const isActiveSortColumn = sortColumn === column.name;
+
+					return (
+						<th
+							key={column.name}
+							className={cn(
+								'px-4 py-3 text-left text-[11px] font-medium uppercase tracking-wider text-fg-muted',
+								column.sortable && 'cursor-pointer select-none hover:text-fg-secondary',
+							)}
+							onClick={() => column.sortable && onSort(column.name)}
+							style={widthStyle}>
+							<div className="flex items-center gap-1.5">
+								<span>{column.label || column.name}</span>
+								{column.sortable && (
+									<span className="inline-flex flex-col">
+										<ChevronUp
+											className={cn(
+												'-mb-1 h-3 w-3',
+												isActiveSortColumn && sortDirection === 'asc'
+													? 'text-fg'
+													: 'text-fg-muted/60',
+											)}
+										/>
+										<ChevronDown
+											className={cn(
+												'h-3 w-3',
+												isActiveSortColumn && sortDirection === 'desc'
+													? 'text-fg'
+													: 'text-fg-muted/60',
+											)}
+										/>
+									</span>
+								)}
+							</div>
+						</th>
+					);
+				})}
+
+				<th className="sticky right-0 z-20 border-l border-border bg-base px-4 py-3 text-right text-[11px] font-medium uppercase tracking-wider text-fg-muted shadow-[-6px_0_10px_-6px] shadow-black/10">
+					{schema.actions && schema.actions.length > 0 ? (
+						<span className="hidden sm:inline">{translate('core:common.actions')}</span>
+					) : (
+						''
+					)}
+				</th>
+			</tr>
+		</thead>
+	);
+}

package/src/components/table/TablePagination.tsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import { ChevronDown } from 'lucide-react';
+import { SerializedTable } from '@maxal_studio/kratosjs';
+import { Icon } from '../utils/Icon';
+import { cn } from '../../utils/classNames';
+import { translate } from '../../i18n/activeLocale';
+
+interface TablePaginationProps {
+	schema: SerializedTable;
+	currentPage: number;
+	perPage: number;
+	totalRecords: number;
+	onPageChange: (page: number) => void;
+	onPageSizeChange: (size: number) => void;
+	className?: string;
+}
+
+export function TablePagination({
+	schema,
+	currentPage,
+	perPage,
+	totalRecords,
+	onPageChange,
+	onPageSizeChange,
+	className,
+}: TablePaginationProps) {
+	if (!schema.paginate || totalRecords === 0) {
+		return null;
+	}
+
+	const lastPage = Math.ceil(totalRecords / perPage);
+
+	const pages: (number | 'ellipsis-start' | 'ellipsis-end')[] = [];
+	const totalPages = lastPage;
+	const current = currentPage;
+	const delta = 2;
+
+	if (totalPages <= 9) {
+		for (let i = 1; i <= totalPages; i++) {
+			pages.push(i);
+		}
+	} else {
+		pages.push(1);
+
+		const rangeStart = Math.max(2, current - delta);
+		const rangeEnd = Math.min(totalPages - 1, current + delta);
+
+		if (rangeStart > 2) {
+			pages.push('ellipsis-start');
+		}
+
+		for (let i = rangeStart; i <= rangeEnd; i++) {
+			pages.push(i);
+		}
+
+		if (rangeEnd < totalPages - 1) {
+			pages.push('ellipsis-end');
+		}
+
+		pages.push(totalPages);
+	}
+
+	const rangeStart = (currentPage - 1) * perPage + 1;
+	const rangeEnd = Math.min(currentPage * perPage, totalRecords);
+
+	const navButtonClass =
+		'inline-flex h-8 w-8 items-center justify-center rounded-full text-sm text-fg-secondary transition-colors hover:bg-hover/70 hover:text-fg disabled:cursor-not-allowed disabled:opacity-40 touch-manipulation';
+
+	const pageButtonClass = (active: boolean) =>
+		cn(
+			'inline-flex h-8 min-w-8 items-center justify-center rounded-full px-2.5 text-sm transition-colors',
+			active
+				? 'bg-raised font-medium text-fg shadow-soft-sm'
+				: 'text-fg-secondary hover:bg-hover/70 hover:text-fg',
+		);
+
+	return (
+		<div className={cn('flex flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between', className)}>
+			<div className="flex min-w-0 items-center gap-2">
+				<span className="whitespace-nowrap text-sm text-fg-secondary">
+					<span className="sm:hidden">
+						{translate('core:pagination.range_compact', {
+							start: rangeStart,
+							end: rangeEnd,
+							total: totalRecords,
+						})}
+					</span>
+					<span className="hidden sm:inline">
+						{translate('core:pagination.showing', {
+							start: rangeStart,
+							end: rangeEnd,
+							total: totalRecords,
+						})}
+					</span>
+				</span>
+			</div>
+
+			<div className="flex flex-wrap items-center gap-3 sm:gap-4">
+				{schema.recordsPerPageOptions && schema.recordsPerPageOptions.length > 0 && (
+					<div className="flex items-center gap-2">
+						<span className="whitespace-nowrap text-sm text-fg-secondary">
+							{translate('core:pagination.per_page_short')}
+						</span>
+						<div className="relative">
+							<select
+								value={perPage}
+								onChange={e => onPageSizeChange(Number(e.target.value))}
+								className="h-8 min-w-[4.5rem] appearance-none rounded-full border border-border bg-input/60 pl-3 pr-9 text-sm text-fg focus:outline-none focus:ring-2 focus:ring-ring"
+								aria-label={translate('core:pagination.per_page')}>
+								{schema.recordsPerPageOptions.map(option => (
+									<option key={option} value={option}>
+										{option}
+									</option>
+								))}
+							</select>
+							<ChevronDown className="pointer-events-none absolute right-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-fg-muted" />
+						</div>
+					</div>
+				)}
+
+				<div className="flex items-center gap-1">
+					<button
+						onClick={() => onPageChange(currentPage - 1)}
+						disabled={currentPage === 1}
+						className={navButtonClass}
+						title={translate('core:pagination.previous')}
+						aria-label={translate('core:pagination.previous')}>
+						<Icon name="ChevronLeft" size={16} />
+					</button>
+
+					<span className="min-w-16 px-2 py-1.5 text-center text-sm text-fg-secondary sm:hidden">
+						{currentPage} / {lastPage}
+					</span>
+
+					<div className="hidden items-center gap-1 sm:flex">
+						{pages.map((page, index) => {
+							if (page === 'ellipsis-start' || page === 'ellipsis-end') {
+								return (
+									<span key={`ellipsis-${index}`} className="px-2 text-sm text-fg-muted">
+										…
+									</span>
+								);
+							}
+
+							return (
+								<button
+									key={page}
+									onClick={() => onPageChange(page as number)}
+									className={pageButtonClass(currentPage === page)}
+									aria-current={currentPage === page ? 'page' : undefined}>
+									{page}
+								</button>
+							);
+						})}
+					</div>
+
+					<button
+						onClick={() => onPageChange(currentPage + 1)}
+						disabled={currentPage === lastPage}
+						className={navButtonClass}
+						title={translate('core:pagination.next')}
+						aria-label={translate('core:pagination.next')}>
+						<Icon name="ChevronRight" size={16} />
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}