@maxal_studio/kratosjs-react 1.0.0

package/src/components/table/TableRow.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';
+import { Slot } from '../../slots/Slot';
+
+interface TableRowProps {
+	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 TableRow({
+	schema,
+	row,
+	rowIndex,
+	totalRows,
+	rowId,
+	visibleColumns,
+	isSelected,
+	hasChanges,
+	openActionsRowId,
+	onRowSelect,
+	onCellChange,
+	onRowAction,
+	onSaveRow,
+	onResetRow,
+	onToggleActions,
+}: TableRowProps) {
+	const columnRegistry = useColumnRegistry();
+
+	const rowBg = cn(
+		schema.striped && !hasChanges && (rowIndex % 2 === 1 ? 'bg-muted/25' : 'bg-surface'),
+		hasChanges && 'bg-accent-soft/20',
+	);
+
+	const stickyActionsBg = cn(
+		'border-l border-border shadow-[-6px_0_10px_-6px] shadow-black/10',
+		hasChanges ? 'bg-accent-soft' : schema.striped && rowIndex % 2 === 1 ? 'bg-muted' : 'bg-surface',
+		'group-hover:bg-hover',
+	);
+
+	return (
+		<tr
+			className={cn(
+				'group border-b border-border/60 transition-colors last:border-b-0 hover:bg-hover/70',
+				hasChanges && 'ring-1 ring-inset ring-accent/20',
+				rowBg,
+			)}>
+			{schema.bulkActions && schema.bulkActions.length > 0 && (
+				<td className="w-12 px-4 py-3">
+					<Checkbox id={`checkbox-${rowId}`} checked={isSelected} onChange={() => onRowSelect(rowId)} />
+				</td>
+			)}
+
+			{visibleColumns.map(column => {
+				const ColumnComponent = columnRegistry[column.type];
+				const isMediaColumn = ['image', 'video', 'media'].includes(column.type);
+
+				const width =
+					!isMediaColumn && column.width
+						? typeof column.width === 'number'
+							? `${column.width}px`
+							: /^\d+$/.test(column.width)
+								? `${column.width}px`
+								: column.width
+						: undefined;
+
+				const widthStyle = width ? { width, minWidth: width, maxWidth: width } : undefined;
+
+				if (!ColumnComponent) {
+					return (
+						<td key={column.name} className="px-4 py-3 text-sm text-fg-secondary" style={widthStyle}>
+							Unknown column type: {column.type}
+						</td>
+					);
+				}
+
+				const isEditable = ['textinput', 'select', 'checkbox', 'toggle'].includes(column.type);
+
+				return (
+					<td key={column.name} className="px-4 py-3 text-sm text-fg whitespace-nowrap" style={widthStyle}>
+						<ColumnComponent
+							column={column}
+							record={row}
+							rowIndex={rowIndex}
+							onCellChange={
+								isEditable ? (value: any) => onCellChange(rowId, column.name, value) : undefined
+							}
+						/>
+					</td>
+				);
+			})}
+
+			<td
+				className={cn('sticky right-0 px-4 py-3 text-right transition-colors', stickyActionsBg)}
+				style={{
+					zIndex: openActionsRowId === rowId ? 50 : 10,
+				}}>
+				<div className="flex items-center justify-end gap-2">
+					<Slot
+						name="table.rowActions"
+						context={{ schema, record: row, data: { rowId, rowIndex } }}
+						as="div"
+						className="flex items-center gap-2 empty:hidden"
+					/>
+					{hasChanges && (
+						<>
+							<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 className="hidden h-5 w-px bg-border sm:block" aria-hidden />
+						</>
+					)}
+					{schema.actions && schema.actions.length > 0 && (
+						<TableActionsDropdown
+							schema={schema}
+							rowId={rowId}
+							rowIndex={rowIndex}
+							totalRows={totalRows}
+							isOpen={openActionsRowId === rowId}
+							onToggle={() => onToggleActions(rowId)}
+							onAction={onRowAction}
+						/>
+					)}
+				</div>
+			</td>
+		</tr>
+	);
+}

package/src/components/table/TableSearchBar.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Search } from 'lucide-react';
+import { Icon } from '../utils/Icon';
+import { cn } from '../../utils/classNames';
+import { useTranslation } from '../../i18n/useTranslation';
+
+interface TableSearchBarProps {
+	searchable: boolean;
+	searchQuery: string;
+	onSearchChange: (query: string) => void;
+	onCreateClick?: () => void;
+	onCreateModalOpen?: () => void;
+	showCreateButton?: boolean;
+}
+
+export function TableSearchBar({
+	searchable,
+	searchQuery,
+	onSearchChange,
+	onCreateClick,
+	onCreateModalOpen,
+	showCreateButton = true,
+}: TableSearchBarProps) {
+	const { t } = useTranslation();
+	if (!searchable && !showCreateButton) {
+		return null;
+	}
+
+	return (
+		<div className="flex min-w-0 flex-1 items-center gap-2 sm:gap-3">
+			{searchable && (
+				<div className="relative min-w-0 flex-1">
+					<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-fg-muted" />
+					<input
+						type="text"
+						placeholder={t('core:common.search')}
+						value={searchQuery}
+						onChange={e => onSearchChange(e.target.value)}
+						className={cn(
+							'h-9 w-full rounded-full border border-border bg-input/60 pl-9 pr-4 text-sm text-fg',
+							'placeholder:text-fg-muted',
+							'focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring',
+						)}
+						aria-label={t('core:search.records')}
+					/>
+				</div>
+			)}
+
+			{showCreateButton && (
+				<button
+					onClick={onCreateClick || onCreateModalOpen}
+					className={cn(
+						'inline-flex h-9 shrink-0 touch-manipulation items-center justify-center gap-2 rounded-full bg-accent px-3 text-sm font-medium text-accent-fg transition-colors',
+						'sm:px-4 hover:bg-accent-hover',
+						!searchable && 'w-auto',
+						searchable && 'w-9 sm:w-auto',
+					)}
+					title={t('core:table.create_record')}
+					aria-label={t('core:table.create_record')}>
+					<Icon name="Plus" className="h-4 w-4 shrink-0" />
+					<span className="hidden sm:inline">{t('core:common.create')}</span>
+				</button>
+			)}
+		</div>
+	);
+}

