@maxal_studio/kratosjs-react 1.0.0

package/src/utils/formatValue.test.tsx

@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest';
+import { formatDate, formatNumber, formatBoolean, formatSelectLabel } from './formatValue';
+
+describe('formatDate', () => {
+	it('returns "-" for empty values', () => {
+		expect(formatDate(null)).toBe('-');
+		expect(formatDate('')).toBe('-');
+	});
+
+	it('returns the raw value for invalid dates', () => {
+		expect(formatDate('not-a-date')).toBe('not-a-date');
+	});
+
+	it('applies YYYY-MM-DD style format tokens', () => {
+		expect(formatDate('2026-01-15T10:30:45', 'YYYY-MM-DD')).toBe('2026-01-15');
+		expect(formatDate('2026-01-15T10:30:45', 'DD/MM/YYYY HH:mm')).toBe('15/01/2026 10:30');
+	});
+});
+
+describe('formatNumber', () => {
+	it('returns "-" for null/undefined', () => {
+		expect(formatNumber(null)).toBe('-');
+		expect(formatNumber(undefined)).toBe('-');
+	});
+
+	it('returns the raw value as string for non-numbers', () => {
+		expect(formatNumber('abc')).toBe('abc');
+	});
+
+	it('formats currency', () => {
+		expect(formatNumber(1234.5, { currency: 'USD' })).toBe('$1,234.50');
+	});
+
+	it('applies fixed decimals', () => {
+		expect(formatNumber(3.14159, { decimals: 2 })).toBe('3.14');
+	});
+
+	it('falls back to locale formatting', () => {
+		expect(formatNumber(1000000)).toBe((1000000).toLocaleString());
+	});
+});
+
+describe('formatBoolean', () => {
+	it('maps booleans to Yes/No and empty to "-"', () => {
+		expect(formatBoolean(true)).toBe('Yes');
+		expect(formatBoolean(false)).toBe('No');
+		expect(formatBoolean(null)).toBe('-');
+	});
+});
+
+describe('formatSelectLabel', () => {
+	it('returns "-" for empty values', () => {
+		expect(formatSelectLabel(null)).toBe('-');
+	});
+
+	it('maps a single value through options', () => {
+		expect(formatSelectLabel('a', { a: 'Alpha' })).toBe('Alpha');
+		expect(formatSelectLabel('missing', { a: 'Alpha' })).toBe('missing');
+	});
+
+	it('joins multiple values with labels', () => {
+		expect(formatSelectLabel(['a', 'b'], { a: 'Alpha', b: 'Beta' }, true)).toBe('Alpha, Beta');
+		expect(formatSelectLabel([], { a: 'Alpha' }, true)).toBe('-');
+	});
+});

