@nubitio/crud 0.5.1 → 0.5.2

package/dist/index.cjs

@@ -5315,6 +5315,11 @@ const ACTION_BADGE = {
 	update: "info",
 	delete: "danger"
 };
+const ACTION_TONE = {
+	create: "success",
+	update: "info",
+	delete: "danger"
+};
 function formatAuditValue(value, yesLabel, noLabel) {
 	if (value == null || value === "") return "—";
 	if (typeof value === "boolean") return value ? yesLabel : noLabel;
@@ -5325,6 +5330,40 @@ function formatAuditValue(value, yesLabel, noLabel) {
 	}
 	return String(value);
 }
+function DefaultEntryContent({ entry, resolveFieldLabel, yesLabel, noLabel }) {
+	const changeKeys = Object.keys(entry.changes);
+	if (changeKeys.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		className: "nb-audit-trail__changes",
+		children: changeKeys.map((field) => {
+			const { before, after } = entry.changes[field];
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+				className: "nb-audit-trail__change",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "nb-audit-trail__field",
+					children: resolveFieldLabel(field)
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "nb-audit-trail__diff",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "nb-audit-trail__value nb-audit-trail__value--before",
+							children: formatAuditValue(before, yesLabel, noLabel)
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "nb-audit-trail__arrow",
+							"aria-hidden": "true",
+							children: "→"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "nb-audit-trail__value nb-audit-trail__value--after",
+							children: formatAuditValue(after, yesLabel, noLabel)
+						})
+					]
+				})]
+			}, field);
+		})
+	});
+}
 function DefaultEntryRenderer({ entry, resolveFieldLabel, yesLabel, noLabel }) {
 	const { t } = (0, _nubitio_core.useCoreTranslation)();
 	const date = new Date(entry.timestamp);
@@ -5334,61 +5373,29 @@ function DefaultEntryRenderer({ entry, resolveFieldLabel, yesLabel, noLabel }) {
 		update: t("auditTrail.action.update"),
 		delete: t("auditTrail.action.delete")
 	};
-	const changeKeys = Object.keys(entry.changes);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-		className: `nb-audit-trail__entry nb-audit-trail__entry--${entry.action}`,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "nb-audit-trail__marker",
-			"aria-hidden": "true"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.TimelineItem, {
+		status: "complete",
+		tone: ACTION_TONE[entry.action],
+		title: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 			className: "nb-audit-trail__meta",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
-					className: "nb-audit-trail__timestamp",
-					dateTime: entry.timestamp,
-					children: formatted
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "nb-audit-trail__user",
-					children: entry.user
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Badge, {
-					variant: ACTION_BADGE[entry.action],
-					size: "sm",
-					pill: true,
-					children: actionLabels[entry.action]
-				})
-			]
-		}), changeKeys.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-			className: "nb-audit-trail__changes",
-			children: changeKeys.map((field) => {
-				const { before, after } = entry.changes[field];
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-					className: "nb-audit-trail__change",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "nb-audit-trail__field",
-						children: resolveFieldLabel(field)
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "nb-audit-trail__diff",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "nb-audit-trail__value nb-audit-trail__value--before",
-								children: formatAuditValue(before, yesLabel, noLabel)
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "nb-audit-trail__arrow",
-								"aria-hidden": "true",
-								children: "→"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "nb-audit-trail__value nb-audit-trail__value--after",
-								children: formatAuditValue(after, yesLabel, noLabel)
-							})
-						]
-					})]
-				}, field);
-			})
-		})] })]
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "nb-audit-trail__user",
+				children: entry.user
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Badge, {
+				variant: ACTION_BADGE[entry.action],
+				size: "sm",
+				pill: true,
+				children: actionLabels[entry.action]
+			})]
+		}),
+		timestamp: formatted,
+		dateTime: entry.timestamp,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultEntryContent, {
+			entry,
+			resolveFieldLabel,
+			yesLabel,
+			noLabel
+		})
 	});
 }
 function AuditTrailSkeleton() {
@@ -5475,12 +5482,10 @@ function AuditTrailPanel({ url, renderEntry, visible, onClose, recordSubtitle, r
 			description: t("auditTrail.emptyHint"),
 			size: "sm"
 		});
-		if (fetchState.status === "success") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-			className: "nb-audit-trail__timeline",
-			children: fetchState.entries.map((entry) => renderEntry ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
-				className: "nb-audit-trail__entry",
-				children: renderEntry(entry)
-			}, String(entry.id)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultEntryRenderer, {
+		if (fetchState.status === "success") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Timeline, {
+			variant: "log",
+			"aria-label": t("auditTrail.title"),
+			children: fetchState.entries.map((entry) => renderEntry ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: renderEntry(entry) }, String(entry.id)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultEntryRenderer, {
 				entry,
 				resolveFieldLabel,
 				yesLabel,

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import React, { createContext, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { Route, useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { createPortal } from "react-dom";
-import { AppDialog, AppDropdown, Badge, Button, ConfirmDialog, DatePicker, DateRangePicker, Drawer, EmptyState, IconButton, Skeleton } from "@nubitio/ui";
+import { AppDialog, AppDropdown, Badge, Button, ConfirmDialog, DatePicker, DateRangePicker, Drawer, EmptyState, IconButton, Skeleton, Timeline, TimelineItem } from "@nubitio/ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createCrudEvents, createScopedEventBus, getCoreCurrency, getCoreLocale, getCoreTimezone, useCoreHttpClient, useCoreRuntime, useCoreTranslation, useEvents, useMercureSubscription } from "@nubitio/core";
 import { useDropzone } from "react-dropzone";
@@ -5291,6 +5291,11 @@ const ACTION_BADGE = {
 	update: "info",
 	delete: "danger"
 };
+const ACTION_TONE = {
+	create: "success",
+	update: "info",
+	delete: "danger"
+};
 function formatAuditValue(value, yesLabel, noLabel) {
 	if (value == null || value === "") return "—";
 	if (typeof value === "boolean") return value ? yesLabel : noLabel;
@@ -5301,6 +5306,40 @@ function formatAuditValue(value, yesLabel, noLabel) {
 	}
 	return String(value);
 }
+function DefaultEntryContent({ entry, resolveFieldLabel, yesLabel, noLabel }) {
+	const changeKeys = Object.keys(entry.changes);
+	if (changeKeys.length === 0) return /* @__PURE__ */ jsx(Fragment, {});
+	return /* @__PURE__ */ jsx("ul", {
+		className: "nb-audit-trail__changes",
+		children: changeKeys.map((field) => {
+			const { before, after } = entry.changes[field];
+			return /* @__PURE__ */ jsxs("li", {
+				className: "nb-audit-trail__change",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "nb-audit-trail__field",
+					children: resolveFieldLabel(field)
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "nb-audit-trail__diff",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "nb-audit-trail__value nb-audit-trail__value--before",
+							children: formatAuditValue(before, yesLabel, noLabel)
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "nb-audit-trail__arrow",
+							"aria-hidden": "true",
+							children: "→"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "nb-audit-trail__value nb-audit-trail__value--after",
+							children: formatAuditValue(after, yesLabel, noLabel)
+						})
+					]
+				})]
+			}, field);
+		})
+	});
+}
 function DefaultEntryRenderer({ entry, resolveFieldLabel, yesLabel, noLabel }) {
 	const { t } = useCoreTranslation();
 	const date = new Date(entry.timestamp);
@@ -5310,61 +5349,29 @@ function DefaultEntryRenderer({ entry, resolveFieldLabel, yesLabel, noLabel }) {
 		update: t("auditTrail.action.update"),
 		delete: t("auditTrail.action.delete")
 	};
-	const changeKeys = Object.keys(entry.changes);
-	return /* @__PURE__ */ jsxs("li", {
-		className: `nb-audit-trail__entry nb-audit-trail__entry--${entry.action}`,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "nb-audit-trail__marker",
-			"aria-hidden": "true"
-		}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx(TimelineItem, {
+		status: "complete",
+		tone: ACTION_TONE[entry.action],
+		title: /* @__PURE__ */ jsxs("span", {
 			className: "nb-audit-trail__meta",
-			children: [
-				/* @__PURE__ */ jsx("time", {
-					className: "nb-audit-trail__timestamp",
-					dateTime: entry.timestamp,
-					children: formatted
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "nb-audit-trail__user",
-					children: entry.user
-				}),
-				/* @__PURE__ */ jsx(Badge, {
-					variant: ACTION_BADGE[entry.action],
-					size: "sm",
-					pill: true,
-					children: actionLabels[entry.action]
-				})
-			]
-		}), changeKeys.length > 0 && /* @__PURE__ */ jsx("ul", {
-			className: "nb-audit-trail__changes",
-			children: changeKeys.map((field) => {
-				const { before, after } = entry.changes[field];
-				return /* @__PURE__ */ jsxs("li", {
-					className: "nb-audit-trail__change",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "nb-audit-trail__field",
-						children: resolveFieldLabel(field)
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "nb-audit-trail__diff",
-						children: [
-							/* @__PURE__ */ jsx("span", {
-								className: "nb-audit-trail__value nb-audit-trail__value--before",
-								children: formatAuditValue(before, yesLabel, noLabel)
-							}),
-							/* @__PURE__ */ jsx("span", {
-								className: "nb-audit-trail__arrow",
-								"aria-hidden": "true",
-								children: "→"
-							}),
-							/* @__PURE__ */ jsx("span", {
-								className: "nb-audit-trail__value nb-audit-trail__value--after",
-								children: formatAuditValue(after, yesLabel, noLabel)
-							})
-						]
-					})]
-				}, field);
-			})
-		})] })]
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "nb-audit-trail__user",
+				children: entry.user
+			}), /* @__PURE__ */ jsx(Badge, {
+				variant: ACTION_BADGE[entry.action],
+				size: "sm",
+				pill: true,
+				children: actionLabels[entry.action]
+			})]
+		}),
+		timestamp: formatted,
+		dateTime: entry.timestamp,
+		children: /* @__PURE__ */ jsx(DefaultEntryContent, {
+			entry,
+			resolveFieldLabel,
+			yesLabel,
+			noLabel
+		})
 	});
 }
 function AuditTrailSkeleton() {
@@ -5451,12 +5458,10 @@ function AuditTrailPanel({ url, renderEntry, visible, onClose, recordSubtitle, r
 			description: t("auditTrail.emptyHint"),
 			size: "sm"
 		});
-		if (fetchState.status === "success") return /* @__PURE__ */ jsx("ul", {
-			className: "nb-audit-trail__timeline",
-			children: fetchState.entries.map((entry) => renderEntry ? /* @__PURE__ */ jsx("li", {
-				className: "nb-audit-trail__entry",
-				children: renderEntry(entry)
-			}, String(entry.id)) : /* @__PURE__ */ jsx(DefaultEntryRenderer, {
+		if (fetchState.status === "success") return /* @__PURE__ */ jsx(Timeline, {
+			variant: "log",
+			"aria-label": t("auditTrail.title"),
+			children: fetchState.entries.map((entry) => renderEntry ? /* @__PURE__ */ jsx(React.Fragment, { children: renderEntry(entry) }, String(entry.id)) : /* @__PURE__ */ jsx(DefaultEntryRenderer, {
 				entry,
 				resolveFieldLabel,
 				yesLabel,

package/dist/style.css

@@ -3305,61 +3305,6 @@ html[data-density=compact] .nb-crud-page-shell__footer {
   margin: calc(var(--space-1) * -1) 0 0;
 }
 
-.nb-audit-trail__timeline {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.nb-audit-trail__entry {
-  display: grid;
-  gap: var(--space-2);
-  grid-template-columns: 12px 1fr;
-  padding: var(--space-3) 0;
-  position: relative;
-}
-.nb-audit-trail__entry:not(:last-child) {
-  border-bottom: 1px solid var(--border-color);
-}
-.nb-audit-trail__entry::before {
-  background: var(--border-color);
-  bottom: 0;
-  content: "";
-  left: 5px;
-  position: absolute;
-  top: calc(var(--space-3) + 6px);
-  width: 2px;
-}
-.nb-audit-trail__entry:last-child::before {
-  display: none;
-}
-
-.nb-audit-trail__marker {
-  background: var(--surface-2);
-  border: 2px solid var(--accent-color);
-  border-radius: 50%;
-  height: 12px;
-  margin-top: 4px;
-  position: relative;
-  width: 12px;
-  z-index: 1;
-}
-
-.nb-audit-trail__entry--create .nb-audit-trail__marker {
-  border-color: var(--success-color);
-}
-
-.nb-audit-trail__entry--update .nb-audit-trail__marker {
-  border-color: var(--info-color, var(--accent-color));
-}
-
-.nb-audit-trail__entry--delete .nb-audit-trail__marker {
-  border-color: var(--danger-color);
-}
-
 .nb-audit-trail__meta {
   align-items: center;
   display: flex;
@@ -3367,12 +3312,6 @@ html[data-density=compact] .nb-crud-page-shell__footer {
   gap: var(--space-2);
 }
 
-.nb-audit-trail__timestamp {
-  color: var(--text-secondary);
-  font-size: var(--font-size-xs, 0.75rem);
-  font-variant-numeric: tabular-nums;
-}
-
 .nb-audit-trail__user {
   color: var(--text-primary);
   font-size: var(--font-size-sm, 0.8125rem);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nubitio/crud",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "type": "module",
   "description": "Declarative CRUD engine with field DSL, forms, datagrids, RBAC, conditional logic and pluggable adapters (Hydra/REST).",
   "license": "MIT",
@@ -56,8 +56,8 @@
     "react-dom": "^19.0.0",
     "react-i18next": "^14.0.0",
     "react-router-dom": "^6.0.0",
-    "@nubitio/core": "^0.5.1",
-    "@nubitio/ui": "^0.5.1"
+    "@nubitio/core": "^0.5.2",
+    "@nubitio/ui": "^0.5.2"
   },
   "dependencies": {
     "react-dropzone": "^15.0.0"