package/src/components/table/TableTabs.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Icon } from '../utils/Icon';
+import { cn } from '../../utils/classNames';
+import { pillTabClass } from '../ui/PillButton';
+import { translate } from '../../i18n/activeLocale';
+
+export interface TableTab {
+	key: string;
+	label: string;
+	icon?: string;
+	default?: boolean;
+}
+
+interface TableTabsProps {
+	tabs: TableTab[];
+	activeTab: string | null;
+	onTabChange: (tabKey: string | null) => void;
+}
+
+export function TableTabs({ tabs, activeTab, onTabChange }: TableTabsProps) {
+	return (
+		<div
+			className={cn(
+				'flex w-full max-w-full touch-pan-x snap-x snap-mandatory gap-1 overflow-x-auto overscroll-x-contain sm:snap-none',
+			)}
+			style={{ WebkitOverflowScrolling: 'touch' }}
+			role="tablist"
+			aria-label={translate('core:table.view_tabs')}>
+			<button
+				role="tab"
+				aria-selected={activeTab === null}
+				onClick={() => onTabChange(null)}
+				className={pillTabClass(activeTab === null)}>
+				{translate('core:common.all')}
+			</button>
+			{tabs.map(tab => (
+				<button
+					key={tab.key}
+					role="tab"
+					aria-selected={activeTab === tab.key}
+					onClick={() => onTabChange(tab.key)}
+					className={pillTabClass(activeTab === tab.key)}>
+					{tab.icon && <Icon name={tab.icon} className="h-4 w-4 shrink-0" />}
+					<span className="whitespace-nowrap">{tab.label}</span>
+				</button>
+			))}
+		</div>
+	);
+}

package/src/components/ui/Badge.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { cn } from '../../utils/classNames';
+
+export type BadgeVariant = 'neutral' | 'accent' | 'success' | 'danger' | 'warning';
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+	variant?: BadgeVariant;
+}
+
+const VARIANT_CLASSES: Record<BadgeVariant, string> = {
+	neutral: 'bg-muted text-fg-secondary',
+	accent: 'bg-accent-soft text-accent',
+	success: 'bg-success-soft text-success',
+	danger: 'bg-danger-soft text-danger',
+	warning: 'bg-warning-soft text-warning',
+};
+
+export function Badge({ variant = 'neutral', className, children, ...rest }: BadgeProps) {
+	return (
+		<span
+			className={cn(
+				'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap',
+				VARIANT_CLASSES[variant],
+				className,
+			)}
+			{...rest}>
+			{children}
+		</span>
+	);
+}

