@highlight-run/react - npm Package Compare versions

Comparing version 1.2.1 to 2.0.0

dist/index.d.ts

@@ -1,3 +0,79 @@
-import './fonts.css';
-export * from "./ErrorBoundary/ErrorBoundary";
-export * from "./SampleBuggyButton/SampleBuggyButton";
+import React, { ErrorInfo } from 'react';
+
+interface ReportDialogOptions {
+    user?: {
+        email?: string;
+        name?: string;
+    };
+    title?: string;
+    subtitle?: string;
+    subtitle2?: string;
+    labelName?: string;
+    labelEmail?: string;
+    labelComments?: string;
+    labelClose?: string;
+    labelSubmit?: string;
+    successMessage?: string;
+    successSubtitle?: string;
+    hideHighlightBranding?: boolean;
+}
+
+type FallbackRender = (errorData: {
+    error: Error;
+    componentStack: string | null;
+    resetError(): void;
+}) => React.ReactElement;
+type ErrorBoundaryProps = {
+    children?: React.ReactNode;
+    /** If a Highlight report dialog should be rendered on error */
+    showDialog?: boolean;
+    /** A custom dialog that you can provide to be shown when the ErrorBoundary is shown. */
+    customDialog?: React.ReactNode;
+    /**
+     * Options to be passed into the Highlight report dialog.
+     * No-op if {@link showDialog} is false.
+     */
+    dialogOptions?: ReportDialogOptions;
+    /**
+     * A fallback component that gets rendered when the error boundary encounters an error.
+     *
+     * Can either provide a React Component, or a function that returns React Component as
+     * a valid fallback prop. If a function is provided, the function will be called with
+     * the error, the component stack, and an function that resets the error boundary on error.
+     *
+     */
+    fallback?: React.ReactElement | FallbackRender;
+    /** Called when the error boundary encounters an error */
+    onError?(error: Error, componentStack: string): void;
+    /** Called on componentDidMount() */
+    onMount?(): void;
+    /** Called if resetError() is called from the fallback render props function  */
+    onReset?(error: Error | null, componentStack: string | null): void;
+    /** Called on componentWillUnmount() */
+    onUnmount?(error: Error | null, componentStack: string | null): void;
+    /** Called before the error is captured by Highlight, allows for you to add tags or context using the scope */
+    beforeCapture?(error: Error | null, componentStack: string | null): void;
+    /** Called after the report dialog's cancel button has been activated. */
+    onAfterReportDialogCancelHandler?: () => void;
+    /** Called after the report dialog's submit button has been activated. */
+    onAfterReportDialogSubmitHandler?: () => void;
+};
+interface ErrorBoundaryState {
+    componentStack: string | null;
+    error: Error | null;
+    showingDialog: boolean;
+}
+declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    resetErrorBoundary: () => void;
+    hideDialog: () => void;
+    onReportDialogSubmitHandler: () => void;
+    render(): any;
+}
+
+declare const SampleBuggyButton: ({ children, }: React.PropsWithChildren<{}>) => JSX.Element;
+
+export { ErrorBoundary, ErrorBoundaryProps, FallbackRender, SampleBuggyButton };

dist/index.js

