@maxal_studio/kratosjs-react 1.0.0

package/src/components/layout/Header.tsx

@@ -0,0 +1,212 @@
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Moon, Sun, Menu, User, LogOut, ChevronDown } from 'lucide-react';
+import { cn } from '../../utils/classNames';
+import { GlobalSearch } from '../GlobalSearch';
+import { useAuth } from '../../auth/AuthContext';
+import { usePanelMetadata } from '../../contexts/PanelMetadataContext';
+import { IconButton } from '../ui';
+import { useTranslation } from '../../i18n/useTranslation';
+import { LocaleSwitcher } from '../../i18n/LocaleSwitcher';
+import { useLocale } from '../../i18n/useLocale';
+import { Slot } from '../../slots/Slot';
+import { SlotCluster } from '../../slots/SlotCluster';
+
+/** Language row in the account menu — hidden when the panel has a single locale. */
+function LocaleSwitcherRow() {
+	const { t } = useTranslation();
+	const { locales } = useLocale();
+	if (locales.length <= 1) return null;
+	return (
+		<div className="flex items-center justify-between gap-2 border-b border-border px-3 py-2">
+			<span className="text-xs font-medium text-fg-muted">{t('core:panel.language')}</span>
+			<LocaleSwitcher />
+		</div>
+	);
+}
+
+export interface HeaderProps {
+	panelId?: string;
+	darkMode: boolean;
+	onDarkModeToggle: () => void;
+	onMobileMenuToggle?: () => void;
+	apiBaseUrl?: string;
+	globalSearchAvailable?: boolean;
+}
+
+function useCurrentPageTitle(): string | undefined {
+	const location = useLocation();
+	const { resources, pages } = usePanelMetadata();
+
+	return useMemo(() => {
+		if (location.pathname.startsWith('/page/')) {
+			const slug = location.pathname.replace('/page/', '').split('/')[0];
+			return pages.find(page => page.slug === slug)?.label;
+		}
+
+		const slug = location.pathname.split('/').filter(Boolean)[0];
+		if (!slug) return undefined;
+
+		const resource = resources.find(item => item.slug === slug);
+		return resource?.pluralLabel ?? resource?.label;
+	}, [location.pathname, resources, pages]);
+}
+
+export function Header({
+	darkMode,
+	onDarkModeToggle,
+	onMobileMenuToggle,
+	apiBaseUrl,
+	globalSearchAvailable = false,
+}: HeaderProps) {
+	const { user, logout } = useAuth();
+	const { t } = useTranslation();
+	const pageTitle = useCurrentPageTitle();
+	const [userMenuOpen, setUserMenuOpen] = useState(false);
+	const userMenuRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+			if (userMenuRef.current && !userMenuRef.current.contains(event.target as Node)) {
+				setUserMenuOpen(false);
+			}
+		};
+
+		const handleEscape = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') {
+				setUserMenuOpen(false);
+			}
+		};
+
+		if (userMenuOpen) {
+			document.addEventListener('mousedown', handleClickOutside);
+			document.addEventListener('keydown', handleEscape);
+		}
+
+		return () => {
+			document.removeEventListener('mousedown', handleClickOutside);
+			document.removeEventListener('keydown', handleEscape);
+		};
+	}, [userMenuOpen]);
+
+	const handleLogout = async () => {
+		await logout();
+		setUserMenuOpen(false);
+	};
+
+	const userInitial = (user?.name || user?.email || '?').charAt(0).toUpperCase();
+
+	return (
+		<header className="sticky top-0 z-40 flex h-14 shrink-0 items-center gap-3 border-b border-border bg-base px-4 sm:px-6">
+			<div className="flex min-w-0 flex-1 items-center gap-3">
+				{onMobileMenuToggle && (
+					<IconButton
+						variant="ghost"
+						size="sm"
+						aria-label={t('core:panel.open_menu')}
+						onClick={onMobileMenuToggle}
+						className="lg:hidden">
+						<Menu className="h-5 w-5" />
+					</IconButton>
+				)}
+				{pageTitle && (
+					<h1 className="truncate text-lg font-semibold tracking-tight text-fg sm:text-xl">{pageTitle}</h1>
+				)}
+				<Slot name="header.left" context={{ user }} as="div" className="flex min-w-0 items-center gap-2" />
+			</div>
+
+			<div className="flex shrink-0 items-center gap-1 sm:gap-2">
+				<SlotCluster name="header.right" context={{ user }} />
+				{apiBaseUrl && globalSearchAvailable && <GlobalSearch apiBaseUrl={apiBaseUrl} />}
+
+				<IconButton
+					variant="ghost"
+					size="sm"
+					aria-label={darkMode ? t('core:panel.toggle_light') : t('core:panel.toggle_dark')}
+					title={darkMode ? t('core:panel.toggle_light') : t('core:panel.toggle_dark')}
+					onClick={onDarkModeToggle}
+					className="h-9 w-9 shrink-0">
+					<span className="inline-flex h-4 w-4 items-center justify-center">
+						{darkMode ? (
+							<Sun className="h-4 w-4 text-warning" />
+						) : (
+							<Moon className="h-4 w-4 text-fg-secondary" />
+						)}
+					</span>
+				</IconButton>
+
+				{user && (
+					<div className="relative" ref={userMenuRef}>
+						<button
+							type="button"
+							onClick={() => setUserMenuOpen(open => !open)}
+							aria-expanded={userMenuOpen}
+							aria-haspopup="menu"
+							className={cn(
+								'flex items-center gap-2 rounded-full border border-transparent py-1 pl-1 pr-2 transition-colors',
+								'hover:border-border hover:bg-hover',
+								'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+								userMenuOpen && 'border-border bg-hover',
+							)}>
+							{user.avatarUrl ? (
+								<img
+									src={user.avatarUrl}
+									alt=""
+									className="h-8 w-8 rounded-full object-cover ring-1 ring-border"
+								/>
+							) : (
+								<div className="flex h-8 w-8 items-center justify-center rounded-full bg-raised text-xs font-semibold text-fg ring-1 ring-border">
+									{userInitial}
+								</div>
+							)}
+							<div className="hidden min-w-0 text-left md:block">
+								<div className="max-w-[140px] truncate text-sm font-medium text-fg">
+									{user.name || user.email}
+								</div>
+							</div>
+							<ChevronDown
+								className={cn(
+									'hidden h-4 w-4 text-fg-muted transition-transform md:block',
+									userMenuOpen && 'rotate-180',
+								)}
+							/>
+						</button>
+
+						{userMenuOpen && (
+							<div
+								role="menu"
+								className="absolute right-0 z-50 mt-2 w-60 overflow-hidden rounded-xl border border-border bg-raised shadow-soft-lg">
+								<div className="border-b border-border px-4 py-3">
+									<div className="truncate text-sm font-medium text-fg">
+										{user.name || user.email}
+									</div>
+									{user.email && user.name && (
+										<div className="mt-0.5 truncate text-xs text-fg-muted">{user.email}</div>
+									)}
+								</div>
+								<LocaleSwitcherRow />
+								<Slot name="header.userMenu" context={{ user }} as="div" className="p-1" />
+								<div className="p-1">
+									<button
+										type="button"
+										role="menuitem"
+										onClick={handleLogout}
+										className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm text-fg transition-colors hover:bg-hover">
+										<LogOut className="h-4 w-4 text-fg-secondary" />
+										{t('core:panel.sign_out')}
+									</button>
+								</div>
+							</div>
+						)}
+					</div>
+				)}
+
+				{!user && (
+					<div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted">
+						<User className="h-4 w-4 text-fg-muted" />
+					</div>
+				)}
+			</div>
+		</header>
+	);
+}