package/src/components/ui/Button.test.tsx

@@ -0,0 +1,78 @@
+import { describe, expect, it, vi } from 'vitest';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button, IconButton } from './Button';
+import { Badge } from './Badge';
+import { EmptyState } from './EmptyState';
+import { ErrorAlert } from './ErrorAlert';
+
+describe('Button', () => {
+	it('renders variants with the right classes', () => {
+		const { rerender } = render(<Button>Save</Button>);
+		expect(screen.getByRole('button', { name: 'Save' })).toHaveClass('bg-accent');
+
+		rerender(<Button variant="danger">Delete</Button>);
+		expect(screen.getByRole('button', { name: 'Delete' })).toHaveClass('bg-danger');
+
+		rerender(<Button variant="secondary">Cancel</Button>);
+		expect(screen.getByRole('button', { name: 'Cancel' })).toHaveClass('bg-input');
+	});
+
+	it('defaults to type="button" so it does not submit forms accidentally', () => {
+		render(<Button>Click</Button>);
+		expect(screen.getByRole('button')).toHaveAttribute('type', 'button');
+	});
+
+	it('disables itself while loading', async () => {
+		const onClick = vi.fn();
+		render(
+			<Button loading onClick={onClick}>
+				Saving
+			</Button>,
+		);
+		const button = screen.getByRole('button');
+		expect(button).toBeDisabled();
+		await userEvent
+			.setup()
+			.click(button)
+			.catch(() => {});
+		expect(onClick).not.toHaveBeenCalled();
+	});
+
+	it('IconButton requires and applies the aria-label', () => {
+		render(<IconButton aria-label="Close">x</IconButton>);
+		expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
+	});
+});
+
+describe('Badge', () => {
+	it('applies variant classes', () => {
+		render(<Badge variant="success">Active</Badge>);
+		expect(screen.getByText('Active')).toHaveClass('bg-success-soft');
+	});
+});
+
+describe('EmptyState', () => {
+	it('renders title, description and action', () => {
+		render(<EmptyState title="Nothing here" description="Try again later" action={<Button>Retry</Button>} />);
+		expect(screen.getByText('Nothing here')).toBeInTheDocument();
+		expect(screen.getByText('Try again later')).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: 'Retry' })).toBeInTheDocument();
+	});
+});
+
+describe('ErrorAlert', () => {
+	it('renders the message and dismiss button', async () => {
+		const onDismiss = vi.fn();
+		render(<ErrorAlert message="Something broke" onDismiss={onDismiss} />);
+		expect(screen.getByRole('alert')).toHaveTextContent('Something broke');
+		await userEvent.setup().click(screen.getByLabelText('Dismiss'));
+		expect(onDismiss).toHaveBeenCalled();
+	});
+
+	it('renders nothing without a message', () => {
+		const { container } = render(<ErrorAlert message="" />);
+		expect(container).toBeEmptyDOMElement();
+	});
+});

