@archiva/archiva-nextjs 0.2.0 → 0.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -29,11 +29,12 @@ type TimelineProps = {
29
29
  emptyMessage?: string;
30
30
  showSearch?: boolean;
31
31
  showFilters?: boolean;
32
+ showSystemAndServices?: boolean;
32
33
  getActorAvatar?: (actorId: string) => string | React.ComponentType<{
33
34
  className?: string;
34
35
  }> | undefined;
35
36
  };
36
- declare function Timeline({ entityId, actorId, entityType, initialLimit, className, emptyMessage, showSearch, showFilters, getActorAvatar, }: TimelineProps): react_jsx_runtime.JSX.Element;
37
+ declare function Timeline({ entityId, actorId, entityType, initialLimit, className, emptyMessage, showSearch, showFilters, showSystemAndServices, getActorAvatar, }: TimelineProps): react_jsx_runtime.JSX.Element;
37
38
 
38
39
  type ArchivaContextValue = {
39
40
  apiBaseUrl: string;
@@ -29,11 +29,12 @@ type TimelineProps = {
29
29
  emptyMessage?: string;
30
30
  showSearch?: boolean;
31
31
  showFilters?: boolean;
32
+ showSystemAndServices?: boolean;
32
33
  getActorAvatar?: (actorId: string) => string | React.ComponentType<{
33
34
  className?: string;
34
35
  }> | undefined;
35
36
  };
36
- declare function Timeline({ entityId, actorId, entityType, initialLimit, className, emptyMessage, showSearch, showFilters, getActorAvatar, }: TimelineProps): react_jsx_runtime.JSX.Element;
37
+ declare function Timeline({ entityId, actorId, entityType, initialLimit, className, emptyMessage, showSearch, showFilters, showSystemAndServices, getActorAvatar, }: TimelineProps): react_jsx_runtime.JSX.Element;
37
38
 
38
39
  type ArchivaContextValue = {
39
40
  apiBaseUrl: string;
@@ -78,11 +78,71 @@ function formatTimestamp(timestamp, format = "default") {
78
78
  minute: "2-digit"
79
79
  });
80
80
  }
81
+ var MonitorCogIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
82
+ "svg",
83
+ {
84
+ className,
85
+ width: "16",
86
+ height: "16",
87
+ viewBox: "0 0 24 24",
88
+ fill: "none",
89
+ stroke: "currentColor",
90
+ strokeWidth: "2",
91
+ strokeLinecap: "round",
92
+ strokeLinejoin: "round",
93
+ children: [
94
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
95
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
96
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", y1: "17", x2: "12", y2: "21" }),
97
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "18", cy: "8", r: "2" })
98
+ ]
99
+ }
100
+ );
101
+ var CloudCogIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
102
+ "svg",
103
+ {
104
+ className,
105
+ width: "16",
106
+ height: "16",
107
+ viewBox: "0 0 24 24",
108
+ fill: "none",
109
+ stroke: "currentColor",
110
+ strokeWidth: "2",
111
+ strokeLinecap: "round",
112
+ strokeLinejoin: "round",
113
+ children: [
114
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18 20a2 2 0 0 0 2-2V8.5a2.5 2.5 0 0 0-2.5-2.5c-1.003 0-1.9.446-2.5 1.153" }),
115
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M13 18a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2" }),
116
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "18", cy: "8", r: "2" })
117
+ ]
118
+ }
119
+ );
81
120
  function eventToTimelineItem(event, getActorAvatar) {
82
121
  const actorId = event.actorId;
83
- const userName = actorId ? actorId.includes(":") ? actorId.split(":")[1] || actorId : actorId : "Unknown Actor";
84
- const userHandle = actorId || "unknown";
85
- const initials = userName.charAt(0).toUpperCase();
122
+ let actorType = "user";
123
+ let actorIdPart = actorId || "";
124
+ let actorDisplay = "";
125
+ if (actorId) {
126
+ if (actorId.includes(":")) {
127
+ const [type, ...rest] = actorId.split(":");
128
+ actorType = type === "service" || type === "system" ? type : "user";
129
+ actorIdPart = rest.join(":");
130
+ if (type === "service" || type === "system") {
131
+ actorDisplay = `${type.charAt(0).toUpperCase() + type.slice(1)} ${actorIdPart.charAt(0).toUpperCase() + actorIdPart.slice(1)}`;
132
+ } else {
133
+ actorDisplay = actorIdPart.charAt(0).toUpperCase() + actorIdPart.slice(1);
134
+ }
135
+ } else {
136
+ actorIdPart = actorId;
137
+ actorDisplay = actorId.charAt(0).toUpperCase() + actorId.slice(1);
138
+ }
139
+ } else {
140
+ actorDisplay = "Unknown Actor";
141
+ actorIdPart = "unknown";
142
+ }
143
+ const userName = actorDisplay;
144
+ const userHandle = actorIdPart;
145
+ const initials = actorIdPart.charAt(0).toUpperCase();
86
146
  const actorAvatarOrIcon = actorId && getActorAvatar ? getActorAvatar(actorId) : void 0;
87
147
  let actorAvatar = void 0;
88
148
  let actorIcon = void 0;
@@ -92,7 +152,13 @@ function eventToTimelineItem(event, getActorAvatar) {
92
152
  actorIcon = actorAvatarOrIcon;
93
153
  }
94
154
  if (!actorAvatar && !actorIcon && actorId) {
95
- actorAvatar = "https://www.gravatar.com/avatar?d=mp";
155
+ if (actorType === "user") {
156
+ actorAvatar = "https://www.gravatar.com/avatar?d=mp";
157
+ } else if (actorType === "system") {
158
+ actorIcon = MonitorCogIcon;
159
+ } else if (actorType === "service") {
160
+ actorIcon = CloudCogIcon;
161
+ }
96
162
  }
97
163
  const action = event.action.charAt(0).toUpperCase() + event.action.slice(1);
98
164
  return {
@@ -101,8 +167,9 @@ function eventToTimelineItem(event, getActorAvatar) {
101
167
  // Not used in activity layout
102
168
  description: action,
103
169
  timestamp: event.receivedAt,
104
- userName: userName.charAt(0).toUpperCase() + userName.slice(1),
170
+ userName,
105
171
  userHandle,
172
+ actorDisplay,
106
173
  entityType: event.entityType.toLowerCase(),
107
174
  avatar: actorAvatar,
108
175
  icon: actorIcon,
@@ -218,7 +285,8 @@ function SimpleAvatar({
218
285
  display: "flex",
219
286
  alignItems: "center",
220
287
  justifyContent: "center",
221
- flexShrink: 0
288
+ flexShrink: 0,
289
+ color: "#6b7280"
222
290
  },
223
291
  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "" })
224
292
  }
@@ -250,12 +318,29 @@ function SimpleAvatar({
250
318
  }
251
319
  );
252
320
  }