package/src/utils/formatValue.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { getActiveLocale, translate } from '../i18n/activeLocale';
+
+/**
+ * Utility functions for formatting field values in view mode
+ */
+
+/**
+ * Format a date value according to the specified format
+ */
+export function formatDate(value: any, format?: string): string {
+	if (!value) return '-';
+
+	try {
+		const date = new Date(value);
+		if (isNaN(date.getTime())) return String(value);
+
+		if (format) {
+			// Simple format support - can be extended
+			const year = date.getFullYear();
+			const month = String(date.getMonth() + 1).padStart(2, '0');
+			const day = String(date.getDate()).padStart(2, '0');
+			const hours = String(date.getHours()).padStart(2, '0');
+			const minutes = String(date.getMinutes()).padStart(2, '0');
+			const seconds = String(date.getSeconds()).padStart(2, '0');
+
+			return format
+				.replace('YYYY', String(year))
+				.replace('MM', month)
+				.replace('DD', day)
+				.replace('HH', hours)
+				.replace('mm', minutes)
+				.replace('ss', seconds);
+		}
+
+		return date.toLocaleString(getActiveLocale());
+	} catch {
+		return String(value);
+	}
+}
+
+/**
+ * Format a number value with optional options
+ */
+export function formatNumber(value: any, options?: { decimals?: number; currency?: string }): string {
+	if (value === null || value === undefined) return '-';
+
+	const num = Number(value);
+	if (isNaN(num)) return String(value);
+
+	if (options?.currency) {
+		return new Intl.NumberFormat(getActiveLocale(), {
+			style: 'currency',
+			currency: options.currency,
+			minimumFractionDigits: options.decimals ?? 2,
+			maximumFractionDigits: options.decimals ?? 2,
+		}).format(num);
+	}
+
+	if (options?.decimals !== undefined) {
+		return num.toFixed(options.decimals);
+	}
+
+	return num.toLocaleString(getActiveLocale());
+}
+
+/**
+ * Format a boolean value
+ */
+export function formatBoolean(value: any): string {
+	if (value === null || value === undefined) return '-';
+	return value ? translate('core:common.yes') : translate('core:common.no');
+}
+
+/**
+ * Format a select value to display option labels
+ */
+export function formatSelectLabel(value: any, options?: Record<string | number, string>, isMultiple?: boolean): string {
+	if (!value) return '-';
+
+	if (isMultiple && Array.isArray(value)) {
+		if (value.length === 0) return '-';
+		if (!options) return value.join(', ');
+		return value
+			.map(v => {
+				const key = String(v);
+				return options[key] || key;
+			})
+			.join(', ');
+	}
+
+	if (!options) return String(value);
+	const key = String(value);
+	return options[key] || key;
+}
+
+/**
+ * Format a textarea value preserving line breaks
+ * Returns an array of React elements for rendering
+ */
+export function formatTextarea(value: any): React.ReactNode {
+	if (value === null || value === undefined) return '-';
+	// If is js object, return json string
+	let text = value;
+	if (typeof value === 'object') {
+		text = JSON.stringify(value, null, 2);
+	} else {
+		text = String(value);
+	}
+	const lines = text.split('\n');
+	return lines.map((line, i) => (
+		<React.Fragment key={i}>
+			{line}
+			{i < lines.length - 1 && <br />}
+		</React.Fragment>
+	));
+}

package/src/utils/layoutStorage.ts

@@ -0,0 +1,52 @@
+/**
+ * Layout storage utilities for managing table/grid layout preferences in localStorage
+ */
+export const layoutStorage = {
+	/**
+	 * Get layout preference for a resource
+	 * @param resourceKey Unique identifier for the resource (e.g., 'users', 'posts')
+	 * @param defaultLayout Default layout to return if no preference is stored
+	 * @returns 'table' or 'grid'
+	 */
+	getLayout(resourceKey: string, defaultLayout: 'table' | 'grid' = 'table'): 'table' | 'grid' {
+		try {
+			const key = `kratosjs_layout_${resourceKey}`;
+			const stored = localStorage.getItem(key);
+			if (stored === 'table' || stored === 'grid') {
+				return stored;
+			}
+			return defaultLayout;
+		} catch (error) {
+			console.warn('Failed to read layout preference from localStorage:', error);
+			return defaultLayout;
+		}
+	},
+
+	/**
+	 * Set layout preference for a resource
+	 * @param resourceKey Unique identifier for the resource
+	 * @param layout Layout mode - 'table' or 'grid'
+	 */
+	setLayout(resourceKey: string, layout: 'table' | 'grid'): void {
+		try {
+			const key = `kratosjs_layout_${resourceKey}`;
+			localStorage.setItem(key, layout);
+		} catch (error) {
+			// Handle quota exceeded or other localStorage errors
+			if (error instanceof Error && error.name === 'QuotaExceededError') {
+				console.warn('localStorage quota exceeded, layout preference not saved');
+			} else {
+				console.warn('Failed to save layout preference to localStorage:', error);
+			}
+		}
+	},
+
+	/**
+	 * Clear stored layout preference for a resource
+	 * @param resourceKey Unique identifier for the resource
+	 */
+	clearLayout(resourceKey: string): void {
+		const key = `kratosjs_layout_${resourceKey}`;
+		localStorage.removeItem(key);
+	},
+};

package/src/utils/redirectHandler.ts

@@ -0,0 +1,29 @@
+/**
+ * Handle redirect from API response
+ * @param responseData - Response data from API
+ * @param navigate - React Router navigate function
+ * @returns true if redirect was handled, false otherwise
+ */
+export function handleRedirect(responseData: any, navigate: (path: string) => void): boolean {
+	if (responseData?.redirect) {
+		const redirectPath = responseData.redirect;
+
+		// Handle relative paths (client-side navigation)
+		if (redirectPath.startsWith('/')) {
+			navigate(redirectPath);
+			return true;
+		}
+
+		// Handle absolute URLs (external redirects)
+		if (redirectPath.startsWith('http://') || redirectPath.startsWith('https://')) {
+			window.location.href = redirectPath;
+			return true;
+		}
+
+		// Invalid redirect path
+		console.warn('Invalid redirect path:', redirectPath);
+		return false;
+	}
+
+	return false;
+}

