@espressif/dashboard-ui-components 1.10.0 → 1.11.0

package/dist/components/dynamic-list/dynamic-list.js

@@ -0,0 +1,445 @@
+import { cn } from "../../utils/cn.js";
+import { Avatar, AvatarFallback } from "../../core/avatar.js";
+import { BasicDetailsCard } from "../cards/basic-details-card.js";
+import { Badge } from "../../core/badge.js";
+import { Link } from "../link/link.js";
+import { CopiableText } from "../copiable-text/copiable-text.js";
+import { Tag as Tag$1 } from "../tag/tag.js";
+import { Alert } from "../alert/alert.js";
+import { Code } from "../../core/animate-ui/components/animate/code.js";
+import { MonospaceContent } from "../monospace-content/monospace-content.js";
+import { SimpleList } from "../simple-list/simple-list.js";
+import { cloneElement, createElement, isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Bolt, Check, X } from "lucide-react";
+import { format, isValid } from "date-fns";
+import { startCase } from "lodash-es";
+//#region src/components/dynamic-list/dynamic-list.tsx
+function isPrimitive(value) {
+	if (value === null) return true;
+	const t = typeof value;
+	return t === "string" || t === "number" || t === "boolean" || t === "undefined";
+}
+function formatValue(value) {
+	if (value === null || value === void 0) return "-";
+	if (isPrimitive(value)) return String(value);
+	return JSON.stringify(value);
+}
+/** `typeof value === "object"` includes arrays; excludes `null`. */
+function isStructuredNonPrimitive(value) {
+	return value !== null && typeof value === "object";
+}
+function stringifyForCode(value) {
+	try {
+		return JSON.stringify(value, null, 2);
+	} catch {
+		return String(value);
+	}
+}
+function isPlainStringArray(value) {
+	return Array.isArray(value) && value.every((el) => typeof el === "string");
+}
+function isTagsPropertyKey(key) {
+	return key.toLowerCase().includes("tags");
+}
+function parseNameColonValue(entry) {
+	const i = entry.indexOf(":");
+	if (i === -1) return null;
+	return {
+		name: entry.slice(0, i),
+		value: entry.slice(i + 1)
+	};
+}
+function renderOverflowSafeBadgeText(text) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "min-w-0 break-all",
+		children: text
+	});
+}
+function renderPlainStringArrayBadges(strings) {
+	if (strings.length === 0) return "-";
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-w-0 w-full flex-wrap justify-end gap-1",
+		children: strings.map((s, i) => /* @__PURE__ */ jsx(Badge, {
+			variant: "outline",
+			color: "gray",
+			className: "min-w-0 max-w-full",
+			children: renderOverflowSafeBadgeText(s)
+		}, i))
+	});
+}
+function renderTagsPropertyArray(strings) {
+	if (strings.length === 0) return "-";
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-w-0 w-full flex-wrap justify-start gap-2",
+		children: strings.map((s, i) => {
+			const parsed = parseNameColonValue(s);
+			if (parsed != null) return /* @__PURE__ */ jsx(Tag$1, {
+				name: parsed.name,
+				value: parsed.value,
+				variant: "outline",
+				color: "gray"
+			}, i);
+			return /* @__PURE__ */ jsx(Badge, {
+				variant: "outline",
+				color: "gray",
+				className: "min-w-0 max-w-full",
+				children: renderOverflowSafeBadgeText(s)
+			}, i);
+		})
+	});
+}
+function isTimestampKey(key) {
+	return key.toLowerCase().includes("timestamp") || /_ts$/i.test(key);
+}
+function formatNumericTimestamp(n) {
+	if (!Number.isFinite(n)) return null;
+	const abs = Math.abs(n);
+	let ms;
+	if (abs < 1e11) ms = n * 1e3;
+	else if (abs < 0x5af3107a4000) ms = n;
+	else if (abs < 0x16345785d8a0000) ms = n / 1e3;
+	else ms = n / 1e6;
+	const d = new Date(ms);
+	if (!isValid(d)) return null;
+	const y = d.getFullYear();
+	if (y < 1970 || y > 2200) return null;
+	return format(d, "PPpp");
+}
+function formatTimestampStringForKey(key, value) {
+	if (typeof value !== "number") return null;
+	if (!isTimestampKey(key)) return null;
+	return formatNumericTimestamp(value);
+}
+/** Aligns with `Link` external detection for absolute / protocol-relative URLs. */
+var URL_EXTERNAL_PROTOCOL = /^(https?:|mailto:|tel:|sms:|ftp:)/i;
+var URL_PROTOCOL_RELATIVE = /^\/\//;
+function isLikelyUrlString(s) {
+	if (/[\n\r]/.test(s)) return false;
+	if (URL_EXTERNAL_PROTOCOL.test(s)) try {
+		new URL(s);
+		return true;
+	} catch {
+		return false;
+	}
+	if (URL_PROTOCOL_RELATIVE.test(s)) try {
+		new URL(`https:${s}`);
+		return true;
+	} catch {
+		return false;
+	}
+	if (s.startsWith("/")) return /^\/[A-Za-z0-9._~!$&'()*+,;=:@%-/]*$/.test(s);
+	return false;
+}
+function resolveEffectiveType(key, value, rowMeta) {
+	const explicit = rowMeta?.type;
+	if (explicit != null) return explicit;
+	if (rowMeta?.valueFormatter != null || rowMeta?.valueRender != null) return;
+	if (!key.endsWith("_url")) return void 0;
+	if (typeof value !== "string") return void 0;
+	const trimmed = value.trim();
+	if (trimmed.length === 0) return void 0;
+	if (!isLikelyUrlString(trimmed)) return void 0;
+	return "url";
+}
+function renderBooleanIcon(value) {
+	if (value) return /* @__PURE__ */ jsx(Check, {
+		className: "h-4 w-4 shrink-0 text-success",
+		"aria-hidden": true
+	});
+	return /* @__PURE__ */ jsx(X, {
+		className: "h-4 w-4 shrink-0 text-error",
+		"aria-hidden": true
+	});
+}
+function forcesColumnLayout(type) {
+	return type === "info" || type === "error" || type === "mono" || type === "url";
+}
+/** Default JSON/Code rendering for objects & arrays; stacks label above value like info/mono. */
+function rowUsesDefaultStructuredCode(value, rowMeta) {
+	return isStructuredNonPrimitive(value) && !rowMeta?.valueRender && !rowMeta?.valueFormatter && !isPlainStringArray(value);
+}
+/** Keys containing "tags" with a string[] value stack label above tags like info/mono/url. */
+function rowUsesTagsPropertyArray(key, value, rowMeta) {
+	return isTagsPropertyKey(key) && isPlainStringArray(value) && !rowMeta?.valueRender && !rowMeta?.valueFormatter;
+}
+var CODE_DISPLAY_CLASSNAME = "min-w-0 w-full max-w-full max-h-[200px] text-start [&_pre]:text-start";
+var DYNAMIC_LIST_SIZE_STYLES = {
+	sm: {
+		listGap: "gap-4",
+		rowGap: "gap-3",
+		itemGap: "gap-1.5",
+		labelTypography: "text-xs font-semibold",
+		valueTypography: "text-xs",
+		avatarSize: "h-8 w-8",
+		avatarFallbackTypography: "text-[10px]",
+		rowIcon: "h-3 w-3 shrink-0"
+	},
+	default: {
+		listGap: "gap-5",
+		rowGap: "gap-4",
+		itemGap: "gap-2",
+		labelTypography: "text-sm font-semibold",
+		valueTypography: "text-sm",
+		avatarSize: "h-10 w-10",
+		avatarFallbackTypography: "text-xs",
+		rowIcon: "h-3.5 w-3.5 shrink-0"
+	},
+	lg: {
+		listGap: "gap-6",
+		rowGap: "gap-5",
+		itemGap: "gap-3",
+		labelTypography: "text-base font-semibold",
+		valueTypography: "text-base",
+		avatarSize: "h-12 w-12",
+		avatarFallbackTypography: "text-sm",
+		rowIcon: "h-4 w-4 shrink-0"
+	}
+};
+function effectiveRowDirection(effectiveType, rowMeta, listDirection, value, key) {
+	if (forcesColumnLayout(effectiveType)) return "column";
+	if (rowUsesDefaultStructuredCode(value, rowMeta)) return "column";
+	if (rowUsesTagsPropertyArray(key, value, rowMeta)) return "column";
+	return listDirection;
+}
+/**
+* When non-null, the value is shown as unstyled `formatValue` text (no meta type, badges, Code, etc.)
+* and should be wrapped with `CopiableText`.
+*/
+function getPlainTextForCopiable(value, rowMeta, key, opts, effectiveType) {
+	if (effectiveType != null) return null;
+	if (rowMeta?.valueRender != null || rowMeta?.valueFormatter != null) return null;
+	if (isTagsPropertyKey(key) && isPlainStringArray(value)) return null;
+	if (isPlainStringArray(value)) return null;
+	if (opts.useIconsForBoolean && typeof value === "boolean") return null;
+	if (isStructuredNonPrimitive(value)) return null;
+	if (typeof value === "number" && (rowMeta?.type === "timestamp" || isTimestampKey(key))) {
+		if (formatNumericTimestamp(value) != null) return null;
+	}
+	return formatValue(value);
+}
+function resolveBaseValueNode(value, rowMeta, key, opts) {
+	if (rowMeta?.valueRender) return rowMeta.valueRender(value);
+	if (rowMeta?.valueFormatter) return rowMeta.valueFormatter(value);
+	if (isTagsPropertyKey(key) && isPlainStringArray(value)) return renderTagsPropertyArray(value);
+	if (isPlainStringArray(value)) return renderPlainStringArrayBadges(value);
+	if (opts.useIconsForBoolean && typeof value === "boolean") return renderBooleanIcon(value);
+	if (typeof value === "number" && (rowMeta?.type === "timestamp" || isTimestampKey(key))) {
+		const ts = formatNumericTimestamp(value);
+		if (ts != null) return ts;
+	}
+	if (isStructuredNonPrimitive(value)) return /* @__PURE__ */ jsx(Code, {
+		className: CODE_DISPLAY_CLASSNAME,
+		code: stringifyForCode(value),
+		lang: "json"
+	});
+	return formatValue(value);
+}
+function resolveMonoString(value, rowMeta, key) {
+	if (rowMeta?.valueFormatter) return rowMeta.valueFormatter(value);
+	const ts = formatTimestampStringForKey(key, value);
+	if (ts != null) return ts;
+	return formatValue(value);
+}
+function wrapTypedValue(value, rowMeta, key, opts, effectiveType) {
+	const base = resolveBaseValueNode(value, rowMeta, key, opts);
+	const t = effectiveType;
+	if (t == null) {
+		const plainText = getPlainTextForCopiable(value, rowMeta, key, opts, effectiveType);
+		if (plainText != null) return /* @__PURE__ */ jsx(CopiableText, {
+			text: plainText,
+			className: "min-w-0 max-w-full"
+		});
+		return base;
+	}
+	switch (t) {
+		case "badge": return /* @__PURE__ */ jsx(Badge, {
+			variant: "solid",
+			color: "gray",
+			className: cn("w-fit max-w-full self-start font-medium", DYNAMIC_LIST_SIZE_STYLES[opts.size].valueTypography),
+			children: base
+		});
+		case "info": return /* @__PURE__ */ jsx(Alert, {
+			variant: "soft",
+			color: "info",
+			type: "info",
+			size: opts.size,
+			children: base
+		});
+		case "error": return /* @__PURE__ */ jsx(Alert, {
+			variant: "soft",
+			color: "error",
+			type: "error",
+			size: opts.size,
+			children: base
+		});
+		case "mono":
+			if (rowMeta?.valueRender) return base;
+			if (!rowMeta?.valueFormatter && isPlainStringArray(value)) return base;
+			if (!rowMeta?.valueRender && !rowMeta?.valueFormatter && opts.useIconsForBoolean && typeof value === "boolean") return base;
+			if (isStructuredNonPrimitive(value) && !rowMeta?.valueFormatter && !isPlainStringArray(value)) return /* @__PURE__ */ jsx(Code, {
+				className: CODE_DISPLAY_CLASSNAME,
+				code: stringifyForCode(value),
+				lang: "json"
+			});
+			return /* @__PURE__ */ jsx(MonospaceContent, {
+				value: resolveMonoString(value, rowMeta, key),
+				color: "gray",
+				size: opts.size
+			});
+		case "url":
+			if (rowMeta?.valueRender || rowMeta?.valueFormatter) return base;
+			if (typeof value !== "string") return base;
+			{
+				const href = value.trim();
+				if (href.length === 0 || !isLikelyUrlString(href)) return base;
+				return /* @__PURE__ */ jsx(Link, {
+					to: href,
+					color: "info",
+					className: "min-w-0 break-all font-normal",
+					children: href
+				});
+			}
+		default: return base;
+	}
+}
+function defaultRowIcon(iconClass) {
+	return /* @__PURE__ */ jsx(Bolt, { className: iconClass });
+}
+function isComponentLike(icon) {
+	if (icon == null) return false;
+	if (typeof icon === "function") return true;
+	if (typeof icon === "object" && "$$typeof" in icon) return !isValidElement(icon);
+	return false;
+}
+function resolveLegacyRowIcon(rowMeta, iconClass) {
+	if (rowMeta?.icon == null) return defaultRowIcon(iconClass);
+	const ic = rowMeta.icon;
+	if (isValidElement(ic)) {
+		const el = ic;
+		return cloneElement(el, { className: cn(el.props.className, iconClass) });
+	}
+	if (isComponentLike(ic)) return createElement(ic, {
+		className: iconClass,
+		"aria-hidden": true
+	});
+	return ic;
+}
+function resolveRowLabel(key, rowMeta, verbatimKeyLabels) {
+	return rowMeta?.label ?? (verbatimKeyLabels ? key : startCase(key));
+}
+function toSimpleListItems(items, meta, hideIcon, resolveOpts, verbatimKeyLabels, labelClassName, valueClassName) {
+	return items.map(({ key, value }) => {
+		const rowMeta = meta?.[key];
+		const effectiveType = resolveEffectiveType(key, value, rowMeta);
+		const labelText = resolveRowLabel(key, rowMeta, verbatimKeyLabels);
+		const item = {
+			key,
+			label: labelClassName != null ? /* @__PURE__ */ jsx("span", {
+				className: labelClassName,
+				children: labelText
+			}) : labelText,
+			content: /* @__PURE__ */ jsx("div", {
+				className: cn("min-w-0", valueClassName),
+				children: wrapTypedValue(value, rowMeta, key, resolveOpts, effectiveType)
+			})
+		};
+		if (!hideIcon) item.icon = rowMeta?.icon ?? Bolt;
+		if (forcesColumnLayout(effectiveType) || rowUsesDefaultStructuredCode(value, rowMeta) || rowUsesTagsPropertyArray(key, value, rowMeta)) item.direction = "column";
+		return item;
+	});
+}
+function DynamicList({ items, meta, className, size = "default", labelClassName, valueClassName, simple = false, hideIcon = false, direction = "column", keyWidth = 30, useIconsForBoolean = false, verbatimKeyLabels = false }) {
+	const keyWidthPct = Math.min(100, Math.max(1, keyWidth));
+	const valueWidthPct = 100 - keyWidthPct;
+	const resolveOpts = {
+		useIconsForBoolean,
+		size
+	};
+	const sizeStyles = DYNAMIC_LIST_SIZE_STYLES[size];
+	if (simple) return /* @__PURE__ */ jsx(SimpleList, {
+		className,
+		size,
+		direction,
+		iconStyle: hideIcon ? "none" : "inline",
+		items: toSimpleListItems(items, meta, hideIcon, resolveOpts, verbatimKeyLabels, labelClassName, valueClassName)
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col", sizeStyles.listGap, className),
+		children: items.map(({ key, value }) => {
+			const rowMeta = meta?.[key];
+			const effectiveType = resolveEffectiveType(key, value, rowMeta);
+			const labelText = resolveRowLabel(key, rowMeta, verbatimKeyLabels);
+			const valueDisplay = wrapTypedValue(value, rowMeta, key, resolveOpts, effectiveType);
+			const rowDir = effectiveRowDirection(effectiveType, rowMeta, direction, value, key);
+			const rowIcon = resolveLegacyRowIcon(rowMeta, sizeStyles.rowIcon);
+			const hasTypedOrEffectiveMetaLayout = effectiveType != null;
+			const rendersPlainStringBadges = !rowMeta?.valueRender && !rowMeta?.valueFormatter && isPlainStringArray(value);
+			const usesDefaultStructuredCode = rowUsesDefaultStructuredCode(value, rowMeta);
+			const usesBadgeArrayLayout = rendersPlainStringBadges;
+			const valueRowAlignStart = usesBadgeArrayLayout;
+			const needsBlockValueLayout = hasTypedOrEffectiveMetaLayout || usesDefaultStructuredCode || usesBadgeArrayLayout;
+			if (rowDir === "row") {
+				const splitStyle = {
+					"--dynamic-list-key-width": `${keyWidthPct}%`,
+					"--dynamic-list-value-width": `${valueWidthPct}%`
+				};
+				return /* @__PURE__ */ jsxs("div", {
+					className: cn("flex w-full min-w-0 items-start sm:items-center", sizeStyles.rowGap),
+					children: [!hideIcon && /* @__PURE__ */ jsx(Avatar, {
+						className: sizeStyles.avatarSize,
+						children: /* @__PURE__ */ jsx(AvatarFallback, {
+							className: cn("flex items-center justify-center gap-1 border", sizeStyles.avatarFallbackTypography),
+							children: rowIcon
+						})
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cn("flex min-w-0 flex-1 flex-col sm:flex-row sm:gap-0", sizeStyles.itemGap, valueRowAlignStart ? "sm:items-start" : "sm:items-center"),
+						style: splitStyle,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn("truncate sm:flex-none sm:basis-[var(--dynamic-list-key-width)]", sizeStyles.labelTypography, labelClassName),
+							children: labelText
+						}), /* @__PURE__ */ jsx("div", {
+							className: cn("flex min-w-0 text-muted-foreground sm:flex-none sm:basis-[var(--dynamic-list-value-width)] sm:justify-end", sizeStyles.valueTypography, usesBadgeArrayLayout ? "items-start sm:pt-0.5 text-start" : "items-center"),
+							children: /* @__PURE__ */ jsx("div", {
+								className: cn("min-w-0 max-w-full", !usesBadgeArrayLayout && "sm:truncate sm:text-end", valueClassName),
+								children: valueDisplay
+							})
+						})]
+					})]
+				}, key);
+			}
+			if (!needsBlockValueLayout) return /* @__PURE__ */ jsx(BasicDetailsCard, {
+				icon: hideIcon ? void 0 : rowIcon,
+				primaryText: /* @__PURE__ */ jsx("span", {
+					className: cn(sizeStyles.labelTypography, labelClassName),
+					children: labelText
+				}),
+				secondaryText: /* @__PURE__ */ jsx("span", {
+					className: cn(sizeStyles.valueTypography, valueClassName),
+					children: valueDisplay
+				})
+			}, key);
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("flex min-w-0 items-start", sizeStyles.rowGap),
+				children: [!hideIcon && /* @__PURE__ */ jsx(Avatar, {
+					className: sizeStyles.avatarSize,
+					children: /* @__PURE__ */ jsx(AvatarFallback, {
+						className: cn("flex items-center justify-center gap-1 border", sizeStyles.avatarFallbackTypography),
+						children: rowIcon
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: cn("flex min-w-0 flex-1 flex-col", sizeStyles.itemGap),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cn(sizeStyles.labelTypography, labelClassName),
+						children: labelText
+					}), /* @__PURE__ */ jsx("div", {
+						className: cn("min-w-0", sizeStyles.valueTypography, valueClassName),
+						children: valueDisplay
+					})]
+				})]
+			}, key);
+		})
+	});
+}
+//#endregion
+export { DynamicList };

package/dist/components/error-display/full-size-error/full-size-error.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/error-display/full-size-error/full-size-error.tsx
+function FullSizeError({ title, children, illustration }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center justify-center gap-4 py-12 text-destructive",
+		children: [
+			illustration,
+			title && /* @__PURE__ */ jsx("h3", {
+				className: "text-lg font-semibold",
+				children: title
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground text-sm",
+				children
+			})
+		]
+	});
+}
+//#endregion
+export { FullSizeError };

package/dist/components/error-display/inline-error/inline-error.js

@@ -0,0 +1,12 @@
+import { Alert } from "../../alert/alert.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/error-display/inline-error/inline-error.tsx
+function InlineError({ title, children }) {
+	return /* @__PURE__ */ jsx(Alert, {
+		color: "error",
+		title,
+		children
+	});
+}
+//#endregion
+export { InlineError };