@maxal_studio/kratosjs-react 1.0.0

package/src/components/blocks/TableBlockRenderer.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { TableRenderer } from '../../TableRenderer';
+import { cn } from '../../utils/classNames';
+
+export interface TableBlockRendererProps {
+	block: any;
+	apiBaseUrl?: string;
+}
+
+export function TableBlockRenderer({ block, apiBaseUrl }: TableBlockRendererProps) {
+	const dataUrl = block.dataUrl
+		? apiBaseUrl
+			? `${apiBaseUrl}/${block.dataUrl}`
+			: block.dataUrl
+		: apiBaseUrl
+			? `${apiBaseUrl}/custom/list`
+			: undefined;
+
+	return (
+		<>
+			{dataUrl && (
+				<TableRenderer
+					isResource={false}
+					schema={block.table}
+					apiUrl={dataUrl}
+					apiBaseUrl={apiBaseUrl}
+					onCreateClick={undefined}
+					canCreate={false}
+				/>
+			)}
+		</>
+	);
+}

package/src/components/blocks/TabsBlockRenderer.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { BlockRenderer } from './BlockRenderer';
+import { Icon } from '../utils/Icon';
+import { cn } from '../../utils/classNames';
+
+export interface TabsBlockRendererProps {
+	block: any;
+	blockData?: Record<string, any>;
+	apiBaseUrl?: string;
+}
+
+export function TabsBlockRenderer({ block, blockData, apiBaseUrl }: TabsBlockRendererProps) {
+	const [activeTab, setActiveTab] = useState(block.defaultTab || 0);
+
+	return (
+		<>
+			{/* Tab Headers */}
+			<div className="flex border-b border-gray-200 dark:border-gray-700 mb-4">
+				{block.tabs.map((tab: any, index: number) => (
+					<button
+						key={index}
+						onClick={() => setActiveTab(index)}
+						className={cn(
+							'px-4 py-2 font-medium text-sm transition-colors',
+							'border-b-2 -mb-px',
+							activeTab === index
+								? 'border-accent text-accent'
+								: 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200',
+						)}>
+						{tab.icon && (
+							<span className="inline-flex items-center gap-2">
+								<Icon name={tab.icon} className="w-4 h-4" />
+								{tab.label}
+							</span>
+						)}
+						{!tab.icon && tab.label}
+					</button>
+				))}
+			</div>
+
+			{/* Tab Content */}
+			<div>
+				{block.tabs[activeTab]?.blocks.map((nestedBlock: any, index: number) => (
+					<BlockRenderer key={index} block={nestedBlock} blockData={blockData} apiBaseUrl={apiBaseUrl} />
+				))}
+			</div>
+		</>
+	);
+}

package/src/components/blocks/WidgetBlockRenderer.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useWidgetRegistry } from '../../contexts/WidgetRegistryContext';
+
+export interface WidgetBlockRendererProps {
+	block: any;
+	data: any;
+}
+
+export function WidgetBlockRenderer({ block, data }: WidgetBlockRendererProps) {
+	const widgets = useWidgetRegistry();
+	const WidgetComponent = widgets[block.widget.type];
+
+	if (!WidgetComponent) {
+		console.warn(`Widget type "${block.widget.type}" not registered`);
+		return null;
+	}
+
+	return <WidgetComponent widget={block.widget} data={data} />;
+}

package/src/components/columns/CheckboxColumnComponent.tsx

@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from 'react';
+import { ColumnProps } from './TextColumnComponent';
+
+export interface EditableColumnProps extends ColumnProps {
+	onCellChange?: (value: any) => void;
+}
+
+export function CheckboxColumnComponent({ column, record, onCellChange }: EditableColumnProps) {
+	const [value, setValue] = useState(Boolean(record[column.name]));
+	const isDisabled = column.disabled;
+
+	// Update local value when record changes (e.g., after reset)
+	useEffect(() => {
+		setValue(Boolean(record[column.name]));
+	}, [record[column.name]]);
+
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		if (isDisabled) return;
+
+		const newValue = e.target.checked;
+		setValue(newValue);
+
+		// Notify parent of change
+		if (onCellChange) {
+			onCellChange(newValue);
+		}
+	};
+
+	return (
+		<input
+			type="checkbox"
+			checked={value}
+			onChange={handleChange}
+			disabled={isDisabled}
+			className="w-4 h-4 text-accent bg-gray-100 border-gray-300 rounded focus:ring-ring dark:focus:ring-ring dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
+		/>
+	);
+}

