@maxal_studio/kratosjs-react 1.0.0

package/src/components/columns/MediaColumnComponent.tsx

@@ -0,0 +1,294 @@
+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 { MediaPreviewModal } from '../utils/MediaPreviewModal';
+import { translate } from '../../i18n/activeLocale';
+
+type MediaType = 'image' | 'video' | 'audio' | null;
+
+/**
+ * Resolve media type from column config
+ */
+function resolveMediaType(column: ColumnProps['column'], record: Record<string, any>): MediaType {
+	const rawValue = record[column.name];
+
+	// Check for media type function (serialized as string)
+	if (column.mediaTypeFn) {
+		try {
+			// eslint-disable-next-line no-new-func
+			const mediaTypeFn = new Function('return ' + column.mediaTypeFn)();
+			const result = mediaTypeFn(rawValue, record);
+			if (result === 'image' || result === 'video' || result === 'audio') return result;
+			return 'image';
+		} catch {
+			console.warn('Failed to execute mediaType function');
+			return 'image';
+		}
+	}
+
+	// Static media type
+	if (column.mediaType === 'image' || column.mediaType === 'video' || column.mediaType === 'audio') {
+		return column.mediaType;
+	}
+
+	// Default to image
+	return 'image';
+}
+
+/**
+ * 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 check for new format
+			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 MediaColumnComponent({ column, record }: ColumnProps) {
+	const [previewOpen, setPreviewOpen] = useState(false);
+
+	const rawValue = record[column.name];
+	// Apply formatter if present
+	const formattedValue = formatValue(rawValue, column, record);
+
+	// Extract URL from new format: { key, storage, url }
+	let mediaUrl: string | null = null;
+	if (formattedValue) {
+		if (typeof formattedValue === 'object' && formattedValue !== null && formattedValue.url) {
+			mediaUrl = formattedValue.url;
+		} else if (typeof formattedValue === 'string') {
+			mediaUrl = formattedValue;
+		}
+	}
+
+	// Resolve media type
+	const mediaType = resolveMediaType(column, record);
+
+	// Get thumbnail URL (for videos)
+	const thumbnailUrl = resolveThumbnail(column, record);
+
+	// Get default image URL (for images)
+	const defaultImageUrl = column.defaultImageUrl as string | undefined;
+
+	// Aspect ratio (default 16/9; circular columns force 1:1 via getColumnMediaDimensions)
+	const dimensions = getColumnMediaDimensions(column, 40);
+	const placeholderIcon =
+		(column.placeholderIcon as string) ||
+		(mediaType === 'video' ? 'Video' : mediaType === 'audio' ? 'Music' : 'Image');
+	const isClickable = column.clickable !== false;
+
+	const getContainerClasses = () => {
+		const classes = ['relative', 'flex', 'items-center', 'justify-center', 'overflow-hidden'];
+
+		if (column.circular) {
+			classes.push('rounded-full');
+		} else if (column.square) {
+			classes.push('rounded-none');
+		} else {
+			classes.push('rounded');
+		}
+
+		if (isClickable && mediaUrl) {
+			classes.push('cursor-pointer', 'hover:opacity-80', 'transition-opacity');
+		}
+
+		if (mediaType === 'video') {
+			classes.push('bg-gray-100', 'dark:bg-gray-800', 'group');
+		}
+
+		return classes.join(' ');
+	};
+
+	const handleClick = () => {
+		if (!isClickable || !mediaUrl) return;
+
+		if (column.clickAction === 'link') {
+			window.open(mediaUrl, '_blank');
+		} else {
+			setPreviewOpen(true);
+		}
+	};
+
+	// If media type is null (hidden), show nothing
+	if (mediaType === null) {
+		return <span className="text-fg-secondary">-</span>;
+	}
+
+	// If no media URL
+	if (!mediaUrl) {
+		// For images, check default image URL
+		if (mediaType === 'image' && defaultImageUrl) {
+			return (
+				<>
+					<img
+						src={defaultImageUrl}
+						alt=""
+						className={`object-cover ${getContainerClasses()}`}
+						style={dimensions}
+						onClick={handleClick}
+					/>
+					{isClickable && (
+						<MediaPreviewModal
+							isOpen={previewOpen}
+							onClose={() => setPreviewOpen(false)}
+							mediaUrl={defaultImageUrl}
+							mediaType="image"
+							title={column.previewTitle as string | undefined}
+						/>
+					)}
+				</>
+			);
+		}
+
+		// Show placeholder for video/audio
+		if (mediaType === 'video' || mediaType === 'audio') {
+			return (
+				<div
+					className={`${getContainerClasses()} opacity-50 cursor-not-allowed bg-gray-100 dark:bg-gray-800`}
+					style={dimensions}>
+					<Icon name={placeholderIcon} size={20} className="text-gray-400" />
+				</div>
+			);
+		}
+
+		return <span className="text-fg-secondary">{translate('core:file.no_image')}</span>;
+	}
+
+	// Render video
+	if (mediaType === 'video') {
+		return (
+			<>
+				<div
+					className={`${getContainerClasses()} bg-gray-100 dark:bg-gray-800`}
+					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>
+
+				<MediaPreviewModal
+					isOpen={previewOpen}
+					onClose={() => setPreviewOpen(false)}
+					mediaUrl={mediaUrl}
+					mediaType="video"
+					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}
+				/>
+			</>
+		);
+	}
+
+	// Render audio
+	if (mediaType === 'audio') {
+		return (
+			<>
+				<div
+					className={`${getContainerClasses()} bg-linear-to-br from-blue-600 to-purple-600`}
+					style={dimensions}
+					onClick={handleClick}>
+					<Icon name={placeholderIcon} size={24} className="text-white" />
+					{/* Play indicator */}
+					<div className="absolute bottom-1 right-1 w-4 h-4 flex items-center justify-center bg-white/90 rounded-full">
+						<Icon name="Play" size={10} className="text-gray-800 ml-0.5" />
+					</div>
+				</div>
+
+				<MediaPreviewModal
+					isOpen={previewOpen}
+					onClose={() => setPreviewOpen(false)}
+					mediaUrl={mediaUrl}
+					mediaType="audio"
+					title={column.previewTitle as string | undefined}
+					autoplay={column.autoplay as boolean | undefined}
+					controls={column.controls !== false}
+					loop={column.loop as boolean | undefined}
+				/>
+			</>
+		);
+	}
+
+	// Render single image
+	return (
+		<>
+			<img
+				src={mediaUrl}
+				alt=""
+				className={`object-cover ${getContainerClasses()}`}
+				style={dimensions}
+				onClick={handleClick}
+			/>
+			<MediaPreviewModal
+				isOpen={previewOpen}
+				onClose={() => setPreviewOpen(false)}
+				mediaUrl={mediaUrl}
+				mediaType="image"
+				title={column.previewTitle as string | undefined}
+			/>
+		</>
+	);
+}

