@maxal_studio/kratosjs-react 1.0.0

package/src/components/columns/VideoColumnComponent.tsx

@@ -0,0 +1,236 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { ColumnProps } from './TextColumnComponent';
+import { formatValue } from '../../utils/tableFormatters';
+import { getColumnMediaDimensions } from '../../utils/columnMediaDimensions';
+import { Icon } from '../utils/Icon';
+import { translate } from '../../i18n/activeLocale';
+
+interface VideoPreviewModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+	videoUrl: string;
+	title?: string;
+	autoplay?: boolean;
+	controls?: boolean;
+	loop?: boolean;
+	muted?: boolean;
+}
+
+function VideoPreviewModal({
+	isOpen,
+	onClose,
+	videoUrl,
+	title,
+	autoplay = false,
+	controls = true,
+	loop = false,
+	muted = false,
+}: VideoPreviewModalProps) {
+	const videoRef = useRef<HTMLVideoElement>(null);
+
+	useEffect(() => {
+		if (isOpen && videoRef.current && autoplay) {
+			videoRef.current.play().catch(() => {
+				// Autoplay may be blocked by browser
+			});
+		}
+	}, [isOpen, autoplay]);
+
+	useEffect(() => {
+		// Pause video when modal closes
+		if (!isOpen && videoRef.current) {
+			videoRef.current.pause();
+		}
+	}, [isOpen]);
+
+	if (!isOpen) return null;
+
+	return (
+		<div
+			className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
+			onClick={onClose}>
+			<div
+				className="relative max-w-4xl w-full mx-4 bg-surface rounded-lg shadow-2xl overflow-hidden"
+				onClick={e => e.stopPropagation()}>
+				{/* Header */}
+				<div className="flex items-center justify-between px-4 py-3 border-b border-border">
+					<h3 className="text-lg font-semibold text-fg">{title || translate('core:file.video_preview')}</h3>
+					<button
+						onClick={onClose}
+						className="p-2 rounded-full bg-hover hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+						title={translate('core:modal.close')}>
+						<Icon name="X" size={20} className="text-fg" />
+					</button>
+				</div>
+
+				{/* Video */}
+				<div className="p-4 bg-black">
+					<video
+						ref={videoRef}
+						src={videoUrl}
+						className="w-full max-h-[70vh] object-contain"
+						controls={controls}
+						loop={loop}
+						muted={muted}
+						playsInline
+					/>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+/**
+ * Resolve thumbnail URL from column config
+ * Supports: field name string, function string (serialized), variants, or default thumbnail
+ */
+function resolveThumbnail(column: ColumnProps['column'], record: Record<string, any>): string | null {
+	const rawValue = record[column.name];
+
+	// Check for variants.thumbnail.url in new format
+	if (rawValue && typeof rawValue === 'object' && rawValue.variants?.thumbnail?.url) {
+		return rawValue.variants.thumbnail.url;
+	}
+
+	// Check for thumbnail function (serialized as string)
+	if (column.thumbnailFn) {
+		try {
+			// eslint-disable-next-line no-new-func
+			const thumbnailFn = new Function('return ' + column.thumbnailFn)();
+			const result = thumbnailFn(rawValue, record);
+			if (result) return result;
+		} catch {
+			console.warn('Failed to execute thumbnail function');
+		}
+	}
+
+	// Check for thumbnail field name
+	if (column.thumbnailField) {
+		const fieldName = column.thumbnailField as string;
+		// Support nested field access (e.g., 'mediaFile.thumbnailUrl')
+		const fieldValue = fieldName.split('.').reduce((obj: any, key) => obj?.[key], record);
+		if (fieldValue) {
+			// If it's a string, use it directly; otherwise try to format it
+			// Also check if it's the new format { url, key, storage }
+			if (typeof fieldValue === 'string') {
+				return fieldValue;
+			}
+			if (typeof fieldValue === 'object' && fieldValue?.url) {
+				return fieldValue.url;
+			}
+		}
+	}
+
+	// Fallback to default thumbnail
+	if (column.defaultThumbnail) {
+		return column.defaultThumbnail as string;
+	}
+
+	return null;
+}
+
+export function VideoColumnComponent({ column, record }: ColumnProps) {
+	const [previewOpen, setPreviewOpen] = useState(false);
+
+	const rawValue = record[column.name];
+	// 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 }
+	let videoUrl: string | null = null;
+	if (formattedValue) {
+		if (typeof formattedValue === 'object' && formattedValue !== null && formattedValue.url) {
+			videoUrl = formattedValue.url;
+		} else if (typeof formattedValue === 'string') {
+			videoUrl = formattedValue;
+		}
+	}
+
+	// Get thumbnail URL using the resolver
+	const thumbnailUrl = resolveThumbnail(column, record);
+
+	const dimensions = getColumnMediaDimensions(column, 40);
+	const placeholderIcon = (column.placeholderIcon as string) || 'Video';
+
+	const getContainerClasses = () => {
+		const classes = [
+			'relative',
+			'flex',
+			'items-center',
+			'justify-center',
+			'cursor-pointer',
+			'overflow-hidden',
+			'bg-gray-100',
+			'dark:bg-gray-800',
+			'hover:opacity-80',
+			'transition-opacity',
+			'group',
+		];
+
+		if (column.circular) {
+			classes.push('rounded-full');
+		} else if (column.square) {
+			classes.push('rounded-none');
+		} else {
+			classes.push('rounded');
+		}
+
+		return classes.join(' ');
+	};
+
+	const handleClick = () => {
+		if (videoUrl) {
+			setPreviewOpen(true);
+		}
+	};
+
+	// If no video URL, show disabled state
+	if (!videoUrl) {
+		return (
+			<div className={`${getContainerClasses()} opacity-50 cursor-not-allowed`} style={dimensions}>
+				<Icon name={placeholderIcon} size={20} className="text-gray-400" />
+			</div>
+		);
+	}
+
+	return (
+		<>
+			<div className={getContainerClasses()} style={dimensions} onClick={handleClick}>
+				{thumbnailUrl ? (
+					<>
+						<img
+							src={thumbnailUrl}
+							alt={translate('core:common.video_thumbnail')}
+							className="w-full h-full object-cover"
+						/>
+						{/* Play overlay */}
+						<div className="absolute inset-0 flex items-center justify-center bg-black/30 group-hover:bg-black/40 transition-colors">
+							<div className="w-8 h-8 flex items-center justify-center bg-white/90 rounded-full">
+								<Icon name="Play" size={16} className="text-gray-800 ml-0.5" />
+							</div>
+						</div>
+					</>
+				) : (
+					<>
+						<Icon name={placeholderIcon} size={24} className="text-gray-500 dark:text-gray-400" />
+						{/* Play indicator */}
+						<div className="absolute bottom-1 right-1 w-4 h-4 flex items-center justify-center bg-accent rounded-full">
+							<Icon name="Play" size={10} className="text-white ml-0.5" />
+						</div>
+					</>
+				)}
+			</div>
+
+			<VideoPreviewModal
+				isOpen={previewOpen}
+				onClose={() => setPreviewOpen(false)}
+				videoUrl={videoUrl}
+				title={column.previewTitle as string | undefined}
+				autoplay={column.autoplay as boolean | undefined}
+				controls={column.controls !== false}
+				loop={column.loop as boolean | undefined}
+				muted={column.muted as boolean | undefined}
+			/>
+		</>
+	);
+}

package/src/components/columns/ViewColumnComponent.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ColumnProps } from './TextColumnComponent';
+
+export function ViewColumnComponent({ column, record }: ColumnProps) {
+	// ViewColumn is for custom rendering - in a real implementation,
+	// this would load a custom view/template
+	// For now, just display a placeholder
+	return <span className="text-fg-secondary italic">Custom view: {column.view}</span>;
+}

package/src/components/errors/ErrorBoundary.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { PillButton } from '../ui/PillButton';
+import { translate } from '../../i18n/activeLocale';
+
+export interface ErrorBoundaryProps {
+	children: React.ReactNode;
+	/** Custom fallback; receives the error and a reset callback */
+	fallback?: (error: Error, reset: () => void) => React.ReactNode;
+	/** Short label for the failed area, shown in the default fallback */
+	label?: string;
+}
+
+interface ErrorBoundaryState {
+	error: Error | null;
+}
+
+/**
+ * Generic error boundary so a crash in one route, modal or widget
+ * doesn't take down the whole admin panel.
+ */
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+	state: ErrorBoundaryState = { error: null };
+
+	static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+		return { error };
+	}
+
+	componentDidCatch(error: Error, info: React.ErrorInfo) {
+		console.error('KratosJS error boundary caught:', error, info.componentStack);
+	}
+
+	reset = () => {
+		this.setState({ error: null });
+	};
+
+	render() {
+		const { error } = this.state;
+		if (!error) {
+			return this.props.children;
+		}
+
+		if (this.props.fallback) {
+			return this.props.fallback(error, this.reset);
+		}
+
+		return (
+			<div className="m-4 rounded-lg border border-danger/30 bg-danger-soft p-4">
+				<p className="text-sm font-semibold text-danger">
+					{this.props.label ? `Something went wrong in ${this.props.label}` : 'Something went wrong'}
+				</p>
+				<p className="mt-1 text-sm k-text-secondary break-words">{error.message}</p>
+				<PillButton type="button" variant="default" onClick={this.reset} className="mt-3">
+					{translate('core:common.try_again')}
+				</PillButton>
+			</div>
+		);
+	}
+}