253
- function applyClientSideFilters(events, searchQuery) {
321
+ function getActorType(actorId) {
322
+ if (!actorId) return "user";
323
+ if (actorId.includes(":")) {
324
+ const [type] = actorId.split(":");
325
+ if (type === "service" || type === "system") {
326
+ return type;
327
+ }
328
+ }
329
+ return "user";
330
+ }
331
+ function applyClientSideFilters(events, searchQuery, showSystemAndServices) {
332
+ let filtered = events;
333
+ if (!showSystemAndServices) {
334
+ filtered = filtered.filter((event) => {
335
+ const actorType = getActorType(event.actorId);
336
+ return actorType === "user";
337
+ });
338
+ }
254
339
  if (!searchQuery.trim()) {
255
- return events;
340
+ return filtered;
256
341
  }
257
342
  const query = searchQuery.toLowerCase();
258
- return events.filter((event) => {
343
+ return filtered.filter((event) => {
259
344
  return event.action.toLowerCase().includes(query) || event.entityType.toLowerCase().includes(query) || event.entityId.toLowerCase().includes(query) || event.actorId && event.actorId.toLowerCase().includes(query) || event.source && event.source.toLowerCase().includes(query);
260
345
  });
261
346
  }
@@ -268,6 +353,7 @@ function Timeline({
268
353
  emptyMessage = "No events yet.",
269
354
  showSearch = false,
270
355
  showFilters = false,
356
+ showSystemAndServices = false,
271
357
  getActorAvatar
272
358
  }) {
273
359
  const { apiBaseUrl, getToken, forceRefreshToken } = useArchiva();
@@ -312,8 +398,8 @@ function Timeline({
312
398
  void load({ reset: true });
313
399
  }, [entityId, actorId, entityType]);
314
400
  const filteredEvents = React2.useMemo(() => {
315
- return applyClientSideFilters(allEvents, searchQuery);
316
- }, [allEvents, searchQuery]);
401
+ return applyClientSideFilters(allEvents, searchQuery, showSystemAndServices);
402
+ }, [allEvents, searchQuery, showSystemAndServices]);
317
403
  const timelineItems = React2.useMemo(() => {
318
404
  return filteredEvents.slice(0, 10).map(
319
405
  (event) => eventToTimelineItem(event, getActorAvatar)
@@ -382,13 +468,13 @@ function Timeline({
382
468
  ) }),
383
469
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: useActivityLayout ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "start", justifyContent: "space-between", gap: "1rem" }, children: [
384
470
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
385
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: [
471
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", flexWrap: "wrap" }, children: [
386
472
  item.actorDisplay ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontWeight: 600, fontSize: "0.875rem" }, children: item.actorDisplay }) : item.userName ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontWeight: 600, fontSize: "0.875rem" }, children: item.userName }) : null,