package/src/utils/tableFormatters.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest';
+import { formatValue, stripHtml } from './tableFormatters';
+
+const column = (overrides: Record<string, unknown> = {}) => overrides as any;
+
+describe('formatValue', () => {
+	it('returns null for null/undefined values', () => {
+		expect(formatValue(null, column())).toBeNull();
+		expect(formatValue(undefined, column())).toBeNull();
+	});
+
+	it('formats dates with dateFormat', () => {
+		const value = '2026-01-15T10:30:00';
+		expect(formatValue(value, column({ dateFormat: 'date' }))).toBe(new Date(value).toLocaleDateString());
+		expect(formatValue(value, column({ dateFormat: 'dateTime' }))).toBe(new Date(value).toLocaleString());
+	});
+
+	it('returns the raw value for invalid dates', () => {
+		expect(formatValue('nope', column({ dateFormat: 'date' }))).toBe('nope');
+	});
+
+	it('formats relative time for past dates', () => {
+		const twoHoursAgo = new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString();
+		expect(formatValue(twoHoursAgo, column({ dateFormat: 'since' }))).toBe('2 hours ago');
+	});
+
+	it('formats money', () => {
+		expect(formatValue(12.5, column({ moneyFormat: 'USD' }))).toBe('$12.50');
+		expect(formatValue('12.5', column({ moneyFormat: 'EUR' }))).toBe('€12.50');
+		expect(formatValue('abc', column({ moneyFormat: 'USD' }))).toBe('abc');
+	});
+
+	it('strips HTML by default', () => {
+		expect(formatValue('<b>bold</b> text', column())).toBe('bold text');
+	});
+
+	it('keeps HTML when stripHtml is false', () => {
+		expect(formatValue('<b>bold</b>', column({ stripHtml: false }))).toBe('<b>bold</b>');
+	});
+
+	it('strips HTML from array items', () => {
+		expect(formatValue(['<i>a</i>', 2], column())).toEqual(['a', 2]);
+	});
+});
+
+describe('stripHtml', () => {
+	it('removes tags and keeps text', () => {
+		expect(stripHtml('<div><p>hello</p> <span>world</span></div>')).toBe('hello world');
+	});
+
+	it('passes through non-strings', () => {
+		expect(stripHtml(42 as unknown as string)).toBe(42);
+	});
+});

package/src/utils/tableFormatters.ts

