@genesislcap/foundation-react-utils 15.46.6-alpha-606571609.0 → 15.48.0

package/dist/dts/error-boundary/error-boundary.d.ts

@@ -1,105 +0,0 @@
-import type { ComponentType, FC, ReactNode } from 'react';
-import type { RootOptions } from 'react-dom/client';
-/**
- * Name of the logger the error boundaries log through. They log a caught error, followed by its
- * reference ID, scope, title, tile registration and component stack, only when no `onError`
- * handler is set or when the handler throws. `setupErrorMonitoring` from foundation-utils reports
- * these logs, so apps using it don't need an `onError`.
- * @public
- */
-export declare const ERROR_BOUNDARY_LOGGER_NAME = "foundation-react-utils:error-boundary";
-/**
- * Where a boundary sits: around the whole app, or around a single tile.
- * @public
- */
-export type ErrorBoundaryScope = 'application' | 'tile';
-/**
- * What an error boundary passes to `onError` when it catches an error.
- * @public
- */
-export type ErrorBoundaryReport = {
-    error: Error;
-    componentStack: string;
-    /** Shown in the fallback UI, so support can match a user's screen to a reported event. */
-    referenceId: string;
-    scope: ErrorBoundaryScope;
-    title: string;
-    tileRegistration?: string;
-};
-/**
- * Callback that receives every error a boundary catches, for example to send it to an
- * error-monitoring service.
- * @public
- */
-export type ErrorBoundaryErrorHandler = (report: ErrorBoundaryReport) => void;
-/**
- * Props for {@link AppErrorBoundary}.
- * @public
- */
-export type AppErrorBoundaryProps = {
-    onError?: ErrorBoundaryErrorHandler;
-    children: ReactNode;
-};
-/**
- * Props for {@link TileErrorBoundary}.
- * @public
- */
-export type TileErrorBoundaryProps = {
-    /** Human-readable tile name shown in the fallback UI. */
-    title: string;
-    /** The tile's key in the layout. */
-    tileRegistration: string;
-    onError?: ErrorBoundaryErrorHandler;
-    children: ReactNode;
-};
-/**
- * Top-level error boundary. Wrap the whole app in one instance; use {@link TileErrorBoundary}
- * inside it.
- *
- * @remarks
- * Renders a fallback with a reference ID, copyable diagnostics and a Retry button that remounts
- * the children. Each caught error is passed to `onError`. Without one, it's logged through the
- * {@link ERROR_BOUNDARY_LOGGER_NAME} logger instead, which a global log reporter receives. Pair with {@link onCaughtError} on the root so React doesn't log the
- * error a second time.
- *
- * @example
- * ```tsx
- * createRoot(el, { onCaughtError }).render(
- *   <AppErrorBoundary onError={({ error, ...extra }) => Sentry.captureException(error, { extra })}>
- *     <App />
- *   </AppErrorBoundary>,
- * );
- * ```
- * @public
- */
-export declare const AppErrorBoundary: FC<AppErrorBoundaryProps>;
-/**
- * Error boundary for a single tile, so a crash replaces only that tile with the fallback UI and
- * the rest of the app keeps running.
- * @public
- */
-export declare const TileErrorBoundary: FC<TileErrorBoundaryProps>;
-/**
- * Wraps a component in a {@link TileErrorBoundary}.
- *
- * @param WrappedComponent - The tile component.
- * @param title - Human-readable tile name shown in the fallback UI.
- * @param tileRegistration - The tile's key in the layout.
- * @param onError - Optional callback for caught errors.
- * @public
- */
-export declare const withTileErrorBoundary: <P extends object>(WrappedComponent: ComponentType<P>, title: string, tileRegistration: string, onError?: ErrorBoundaryErrorHandler) => FC<P>;
-/**
- * Root `onCaughtError` for `createRoot`.
- *
- * @remarks
- * By default React 19 logs every error a boundary catches to `console.error`, before the
- * boundary's `componentDidCatch` runs. Console-capturing monitoring tools then report that bare
- * error first, and can drop or duplicate the boundary's own report. {@link AppErrorBoundary} and
- * {@link TileErrorBoundary} report or log errors themselves, so this skips them. Errors caught by
- * any other boundary are still logged to `console.error`.
- *
- * @public
- */
-export declare const onCaughtError: NonNullable<RootOptions['onCaughtError']>;
-//# sourceMappingURL=error-boundary.d.ts.map

