@archiva/archiva-nextjs 0.1.2 → 0.1.4

package/README.md

@@ -22,22 +22,25 @@ ARCHIVA_SECRET_KEY=pk_test_xxxxx
 
 ## Usage
 
-### ArchivaProvider (Server Component)
+### ArchivaProvider (Client Component)
 
-Wrap your application (or specific routes) with the ArchivaProvider component:
+Wrap your application (or specific routes) with the ArchivaProvider component. The provider makes the API key available to child components via React context:
 
 ```tsx
 import { ArchivaProvider } from '@archiva/archiva-nextjs';
 
 export default function Layout({ children }) {
+  // API key can be passed as prop, or it will use ARCHIVA_SECRET_KEY env var
   return (
-    <ArchivaProvider>
+    <ArchivaProvider apiKey="pk_test_xxxxx">
       {children}
     </ArchivaProvider>
   );
 }
 ```
 
+**Note:** If you don't pass an `apiKey` prop, the provider will use the `ARCHIVA_SECRET_KEY` environment variable. The Timeline component and server actions will automatically use the API key from the provider context.
+
 ### Server Actions
 
 #### loadEvents
@@ -112,7 +115,7 @@ const result = await createEvents([
 
 ### Timeline Component (Client Component)
 
-Display a timeline of audit events:
+Display a timeline of audit events. The Timeline component automatically uses the API key from the ArchivaProvider context:
 
 ```tsx
 'use client';
@@ -130,6 +133,8 @@ export function InvoiceTimeline({ invoiceId }: { invoiceId: string }) {
 }
 ```
 
+**Note:** The Timeline component must be used within an `ArchivaProvider`. It no longer requires an `apiKey` prop as it gets the API key from the provider context.
+
 ## API Reference
 
 ### LoadEventsParams

package/dist/chunk-ZQFVEHLS.mjs

@@ -0,0 +1,398 @@
+// src/react/ArchivaProvider.tsx
+import "server-only";
+
+// src/react/internal/ArchivaProviderClient.tsx
+import * as React2 from "react";
+
+// src/react/context.tsx
+import * as React from "react";
+var ArchivaContext = React.createContext(void 0);
+function useArchivaContext() {
+  const context = React.useContext(ArchivaContext);
+  if (context === void 0) {
+    throw new Error("useArchivaContext must be used within an ArchivaProvider");
+  }
+  return context;
+}
+
+// src/react/internal/ArchivaProviderClient.tsx
+import { jsx } from "react/jsx-runtime";
+function ArchivaProviderClient({
+  children,
+  apiBaseUrl,
+  tokenEndpoint,
+  projectId
+}) {
+  const [tokenCache, setTokenCache] = React2.useState(null);
+  const [isRefreshing, setIsRefreshing] = React2.useState(false);
+  const refreshTimeoutRef = React2.useRef(null);
+  React2.useEffect(() => {
+    return () => {
+      if (refreshTimeoutRef.current) {
+        clearTimeout(refreshTimeoutRef.current);
+      }
+    };
+  }, []);
+  const fetchToken = React2.useCallback(async () => {
+    const baseUrl = tokenEndpoint.startsWith("http") ? tokenEndpoint : typeof window !== "undefined" ? `${window.location.origin}${tokenEndpoint}` : `${apiBaseUrl}${tokenEndpoint}`;
+    const url = new URL(baseUrl);
+    if (projectId) {
+      url.searchParams.set("projectId", projectId);
+    }
+    const response = await fetch(url.toString(), {
+      method: "GET",
+      credentials: "include"
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: "Failed to fetch token" }));
+      throw new Error(error.error || "Failed to fetch frontend token");
+    }
+    const data = await response.json();
+    if (!data.token || !data.expiresAt) {
+      throw new Error("Invalid token response");
+    }
+    return data.token;
+  }, [tokenEndpoint, projectId, apiBaseUrl]);
+  const getToken = React2.useCallback(async () => {
+    const now = Math.floor(Date.now() / 1e3);
+    if (tokenCache && tokenCache.expiresAt > now + 30) {
+      return tokenCache.token;
+    }
+    if (isRefreshing) {
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      return getToken();
+    }
+    setIsRefreshing(true);
+    try {
+      const token = await fetchToken();
+      const expiresAt = getTokenExpiry(token);
+      if (!expiresAt) {
+        throw new Error("Failed to parse token expiry");
+      }
+      const newCache = { token, expiresAt };
+      setTokenCache(newCache);
+      const refreshIn = Math.max(0, expiresAt - now - 30) * 1e3;
+      if (refreshTimeoutRef.current) {
+        clearTimeout(refreshTimeoutRef.current);
+      }
+      refreshTimeoutRef.current = setTimeout(() => {
+        setTokenCache(null);
+      }, refreshIn);
+      return token;
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, [tokenCache, isRefreshing, fetchToken]);
+  const forceRefreshToken = React2.useCallback(async () => {
+    setTokenCache(null);
+    if (refreshTimeoutRef.current) {
+      clearTimeout(refreshTimeoutRef.current);
+      refreshTimeoutRef.current = null;
+    }
+    setIsRefreshing(true);
+    try {
+      const token = await fetchToken();
+      const expiresAt = getTokenExpiry(token);
+      if (!expiresAt) {
+        throw new Error("Failed to parse token expiry");
+      }
+      const newCache = { token, expiresAt };
+      setTokenCache(newCache);
+      const now = Math.floor(Date.now() / 1e3);
+      const refreshIn = Math.max(0, expiresAt - now - 30) * 1e3;
+      if (refreshTimeoutRef.current) {
+        clearTimeout(refreshTimeoutRef.current);
+      }
+      refreshTimeoutRef.current = setTimeout(() => {
+        setTokenCache(null);
+      }, refreshIn);
+      return token;
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, [fetchToken]);
+  const value = React2.useMemo(
+    () => ({
+      apiBaseUrl,
+      getToken,
+      forceRefreshToken,
+      projectId
+    }),
+    [apiBaseUrl, getToken, forceRefreshToken, projectId]
+  );
+  return /* @__PURE__ */ jsx(ArchivaContext.Provider, { value, children });
+}
+function getTokenExpiry(token) {
+  try {
+    const parts = token.split(".");
+    if (parts.length !== 3) {
+      return null;
+    }
+    const payload = JSON.parse(
+      atob(parts[1].replace(/-/g, "+").replace(/_/g, "/"))
+    );
+    return payload.exp;
+  } catch {
+    return null;
+  }
+}
+
+// src/react/ArchivaProvider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ArchivaProvider({
+  children,
+  apiBaseUrl = "https://api.archiva.app",
+  tokenEndpoint = "/api/archiva/frontend-token",
+  projectId
+}) {
+  if (!process.env.ARCHIVA_SECRET_KEY) {
+    throw new Error(
+      "ARCHIVA_SECRET_KEY environment variable is required. Set it in your .env.local file."
+    );
+  }
+  return /* @__PURE__ */ jsx2(
+    ArchivaProviderClient,
+    {
+      apiBaseUrl,
+      tokenEndpoint,
+      projectId,
+      children
+    }
+  );
+}
+
+// src/react/Timeline.tsx
+import * as React3 from "react";
+
+// src/react/useArchiva.ts
+function useArchiva() {
+  return useArchivaContext();
+}
+
+// src/react/Timeline.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function formatTimestamp(timestamp) {
+  const date = typeof timestamp === "string" ? new Date(timestamp) : timestamp;
+  return date.toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+function eventToTimelineItem(event) {
+  return {
+    id: event.id,
+    title: event.action,
+    description: `${event.entityType} ${event.entityId}`,
+    timestamp: event.receivedAt,
+    badge: event.actorId ?? void 0,
+    data: event
+  };
+}
+async function fetchEventsWithRetry(apiBaseUrl, getToken, forceRefreshToken, params) {
+  const url = new URL(`${apiBaseUrl}/api/events`);
+  if (params.entityId) {
+    url.searchParams.set("entityId", params.entityId);
+  }
+  if (params.actorId) {
+    url.searchParams.set("actorId", params.actorId);
+  }
+  if (params.entityType) {
+    url.searchParams.set("entityType", params.entityType);
+  }
+  if (params.limit) {
+    url.searchParams.set("limit", String(params.limit));
+  }
+  if (params.cursor) {
+    url.searchParams.set("cursor", params.cursor);
+  }
+  const makeRequest = async (token2) => {
+    return fetch(url.toString(), {
+      headers: {
+        Authorization: `Bearer ${token2}`
+      }
+    });
+  };
+  const token = await getToken();
+  let response = await makeRequest(token);
+  if (response.status === 401 || response.status === 403) {
+    const newToken = await forceRefreshToken();
+    response = await makeRequest(newToken);
+  }
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: response.statusText }));
+    throw new Error(error.error || `HTTP ${response.status}`);
+  }
+  const payload = await response.json();
+  if (!payload || typeof payload !== "object" || !Array.isArray(payload.items)) {
+    throw new Error("Invalid response format");
+  }
+  return {
+    items: payload.items,
+    nextCursor: typeof payload.nextCursor === "string" ? payload.nextCursor : void 0
+  };
+}
+function Timeline({
+  entityId,
+  actorId,
+  entityType,
+  initialLimit = 25,
+  className,
+  emptyMessage = "No events yet."
+}) {
+  const { apiBaseUrl, getToken, forceRefreshToken } = useArchiva();
+  const [items, setItems] = React3.useState([]);
+  const [cursor, setCursor] = React3.useState(void 0);
+  const [loading, setLoading] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const [hasMore, setHasMore] = React3.useState(false);
+  const load = React3.useCallback(
+    async (options) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const params = {
+          entityId,
+          actorId,
+          entityType,
+          limit: initialLimit,
+          cursor: options?.reset ? void 0 : options?.currentCursor ?? cursor
+        };
+        const response = await fetchEventsWithRetry(
+          apiBaseUrl,
+          getToken,
+          forceRefreshToken,
+          params
+        );
+        const newItems = response.items.map(eventToTimelineItem);
+        setItems((prev) => options?.reset ? newItems : [...prev, ...newItems]);
+        setCursor(response.nextCursor);
+        setHasMore(Boolean(response.nextCursor));
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [entityId, actorId, entityType, initialLimit, apiBaseUrl, getToken, forceRefreshToken, cursor]
+  );
+  React3.useEffect(() => {
+    setCursor(void 0);
+    setItems([]);
+    void load({ reset: true });
+  }, [entityId, actorId, entityType]);
+  if (loading && items.length === 0) {
+    return /* @__PURE__ */ jsx3("div", { className: className || "", children: /* @__PURE__ */ jsx3("div", { children: "Loading events..." }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx3("div", { className: className || "", children: /* @__PURE__ */ jsxs("div", { style: { color: "red" }, children: [
+      "Error: ",
+      error
+    ] }) });
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx3("div", { className: className || "", children: /* @__PURE__ */ jsx3("div", { children: emptyMessage }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: className || "", style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx3("div", { style: { position: "relative" }, children: items.map((item, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "relative",
+          display: "flex",
+          gap: "1rem",
+          paddingBottom: index < items.length - 1 ? "2rem" : "0"
+        },
+        children: [
+          index < items.length - 1 && /* @__PURE__ */ jsx3(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: "1.25rem",
+                top: "3rem",
+                height: "calc(100% - 3rem)",
+                width: "2px",
+                backgroundColor: "#e5e7eb"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              style: {
+                position: "relative",
+                zIndex: 10,
+                width: "2.5rem",
+                height: "2.5rem",
+                borderRadius: "50%",
+                backgroundColor: "#f3f4f6",
+                border: "2px solid #fff",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexShrink: 0
+              },
+              children: /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  style: {
+                    width: "0.75rem",
+                    height: "0.75rem",
+                    borderRadius: "50%",
+                    backgroundColor: "#6b7280"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx3("div", { style: { flex: 1, paddingBottom: "2rem" }, children: /* @__PURE__ */ jsx3("div", { style: { display: "flex", alignItems: "start", justifyContent: "space-between", gap: "0.5rem" }, children: /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+              /* @__PURE__ */ jsx3("h4", { style: { fontWeight: 600, margin: 0 }, children: item.title }),
+              item.badge && /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  style: {
+                    fontSize: "0.75rem",
+                    padding: "0.125rem 0.5rem",
+                    borderRadius: "0.375rem",
+                    backgroundColor: "#f3f4f6"
+                  },
+                  children: item.badge
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx3("p", { style: { fontSize: "0.875rem", color: "#6b7280", margin: "0.25rem 0 0 0" }, children: formatTimestamp(item.timestamp) }),
+            item.description && /* @__PURE__ */ jsx3("p", { style: { fontSize: "0.875rem", color: "#6b7280", margin: "0.5rem 0 0 0" }, children: item.description })
+          ] }) }) })
+        ]
+      },
+      item.id
+    )) }),
+    hasMore && /* @__PURE__ */ jsx3("div", { style: { marginTop: "1rem" }, children: /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        onClick: () => load(),
+        disabled: loading,
+        style: {
+          padding: "0.5rem 1rem",
+          backgroundColor: loading ? "#d1d5db" : "#3b82f6",
+          color: "white",
+          border: "none",
+          borderRadius: "0.375rem",
+          cursor: loading ? "not-allowed" : "pointer"
+        },
+        children: loading ? "Loading..." : "Load more"
+      }
+    ) })
+  ] });
+}
+
+export {
+  ArchivaProvider,
+  useArchiva,
+  Timeline
+};

