@contember/react-devbar 2.1.0-alpha.8 → 2.1.0-beta.1

package/src/hooks/useCopyErrorMarkdown.ts

@@ -0,0 +1,127 @@
+import { useEffect, useState } from 'react'
+import type { ParsedStackTrace, ProcessedError } from '../ui/DevError/types'
+
+const convertStackTraceToMarkdown = (stackTrace: ParsedStackTrace, lines: string[]) => {
+	stackTrace.forEach((frame, index) => {
+		lines.push(`**Frame ${index + 1}:**`)
+		lines.push('')
+		lines.push(`- **File:** ${frame.filename}${frame.line ? `:${frame.line}` : ''}`)
+
+		if (frame.callee) {
+			lines.push(`- **Function:** ${frame.callee}`)
+		}
+
+		lines.push('')
+
+		if (frame.line !== undefined && frame.sourceCodeLines) {
+			lines.push('**Source Code:**')
+			lines.push('')
+			lines.push('```typescript')
+
+			frame.sourceCodeLines.forEach((codeLine, lineIndex) => {
+				const lineNumber = lineIndex + 1
+				// Show context around the error line (similar to the UI logic)
+				if (frame.line && lineNumber + 5 >= frame.line && lineNumber - 3 <= frame.line) {
+					const isErrorLine = lineNumber === frame.line
+					const marker = isErrorLine ? '>>> ' : '    '
+					lines.push(`${marker}${lineNumber.toString().padStart(3)}: ${codeLine}`)
+				}
+			})
+
+			lines.push('```')
+			lines.push('')
+		}
+
+		lines.push('---')
+		lines.push('')
+	})
+}
+
+const convertErrorToMarkdownRecursive = (error: ProcessedError, lines: string[], level: number) => {
+	const errorObject = error.error instanceof Error ? error.error : undefined
+	const prefix = '#'.repeat(level + 1)
+
+	if (errorObject) {
+		lines.push(`${prefix} ${errorObject.name}`)
+		lines.push('')
+
+		if (errorObject.message) {
+			lines.push(`**Message:** ${errorObject.message}`)
+			lines.push('')
+		}
+
+		if ('details' in errorObject && (errorObject as Error & { details?: unknown }).details) {
+			lines.push(`**Details:** ${(errorObject as Error & { details: string }).details}`)
+			lines.push('')
+		}
+	} else {
+		lines.push(`${prefix} Unknown Error`)
+		lines.push('')
+	}
+
+	if (error.parsedStackStrace) {
+		lines.push(`${'#'.repeat(level + 2)} Stack Trace`)
+		lines.push('')
+		convertStackTraceToMarkdown(error.parsedStackStrace, lines)
+	} else if (errorObject?.stack) {
+		lines.push(`${'#'.repeat(level + 2)} Stack Trace`)
+		lines.push('')
+		lines.push('```')
+		lines.push(errorObject.stack)
+		lines.push('```')
+		lines.push('')
+	}
+
+	if (error.cause) {
+		lines.push(`${'#'.repeat(level + 2)} Caused By`)
+		lines.push('')
+		convertErrorToMarkdownRecursive(error.cause, lines, level + 1)
+	}
+}
+
+const convertErrorToMarkdown = (error: ProcessedError, source: string): string => {
+	const lines: string[] = []
+
+	lines.push('# Contember Error Report')
+	lines.push('')
+	lines.push(`**Source:** ${source}`)
+	lines.push('')
+
+	convertErrorToMarkdownRecursive(error, lines, 1)
+
+	return lines.join('\n')
+}
+
+type CopyMarkdownProps = {
+	currentError: ProcessedError
+	currentErrorSource: string
+}
+
+export const useCopyErrorMarkdown = ({ currentError, currentErrorSource }: CopyMarkdownProps) => {
+	const [copyStatus, setCopyStatus] = useState<'idle' | 'copying' | 'success' | 'error'>('idle')
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: intentional
+	useEffect(() => {
+		setCopyStatus('idle')
+	}, [currentError])
+
+	const handleCopyMarkdown = async () => {
+		setCopyStatus('copying')
+		try {
+			const markdown = convertErrorToMarkdown(currentError, currentErrorSource)
+			await navigator.clipboard.writeText(markdown)
+			setCopyStatus('success')
+		} catch (err) {
+			console.error('Failed to copy markdown:', err)
+			setCopyStatus('error')
+		}
+	}
+
+	const isClipboardSupported = !!navigator?.clipboard
+
+	return {
+		copyStatus,
+		handleCopyMarkdown,
+		isClipboardSupported,
+	}
+}

package/src/hooks/useParsedStacktrace.ts

@@ -36,7 +36,7 @@ export const useProcessedError = (e: ErrorType): ProcessedError => {
 				cause: e instanceof Error && 'cause' in e && (e as any).cause !== undefined ? await createErrorWithStackTrace((e as any).cause) : undefined,
 			}
 		}
-		(async () => {
+		;(async () => {
 			setError(await createErrorWithStackTrace(e))
 		})()
 	}, [e])

package/src/index.css

@@ -235,6 +235,12 @@
 	overflow: auto;
 }
 