package/src/components/layout/PanelBrandMark.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { LayoutDashboard } from 'lucide-react';
+import { Icon } from '../utils/Icon';
+import { cn } from '../../utils/classNames';
+
+export interface PanelBrandMarkProps {
+	icon?: string;
+	favicon?: string;
+	size?: 'sm' | 'md' | 'lg';
+	className?: string;
+}
+
+const SIZE_CLASSES = {
+	sm: {
+		box: 'h-8 w-8 rounded-lg',
+		lucide: 'h-4 w-4',
+		image: 'h-5 w-5',
+	},
+	md: {
+		box: 'h-10 w-10 rounded-xl',
+		lucide: 'h-5 w-5',
+		image: 'h-6 w-6',
+	},
+	lg: {
+		box: 'h-12 w-12 rounded-xl',
+		lucide: 'h-6 w-6',
+		image: 'h-7 w-7',
+	},
+} as const;
+
+export function PanelBrandMark({ icon, favicon, size = 'md', className }: PanelBrandMarkProps) {
+	const sizes = SIZE_CLASSES[size];
+
+	if (favicon) {
+		return (
+			<div
+				className={cn(
+					'flex shrink-0 items-center justify-center overflow-hidden bg-surface ring-1 ring-border',
+					sizes.box,
+					className,
+				)}>
+				<img src={favicon} alt="" className={cn('object-contain', sizes.image)} />
+			</div>
+		);
+	}
+
+	return (
+		<div
+			className={cn(
+				'flex shrink-0 items-center justify-center bg-accent-soft ring-1 ring-accent/10',
+				sizes.box,
+				className,
+			)}>
+			{icon ? (
+				<Icon name={icon as any} className={cn('text-accent', sizes.lucide)} />
+			) : (
+				<LayoutDashboard className={cn('text-accent', sizes.lucide)} />
+			)}
+		</div>
+	);
+}