package/dist/dts/error-boundary/error-boundary.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"error-boundary.d.ts","sourceRoot":"","sources":["../../../src/error-boundary/error-boundary.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAa,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGpD;;;;;;GAMG;AACH,eAAO,MAAM,0BAA0B,0CAA0C,CAAC;AAIlF;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,aAAa,GAAG,MAAM,CAAC;AAExD;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,KAAK,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;IACvB,0FAA0F;IAC1F,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,kBAAkB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,yBAAyB,GAAG,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;AAE9E;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAwPF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAItD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAcxD,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,GAAI,CAAC,SAAS,MAAM,EACpD,kBAAkB,aAAa,CAAC,CAAC,CAAC,EAClC,OAAO,MAAM,EACb,kBAAkB,MAAM,EACxB,UAAU,yBAAyB,KAClC,EAAE,CAAC,CAAC,CAUN,CAAC;AAOF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,EAAE,WAAW,CAAC,WAAW,CAAC,eAAe,CAAC,CAKnE,CAAC"}

package/dist/dts/error-boundary/index.d.ts

@@ -1,3 +0,0 @@
-export { AppErrorBoundary, ERROR_BOUNDARY_LOGGER_NAME, onCaughtError, TileErrorBoundary, withTileErrorBoundary, } from './error-boundary';
-export type { AppErrorBoundaryProps, ErrorBoundaryErrorHandler, ErrorBoundaryReport, ErrorBoundaryScope, TileErrorBoundaryProps, } from './error-boundary';
-//# sourceMappingURL=index.d.ts.map

package/dist/dts/error-boundary/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/error-boundary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,0BAA0B,EAC1B,aAAa,EACb,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,qBAAqB,EACrB,yBAAyB,EACzB,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,kBAAkB,CAAC"}

package/dist/esm/error-boundary/error-boundary-styles.js

@@ -1,133 +0,0 @@
-/**
- * Fallback UI styles. Colours and fonts read `--eb-*` custom properties, so an app can theme the
- * fallback by setting them on any ancestor.
- */
-export const errorBoundaryStyles = `
-.error-boundary {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  align-items: flex-start;
-  width: 100%;
-  height: 100%;
-  padding: 16px;
-  background: var(--eb-bg, #f6f8fb);
-  color: var(--eb-text, #18212f);
-  font-family: var(--eb-font, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);
-}
-
-.error-boundary__top,
-.error-boundary__title,
-.error-boundary__subtitle,
-.error-boundary__details,
-.error-boundary__actions,
-.error-boundary__manual-copy-help {
-  width: 100%;
-}
-
-.error-boundary__top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.error-boundary__status {
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--eb-error, #c53d3d);
-  border-radius: 999px;
-  padding: 5px 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.13em;
-  font-size: 11px;
-  font-weight: 700;
-  color: var(--eb-error, #c53d3d);
-  background: var(--eb-error-bg, #fff4f4);
-}
-
-.error-boundary__reference {
-  font-family: var(--eb-mono-font, 'Menlo', 'Consolas', 'Liberation Mono', monospace);
-  font-size: 11px;
-  letter-spacing: 0.08em;
-  color: var(--eb-text-muted, #5f6f84);
-  text-transform: uppercase;
-}
-
-.error-boundary__title {
-  margin: 0;
-  font-size: clamp(22px, 3vw, 30px);
-  line-height: 1.15;
-  font-weight: 700;
-  text-wrap: balance;
-}
-
-.error-boundary__subtitle {
-  margin: 0;
-  max-width: 80ch;
-  line-height: 1.45;
-}
-
-.error-boundary__details {
-  box-sizing: border-box;
-  min-height: 190px;
-  max-height: 360px;
-  padding: 12px;
-  border: 1px solid var(--eb-border, #d3dae6);
-  border-radius: 10px;
-  background: var(--eb-surface, #ffffff);
-  color: inherit;
-  font-family: var(--eb-mono-font, 'Menlo', 'Consolas', 'Liberation Mono', monospace);
-  font-size: 12px;
-  line-height: 1.5;
-  resize: vertical;
-}
-
-.error-boundary__actions {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.error-boundary__button {
-  border: 1px solid var(--eb-accent, #2f6fed);
-  border-radius: 999px;
-  background: var(--eb-accent, #2f6fed);
-  color: var(--eb-accent-foreground, #ffffff);
-  cursor: pointer;
-  padding: 9px 16px;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.error-boundary__button:hover {
-  background: var(--eb-accent-hover, #255dcc);
-}
-
-.error-boundary__button--secondary {
-  border-color: var(--eb-border, #d3dae6);
-  background: var(--eb-surface, #ffffff);
-  color: inherit;
-}
-
-.error-boundary__button--secondary:hover {
-  background: var(--eb-surface-hover, #eef2f8);
-}
-
-.error-boundary__button:focus-visible {
-  outline: 2px solid var(--eb-focus, #2f6fed);
-  outline-offset: 2px;
-}
-
-.error-boundary__manual-copy-help {
-  margin: 2px 0 0;
-  font-size: 13px;
-  color: var(--eb-text-muted, #5f6f84);
-  line-height: 1.4;
-}
-`;