@@ -1,2 +0,344 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["highlight-react"]={},e.jsxRuntime,e.React)}(this,(function(e,t,o){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=i(o);function a(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===o&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}var n="ReportDialog-module_container__eIvSx",s="ReportDialog-module_card__ymx7T",r="ReportDialog-module_ad__AUMwa",c="ReportDialog-module_cardContents__xa2t-",d="ReportDialog-module_cardContentsVisible__G9E71",b="ReportDialog-module_title__M99fw",u="ReportDialog-module_subtitle__-cXhk",p="ReportDialog-module_form__GlQyr",g="ReportDialog-module_button__aOqf8",m="ReportDialog-module_closeButton__4k7lr",x="ReportDialog-module_confirmationButton__DDf4s",Q="ReportDialog-module_loadingButton__8sUpZ",B="ReportDialog-module_formFooter__EEv91",I="ReportDialog-module_formActionsContainer__rUOOu",h="ReportDialog-module_logoContainer__BTe5a",G="ReportDialog-module_logo__C5pJq";a(".ReportDialog-module_container__eIvSx{--brand-color:#5629c6;--color-text-primary:#111;--color-text-primary-inverted:#fff;--color-text-link:var(--brand-color);--size-xxLarge:48px;--size-xLarge:32px;--size-large:24px;--size-medium:16px;--size-small:12px;--size-xSmall:8px;--size-xxSmall:4px;--color-gray-100:#efefef7d;--color-gray-200:#f2f2f2;--color-gray-300:#eaeaea;--color-gray-400:#bdbdbd;--color-gray-500:#828282;--color-gray-600:#7e7e7e;--color-gray-700:#8a8f98;--color-gray-800:#2d2f36;align-items:center;backdrop-filter:blur(1px);background:#000000bf;display:flex;font-family:Steradian,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:999999}@media only screen and (max-width:750px){.ReportDialog-module_card__ymx7T{display:flex;flex-direction:column;justify-content:center;padding:var(--size-xxLarge) var(--size-small) var(--size-medium);width:100%}.ReportDialog-module_ad__AUMwa{display:none}}.ReportDialog-module_card__ymx7T{background:#fff;border-radius:var(--size-xSmall);max-width:650px;padding:var(--size-xLarge)}.ReportDialog-module_cardContents__xa2t-{height:0;opacity:0;transition:visibility 0s,opacity .3s linear;visibility:hidden}.ReportDialog-module_cardContentsVisible__G9E71{height:auto;opacity:1;visibility:visible}.ReportDialog-module_title__M99fw{color:var(--color-text-primary);font-size:var(--size-large)}.ReportDialog-module_subtitle__-cXhk{color:var(--color-text-primary);font-size:14px;font-weight:400;margin-top:var(--size-medium)!important}.ReportDialog-module_form__GlQyr{display:flex;flex-direction:column;padding-top:var(--size-large);row-gap:var(--size-large)}.ReportDialog-module_form__GlQyr label{display:flex;flex-direction:column;font-size:14px!important}.ReportDialog-module_form__GlQyr input{height:40px}.ReportDialog-module_form__GlQyr input,.ReportDialog-module_form__GlQyr textarea{background-color:var(--color-gray-200);border:0;border-radius:8px;font-size:15px;margin:8px 0;outline:none;padding:15px;width:100%}.ReportDialog-module_button__aOqf8{align-items:center;background:var(--brand-color);border:0;border-radius:8px;box-shadow:none;color:var(--color-text-primary-inverted);cursor:pointer;display:flex;font-size:14px;height:auto;justify-content:center;min-height:40px;padding:4px 16px;text-shadow:none}.ReportDialog-module_closeButton__4k7lr{background:#0000!important;border:1px solid var(--color-gray-400)!important;color:var(--color-text-primary)!important}.ReportDialog-module_confirmationButton__DDf4s{margin-top:var(--size-xxLarge)}.ReportDialog-module_loadingButton__8sUpZ{background-color:#7e7e7e!important;border:1px solid #7e7e7e!important}.ReportDialog-module_formFooter__EEv91{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between}.ReportDialog-module_formActionsContainer__rUOOu{column-gap:var(--size-small);display:flex}.ReportDialog-module_ad__AUMwa{flex-shrink:0;font-size:12px}.ReportDialog-module_logoContainer__BTe5a{display:flex;flex-direction:column;height:40px;margin:0!important}.ReportDialog-module_logo__C5pJq{box-sizing:initial;height:25px;padding-top:4px}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJlcG9ydERpYWxvZy5tb2R1bGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHNDQUNFLHFCQUFzQixDQUN0Qix5QkFBNkIsQ0FDN0Isa0NBQW1DLENBQ25DLG9DQUFxQyxDQUNyQyxtQkFBb0IsQ0FDcEIsa0JBQW1CLENBQ25CLGlCQUFrQixDQUNsQixrQkFBbUIsQ0FDbkIsaUJBQWtCLENBQ2xCLGlCQUFrQixDQUNsQixrQkFBbUIsQ0FDbkIsMEJBQXlELENBQ3pELHdCQUF5QixDQUN6Qix3QkFBeUIsQ0FDekIsd0JBQXlCLENBQ3pCLHdCQUF5QixDQUN6Qix3QkFBeUIsQ0FDekIsd0JBQXlCLENBQ3pCLHdCQUF5QixDQWV6QixrQkFBbUIsQ0FIbkIseUJBQTBCLENBVjFCLG9CQUFpQyxDQVdqQyxZQUFhLENBVmIsa0pBRXFDLENBS3JDLFlBQWEsQ0FJYixzQkFBdUIsQ0FOdkIsTUFBTyxDQUZQLGNBQWUsQ0FDZixLQUFNLENBRU4sV0FBWSxDQUVaLGNBS0YsQ0FFQSx5Q0FDRSxpQ0FFRSxZQUFhLENBQ2IscUJBQXNCLENBQ3RCLHNCQUF1QixDQUl2QixnRUFBZ0MsQ0FQaEMsVUFRRixDQUVBLCtCQUNFLFlBQ0YsQ0FDRixDQUVBLGlDQUlFLGVBQWlCLENBSGpCLGdDQUFpQyxDQUVqQyxlQUFnQixDQURoQiwwQkFHRixDQUVBLHlDQUNFLFFBQVMsQ0FDVCxTQUFVLENBQ1YsMkNBQThDLENBQzlDLGlCQUNGLENBRUEsZ0RBQ0UsV0FBWSxDQUNaLFNBQVUsQ0FDVixrQkFDRixDQUVBLGtDQUVFLCtCQUFnQyxDQURoQywyQkFFRixDQUVBLHFDQUlFLCtCQUFnQyxDQUhoQyxjQUFlLENBRWYsZUFBZ0IsQ0FEaEIsdUNBR0YsQ0FFQSxpQ0FFRSxZQUFhLENBQ2IscUJBQXNCLENBRnRCLDZCQUE4QixDQUc5Qix5QkFDRixDQUVBLHVDQUNFLFlBQWEsQ0FDYixxQkFBc0IsQ0FDdEIsd0JBQ0YsQ0FFQSx1Q0FDRSxXQUNGLENBRUEsaUZBRUUsc0NBQXVDLENBQ3ZDLFFBQVMsQ0FDVCxpQkFBa0IsQ0FDbEIsY0FBZSxDQUNmLFlBQWEsQ0FDYixZQUFhLENBQ2IsWUFBYSxDQUNiLFVBQ0YsQ0FFQSxtQ0FDRSxrQkFBbUIsQ0FNbkIsNkJBQThCLENBTTlCLFFBQVMsQ0FEVCxpQkFBa0IsQ0FIbEIsZUFBZ0IsQ0FIaEIsd0NBQXlDLENBUXpDLGNBQWUsQ0FaZixZQUFhLENBU2IsY0FBZSxDQU5mLFdBQVksQ0FGWixzQkFBdUIsQ0FDdkIsZUFBZ0IsQ0FNaEIsZ0JBQWlCLENBRmpCLGdCQU9GLENBRUEsd0NBQ0UsMEJBQWtDLENBRWxDLGdEQUFrRCxDQURsRCx5Q0FFRixDQUVBLCtDQUNFLDhCQUNGLENBRUEsMENBQ0Usa0NBQW9DLENBQ3BDLGtDQUNGLENBRUEsdUNBR0Usa0JBQW1CLENBRm5CLFlBQWEsQ0FDYixjQUFlLENBRWYsNkJBQ0YsQ0FFQSxpREFFRSw0QkFBNkIsQ0FEN0IsWUFFRixDQUVBLCtCQUNFLGFBQWMsQ0FDZCxjQUNGLENBRUEsMENBQ0UsWUFBYSxDQUNiLHFCQUFzQixDQUN0QixXQUFZLENBQ1osa0JBQ0YsQ0FFQSxpQ0FHRSxrQkFBdUIsQ0FGdkIsV0FBWSxDQUNaLGVBRUYiLCJmaWxlIjoiUmVwb3J0RGlhbG9nLm1vZHVsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuY29udGFpbmVyIHtcbiAgLS1icmFuZC1jb2xvcjogIzU2MjljNjtcbiAgLS1jb2xvci10ZXh0LXByaW1hcnk6ICMxMTExMTE7XG4gIC0tY29sb3ItdGV4dC1wcmltYXJ5LWludmVydGVkOiAjZmZmO1xuICAtLWNvbG9yLXRleHQtbGluazogdmFyKC0tYnJhbmQtY29sb3IpO1xuICAtLXNpemUteHhMYXJnZTogNDhweDtcbiAgLS1zaXplLXhMYXJnZTogMzJweDtcbiAgLS1zaXplLWxhcmdlOiAyNHB4O1xuICAtLXNpemUtbWVkaXVtOiAxNnB4O1xuICAtLXNpemUtc21hbGw6IDEycHg7XG4gIC0tc2l6ZS14U21hbGw6IDhweDtcbiAgLS1zaXplLXh4U21hbGw6IDRweDtcbiAgLS1jb2xvci1ncmF5LTEwMDogaHNsYSgwLCAwJSwgOTMuNyUsIDAuNDkwMTk2MDc4NDMxMzcyNTMpO1xuICAtLWNvbG9yLWdyYXktMjAwOiAjZjJmMmYyO1xuICAtLWNvbG9yLWdyYXktMzAwOiAjZWFlYWVhO1xuICAtLWNvbG9yLWdyYXktNDAwOiAjYmRiZGJkO1xuICAtLWNvbG9yLWdyYXktNTAwOiAjODI4MjgyO1xuICAtLWNvbG9yLWdyYXktNjAwOiAjN2U3ZTdlO1xuICAtLWNvbG9yLWdyYXktNzAwOiAjOGE4Zjk4O1xuICAtLWNvbG9yLWdyYXktODAwOiAjMmQyZjM2O1xuXG4gIGJhY2tncm91bmQ6IGhzbCgwZGVnIDAlIDAlIC8gNzUlKTtcbiAgZm9udC1mYW1pbHk6ICdTdGVyYWRpYW4nLCAtYXBwbGUtc3lzdGVtLCBCbGlua01hY1N5c3RlbUZvbnQsXG4gICAgJ1NlZ29lIFVJJywgUm9ib3RvLCBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmLCAnQXBwbGUgQ29sb3IgRW1vamknLFxuICAgICdTZWdvZSBVSSBFbW9qaScsICdTZWdvZSBVSSBTeW1ib2wnO1xuICBwb3NpdGlvbjogZml4ZWQ7XG4gIHRvcDogMDtcbiAgbGVmdDogMDtcbiAgd2lkdGg6IDEwMHZ3O1xuICBoZWlnaHQ6IDEwMHZoO1xuICB6LWluZGV4OiA5OTk5OTk7XG4gIGJhY2tkcm9wLWZpbHRlcjogYmx1cigxcHgpO1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbn1cblxuQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA3NTBweCkge1xuICAuY2FyZCB7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIHBhZGRpbmctdG9wOiB2YXIoLS1zaXplLXh4TGFyZ2UpO1xuICAgIHBhZGRpbmctYm90dG9tOiB2YXIoLS1zaXplLW1lZGl1bSk7XG4gICAgcGFkZGluZy1sZWZ0OiB2YXIoLS1zaXplLXNtYWxsKTtcbiAgICBwYWRkaW5nLXJpZ2h0OiB2YXIoLS1zaXplLXNtYWxsKTtcbiAgfVxuXG4gIC5hZCB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuXG4uY2FyZCB7XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLXNpemUteFNtYWxsKTtcbiAgcGFkZGluZzogdmFyKC0tc2l6ZS14TGFyZ2UpO1xuICBtYXgtd2lkdGg6IDY1MHB4O1xuICBiYWNrZ3JvdW5kOiB3aGl0ZTtcbn1cblxuLmNhcmRDb250ZW50cyB7XG4gIGhlaWdodDogMDtcbiAgb3BhY2l0eTogMDtcbiAgdHJhbnNpdGlvbjogdmlzaWJpbGl0eSAwcywgb3BhY2l0eSAwLjNzIGxpbmVhcjtcbiAgdmlzaWJpbGl0eTogaGlkZGVuO1xufVxuXG4uY2FyZENvbnRlbnRzVmlzaWJsZSB7XG4gIGhlaWdodDogYXV0bztcbiAgb3BhY2l0eTogMTtcbiAgdmlzaWJpbGl0eTogdmlzaWJsZTtcbn1cblxuLnRpdGxlIHtcbiAgZm9udC1zaXplOiB2YXIoLS1zaXplLWxhcmdlKTtcbiAgY29sb3I6IHZhcigtLWNvbG9yLXRleHQtcHJpbWFyeSk7XG59XG5cbi5zdWJ0aXRsZSB7XG4gIGZvbnQtc2l6ZTogMTRweDtcbiAgbWFyZ2luLXRvcDogdmFyKC0tc2l6ZS1tZWRpdW0pICFpbXBvcnRhbnQ7XG4gIGZvbnQtd2VpZ2h0OiA0MDA7XG4gIGNvbG9yOiB2YXIoLS1jb2xvci10ZXh0LXByaW1hcnkpO1xufVxuXG4uZm9ybSB7XG4gIHBhZGRpbmctdG9wOiB2YXIoLS1zaXplLWxhcmdlKTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgcm93LWdhcDogdmFyKC0tc2l6ZS1sYXJnZSk7XG59XG5cbi5mb3JtIGxhYmVsIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgZm9udC1zaXplOiAxNHB4ICFpbXBvcnRhbnQ7XG59XG5cbi5mb3JtIGlucHV0IHtcbiAgaGVpZ2h0OiA0MHB4O1xufVxuXG4uZm9ybSBpbnB1dCxcbi5mb3JtIHRleHRhcmVhIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3ItZ3JheS0yMDApO1xuICBib3JkZXI6IDA7XG4gIGJvcmRlci1yYWRpdXM6IDhweDtcbiAgZm9udC1zaXplOiAxNXB4O1xuICBtYXJnaW46IDhweCAwO1xuICBvdXRsaW5lOiBub25lO1xuICBwYWRkaW5nOiAxNXB4O1xuICB3aWR0aDogMTAwJTtcbn1cblxuLmJ1dHRvbiB7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBtaW4taGVpZ2h0OiA0MHB4O1xuICBoZWlnaHQ6IGF1dG87XG4gIGNvbG9yOiB2YXIoLS1jb2xvci10ZXh0LXByaW1hcnktaW52ZXJ0ZWQpO1xuICBiYWNrZ3JvdW5kOiB2YXIoLS1icmFuZC1jb2xvcik7XG4gIHRleHQtc2hhZG93OiBub25lO1xuICBib3gtc2hhZG93OiBub25lO1xuICBwYWRkaW5nOiA0cHggMTZweDtcbiAgZm9udC1zaXplOiAxNHB4O1xuICBib3JkZXItcmFkaXVzOiA4cHg7XG4gIGJvcmRlcjogMDtcbiAgY3Vyc29yOiBwb2ludGVyO1xufVxuXG4uY2xvc2VCdXR0b24ge1xuICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudCAhaW1wb3J0YW50O1xuICBjb2xvcjogdmFyKC0tY29sb3ItdGV4dC1wcmltYXJ5KSAhaW1wb3J0YW50O1xuICBib3JkZXI6IDFweCBzb2xpZCB2YXIoLS1jb2xvci1ncmF5LTQwMCkgIWltcG9ydGFudDtcbn1cblxuLmNvbmZpcm1hdGlvbkJ1dHRvbiB7XG4gIG1hcmdpbi10b3A6IHZhcigtLXNpemUteHhMYXJnZSk7XG59XG5cbi5sb2FkaW5nQnV0dG9uIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzdlN2U3ZSAhaW1wb3J0YW50O1xuICBib3JkZXI6ICM3ZTdlN2Ugc29saWQgMXB4ICFpbXBvcnRhbnQ7XG59XG5cbi5mb3JtRm9vdGVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC13cmFwOiB3cmFwO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG59XG5cbi5mb3JtQWN0aW9uc0NvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGNvbHVtbi1nYXA6IHZhcigtLXNpemUtc21hbGwpO1xufVxuXG4uYWQge1xuICBmbGV4LXNocmluazogMDtcbiAgZm9udC1zaXplOiAxMnB4O1xufVxuXG4ubG9nb0NvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGhlaWdodDogNDBweDtcbiAgbWFyZ2luOiAwICFpbXBvcnRhbnQ7XG59XG5cbi5sb2dvIHtcbiAgaGVpZ2h0OiAyNXB4O1xuICBwYWRkaW5nLXRvcDogNHB4O1xuICBib3gtc2l6aW5nOiBjb250ZW50LWJveDtcbn1cbiJdfQ== */");var F=({labelClose:e="Close",labelComments:i="What happened?",labelEmail:l="Email",labelName:a="Name",labelSubmit:F="Submit",subtitle2:C="If you’d like to help, tell us what happened below.",subtitle:D="Our team has been notified.",successMessage:N="Your feedback has been sent. Thank you!",successSubtitle:X="Thank you for sending us feedback. If you have any other concerns/questions, reach out to this application's support email.",title:Z="It looks like we’re having issues.",user:y,onCloseHandler:L,onSubmitHandler:W,hideHighlightBranding:U=!1})=>{const[R,k]=o.useState((null==y?void 0:y.name)||""),[v,f]=o.useState((null==y?void 0:y.email)||""),[S,w]=o.useState(""),[A,Y]=o.useState(!1),[O,V]=o.useState(!1),j=o.useRef((new Date).toISOString());return t.jsx("main",{className:n,children:t.jsxs("div",{className:s,children:[t.jsxs("div",{className:`${c} ${O&&d}`,children:[t.jsx("h1",{className:b,children:N}),t.jsx("h4",{className:u,children:X}),t.jsx("button",{className:`${g} ${x}`,onClick:L,children:"Close"})]}),t.jsxs("div",{className:`${c} ${!O&&d}`,children:[t.jsxs("div",{children:[t.jsx("h1",{className:b,children:Z}),t.jsxs("h2",{className:u,children:[D," ",C]})]}),t.jsxs("form",{className:p,onSubmit:e=>{var t;e.preventDefault(),Y(!0),(null==(t=null==window?void 0:window.H)?void 0:t.addSessionFeedback)?window.H.addSessionFeedback({verbatim:S,userName:R,userEmail:v,timestampOverride:j.current}):console.warn("Highlight is not initialized. Make sure highlight.run is installed and running."),new Promise((e=>window.setTimeout(e,300))).then((()=>{Y(!1),V(!0),W&&W()}))},children:[t.jsxs("label",{children:[a,t.jsx("input",{type:"text",value:R,name:"name",autoFocus:!0,onChange:e=>{k(e.target.value)}})]}),t.jsxs("label",{children:[l,t.jsx("input",{type:"email",value:v,name:"email",onChange:e=>{f(e.target.value)}})]}),t.jsxs("label",{children:[i,t.jsx("textarea",{value:S,placeholder:"I typed in a name then clicked the button",name:"verbatim",rows:3,onChange:e=>{w(e.target.value)}})]}),t.jsxs("div",{className:B,children:[t.jsxs("div",{className:I,children:[t.jsx("button",{type:"submit",className:A?`${g} ${Q}`:g,children:F}),t.jsx("button",{className:`${g} ${m}`,onClick:L,type:"button",children:e})]}),!U&&t.jsx("div",{className:r,children:t.jsxs("p",{className:h,children:["Crash reports powered by:",t.jsx("a",{href:"https://highlight.run",target:"_blank",children:t.jsx("img",{src:"https://app.highlight.run/logo-24x130.png",alt:"Highlight",height:"25",className:G})})]})})]})]})]})]})})},C=Object.defineProperty,D=Object.defineProperties,N=Object.getOwnPropertyDescriptors,X=Object.getOwnPropertySymbols,Z=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable,L=(e,t,o)=>t in e?C(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,W=(e,t)=>{for(var o in t||(t={}))Z.call(t,o)&&L(e,o,t[o]);if(X)for(var o of X(t))y.call(t,o)&&L(e,o,t[o]);return e},U=(e,t)=>D(e,N(t));const R={componentStack:null,error:null,showingDialog:!1};class k extends l.default.Component{constructor(){super(...arguments),this.state=R,this.resetErrorBoundary=()=>{const{onReset:e}=this.props,{error:t,componentStack:o}=this.state;e&&e(t,o),this.setState(R)},this.hideDialog=()=>{this.setState(U(W({},this.state),{showingDialog:!1})),this.props.onAfterReportDialogCancelHandler&&this.props.onAfterReportDialogCancelHandler()},this.onReportDialogSubmitHandler=()=>{this.props.onAfterReportDialogSubmitHandler&&this.props.onAfterReportDialogSubmitHandler()}}componentDidCatch(e,t){const{beforeCapture:o,onError:i,showDialog:l}=this.props;o&&o(e,t.componentStack),function(e,t){const o=new Error(` ${e.message}`);o.name=`React ErrorBoundary ${e.name}`,o.stack=e.stack;const i=function(e){const t=e.split("\n");if(t.length<1)return;const o=t[1].trim().split(" ");if(4!==o.length)return;return`<${o[1]}>`}(t);window.H?window.H.consumeError(o,""+(i?`ErrorBoundary ${i}`:"HighlightErrorBoundary")):console.warn("You need to install highlight.run as a npm dependency.")}(e,t.componentStack),i&&i(e,t.componentStack),l&&this.setState(U(W({},this.state),{showingDialog:!0})),this.setState({error:e,componentStack:t.componentStack})}componentDidMount(){const{onMount:e}=this.props;e&&e()}componentWillUnmount(){const{error:e,componentStack:t}=this.state,{onUnmount:o}=this.props;o&&o(e,t)}render(){const{fallback:e,children:o,customDialog:i}=this.props,{error:a,componentStack:n,showingDialog:s}=this.state;if(a){let o;return o="function"==typeof e?e({error:a,componentStack:n,resetError:this.resetErrorBoundary}):e,l.default.isValidElement(o)?t.jsxs(t.Fragment,{children:[s&&t.jsx(F,U(W({},this.props.dialogOptions),{onCloseHandler:this.hideDialog,onSubmitHandler:this.onReportDialogSubmitHandler})),o]}):(e&&console.warn("fallback did not produce a valid ReactElement"),s&&i?i:s&&t.jsx(F,U(W({},this.props.dialogOptions),{onCloseHandler:this.hideDialog,onSubmitHandler:this.onReportDialogSubmitHandler})))}return"function"==typeof o?o():o}}var v="SampleBuggyButton-module_button__ED5w-";a(".SampleBuggyButton-module_button__ED5w-{align-items:center;background:#5629c6;border:1px solid #bdbdbd;border-radius:8px;box-shadow:none;color:#fff;cursor:pointer;display:flex;font-family:Steradian,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:14px;height:auto;justify-content:center;min-height:40px;padding:4px 16px;text-shadow:none}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNhbXBsZUJ1Z2d5QnV0dG9uLm1vZHVsZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsd0NBQ0Usa0JBQW1CLENBQ25CLGtCQUFtQixDQUVuQix3QkFBeUIsQ0FEekIsaUJBQWtCLENBRWxCLGVBQWdCLENBQ2hCLFVBQVcsQ0FDWCxjQUFlLENBQ2YsWUFBYSxDQUNiLGtKQUVtQyxDQUNuQyxjQUFlLENBQ2YsV0FBWSxDQUNaLHNCQUF1QixDQUN2QixlQUFnQixDQUNoQixnQkFBaUIsQ0FDakIsZ0JBQ0YiLCJmaWxlIjoiU2FtcGxlQnVnZ3lCdXR0b24ubW9kdWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5idXR0b24ge1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBiYWNrZ3JvdW5kOiAjNTYyOWM2O1xuICBib3JkZXItcmFkaXVzOiA4cHg7XG4gIGJvcmRlcjogMXB4IHNvbGlkICNiZGJkYmQ7XG4gIGJveC1zaGFkb3c6IG5vbmU7XG4gIGNvbG9yOiAjZmZmO1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZvbnQtZmFtaWx5OiAnU3RlcmFkaWFuJywgLWFwcGxlLXN5c3RlbSwgQmxpbmtNYWNTeXN0ZW1Gb250LFxuICAnU2Vnb2UgVUknLCBSb2JvdG8sIEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYsICdBcHBsZSBDb2xvciBFbW9qaScsXG4gICdTZWdvZSBVSSBFbW9qaScsICdTZWdvZSBVSSBTeW1ib2wnO1xuICBmb250LXNpemU6IDE0cHg7XG4gIGhlaWdodDogYXV0bztcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIG1pbi1oZWlnaHQ6IDQwcHg7XG4gIHBhZGRpbmc6IDRweCAxNnB4O1xuICB0ZXh0LXNoYWRvdzogbm9uZTtcbn1cbiJdfQ== */");e.ErrorBoundary=k,e.SampleBuggyButton=({children:e})=>{const[o,i]=l.default.useState(!1);if(o)throw new Error("something bad happened - this is a sample test error");return t.jsx("button",{type:"button",className:v,onClick:()=>i(!0),children:null!=e?e:"Throw an Error"})},Object.defineProperty(e,"__esModule",{value:!0})}));
-//# sourceMappingURL=index.js.map
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  ErrorBoundary: () => ErrorBoundary,
+  SampleBuggyButton: () => SampleBuggyButton
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/ErrorBoundary/ErrorBoundary.tsx
+var import_react2 = __toESM(require("react"));
+
+// src/components/ReportDialog/ReportDialog.tsx
+var import_react = __toESM(require("react"));
+var ReportDialog = ({
+  labelClose = "Close",
+  labelComments = "What happened?",
+  labelEmail = "Email",
+  labelName = "Name",
+  labelSubmit = "Submit",
+  subtitle2 = "If you\u2019d like to help, tell us what happened below.",
+  subtitle = "Our team has been notified.",
+  successMessage = "Your feedback has been sent. Thank you!",
+  successSubtitle = "Thank you for sending us feedback. If you have any other concerns/questions, reach out to this application's support email.",
+  title = "It looks like we\u2019re having issues.",
+  user,
+  onCloseHandler,
+  onSubmitHandler,
+  hideHighlightBranding = false
+}) => {
+  const [name, setName] = (0, import_react.useState)((user == null ? void 0 : user.name) || "");
+  const [email, setEmail] = (0, import_react.useState)((user == null ? void 0 : user.email) || "");
+  const [verbatim, setVerbatim] = (0, import_react.useState)("");
+  const [sendingReport, setSendingReport] = (0, import_react.useState)(false);
+  const [sentReport, setSentReport] = (0, import_react.useState)(false);
+  const reportDialogOpenTime = (0, import_react.useRef)((/* @__PURE__ */ new Date()).toISOString());
+  const handleSubmit = (event) => {
+    var _a;
+    event.preventDefault();
+    setSendingReport(true);
+    if ((_a = window == null ? void 0 : window.H) == null ? void 0 : _a.addSessionFeedback) {
+      window.H.addSessionFeedback({
+        verbatim,
+        userName: name,
+        userEmail: email,
+        timestampOverride: reportDialogOpenTime.current
+      });
+    } else {
+      console.warn(
+        "Highlight is not initialized. Make sure highlight.run is installed and running."
+      );
+    }
+    new Promise((r) => window.setTimeout(r, 300)).then(() => {
+      setSendingReport(false);
+      setSentReport(true);
+      if (onSubmitHandler) {
+        onSubmitHandler();
+      }
+    });
+  };
+  return /* @__PURE__ */ import_react.default.createElement("main", { className: `container` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `card` }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `cardContents ${sentReport && "cardContentsVisible"}`
+    },
+    /* @__PURE__ */ import_react.default.createElement("h1", { className: `title` }, successMessage),
+    /* @__PURE__ */ import_react.default.createElement("h4", { className: `subtitle` }, successSubtitle),
+    /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        className: `button confirmationButton`,
+        onClick: onCloseHandler
+      },
+      "Close"
+    )
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `cardContents ${!sentReport && "cardContentsVisible"}`
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h1", { className: `title` }, title), /* @__PURE__ */ import_react.default.createElement("h2", { className: `subtitle` }, subtitle, " ", subtitle2)),
+    /* @__PURE__ */ import_react.default.createElement("form", { className: `form`, onSubmit: handleSubmit }, /* @__PURE__ */ import_react.default.createElement("label", null, labelName, /* @__PURE__ */ import_react.default.createElement(
+      "input",
+      {
+        type: "text",
+        value: name,
+        name: "name",
+        autoFocus: true,
+        onChange: (e) => {
+          setName(e.target.value);
+        }
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("label", null, labelEmail, /* @__PURE__ */ import_react.default.createElement(
+      "input",
+      {
+        type: "email",
+        value: email,
+        name: "email",
+        onChange: (e) => {
+          setEmail(e.target.value);
+        }
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("label", null, labelComments, /* @__PURE__ */ import_react.default.createElement(
+      "textarea",
+      {
+        value: verbatim,
+        placeholder: "I typed in a name then clicked the button",
+        name: "verbatim",
+        rows: 3,
+        onChange: (e) => {
+          setVerbatim(e.target.value);
+        }
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", { className: `formFooter` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `formActionsContainer` }, /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "submit",
+        className: sendingReport ? `button loadingButton` : "button"
+      },
+      labelSubmit
+    ), /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        className: `button closeButton`,
+        onClick: onCloseHandler,
+        type: "button"
+      },
+      labelClose
+    )), !hideHighlightBranding && /* @__PURE__ */ import_react.default.createElement("div", { className: `ad` }, /* @__PURE__ */ import_react.default.createElement("p", { className: `logoContainer` }, "Crash reports powered by:", /* @__PURE__ */ import_react.default.createElement(
+      "a",
+      {
+        href: "https://highlight.run",
+        target: "_blank"
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "img",
+        {
+          src: "https://app.highlight.run/logo-24x130.png",
+          alt: "Highlight",
+          height: "25",
+          className: `logo`
+        }
+      )
+    )))))
+  )));
+};
+var ReportDialog_default = ReportDialog;
+
+// src/components/ErrorBoundary/ErrorBoundary.tsx
+var INITIAL_STATE = {
+  componentStack: null,
+  error: null,
+  showingDialog: false
+};
+var ErrorBoundary = class extends import_react2.default.Component {
+  constructor() {
+    super(...arguments);
+    this.state = INITIAL_STATE;
+    this.resetErrorBoundary = () => {
+      const { onReset } = this.props;
+      const { error, componentStack } = this.state;
+      if (onReset) {
+        onReset(error, componentStack);
+      }
+      this.setState(INITIAL_STATE);
+    };
+    this.hideDialog = () => {
+      this.setState(__spreadProps(__spreadValues({}, this.state), { showingDialog: false }));
+      if (this.props.onAfterReportDialogCancelHandler) {
+        this.props.onAfterReportDialogCancelHandler();
+      }
+    };
+    this.onReportDialogSubmitHandler = () => {
+      if (this.props.onAfterReportDialogSubmitHandler) {
+        this.props.onAfterReportDialogSubmitHandler();
+      }
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    const { beforeCapture, onError, showDialog } = this.props;
+    if (beforeCapture) {
+      beforeCapture(error, errorInfo.componentStack);
+    }
+    captureReactErrorBoundaryError(error, errorInfo.componentStack);
+    if (onError) {
+      onError(error, errorInfo.componentStack);
+    }
+    if (showDialog) {
+      this.setState(__spreadProps(__spreadValues({}, this.state), { showingDialog: true }));
+    }
+    this.setState({ error, componentStack: errorInfo.componentStack });
+  }
+  componentDidMount() {
+    const { onMount } = this.props;
+    if (onMount) {
+      onMount();
+    }
+  }
+  componentWillUnmount() {
+    const { error, componentStack } = this.state;
+    const { onUnmount } = this.props;
+    if (onUnmount) {
+      onUnmount(error, componentStack);
+    }
+  }
+  render() {
+    const { fallback, children, customDialog } = this.props;
+    const { error, componentStack, showingDialog } = this.state;
+    if (error) {
+      let element = void 0;
+      if (typeof fallback === "function") {
+        element = fallback({
+          error,
+          componentStack,
+          resetError: this.resetErrorBoundary
+        });
+      } else {
+        element = fallback;
+      }
+      if (import_react2.default.isValidElement(element)) {
+        return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, showingDialog && /* @__PURE__ */ import_react2.default.createElement(
+          ReportDialog_default,
+          __spreadProps(__spreadValues({}, this.props.dialogOptions), {
+            onCloseHandler: this.hideDialog,
+            onSubmitHandler: this.onReportDialogSubmitHandler
+          })
+        ), element);
+      }
+      if (fallback) {
+        console.warn("fallback did not produce a valid ReactElement");
+      }
+      if (showingDialog && customDialog) {
+        return customDialog;
+      }
+      return showingDialog && /* @__PURE__ */ import_react2.default.createElement(
+        ReportDialog_default,
+        __spreadProps(__spreadValues({}, this.props.dialogOptions), {
+          onCloseHandler: this.hideDialog,
+          onSubmitHandler: this.onReportDialogSubmitHandler
+        })
+      );
+    }
+    if (typeof children === "function") {
+      return children();
+    }
+    return children;
+  }
+};
+function captureReactErrorBoundaryError(error, componentStack) {
+  const errorBoundaryError = new Error(` ${error.message}`);
+  errorBoundaryError.name = `React ErrorBoundary ${error.name}`;
+  errorBoundaryError.stack = error.stack;
+  const componentName = getComponentNameFromStack(componentStack);
+  if (!window.H) {
+    console.warn("You need to install highlight.run as a npm dependency.");
+  } else {
+    window.H.consumeError(
+      errorBoundaryError,
+      `${componentName ? `ErrorBoundary ${componentName}` : "HighlightErrorBoundary"}`
+    );
+  }
+}
+function getComponentNameFromStack(componentStack) {
+  const stack = componentStack.split("\n");
+  if (stack.length < 1) {
+    return void 0;
+  }
+  const leafComponentLine = stack[1].trim();
+  const tokens = leafComponentLine.split(" ");
+  if (tokens.length !== 4) {
+    return void 0;
+  }
+  return `<${tokens[1]}>`;
+}
+
+// src/components/SampleBuggyButton/SampleBuggyButton.tsx
+var import_react3 = __toESM(require("react"));
+var SampleBuggyButton = ({
+  children
+}) => {
+  const [isError, setError] = import_react3.default.useState(false);
+  if (isError) {
+    throw new Error("something bad happened - this is a sample test error");
+  }
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: "buggyButton",
+      onClick: () => setError(true)
+    },
+    children != null ? children : "Throw an Error"
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ErrorBoundary,
+  SampleBuggyButton
+});