+.cui-devError-errorSource {
+	display: flex;
+	gap: 20px;
+	align-items: center;
+}
+
 .cui-devError-errorMessage,
 .cui-devError-errorName,
 .cui-devError-errorDetails {
@@ -284,6 +290,7 @@
 	color: #eeeeee;
 	display: flex;
 	align-items: center;
+	justify-content: space-between;
 }
 
 .cui-devError-causedBy {
@@ -294,6 +301,26 @@
 	align-items: center;
 }
 
+.cui-devError-copyButton {
+	background: transparent;
+	border: 1px solid #cbcbcb;
+	border-radius: 0.375rem;
+	color: #ffffff;
+	cursor: pointer;
+	font-size: 0.875rem;
+	font-weight: 500;
+	padding: 0.375rem 0.75rem;
+	transition: all 200ms;
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+}
+
+.cui-devError-copyButton:hover:not(:disabled) {
+	background: #910f0f;
+	border-color: #910f0f;
+}
+
 .cui-devError-actions {
 	margin-left: auto;
 	display: flex;

package/src/ui/DevBar/DevBar.tsx

@@ -1,11 +1,6 @@
-import {
-	useId,
-	useOnElementClickOutsideCallback,
-	useReferentiallyStableCallback,
-	useWindowSize,
-} from '@contember/react-utils'
+import { useId, useOnElementClickOutsideCallback, useReferentiallyStableCallback, useWindowSize } from '@contember/react-utils'
 import { dataAttribute } from '@contember/utilities'
-import { PropsWithChildren, ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import { type PropsWithChildren, type ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 
 const className = (cls: string | null) => cls ? `cui-devBar-${cls}` : 'cui-devBar'
 
@@ -22,6 +17,7 @@ export const DevBar = ({
 		setExpanded(expanded => !expanded)
 	})
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: intentional
 	useEffect(() => {
 		function handleKeyDown(event: KeyboardEvent) {
 			if (event.code === 'KeyJ' && (event.ctrlKey || event.metaKey)) {
@@ -96,12 +92,10 @@ export const DevPanel = ({ heading, icon, children, preview }: DevPanelProps) =>
 
 		const handleClickOutside = (event: MouseEvent) => {
 			const rect = dialog.getBoundingClientRect()
-			const isInDialog = (
-				rect.top <= event.clientY &&
-				event.clientY <= rect.top + rect.height &&
-				rect.left <= event.clientX &&
-				event.clientX <= rect.left + rect.width
-			)
+			const isInDialog = rect.top <= event.clientY
+				&& event.clientY <= rect.top + rect.height
+				&& rect.left <= event.clientX
+				&& event.clientX <= rect.left + rect.width
 
 			if (!isInDialog) {
 				dialog.close()
@@ -126,6 +120,7 @@ export const DevPanel = ({ heading, icon, children, preview }: DevPanelProps) =>
 	return (
 		<div className={className('trigger')}>
 			<button
+				type="button"
 				ref={triggerRef}
 				tabIndex={0}
 				aria-haspopup="dialog"
@@ -144,6 +139,7 @@ export const DevPanel = ({ heading, icon, children, preview }: DevPanelProps) =>
 					<div className={className('panel-header')}>
 						<h2 className="h4">{heading}</h2>
 						<button
+							type="button"
 							onClick={handleClose}
 							className={className('close-button')}
 							aria-label="Close"

package/src/ui/DevError/DevErrorBadge.tsx

@@ -4,7 +4,6 @@ export interface DevErrorBadgeProps {
 	errorCount: number
 }
 
-
 const className = (cls?: string | null) => cls ? `cui-devErrorBadge-${cls}` : 'cui-devErrorBadge'
 
 export function DevErrorBadge({ errorCount, onOpen, onClear }: DevErrorBadgeProps) {

package/src/ui/DevError/DevErrorCopy.tsx

@@ -0,0 +1,30 @@
+import { useCopyErrorMarkdown } from '../../hooks/useCopyErrorMarkdown'
+import { ProcessedError } from './types'
+
+export const DevErrorCopy = ({ currentError, currentErrorSource }: {
+	currentError: ProcessedError
+	currentErrorSource: string
+}) => {
+	const { copyStatus, handleCopyMarkdown, isClipboardSupported } = useCopyErrorMarkdown({ currentError, currentErrorSource })
+
+	if (!isClipboardSupported) {
+		return null
+	}
+
+	return (
+		<button
+			type="button"
+			className="cui-devError-copyButton"
+			onClick={handleCopyMarkdown}
+			disabled={copyStatus === 'copying'}
+			title="Copy current error as Markdown"
+		>
+			{{
+				success: 'Copied!',
+				copying: 'Copying...',
+				error: '❌ Copy Failed',
+				idle: 'Copy as Markdown',
+			}[copyStatus]}
+		</button>
+	)
+}

package/src/ui/DevError/DevErrorInner.tsx

@@ -6,42 +6,42 @@ export interface DevErrorInnerProps {
 	level?: number
 }
 
-
 const className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'
 
 export function DevErrorInner({ error, level = 1 }: DevErrorInnerProps) {
-
 	let errorObject: Error | undefined = error.error instanceof Error ? error.error : undefined
 
 	return (
 		<>
 			<div className={className('header')}>
-				{errorObject ? (
-					<>
-						<h1 className={className('errorName')}>{errorObject.name}</h1>
-						{error.cause && <a href={`#error-${level}`} className={className('causeLink')}>caused by &gt;</a>}
-						{errorObject.message && <h2 className={className('errorMessage')}>{errorObject.message}</h2>}
-						{'details' in errorObject && <div className={className('errorDetails')}>{(errorObject as any).details}</div>}
-					</>
-				) : (
-					<h1 className={className('errorName')}>Unknown error</h1>
-				)}
+				{errorObject
+					? (
+						<>
+							<h1 className={className('errorName')}>{errorObject.name}</h1>
+							{error.cause && <a href={`#error-${level}`} className={className('causeLink')}>caused by &gt;</a>}
+							{errorObject.message && <h2 className={className('errorMessage')}>{errorObject.message}</h2>}
+							{'details' in errorObject && <div className={className('errorDetails')}>{(errorObject as any).details}</div>}
+						</>
+					)
+					: <h1 className={className('errorName')}>Unknown error</h1>}
 			</div>
-			{error.parsedStackStrace ? (
-				<StackTrace stackTrace={error.parsedStackStrace} />
-			) : errorObject?.stack ? (
-				<div className={className('stack')}>
-					<div className={className('stack-dump')}>{errorObject.stack}</div>
-				</div>
-			) : null}
-			{error.cause ? (
-				<>
-					<div className={className('causedBy')} id={`error-${level}`}>
-						Caused by
+			{error.parsedStackStrace ? <StackTrace stackTrace={error.parsedStackStrace} /> : errorObject?.stack
+				? (
+					<div className={className('stack')}>
+						<div className={className('stack-dump')}>{errorObject.stack}</div>
 					</div>
-					<DevErrorInner error={error.cause} level={level + 1} />
-				</>
-			) : null}
+				)
+				: null}
+			{error.cause
+				? (
+					<>
+						<div className={className('causedBy')} id={`error-${level}`}>
+							Caused by
+						</div>
+						<DevErrorInner error={error.cause} level={level + 1} />
+					</>
+				)
+				: null}
 		</>
 	)
 }

package/src/ui/DevError/DevErrorList.tsx

@@ -1,6 +1,7 @@
-import { DevErrorInner } from './DevErrorInner'
-import { ProcessedError } from './types'
 import { useEffect } from 'react'
+import { DevErrorInner } from './DevErrorInner'
+import type { ProcessedError } from './types'
+import { DevErrorCopy } from './DevErrorCopy'
 
 export interface DevErrorListProps {
 	currentError: ProcessedError
@@ -36,31 +37,36 @@ export function DevErrorList({
 		<div className={className()}>
 			<div className={className('in')}>
 				<div className={className('bar')}>
-					<div className={className('errorSource')}>{currentErrorSource}</div>
+					<div className={className('errorSource')}>
+						{currentErrorSource}
+						<DevErrorCopy currentError={currentError} currentErrorSource={currentErrorSource} />
+					</div>
 					<div className={className('actions')}>
-						{errorCount > 1 ? (
-							<div className={className('switcher')}>
-								<p className={className('errorCount')}>
-									Error {currentErrorIndex + 1} of {errorCount}
-								</p>
-								<div className={className('switcherButtons')}>
-									<button className={className('switcherButton')} onClick={onPrevious}>
-										←
-									</button>
-									<button className={className('switcherButton')} onClick={onNext}>
-										→
-									</button>
+						{errorCount > 1
+							? (
+								<div className={className('switcher')}>
+									<p className={className('errorCount')}>
+										Error {currentErrorIndex + 1} of {errorCount}
+									</p>
+									<div className={className('switcherButtons')}>
+										<button type="button" className={className('switcherButton')} onClick={onPrevious}>
+											←
+										</button>
+										<button type="button" className={className('switcherButton')} onClick={onNext}>
+											→
+										</button>
+									</div>
 								</div>
-							</div>
-						) : null}
+							)
+							: null}
 						<div className={className('close')}>
-							<button className={className('closeButton')} onClick={onClose}>
+							<button type="button" className={className('closeButton')} onClick={onClose}>
 								✕
 							</button>
 						</div>
 					</div>
 					<div className={className('close')}>
-						<button className={className('closeButton')} onClick={onClear}>
+						<button type="button" className={className('closeButton')} onClick={onClear}>
 							Clear errors
 						</button>
 					</div>

package/src/ui/DevError/StackTrace.tsx

@@ -1,13 +1,10 @@
 import { ParsedStackFrame, ParsedStackTrace } from './types'
 
-
 const className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'
 export const StackTrace = ({ stackTrace }: { stackTrace: ParsedStackTrace }) => {
 	return (
 		<div className={className('stack')}>
-			{stackTrace.map((it, index) => (
-				<StackFrame stackFrame={it} key={index} />
-			))}
+			{stackTrace.map((it, index) => <StackFrame stackFrame={it} key={index} />)}
 		</div>
 	)
 }