package/dist/esm/error-boundary/error-boundary.js

@@ -1,225 +0,0 @@
-var _a;
-import { __awaiter } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createLogger } from '@genesislcap/foundation-logger';
-import { Component, useState } from 'react';
-import { errorBoundaryStyles } from './error-boundary-styles';
-/**
- * Name of the logger the error boundaries log through. They log a caught error, followed by its
- * reference ID, scope, title, tile registration and component stack, only when no `onError`
- * handler is set or when the handler throws. `setupErrorMonitoring` from foundation-utils reports
- * these logs, so apps using it don't need an `onError`.
- * @public
- */
-export const ERROR_BOUNDARY_LOGGER_NAME = 'foundation-react-utils:error-boundary';
-const logger = createLogger(ERROR_BOUNDARY_LOGGER_NAME);
-const initialBoundaryState = {
-    error: null,
-    componentStack: '',
-    capturedAt: '',
-    referenceId: '',
-};
-/**
- * Marks instances of these boundaries. A brand rather than `instanceof`, so {@link onCaughtError}
- * still recognises a boundary from another copy of this package, such as one in a federated remote.
- */
-const BOUNDARY_BRAND = Symbol.for('@genesislcap/foundation-react-utils:error-boundary');
-const REPORTS_GLOBAL = '__GENESIS_ERROR_BOUNDARY_REPORTS__';
-const MAX_REPORTS = 20;
-const COPIED_RESET_MS = 2000;
-const REFERENCE_RANDOM_LENGTH = 6;
-const BASE36 = 36;
-const toError = (value) => {
-    if (value instanceof Error) {
-        return value;
-    }
-    if (typeof value === 'string') {
-        return new Error(value);
-    }
-    try {
-        return new Error(JSON.stringify(value));
-    }
-    catch (_b) {
-        return new Error('Unknown non-serializable error');
-    }
-};
-const createReferenceId = () => {
-    const timestamp = new Date().toISOString().split(':').join('-');
-    const random = Math.random()
-        .toString(BASE36)
-        .slice(2, 2 + REFERENCE_RANDOM_LENGTH)
-        .toUpperCase();
-    return `APP-${timestamp}-${random}`;
-};
-/**
- * Keeps the most recent reports on `window` for dev tooling (the Genesis Create preview reads them).
- */
-const recordReport = (error, componentStack) => {
-    var _b, _c;
-    const host = globalThis;
-    const reports = ((_b = host[REPORTS_GLOBAL]) !== null && _b !== void 0 ? _b : (host[REPORTS_GLOBAL] = []));
-    reports.push({
-        message: error.message,
-        stack: (_c = error.stack) !== null && _c !== void 0 ? _c : null,
-        componentStack: componentStack || null,
-        ts: Date.now(),
-    });
-    if (reports.length > MAX_REPORTS) {
-        reports.shift();
-    }
-};
-const ErrorBoundaryFallback = ({ scope, referenceId, title, subtitle, details, onRetry, }) => {
-    const [copied, setCopied] = useState(false);
-    const [copyHelpVisible, setCopyHelpVisible] = useState(false);
-    const handleCopy = () => __awaiter(void 0, void 0, void 0, function* () {
-        try {
-            yield navigator.clipboard.writeText(details);
-            setCopied(true);
-            setCopyHelpVisible(false);
-            window.setTimeout(() => setCopied(false), COPIED_RESET_MS);
-        }
-        catch (_b) {
-            setCopyHelpVisible(true);
-        }
-    });
-    return (_jsxs("section", { className: "error-boundary", role: "alert", "data-test-id": "error-boundary", children: [_jsx("style", { children: errorBoundaryStyles }), _jsxs("div", { className: "error-boundary__top", children: [_jsx("span", { className: "error-boundary__status", children: scope === 'application' ? 'Application incident' : 'Tile incident' }), _jsxs("span", { className: "error-boundary__reference", "data-test-id": "error-boundary-reference", children: ["Ref: ", referenceId] })] }), _jsx("h2", { className: "error-boundary__title", children: title }), _jsx("p", { className: "error-boundary__subtitle", children: subtitle }), _jsx("textarea", { className: "error-boundary__details", readOnly: true, value: details, "aria-label": "Error diagnostics details", "data-test-id": "error-boundary-details" }), _jsxs("div", { className: "error-boundary__actions", children: [_jsx("button", { type: "button", className: "error-boundary__button", onClick: onRetry, "data-test-id": "error-boundary-retry", children: "Retry" }), _jsx("button", { type: "button", className: "error-boundary__button error-boundary__button--secondary", onClick: handleCopy, "data-test-id": "error-boundary-copy", children: copied ? 'Copied' : 'Copy diagnostics' })] }), copyHelpVisible ? (_jsx("p", { className: "error-boundary__manual-copy-help", role: "status", children: "Clipboard access is blocked in this browser context. Select the diagnostics text and copy it manually." })) : null] }));
-};
-class BaseErrorBoundary extends Component {
-    constructor() {
-        super(...arguments);
-        this[_a] = true;
-        this.state = initialBoundaryState;
-        this.handleRetry = () => {
-            this.setState(initialBoundaryState);
-        };
-    }
-    static getDerivedStateFromError(error) {
-        return {
-            error: toError(error),
-            capturedAt: new Date().toISOString(),
-            referenceId: createReferenceId(),
-        };
-    }
-    componentDidCatch(error, errorInfo) {
-        var _b;
-        const { scope, title, tileRegistration, onError } = this.props;
-        const normalized = toError(error);
-        const componentStack = (_b = errorInfo.componentStack) !== null && _b !== void 0 ? _b : '';
-        const { referenceId } = this.state;
-        this.setState({ componentStack });
-        recordReport(normalized, componentStack);
-        // The error comes first so a global log reporter can report it as an exception, with the
-        // context object attached (see `setupErrorMonitoring` in foundation-utils).
-        const logCaughtError = () => logger.error(`[${scope}] error boundary captured an error`, normalized, {
-            referenceId,
-            scope,
-            title,
-            tileRegistration,
-            componentStack,
-        });
-        // With a handler set, the handler reports the error, so logging it as well would send it to
-        // any global log reporter a second time.
-        if (!onError) {
-            logCaughtError();
-            return;
-        }
-        try {
-            onError({ error: normalized, componentStack, referenceId, scope, title, tileRegistration });
-        }
-        catch (handlerError) {
-            // A failing reporter must not take down the fallback UI, or lose the original error.
-            logCaughtError();
-            logger.error(`[${scope}] error boundary onError handler threw`, handlerError);
-        }
-    }
-    render() {
-        var _b;
-        const { error, referenceId, capturedAt, componentStack } = this.state;
-        if (!error) {
-            return this.props.children;
-        }
-        const { scope, title, tileRegistration } = this.props;
-        const diagnostics = [
-            `Reference: ${referenceId}`,
-            `Scope: ${scope}`,
-            `Title: ${title}`,
-            `Tile registration: ${tileRegistration !== null && tileRegistration !== void 0 ? tileRegistration : 'N/A'}`,
-            `Captured at: ${capturedAt}`,
-            `URL: ${window.location.href}`,
-            `User agent: ${window.navigator.userAgent}`,
-            `Error name: ${error.name}`,
-            `Error message: ${error.message}`,
-            'Error stack:',
-            (_b = error.stack) !== null && _b !== void 0 ? _b : 'No stack available',
-            'Component stack:',
-            componentStack || 'No component stack available',
-        ].join('\n');
-        const isApp = scope === 'application';
-        return (_jsx(ErrorBoundaryFallback, { scope: scope, referenceId: referenceId, title: isApp ? 'Something went wrong' : `Something went wrong in "${title}"`, subtitle: isApp
-                ? 'The app hit an unexpected error. You can retry or copy the diagnostics.'
-                : 'This tile crashed, but the rest of the application keeps running. Retry or copy the diagnostics.', details: diagnostics, onRetry: this.handleRetry }));
-    }
-}
-_a = BOUNDARY_BRAND;
-/**
- * Top-level error boundary. Wrap the whole app in one instance; use {@link TileErrorBoundary}
- * inside it.
- *
- * @remarks
- * Renders a fallback with a reference ID, copyable diagnostics and a Retry button that remounts
- * the children. Each caught error is passed to `onError`. Without one, it's logged through the
- * {@link ERROR_BOUNDARY_LOGGER_NAME} logger instead, which a global log reporter receives. Pair with {@link onCaughtError} on the root so React doesn't log the
- * error a second time.
- *
- * @example
- * ```tsx
- * createRoot(el, { onCaughtError }).render(
- *   <AppErrorBoundary onError={({ error, ...extra }) => Sentry.captureException(error, { extra })}>
- *     <App />
- *   </AppErrorBoundary>,
- * );
- * ```
- * @public
- */
-export const AppErrorBoundary = ({ onError, children }) => (_jsx(BaseErrorBoundary, { scope: "application", title: "Application", onError: onError, children: children }));
-/**
- * Error boundary for a single tile, so a crash replaces only that tile with the fallback UI and
- * the rest of the app keeps running.
- * @public
- */
-export const TileErrorBoundary = ({ title, tileRegistration, onError, children, }) => (_jsx(BaseErrorBoundary, { scope: "tile", title: title, tileRegistration: tileRegistration, onError: onError, children: children }));
-/**
- * Wraps a component in a {@link TileErrorBoundary}.
- *
- * @param WrappedComponent - The tile component.
- * @param title - Human-readable tile name shown in the fallback UI.
- * @param tileRegistration - The tile's key in the layout.
- * @param onError - Optional callback for caught errors.
- * @public
- */
-export const withTileErrorBoundary = (WrappedComponent, title, tileRegistration, onError) => {
-    const WithTileErrorBoundary = (props) => (_jsx(TileErrorBoundary, { title: title, tileRegistration: tileRegistration, onError: onError, children: _jsx(WrappedComponent, Object.assign({}, props)) }));
-    WithTileErrorBoundary.displayName = `WithTileErrorBoundary(${title}:${tileRegistration}:${WrappedComponent.displayName || WrappedComponent.name || 'TileComponent'})`;
-    return WithTileErrorBoundary;
-};
-const isFoundationBoundary = (boundary) => typeof boundary === 'object' &&
-    boundary !== null &&
-    boundary[BOUNDARY_BRAND] === true;
-/**
- * Root `onCaughtError` for `createRoot`.
- *
- * @remarks
- * By default React 19 logs every error a boundary catches to `console.error`, before the
- * boundary's `componentDidCatch` runs. Console-capturing monitoring tools then report that bare
- * error first, and can drop or duplicate the boundary's own report. {@link AppErrorBoundary} and
- * {@link TileErrorBoundary} report or log errors themselves, so this skips them. Errors caught by
- * any other boundary are still logged to `console.error`.
- *
- * @public
- */
-export const onCaughtError = (error, errorInfo) => {
-    if (isFoundationBoundary(errorInfo.errorBoundary)) {
-        return;
-    }
-    console.error(error);
-};

package/dist/esm/error-boundary/index.js

@@ -1 +0,0 @@
-export { AppErrorBoundary, ERROR_BOUNDARY_LOGGER_NAME, onCaughtError, TileErrorBoundary, withTileErrorBoundary, } from './error-boundary';