@@ -0,0 +1,104 @@
+import { SerializedColumn } from '@maxal_studio/kratosjs';
+import { executeSerializedFunction } from '../runtime/serializedFunctions';
+import { getActiveLocale } from '../i18n/activeLocale';
+
+/**
+ * Format a value based on column configuration
+ * @param value - The cell value
+ * @param column - The column configuration
+ * @param row - The entire row data (optional, used by formatStateUsing function)
+ */
+export function formatValue(value: any, column: SerializedColumn, row?: Record<string, any>): any {
+	// Only apply placeholder for null/undefined when there's no formatter
+	if (value === null || value === undefined) {
+		return null;
+	}
+
+	// Date formatting
+	if (column.dateFormat) {
+		const date = new Date(value);
+		if (isNaN(date.getTime())) return value;
+
+		const locale = getActiveLocale();
+		switch (column.dateFormat) {
+			case 'date':
+				return date.toLocaleDateString(locale);
+			case 'dateTime':
+				return date.toLocaleString(locale);
+			case 'time':
+				return date.toLocaleTimeString(locale);
+			case 'since':
+			case 'until':
+				return getRelativeTime(date);
+			default:
+				return date.toLocaleDateString(locale);
+		}
+	}
+
+	// Money formatting
+	if (column.moneyFormat) {
+		const numValue = typeof value === 'number' ? value : parseFloat(value);
+		if (isNaN(numValue)) return value;
+
+		return new Intl.NumberFormat(getActiveLocale(), {
+			style: 'currency',
+			currency: column.moneyFormat || 'USD',
+		}).format(numValue);
+	}
+
+	// Strip HTML by default; only skip when stripHtml is explicitly false.
+	// column.stripHtml is true (default), false (explicit), or undefined (treated as true).
+	const shouldStripHtml = column.stripHtml !== false;
+
+	if (shouldStripHtml) {
+		if (typeof value === 'string') {
+			return stripHtml(value);
+		}
+		// Handle arrays - strip HTML from each string item
+		if (Array.isArray(value)) {
+			return value.map(item => (typeof item === 'string' ? stripHtml(item) : item));
+		}
+	}
+
+	return value;
+}
+
+/**
+ * Strip HTML tags from a string
+ * @param html - The HTML string to strip
+ * @returns Plain text with HTML tags removed
+ */
+export function stripHtml(html: string): string {
+	if (typeof html !== 'string') {
+		return html;
+	}
+
+	// Create a temporary DOM element to parse HTML
+	const tmp = document.createElement('div');
+	tmp.innerHTML = html;
+	return tmp.textContent || tmp.innerText || '';
+}
+
+/**
+ * Locale-aware relative time (e.g. "2 hours ago", "in 3 days"), using the active
+ * locale via `Intl.RelativeTimeFormat`. The true signed delta (date − now) drives
+ * direction, so past dates read "ago" and future dates read "in …".
+ */
+function getRelativeTime(date: Date): string {
+	const deltaSec = Math.round((date.getTime() - Date.now()) / 1000);
+	const abs = Math.abs(deltaSec);
+	const rtf = new Intl.RelativeTimeFormat(getActiveLocale(), { numeric: 'auto' });
+
+	const units: [Intl.RelativeTimeFormatUnit, number][] = [
+		['year', 31536000],
+		['month', 2592000],
+		['week', 604800],
+		['day', 86400],
+		['hour', 3600],
+		['minute', 60],
+	];
+	for (const [unit, secs] of units) {
+		if (abs >= secs) return rtf.format(Math.round(deltaSec / secs), unit);
+	}
+	return rtf.format(0, 'second');
+}

package/src/utils/widgetVisibilityStorage.ts

@@ -0,0 +1,38 @@
+const WIDGET_VISIBILITY_KEY = 'kratosjs_widgets_expanded';
+
+/** Default when no preference stored: desktop expanded, mobile collapsed */
+export function getDefaultWidgetsExpanded(): boolean {
+	if (typeof window === 'undefined') return true;
+	return window.matchMedia('(min-width: 768px)').matches;
+}
+
+/**
+ * Storage for widgets expanded/collapsed state.
+ * When no value is stored, mobile should be collapsed and desktop expanded (handled in component via media query).
+ */
+export const widgetVisibilityStorage = {
+	get(): boolean | null {
+		try {
+			const stored = localStorage.getItem(WIDGET_VISIBILITY_KEY);
+			if (stored === 'true') return true;
+			if (stored === 'false') return false;
+			return null;
+		} catch {
+			return null;
+		}
+	},
+
+	set(expanded: boolean): void {
+		try {
+			localStorage.setItem(WIDGET_VISIBILITY_KEY, String(expanded));
+		} catch (error) {
+			if (error instanceof Error && error.name === 'QuotaExceededError') {
+				console.warn('localStorage quota exceeded, widgets visibility not saved');
+			}
+		}
+	},
+
+	clear(): void {
+		localStorage.removeItem(WIDGET_VISIBILITY_KEY);
+	},
+};

package/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+/**
+ * Tailwind v4 uses CSS-first configuration. Dynamic color and plugin spacing
+ * safelists live in src/styles.css via @source inline(). This file is kept
+ * for tooling compatibility only.
+ */
+export default {
+	content: ['./src/**/*.{js,ts,jsx,tsx}'],
+};

package/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
+
+// Vite config for building only the CSS with Tailwind
+export default defineConfig({
+	plugins: [tailwindcss()],
+	build: {
+		outDir: 'dist',
+		emptyOutDir: false, // Don't clear dist folder (tsc already created .js/.d.ts files)
+		rollupOptions: {
+			input: './src/styles.css',
+			output: {
+				assetFileNames: 'styles.css',
+			},
+		},
+	},
+});