package/src/components/columns/SelectColumnComponent.tsx

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react';
+import { ColumnProps } from './TextColumnComponent';
+
+export interface EditableColumnProps extends ColumnProps {
+	onCellChange?: (value: any) => void;
+}
+
+export function SelectColumnComponent({ column, record, onCellChange }: EditableColumnProps) {
+	const [value, setValue] = useState(record[column.name] || '');
+	const isDisabled = column.disabled;
+
+	// Update local value when record changes (e.g., after reset)
+	useEffect(() => {
+		setValue(record[column.name] || '');
+	}, [record[column.name]]);
+
+	const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+		if (isDisabled) return;
+
+		const newValue = e.target.value;
+		setValue(newValue);
+
+		// Notify parent of change
+		if (onCellChange) {
+			onCellChange(newValue);
+		}
+	};
+
+	return (
+		<select
+			value={value}
+			onChange={handleChange}
+			disabled={isDisabled}
+			className="k-input text-sm py-1.5 px-3 pr-8 rounded-md border border-border focus:outline-none focus:ring-2 focus:ring-ring focus:border-accent disabled:opacity-50 disabled:cursor-not-allowed transition-colors appearance-none bg-no-repeat bg-right"
+			style={{
+				backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E")`,
+				backgroundPosition: 'right 0.5rem center',
+				backgroundSize: '1.5em 1.5em',
+			}}>
+			{column.placeholder && column.selectablePlaceholder && <option value="">{column.placeholder}</option>}
+			{column.options &&
+				Object.entries(column.options).map(([key, label]) => (
+					<option key={key} value={key}>
+						{label}
+					</option>
+				))}
+		</select>
+	);
+}

package/src/components/columns/TagsColumnComponent.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { ColumnProps } from './TextColumnComponent';
+import { cn } from '../../utils/classNames';
+import { formatValue } from '../../utils/tableFormatters';
+
+export function TagsColumnComponent({ column, record }: ColumnProps) {
+	const rawValue = record[column.name];
+	// Apply formatter if present
+	const value = formatValue(rawValue, column, record);
+
+	if (!value || (Array.isArray(value) && value.length === 0)) {
+		return <span className="text-fg-secondary">-</span>;
+	}
+
+	const tags = Array.isArray(value) ? value : [value];
+	const displayTags = column.limit ? tags.slice(0, column.limit) : tags;
+
+	// If no tags to display, return empty
+	if (!displayTags || displayTags.length === 0) {
+		return <></>;
+	}
+
+	return (
+		<div className="flex flex-wrap gap-1">
+			{displayTags.map((tag, idx) => (
+				<span
+					key={idx}
+					className={cn(
+						'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium',
+						'bg-accent-soft dark:bg-accent-soft text-accent',
+					)}>
+					{String(tag)}
+				</span>
+			))}
+			{column.limit && tags.length > column.limit && (
+				<span
+					className={cn(
+						'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium',
+						'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300',
+					)}>
+					+{tags.length - column.limit}
+				</span>
+			)}
+		</div>
+	);
+}