package/src/components/columns/ColorColumnComponent.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ColumnProps } from './TextColumnComponent';
+import { formatValue } from '../../utils/tableFormatters';
+
+export function ColorColumnComponent({ column, record }: ColumnProps) {
+	const rawValue = record[column.name];
+	// Apply formatter if present
+	const value = formatValue(rawValue, column, record);
+
+	if (!value) {
+		return <span className="text-fg-secondary">-</span>;
+	}
+
+	return (
+		<div className="flex items-center gap-2">
+			<div
+				className="w-6 h-6 rounded border border-gray-300 dark:border-gray-600"
+				style={{ backgroundColor: value }}
+			/>
+			<span className="text-sm text-fg-secondary font-mono">{value}</span>
+		</div>
+	);
+}

package/src/components/columns/CustomColumn.test.tsx

@@ -0,0 +1,55 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { TableRow } from '../table/TableRow';
+import { ColumnRegistryProvider } from '../../contexts/ColumnRegistryContext';
+import type { ColumnProps } from './TextColumnComponent';
+
+// A custom column an app registers without a plugin. In production this is wired
+// via mountAdminPanel({ columns: { 'star-rating': StarRatingColumn } }); here we
+// feed it straight into the registry provider, which is the same path.
+function StarRatingColumn({ column, record }: ColumnProps) {
+	return <span data-testid="stars">{`${record[column.name]} / 5`}</span>;
+}
+
+const noop = () => {};
+
+function renderRow(registry: Record<string, any>) {
+	const column = { type: 'star-rating', name: 'rating' } as any;
+	render(
+		<ColumnRegistryProvider registry={registry}>
+			<table>
+				<tbody>
+					<TableRow
+						schema={{ columns: [column] } as any}
+						row={{ rating: 4 }}
+						rowIndex={0}
+						totalRows={1}
+						rowId={1}
+						visibleColumns={[column]}
+						isSelected={false}
+						hasChanges={false}
+						openActionsRowId={null}
+						onRowSelect={noop}
+						onCellChange={noop}
+						onRowAction={noop}
+						onSaveRow={noop}
+						onResetRow={noop}
+						onToggleActions={noop}
+					/>
+				</tbody>
+			</table>
+		</ColumnRegistryProvider>,
+	);
+}
+
+describe('TableRow custom column registration', () => {
+	it('renders a custom column registered via the column registry', () => {
+		renderRow({ 'star-rating': StarRatingColumn });
+		expect(screen.getByTestId('stars')).toHaveTextContent('4 / 5');
+	});
+
+	it('falls back to the unknown-column cell when the type is not registered', () => {
+		renderRow({});
+		expect(screen.getByText(/unknown column type: star-rating/i)).toBeInTheDocument();
+	});
+});