package/src/components/layout/Sidebar.tsx

@@ -0,0 +1,283 @@
+import React, { useMemo } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { X } from 'lucide-react';
+import { Icon } from '../utils/Icon';
+import { cn } from '../../utils/classNames';
+import { IconButton } from '../ui';
+import { PanelBrandMark } from './PanelBrandMark';
+import { translate } from '../../i18n/activeLocale';
+import { Slot } from '../../slots/Slot';
+
+export interface ResourceMetadata {
+	slug: string;
+	label: string;
+	pluralLabel: string;
+	icon?: string;
+	navigationGroup?: string;
+	navigationSort?: number;
+	hasForm: boolean;
+	hasTable: boolean;
+	hasActions: boolean;
+	hidden?: boolean;
+	badge?: string | number | null;
+	badgeColor?: string;
+}
+
+export interface PageMetadata {
+	slug: string;
+	label: string;
+	icon?: string;
+	navigationGroup?: string;
+	navigationSort?: number;
+	hidden?: boolean;
+	badge?: string | number | null;
+	badgeColor?: string;
+}
+
+export interface SidebarProps {
+	panelTitle?: string;
+	panelIcon?: string;
+	panelFavicon?: string;
+	resources: ResourceMetadata[];
+	pages?: PageMetadata[];
+	mobileOpen: boolean;
+	onMobileClose: () => void;
+}
+
+type NavItem = (ResourceMetadata & { type: 'resource' }) | (PageMetadata & { type: 'page' });
+
+type NavElement = { type: 'ungrouped'; item: NavItem } | { type: 'group'; group: string; items: NavItem[] };
+
+function getBadgeClassName(color?: string): string {
+	const base = 'inline-flex shrink-0 items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium leading-none';
+
+	if (!color || color.toLowerCase() === 'gray') {
+		return `${base} bg-raised text-fg-secondary`;
+	}
+
+	const semantic: Record<string, string> = {
+		blue: 'bg-accent-soft text-accent',
+		green: 'bg-success-soft text-success',
+		red: 'bg-danger-soft text-danger',
+		yellow: 'bg-warning-soft text-warning',
+	};
+
+	const lower = color.toLowerCase();
+	if (semantic[lower]) return `${base} ${semantic[lower]}`;
+	return base;
+}
+
+function getBadgeStyle(color?: string): React.CSSProperties | undefined {
+	if (!color || /^(blue|green|red|yellow|gray)$/i.test(color)) return undefined;
+	return { backgroundColor: color, color: '#fff' };
+}
+
+interface NavItemButtonProps {
+	item: NavItem;
+	isActive: boolean;
+	onClick: () => void;
+}
+
+function NavItemButton({ item, isActive, onClick }: NavItemButtonProps) {
+	const displayLabel = item.type === 'resource' ? item.pluralLabel : item.label;
+	const displayIcon = item.icon || (item.type === 'page' ? 'FileText' : 'Menu');
+
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			className={cn(
+				'flex w-full items-center justify-between gap-2 rounded-full px-3 py-2 text-sm transition-colors',
+				isActive
+					? 'bg-raised font-medium text-fg shadow-soft-sm'
+					: 'text-fg-secondary hover:bg-hover/70 hover:text-fg',
+			)}>
+			<span className="flex min-w-0 flex-1 items-center gap-2.5">
+				<Icon name={displayIcon} className={cn('h-4 w-4 shrink-0', isActive ? 'text-fg' : 'text-fg-muted')} />
+				<span className="truncate">{displayLabel}</span>
+			</span>
+			{item.badge !== undefined && item.badge !== null && item.badge !== '' && (
+				<span className={getBadgeClassName(item.badgeColor)} style={getBadgeStyle(item.badgeColor)}>
+					{String(item.badge)}
+				</span>
+			)}
+		</button>
+	);
+}
+
+export function Sidebar({
+	panelTitle,
+	panelIcon,
+	panelFavicon,
+	resources,
+	pages = [],
+	mobileOpen,
+	onMobileClose,
+}: SidebarProps) {
+	const navigate = useNavigate();
+	const location = useLocation();
+
+	const visibleResources = useMemo(() => resources.filter(resource => !resource.hidden), [resources]);
+	const visiblePages = useMemo(() => pages.filter(page => !page.hidden), [pages]);
+
+	const navItems: NavItem[] = [
+		...visibleResources.map(r => ({ ...r, type: 'resource' as const })),
+		...visiblePages.map(p => ({ ...p, type: 'page' as const })),
+	];
+
+	const sortedNavItems = [...navItems].sort((a, b) => {
+		if (a.navigationSort !== undefined && b.navigationSort !== undefined) {
+			return a.navigationSort - b.navigationSort;
+		}
+		if (a.navigationSort !== undefined) return -1;
+		if (b.navigationSort !== undefined) return 1;
+		return a.label.localeCompare(b.label);
+	});
+
+	const groupedNavItems: Record<string, NavItem[]> = {};
+	const ungroupedNavItems: NavItem[] = [];
+
+	sortedNavItems.forEach(item => {
+		if (item.navigationGroup) {
+			if (!groupedNavItems[item.navigationGroup]) {
+				groupedNavItems[item.navigationGroup] = [];
+			}
+			groupedNavItems[item.navigationGroup].push(item);
+		} else {
+			ungroupedNavItems.push(item);
+		}
+	});
+
+	const navElements: NavElement[] = [];
+
+	ungroupedNavItems.forEach(item => {
+		navElements.push({ type: 'ungrouped', item });
+	});
+
+	Object.entries(groupedNavItems).forEach(([group, items]) => {
+		navElements.push({ type: 'group', group, items });
+	});
+
+	navElements.sort((a, b) => {
+		const getSortValue = (element: NavElement): number => {
+			if (element.type === 'ungrouped') {
+				return element.item.navigationSort ?? Infinity;
+			}
+			return Math.min(...element.items.map(item => item.navigationSort ?? Infinity));
+		};
+
+		const aSort = getSortValue(a);
+		const bSort = getSortValue(b);
+
+		if (aSort !== Infinity && bSort !== Infinity) return aSort - bSort;
+		if (aSort !== Infinity) return -1;
+		if (bSort !== Infinity) return 1;
+		if (a.type === 'ungrouped' && b.type === 'group') return -1;
+		if (a.type === 'group' && b.type === 'ungrouped') return 1;
+		if (a.type === 'ungrouped' && b.type === 'ungrouped') {
+			return a.item.label.localeCompare(b.item.label);
+		}
+		if (a.type === 'group' && b.type === 'group') {
+			return a.group.localeCompare(b.group);
+		}
+		return 0;
+	});
+
+	const currentPath = location.pathname;
+	const isPageRoute = currentPath.startsWith('/page/');
+	const currentSlug = isPageRoute ? currentPath.replace('/page/', '') : currentPath.split('/')[1] || '';
+
+	const isItemActive = (item: NavItem) =>
+		item.type === 'page' ? isPageRoute && currentSlug === item.slug : !isPageRoute && currentSlug === item.slug;
+
+	const handleItemClick = (item: NavItem) => {
+		if (item.type === 'page') {
+			navigate(`/page/${item.slug}`);
+		} else {
+			navigate(`/${item.slug}`);
+		}
+		onMobileClose();
+	};
+
+	return (
+		<>
+			{mobileOpen && (
+				<div
+					className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm lg:hidden"
+					onClick={onMobileClose}
+					aria-hidden="true"
+				/>
+			)}
+
+			<aside
+				className={cn(
+					'fixed inset-y-0 left-0 z-50 flex w-[248px] flex-col border-r border-border bg-surface transition-transform duration-300 ease-out',
+					'lg:sticky lg:top-0 lg:z-auto lg:h-screen lg:shrink-0 lg:translate-x-0 lg:transition-none',
+					mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
+				)}>
+				<div className="flex h-14 shrink-0 items-center gap-2.5 border-b border-border px-4">
+					<PanelBrandMark icon={panelIcon} favicon={panelFavicon} size="sm" className="ring-0" />
+					<Slot name="sidebar.brand" as="div" className="flex items-center gap-2 empty:hidden" />
+					{panelTitle && (
+						<span className="hidden min-w-0 flex-1 truncate text-sm font-semibold uppercase tracking-wide text-fg sm:block">
+							{panelTitle}
+						</span>
+					)}
+					<IconButton
+						variant="ghost"
+						size="sm"
+						aria-label={translate('core:panel.open_menu')}
+						onClick={onMobileClose}
+						className="ml-auto lg:hidden">
+						<X className="h-4 w-4" />
+					</IconButton>
+				</div>
+
+				<nav className="flex-1 overflow-y-auto px-3 py-3" aria-label={translate('core:a11y.main_navigation')}>
+					<Slot name="sidebar.top" context={{ location: currentPath }} as="div" className="mb-2 space-y-1" />
+					<div className="space-y-0.5">
+						{navElements.map(element => {
+							if (element.type === 'ungrouped') {
+								return (
+									<NavItemButton
+										key={`ungrouped-${element.item.type}-${element.item.slug}`}
+										item={element.item}
+										isActive={isItemActive(element.item)}
+										onClick={() => handleItemClick(element.item)}
+									/>
+								);
+							}
+
+							const { group, items } = element;
+
+							return (
+								<div key={`group-${group}`} className="pt-4 first:pt-1">
+									<p className="px-3 pb-1.5 text-[11px] font-medium uppercase tracking-wider text-fg-muted">
+										{group}
+									</p>
+									<div className="space-y-0.5">
+										{items.map(item => (
+											<NavItemButton
+												key={`${item.type}-${item.slug}`}
+												item={item}
+												isActive={isItemActive(item)}
+												onClick={() => handleItemClick(item)}
+											/>
+										))}
+									</div>
+								</div>
+							);
+						})}
+					</div>
+				</nav>
+
+				<Slot
+					name="sidebar.bottom"
+					context={{ location: currentPath }}
+					as="div"
+					className="shrink-0 space-y-1 border-t border-border p-3"
+				/>
+			</aside>
+		</>
+	);
+}