package/dist/index.d.mts

@@ -1,19 +1,7 @@
+export { ArchivaProvider, ArchivaProviderProps, Timeline, TimelineItem, TimelineProps, useArchiva } from './react/index.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 
-type ArchivaProviderProps = {
-    children: ReactNode;
-    apiKey?: string;
-};
-/**
- * Server-only provider component for Archiva.
- * This component validates the API key format and provides configuration
- * for server actions (loadEvents, createEvents).
- *
- * The API key should be passed via props or set as ARCHIVA_SECRET_KEY environment variable.
- */
-declare function ArchivaProvider({ children }: ArchivaProviderProps): react_jsx_runtime.JSX.Element;
-
 type EventChange = {
     op: "set" | "unset" | "add" | "remove" | "replace" | string;
     path: string;
@@ -70,6 +58,27 @@ declare class ArchivaError extends Error {
     });
 }
 
+type ArchivaProviderProps = {
+    children: ReactNode;
+    apiKey?: string;
+};
+/**
+ * Server component wrapper that reads ARCHIVA_SECRET_KEY from environment
+ * and passes it to the client provider.
+ *
+ * The API key can be:
+ * - Passed via props (takes precedence)
+ * - Set as ARCHIVA_SECRET_KEY environment variable (automatically read)
+ *
+ * Child components like Timeline will automatically use the API key from this context.
+ */
+declare function ArchivaProvider({ children, apiKey }: ArchivaProviderProps): react_jsx_runtime.JSX.Element;
+
+type ArchivaContextValue = {
+    apiKey: string | undefined;
+};
+declare function useArchivaContext(): ArchivaContextValue;
+
 /**
  * Server action to load audit events
  *
@@ -118,8 +127,7 @@ type TimelineProps = {
     initialLimit?: number;
     className?: string;
     emptyMessage?: string;
-    apiKey?: string;
 };
-declare function Timeline({ entityId, actorId, entityType, initialLimit, className, emptyMessage, apiKey, }: TimelineProps): react_jsx_runtime.JSX.Element;
+declare function Timeline({ entityId, actorId, entityType, initialLimit, className, emptyMessage, }: TimelineProps): react_jsx_runtime.JSX.Element;
 
-export { ArchivaError, ArchivaProvider, type ArchivaProviderProps, type AuditEventListItem, type CreateEventInput, type CreateEventOptions, type EventChange, type LoadEventsParams, type PageResult, Timeline, type TimelineItem, type TimelineProps, createEvent, createEvents, loadEvents };
+export { ArchivaError, ArchivaProvider as ArchivaProviderLegacy, type ArchivaProviderProps as ArchivaProviderPropsLegacy, type AuditEventListItem, type CreateEventInput, type CreateEventOptions, type EventChange, type LoadEventsParams, type PageResult, type TimelineItem as TimelineItemLegacy, Timeline as TimelineLegacy, type TimelineProps as TimelinePropsLegacy, createEvent, createEvents, loadEvents, useArchivaContext };

package/dist/index.d.ts

@@ -1,19 +1,7 @@
+export { ArchivaProvider, ArchivaProviderProps, Timeline, TimelineItem, TimelineProps, useArchiva } from './react/index.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 
-type ArchivaProviderProps = {
-    children: ReactNode;
-    apiKey?: string;
-};
-/**
- * Server-only provider component for Archiva.
- * This component validates the API key format and provides configuration
- * for server actions (loadEvents, createEvents).
- *
- * The API key should be passed via props or set as ARCHIVA_SECRET_KEY environment variable.
- */
-declare function ArchivaProvider({ children }: ArchivaProviderProps): react_jsx_runtime.JSX.Element;
-
 type EventChange = {
     op: "set" | "unset" | "add" | "remove" | "replace" | string;
     path: string;
@@ -70,6 +58,27 @@ declare class ArchivaError extends Error {
     });
 }
 