package/src/components/columns/TextColumnComponent.tsx

@@ -0,0 +1,191 @@
+import React from 'react';
+import { SerializedColumn } from '@maxal_studio/kratosjs';
+import { cn } from '../../utils/classNames';
+import { formatValue } from '../../utils/tableFormatters';
+import { DeeplinkWrapper } from './DeeplinkWrapper';
+
+export interface ColumnProps {
+	column: SerializedColumn;
+	record: any;
+	rowIndex: number;
+}
+
+/**
+ * TextColumn component for displaying text values
+ */
+export function TextColumnComponent({ column, record, rowIndex }: ColumnProps) {
+	const value = record[column.name];
+
+	// Handle row index
+	if (column.rowIndex) {
+		const displayIndex = column.rowIndexFromZero ? rowIndex : rowIndex + 1;
+		return <span className="text-fg">{displayIndex}</span>;
+	}
+
+	// Format value (pass entire record for formatStateUsing function)
+	const formattedValue = formatValue(value, column, record);
+
+	if (!formattedValue) {
+		return <></>;
+	}
+
+	const hasDeeplink = !!column.deeplink;
+
+	// Handle arrays
+	if (Array.isArray(formattedValue)) {
+		const items = column.limit ? formattedValue.slice(0, column.limit) : formattedValue;
+		const shouldRenderHtml = column.stripHtml === false;
+
+		if (column.bulleted) {
+			return (
+				<ul className="list-disc list-inside space-y-1">
+					{items.map((item, idx) => {
+						const itemText = String(item);
+						return (
+							<li key={idx} className="text-fg text-sm">
+								{shouldRenderHtml ? <span dangerouslySetInnerHTML={{ __html: itemText }} /> : itemText}
+							</li>
+						);
+					})}
+					{column.limit && formattedValue.length > column.limit && (
+						<li className="text-fg-secondary text-sm italic">
+							+{formattedValue.length - column.limit} more
+						</li>
+					)}
+				</ul>
+			);
+		}
+
+		if (column.listWithLineBreaks) {
+			return (
+				<div className="space-y-1">
+					{items.map((item, idx) => {
+						const itemText = String(item);
+						return (
+							<div key={idx} className="text-fg text-sm">
+								{shouldRenderHtml ? <span dangerouslySetInnerHTML={{ __html: itemText }} /> : itemText}
+							</div>
+						);
+					})}
+					{column.limit && formattedValue.length > column.limit && (
+						<div className="text-fg-secondary text-sm italic">
+							+{formattedValue.length - column.limit} more
+						</div>
+					)}
+				</div>
+			);
+		}
+
+		// Default: comma-separated
+		const joinedText = items.join(', ');
+		return (
+			<span className="text-fg">
+				{shouldRenderHtml ? <span dangerouslySetInnerHTML={{ __html: joinedText }} /> : joinedText}
+			</span>
+		);
+	}
+
+	// Get styling classes
+	const getTextClasses = () => {
+		const classes = ['text-fg'];
+
+		if (column.weight) {
+			classes.push(`font-${column.weight}`);
+		}
+
+		if (column.fontFamily) {
+			classes.push(`font-${column.fontFamily}`);
+		}
+
+		if (column.size) {
+			if (typeof column.size === 'string') {
+				classes.push(`text-${column.size}`);
+			}
+		}
+
+		if (column.lineClamp) {
+			classes.push(`line-clamp-${column.lineClamp}`);
+		}
+
+		if (!column.wrap) {
+			classes.push('truncate');
+		}
+
+		return cn(classes);
+	};
+
+	// Check if HTML should be rendered (stripHtml defaults to true in backend)
+	const shouldRenderHtml = column.stripHtml === false;
+	const textContent = String(formattedValue);
+
+	// Render badge
+	if (column.badge) {
+		let badgeColor = 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200';
+
+		if (column.color) {
+			if (typeof column.color === 'object') {
+				// Color mapping based on value
+				const colorKey = column.color[value];
+				if (colorKey) {
+					badgeColor = getBadgeColorClasses(colorKey);
+				}
+			} else {
+				badgeColor = getBadgeColorClasses(column.color);
+			}
+		}
+
+		const badgeElement = (
+			<span
+				className={cn(
+					'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium',
+					badgeColor,
+					hasDeeplink && 'hover:opacity-80',
+				)}>
+				{shouldRenderHtml ? <span dangerouslySetInnerHTML={{ __html: textContent }} /> : textContent}
+			</span>
+		);
+
+		// Wrap badge in deeplink if exists
+		if (hasDeeplink) {
+			return (
+				<DeeplinkWrapper column={column} record={record} value={value} className="inline-block">
+					{badgeElement}
+				</DeeplinkWrapper>
+			);
+		}
+
+		return badgeElement;
+	}
+
+	// Regular text - render as HTML if stripHtml is false
+	const textElement = shouldRenderHtml ? <span dangerouslySetInnerHTML={{ __html: textContent }} /> : textContent;
+
+	// Wrap in deeplink if exists
+	if (hasDeeplink) {
+		return (
+			<DeeplinkWrapper column={column} record={record} value={value} className={getTextClasses()}>
+				{textElement}
+			</DeeplinkWrapper>
+		);
+	}
+
+	return (
+		<span className={getTextClasses()}>
+			{shouldRenderHtml ? <span dangerouslySetInnerHTML={{ __html: textContent }} /> : textContent}
+		</span>
+	);
+}
+
+function getBadgeColorClasses(color: string): string {
+	const colorMap: Record<string, string> = {
+		primary: 'bg-accent-soft dark:bg-accent-soft text-accent',
+		secondary: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200',
+		success: 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300',
+		danger: 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300',
+		warning: 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300',
+		info: 'bg-cyan-100 dark:bg-cyan-900/30 text-cyan-800 dark:text-cyan-300',
+		gray: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200',
+	};
+
+	return colorMap[color] || colorMap.gray;
+}