package/src/components/ui/Button.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { cn } from '../../utils/classNames';
+import { Spinner } from './Spinner';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
+export type ButtonSize = 'sm' | 'md';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	variant?: ButtonVariant;
+	size?: ButtonSize;
+	loading?: boolean;
+	/** Use squared corners instead of the default pill shape. */
+	square?: boolean;
+	/** Icon element rendered before the label */
+	icon?: React.ReactNode;
+}
+
+/* Static class maps — never build Tailwind classes dynamically. */
+const VARIANT_CLASSES: Record<ButtonVariant, string> = {
+	primary: 'bg-accent text-accent-fg hover:bg-accent-hover shadow-soft-sm',
+	secondary: 'bg-input text-fg border border-input-border hover:bg-hover shadow-soft-sm',
+	ghost: 'bg-transparent text-fg-secondary hover:bg-hover hover:text-fg',
+	danger: 'bg-danger text-white hover:bg-danger-hover shadow-soft-sm',
+	outline: 'bg-transparent text-fg border border-border-strong hover:bg-hover',
+};
+
+const SIZE_CLASSES: Record<ButtonSize, string> = {
+	sm: 'h-8 px-3 text-xs gap-1.5',
+	md: 'h-10 px-4 text-sm gap-2',
+};
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+	{
+		variant = 'primary',
+		size = 'md',
+		loading = false,
+		square = false,
+		icon,
+		className,
+		children,
+		disabled,
+		type,
+		...rest
+	},
+	ref,
+) {
+	return (
+		<button
+			ref={ref}
+			type={type ?? 'button'}
+			disabled={disabled || loading}
+			className={cn(
+				'inline-flex items-center justify-center font-medium transition-colors touch-manipulation',
+				square ? 'rounded-lg' : 'rounded-full',
+				'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+				'disabled:opacity-60 disabled:cursor-not-allowed',
+				VARIANT_CLASSES[variant],
+				SIZE_CLASSES[size],
+				className,
+			)}
+			{...rest}>
+			{loading ? (
+				<Spinner size="sm" className="shrink-0" />
+			) : icon ? (
+				<span className="shrink-0">{icon}</span>
+			) : null}
+			{children}
+		</button>
+	);
+});
+
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	variant?: ButtonVariant;
+	size?: ButtonSize;
+	/** Use squared corners instead of the default pill shape. */
+	square?: boolean;
+	/** Accessible label (required — icon-only buttons have no text) */
+	'aria-label': string;
+}
+
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
+	{ variant = 'ghost', size = 'md', square = false, className, children, type, ...rest },
+	ref,
+) {
+	return (
+		<button
+			ref={ref}
+			type={type ?? 'button'}
+			className={cn(
+				'inline-flex items-center justify-center transition-colors touch-manipulation',
+				square ? 'rounded-lg' : 'rounded-full',
+				'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+				'disabled:opacity-60 disabled:cursor-not-allowed',
+				VARIANT_CLASSES[variant],
+				size === 'sm' ? 'h-8 w-8' : 'h-10 w-10',
+				className,
+			)}
+			{...rest}>
+			{children}
+		</button>
+	);
+});

package/src/components/ui/Card.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { cn } from '../../utils/classNames';
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+	/** Raised cards get a soft shadow (modals, popovers); flat cards only a border */
+	raised?: boolean;
+	padding?: boolean;
+}
+
+export function Card({ raised = false, padding = true, className, children, ...rest }: CardProps) {
+	return (
+		<div
+			className={cn(
+				'rounded-lg border border-border',
+				raised ? 'bg-raised shadow-soft' : 'bg-surface shadow-soft-sm',
+				padding && 'p-4 sm:p-6',
+				className,
+			)}
+			{...rest}>
+			{children}
+		</div>
+	);
+}

package/src/components/ui/ConfirmDialog.tsx

