@contember/react-devbar 2.1.0-alpha.37 → 2.1.0-alpha.39
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.
- package/dist/development/index.cjs +17 -0
- package/dist/development/index.cjs.map +1 -0
- package/dist/development/index.js +17 -0
- package/dist/development/index.js.map +1 -0
- package/dist/development/src/DevErrorManager.cjs +110 -0
- package/dist/development/src/DevErrorManager.cjs.map +1 -0
- package/dist/development/src/DevErrorManager.js +110 -0
- package/dist/development/src/DevErrorManager.js.map +1 -0
- package/dist/development/src/errorHandling.cjs +55 -0
- package/dist/development/src/errorHandling.cjs.map +1 -0
- package/dist/development/src/errorHandling.js +55 -0
- package/dist/development/src/errorHandling.js.map +1 -0
- package/dist/development/src/hooks/useCopyErrorMarkdown.cjs +101 -0
- package/dist/development/src/hooks/useCopyErrorMarkdown.cjs.map +1 -0
- package/dist/development/src/hooks/useCopyErrorMarkdown.js +101 -0
- package/dist/development/src/hooks/useCopyErrorMarkdown.js.map +1 -0
- package/dist/development/src/hooks/useParsedStacktrace.cjs +67 -0
- package/dist/development/src/hooks/useParsedStacktrace.cjs.map +1 -0
- package/dist/development/src/hooks/useParsedStacktrace.js +45 -0
- package/dist/development/src/hooks/useParsedStacktrace.js.map +1 -0
- package/dist/development/src/ui/DevBar/DevBar.cjs +193 -0
- package/dist/development/src/ui/DevBar/DevBar.cjs.map +1 -0
- package/dist/development/src/ui/DevBar/DevBar.js +193 -0
- package/dist/development/src/ui/DevBar/DevBar.js.map +1 -0
- package/dist/development/src/ui/DevError/DevError.cjs +33 -0
- package/dist/development/src/ui/DevError/DevError.cjs.map +1 -0
- package/dist/development/src/ui/DevError/DevError.js +33 -0
- package/dist/development/src/ui/DevError/DevError.js.map +1 -0
- package/dist/development/src/ui/DevError/DevErrorBadge.cjs +21 -0
- package/dist/development/src/ui/DevError/DevErrorBadge.cjs.map +1 -0
- package/dist/development/src/ui/DevError/DevErrorBadge.js +21 -0
- package/dist/development/src/ui/DevError/DevErrorBadge.js.map +1 -0
- package/dist/development/src/ui/DevError/DevErrorCopy.cjs +36 -0
- package/dist/development/src/ui/DevError/DevErrorCopy.cjs.map +1 -0
- package/dist/development/src/ui/DevError/DevErrorCopy.js +36 -0
- package/dist/development/src/ui/DevError/DevErrorCopy.js.map +1 -0
- package/dist/development/src/ui/DevError/DevErrorInner.cjs +79 -0
- package/dist/development/src/ui/DevError/DevErrorInner.cjs.map +1 -0
- package/dist/development/src/ui/DevError/DevErrorInner.js +79 -0
- package/dist/development/src/ui/DevError/DevErrorInner.js.map +1 -0
- package/dist/development/src/ui/DevError/DevErrorList.cjs +119 -0
- package/dist/development/src/ui/DevError/DevErrorList.cjs.map +1 -0
- package/dist/development/src/ui/DevError/DevErrorList.js +119 -0
- package/dist/development/src/ui/DevError/DevErrorList.js.map +1 -0
- package/dist/development/src/ui/DevError/StackTrace.cjs +82 -0
- package/dist/development/src/ui/DevError/StackTrace.cjs.map +1 -0
- package/dist/development/src/ui/DevError/StackTrace.js +82 -0
- package/dist/development/src/ui/DevError/StackTrace.js.map +1 -0
- package/dist/production/index.cjs +17 -0
- package/dist/production/index.cjs.map +1 -0
- package/dist/production/index.js +17 -0
- package/dist/production/index.js.map +1 -0
- package/dist/production/src/errorHandling.cjs +39 -0
- package/dist/production/src/errorHandling.cjs.map +1 -0
- package/dist/production/src/errorHandling.js +39 -0
- package/dist/production/src/errorHandling.js.map +1 -0
- package/dist/production/src/hooks/useCopyErrorMarkdown.cjs +101 -0
- package/dist/production/src/hooks/useCopyErrorMarkdown.cjs.map +1 -0
- package/dist/production/src/hooks/useCopyErrorMarkdown.js +101 -0
- package/dist/production/src/hooks/useCopyErrorMarkdown.js.map +1 -0
- package/dist/production/src/hooks/useParsedStacktrace.cjs +67 -0
- package/dist/production/src/hooks/useParsedStacktrace.cjs.map +1 -0
- package/dist/production/src/hooks/useParsedStacktrace.js +45 -0
- package/dist/production/src/hooks/useParsedStacktrace.js.map +1 -0
- package/dist/production/src/ui/DevBar/DevBar.cjs +125 -0
- package/dist/production/src/ui/DevBar/DevBar.cjs.map +1 -0
- package/dist/production/src/ui/DevBar/DevBar.js +125 -0
- package/dist/production/src/ui/DevBar/DevBar.js.map +1 -0
- package/dist/production/src/ui/DevError/DevError.cjs +13 -0
- package/dist/production/src/ui/DevError/DevError.cjs.map +1 -0
- package/dist/production/src/ui/DevError/DevError.js +13 -0
- package/dist/production/src/ui/DevError/DevError.js.map +1 -0
- package/dist/production/src/ui/DevError/DevErrorBadge.cjs +13 -0
- package/dist/production/src/ui/DevError/DevErrorBadge.cjs.map +1 -0
- package/dist/production/src/ui/DevError/DevErrorBadge.js +13 -0
- package/dist/production/src/ui/DevError/DevErrorBadge.js.map +1 -0
- package/dist/production/src/ui/DevError/DevErrorCopy.cjs +28 -0
- package/dist/production/src/ui/DevError/DevErrorCopy.cjs.map +1 -0
- package/dist/production/src/ui/DevError/DevErrorCopy.js +28 -0
- package/dist/production/src/ui/DevError/DevErrorCopy.js.map +1 -0
- package/dist/production/src/ui/DevError/DevErrorInner.cjs +23 -0
- package/dist/production/src/ui/DevError/DevErrorInner.cjs.map +1 -0
- package/dist/production/src/ui/DevError/DevErrorInner.js +23 -0
- package/dist/production/src/ui/DevError/DevErrorInner.js.map +1 -0
- package/dist/production/src/ui/DevError/DevErrorList.cjs +51 -0
- package/dist/production/src/ui/DevError/DevErrorList.cjs.map +1 -0
- package/dist/production/src/ui/DevError/DevErrorList.js +51 -0
- package/dist/production/src/ui/DevError/DevErrorList.js.map +1 -0
- package/dist/production/src/ui/DevError/StackTrace.cjs +39 -0
- package/dist/production/src/ui/DevError/StackTrace.cjs.map +1 -0
- package/dist/production/src/ui/DevError/StackTrace.js +39 -0
- package/dist/production/src/ui/DevError/StackTrace.js.map +1 -0
- package/dist/types/DevErrorManager.d.ts +15 -0
- package/dist/types/DevErrorManager.d.ts.map +1 -0
- package/dist/types/errorHandling.d.ts +6 -0
- package/dist/types/errorHandling.d.ts.map +1 -0
- package/dist/types/hooks/useCopyErrorMarkdown.d.ts +12 -0
- package/dist/types/hooks/useCopyErrorMarkdown.d.ts.map +1 -0
- package/dist/types/hooks/useParsedStacktrace.d.ts +10 -0
- package/dist/types/hooks/useParsedStacktrace.d.ts.map +1 -0
- package/dist/types/index.d.ts +5 -0
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/tsconfig.tsbuildinfo +1 -0
- package/dist/types/ui/DevBar/DevBar.d.ts +13 -0
- package/dist/types/ui/DevBar/DevBar.d.ts.map +1 -0
- package/dist/types/ui/DevBar/index.d.ts +2 -0
- package/dist/types/ui/DevBar/index.d.ts.map +1 -0
- package/dist/types/ui/DevError/DevError.d.ts +6 -0
- package/dist/types/ui/DevError/DevError.d.ts.map +1 -0
- package/dist/types/ui/DevError/DevErrorBadge.d.ts +7 -0
- package/dist/types/ui/DevError/DevErrorBadge.d.ts.map +1 -0
- package/dist/types/ui/DevError/DevErrorCopy.d.ts +6 -0
- package/dist/types/ui/DevError/DevErrorCopy.d.ts.map +1 -0
- package/dist/types/ui/DevError/DevErrorInner.d.ts +7 -0
- package/dist/types/ui/DevError/DevErrorInner.d.ts.map +1 -0
- package/dist/types/ui/DevError/DevErrorList.d.ts +13 -0
- package/dist/types/ui/DevError/DevErrorList.d.ts.map +1 -0
- package/dist/types/ui/DevError/StackTrace.d.ts +5 -0
- package/dist/types/ui/DevError/StackTrace.d.ts.map +1 -0
- package/dist/types/ui/DevError/index.d.ts +5 -0
- package/dist/types/ui/DevError/index.d.ts.map +1 -0
- package/dist/types/ui/DevError/types.d.ts +15 -0
- package/dist/types/ui/DevError/types.d.ts.map +1 -0
- package/package.json +10 -10
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { useState, useEffect } from "react";
|
|
2
|
+
const parseStacktrace = async (e) => {
|
|
3
|
+
let StackTracey;
|
|
4
|
+
try {
|
|
5
|
+
StackTracey = (await import("stacktracey")).default;
|
|
6
|
+
} catch {
|
|
7
|
+
return void 0;
|
|
8
|
+
}
|
|
9
|
+
return (await new StackTracey(e).withSourcesAsync()).items.map((it) => ({
|
|
10
|
+
filename: it.fileShort,
|
|
11
|
+
line: it.line,
|
|
12
|
+
callee: it.callee,
|
|
13
|
+
thirdParty: it.thirdParty,
|
|
14
|
+
sourceCodeLines: it.sourceFile?.lines
|
|
15
|
+
}));
|
|
16
|
+
};
|
|
17
|
+
const createInitialError = (e) => ({
|
|
18
|
+
error: e,
|
|
19
|
+
cause: e instanceof Error && "cause" in e && e.cause !== void 0 ? createInitialError(e.cause) : void 0
|
|
20
|
+
});
|
|
21
|
+
const useProcessedError = (e) => {
|
|
22
|
+
const [error, setError] = useState(() => createInitialError(e));
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
setError(createInitialError(e));
|
|
25
|
+
if (!(e instanceof Error)) {
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
const createErrorWithStackTrace = async (e2) => {
|
|
29
|
+
return {
|
|
30
|
+
error: e2,
|
|
31
|
+
parsedStackStrace: e2 instanceof Error ? await parseStacktrace(e2) : void 0,
|
|
32
|
+
cause: e2 instanceof Error && "cause" in e2 && e2.cause !== void 0 ? await createErrorWithStackTrace(e2.cause) : void 0
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
(async () => {
|
|
36
|
+
setError(await createErrorWithStackTrace(e));
|
|
37
|
+
})();
|
|
38
|
+
}, [e]);
|
|
39
|
+
return error;
|
|
40
|
+
};
|
|
41
|
+
export {
|
|
42
|
+
parseStacktrace,
|
|
43
|
+
useProcessedError
|
|
44
|
+
};
|
|
45
|
+
//# sourceMappingURL=useParsedStacktrace.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useParsedStacktrace.js","sources":["../../../../../packages/react-devbar/src/hooks/useParsedStacktrace.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport { ErrorType, ProcessedError } from '../ui/DevError'\n\nexport const parseStacktrace = async (e: Error) => {\n\tlet StackTracey\n\ttry {\n\t\tStackTracey = (await import('stacktracey')).default\n\t} catch {\n\t\treturn undefined\n\t}\n\treturn (await new StackTracey(e).withSourcesAsync()).items.map(it => ({\n\t\tfilename: it.fileShort,\n\t\tline: it.line,\n\t\tcallee: it.callee,\n\t\tthirdParty: it.thirdParty,\n\t\tsourceCodeLines: it.sourceFile?.lines,\n\t}))\n}\n\nconst createInitialError = (e: ErrorType): ProcessedError => ({\n\terror: e,\n\tcause: e instanceof Error && 'cause' in e && (e as any).cause !== undefined ? createInitialError((e as any).cause) : undefined,\n})\n\nexport const useProcessedError = (e: ErrorType): ProcessedError => {\n\tconst [error, setError] = useState<ProcessedError>(() => createInitialError(e))\n\tuseEffect(() => {\n\t\tsetError(createInitialError(e))\n\t\tif (!(e instanceof Error)) {\n\t\t\treturn\n\t\t}\n\t\tconst createErrorWithStackTrace = async (e: ErrorType): Promise<ProcessedError> => {\n\t\t\treturn {\n\t\t\t\terror: e,\n\t\t\t\tparsedStackStrace: e instanceof Error ? await parseStacktrace(e) : undefined,\n\t\t\t\tcause: e instanceof Error && 'cause' in e && (e as any).cause !== undefined ? await createErrorWithStackTrace((e as any).cause) : undefined,\n\t\t\t}\n\t\t}\n\t\t;(async () => {\n\t\t\tsetError(await createErrorWithStackTrace(e))\n\t\t})()\n\t}, [e])\n\n\treturn error\n}\n"],"names":["e"],"mappings":";AAGO,MAAM,kBAAkB,OAAO,MAAa;AAClD,MAAI;AACJ,MAAI;AACH,mBAAe,MAAM,OAAO,aAAa,GAAG;AAAA,EAC7C,QAAQ;AACP,WAAO;AAAA,EACR;AACA,UAAQ,MAAM,IAAI,YAAY,CAAC,EAAE,iBAAA,GAAoB,MAAM,IAAI,CAAA,QAAO;AAAA,IACrE,UAAU,GAAG;AAAA,IACb,MAAM,GAAG;AAAA,IACT,QAAQ,GAAG;AAAA,IACX,YAAY,GAAG;AAAA,IACf,iBAAiB,GAAG,YAAY;AAAA,EAAA,EAC/B;AACH;AAEA,MAAM,qBAAqB,CAAC,OAAkC;AAAA,EAC7D,OAAO;AAAA,EACP,OAAO,aAAa,SAAS,WAAW,KAAM,EAAU,UAAU,SAAY,mBAAoB,EAAU,KAAK,IAAI;AACtH;AAEO,MAAM,oBAAoB,CAAC,MAAiC;AAClE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAyB,MAAM,mBAAmB,CAAC,CAAC;AAC9E,YAAU,MAAM;AACf,aAAS,mBAAmB,CAAC,CAAC;AAC9B,QAAI,EAAE,aAAa,QAAQ;AAC1B;AAAA,IACD;AACA,UAAM,4BAA4B,OAAOA,OAA0C;AAClF,aAAO;AAAA,QACN,OAAOA;AAAAA,QACP,mBAAmBA,cAAa,QAAQ,MAAM,gBAAgBA,EAAC,IAAI;AAAA,QACnE,OAAOA,cAAa,SAAS,WAAWA,MAAMA,GAAU,UAAU,SAAY,MAAM,0BAA2BA,GAAU,KAAK,IAAI;AAAA,MAAA;AAAA,IAEpI;AACC,KAAC,YAAY;AACb,eAAS,MAAM,0BAA0B,CAAC,CAAC;AAAA,IAC5C,GAAA;AAAA,EACD,GAAG,CAAC,CAAC,CAAC;AAEN,SAAO;AACR;"}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const reactUtils = require("@contember/react-utils");
|
|
5
|
+
const utilities = require("@contember/utilities");
|
|
6
|
+
const React = require("react");
|
|
7
|
+
const className = (cls) => cls ? `cui-devBar-${cls}` : "cui-devBar";
|
|
8
|
+
const DevBar = ({
|
|
9
|
+
breakpoint = 768,
|
|
10
|
+
children
|
|
11
|
+
}) => {
|
|
12
|
+
const [expanded, setExpanded] = React.useState(false);
|
|
13
|
+
const isSmallScreen = reactUtils.useWindowSize().width < breakpoint;
|
|
14
|
+
const handleToggle = reactUtils.useReferentiallyStableCallback(() => {
|
|
15
|
+
setExpanded((expanded2) => !expanded2);
|
|
16
|
+
});
|
|
17
|
+
React.useEffect(() => {
|
|
18
|
+
function handleKeyDown(event) {
|
|
19
|
+
if (event.code === "KeyJ" && (event.ctrlKey || event.metaKey)) {
|
|
20
|
+
event.preventDefault();
|
|
21
|
+
event.stopPropagation();
|
|
22
|
+
handleToggle();
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
26
|
+
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
27
|
+
}, [expanded, handleToggle]);
|
|
28
|
+
const devBarContentRef = React.useRef(null);
|
|
29
|
+
reactUtils.useOnElementClickOutsideCallback(devBarContentRef, () => {
|
|
30
|
+
if (expanded) {
|
|
31
|
+
setExpanded(false);
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
const id = `dev-bar-panel${reactUtils.useId()}`;
|
|
35
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
36
|
+
"section",
|
|
37
|
+
{
|
|
38
|
+
"data-transparent": "true",
|
|
39
|
+
"data-overrides-lucide-icons": "true",
|
|
40
|
+
"data-expanded": utilities.dataAttribute(expanded),
|
|
41
|
+
"data-small-screen": utilities.dataAttribute(isSmallScreen),
|
|
42
|
+
className: className(null),
|
|
43
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: devBarContentRef, className: className("content"), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
44
|
+
"div",
|
|
45
|
+
{
|
|
46
|
+
"data-expanded": true,
|
|
47
|
+
id,
|
|
48
|
+
role: "dialog",
|
|
49
|
+
style: { display: "contents" },
|
|
50
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: className("panels"), children })
|
|
51
|
+
}
|
|
52
|
+
) })
|
|
53
|
+
}
|
|
54
|
+
);
|
|
55
|
+
};
|
|
56
|
+
const DevPanel = ({ heading, icon, children, preview }) => {
|
|
57
|
+
const id = `cui-devBar-panel-${reactUtils.useId()}`;
|
|
58
|
+
const dialogRef = React.useRef(null);
|
|
59
|
+
const triggerRef = React.useRef(null);
|
|
60
|
+
const handleOpen = React.useCallback(() => {
|
|
61
|
+
dialogRef.current?.showModal();
|
|
62
|
+
}, []);
|
|
63
|
+
const handleClose = React.useCallback(() => {
|
|
64
|
+
dialogRef.current?.close();
|
|
65
|
+
}, []);
|
|
66
|
+
React.useEffect(() => {
|
|
67
|
+
const dialog = dialogRef.current;
|
|
68
|
+
if (!dialog) return;
|
|
69
|
+
const handleClickOutside = (event) => {
|
|
70
|
+
const rect = dialog.getBoundingClientRect();
|
|
71
|
+
const isInDialog = rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
|
|
72
|
+
if (!isInDialog) {
|
|
73
|
+
dialog.close();
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
dialog.addEventListener("click", handleClickOutside);
|
|
77
|
+
return () => dialog.removeEventListener("click", handleClickOutside);
|
|
78
|
+
}, []);
|
|
79
|
+
React.useEffect(() => {
|
|
80
|
+
const handleEscape = (event) => {
|
|
81
|
+
if (event.key === "Escape") {
|
|
82
|
+
handleClose();
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
document.addEventListener("keydown", handleEscape);
|
|
86
|
+
return () => document.removeEventListener("keydown", handleEscape);
|
|
87
|
+
}, [handleClose]);
|
|
88
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("trigger"), children: [
|
|
89
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
90
|
+
"button",
|
|
91
|
+
{
|
|
92
|
+
type: "button",
|
|
93
|
+
ref: triggerRef,
|
|
94
|
+
tabIndex: 0,
|
|
95
|
+
"aria-haspopup": "dialog",
|
|
96
|
+
"aria-controls": id,
|
|
97
|
+
className: className("trigger-label"),
|
|
98
|
+
onClick: handleOpen,
|
|
99
|
+
children: [
|
|
100
|
+
icon,
|
|
101
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: className("trigger-label-text"), children: preview ?? heading })
|
|
102
|
+
]
|
|
103
|
+
}
|
|
104
|
+
),
|
|
105
|
+
/* @__PURE__ */ jsxRuntime.jsx("dialog", { ref: dialogRef, id, className: className("panel"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("panel-content"), children: [
|
|
106
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("panel-header"), children: [
|
|
107
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "h4", children: heading }),
|
|
108
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
109
|
+
"button",
|
|
110
|
+
{
|
|
111
|
+
type: "button",
|
|
112
|
+
onClick: handleClose,
|
|
113
|
+
className: className("close-button"),
|
|
114
|
+
"aria-label": "Close",
|
|
115
|
+
children: "✕"
|
|
116
|
+
}
|
|
117
|
+
)
|
|
118
|
+
] }),
|
|
119
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: className("panel-body"), children })
|
|
120
|
+
] }) })
|
|
121
|
+
] });
|
|
122
|
+
};
|
|
123
|
+
exports.DevBar = DevBar;
|
|
124
|
+
exports.DevPanel = DevPanel;
|
|
125
|
+
//# sourceMappingURL=DevBar.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DevBar.cjs","sources":["../../../../../../packages/react-devbar/src/ui/DevBar/DevBar.tsx"],"sourcesContent":["import { useId, useOnElementClickOutsideCallback, useReferentiallyStableCallback, useWindowSize } from '@contember/react-utils'\nimport { dataAttribute } from '@contember/utilities'\nimport { type PropsWithChildren, type ReactNode, useCallback, useEffect, useRef, useState } from 'react'\n\nconst className = (cls: string | null) => cls ? `cui-devBar-${cls}` : 'cui-devBar'\n\nexport const DevBar = ({\n\tbreakpoint = 768,\n\tchildren,\n}: PropsWithChildren<{\n\tbreakpoint?: number\n}>) => {\n\tconst [expanded, setExpanded] = useState(false)\n\tconst isSmallScreen = useWindowSize().width < breakpoint\n\n\tconst handleToggle = useReferentiallyStableCallback(() => {\n\t\tsetExpanded(expanded => !expanded)\n\t})\n\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: intentional\n\tuseEffect(() => {\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.code === 'KeyJ' && (event.ctrlKey || event.metaKey)) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\tevent.stopPropagation()\n\n\t\t\t\thandleToggle()\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleKeyDown)\n\t\treturn () => document.removeEventListener('keydown', handleKeyDown)\n\t}, [expanded, handleToggle])\n\n\tconst devBarContentRef = useRef<HTMLDivElement>(null)\n\n\tuseOnElementClickOutsideCallback(devBarContentRef, () => {\n\t\tif (expanded) {\n\t\t\tsetExpanded(false)\n\t\t}\n\t})\n\n\tconst id = `dev-bar-panel${useId()}`\n\n\treturn (\n\t\t<section\n\t\t\tdata-transparent=\"true\"\n\t\t\tdata-overrides-lucide-icons=\"true\"\n\t\t\tdata-expanded={dataAttribute(expanded)}\n\t\t\tdata-small-screen={dataAttribute(isSmallScreen)}\n\t\t\tclassName={className(null)}\n\t\t>\n\t\t\t<div ref={devBarContentRef} className={className('content')}>\n\t\t\t\t<div\n\t\t\t\t\tdata-expanded={true}\n\t\t\t\t\tid={id}\n\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\tstyle={{ display: 'contents' }}\n\t\t\t\t>\n\t\t\t\t\t<div className={className('panels')}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t)\n}\n\ninterface DevPanelProps {\n\ticon: ReactNode\n\theading: ReactNode\n\tchildren: ReactNode\n\tpreview?: ReactNode\n}\n\nexport const DevPanel = ({ heading, icon, children, preview }: DevPanelProps) => {\n\tconst id = `cui-devBar-panel-${useId()}`\n\tconst dialogRef = useRef<HTMLDialogElement>(null)\n\tconst triggerRef = useRef<HTMLButtonElement>(null)\n\n\tconst handleOpen = useCallback(() => {\n\t\tdialogRef.current?.showModal()\n\t}, [])\n\n\tconst handleClose = useCallback(() => {\n\t\tdialogRef.current?.close()\n\t}, [])\n\n\tuseEffect(() => {\n\t\tconst dialog = dialogRef.current\n\t\tif (!dialog) return\n\n\t\tconst handleClickOutside = (event: MouseEvent) => {\n\t\t\tconst rect = dialog.getBoundingClientRect()\n\t\t\tconst isInDialog = rect.top <= event.clientY\n\t\t\t\t&& event.clientY <= rect.top + rect.height\n\t\t\t\t&& rect.left <= event.clientX\n\t\t\t\t&& event.clientX <= rect.left + rect.width\n\n\t\t\tif (!isInDialog) {\n\t\t\t\tdialog.close()\n\t\t\t}\n\t\t}\n\n\t\tdialog.addEventListener('click', handleClickOutside)\n\t\treturn () => dialog.removeEventListener('click', handleClickOutside)\n\t}, [])\n\n\tuseEffect(() => {\n\t\tconst handleEscape = (event: KeyboardEvent) => {\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\thandleClose()\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleEscape)\n\t\treturn () => document.removeEventListener('keydown', handleEscape)\n\t}, [handleClose])\n\n\treturn (\n\t\t<div className={className('trigger')}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tref={triggerRef}\n\t\t\t\ttabIndex={0}\n\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\taria-controls={id}\n\t\t\t\tclassName={className('trigger-label')}\n\t\t\t\tonClick={handleOpen}\n\t\t\t>\n\t\t\t\t{icon}\n\t\t\t\t<span className={className('trigger-label-text')}>\n\t\t\t\t\t{preview ?? heading}\n\t\t\t\t</span>\n\t\t\t</button>\n\n\t\t\t<dialog ref={dialogRef} id={id} className={className('panel')}>\n\t\t\t\t<div className={className('panel-content')}>\n\t\t\t\t\t<div className={className('panel-header')}>\n\t\t\t\t\t\t<h2 className=\"h4\">{heading}</h2>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\t\t\tclassName={className('close-button')}\n\t\t\t\t\t\t\taria-label=\"Close\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t✕\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={className('panel-body')}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</dialog>\n\t\t</div>\n\t)\n}\n"],"names":["useState","useWindowSize","useReferentiallyStableCallback","expanded","useEffect","useRef","useOnElementClickOutsideCallback","useId","jsx","dataAttribute","useCallback","jsxs"],"mappings":"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"}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useWindowSize, useReferentiallyStableCallback, useOnElementClickOutsideCallback, useId } from "@contember/react-utils";
|
|
3
|
+
import { dataAttribute } from "@contember/utilities";
|
|
4
|
+
import { useState, useEffect, useRef, useCallback } from "react";
|
|
5
|
+
const className = (cls) => cls ? `cui-devBar-${cls}` : "cui-devBar";
|
|
6
|
+
const DevBar = ({
|
|
7
|
+
breakpoint = 768,
|
|
8
|
+
children
|
|
9
|
+
}) => {
|
|
10
|
+
const [expanded, setExpanded] = useState(false);
|
|
11
|
+
const isSmallScreen = useWindowSize().width < breakpoint;
|
|
12
|
+
const handleToggle = useReferentiallyStableCallback(() => {
|
|
13
|
+
setExpanded((expanded2) => !expanded2);
|
|
14
|
+
});
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
function handleKeyDown(event) {
|
|
17
|
+
if (event.code === "KeyJ" && (event.ctrlKey || event.metaKey)) {
|
|
18
|
+
event.preventDefault();
|
|
19
|
+
event.stopPropagation();
|
|
20
|
+
handleToggle();
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
24
|
+
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
25
|
+
}, [expanded, handleToggle]);
|
|
26
|
+
const devBarContentRef = useRef(null);
|
|
27
|
+
useOnElementClickOutsideCallback(devBarContentRef, () => {
|
|
28
|
+
if (expanded) {
|
|
29
|
+
setExpanded(false);
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
const id = `dev-bar-panel${useId()}`;
|
|
33
|
+
return /* @__PURE__ */ jsx(
|
|
34
|
+
"section",
|
|
35
|
+
{
|
|
36
|
+
"data-transparent": "true",
|
|
37
|
+
"data-overrides-lucide-icons": "true",
|
|
38
|
+
"data-expanded": dataAttribute(expanded),
|
|
39
|
+
"data-small-screen": dataAttribute(isSmallScreen),
|
|
40
|
+
className: className(null),
|
|
41
|
+
children: /* @__PURE__ */ jsx("div", { ref: devBarContentRef, className: className("content"), children: /* @__PURE__ */ jsx(
|
|
42
|
+
"div",
|
|
43
|
+
{
|
|
44
|
+
"data-expanded": true,
|
|
45
|
+
id,
|
|
46
|
+
role: "dialog",
|
|
47
|
+
style: { display: "contents" },
|
|
48
|
+
children: /* @__PURE__ */ jsx("div", { className: className("panels"), children })
|
|
49
|
+
}
|
|
50
|
+
) })
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
};
|
|
54
|
+
const DevPanel = ({ heading, icon, children, preview }) => {
|
|
55
|
+
const id = `cui-devBar-panel-${useId()}`;
|
|
56
|
+
const dialogRef = useRef(null);
|
|
57
|
+
const triggerRef = useRef(null);
|
|
58
|
+
const handleOpen = useCallback(() => {
|
|
59
|
+
dialogRef.current?.showModal();
|
|
60
|
+
}, []);
|
|
61
|
+
const handleClose = useCallback(() => {
|
|
62
|
+
dialogRef.current?.close();
|
|
63
|
+
}, []);
|
|
64
|
+
useEffect(() => {
|
|
65
|
+
const dialog = dialogRef.current;
|
|
66
|
+
if (!dialog) return;
|
|
67
|
+
const handleClickOutside = (event) => {
|
|
68
|
+
const rect = dialog.getBoundingClientRect();
|
|
69
|
+
const isInDialog = rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
|
|
70
|
+
if (!isInDialog) {
|
|
71
|
+
dialog.close();
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
dialog.addEventListener("click", handleClickOutside);
|
|
75
|
+
return () => dialog.removeEventListener("click", handleClickOutside);
|
|
76
|
+
}, []);
|
|
77
|
+
useEffect(() => {
|
|
78
|
+
const handleEscape = (event) => {
|
|
79
|
+
if (event.key === "Escape") {
|
|
80
|
+
handleClose();
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
document.addEventListener("keydown", handleEscape);
|
|
84
|
+
return () => document.removeEventListener("keydown", handleEscape);
|
|
85
|
+
}, [handleClose]);
|
|
86
|
+
return /* @__PURE__ */ jsxs("div", { className: className("trigger"), children: [
|
|
87
|
+
/* @__PURE__ */ jsxs(
|
|
88
|
+
"button",
|
|
89
|
+
{
|
|
90
|
+
type: "button",
|
|
91
|
+
ref: triggerRef,
|
|
92
|
+
tabIndex: 0,
|
|
93
|
+
"aria-haspopup": "dialog",
|
|
94
|
+
"aria-controls": id,
|
|
95
|
+
className: className("trigger-label"),
|
|
96
|
+
onClick: handleOpen,
|
|
97
|
+
children: [
|
|
98
|
+
icon,
|
|
99
|
+
/* @__PURE__ */ jsx("span", { className: className("trigger-label-text"), children: preview ?? heading })
|
|
100
|
+
]
|
|
101
|
+
}
|
|
102
|
+
),
|
|
103
|
+
/* @__PURE__ */ jsx("dialog", { ref: dialogRef, id, className: className("panel"), children: /* @__PURE__ */ jsxs("div", { className: className("panel-content"), children: [
|
|
104
|
+
/* @__PURE__ */ jsxs("div", { className: className("panel-header"), children: [
|
|
105
|
+
/* @__PURE__ */ jsx("h2", { className: "h4", children: heading }),
|
|
106
|
+
/* @__PURE__ */ jsx(
|
|
107
|
+
"button",
|
|
108
|
+
{
|
|
109
|
+
type: "button",
|
|
110
|
+
onClick: handleClose,
|
|
111
|
+
className: className("close-button"),
|
|
112
|
+
"aria-label": "Close",
|
|
113
|
+
children: "✕"
|
|
114
|
+
}
|
|
115
|
+
)
|
|
116
|
+
] }),
|
|
117
|
+
/* @__PURE__ */ jsx("div", { className: className("panel-body"), children })
|
|
118
|
+
] }) })
|
|
119
|
+
] });
|
|
120
|
+
};
|
|
121
|
+
export {
|
|
122
|
+
DevBar,
|
|
123
|
+
DevPanel
|
|
124
|
+
};
|
|
125
|
+
//# sourceMappingURL=DevBar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DevBar.js","sources":["../../../../../../packages/react-devbar/src/ui/DevBar/DevBar.tsx"],"sourcesContent":["import { useId, useOnElementClickOutsideCallback, useReferentiallyStableCallback, useWindowSize } from '@contember/react-utils'\nimport { dataAttribute } from '@contember/utilities'\nimport { type PropsWithChildren, type ReactNode, useCallback, useEffect, useRef, useState } from 'react'\n\nconst className = (cls: string | null) => cls ? `cui-devBar-${cls}` : 'cui-devBar'\n\nexport const DevBar = ({\n\tbreakpoint = 768,\n\tchildren,\n}: PropsWithChildren<{\n\tbreakpoint?: number\n}>) => {\n\tconst [expanded, setExpanded] = useState(false)\n\tconst isSmallScreen = useWindowSize().width < breakpoint\n\n\tconst handleToggle = useReferentiallyStableCallback(() => {\n\t\tsetExpanded(expanded => !expanded)\n\t})\n\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: intentional\n\tuseEffect(() => {\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.code === 'KeyJ' && (event.ctrlKey || event.metaKey)) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\tevent.stopPropagation()\n\n\t\t\t\thandleToggle()\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleKeyDown)\n\t\treturn () => document.removeEventListener('keydown', handleKeyDown)\n\t}, [expanded, handleToggle])\n\n\tconst devBarContentRef = useRef<HTMLDivElement>(null)\n\n\tuseOnElementClickOutsideCallback(devBarContentRef, () => {\n\t\tif (expanded) {\n\t\t\tsetExpanded(false)\n\t\t}\n\t})\n\n\tconst id = `dev-bar-panel${useId()}`\n\n\treturn (\n\t\t<section\n\t\t\tdata-transparent=\"true\"\n\t\t\tdata-overrides-lucide-icons=\"true\"\n\t\t\tdata-expanded={dataAttribute(expanded)}\n\t\t\tdata-small-screen={dataAttribute(isSmallScreen)}\n\t\t\tclassName={className(null)}\n\t\t>\n\t\t\t<div ref={devBarContentRef} className={className('content')}>\n\t\t\t\t<div\n\t\t\t\t\tdata-expanded={true}\n\t\t\t\t\tid={id}\n\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\tstyle={{ display: 'contents' }}\n\t\t\t\t>\n\t\t\t\t\t<div className={className('panels')}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t)\n}\n\ninterface DevPanelProps {\n\ticon: ReactNode\n\theading: ReactNode\n\tchildren: ReactNode\n\tpreview?: ReactNode\n}\n\nexport const DevPanel = ({ heading, icon, children, preview }: DevPanelProps) => {\n\tconst id = `cui-devBar-panel-${useId()}`\n\tconst dialogRef = useRef<HTMLDialogElement>(null)\n\tconst triggerRef = useRef<HTMLButtonElement>(null)\n\n\tconst handleOpen = useCallback(() => {\n\t\tdialogRef.current?.showModal()\n\t}, [])\n\n\tconst handleClose = useCallback(() => {\n\t\tdialogRef.current?.close()\n\t}, [])\n\n\tuseEffect(() => {\n\t\tconst dialog = dialogRef.current\n\t\tif (!dialog) return\n\n\t\tconst handleClickOutside = (event: MouseEvent) => {\n\t\t\tconst rect = dialog.getBoundingClientRect()\n\t\t\tconst isInDialog = rect.top <= event.clientY\n\t\t\t\t&& event.clientY <= rect.top + rect.height\n\t\t\t\t&& rect.left <= event.clientX\n\t\t\t\t&& event.clientX <= rect.left + rect.width\n\n\t\t\tif (!isInDialog) {\n\t\t\t\tdialog.close()\n\t\t\t}\n\t\t}\n\n\t\tdialog.addEventListener('click', handleClickOutside)\n\t\treturn () => dialog.removeEventListener('click', handleClickOutside)\n\t}, [])\n\n\tuseEffect(() => {\n\t\tconst handleEscape = (event: KeyboardEvent) => {\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\thandleClose()\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleEscape)\n\t\treturn () => document.removeEventListener('keydown', handleEscape)\n\t}, [handleClose])\n\n\treturn (\n\t\t<div className={className('trigger')}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tref={triggerRef}\n\t\t\t\ttabIndex={0}\n\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\taria-controls={id}\n\t\t\t\tclassName={className('trigger-label')}\n\t\t\t\tonClick={handleOpen}\n\t\t\t>\n\t\t\t\t{icon}\n\t\t\t\t<span className={className('trigger-label-text')}>\n\t\t\t\t\t{preview ?? heading}\n\t\t\t\t</span>\n\t\t\t</button>\n\n\t\t\t<dialog ref={dialogRef} id={id} className={className('panel')}>\n\t\t\t\t<div className={className('panel-content')}>\n\t\t\t\t\t<div className={className('panel-header')}>\n\t\t\t\t\t\t<h2 className=\"h4\">{heading}</h2>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\t\t\tclassName={className('close-button')}\n\t\t\t\t\t\t\taria-label=\"Close\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t✕\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={className('panel-body')}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</dialog>\n\t\t</div>\n\t)\n}\n"],"names":["expanded"],"mappings":"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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const DevErrorInner = require("./DevErrorInner.cjs");
|
|
5
|
+
const className = (cls) => cls ? `cui-devError-${cls}` : "cui-devError";
|
|
6
|
+
function DevError(props) {
|
|
7
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: className(), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("in"), children: [
|
|
8
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: className("bar"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: className("errorSource"), children: props.source }) }),
|
|
9
|
+
/* @__PURE__ */ jsxRuntime.jsx(DevErrorInner.DevErrorInner, { error: props.error })
|
|
10
|
+
] }) });
|
|
11
|
+
}
|
|
12
|
+
exports.DevError = DevError;
|
|
13
|
+
//# sourceMappingURL=DevError.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DevError.cjs","sources":["../../../../../../packages/react-devbar/src/ui/DevError/DevError.tsx"],"sourcesContent":["import { DevErrorInner, DevErrorInnerProps } from './DevErrorInner'\n\nexport interface DevErrorProps extends DevErrorInnerProps {\n\tsource: string\n}\n\nconst className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'\n\nexport function DevError(props: DevErrorProps) {\n\treturn (\n\t\t<div className={className()}>\n\t\t\t<div className={className('in')}>\n\t\t\t\t<div className={className('bar')}>\n\t\t\t\t\t<div className={className('errorSource')}>{props.source}</div>\n\t\t\t\t</div>\n\t\t\t\t<DevErrorInner error={props.error} />\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],"names":["jsx","DevErrorInner"],"mappings":";;;;AAMA,MAAM,YAAY,CAAC,QAAwB,MAAM,gBAAgB,GAAG,KAAK;AAElE,SAAS,SAAS,OAAsB;AAC9C,SACCA,2BAAAA,IAAC,OAAA,EAAI,WAAW,UAAA,GACf,0CAAC,OAAA,EAAI,WAAW,UAAU,IAAI,GAC7B,UAAA;AAAA,IAAAA,2BAAAA,IAAC,OAAA,EAAI,WAAW,UAAU,KAAK,GAC9B,UAAAA,+BAAC,OAAA,EAAI,WAAW,UAAU,aAAa,GAAI,UAAA,MAAM,QAAO,GACzD;AAAA,IACAA,2BAAAA,IAACC,cAAAA,eAAA,EAAc,OAAO,MAAM,MAAA,CAAO;AAAA,EAAA,EAAA,CACpC,EAAA,CACD;AAEF;;"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { DevErrorInner } from "./DevErrorInner.js";
|
|
3
|
+
const className = (cls) => cls ? `cui-devError-${cls}` : "cui-devError";
|
|
4
|
+
function DevError(props) {
|
|
5
|
+
return /* @__PURE__ */ jsx("div", { className: className(), children: /* @__PURE__ */ jsxs("div", { className: className("in"), children: [
|
|
6
|
+
/* @__PURE__ */ jsx("div", { className: className("bar"), children: /* @__PURE__ */ jsx("div", { className: className("errorSource"), children: props.source }) }),
|
|
7
|
+
/* @__PURE__ */ jsx(DevErrorInner, { error: props.error })
|
|
8
|
+
] }) });
|
|
9
|
+
}
|
|
10
|
+
export {
|
|
11
|
+
DevError
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=DevError.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DevError.js","sources":["../../../../../../packages/react-devbar/src/ui/DevError/DevError.tsx"],"sourcesContent":["import { DevErrorInner, DevErrorInnerProps } from './DevErrorInner'\n\nexport interface DevErrorProps extends DevErrorInnerProps {\n\tsource: string\n}\n\nconst className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'\n\nexport function DevError(props: DevErrorProps) {\n\treturn (\n\t\t<div className={className()}>\n\t\t\t<div className={className('in')}>\n\t\t\t\t<div className={className('bar')}>\n\t\t\t\t\t<div className={className('errorSource')}>{props.source}</div>\n\t\t\t\t</div>\n\t\t\t\t<DevErrorInner error={props.error} />\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],"names":[],"mappings":";;AAMA,MAAM,YAAY,CAAC,QAAwB,MAAM,gBAAgB,GAAG,KAAK;AAElE,SAAS,SAAS,OAAsB;AAC9C,SACC,oBAAC,OAAA,EAAI,WAAW,UAAA,GACf,+BAAC,OAAA,EAAI,WAAW,UAAU,IAAI,GAC7B,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAW,UAAU,KAAK,GAC9B,UAAA,oBAAC,OAAA,EAAI,WAAW,UAAU,aAAa,GAAI,UAAA,MAAM,QAAO,GACzD;AAAA,IACA,oBAAC,eAAA,EAAc,OAAO,MAAM,MAAA,CAAO;AAAA,EAAA,EAAA,CACpC,EAAA,CACD;AAEF;"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const className = (cls) => cls ? `cui-devErrorBadge-${cls}` : "cui-devErrorBadge";
|
|
5
|
+
function DevErrorBadge({ errorCount, onOpen, onClear }) {
|
|
6
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: className(), children: /* @__PURE__ */ jsxRuntime.jsxs("a", { className: className("button"), onClick: onOpen, children: [
|
|
7
|
+
errorCount,
|
|
8
|
+
" ",
|
|
9
|
+
errorCount > 1 ? "errors" : "error"
|
|
10
|
+
] }) });
|
|
11
|
+
}
|
|
12
|
+
exports.DevErrorBadge = DevErrorBadge;
|
|
13
|
+
//# sourceMappingURL=DevErrorBadge.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DevErrorBadge.cjs","sources":["../../../../../../packages/react-devbar/src/ui/DevError/DevErrorBadge.tsx"],"sourcesContent":["export interface DevErrorBadgeProps {\n\tonOpen: () => void\n\tonClear: () => void\n\terrorCount: number\n}\n\nconst className = (cls?: string | null) => cls ? `cui-devErrorBadge-${cls}` : 'cui-devErrorBadge'\n\nexport function DevErrorBadge({ errorCount, onOpen, onClear }: DevErrorBadgeProps) {\n\treturn (\n\t\t<div className={className()}>\n\t\t\t<a className={className('button')} onClick={onOpen}>\n\t\t\t\t{errorCount} {errorCount > 1 ? 'errors' : 'error'}\n\t\t\t</a>\n\t\t</div>\n\t)\n}\n"],"names":["jsx","jsxs"],"mappings":";;;AAMA,MAAM,YAAY,CAAC,QAAwB,MAAM,qBAAqB,GAAG,KAAK;AAEvE,SAAS,cAAc,EAAE,YAAY,QAAQ,WAA+B;AAClF,SACCA,2BAAAA,IAAC,OAAA,EAAI,WAAW,UAAA,GACf,UAAAC,2BAAAA,KAAC,KAAA,EAAE,WAAW,UAAU,QAAQ,GAAG,SAAS,QAC1C,UAAA;AAAA,IAAA;AAAA,IAAW;AAAA,IAAE,aAAa,IAAI,WAAW;AAAA,EAAA,EAAA,CAC3C,EAAA,CACD;AAEF;;"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
const className = (cls) => cls ? `cui-devErrorBadge-${cls}` : "cui-devErrorBadge";
|
|
3
|
+
function DevErrorBadge({ errorCount, onOpen, onClear }) {
|
|
4
|
+
return /* @__PURE__ */ jsx("div", { className: className(), children: /* @__PURE__ */ jsxs("a", { className: className("button"), onClick: onOpen, children: [
|
|
5
|
+
errorCount,
|
|
6
|
+
" ",
|
|
7
|
+
errorCount > 1 ? "errors" : "error"
|
|
8
|
+
] }) });
|
|
9
|
+
}
|
|
10
|
+
export {
|
|
11
|
+
DevErrorBadge
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=DevErrorBadge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DevErrorBadge.js","sources":["../../../../../../packages/react-devbar/src/ui/DevError/DevErrorBadge.tsx"],"sourcesContent":["export interface DevErrorBadgeProps {\n\tonOpen: () => void\n\tonClear: () => void\n\terrorCount: number\n}\n\nconst className = (cls?: string | null) => cls ? `cui-devErrorBadge-${cls}` : 'cui-devErrorBadge'\n\nexport function DevErrorBadge({ errorCount, onOpen, onClear }: DevErrorBadgeProps) {\n\treturn (\n\t\t<div className={className()}>\n\t\t\t<a className={className('button')} onClick={onOpen}>\n\t\t\t\t{errorCount} {errorCount > 1 ? 'errors' : 'error'}\n\t\t\t</a>\n\t\t</div>\n\t)\n}\n"],"names":[],"mappings":";AAMA,MAAM,YAAY,CAAC,QAAwB,MAAM,qBAAqB,GAAG,KAAK;AAEvE,SAAS,cAAc,EAAE,YAAY,QAAQ,WAA+B;AAClF,SACC,oBAAC,OAAA,EAAI,WAAW,UAAA,GACf,UAAA,qBAAC,KAAA,EAAE,WAAW,UAAU,QAAQ,GAAG,SAAS,QAC1C,UAAA;AAAA,IAAA;AAAA,IAAW;AAAA,IAAE,aAAa,IAAI,WAAW;AAAA,EAAA,EAAA,CAC3C,EAAA,CACD;AAEF;"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const useCopyErrorMarkdown = require("../../hooks/useCopyErrorMarkdown.cjs");
|
|
5
|
+
const DevErrorCopy = ({ currentError, currentErrorSource }) => {
|
|
6
|
+
const { copyStatus, handleCopyMarkdown, isClipboardSupported } = useCopyErrorMarkdown.useCopyErrorMarkdown({ currentError, currentErrorSource });
|
|
7
|
+
if (!isClipboardSupported) {
|
|
8
|
+
return null;
|
|
9
|
+
}
|
|
10
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
11
|
+
"button",
|
|
12
|
+
{
|
|
13
|
+
type: "button",
|
|
14
|
+
className: "cui-devError-copyButton",
|
|
15
|
+
onClick: handleCopyMarkdown,
|
|
16
|
+
disabled: copyStatus === "copying",
|
|
17
|
+
title: "Copy current error as Markdown",
|
|
18
|
+
children: {
|
|
19
|
+
success: "Copied!",
|
|
20
|
+
copying: "Copying...",
|
|
21
|
+
error: "❌ Copy Failed",
|
|
22
|
+
idle: "Copy as Markdown"
|
|
23
|
+
}[copyStatus]
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
};
|
|
27
|
+
exports.DevErrorCopy = DevErrorCopy;
|
|
28
|
+
//# sourceMappingURL=DevErrorCopy.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DevErrorCopy.cjs","sources":["../../../../../../packages/react-devbar/src/ui/DevError/DevErrorCopy.tsx"],"sourcesContent":["import { useCopyErrorMarkdown } from '../../hooks/useCopyErrorMarkdown'\nimport { ProcessedError } from './types'\n\nexport const DevErrorCopy = ({ currentError, currentErrorSource }: {\n\tcurrentError: ProcessedError\n\tcurrentErrorSource: string\n}) => {\n\tconst { copyStatus, handleCopyMarkdown, isClipboardSupported } = useCopyErrorMarkdown({ currentError, currentErrorSource })\n\n\tif (!isClipboardSupported) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName=\"cui-devError-copyButton\"\n\t\t\tonClick={handleCopyMarkdown}\n\t\t\tdisabled={copyStatus === 'copying'}\n\t\t\ttitle=\"Copy current error as Markdown\"\n\t\t>\n\t\t\t{{\n\t\t\t\tsuccess: 'Copied!',\n\t\t\t\tcopying: 'Copying...',\n\t\t\t\terror: '❌ Copy Failed',\n\t\t\t\tidle: 'Copy as Markdown',\n\t\t\t}[copyStatus]}\n\t\t</button>\n\t)\n}\n"],"names":["useCopyErrorMarkdown","jsx"],"mappings":";;;;AAGO,MAAM,eAAe,CAAC,EAAE,cAAc,yBAGvC;AACL,QAAM,EAAE,YAAY,oBAAoB,qBAAA,IAAyBA,qBAAAA,qBAAqB,EAAE,cAAc,oBAAoB;AAE1H,MAAI,CAAC,sBAAsB;AAC1B,WAAO;AAAA,EACR;AAEA,SACCC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACA,MAAK;AAAA,MACL,WAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU,eAAe;AAAA,MACzB,OAAM;AAAA,MAEL,UAAA;AAAA,QACA,SAAS;AAAA,QACT,SAAS;AAAA,QACT,OAAO;AAAA,QACP,MAAM;AAAA,MAAA,EACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAGf;;"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useCopyErrorMarkdown } from "../../hooks/useCopyErrorMarkdown.js";
|
|
3
|
+
const DevErrorCopy = ({ currentError, currentErrorSource }) => {
|
|
4
|
+
const { copyStatus, handleCopyMarkdown, isClipboardSupported } = useCopyErrorMarkdown({ currentError, currentErrorSource });
|
|
5
|
+
if (!isClipboardSupported) {
|
|
6
|
+
return null;
|
|
7
|
+
}
|
|
8
|
+
return /* @__PURE__ */ jsx(
|
|
9
|
+
"button",
|
|
10
|
+
{
|
|
11
|
+
type: "button",
|
|
12
|
+
className: "cui-devError-copyButton",
|
|
13
|
+
onClick: handleCopyMarkdown,
|
|
14
|
+
disabled: copyStatus === "copying",
|
|
15
|
+
title: "Copy current error as Markdown",
|
|
16
|
+
children: {
|
|
17
|
+
success: "Copied!",
|
|
18
|
+
copying: "Copying...",
|
|
19
|
+
error: "❌ Copy Failed",
|
|
20
|
+
idle: "Copy as Markdown"
|
|
21
|
+
}[copyStatus]
|
|
22
|
+
}
|
|
23
|
+
);
|
|
24
|
+
};
|
|
25
|
+
export {
|
|
26
|
+
DevErrorCopy
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=DevErrorCopy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DevErrorCopy.js","sources":["../../../../../../packages/react-devbar/src/ui/DevError/DevErrorCopy.tsx"],"sourcesContent":["import { useCopyErrorMarkdown } from '../../hooks/useCopyErrorMarkdown'\nimport { ProcessedError } from './types'\n\nexport const DevErrorCopy = ({ currentError, currentErrorSource }: {\n\tcurrentError: ProcessedError\n\tcurrentErrorSource: string\n}) => {\n\tconst { copyStatus, handleCopyMarkdown, isClipboardSupported } = useCopyErrorMarkdown({ currentError, currentErrorSource })\n\n\tif (!isClipboardSupported) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName=\"cui-devError-copyButton\"\n\t\t\tonClick={handleCopyMarkdown}\n\t\t\tdisabled={copyStatus === 'copying'}\n\t\t\ttitle=\"Copy current error as Markdown\"\n\t\t>\n\t\t\t{{\n\t\t\t\tsuccess: 'Copied!',\n\t\t\t\tcopying: 'Copying...',\n\t\t\t\terror: '❌ Copy Failed',\n\t\t\t\tidle: 'Copy as Markdown',\n\t\t\t}[copyStatus]}\n\t\t</button>\n\t)\n}\n"],"names":[],"mappings":";;AAGO,MAAM,eAAe,CAAC,EAAE,cAAc,yBAGvC;AACL,QAAM,EAAE,YAAY,oBAAoB,qBAAA,IAAyB,qBAAqB,EAAE,cAAc,oBAAoB;AAE1H,MAAI,CAAC,sBAAsB;AAC1B,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,MAAK;AAAA,MACL,WAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU,eAAe;AAAA,MACzB,OAAM;AAAA,MAEL,UAAA;AAAA,QACA,SAAS;AAAA,QACT,SAAS;AAAA,QACT,OAAO;AAAA,QACP,MAAM;AAAA,MAAA,EACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAGf;"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const StackTrace = require("./StackTrace.cjs");
|
|
5
|
+
const className = (cls) => cls ? `cui-devError-${cls}` : "cui-devError";
|
|
6
|
+
function DevErrorInner({ error, level = 1 }) {
|
|
7
|
+
let errorObject = error.error instanceof Error ? error.error : void 0;
|
|
8
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
9
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: className("header"), children: errorObject ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
10
|
+
/* @__PURE__ */ jsxRuntime.jsx("h1", { className: className("errorName"), children: errorObject.name }),
|
|
11
|
+
error.cause && /* @__PURE__ */ jsxRuntime.jsx("a", { href: `#error-${level}`, className: className("causeLink"), children: "caused by >" }),
|
|
12
|
+
errorObject.message && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: className("errorMessage"), children: errorObject.message }),
|
|
13
|
+
"details" in errorObject && /* @__PURE__ */ jsxRuntime.jsx("div", { className: className("errorDetails"), children: errorObject.details })
|
|
14
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: className("errorName"), children: "Unknown error" }) }),
|
|
15
|
+
error.parsedStackStrace ? /* @__PURE__ */ jsxRuntime.jsx(StackTrace.StackTrace, { stackTrace: error.parsedStackStrace }) : errorObject?.stack ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: className("stack"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: className("stack-dump"), children: errorObject.stack }) }) : null,
|
|
16
|
+
error.cause ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
17
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: className("causedBy"), id: `error-${level}`, children: "Caused by" }),
|
|
18
|
+
/* @__PURE__ */ jsxRuntime.jsx(DevErrorInner, { error: error.cause, level: level + 1 })
|
|
19
|
+
] }) : null
|
|
20
|
+
] });
|
|
21
|
+
}
|
|
22
|
+
exports.DevErrorInner = DevErrorInner;
|
|
23
|
+
//# sourceMappingURL=DevErrorInner.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DevErrorInner.cjs","sources":["../../../../../../packages/react-devbar/src/ui/DevError/DevErrorInner.tsx"],"sourcesContent":["import { StackTrace } from './StackTrace'\nimport type { ProcessedError } from './types'\n\nexport interface DevErrorInnerProps {\n\terror: ProcessedError\n\tlevel?: number\n}\n\nconst className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'\n\nexport function DevErrorInner({ error, level = 1 }: DevErrorInnerProps) {\n\tlet errorObject: Error | undefined = error.error instanceof Error ? error.error : undefined\n\n\treturn (\n\t\t<>\n\t\t\t<div className={className('header')}>\n\t\t\t\t{errorObject\n\t\t\t\t\t? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<h1 className={className('errorName')}>{errorObject.name}</h1>\n\t\t\t\t\t\t\t{error.cause && <a href={`#error-${level}`} className={className('causeLink')}>caused by ></a>}\n\t\t\t\t\t\t\t{errorObject.message && <h2 className={className('errorMessage')}>{errorObject.message}</h2>}\n\t\t\t\t\t\t\t{'details' in errorObject && <div className={className('errorDetails')}>{(errorObject as any).details}</div>}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)\n\t\t\t\t\t: <h1 className={className('errorName')}>Unknown error</h1>}\n\t\t\t</div>\n\t\t\t{error.parsedStackStrace ? <StackTrace stackTrace={error.parsedStackStrace} /> : errorObject?.stack\n\t\t\t\t? (\n\t\t\t\t\t<div className={className('stack')}>\n\t\t\t\t\t\t<div className={className('stack-dump')}>{errorObject.stack}</div>\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t\t: null}\n\t\t\t{error.cause\n\t\t\t\t? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div className={className('causedBy')} id={`error-${level}`}>\n\t\t\t\t\t\t\tCaused by\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<DevErrorInner error={error.cause} level={level + 1} />\n\t\t\t\t\t</>\n\t\t\t\t)\n\t\t\t\t: null}\n\t\t</>\n\t)\n}\n"],"names":["jsxs","Fragment","jsx","StackTrace"],"mappings":";;;;AAQA,MAAM,YAAY,CAAC,QAAwB,MAAM,gBAAgB,GAAG,KAAK;AAElE,SAAS,cAAc,EAAE,OAAO,QAAQ,KAAyB;AACvE,MAAI,cAAiC,MAAM,iBAAiB,QAAQ,MAAM,QAAQ;AAElF,SACCA,2BAAAA,KAAAC,qBAAA,EACC,UAAA;AAAA,IAAAC,2BAAAA,IAAC,SAAI,WAAW,UAAU,QAAQ,GAChC,wBAECF,2BAAAA,KAAAC,WAAAA,UAAA,EACC,UAAA;AAAA,MAAAC,+BAAC,QAAG,WAAW,UAAU,WAAW,GAAI,sBAAY,MAAK;AAAA,MACxD,MAAM,SAASA,2BAAAA,IAAC,KAAA,EAAE,MAAM,UAAU,KAAK,IAAI,WAAW,UAAU,WAAW,GAAG,UAAA,eAAc;AAAA,MAC5F,YAAY,WAAWA,+BAAC,MAAA,EAAG,WAAW,UAAU,cAAc,GAAI,UAAA,YAAY,QAAA,CAAQ;AAAA,MACtF,aAAa,eAAeA,+BAAC,OAAA,EAAI,WAAW,UAAU,cAAc,GAAK,UAAA,YAAoB,QAAA,CAAQ;AAAA,IAAA,EAAA,CACvG,mCAEE,MAAA,EAAG,WAAW,UAAU,WAAW,GAAG,2BAAa,EAAA,CACxD;AAAA,IACC,MAAM,oBAAoBA,2BAAAA,IAACC,WAAAA,YAAA,EAAW,YAAY,MAAM,kBAAA,CAAmB,IAAK,aAAa,QAE5FD,2BAAAA,IAAC,OAAA,EAAI,WAAW,UAAU,OAAO,GAChC,UAAAA,2BAAAA,IAAC,OAAA,EAAI,WAAW,UAAU,YAAY,GAAI,UAAA,YAAY,MAAA,CAAM,EAAA,CAC7D,IAEC;AAAA,IACF,MAAM,QAELF,2BAAAA,KAAAC,WAAAA,UAAA,EACC,UAAA;AAAA,MAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAW,UAAU,UAAU,GAAG,IAAI,SAAS,KAAK,IAAI,UAAA,YAAA,CAE7D;AAAA,qCACC,eAAA,EAAc,OAAO,MAAM,OAAO,OAAO,QAAQ,EAAA,CAAG;AAAA,IAAA,EAAA,CACtD,IAEC;AAAA,EAAA,GACJ;AAEF;;"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { StackTrace } from "./StackTrace.js";
|
|
3
|
+
const className = (cls) => cls ? `cui-devError-${cls}` : "cui-devError";
|
|
4
|
+
function DevErrorInner({ error, level = 1 }) {
|
|
5
|
+
let errorObject = error.error instanceof Error ? error.error : void 0;
|
|
6
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
7
|
+
/* @__PURE__ */ jsx("div", { className: className("header"), children: errorObject ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
8
|
+
/* @__PURE__ */ jsx("h1", { className: className("errorName"), children: errorObject.name }),
|
|
9
|
+
error.cause && /* @__PURE__ */ jsx("a", { href: `#error-${level}`, className: className("causeLink"), children: "caused by >" }),
|
|
10
|
+
errorObject.message && /* @__PURE__ */ jsx("h2", { className: className("errorMessage"), children: errorObject.message }),
|
|
11
|
+
"details" in errorObject && /* @__PURE__ */ jsx("div", { className: className("errorDetails"), children: errorObject.details })
|
|
12
|
+
] }) : /* @__PURE__ */ jsx("h1", { className: className("errorName"), children: "Unknown error" }) }),
|
|
13
|
+
error.parsedStackStrace ? /* @__PURE__ */ jsx(StackTrace, { stackTrace: error.parsedStackStrace }) : errorObject?.stack ? /* @__PURE__ */ jsx("div", { className: className("stack"), children: /* @__PURE__ */ jsx("div", { className: className("stack-dump"), children: errorObject.stack }) }) : null,
|
|
14
|
+
error.cause ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
15
|
+
/* @__PURE__ */ jsx("div", { className: className("causedBy"), id: `error-${level}`, children: "Caused by" }),
|
|
16
|
+
/* @__PURE__ */ jsx(DevErrorInner, { error: error.cause, level: level + 1 })
|
|
17
|
+
] }) : null
|
|
18
|
+
] });
|
|
19
|
+
}
|
|
20
|
+
export {
|
|
21
|
+
DevErrorInner
|
|
22
|
+
};
|
|
23
|
+
//# sourceMappingURL=DevErrorInner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DevErrorInner.js","sources":["../../../../../../packages/react-devbar/src/ui/DevError/DevErrorInner.tsx"],"sourcesContent":["import { StackTrace } from './StackTrace'\nimport type { ProcessedError } from './types'\n\nexport interface DevErrorInnerProps {\n\terror: ProcessedError\n\tlevel?: number\n}\n\nconst className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'\n\nexport function DevErrorInner({ error, level = 1 }: DevErrorInnerProps) {\n\tlet errorObject: Error | undefined = error.error instanceof Error ? error.error : undefined\n\n\treturn (\n\t\t<>\n\t\t\t<div className={className('header')}>\n\t\t\t\t{errorObject\n\t\t\t\t\t? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<h1 className={className('errorName')}>{errorObject.name}</h1>\n\t\t\t\t\t\t\t{error.cause && <a href={`#error-${level}`} className={className('causeLink')}>caused by ></a>}\n\t\t\t\t\t\t\t{errorObject.message && <h2 className={className('errorMessage')}>{errorObject.message}</h2>}\n\t\t\t\t\t\t\t{'details' in errorObject && <div className={className('errorDetails')}>{(errorObject as any).details}</div>}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)\n\t\t\t\t\t: <h1 className={className('errorName')}>Unknown error</h1>}\n\t\t\t</div>\n\t\t\t{error.parsedStackStrace ? <StackTrace stackTrace={error.parsedStackStrace} /> : errorObject?.stack\n\t\t\t\t? (\n\t\t\t\t\t<div className={className('stack')}>\n\t\t\t\t\t\t<div className={className('stack-dump')}>{errorObject.stack}</div>\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t\t: null}\n\t\t\t{error.cause\n\t\t\t\t? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div className={className('causedBy')} id={`error-${level}`}>\n\t\t\t\t\t\t\tCaused by\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<DevErrorInner error={error.cause} level={level + 1} />\n\t\t\t\t\t</>\n\t\t\t\t)\n\t\t\t\t: null}\n\t\t</>\n\t)\n}\n"],"names":[],"mappings":";;AAQA,MAAM,YAAY,CAAC,QAAwB,MAAM,gBAAgB,GAAG,KAAK;AAElE,SAAS,cAAc,EAAE,OAAO,QAAQ,KAAyB;AACvE,MAAI,cAAiC,MAAM,iBAAiB,QAAQ,MAAM,QAAQ;AAElF,SACC,qBAAA,UAAA,EACC,UAAA;AAAA,IAAA,oBAAC,SAAI,WAAW,UAAU,QAAQ,GAChC,wBAEC,qBAAA,UAAA,EACC,UAAA;AAAA,MAAA,oBAAC,QAAG,WAAW,UAAU,WAAW,GAAI,sBAAY,MAAK;AAAA,MACxD,MAAM,SAAS,oBAAC,KAAA,EAAE,MAAM,UAAU,KAAK,IAAI,WAAW,UAAU,WAAW,GAAG,UAAA,eAAc;AAAA,MAC5F,YAAY,WAAW,oBAAC,MAAA,EAAG,WAAW,UAAU,cAAc,GAAI,UAAA,YAAY,QAAA,CAAQ;AAAA,MACtF,aAAa,eAAe,oBAAC,OAAA,EAAI,WAAW,UAAU,cAAc,GAAK,UAAA,YAAoB,QAAA,CAAQ;AAAA,IAAA,EAAA,CACvG,wBAEE,MAAA,EAAG,WAAW,UAAU,WAAW,GAAG,2BAAa,EAAA,CACxD;AAAA,IACC,MAAM,oBAAoB,oBAAC,YAAA,EAAW,YAAY,MAAM,kBAAA,CAAmB,IAAK,aAAa,QAE5F,oBAAC,OAAA,EAAI,WAAW,UAAU,OAAO,GAChC,UAAA,oBAAC,OAAA,EAAI,WAAW,UAAU,YAAY,GAAI,UAAA,YAAY,MAAA,CAAM,EAAA,CAC7D,IAEC;AAAA,IACF,MAAM,QAEL,qBAAA,UAAA,EACC,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAW,UAAU,UAAU,GAAG,IAAI,SAAS,KAAK,IAAI,UAAA,YAAA,CAE7D;AAAA,0BACC,eAAA,EAAc,OAAO,MAAM,OAAO,OAAO,QAAQ,EAAA,CAAG;AAAA,IAAA,EAAA,CACtD,IAEC;AAAA,EAAA,GACJ;AAEF;"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const React = require("react");
|
|
5
|
+
const DevErrorInner = require("./DevErrorInner.cjs");
|
|
6
|
+
const DevErrorCopy = require("./DevErrorCopy.cjs");
|
|
7
|
+
const className = (cls) => cls ? `cui-devError-${cls}` : "cui-devError";
|
|
8
|
+
function DevErrorList({
|
|
9
|
+
currentError,
|
|
10
|
+
currentErrorIndex,
|
|
11
|
+
currentErrorSource,
|
|
12
|
+
errorCount,
|
|
13
|
+
onClose,
|
|
14
|
+
onNext,
|
|
15
|
+
onPrevious,
|
|
16
|
+
onClear
|
|
17
|
+
}) {
|
|
18
|
+
React.useEffect(() => {
|
|
19
|
+
document.body.classList.add("cui-devError-body");
|
|
20
|
+
return () => {
|
|
21
|
+
document.body.classList.remove("cui-devError-body");
|
|
22
|
+
};
|
|
23
|
+
}, []);
|
|
24
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: className(), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("in"), children: [
|
|
25
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("bar"), children: [
|
|
26
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("errorSource"), children: [
|
|
27
|
+
currentErrorSource,
|
|
28
|
+
/* @__PURE__ */ jsxRuntime.jsx(DevErrorCopy.DevErrorCopy, { currentError, currentErrorSource })
|
|
29
|
+
] }),
|
|
30
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("actions"), children: [
|
|
31
|
+
errorCount > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("switcher"), children: [
|
|
32
|
+
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: className("errorCount"), children: [
|
|
33
|
+
"Error ",
|
|
34
|
+
currentErrorIndex + 1,
|
|
35
|
+
" of ",
|
|
36
|
+
errorCount
|
|
37
|
+
] }),
|
|
38
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: className("switcherButtons"), children: [
|
|
39
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: className("switcherButton"), onClick: onPrevious, children: "←" }),
|
|
40
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: className("switcherButton"), onClick: onNext, children: "→" })
|
|
41
|
+
] })
|
|
42
|
+
] }) : null,
|
|
43
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: className("close"), children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: className("closeButton"), onClick: onClose, children: "✕" }) })
|
|
44
|
+
] }),
|
|
45
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: className("close"), children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: className("closeButton"), onClick: onClear, children: "Clear errors" }) })
|
|
46
|
+
] }),
|
|
47
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: className("content"), children: /* @__PURE__ */ jsxRuntime.jsx(DevErrorInner.DevErrorInner, { error: currentError }) })
|
|
48
|
+
] }) });
|
|
49
|
+
}
|
|
50
|
+
exports.DevErrorList = DevErrorList;
|
|
51
|
+
//# sourceMappingURL=DevErrorList.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DevErrorList.cjs","sources":["../../../../../../packages/react-devbar/src/ui/DevError/DevErrorList.tsx"],"sourcesContent":["import { useEffect } from 'react'\nimport { DevErrorInner } from './DevErrorInner'\nimport type { ProcessedError } from './types'\nimport { DevErrorCopy } from './DevErrorCopy'\n\nexport interface DevErrorListProps {\n\tcurrentError: ProcessedError\n\tcurrentErrorSource: string\n\tcurrentErrorIndex: number\n\terrorCount: number\n\tonPrevious: () => void\n\tonNext: () => void\n\tonClose: () => void\n\tonClear: () => void\n}\n\nconst className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'\n\nexport function DevErrorList({\n\tcurrentError,\n\tcurrentErrorIndex,\n\tcurrentErrorSource,\n\terrorCount,\n\tonClose,\n\tonNext,\n\tonPrevious,\n\tonClear,\n}: DevErrorListProps) {\n\tuseEffect(() => {\n\t\tdocument.body.classList.add('cui-devError-body')\n\t\treturn () => {\n\t\t\tdocument.body.classList.remove('cui-devError-body')\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className={className()}>\n\t\t\t<div className={className('in')}>\n\t\t\t\t<div className={className('bar')}>\n\t\t\t\t\t<div className={className('errorSource')}>\n\t\t\t\t\t\t{currentErrorSource}\n\t\t\t\t\t\t<DevErrorCopy currentError={currentError} currentErrorSource={currentErrorSource} />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={className('actions')}>\n\t\t\t\t\t\t{errorCount > 1\n\t\t\t\t\t\t\t? (\n\t\t\t\t\t\t\t\t<div className={className('switcher')}>\n\t\t\t\t\t\t\t\t\t<p className={className('errorCount')}>\n\t\t\t\t\t\t\t\t\t\tError {currentErrorIndex + 1} of {errorCount}\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t<div className={className('switcherButtons')}>\n\t\t\t\t\t\t\t\t\t\t<button type=\"button\" className={className('switcherButton')} onClick={onPrevious}>\n\t\t\t\t\t\t\t\t\t\t\t←\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t<button type=\"button\" className={className('switcherButton')} onClick={onNext}>\n\t\t\t\t\t\t\t\t\t\t\t→\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t: null}\n\t\t\t\t\t\t<div className={className('close')}>\n\t\t\t\t\t\t\t<button type=\"button\" className={className('closeButton')} onClick={onClose}>\n\t\t\t\t\t\t\t\t✕\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={className('close')}>\n\t\t\t\t\t\t<button type=\"button\" className={className('closeButton')} onClick={onClear}>\n\t\t\t\t\t\t\tClear errors\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className={className('content')}>\n\t\t\t\t\t<DevErrorInner error={currentError} />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],"names":["useEffect","jsx","jsxs","DevErrorCopy","DevErrorInner"],"mappings":";;;;;;AAgBA,MAAM,YAAY,CAAC,QAAwB,MAAM,gBAAgB,GAAG,KAAK;AAElE,SAAS,aAAa;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAsB;AACrBA,QAAAA,UAAU,MAAM;AACf,aAAS,KAAK,UAAU,IAAI,mBAAmB;AAC/C,WAAO,MAAM;AACZ,eAAS,KAAK,UAAU,OAAO,mBAAmB;AAAA,IACnD;AAAA,EACD,GAAG,CAAA,CAAE;AAEL,SACCC,2BAAAA,IAAC,OAAA,EAAI,WAAW,UAAA,GACf,0CAAC,OAAA,EAAI,WAAW,UAAU,IAAI,GAC7B,UAAA;AAAA,IAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAW,UAAU,KAAK,GAC9B,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAW,UAAU,aAAa,GACrC,UAAA;AAAA,QAAA;AAAA,QACDD,2BAAAA,IAACE,aAAAA,cAAA,EAAa,cAA4B,mBAAA,CAAwC;AAAA,MAAA,GACnF;AAAA,MACAD,2BAAAA,KAAC,OAAA,EAAI,WAAW,UAAU,SAAS,GACjC,UAAA;AAAA,QAAA,aAAa,IAEZA,2BAAAA,KAAC,OAAA,EAAI,WAAW,UAAU,UAAU,GACnC,UAAA;AAAA,UAAAA,2BAAAA,KAAC,KAAA,EAAE,WAAW,UAAU,YAAY,GAAG,UAAA;AAAA,YAAA;AAAA,YAC/B,oBAAoB;AAAA,YAAE;AAAA,YAAK;AAAA,UAAA,GACnC;AAAA,UACAA,2BAAAA,KAAC,OAAA,EAAI,WAAW,UAAU,iBAAiB,GAC1C,UAAA;AAAA,YAAAD,2BAAAA,IAAC,UAAA,EAAO,MAAK,UAAS,WAAW,UAAU,gBAAgB,GAAG,SAAS,YAAY,UAAA,IAAA,CAEnF;AAAA,YACAA,2BAAAA,IAAC,UAAA,EAAO,MAAK,UAAS,WAAW,UAAU,gBAAgB,GAAG,SAAS,QAAQ,UAAA,IAAA,CAE/E;AAAA,UAAA,EAAA,CACD;AAAA,QAAA,EAAA,CACD,IAEC;AAAA,uCACF,OAAA,EAAI,WAAW,UAAU,OAAO,GAChC,UAAAA,2BAAAA,IAAC,UAAA,EAAO,MAAK,UAAS,WAAW,UAAU,aAAa,GAAG,SAAS,SAAS,eAE7E,EAAA,CACD;AAAA,MAAA,GACD;AAAA,qCACC,OAAA,EAAI,WAAW,UAAU,OAAO,GAChC,UAAAA,2BAAAA,IAAC,UAAA,EAAO,MAAK,UAAS,WAAW,UAAU,aAAa,GAAG,SAAS,SAAS,0BAE7E,EAAA,CACD;AAAA,IAAA,GACD;AAAA,IACAA,2BAAAA,IAAC,OAAA,EAAI,WAAW,UAAU,SAAS,GAClC,UAAAA,2BAAAA,IAACG,cAAAA,eAAA,EAAc,OAAO,aAAA,CAAc,EAAA,CACrC;AAAA,EAAA,EAAA,CACD,EAAA,CACD;AAEF;;"}
|