387
473
  item.userHandle && item.userHandle !== "unknown" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { fontSize: "0.75rem", color: "#6b7280" }, children: [
388
474
  "@",
389
475
  item.userHandle.toLowerCase()
390
476
  ] })
391
- ] }),
477
+ ] }) }),
392
478
  item.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { fontSize: "0.875rem", color: "#111827", margin: "0.5rem 0 0 0" }, children: item.description })
393
479
  ] }),
394
480
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { flexShrink: 0, display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "0.25rem" }, children: [
@@ -33,11 +33,71 @@ function formatTimestamp(timestamp, format = "default") {
33
33
  minute: "2-digit"
34
34
  });
35
35
  }
36
+ var MonitorCogIcon = ({ className }) => /* @__PURE__ */ jsxs(
37
+ "svg",
38
+ {
39
+ className,
40
+ width: "16",
41
+ height: "16",
42
+ viewBox: "0 0 24 24",
43
+ fill: "none",
44
+ stroke: "currentColor",
45
+ strokeWidth: "2",
46
+ strokeLinecap: "round",
47
+ strokeLinejoin: "round",
48
+ children: [
49
+ /* @__PURE__ */ jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
50
+ /* @__PURE__ */ jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
51
+ /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21" }),
52
+ /* @__PURE__ */ jsx("circle", { cx: "18", cy: "8", r: "2" })
53
+ ]
54
+ }
55
+ );
56
+ var CloudCogIcon = ({ className }) => /* @__PURE__ */ jsxs(
57
+ "svg",
58
+ {
59
+ className,
60
+ width: "16",
61
+ height: "16",
62
+ viewBox: "0 0 24 24",
63
+ fill: "none",
64
+ stroke: "currentColor",
65
+ strokeWidth: "2",
66
+ strokeLinecap: "round",
67
+ strokeLinejoin: "round",
68
+ children: [
69
+ /* @__PURE__ */ jsx("path", { d: "M18 20a2 2 0 0 0 2-2V8.5a2.5 2.5 0 0 0-2.5-2.5c-1.003 0-1.9.446-2.5 1.153" }),
70
+ /* @__PURE__ */ jsx("path", { d: "M13 18a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2" }),
71
+ /* @__PURE__ */ jsx("circle", { cx: "18", cy: "8", r: "2" })
72
+ ]
73
+ }
74
+ );
36
75
  function eventToTimelineItem(event, getActorAvatar) {
37
76
  const actorId = event.actorId;
38
- const userName = actorId ? actorId.includes(":") ? actorId.split(":")[1] || actorId : actorId : "Unknown Actor";
39
- const userHandle = actorId || "unknown";
40
- const initials = userName.charAt(0).toUpperCase();
77
+ let actorType = "user";
78
+ let actorIdPart = actorId || "";
79
+ let actorDisplay = "";
80
+ if (actorId) {
81
+ if (actorId.includes(":")) {
82
+ const [type, ...rest] = actorId.split(":");
83
+ actorType = type === "service" || type === "system" ? type : "user";
84
+ actorIdPart = rest.join(":");
85
+ if (type === "service" || type === "system") {
86
+ actorDisplay = `${type.charAt(0).toUpperCase() + type.slice(1)} ${actorIdPart.charAt(0).toUpperCase() + actorIdPart.slice(1)}`;
87
+ } else {
88
+ actorDisplay = actorIdPart.charAt(0).toUpperCase() + actorIdPart.slice(1);
89
+ }
90
+ } else {
91
+ actorIdPart = actorId;
92
+ actorDisplay = actorId.charAt(0).toUpperCase() + actorId.slice(1);
93
+ }
94
+ } else {
95
+ actorDisplay = "Unknown Actor";
96
+ actorIdPart = "unknown";
97
+ }
98
+ const userName = actorDisplay;
99
+ const userHandle = actorIdPart;
100
+ const initials = actorIdPart.charAt(0).toUpperCase();
41
101
  const actorAvatarOrIcon = actorId && getActorAvatar ? getActorAvatar(actorId) : void 0;
42
102
  let actorAvatar = void 0;
43
103
  let actorIcon = void 0;
@@ -47,7 +107,13 @@ function eventToTimelineItem(event, getActorAvatar) {
47
107
  actorIcon = actorAvatarOrIcon;
48
108
  }
49
109
  if (!actorAvatar && !actorIcon && actorId) {
50
- actorAvatar = "https://www.gravatar.com/avatar?d=mp";
110
+ if (actorType === "user") {
111
+ actorAvatar = "https://www.gravatar.com/avatar?d=mp";
112
+ } else if (actorType === "system") {
113
+ actorIcon = MonitorCogIcon;
114
+ } else if (actorType === "service") {
115
+ actorIcon = CloudCogIcon;
116
+ }
51
117
  }
52
118
  const action = event.action.charAt(0).toUpperCase() + event.action.slice(1);
53
119
  return {
@@ -56,8 +122,9 @@ function eventToTimelineItem(event, getActorAvatar) {
56
122
  // Not used in activity layout
57
123
  description: action,
58
124
  timestamp: event.receivedAt,
59
- userName: userName.charAt(0).toUpperCase() + userName.slice(1),
125
+ userName,
60
126
  userHandle,
127
+ actorDisplay,
61
128
  entityType: event.entityType.toLowerCase(),
62
129
  avatar: actorAvatar,
63
130
  icon: actorIcon,
@@ -173,7 +240,8 @@ function SimpleAvatar({
173
240
  display: "flex",
174
241
  alignItems: "center",
175
242
  justifyContent: "center",
176
- flexShrink: 0
243
+ flexShrink: 0,
244
+ color: "#6b7280"
177
245
  },
178
246
  children: /* @__PURE__ */ jsx(Icon, { className: "" })
179
247
  }
@@ -205,12 +273,29 @@ function SimpleAvatar({
205
273
  }
206
274
  );
207
275
  }
208
- function applyClientSideFilters(events, searchQuery) {
276
+ function getActorType(actorId) {
277
+ if (!actorId) return "user";
278
+ if (actorId.includes(":")) {
279
+ const [type] = actorId.split(":");
280
+ if (type === "service" || type === "system") {
281
+ return type;
282
+ }
283
+ }
284
+ return "user";
285
+ }
286
+ function applyClientSideFilters(events, searchQuery, showSystemAndServices) {
287
+ let filtered = events;
288
+ if (!showSystemAndServices) {
289
+ filtered = filtered.filter((event) => {
290
+ const actorType = getActorType(event.actorId);
291
+ return actorType === "user";
292
+ });
293
+ }
209
294
  if (!searchQuery.trim()) {
210
- return events;
295
+ return filtered;
211
296
  }
212
297
  const query = searchQuery.toLowerCase();
213
- return events.filter((event) => {
298
+ return filtered.filter((event) => {
214
299
  return event.action.toLowerCase().includes(query) || event.entityType.toLowerCase().includes(query) || event.entityId.toLowerCase().includes(query) || event.actorId && event.actorId.toLowerCase().includes(query) || event.source && event.source.toLowerCase().includes(query);
215
300
  });
216
301
  }
@@ -223,6 +308,7 @@ function Timeline({
223
308
  emptyMessage = "No events yet.",
224
309
  showSearch = false,
225
310
  showFilters = false,
311
+ showSystemAndServices = false,
226
312
  getActorAvatar
227
313
  }) {
228
314
  const { apiBaseUrl, getToken, forceRefreshToken } = useArchiva();
@@ -267,8 +353,8 @@ function Timeline({
267
353
  void load({ reset: true });
268
354
  }, [entityId, actorId, entityType]);
269
355
  const filteredEvents = React.useMemo(() => {
270
- return applyClientSideFilters(allEvents, searchQuery);
271
- }, [allEvents, searchQuery]);
356
+ return applyClientSideFilters(allEvents, searchQuery, showSystemAndServices);
357
+ }, [allEvents, searchQuery, showSystemAndServices]);
272
358
  const timelineItems = React.useMemo(() => {
273
359
  return filteredEvents.slice(0, 10).map(
274
360
  (event) => eventToTimelineItem(event, getActorAvatar)
@@ -337,13 +423,13 @@ function Timeline({
337
423
  ) }),
338
424
  /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0 }, children: useActivityLayout ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "start", justifyContent: "space-between", gap: "1rem" }, children: [
339
425
  /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
340
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: [
426
+ /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", flexWrap: "wrap" }, children: [
341
427
  item.actorDisplay ? /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: "0.875rem" }, children: item.actorDisplay }) : item.userName ? /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: "0.875rem" }, children: item.userName }) : null,
342
428
  item.userHandle && item.userHandle !== "unknown" && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.75rem", color: "#6b7280" }, children: [
343
429
  "@",
344
430
  item.userHandle.toLowerCase()
345
431
  ] })
346
- ] }),
432
+ ] }) }),
347
433
  item.description && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.875rem", color: "#111827", margin: "0.5rem 0 0 0" }, children: item.description })
348
434
  ] }),
349
435
  /* @__PURE__ */ jsxs("div", { style: { flexShrink: 0, display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "0.25rem" }, children: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@archiva/archiva-nextjs",
3
- "version": "0.2.0",
3
+ "version": "0.2.06",
4
4
  "description": "Archiva Next.js SDK - Server Actions and Timeline Component",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",