@@ -0,0 +1,112 @@
+import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { Button } from './Button';
+import { translate } from '../../i18n/activeLocale';
+
+export interface ConfirmOptions {
+	title?: string;
+	message: React.ReactNode;
+	confirmLabel?: string;
+	cancelLabel?: string;
+	/** Style the confirm button as destructive */
+	danger?: boolean;
+}
+
+type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
+
+const ConfirmContext = createContext<ConfirmFn | null>(null);
+
+interface PendingConfirm extends ConfirmOptions {
+	resolve: (confirmed: boolean) => void;
+}
+
+export function ConfirmProvider({ children }: { children: React.ReactNode }) {
+	const [pending, setPending] = useState<PendingConfirm | null>(null);
+	const confirmButtonRef = useRef<HTMLButtonElement>(null);
+
+	const confirm = useCallback<ConfirmFn>(options => {
+		return new Promise<boolean>(resolve => {
+			setPending({ ...options, resolve });
+		});
+	}, []);
+
+	const settle = useCallback(
+		(confirmed: boolean) => {
+			pending?.resolve(confirmed);
+			setPending(null);
+		},
+		[pending],
+	);
+
+	// Focus the confirm button and support Escape to cancel
+	useEffect(() => {
+		if (!pending) return;
+		confirmButtonRef.current?.focus();
+		const onKeyDown = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') settle(false);
+		};
+		window.addEventListener('keydown', onKeyDown);
+		return () => window.removeEventListener('keydown', onKeyDown);
+	}, [pending, settle]);
+
+	return (
+		<ConfirmContext.Provider value={confirm}>
+			{children}
+			{pending && (
+				<div className="fixed inset-0 z-[90] flex items-center justify-center p-4">
+					<div className="absolute inset-0 bg-black/50" onClick={() => settle(false)} aria-hidden="true" />
+					<div
+						role="alertdialog"
+						aria-modal="true"
+						aria-label={pending.title || translate('core:common.confirm')}
+						className="relative w-full max-w-md rounded-lg border border-border bg-raised p-6 shadow-soft-lg">
+						<div className="flex items-start gap-4">
+							<div
+								className={
+									pending.danger
+										? 'flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-danger-soft text-danger'
+										: 'flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-accent-soft text-accent'
+								}>
+								<AlertTriangle className="h-5 w-5" />
+							</div>
+							<div className="min-w-0 flex-1">
+								<h3 className="text-base font-semibold text-fg">
+									{pending.title || translate('core:confirm.are_you_sure')}
+								</h3>
+								<div className="mt-1.5 text-sm text-fg-secondary">{pending.message}</div>
+							</div>
+						</div>
+						<div className="mt-6 flex justify-end gap-2">
+							<Button variant="secondary" onClick={() => settle(false)}>
+								{pending.cancelLabel || translate('core:common.cancel')}
+							</Button>
+							<Button
+								ref={confirmButtonRef}
+								variant={pending.danger ? 'danger' : 'primary'}
+								onClick={() => settle(true)}>
+								{pending.confirmLabel || translate('core:common.confirm')}
+							</Button>
+						</div>
+					</div>
+				</div>
+			)}
+		</ConfirmContext.Provider>
+	);
+}
+
+/**
+ * Promise-based confirmation dialog. Outside a ConfirmProvider it falls
+ * back to the native window.confirm so callers always get an answer.
+ */
+export function useConfirm(): ConfirmFn {
+	const context = useContext(ConfirmContext);
+	return (
+		context ??
+		(async (options: ConfirmOptions) =>
+			window.confirm(
+				typeof options.message === 'string'
+					? options.message
+					: options.title || translate('core:confirm.are_you_sure'),
+			))
+	);
+}

package/src/components/ui/EmptyState.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Inbox } from 'lucide-react';
+import { cn } from '../../utils/classNames';
+
+export interface EmptyStateProps {
+	icon?: React.ReactNode;
+	title: string;
+	description?: string;
+	action?: React.ReactNode;
+	className?: string;
+}
+
+export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
+	return (
+		<div className={cn('flex flex-col items-center justify-center px-6 py-12 text-center', className)}>
+			<div className="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-muted text-fg-muted">
+				{icon ?? <Inbox className="h-6 w-6" />}
+			</div>
+			<p className="text-sm font-semibold text-fg">{title}</p>
+			{description && <p className="mt-1 max-w-sm text-sm text-fg-secondary">{description}</p>}
+			{action && <div className="mt-4">{action}</div>}
+		</div>
+	);
+}

package/src/components/ui/ErrorAlert.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { X, AlertCircle } from 'lucide-react';
+import { cn } from '../../utils/classNames';
+import { translate } from '../../i18n/activeLocale';
+
+export interface ErrorAlertProps {
+	message: React.ReactNode;
+	onDismiss?: () => void;
+	className?: string;
+}
+
+export function ErrorAlert({ message, onDismiss, className }: ErrorAlertProps) {
+	if (!message) return null;
+
+	return (
+		<div
+			role="alert"
+			className={cn(
+				'flex items-start justify-between gap-3 rounded-lg border border-danger/30 bg-danger-soft px-4 py-3',
+				className,
+			)}>
+			<div className="flex min-w-0 items-start gap-2">
+				<AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-danger" />
+				<p className="min-w-0 flex-1 break-words text-sm font-medium text-danger">{message}</p>
+			</div>
+			{onDismiss && (
+				<button
+					type="button"
+					onClick={onDismiss}
+					aria-label={translate('core:common.dismiss')}
+					className="shrink-0 rounded-md p-1 text-danger transition-colors hover:bg-danger/10">
+					<X className="h-4 w-4" />
+				</button>
+			)}
+		</div>
+	);
+}