@questpie/admin 1.1.1 → 3.0.0

package/dist/client/components/component-renderer.mjs

@@ -0,0 +1,258 @@
+import { selectAdmin, useAdminStore } from "../runtime/provider.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/components/component-renderer.tsx
+/**
+* Component Renderer
+*
+* Resolves server-defined component references to React components.
+* This is the bridge between server config (serializable references)
+* and client rendering (React components).
+*
+* @example
+* ```tsx
+* // Server sends: { type: "icon", props: { name: "ph:users" } }
+* // Client renders: <IconifyIcon name="ph:users" />
+*
+* <ComponentRenderer reference={{ type: "icon", props: { name: "ph:users" } }} />
+* ```
+*/
+/**
+* Iconify-based icon component.
+* Renders icons from any Iconify icon set (Phosphor, Material Design, etc.)
+*
+* @example
+* ```tsx
+* <IconifyIcon name="ph:users" size={24} />
+* <IconifyIcon name="mdi:home" className="text-blue-500" />
+* ```
+*/
+const IconifyIcon = React.memo(function IconifyIcon$1(t0) {
+	const $ = c(5);
+	const { name, size, className, color } = t0;
+	let t1;
+	if ($[0] !== className || $[1] !== color || $[2] !== name || $[3] !== size) {
+		t1 = /* @__PURE__ */ jsx(Icon, {
+			icon: name,
+			width: size,
+			height: size,
+			className,
+			color
+		});
+		$[0] = className;
+		$[1] = color;
+		$[2] = name;
+		$[3] = size;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+});
+/**
+* Badge component for status indicators
+*/
+function Badge(t0) {
+	const $ = c(4);
+	const { text, color: t1, className } = t0;
+	const color = t1 === void 0 ? "default" : t1;
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			default: "bg-muted text-muted-foreground",
+			primary: "bg-primary/10 text-primary",
+			secondary: "bg-secondary text-secondary-foreground",
+			destructive: "bg-destructive/10 text-destructive",
+			success: "bg-success/10 text-success",
+			warning: "bg-warning/10 text-warning"
+		};
+		$[0] = t2;
+	} else t2 = $[0];
+	const colorClasses = t2;
+	const t3 = `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${colorClasses[color] ?? colorClasses.default} ${className ?? ""}`;
+	let t4;
+	if ($[1] !== t3 || $[2] !== text) {
+		t4 = /* @__PURE__ */ jsx("span", {
+			className: t3,
+			children: text
+		});
+		$[1] = t3;
+		$[2] = text;
+		$[3] = t4;
+	} else t4 = $[3];
+	return t4;
+}
+function shallowEqualRecord(a, b) {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	const aKeys = Object.keys(a);
+	const bKeys = Object.keys(b);
+	if (aKeys.length !== bKeys.length) return false;
+	for (const key of aKeys) if (a[key] !== b[key]) return false;
+	return true;
+}
+function areRendererPropsEqual(prev, next) {
+	if (prev.registry !== next.registry) return false;
+	if (prev.fallback !== next.fallback) return false;
+	if (!shallowEqualRecord(prev.additionalProps, next.additionalProps)) return false;
+	if (prev.reference === next.reference) return true;
+	if (!prev.reference || !next.reference) return false;
+	if (prev.reference.type !== next.reference.type) return false;
+	return shallowEqualRecord(prev.reference.props, next.reference.props);
+}
+function RegistryComponentRenderer(t0) {
+	const $ = c(6);
+	const { reference, registry, fallback, additionalProps } = t0;
+	const admin = useAdminStore(selectAdmin);
+	let t1;
+	if ($[0] !== admin) {
+		t1 = admin?.getComponents?.() ?? {};
+		$[0] = admin;
+		$[1] = t1;
+	} else t1 = $[1];
+	const mergedRegistry = registry ?? t1;
+	const Component = mergedRegistry[reference.type];
+	if (!Component) {
+		if (process.env.NODE_ENV === "development") console.warn(`[ComponentRenderer] Unknown component type: "${reference.type}". Available types: ${Object.keys(mergedRegistry).join(", ")}`);
+		return fallback ?? null;
+	}
+	let t2;
+	if ($[2] !== Component || $[3] !== additionalProps || $[4] !== reference.props) {
+		t2 = /* @__PURE__ */ jsx(Component, {
+			...reference.props,
+			...additionalProps
+		});
+		$[2] = Component;
+		$[3] = additionalProps;
+		$[4] = reference.props;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+}
+/**
+* Renders a server-defined component reference.
+*
+* Looks up the component type in the registry and renders it with the provided props.
+* Falls back gracefully if the component type is not found.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <ComponentRenderer reference={{ type: "icon", props: { name: "ph:users" } }} />
+*
+* // With custom registry
+* <ComponentRenderer
+*   reference={{ type: "custom", props: { value: 42 } }}
+*   registry={{ custom: MyCustomComponent }}
+* />
+*
+* // With fallback
+* <ComponentRenderer
+*   reference={{ type: "unknown", props: {} }}
+*   fallback={<span>?</span>}
+* />
+* ```
+*/
+const ComponentRenderer = React.memo(function ComponentRenderer$1(t0) {
+	const $ = c(13);
+	const { reference, registry, fallback: t1, additionalProps } = t0;
+	const fallback = t1 === void 0 ? null : t1;
+	if (!reference) return fallback;
+	if (reference.type === "icon") {
+		let t2$1;
+		if ($[0] !== reference.props) {
+			t2$1 = reference.props ?? {};
+			$[0] = reference.props;
+			$[1] = t2$1;
+		} else t2$1 = $[1];
+		const iconProps = t2$1;
+		const iconName = iconProps.name;
+		if (typeof iconName === "string") {
+			let rest;
+			if ($[2] !== iconProps) {
+				const { name: _name, ...t3$1 } = iconProps;
+				rest = t3$1;
+				$[2] = iconProps;
+				$[3] = rest;
+			} else rest = $[3];
+			let t3;
+			if ($[4] !== additionalProps || $[5] !== iconName || $[6] !== rest) {
+				t3 = /* @__PURE__ */ jsx(Icon, {
+					icon: iconName,
+					...rest,
+					...additionalProps
+				});
+				$[4] = additionalProps;
+				$[5] = iconName;
+				$[6] = rest;
+				$[7] = t3;
+			} else t3 = $[7];
+			return t3;
+		}
+	}
+	let t2;
+	if ($[8] !== additionalProps || $[9] !== fallback || $[10] !== reference || $[11] !== registry) {
+		t2 = /* @__PURE__ */ jsx(RegistryComponentRenderer, {
+			reference,
+			registry,
+			fallback,
+			additionalProps
+		});
+		$[8] = additionalProps;
+		$[9] = fallback;
+		$[10] = reference;
+		$[11] = registry;
+		$[12] = t2;
+	} else t2 = $[12];
+	return t2;
+}, areRendererPropsEqual);
+/**
+* Check if a value is a component reference
+*/
+function isComponentReference(value) {
+	return typeof value === "object" && value !== null && "type" in value && "props" in value && typeof value.type === "string" && typeof value.props === "object";
+}
+/**
+* Resolve an icon to a React element.
+* Handles both ComponentReference objects and direct React components.
+*
+* @param icon - Icon to resolve (ComponentReference, React component, or undefined)
+* @param props - Additional props to pass to the icon
+* @returns React element or null
+*/
+function resolveIconElement(icon, props, registry) {
+	if (!icon) return null;
+	if (isComponentReference(icon)) return /* @__PURE__ */ jsx(ComponentRenderer, {
+		reference: icon,
+		additionalProps: props,
+		registry
+	});
+	if (typeof icon === "string") return /* @__PURE__ */ jsx(ComponentRenderer, {
+		reference: {
+			type: "icon",
+			props: { name: icon }
+		},
+		additionalProps: props,
+		registry
+	});
+	if (typeof icon === "function") return /* @__PURE__ */ jsx(icon, { ...props });
+	if (typeof icon === "object" && React.isValidElement(icon)) return icon;
+	return null;
+}
+/**
+* Create a render function for icons.
+* Useful for rendering icons in table cells or list items.
+*
+* @param registry - Custom component registry
+* @returns Function that renders an icon from a ComponentReference
+*/
+function createIconRenderer(registry) {
+	return (icon, props) => {
+		if (!icon) return null;
+		return resolveIconElement(icon, props, registry);
+	};
+}
+
+//#endregion
+export { Badge, ComponentRenderer, IconifyIcon, createIconRenderer, isComponentReference, resolveIconElement };

package/dist/client/components/error-boundary.mjs

@@ -0,0 +1,144 @@
+"use client";
+
+import { useTranslation } from "../i18n/hooks.mjs";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/error-boundary.tsx
+/**
+* Default fallback component for ErrorBoundary (functional, so it can use hooks)
+*/
+function DefaultErrorFallback(t0) {
+	const $ = c(9);
+	const { error } = t0;
+	const { t } = useTranslation();
+	let t1;
+	if ($[0] !== t) {
+		t1 = t("error.somethingWentWrong");
+		$[0] = t;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t1) {
+		t2 = /* @__PURE__ */ jsx("p", {
+			className: "text-destructive text-sm font-medium",
+			children: t1
+		});
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== error.message) {
+		t3 = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground mt-1 text-xs",
+			children: error.message
+		});
+		$[4] = error.message;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t2 || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("div", {
+			className: "border-destructive/20 bg-destructive/5 border p-4",
+			children: [t2, t3]
+		});
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+}
+/**
+* ErrorBoundary - Catches JavaScript errors in child component tree
+*
+* Prevents entire UI from crashing when a component throws an error.
+* Use around widgets, sections, or any component that might fail.
+*
+* @example
+* ```tsx
+* <ErrorBoundary fallback={<WidgetError />}>
+*   <ChartWidget config={config} />
+* </ErrorBoundary>
+*
+* // With error callback
+* <ErrorBoundary
+*   fallback={(error) => <p>Error: {error.message}</p>}
+*   onError={(error) => logToService(error)}
+* >
+*   <DashboardWidget config={config} />
+* </ErrorBoundary>
+* ```
+*/
+var ErrorBoundary = class extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			hasError: false,
+			error: null
+		};
+	}
+	static getDerivedStateFromError(error) {
+		return {
+			hasError: true,
+			error
+		};
+	}
+	componentDidCatch(error, errorInfo) {
+		this.props.onError?.(error, errorInfo);
+	}
+	render() {
+		if (this.state.hasError && this.state.error) {
+			const { fallback } = this.props;
+			if (typeof fallback === "function") return fallback(this.state.error);
+			if (fallback) return fallback;
+			return /* @__PURE__ */ jsx(DefaultErrorFallback, { error: this.state.error });
+		}
+		return this.props.children;
+	}
+};
+/**
+* WidgetErrorBoundary - Specialized error boundary for dashboard widgets
+*/
+function WidgetErrorBoundary(t0) {
+	const $ = c(6);
+	const { children, widgetType } = t0;
+	const { t } = useTranslation();
+	let t1;
+	if ($[0] !== t || $[1] !== widgetType) {
+		t1 = (error) => /* @__PURE__ */ jsxs("div", {
+			className: "border-destructive/20 bg-destructive/5 border p-4",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-destructive text-sm font-medium",
+					children: t("error.widgetError")
+				}),
+				widgetType && /* @__PURE__ */ jsxs("p", {
+					className: "text-muted-foreground text-xs",
+					children: ["Type: ", widgetType]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground mt-1 text-xs",
+					children: error.message
+				})
+			]
+		});
+		$[0] = t;
+		$[1] = widgetType;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== children || $[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(ErrorBoundary, {
+			fallback: t1,
+			children
+		});
+		$[3] = children;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+}
+
+//#endregion
+export { WidgetErrorBoundary };