@maxal_studio/kratosjs-react 1.0.0

package/src/components/modals/view/RelationTabs.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { SerializedRelation } from '../../../types';
+import { Icon } from '../../utils/Icon';
+import { cn } from '../../../utils/classNames';
+import { pillTabClass } from '../../ui/PillButton';
+import { translate } from '../../../i18n/activeLocale';
+import { Slot } from '../../../slots/Slot';
+
+export interface RelationGroup {
+	key: string;
+	label: string;
+	icon?: string;
+	relations: SerializedRelation[];
+}
+
+export interface GroupedRelations {
+	groups: RelationGroup[];
+	ungrouped: SerializedRelation[];
+}
+
+/** Group relations by groupKey; ungrouped relations become individual tabs. */
+export function groupRelations(relations: SerializedRelation[]): GroupedRelations {
+	const groups: Record<string, RelationGroup> = {};
+	const ungrouped: SerializedRelation[] = [];
+
+	for (const rel of relations) {
+		if (rel.groupKey) {
+			const groupKey = `group_${rel.groupKey}`;
+			if (!groups[groupKey]) {
+				groups[groupKey] = {
+					key: groupKey,
+					label: rel.groupLabel || rel.groupKey,
+					icon: rel.groupIcon || rel.icon,
+					relations: [],
+				};
+			}
+			groups[groupKey].relations.push(rel);
+		} else {
+			ungrouped.push(rel);
+		}
+	}
+
+	return { groups: Object.values(groups), ungrouped };
+}
+
+function TabButton({
+	active,
+	onClick,
+	icon,
+	children,
+}: {
+	active: boolean;
+	onClick: () => void;
+	icon?: string;
+	children: React.ReactNode;
+}) {
+	return (
+		<button type="button" role="tab" aria-selected={active} onClick={onClick} className={pillTabClass(active)}>
+			{icon && <Icon name={icon as any} className="h-4 w-4 shrink-0" />}
+			<span>{children}</span>
+		</button>
+	);
+}
+
+export interface RelationTabsProps {
+	grouped: GroupedRelations;
+	activeTopTab: string;
+	onTopTabChange: (key: string) => void;
+	/** Whether the action bar is rendered above (affects sticky offset) */
+	hasActionBar: boolean;
+}
+
+/**
+ * Top tab strip of the view modal — pill tabs matching table/sidebar design.
+ */
+export function RelationTabs({ grouped, activeTopTab, onTopTabChange, hasActionBar }: RelationTabsProps) {
+	return (
+		<div
+			className={cn(
+				'sticky z-40 shrink-0 border-b border-border/60 bg-surface px-4 py-3',
+				hasActionBar ? 'top-[60px]' : 'top-0',
+			)}>
+			<div
+				className="flex gap-1 overflow-x-auto overscroll-x-contain"
+				style={{ WebkitOverflowScrolling: 'touch' }}
+				role="tablist"
+				aria-label={translate('core:modal.sections')}>
+				<TabButton active={activeTopTab === 'details'} onClick={() => onTopTabChange('details')}>
+					{translate('core:common.details')}
+				</TabButton>
+				{grouped.groups.map(group => (
+					<TabButton
+						key={group.key}
+						active={activeTopTab === group.key}
+						onClick={() => onTopTabChange(group.key)}
+						icon={group.icon}>
+						{group.label}
+					</TabButton>
+				))}
+				{grouped.ungrouped.map(rel => (
+					<TabButton
+						key={rel.name}
+						active={activeTopTab === rel.name}
+						onClick={() => onTopTabChange(rel.name)}
+						icon={rel.icon}>
+						{rel.pluralLabel}
+					</TabButton>
+				))}
+				<Slot
+					name="detail.tabs"
+					context={{ data: { activeTab: activeTopTab, setActiveTab: onTopTabChange } }}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export interface GroupInnerTabsProps {
+	group: RelationGroup;
+	current: string;
+	onChange: (relationName: string) => void;
+}
+
+/** Inner tab strip inside a relation group. */
+export function GroupInnerTabs({ group, current, onChange }: GroupInnerTabsProps) {
+	return (
+		<div className="mb-4 overflow-x-auto">
+			<div
+				className="flex gap-1 overflow-x-auto overscroll-x-contain"
+				style={{ WebkitOverflowScrolling: 'touch' }}
+				role="tablist"
+				aria-label={`${group.label} relations`}>
+				{group.relations.map(rel => (
+					<TabButton
+						key={rel.name}
+						active={current === rel.name}
+						onClick={() => onChange(rel.name)}
+						icon={rel.icon}>
+						{rel.pluralLabel}
+					</TabButton>
+				))}
+			</div>
+		</div>
+	);
+}

package/src/components/modals/view/useRecordView.ts

@@ -0,0 +1,134 @@
+import { useEffect, useRef, useState } from 'react';
+import { SerializedTable } from '@maxal_studio/kratosjs';
+import { getRecord, getRelations, getTableSchema } from '../../../api/resourceApi';
+import { SerializedRelation } from '../../../types';
+import { useResourceModal } from '../../../contexts/ResourceModalContext';
+import { translate } from '../../../i18n/activeLocale';
+
+export interface RecordViewApi {
+	recordData: any;
+	recordTitle: string | undefined;
+	relations: SerializedRelation[];
+	relationSchemas: Record<string, SerializedTable>;
+	loading: boolean;
+	error: string | null;
+	/** Re-fetch only the record (after edits/actions) */
+	refreshRecord: () => Promise<void>;
+}
+
+/**
+ * Data layer of the view modal: loads the record, its relation metadata and
+ * the relation table schemas, and refreshes the record whenever a
+ * data-mutating modal (edit/create/action) above it closes.
+ */
+export function useRecordView(
+	isOpen: boolean,
+	apiBaseUrl: string | undefined,
+	resourceSlug: string,
+	recordId: string,
+): RecordViewApi {
+	const { modalStack } = useResourceModal();
+	const [recordData, setRecordData] = useState<any>(null);
+	const [recordTitle, setRecordTitle] = useState<string | undefined>(undefined);
+	const [relations, setRelations] = useState<SerializedRelation[]>([]);
+	const [relationSchemas, setRelationSchemas] = useState<Record<string, SerializedTable>>({});
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const prevModalStackRef = useRef(modalStack);
+
+	const fetchRecord = async () => {
+		const result = await getRecord(apiBaseUrl!, resourceSlug, recordId);
+		setRecordData(result.data);
+		setRecordTitle(result.metadata?.recordTitle);
+	};
+
+	const refreshRecord = async () => {
+		if (!isOpen || !recordId) return;
+		setLoading(true);
+		setError(null);
+		try {
+			await fetchRecord();
+		} catch (err: any) {
+			setError(err.message || translate('core:error.load_record'));
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	// Initial load: record + relations + relation table schemas (in parallel)
+	useEffect(() => {
+		if (!isOpen) return;
+
+		let cancelled = false;
+		const fetchAll = async () => {
+			setLoading(true);
+			setError(null);
+			try {
+				const recordPromise = getRecord(apiBaseUrl!, resourceSlug, recordId);
+				const relationsPromise = getRelations(apiBaseUrl!, resourceSlug).catch(() => []);
+
+				const record = await recordPromise;
+				if (cancelled) return;
+				setRecordData(record.data);
+				setRecordTitle(record.metadata?.recordTitle);
+
+				const rels: SerializedRelation[] = await relationsPromise;
+				if (cancelled) return;
+				setRelations(rels);
+
+				const schemaResults = await Promise.all(
+					rels.map(async relation => {
+						try {
+							const schema = await getTableSchema(apiBaseUrl!, relation.resourceSlug);
+							return { relationName: relation.name, schema: schema as SerializedTable };
+						} catch {
+							return { relationName: relation.name, schema: null };
+						}
+					}),
+				);
+				if (cancelled) return;
+				const schemas: Record<string, SerializedTable> = {};
+				for (const { relationName, schema } of schemaResults) {
+					if (schema) schemas[relationName] = schema;
+				}
+				setRelationSchemas(schemas);
+			} catch (err: unknown) {
+				if (!cancelled) setError(err instanceof Error ? err.message : String(err));
+			} finally {
+				if (!cancelled) setLoading(false);
+			}
+		};
+
+		fetchAll();
+		return () => {
+			cancelled = true;
+		};
+	}, [isOpen, resourceSlug, recordId, apiBaseUrl]);
+
+	// Refresh the record when a data-mutating modal above this one closes.
+	// Closing a view modal is just navigation — no re-fetch needed.
+	useEffect(() => {
+		const prevStack = prevModalStackRef.current;
+		prevModalStackRef.current = modalStack;
+
+		if (modalStack.length < prevStack.length) {
+			const closedModal = prevStack[prevStack.length - 1];
+			if (closedModal && closedModal.mode !== 'view') {
+				refreshRecord();
+			}
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [modalStack]);
+
+	// Reset when closed
+	useEffect(() => {
+		if (!isOpen) {
+			setRecordData(null);
+			setRecordTitle(undefined);
+			setRelations([]);
+			setRelationSchemas({});
+		}
+	}, [isOpen]);
+
+	return { recordData, recordTitle, relations, relationSchemas, loading, error, refreshRecord };
+}

package/src/components/pages/PageRenderer.tsx

@@ -0,0 +1,173 @@
+import React, { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { BlockRenderer } from '../blocks/BlockRenderer';
+import { cn } from '../../utils/classNames';
+import { authenticatedFetch } from '../../api/authenticatedFetch';
+import { translate } from '../../i18n/activeLocale';
+import { Slot } from '../../slots/Slot';
+
+export interface PageRendererProps {
+	pageSlug: string;
+	apiBaseUrl: string;
+}
+
+export function PageRenderer({ pageSlug, apiBaseUrl }: PageRendererProps) {
+	const [pageData, setPageData] = useState<any>(null);
+	const [widgetData, setWidgetData] = useState<Record<string, any>>({});
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const location = useLocation();
+
+	useEffect(() => {
+		const fetchPageData = async () => {
+			setLoading(true);
+			setError(null);
+
+			try {
+				// Extract query parameters from the URL
+				const searchParams = new URLSearchParams(location.search);
+				const queryString = searchParams.toString();
+				const url = `${apiBaseUrl}/pages/${pageSlug}${queryString ? `?${queryString}` : ''}`;
+
+				// Use authenticated fetch which handles token refresh automatically
+				const response = await authenticatedFetch(
+					url,
+					{
+						headers: {
+							'Content-Type': 'application/json',
+						},
+					},
+					apiBaseUrl,
+				);
+
+				if (!response.ok) {
+					// If still 401 after refresh attempt, user needs to login
+					if (response.status === 401) {
+						throw new Error('Unauthorized - Please login again');
+					}
+					const error = await response.json();
+					throw new Error(`Failed to fetch page: ${error.message || response.statusText}`);
+				}
+
+				const data = await response.json();
+				setPageData(data.page);
+				setWidgetData(data.widgetData || {});
+			} catch (err: any) {
+				setError(err.message || translate('core:error.load_page'));
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		fetchPageData();
+	}, [pageSlug, apiBaseUrl, location.search]);
+
+	if (loading) {
+		return (
+			<div className="flex items-center justify-center min-h-[400px]">
+				<div className="text-gray-500 dark:text-gray-400">{translate('core:page.loading')}</div>
+			</div>
+		);
+	}
+
+	if (error) {
+		return (
+			<div className="flex items-center justify-center min-h-[400px]">
+				<div className="text-red-500 dark:text-red-400">{error}</div>
+			</div>
+		);
+	}
+
+	if (!pageData) {
+		return (
+			<div className="flex items-center justify-center min-h-[400px]">
+				<div className="text-gray-500 dark:text-gray-400">{translate('core:state.page_not_found')}</div>
+			</div>
+		);
+	}
+
+	// Group blocks into rows based on column widths
+	const groupBlocksIntoRows = (blocks: any[]) => {
+		const rows: any[][] = [];
+		let currentRow: any[] = [];
+		let currentRowWidth = 0;
+
+		for (const block of blocks) {
+			const blockColumns = block.columns || 12; // Default to full width if not specified
+
+			// If adding this block would exceed 12 columns, start a new row
+			if (currentRowWidth + blockColumns > 12 && currentRow.length > 0) {
+				rows.push(currentRow);
+				currentRow = [block];
+				currentRowWidth = blockColumns;
+			} else {
+				currentRow.push(block);
+				currentRowWidth += blockColumns;
+			}
+		}
+
+		// Add the last row if it has blocks
+		if (currentRow.length > 0) {
+			rows.push(currentRow);
+		}
+
+		return rows;
+	};
+
+	// Map column numbers to Tailwind classes (ensures classes are recognized)
+	const getColSpanClass = (columns: number): string => {
+		const colMap: Record<number, string> = {
+			1: 'col-span-1',
+			2: 'col-span-2',
+			3: 'col-span-3',
+			4: 'col-span-4',
+			5: 'col-span-5',
+			6: 'col-span-6',
+			7: 'col-span-7',
+			8: 'col-span-8',
+			9: 'col-span-9',
+			10: 'col-span-10',
+			11: 'col-span-11',
+			12: 'col-span-12',
+		};
+		return colMap[columns] || 'col-span-12';
+	};
+
+	const blockRows = pageData.blocks && pageData.blocks.length > 0 ? groupBlocksIntoRows(pageData.blocks) : [];
+
+	return (
+		<div className="w-full max-w-7xl mx-auto">
+			<Slot
+				name="page.top"
+				context={{ schema: pageData, location: `/page/${pageSlug}` }}
+				as="div"
+				className="mb-6 space-y-6 empty:hidden"
+			/>
+			{blockRows.length > 0 ? (
+				<div className="space-y-6">
+					{blockRows.map((row, rowIndex) => (
+						<div key={rowIndex} className="grid grid-cols-12 gap-6">
+							{row.map((block: any, blockIndex: number) => {
+								const blockColumns = block.columns || 12;
+								const colSpanClass = getColSpanClass(blockColumns);
+								return (
+									<div key={blockIndex} className={colSpanClass}>
+										<BlockRenderer block={block} blockData={widgetData} apiBaseUrl={apiBaseUrl} />
+									</div>
+								);
+							})}
+						</div>
+					))}
+				</div>
+			) : (
+				<div className="text-gray-500 dark:text-gray-400">{translate('core:page.no_content')}</div>
+			)}
+			<Slot
+				name="page.bottom"
+				context={{ schema: pageData, location: `/page/${pageSlug}` }}
+				as="div"
+				className="mt-6 space-y-6 empty:hidden"
+			/>
+		</div>
+	);
+}

package/src/components/table/ColumnTogglePopup.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { SerializedColumn } from '@maxal_studio/kratosjs';
+import { cn } from '../../utils/classNames';
+import { Checkbox } from '../Checkbox';
+import { translate } from '../../i18n/activeLocale';
+
+interface ColumnTogglePopupProps {
+	columns: SerializedColumn[];
+	visibleColumnNames: Set<string>;
+	onToggle: (columnName: string, visible: boolean) => void;
+	isOpen: boolean;
+	onClose: () => void;
+}
+
+export function ColumnTogglePopup({ columns, visibleColumnNames, onToggle, isOpen, onClose }: ColumnTogglePopupProps) {
+	if (!isOpen) {
+		return null;
+	}
+
+	// Filter to only toggleable columns (exclude columns with hidden: true)
+	const toggleableColumns = columns.filter(col => col.hidden !== true && col.toggleable !== false);
+
+	return (
+		<>
+			{/* Backdrop */}
+			<div className="fixed inset-0 z-40" onClick={onClose} />
+
+			{/* Dropdown panel - fixed position on mobile, absolute on desktop */}
+			<div className="fixed inset-x-4 top-1/2 z-50 flex max-h-[80vh] w-auto -translate-y-1/2 flex-col overflow-visible rounded-xl border border-border bg-raised p-4 shadow-soft-lg sm:absolute sm:inset-auto sm:left-auto sm:right-0 sm:top-full sm:mt-2 sm:w-[400px] sm:translate-y-0">
+				<div className="mb-4 flex shrink-0 items-center justify-between">
+					<h3 className="text-sm font-medium text-fg">{translate('core:table.column_visibility')}</h3>
+					<button
+						onClick={onClose}
+						className="rounded-full p-1.5 text-fg-secondary transition-colors hover:bg-hover/70 hover:text-fg">
+						<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								strokeWidth={2}
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+					</button>
+				</div>
+
+				<div className="space-y-2 flex-1 overflow-y-auto pr-2">
+					{toggleableColumns.length === 0 ? (
+						<p className="text-sm text-fg-secondary text-center py-4">
+							{translate('core:table.no_toggleable_columns')}
+						</p>
+					) : (
+						toggleableColumns.map(column => {
+							const isVisible = visibleColumnNames.has(column.name);
+							const isDisabled = column.hidden === true;
+
+							return (
+								<label
+									key={column.name}
+									className={cn(
+										'flex cursor-pointer items-center gap-3 rounded-full px-3 py-2 transition-colors hover:bg-hover/70',
+										isDisabled && 'cursor-not-allowed opacity-50',
+									)}>
+									<Checkbox
+										checked={isVisible}
+										onChange={checked => onToggle(column.name, checked)}
+										disabled={isDisabled}
+									/>
+									<span className="text-sm text-fg flex-1">{column.label || column.name}</span>
+								</label>
+							);
+						})
+					)}
+				</div>
+
+				<div className="mt-4 flex shrink-0 justify-end border-t border-border/60 pt-4">
+					<button
+						onClick={onClose}
+						className="rounded-full bg-accent px-4 py-2 text-sm font-medium text-accent-fg transition-colors hover:bg-accent-hover">
+						{translate('core:common.done')}
+					</button>
+				</div>
+			</div>
+		</>
+	);
+}

package/src/components/table/GridCard.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import { SerializedTable } from '@maxal_studio/kratosjs';
+import { useColumnRegistry } from '../../contexts/ColumnRegistryContext';
+import { cn } from '../../utils/classNames';
+import { TableActionsDropdown } from './TableActionsDropdown';
+import { Checkbox } from '../Checkbox';
+import { PillButton } from '../ui/PillButton';
+import { translate } from '../../i18n/activeLocale';
+
+interface GridCardProps {
+	schema: SerializedTable;
+	row: any;
+	rowIndex: number;
+	totalRows: number;
+	rowId: any;
+	visibleColumns: any[];
+	isSelected: boolean;
+	hasChanges: boolean;
+	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;
+}
+
+export function GridCard({
+	schema,
+	row,
+	rowIndex,
+	totalRows,
+	rowId,
+	visibleColumns,
+	isSelected,
+	hasChanges,
+	openActionsRowId,
+	onRowSelect,
+	onCellChange,
+	onRowAction,
+	onSaveRow,
+	onResetRow,
+	onToggleActions,
+}: GridCardProps) {
+	const columnRegistry = useColumnRegistry();
+
+	return (
+		<div
+			className={cn(
+				'relative overflow-hidden rounded-xl border bg-surface transition-colors hover:bg-hover/30',
+				hasChanges ? 'border-accent/40 ring-1 ring-accent/20' : 'border-border',
+			)}>
+			<div className="flex items-center justify-between border-b border-border/60 bg-muted px-3 py-2.5">
+				{schema.bulkActions && schema.bulkActions.length > 0 && (
+					<div className="flex items-center">
+						<Checkbox
+							id={`grid-checkbox-${rowId}`}
+							checked={isSelected}
+							onChange={() => onRowSelect(rowId)}
+						/>
+					</div>
+				)}
+
+				{schema.actions && schema.actions.length > 0 && (
+					<div className="ml-auto">
+						<TableActionsDropdown
+							schema={schema}
+							rowId={rowId}
+							rowIndex={rowIndex}
+							totalRows={totalRows}
+							isOpen={openActionsRowId === rowId}
+							onToggle={() => onToggleActions(rowId)}
+							onAction={onRowAction}
+						/>
+					</div>
+				)}
+			</div>
+
+			<>
+				<style>
+					{`
+						.grid-card-body-${rowId} {
+							grid-template-columns: repeat(1, minmax(0, 1fr));
+						}
+						@media (min-width: 768px) {
+							.grid-card-body-${rowId} {
+								grid-template-columns: repeat(${schema.gridColumns || 2}, minmax(0, 1fr));
+							}
+						}
+					`}
+				</style>
+				<div className={`grid gap-4 p-4 grid-card-body-${rowId}`}>
+					{visibleColumns.map(column => {
+						const ColumnComponent = columnRegistry[column.type];
+
+						if (!ColumnComponent) {
+							return (
+								<div key={column.name} className="text-sm">
+									<div className="mb-1 text-[11px] font-medium uppercase tracking-wider text-fg-muted">
+										{column.label || column.name}
+									</div>
+									<div className="text-fg-secondary">
+										{translate('core:state.unknown_column', { type: column.type })}
+									</div>
+								</div>
+							);
+						}
+
+						const isEditable = ['textinput', 'select', 'checkbox', 'toggle'].includes(column.type);
+						const isFullWidth = column.gridSpanFull === true;
+
+						return (
+							<div key={column.name} className={cn('text-sm', isFullWidth && 'col-span-full')}>
+								{!isFullWidth && (
+									<div className="mb-1 text-[11px] font-medium uppercase tracking-wider text-fg-muted">
+										{column.label || column.name}
+									</div>
+								)}
+								<div className="text-fg">
+									<ColumnComponent
+										column={column}
+										record={row}
+										rowIndex={rowIndex}
+										onCellChange={
+											isEditable
+												? (value: any) => onCellChange(rowId, column.name, value)
+												: undefined
+										}
+									/>
+								</div>
+							</div>
+						);
+					})}
+				</div>
+			</>
+
+			{hasChanges && (
+				<div className="flex items-center justify-end gap-2 border-t border-border/60 bg-muted px-3 py-2.5">
+					<PillButton
+						variant="primary"
+						onClick={() => onSaveRow(rowId)}
+						title={translate('core:table.save_changes')}>
+						{translate('core:common.save')}
+					</PillButton>
+					<PillButton
+						variant="default"
+						onClick={() => onResetRow(rowId)}
+						title={translate('core:table.reset_changes')}>
+						{translate('core:common.reset')}
+					</PillButton>
+				</div>
+			)}
+		</div>
+	);
+}