package/src/components/columns/DeeplinkWrapper.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { SerializedColumn } from '@maxal_studio/kratosjs';
+import { executeSerializedFunction } from '../../runtime/serializedFunctions';
+import { useResourceModal } from '../../contexts/ResourceModalContext';
+
+interface DeeplinkWrapperProps {
+	column: SerializedColumn;
+	record: Record<string, any>;
+	value: any;
+	children: React.ReactNode;
+	className?: string;
+}
+
+/**
+ * Reusable component that wraps content with deeplink navigation functionality
+ * Uses an anchor tag for proper HTML content support and semantic correctness
+ */
+export function DeeplinkWrapper({ column, record, value, children, className = '' }: DeeplinkWrapperProps) {
+	const navigate = useNavigate();
+	const location = useLocation();
+	const { openModal } = useResourceModal();
+
+	// Determine current resource from URL
+	const getCurrentResource = () => {
+		const pathParts = location.pathname.split('/').filter(Boolean);
+		// First part after root is typically the resource slug
+		return pathParts[0] || null;
+	};
+
+	// Check if deeplink exists
+	if (!column.deeplink) {
+		return <>{children}</>;
+	}
+
+	const handleClick = (e: React.MouseEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+
+		const deeplink = column.deeplink;
+		if (!deeplink) return;
+
+		try {
+			// Get the record ID
+			let recordId: string | undefined;
+
+			if (deeplink.id) {
+				// Static ID string
+				recordId = deeplink.id;
+			} else if (deeplink.idFn) {
+				// Execute the serialized function to get the ID
+				recordId = executeSerializedFunction(deeplink.idFn, value, record);
+			}
+
+			// Handle resource deeplinks
+			if (deeplink.resource) {
+				// Check if we're currently on the target resource page
+				const currentPath = location.pathname;
+				const isOnTargetResource = currentPath.startsWith(`/${deeplink.resource}`);
+
+				if (recordId) {
+					const mode = deeplink.edit ? 'edit' : 'view';
+					const currentResource = getCurrentResource();
+					const isSameResource = currentResource === deeplink.resource;
+
+					if (isSameResource) {
+						// Same resource: navigate to update URL (for bookmarking)
+						// The URL listener in ResourceListPage will open the modal via context
+						const path = deeplink.edit
+							? `/${deeplink.resource}/${recordId}/edit`
+							: `/${deeplink.resource}/${recordId}`;
+						navigate(path);
+					} else {
+						// Cross-resource: push the target URL into browser history so the
+						// address bar updates, but do NOT call navigate() — that would unmount
+						// the current page.  Store the current URL as originUrl so AdminPanel
+						// can restore it with replaceState when the modal closes.
+						const originUrl = location.pathname + location.search;
+						const targetPath = deeplink.edit
+							? `/${deeplink.resource}/${recordId}/edit`
+							: `/${deeplink.resource}/${recordId}`;
+						window.history.pushState(null, '', targetPath);
+						openModal(deeplink.resource, mode, recordId, undefined, undefined, originUrl);
+					}
+				} else {
+					// No ID provided, navigate to resource list page
+					navigate(`/${deeplink.resource}`);
+				}
+			} else if (deeplink.page) {
+				// Page navigation
+				navigate(`/page/${deeplink.page}`);
+			}
+		} catch (error) {
+			console.error('Error handling deeplink:', error);
+		}
+	};
+
+	return (
+		<a href="#" onClick={handleClick} className={`cursor-pointer text-accent hover:underline ${className}`.trim()}>
+			{children}
+		</a>
+	);
+}

package/src/components/columns/IconColumnComponent.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ColumnProps } from './TextColumnComponent';
+import { formatValue } from '../../utils/tableFormatters';
+import { cn } from '../../utils/classNames';
+import { Icon, IconName } from '../utils/Icon';
+import { executeSerializedFunction } from '../../runtime/serializedFunctions';
+
+export function IconColumnComponent({ column, record }: ColumnProps) {
+	const rawValue = record[column.name];
+	// Apply formatStateUsing if present
+	const value = formatValue(rawValue, column, record);
+
+	// Determine icon name
+	let iconName: string | null = null;
+	if (column.iconFn) {
+		// Execute serialized function
+		const result = executeSerializedFunction(column.iconFn, value, record);
+		iconName = result !== undefined ? result : null;
+	} else if (column.icon) {
+		if (typeof column.icon === 'string') {
+			// Static icon
+			iconName = column.icon;
+		} else if (typeof column.icon === 'object') {
+			// Object mapping
+			iconName = column.icon[value] || null;
+		}
+	}
+
+	// Determine color class
+	let colorClass = 'text-fg';
+	if (column.iconColorFn) {
+		// Execute serialized function
+		const result = executeSerializedFunction(column.iconColorFn, value, record);
+		colorClass = result !== undefined ? result : 'text-fg';
+	} else if (column.iconColor) {
+		if (typeof column.iconColor === 'string') {
+			// Static color
+			colorClass = column.iconColor;
+		} else if (typeof column.iconColor === 'object') {
+			// Object mapping
+			colorClass = column.iconColor[value] || 'text-fg';
+		}
+	}
+
+	// If no icon is determined, show placeholder
+	if (!iconName) {
+		return <span className="text-fg-secondary">-</span>;
+	}
+
+	// Get size from column (default to 20px)
+	const size = column.size || 20;
+
+	// Render Lucide icon
+	return <Icon name={iconName} size={size} className={cn(colorClass)} />;
+}