package.json

 {
   "name": "@highlight-run/react",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "description": "The official Highlight SDK for React",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
   "license": "MIT",
@@ -12,45 +10,18 @@ "peerDependencies": {
   },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "scripts": {
-    "clean": "rimraf dist",
-    "build:package": "npm run clean && npm run build:types && npm run build:js",
-    "build:js": "rollup -c",
-    "build:types": "tsc --emitDeclarationOnly"
+    "build": "tsup src/index.tsx --format cjs,esm --dts --clean",
+    "dev": "yarn build --watch"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^14.0.1",
     "@types/node": "^18.7.16",
-    "@types/react": "^16.14.31",
-    "@types/react-dom": "^16.9.16",
-    "cross-env": "^7.0.3",
-    "esbuild": "^0.15.7",
-    "postcss": "^8.4.16",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.79.0",
-    "rollup-plugin-esbuild": "^4.10.1",
-    "rollup-plugin-filesize": "^9.1.2",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.8.3",
-    "typescript-plugin-css-modules": "^3.4.0"
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "tsup": "^6.6.3",
+    "typescript": "^4.9.5"
   },
   "files": [
-    "/dist",
+    "dist",
     "package.json"
@@ -60,4 +31,4 @@ ],
     "type": "git",
-    "url": "https://github.com/highlight-run/react"
+    "url": "https://github.com/highlight/highlight"
   }
-}
+}

README.md

@@ -1,46 +0,12 @@
-# Getting Started with Create React App
+## @highlight-run/react
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+The `@highlight-run/react` package hosts the react SDK for highlight.
+This includes the `<ErrorBoundary/>` component which allows capturing and rendering an
+error dialog for React rendering exceptions in your app.
 
-## Available Scripts
+## Development
 
-In the project directory, you can run:
-
-### `yarn start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `yarn test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `yarn build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `yarn eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
+To test changes to the SDK and experiment with the UI, you'll want to run `yarn dev:components`.
+This will run `yarn dev` in the `@highlight-run/react` SDK directory and start the 
+`@highlight-run/component-preview` ladle docs from `packages/component-preview`, which [contain a story](http://localhost:61000/?story=error-boundary--content) for rendering the error boundary
+(with hot reloading for changes).

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

5

decreased by-66.67%

Lines of code

993

increased by297.2%

Number of low quality alerts

1

decreased by-50%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

33744

decreased by-66.32%

Number of package files

6

decreased by-53.85%

Number of lines in readme file

13

decreased by-72.34%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes