@maxal_studio/kratosjs-react 1.0.0

package/src/components/ToggleField.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { getFieldError } from '../utils/fieldErrors';
+import { FieldProps } from '../types';
+import { useValidation } from '../hooks/useValidation';
+import { cn } from '../utils/classNames';
+import { Icon } from './utils/Icon';
+import { HintDisplay } from './utils/HintDisplay';
+import { ViewFieldWrapper } from './utils/ViewFieldWrapper';
+import { formatBoolean } from '../utils/formatValue';
+
+/**
+ * Toggle field component
+ * Renders a toggle switch with custom colors
+ */
+export function ToggleField(props: FieldProps) {
+	// View mode: render formatted display
+	if (props.mode === 'view') {
+		const value = props.value;
+		const displayValue = formatBoolean(value);
+		const isChecked = Boolean(value);
+
+		const onColor = 'text-green-600';
+		const offColor = 'text-red-600';
+
+		return (
+			<ViewFieldWrapper label={props.label}>
+				<div className="flex items-center gap-3">
+					<span className={cn(isChecked ? onColor : offColor)}>{displayValue}</span>
+				</div>
+			</ViewFieldWrapper>
+		);
+	}
+
+	const {
+		register,
+		control,
+		formState: { errors },
+	} = useFormContext();
+
+	const validation = useValidation(props.validation?.rules || [], props.operation, props.name);
+	const error = getFieldError(errors, props.name);
+	const hasError = !!error;
+
+	// Watch the toggle state
+	const isChecked = useWatch({ control, name: props.name, defaultValue: props.default || false });
+
+	// Map color names to Tailwind classes
+	const getColorClass = (color?: string) => {
+		const colorMap: Record<string, string> = {
+			success: 'bg-green-600 dark:bg-green-500',
+			danger: 'bg-red-600 dark:bg-red-500',
+			warning: 'bg-yellow-600 dark:bg-yellow-500',
+			info: 'bg-accent',
+			primary: 'bg-accent',
+		};
+		return colorMap[color || ''] || 'bg-accent';
+	};
+
+	// Map semantic color names to Tailwind classes; pass through full class strings as-is
+	const resolveTrackColor = (color: string | undefined, fallback: string): string[] => {
+		if (!color) return fallback.split(/\s+/);
+		if (/\b(bg|text)-/.test(color)) return color.split(/\s+/);
+		return getColorClass(color).split(/\s+/);
+	};
+
+	const onColor = resolveTrackColor(props.onColor, 'bg-accent');
+	const offColor = resolveTrackColor(props.offColor, 'bg-gray-200 dark:bg-gray-700');
+
+	return (
+		<div className="mb-4">
+			<div className="flex items-center justify-between">
+				<div className="flex-1">
+					{props.label && (
+						<label
+							htmlFor={props.name}
+							className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+							{props.label}
+							{validation.required && <span className="text-red-500 dark:text-red-400 ml-1">*</span>}
+						</label>
+					)}
+				</div>
+
+				<button
+					type="button"
+					role="switch"
+					aria-checked={isChecked}
+					disabled={props.disabled}
+					onClick={() => {
+						const checkbox = document.getElementById(props.name) as HTMLInputElement;
+						if (checkbox) {
+							checkbox.click();
+						}
+					}}
+					className={cn(
+						'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent',
+						'transition-colors duration-200 ease-in-out',
+						'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 dark:focus:ring-offset-gray-900',
+						...(isChecked ? onColor : offColor),
+						props.disabled && 'opacity-60 cursor-not-allowed',
+					)}>
+					<span
+						className={cn(
+							'pointer-events-none inline-flex items-center justify-center h-5 w-5 transform rounded-full bg-white dark:bg-gray-200 shadow ring-0',
+							'transition duration-200 ease-in-out',
+							isChecked ? 'translate-x-5' : 'translate-x-0',
+						)}>
+						{props.onIcon && isChecked && <Icon name={props.onIcon} size={12} className="text-green-600" />}
+						{props.offIcon && !isChecked && (
+							<Icon name={props.offIcon} size={12} className="text-gray-400" />
+						)}
+					</span>
+				</button>
+
+				{/* Hidden checkbox for form integration */}
+				<input id={props.name} type="checkbox" {...register(props.name, validation)} className="sr-only" />
+			</div>
+
+			{hasError && <p className="mt-1 text-sm text-red-600 dark:text-red-400">{error?.message as string}</p>}
+
+			{props.helperText && <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{props.helperText}</p>}
+
+			{!hasError && <HintDisplay hint={props.hint} hintIcon={props.hintIcon} hintColor={props.hintColor} />}
+		</div>
+	);
+}

package/src/components/ViewModal.tsx

@@ -0,0 +1,353 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { SerializedForm } from '@maxal_studio/kratosjs';
+import { ModalDrawer } from './ModalDrawer';
+import { ActionFormModal } from './ActionFormModal';
+import { RelationCreateModal } from './modals/RelationCreateModal';
+import { useRecordView } from './modals/view/useRecordView';
+import { RecordDetails } from './modals/view/RecordDetails';
+import { RecordActions } from './modals/view/RecordActions';
+import { Slot } from '../slots/Slot';
+import { RelationPanel } from './modals/view/RelationPanel';
+import { RelationTabs, GroupInnerTabs, groupRelations } from './modals/view/RelationTabs';
+import { Spinner } from './ui/Spinner';
+import { ErrorAlert } from './ui/ErrorAlert';
+import { useConfirm } from './ui/ConfirmDialog';
+import { useToast } from './ui/Toast';
+import { bulkDelete } from '../api/resourceApi';
+import { executeAction } from '../api/actionsApi';
+import { handleRedirect } from '../utils/redirectHandler';
+import { usePanelMetadata } from '../contexts/PanelMetadataContext';
+import { useResourceModal } from '../contexts/ResourceModalContext';
+import { SerializedRelation } from '../types';
+import { translate } from '../i18n/activeLocale';
+
+export type { SerializedRelation };
+
+interface ViewModalProps {
+	/** Whether the modal is open */
+	isOpen: boolean;
+	/** Function to close the modal */
+	onClose: () => void;
+	/** Resource slug (e.g., 'users', 'posts') */
+	resourceSlug: string;
+	/** Display name for the resource */
+	resourceName: string;
+	/** ID of the record to view */
+	recordId: string;
+	/** API base URL */
+	apiBaseUrl?: string;
+	/** Form schema for displaying fields */
+	formSchema: SerializedForm;
+	/** Stacking depth */
+	depth?: number;
+	/** Close all modals */
+	onCloseAll?: () => void;
+}
+
+export function ViewModal({
+	isOpen,
+	onClose,
+	resourceSlug,
+	resourceName,
+	recordId,
+	apiBaseUrl,
+	formSchema,
+	depth = 0,
+	onCloseAll,
+}: ViewModalProps) {
+	const navigate = useNavigate();
+	const confirm = useConfirm();
+	const toast = useToast();
+	const { getResourceLabel } = usePanelMetadata();
+	const { setModalTitle, removeModalTitle, openModal, closeModal } = useResourceModal();
+
+	// Capabilities come from the form schema
+	const canEdit = formSchema.canEdit !== false;
+	const canDelete = formSchema.canDelete !== false;
+
+	const view = useRecordView(isOpen, apiBaseUrl, resourceSlug, recordId);
+
+	// Top-level tab: 'details', a group key, or an ungrouped relation name
+	const [activeTopTab, setActiveTopTab] = useState<string>('details');
+	// Inner tab per group: groupKey -> relation.name
+	const [activeGroupRelation, setActiveGroupRelation] = useState<Record<string, string>>({});
+	const [relationRefreshKeys, setRelationRefreshKeys] = useState<Record<string, number>>({});
+	const [createRelation, setCreateRelation] = useState<SerializedRelation | null>(null);
+	const [urlCopied, setUrlCopied] = useState(false);
+	const [actionFormModal, setActionFormModal] = useState<{
+		actionName: string;
+		actionLabel: string;
+		formSchema: SerializedForm;
+		requiresConfirmation: boolean;
+		modalDescription?: string;
+	} | null>(null);
+
+	// Modal title (breadcrumb)
+	const label = getResourceLabel(resourceSlug) || resourceName;
+	const modalKey = `${resourceSlug}-view-${recordId}`;
+	const modalTitle = view.recordTitle
+		? translate('core:modal.view_record', { title: view.recordTitle })
+		: translate('core:modal.view_title', { label });
+
+	useEffect(() => {
+		setModalTitle(modalKey, modalTitle);
+	}, [modalKey, modalTitle, setModalTitle]);
+
+	useEffect(() => {
+		return () => {
+			removeModalTitle(modalKey);
+		};
+	}, [modalKey, removeModalTitle]);
+
+	// Reset tab state when closed
+	useEffect(() => {
+		if (!isOpen) {
+			setActiveTopTab('details');
+			setActiveGroupRelation({});
+		}
+	}, [isOpen]);
+
+	if (!isOpen) return null;
+
+	const handleCopyUrl = () => {
+		navigator.clipboard.writeText(`${window.location.origin}/${resourceSlug}/${recordId}`).then(() => {
+			setUrlCopied(true);
+			setTimeout(() => setUrlCopied(false), 2000);
+		});
+	};
+
+	const handleDelete = async () => {
+		const confirmed = await confirm({
+			title: translate('core:confirm.delete_item_title'),
+			message: translate('core:confirm.delete_item_message'),
+			confirmLabel: translate('core:common.delete'),
+			danger: true,
+		});
+		if (!confirmed) return;
+
+		try {
+			await bulkDelete(apiBaseUrl!, resourceSlug, [recordId]);
+			toast.success(translate('core:toast.deleted'));
+			onClose();
+		} catch (error: any) {
+			toast.error(error.message || translate('core:toast.delete_failed'));
+		}
+	};
+
+	const handleActionClick = async (action: any) => {
+		// Actions with a form open the action form modal
+		if (action.form && action.form.components) {
+			setActionFormModal({
+				actionName: action.name,
+				actionLabel: action.label,
+				formSchema: action.form,
+				requiresConfirmation: action.requiresConfirmation || false,
+				modalDescription: action.modalDescription,
+			});
+			openModal(resourceSlug, 'action', recordId, action.name, action.label);
+			return;
+		}
+
+		if (action.requiresConfirmation) {
+			const confirmed = await confirm({
+				title: action.label,
+				message:
+					action.modalDescription ||
+					translate('core:confirm.action_generic', { action: action.label.toLowerCase() }),
+			});
+			if (!confirmed) return;
+		}
+
+		try {
+			const result = await executeAction(`${apiBaseUrl}/${resourceSlug}`, action.name, recordId, {});
+
+			if (handleRedirect(result, navigate) || (result.data && handleRedirect(result.data, navigate))) {
+				// closeModal() pops from the stack without triggering the parent's navigation
+				closeModal();
+				return;
+			}
+
+			if (result.success) {
+				if (result.message) {
+					toast.success(result.message);
+				}
+				view.refreshRecord();
+			} else {
+				toast.error(result.message || translate('core:form.action_failed'));
+			}
+		} catch (error: any) {
+			toast.error(error.message || translate('core:error.action_failed'));
+		}
+	};
+
+	// Only actions with a backend handler (and not bulk-only) are shown
+	const filteredActions = (formSchema.actions?.filter((action: any) => !action.bulk && action.hasHandler) ||
+		[]) as any[];
+	const hasActionBar = canEdit || canDelete || filteredActions.length > 0;
+
+	const grouped = groupRelations(view.relations);
+
+	const renderRelation = (relation: SerializedRelation) => (
+		<RelationPanel
+			relation={relation}
+			schema={view.relationSchemas[relation.name]}
+			apiBaseUrl={apiBaseUrl}
+			parentResourceSlug={resourceSlug}
+			parentRecordId={recordId}
+			refreshKey={relationRefreshKeys[relation.name] || 0}
+			depth={depth}
+			onCloseAll={onCloseAll}
+			onAddRelation={setCreateRelation}
+		/>
+	);
+
+	return (
+		<>
+			<ModalDrawer
+				isOpen={isOpen}
+				onClose={onClose}
+				title={modalTitle}
+				width="max-w-4xl"
+				depth={depth}
+				onCloseAll={onCloseAll}
+				onCopyUrl={handleCopyUrl}
+				urlCopied={urlCopied}>
+				<div className="-mx-4 -mt-4 flex h-full flex-col sm:-mx-6 sm:-mt-6">
+					{view.loading && (
+						<div className="flex items-center justify-center py-12">
+							<Spinner size="lg" label={translate('core:common.loading_ellipsis')} />
+						</div>
+					)}
+
+					{view.error && (
+						<div className="p-6">
+							<ErrorAlert message={view.error} />
+						</div>
+					)}
+
+					{!view.loading && !view.error && view.recordData && (
+						<>
+							<RecordActions
+								actions={filteredActions}
+								canEdit={canEdit}
+								canDelete={canDelete}
+								onAction={handleActionClick}
+								onEdit={() => openModal(resourceSlug, 'edit', recordId)}
+								onDelete={handleDelete}
+								resourceSlug={resourceSlug}
+								record={view.recordData}
+							/>
+
+							{view.relations.length > 0 && (
+								<RelationTabs
+									grouped={grouped}
+									activeTopTab={activeTopTab}
+									onTopTabChange={setActiveTopTab}
+									hasActionBar={hasActionBar}
+								/>
+							)}
+
+							<div className="flex-1 overflow-y-auto">
+								{activeTopTab === 'details' && (
+									<>
+										<RecordDetails
+											formSchema={formSchema}
+											recordData={view.recordData}
+											apiBaseUrl={apiBaseUrl}
+											resourceSlug={resourceSlug}
+										/>
+										<Slot
+											name="detail.afterDetails"
+											context={{ resourceSlug, record: view.recordData }}
+											as="div"
+											className="px-6 pb-6 empty:hidden"
+										/>
+									</>
+								)}
+
+								{grouped.ungrouped.map(
+									relation =>
+										activeTopTab === relation.name && (
+											<div key={relation.name} className="p-6">
+												{renderRelation(relation)}
+											</div>
+										),
+								)}
+
+								{grouped.groups.map(group => {
+									if (activeTopTab !== group.key) return null;
+									const currentInner = activeGroupRelation[group.key] || group.relations[0]?.name;
+									const activeRelation =
+										group.relations.find(r => r.name === currentInner) || group.relations[0];
+									if (!activeRelation) return null;
+
+									return (
+										<div key={group.key} className="p-6">
+											<GroupInnerTabs
+												group={group}
+												current={currentInner}
+												onChange={name =>
+													setActiveGroupRelation(prev => ({ ...prev, [group.key]: name }))
+												}
+											/>
+											{renderRelation(activeRelation)}
+										</div>
+									);
+								})}
+							</div>
+						</>
+					)}
+				</div>
+			</ModalDrawer>
+
+			{/* Create Relation Modal */}
+			{createRelation && (
+				<RelationCreateModal
+					isOpen={!!createRelation}
+					onClose={() => setCreateRelation(null)}
+					relation={createRelation}
+					parentId={recordId}
+					parentResourceSlug={resourceSlug}
+					apiBaseUrl={apiBaseUrl!}
+					onSuccess={() => {
+						setRelationRefreshKeys(prev => ({
+							...prev,
+							[createRelation.name]: (prev[createRelation.name] || 0) + 1,
+						}));
+						setCreateRelation(null);
+					}}
+					depth={depth + 1}
+					onCloseAll={onCloseAll}
+				/>
+			)}
+
+			{/* Action Form Modal */}
+			{actionFormModal && (
+				<ActionFormModal
+					isOpen={!!actionFormModal}
+					onClose={() => {
+						setActionFormModal(null);
+						closeModal();
+					}}
+					actionName={actionFormModal.actionName}
+					actionLabel={actionFormModal.actionLabel}
+					formSchema={actionFormModal.formSchema}
+					recordIds={[recordId]}
+					isBulk={false}
+					requiresConfirmation={actionFormModal.requiresConfirmation}
+					modalDescription={actionFormModal.modalDescription}
+					apiBaseUrl={apiBaseUrl || ''}
+					resourceSlug={resourceSlug}
+					onSuccess={() => {
+						view.refreshRecord();
+						setActionFormModal(null);
+						closeModal();
+					}}
+					depth={depth + 1}
+					onCloseAll={onCloseAll}
+				/>
+			)}
+		</>
+	);
+}

package/src/components/blocks/BlockRenderer.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useBlockRegistry } from '../../contexts/BlockRegistryContext';
+import { WidgetBlockRenderer } from './WidgetBlockRenderer';
+import { FormBlockRenderer } from './FormBlockRenderer';
+import { TableBlockRenderer } from './TableBlockRenderer';
+import { TabsBlockRenderer } from './TabsBlockRenderer';
+
+export interface BlockRendererProps {
+	block: any; // SerializedBlock
+	blockData?: Record<string, any>; // Pre-fetched data (e.g., widget data)
+	apiBaseUrl?: string;
+}
+
+export function BlockRenderer({ block, blockData, apiBaseUrl }: BlockRendererProps) {
+	const blocks = useBlockRegistry();
+	let content: React.ReactNode;
+
+	switch (block.type) {
+		case 'widget':
+			content = <WidgetBlockRenderer block={block} data={blockData?.[block.widget.name]} />;
+			break;
+		case 'form':
+			content = <FormBlockRenderer block={block} apiBaseUrl={apiBaseUrl} />;
+			break;
+		case 'table':
+			content = <TableBlockRenderer block={block} apiBaseUrl={apiBaseUrl} />;
+			break;
+		case 'tabs':
+			content = <TabsBlockRenderer block={block} blockData={blockData} apiBaseUrl={apiBaseUrl} />;
+			break;
+		default: {
+			const CustomBlockComponent = blocks[block.type];
+			if (CustomBlockComponent) {
+				content = <CustomBlockComponent block={block} blockData={blockData} apiBaseUrl={apiBaseUrl} />;
+			} else {
+				console.warn(`Unknown block type: ${block.type}`);
+				return null;
+			}
+			break;
+		}
+	}
+
+	return (
+		<div className="mb-6">
+			{(block.title || block.subtitle) && (
+				<div className="mb-1">
+					{block.title && (
+						<h2 className="text-xl text-gray-900 dark:text-gray-100 font-semibold mb-1">{block.title}</h2>
+					)}
+					{block.subtitle && <p className="text-sm text-gray-600 dark:text-gray-400">{block.subtitle}</p>}
+				</div>
+			)}
+			{content}
+		</div>
+	);
+}