package/src/components/filters/CustomFilterComponent.tsx

@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import { SerializedFilter } from '@maxal_studio/kratosjs';
+import { cn } from '../../utils/classNames';
+import { PillButton } from '../ui/PillButton';
+import { translate } from '../../i18n/activeLocale';
+
+interface CustomFilterProps {
+	filter: SerializedFilter;
+	value?: string[];
+	onChange: (value: string[] | undefined) => void;
+	embedded?: boolean;
+}
+
+export function CustomFilterComponent({ filter, value, onChange, embedded = false }: CustomFilterProps) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [localSelectedValues, setLocalSelectedValues] = useState<string[]>([]);
+	const appliedValues = Array.isArray(value) ? value : value ? [value] : [];
+
+	const options = filter.componentProps?.options || [];
+
+	const toggleOption = (option: string) => {
+		const newValues = localSelectedValues.includes(option)
+			? localSelectedValues.filter(v => v !== option)
+			: [...localSelectedValues, option];
+
+		setLocalSelectedValues(newValues);
+	};
+
+	const clearAll = () => {
+		setLocalSelectedValues([]);
+		onChange(undefined);
+		setIsOpen(false);
+	};
+
+	const applyChanges = () => {
+		onChange(localSelectedValues.length > 0 ? localSelectedValues : undefined);
+		setIsOpen(false);
+	};
+
+	const handleOpen = () => {
+		setLocalSelectedValues(appliedValues);
+		setIsOpen(embedded ? !isOpen : true);
+	};
+
+	return (
+		<div className="relative">
+			<button
+				onClick={handleOpen}
+				type="button"
+				className={cn(
+					'w-full h-10 px-3 pr-10 text-sm text-left rounded-lg border transition-colors',
+					'bg-input text-fg border-border',
+					'focus:outline-none focus:ring-2 focus:ring-ring focus:border-accent',
+					appliedValues.length > 0 && 'ring-2 ring-ring border-accent',
+				)}>
+				<div className="flex items-center justify-between">
+					<span className="truncate">
+						{appliedValues.length > 0 ? appliedValues.map(v => v).join(', ') : 'Select...'}
+					</span>
+					<div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1">
+						{appliedValues.length > 0 && (
+							<span className="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-bold text-white bg-accent rounded-full">
+								{appliedValues.length}
+							</span>
+						)}
+						<svg
+							className="w-4 h-4 text-fg-secondary"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24">
+							<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+						</svg>
+					</div>
+				</div>
+			</button>
+
+			{isOpen && (
+				<>
+					{!embedded && <div className="fixed inset-0 z-[60]" onClick={() => setIsOpen(false)} />}
+
+					<div
+						className={cn(
+							'flex max-h-[400px] flex-col overflow-hidden border border-border bg-surface',
+							embedded
+								? 'mt-2 rounded-xl'
+								: 'absolute left-0 right-0 top-full z-[70] mt-2 rounded-lg shadow-xl',
+						)}>
+						<div className="p-2 overflow-y-auto flex-1">
+							{options.map((option: string) => (
+								<label
+									key={option}
+									className={cn(
+										'flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer transition-colors',
+										'hover:bg-hover',
+										localSelectedValues.includes(option) && 'bg-muted',
+									)}>
+									<input
+										type="checkbox"
+										checked={localSelectedValues.includes(option)}
+										onChange={() => toggleOption(option)}
+										className="w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-accent focus:ring-ring"
+									/>
+									<span className="text-sm text-fg capitalize">{option}</span>
+								</label>
+							))}
+							{options.length === 0 && (
+								<div className="px-3 py-4 text-center text-sm text-fg-secondary">
+									{translate('core:filters.no_options')}
+								</div>
+							)}
+						</div>
+
+						<div className="flex items-center justify-between p-2 border-t border-border flex-shrink-0">
+							<button
+								onClick={clearAll}
+								type="button"
+								className="text-xs font-medium text-fg-secondary hover:text-fg"
+								disabled={localSelectedValues.length === 0}>
+								{translate('core:common.clear')}
+							</button>
+							<PillButton type="button" variant="primary" onClick={applyChanges}>
+								{translate('core:common.apply')}
+							</PillButton>
+						</div>
+					</div>
+				</>
+			)}
+		</div>
+	);
+}