@contember/react-devbar 2.1.0-alpha.3 → 2.1.0-alpha.30

package/src/hooks/useCopyErrorMarkdown.ts

@@ -0,0 +1,128 @@
+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')
+	
+	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/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

@@ -5,7 +5,7 @@ import {
 	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'
 
@@ -126,6 +126,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 +145,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/DevErrorCopy.tsx

@@ -0,0 +1,31 @@
+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/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
@@ -25,6 +26,7 @@ export function DevErrorList({
 	onPrevious,
 	onClear,
 }: DevErrorListProps) {
+
 	useEffect(() => {
 		document.body.classList.add('cui-devError-body')
 		return () => {
@@ -36,7 +38,10 @@ 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')}>
@@ -44,23 +49,23 @@ export function DevErrorList({
 									Error {currentErrorIndex + 1} of {errorCount}
 								</p>
 								<div className={className('switcherButtons')}>
-									<button className={className('switcherButton')} onClick={onPrevious}>
+									<button type="button" className={className('switcherButton')} onClick={onPrevious}>
 										←
 									</button>
-									<button className={className('switcherButton')} onClick={onNext}>
+									<button type="button" className={className('switcherButton')} onClick={onNext}>
 										→
 									</button>
 								</div>
 							</div>
 						) : 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>