+type ArchivaProviderProps = {
+    children: ReactNode;
+    apiKey?: string;
+};
+/**
+ * Server component wrapper that reads ARCHIVA_SECRET_KEY from environment
+ * and passes it to the client provider.
+ *
+ * The API key can be:
+ * - Passed via props (takes precedence)
+ * - Set as ARCHIVA_SECRET_KEY environment variable (automatically read)
+ *
+ * Child components like Timeline will automatically use the API key from this context.
+ */
+declare function ArchivaProvider({ children, apiKey }: ArchivaProviderProps): react_jsx_runtime.JSX.Element;
+
+type ArchivaContextValue = {
+    apiKey: string | undefined;
+};
+declare function useArchivaContext(): ArchivaContextValue;
+
 /**
  * Server action to load audit events
  *
@@ -118,8 +127,7 @@ type TimelineProps = {
     initialLimit?: number;
     className?: string;
     emptyMessage?: string;
-    apiKey?: string;
 };
-declare function Timeline({ entityId, actorId, entityType, initialLimit, className, emptyMessage, apiKey, }: TimelineProps): react_jsx_runtime.JSX.Element;
+declare function Timeline({ entityId, actorId, entityType, initialLimit, className, emptyMessage, }: TimelineProps): react_jsx_runtime.JSX.Element;
 
-export { ArchivaError, ArchivaProvider, type ArchivaProviderProps, type AuditEventListItem, type CreateEventInput, type CreateEventOptions, type EventChange, type LoadEventsParams, type PageResult, Timeline, type TimelineItem, type TimelineProps, createEvent, createEvents, loadEvents };
+export { ArchivaError, ArchivaProvider as ArchivaProviderLegacy, type ArchivaProviderProps as ArchivaProviderPropsLegacy, type AuditEventListItem, type CreateEventInput, type CreateEventOptions, type EventChange, type LoadEventsParams, type PageResult, type TimelineItem as TimelineItemLegacy, Timeline as TimelineLegacy, type TimelineProps as TimelinePropsLegacy, createEvent, createEvents, loadEvents, useArchivaContext };