package/src/components/blocks/FormBlockRenderer.tsx

@@ -0,0 +1,160 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { FormRenderer } from '../../FormRenderer';
+import { authenticatedFetch } from '../../api/authenticatedFetch';
+import { handleRedirect } from '../../utils/redirectHandler';
+import { translate } from '../../i18n/activeLocale';
+
+export interface FormBlockRendererProps {
+	block: any;
+	apiBaseUrl?: string;
+}
+
+export function FormBlockRenderer({ block, apiBaseUrl }: FormBlockRendererProps) {
+	const navigate = useNavigate();
+	const [error, setError] = useState<string | null>(null);
+	const [successMessage, setSuccessMessage] = useState<string | null>(null);
+	const [initialData, setInitialData] = useState<Record<string, any>>(block.initialData || {});
+	const [loading, setLoading] = useState<boolean>(!!block.dataUrl);
+
+	// Fetch initial data from dataUrl if provided
+	useEffect(() => {
+		const fetchInitialData = async () => {
+			// If no dataUrl, use initialData directly (no fetch needed)
+			if (!block.dataUrl) {
+				setLoading(false);
+				return;
+			}
+
+			setLoading(true);
+			setError(null);
+
+			try {
+				if (!apiBaseUrl) {
+					throw new Error('API base URL is required');
+				}
+
+				const dataUrl = `${apiBaseUrl}/${block.dataUrl}`;
+
+				const response = await authenticatedFetch(
+					dataUrl,
+					{
+						method: 'GET',
+						headers: {
+							'Content-Type': 'application/json',
+						},
+					},
+					apiBaseUrl,
+				);
+
+				if (!response.ok) {
+					if (response.status === 401) {
+						setError('Unauthorized - Please login again');
+						return;
+					}
+					const errorData = await response.json();
+					const errorMsg = errorData.error || errorData.message || translate('core:error.fetch_form_data');
+					setError(errorMsg);
+					return;
+				}
+
+				const responseData = await response.json();
+				// Use ONLY fetched data, don't merge with initialData
+				// This prevents metadata from being included in form state
+				setInitialData(responseData.data || responseData || {});
+			} catch (err: any) {
+				setError(err.message || translate('core:error.fetch_form_data_generic'));
+				// On error, fall back to initialData if available
+				if (block.initialData) {
+					setInitialData(block.initialData);
+				}
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		fetchInitialData();
+	}, [block.dataUrl, block.initialData, apiBaseUrl]);
+
+	useEffect(() => {
+		// Reset success message after 3 seconds
+		if (successMessage) {
+			const timer = setTimeout(() => setSuccessMessage(null), 3000);
+			return () => clearTimeout(timer);
+		}
+	}, [successMessage]);
+
+	const handleSubmit = async (data: Record<string, any>) => {
+		setError(null);
+		setSuccessMessage(null);
+
+		try {
+			if (!apiBaseUrl) {
+				throw new Error('API base URL is required');
+			}
+
+			const submitUrl = block.submitUrl ? `${apiBaseUrl}/${block.submitUrl}` : `${apiBaseUrl}/submit`;
+
+			const response = await authenticatedFetch(
+				submitUrl,
+				{
+					method: 'POST',
+					headers: {
+						'Content-Type': 'application/json',
+					},
+					body: JSON.stringify(data),
+				},
+				apiBaseUrl,
+			);
+
+			const responseData = await response.json();
+
+			if (!response.ok) {
+				if (response.status === 401) {
+					setError('Unauthorized - Please login again');
+					return;
+				}
+				// Extract error message from backend response
+				const errorMsg = responseData.error || responseData.message || translate('core:error.submit_form');
+				setError(errorMsg);
+				return;
+			}
+
+			// Check for redirect before showing success message
+			if (handleRedirect(responseData, navigate)) {
+				// Redirect was handled, exit early
+				return;
+			}
+
+			// Extract success message from backend response
+			const successMsg = responseData.message || translate('core:form.submitted');
+			setSuccessMessage(successMsg);
+		} catch (err: any) {
+			setError(err.message || translate('core:error.generic'));
+		}
+	};
+
+	return (
+		<>
+			{error && <div className="mb-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded">{error}</div>}
+			{successMessage && (
+				<div className="mb-4 p-3 bg-green-50 border border-green-200 text-green-700 rounded">
+					{successMessage}
+				</div>
+			)}
+			{loading && (
+				<div className="mb-4 p-3 bg-accent-soft border border-accent/30 text-accent rounded">
+					Loading form data...
+				</div>
+			)}
+			{!loading && (
+				<FormRenderer
+					schema={block.form}
+					defaultValues={initialData}
+					onSubmit={handleSubmit}
+					apiBaseUrl={apiBaseUrl}
+				/>
+			)}
+		</>
+	);
+}