package/src/components/columns/TextInputColumnComponent.tsx

@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+import { ColumnProps } from './TextColumnComponent';
+
+export interface EditableColumnProps extends ColumnProps {
+	onCellChange?: (value: any) => void;
+}
+
+export function TextInputColumnComponent({ column, record, onCellChange }: EditableColumnProps) {
+	const [value, setValue] = useState(record[column.name] || '');
+	const isDisabled = column.disabled;
+
+	// Update local value when record changes (e.g., after reset)
+	useEffect(() => {
+		setValue(record[column.name] || '');
+	}, [record[column.name]]);
+
+	const handleChange = (newValue: string) => {
+		setValue(newValue);
+		// Notify parent of change
+		if (onCellChange) {
+			onCellChange(newValue);
+		}
+	};
+
+	return (
+		<input
+			type={column.inputType || 'text'}
+			value={value}
+			onChange={e => handleChange(e.target.value)}
+			disabled={isDisabled}
+			placeholder={column.placeholder}
+			className="k-input text-sm py-1.5 px-3 w-full rounded-md border border-border focus:outline-none focus:ring-2 focus:ring-ring focus:border-accent disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+		/>
+	);
+}

package/src/components/columns/ToggleColumnComponent.tsx

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from 'react';
+import { ColumnProps } from './TextColumnComponent';
+import { Icon } from '../utils/Icon';
+import { cn } from '../../utils/classNames';
+
+export interface EditableColumnProps extends ColumnProps {
+	onCellChange?: (value: any) => void;
+}
+
+export function ToggleColumnComponent({ 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 handleToggle = () => {
+		if (isDisabled) return;
+
+		const newValue = !value;
+		setValue(newValue);
+
+		// Notify parent of change
+		if (onCellChange) {
+			onCellChange(newValue);
+		}
+	};
+
+	// Get colors
+	const trackClasses =
+		(value ? column.onColor : column.offColor) ?? (value ? 'bg-accent' : 'bg-gray-200 dark:bg-gray-700');
+
+	return (
+		<button
+			type="button"
+			onClick={handleToggle}
+			disabled={isDisabled}
+			className={cn(
+				'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
+				'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+				'disabled:opacity-50 disabled:cursor-not-allowed',
+				...trackClasses.split(/\s+/),
+			)}>
+			<span
+				className={cn(
+					'inline-flex items-center justify-center h-4 w-4 transform rounded-full bg-white transition-transform',
+					value ? 'translate-x-6' : 'translate-x-1',
+				)}>
+				{column.onIcon && value && <Icon name={column.onIcon} size={10} className="text-green-600" />}
+				{column.offIcon && !value && <Icon name={column.offIcon} size={10} className="text-gray-400" />}
+			</span>
+		</button>
+	);
+}