package/src/components/columns/ImageColumnComponent.tsx

@@ -0,0 +1,220 @@
+import React, { useState } from 'react';
+import { ColumnProps } from './TextColumnComponent';
+import { formatValue } from '../../utils/tableFormatters';
+import { getColumnMediaDimensions } from '../../utils/columnMediaDimensions';
+import { Icon } from '../utils/Icon';
+import { DeeplinkWrapper } from './DeeplinkWrapper';
+import { translate } from '../../i18n/activeLocale';
+
+interface ImagePreviewModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+	imageUrl: string;
+	title?: string;
+}
+
+function ImagePreviewModal({ isOpen, onClose, imageUrl, title }: ImagePreviewModalProps) {
+	if (!isOpen) return null;
+
+	return (
+		<div
+			className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
+			onClick={onClose}>
+			<div
+				className="relative max-w-4xl max-h-[90vh] p-2 bg-surface rounded-lg shadow-2xl"
+				onClick={e => e.stopPropagation()}>
+				{/* Header */}
+				{title && (
+					<div className="px-4 py-2 border-b border-border">
+						<h3 className="text-lg font-semibold text-fg">{title}</h3>
+					</div>
+				)}
+
+				{/* Close button */}
+				<button
+					onClick={onClose}
+					className="absolute top-2 right-2 p-2 rounded-full bg-hover hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors z-10"
+					title={translate('core:modal.close')}>
+					<Icon name="X" size={20} className="text-fg" />
+				</button>
+
+				{/* Image */}
+				<div className="p-4">
+					<img
+						src={imageUrl}
+						alt={title || translate('core:common.preview')}
+						className="max-w-full max-h-[80vh] object-contain rounded"
+					/>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function ImageColumnComponent({ column, record }: ColumnProps) {
+	const [previewOpen, setPreviewOpen] = useState(false);
+	const [previewUrl, setPreviewUrl] = useState<string>('');
+
+	const rawValue = record[column.name];
+	const value = rawValue;
+	const hasDeeplink = !!column.deeplink;
+	// Apply formatter if present (e.g., to extract nested property or prepend URL)
+	const formattedValue = formatValue(rawValue, column, record);
+
+	// Extract URL from new format: { key, storage, url } or use formatted value
+	let imageUrl: string | string[] | null = null;
+	if (formattedValue) {
+		if (typeof formattedValue === 'object' && formattedValue !== null) {
+			// New format: { key, storage, url } or array of such objects
+			if (Array.isArray(formattedValue)) {
+				imageUrl = formattedValue.map((item: any) => (typeof item === 'object' && item?.url ? item.url : item));
+			} else if (formattedValue.url) {
+				imageUrl = formattedValue.url;
+			} else {
+				imageUrl = formattedValue;
+			}
+		} else {
+			imageUrl = formattedValue;
+		}
+	}
+
+	imageUrl = imageUrl || column.defaultImageUrl;
+
+	if (!imageUrl) {
+		return <span className="text-fg-secondary">{translate('core:file.no_image')}</span>;
+	}
+
+	const getImageClasses = (circular: boolean) => {
+		if (circular) {
+			return 'h-full w-full object-cover';
+		}
+
+		const classes = ['object-cover'];
+
+		if (column.square) {
+			classes.push('rounded-none');
+		} else {
+			classes.push('rounded');
+		}
+
+		if (column.clickable || hasDeeplink) {
+			classes.push('cursor-pointer hover:opacity-80 transition-opacity');
+		}
+
+		return classes.join(' ');
+	};
+
+	const handleImageClick = (url: string) => {
+		// If there's a deeplink, don't handle the click here - DeeplinkWrapper will handle it
+		if (hasDeeplink) {
+			return;
+		}
+
+		// Fall back to existing clickable behavior
+		if (!column.clickable) return;
+
+		if (column.clickAction === 'link') {
+			window.open(url, '_blank');
+		} else {
+			// Default to preview
+			setPreviewUrl(url);
+			setPreviewOpen(true);
+		}
+	};
+
+	const dimensions = getColumnMediaDimensions(column, 40);
+	const isCircular = !!column.circular;
+
+	// Render single image helper
+	const renderImage = (url: string, extraClasses: string = '') => {
+		const interactive = column.clickable || hasDeeplink;
+
+		const imgElement = isCircular ? (
+			<span
+				className={`inline-flex shrink-0 overflow-hidden rounded-full ${interactive ? 'cursor-pointer hover:opacity-80 transition-opacity' : ''} ${extraClasses}`.trim()}
+				style={dimensions}
+				onClick={() => handleImageClick(url)}>
+				<img src={url} alt="" className={getImageClasses(true)} />
+			</span>
+		) : (
+			<img
+				src={url}
+				alt=""
+				className={`${getImageClasses(false)} ${extraClasses}`.trim()}
+				style={dimensions}
+				onClick={() => handleImageClick(url)}
+			/>
+		);
+
+		// Wrap in deeplink if exists
+		if (hasDeeplink) {
+			return (
+				<DeeplinkWrapper column={column} record={record} value={value} className="inline-block">
+					{imgElement}
+				</DeeplinkWrapper>
+			);
+		}
+
+		return imgElement;
+	};
+
+	// Handle arrays (stacked images)
+	if (Array.isArray(imageUrl)) {
+		const images = column.limit ? imageUrl.slice(0, column.limit) : imageUrl;
+
+		if (column.stacked) {
+			return (
+				<>
+					<div className="flex -space-x-2">
+						{images.map((url, idx) => (
+							<React.Fragment key={idx}>
+								{renderImage(url, 'ring-2 ring-white dark:ring-gray-800')}
+							</React.Fragment>
+						))}
+						{column.limit && imageUrl.length > column.limit && (
+							<div
+								className={`flex items-center justify-center bg-muted text-fg-secondary text-xs font-medium ring-2 ring-surface ${isCircular ? 'rounded-full' : 'rounded'}`.trim()}
+								style={dimensions}>
+								+{imageUrl.length - column.limit}
+							</div>
+						)}
+					</div>
+					<ImagePreviewModal
+						isOpen={previewOpen}
+						onClose={() => setPreviewOpen(false)}
+						imageUrl={previewUrl}
+						title={column.previewTitle as string | undefined}
+					/>
+				</>
+			);
+		}
+
+		return (
+			<>
+				<div className="flex gap-2">
+					{images.map((url, idx) => (
+						<React.Fragment key={idx}>{renderImage(url)}</React.Fragment>
+					))}
+				</div>
+				<ImagePreviewModal
+					isOpen={previewOpen}
+					onClose={() => setPreviewOpen(false)}
+					imageUrl={previewUrl}
+					title={column.previewTitle as string | undefined}
+				/>
+			</>
+		);
+	}
+
+	return (
+		<>
+			{renderImage(imageUrl)}
+			<ImagePreviewModal
+				isOpen={previewOpen}
+				onClose={() => setPreviewOpen(false)}
+				imageUrl={previewUrl}
+				title={column.previewTitle as string | undefined}
+			/>
+		</>
+	);
+}