package/src/components/modals/RelationCreateModal.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { SerializedForm } from '@maxal_studio/kratosjs';
+import { getFormSchema, createRelationRecord } from '../../api/resourceApi';
+import { SerializedRelation } from '../../types';
+import { ModalDrawer } from '../ModalDrawer';
+import { Spinner } from '../ui/Spinner';
+import { ResourceFormModal } from './ResourceFormModal';
+import { translate } from '../../i18n/activeLocale';
+
+export interface RelationCreateModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+	relation: SerializedRelation;
+	parentId: string;
+	parentResourceSlug: string;
+	apiBaseUrl: string;
+	onSuccess?: () => void;
+	depth?: number;
+	onCloseAll?: () => void;
+}
+
+/**
+ * Create a related record from the view modal: fetches the related
+ * resource's form schema, injects the parent foreign key as a hidden
+ * field, and posts to the relation endpoint.
+ */
+export function RelationCreateModal({
+	isOpen,
+	onClose,
+	relation,
+	parentId,
+	parentResourceSlug,
+	apiBaseUrl,
+	onSuccess,
+	depth = 0,
+	onCloseAll,
+}: RelationCreateModalProps) {
+	const [fetchedFormSchema, setFetchedFormSchema] = useState<SerializedForm | null>(null);
+	const [loadingSchema, setLoadingSchema] = useState(false);
+
+	useEffect(() => {
+		if (!isOpen) return;
+
+		let cancelled = false;
+		const fetchSchema = async () => {
+			setLoadingSchema(true);
+			try {
+				const schema = await getFormSchema(apiBaseUrl, relation.resourceSlug);
+				if (!cancelled) setFetchedFormSchema(schema);
+			} catch (err) {
+				console.error('Error fetching form schema:', err);
+			} finally {
+				if (!cancelled) setLoadingSchema(false);
+			}
+		};
+
+		fetchSchema();
+		return () => {
+			cancelled = true;
+		};
+	}, [isOpen, relation.resourceSlug, apiBaseUrl]);
+
+	// Inject a hidden input for the parent foreign key; drop any visible FK field
+	const formSchema: SerializedForm = useMemo(() => {
+		if (!fetchedFormSchema?.components) {
+			return { type: 'form', components: [] };
+		}
+		return {
+			type: 'form',
+			components: [
+				{ type: 'hidden', name: relation.foreignKey, default: parentId, label: '' },
+				...fetchedFormSchema.components.filter((component: any) => component.name !== relation.foreignKey),
+			],
+		};
+	}, [relation, parentId, fetchedFormSchema]);
+
+	if (loadingSchema) {
+		return (
+			<ModalDrawer
+				isOpen={isOpen}
+				onClose={onClose}
+				title={`Add ${relation.label}`}
+				depth={depth}
+				onCloseAll={onCloseAll}>
+				<div className="flex items-center justify-center py-8">
+					<Spinner size="lg" label={translate('core:common.loading_ellipsis')} />
+				</div>
+			</ModalDrawer>
+		);
+	}
+
+	return (
+		<ResourceFormModal
+			isOpen={isOpen}
+			onClose={onClose}
+			mode="create"
+			resourceSlug={relation.resourceSlug}
+			resourceName={relation.label}
+			apiBaseUrl={apiBaseUrl}
+			formSchema={formSchema}
+			submit={payload => createRelationRecord(apiBaseUrl, parentResourceSlug, parentId, relation.name, payload)}
+			onSuccess={onSuccess}
+			depth={depth}
+			onCloseAll={onCloseAll}
+		/>
+	);
+}