@contember/react-devbar 1.3.0-alpha.14

package/src/ui/DevBar/DevBar.tsx

@@ -0,0 +1,187 @@
+import {
+	useClassNameFactory,
+	useId,
+	useOnElementClickOutsideCallback,
+	useOnElementMouseEnterDelayedCallback,
+	useReferentiallyStableCallback,
+	useWindowSize,
+} from '@contember/react-utils'
+import { dataAttribute } from '@contember/utilities'
+import { PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react'
+
+export const DevBar = ({
+	breakpoint = 768,
+	children,
+	brand,
+}: PropsWithChildren<{
+	brand?: ReactNode;
+	breakpoint?: number;
+}>) => {
+	const className = useClassNameFactory('devBar')
+	const [expanded, setExpanded] = useState(true)
+	const isSmallScreen = useWindowSize().width < breakpoint
+	const toggleButtonRef = useRef<HTMLButtonElement>(null)
+
+	const handleToggle = useReferentiallyStableCallback(() => {
+		setExpanded(expanded => !expanded)
+	})
+
+	useEffect(() => {
+		function handleKeyDown(event: KeyboardEvent) {
+			if (event.code === 'KeyJ' && (event.ctrlKey || event.metaKey)) {
+				event.preventDefault()
+				event.stopPropagation()
+
+				if (expanded) {
+					setExpanded(false)
+					toggleButtonRef.current?.blur()
+				} else {
+					if (toggleButtonRef.current !== document.activeElement) {
+						toggleButtonRef.current?.focus()
+					} else {
+						toggleButtonRef.current?.blur()
+					}
+				}
+			}
+		}
+
+		document.addEventListener('keydown', handleKeyDown)
+		return () => document.removeEventListener('keydown', handleKeyDown)
+	}, [expanded, handleToggle])
+
+	const devBarContentRef = useRef<HTMLDivElement>(null)
+
+	useOnElementClickOutsideCallback(devBarContentRef, () => {
+		if (expanded) {
+			setExpanded(false)
+			toggleButtonRef.current?.blur()
+		}
+	})
+
+	const id = `dev-bar-panel${useId()}`
+
+	return (
+		<section
+			data-transparent
+			data-overrides-lucide-icons
+			data-expanded={dataAttribute(expanded)}
+			data-small-screen={dataAttribute(isSmallScreen)}
+			className={className(null)}
+			onKeyDown={event => {
+				if (event.code === 'Escape') {
+					event.preventDefault()
+					event.stopPropagation()
+
+					if (expanded) {
+						setExpanded(false)
+					} else if (document.activeElement && document.activeElement instanceof HTMLElement) {
+						document.activeElement.blur()
+					}
+				}
+			}}
+		>
+			<style>{`svg { pointer-events: none }`}</style>
+			<div ref={devBarContentRef} className={className('content')}>
+				<div
+					data-expanded={dataAttribute(expanded)}
+					id={id}
+					role="dialog"
+					style={{ display: 'contents' }}
+				>
+					<div className={className('brand')}>
+						{brand}
+
+					</div>
+
+					<div className={className('panels')}>
+						{children}
+					</div>
+
+				</div>
+
+				<button
+					ref={toggleButtonRef}
+					id="dev-bar-toggle-button"
+					aria-label="Toggle Contember Developer Toolbar"
+					aria-controls={id}
+					aria-expanded={expanded}
+					className={className('close')}
+					onClick={handleToggle}
+					tabIndex={0}
+				>
+					{expanded ? '🗙' : 'ᐸ'}
+				</button>
+			</div>
+		</section>
+	)
+}
+
+export const DevPanel = ({ heading, icon, children, preview }: {
+	icon: ReactNode;
+	heading: ReactNode,
+	children: ReactNode,
+	preview?: ReactNode
+}) => {
+	const id = `cui-devBar-panel-${useId()}`
+	const className = useClassNameFactory('devBar')
+	const [expanded, setExpanded] = useState(false)
+	const mouseEnterTimeStampRef = useRef<ReturnType<typeof Date.now> | undefined>(undefined)
+
+	const devPanelRef = useRef<HTMLDivElement>(null)
+
+	useOnElementMouseEnterDelayedCallback(devPanelRef, useReferentiallyStableCallback(({ type }) => {
+		if (type === 'mouseenter') {
+			mouseEnterTimeStampRef.current = Date.now() + 300
+			setExpanded(true)
+		}
+	}))
+
+	return (
+		<div
+			ref={devPanelRef}
+			data-expanded={dataAttribute(expanded)}
+			className={className('trigger')}
+			onMouseLeave={useReferentiallyStableCallback(() => {
+				setExpanded(false)
+			})}
+			onKeyDown={useReferentiallyStableCallback(event => {
+				if (expanded && event.code === 'Escape') {
+					event.preventDefault()
+					event.stopPropagation()
+					setExpanded(false)
+				}
+			})}
+		>
+			<button
+				tabIndex={0}
+				aria-haspopup="dialog"
+				aria-controls={id}
+				aria-expanded={expanded}
+				className={className('trigger-label')}
+				onClick={useReferentiallyStableCallback(() => {
+					if (mouseEnterTimeStampRef.current && Date.now() < mouseEnterTimeStampRef.current) {
+						return
+					} else {
+						setExpanded(expanded => !expanded)
+						mouseEnterTimeStampRef.current = undefined
+					}
+				})}
+			>
+				{icon}
+				<span className={className('trigger-label-text')}>{preview ?? heading}</span>
+			</button>
+			{expanded && (
+				<div tabIndex={0} id={id} role="dialog" className={className('panel', 'dangerously-remove-native-focus-outline')}>
+					<div className={className('panel-content', 'native-focus-outline-handler')}>
+						<h2 className="h4">
+							{heading}
+						</h2>
+						<div className={className('panel-body')}>
+							{children}
+						</div>
+					</div>
+				</div>
+			)}
+		</div>
+	)
+}

package/src/ui/DevBar/index.css

@@ -0,0 +1,171 @@
+.cui-devBar {
+    align-items: center;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    right: 0;
+    opacity: 1;
+    padding: 1rem;
+    transition-property: opacity, transform;
+    transition-duration: 200ms;
+    transition-timing-function: ease-in-out;
+}
+
+.cui-devBar-content,
+.cui-devBar-panel-content {
+    background: #eee;
+    color: #002251;
+}
+
+.cui-devBar-content {
+    align-self: center;
+    align-items: center;
+    border-radius: 1rem;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+    display: flex;
+    gap: 1rem;
+    padding: 0.5rem;
+    margin: 0 auto;
+}
+
+
+.cui-devBar-close,
+.cui-devBar-trigger-label,
+.cui-devBar-brand {
+    align-items: center;
+    height: 2rem;
+    border-radius: 0.5rem;
+    justify-content: center;
+    max-height: 2rem;
+    min-height: 2rem;
+    white-space: nowrap;
+}
+
+.cui-devBar-close {
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    max-width: 2rem;
+    width: 2rem;
+    order: 999;
+}
+
+
+.cui-devBar-brand {
+    align-items: center;
+    display: flex;
+    gap: 1rem;
+    text-align: right;
+}
+.cui-devBar-brand  svg {
+    max-height: 2rem;
+}
+
+
+.cui-devBar-panels {
+    display: flex;
+    gap: 1rem;
+}
+
+.cui-devBar-trigger {
+    display: flex;
+}
+
+.cui-devBar-trigger-label {
+    align-items: center;
+    color: inherit;
+    cursor: pointer;
+    display: inline-flex;
+    font-weight: normal;
+    gap: 0.3rem;
+    padding: 0 0.2rem;
+}
+
+.cui-devBar-trigger-label:hover {
+    background-color: #e0e0e0;
+}
+
+
+.cui-devBar-panel {
+    justify-content: center;
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    left: 0;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    padding: 2rem;
+    transform: translateY(-1rem);
+}
+
+.cui-devBar-trigger:not([data-expanded]) > .cui-devBar-panel {
+    display: none;
+}
+
+.cui-devBar-panel-content {
+    background: #fff;
+    border: 1px solid #ccc;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+    border-radius: 0.5rem;
+    display: flex;
+    min-width: min(20rem, 100%);
+    max-width: 100%;
+    flex-direction: column;
+    flex-shrink: 1;
+}
+.cui-devBar-panel-content h2 {
+    font-weight: bold;
+    margin-bottom: 0;
+    padding: 0.4rem 1rem;
+    border-radius: 0.5rem 0.5rem 0 0;
+    background: #f8f8f8;
+}
+
+@media screen and (min-width: 768px) {
+    .cui-devBar-trigger {
+        position: relative;
+    }
+
+    .cui-devBar-panel-content {
+        min-width: unset;
+        max-width: unset;
+    }
+
+    .cui-devBar-panel-body {
+        min-width: 20rem;
+    }
+}
+
+.cui-devBar-panel-body {
+    border-top: 1px solid #ccc;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+}
+
+.cui-devBar:not([data-expanded]) {
+    transform: translateY(2rem);
+    opacity: 0;
+    max-width: 5rem;
+    margin: auto;
+}
+
+
+.cui-devBar:not([data-expanded]):hover,
+.cui-devBar:not([data-expanded]):focus-within {
+    transform: unset;
+    opacity: unset;
+}
+
+[id^="dev-bar-panel"]:not([data-expanded]) > * {
+    display: none;
+}
+
+.cui-devBar-panel .cui-table-wrapper {
+    overflow: auto;
+}

package/src/ui/DevBar/index.tsx

@@ -0,0 +1 @@
+export * from './DevBar'

package/src/ui/DevError/DevError.css

@@ -0,0 +1,191 @@
+.cui-devError {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 99;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    background: rgba(212, 212, 212, 0.66);
+    font-family: Poppins, Roboto, sans-serif;
+}
+
+.cui-devError-in {
+    z-index: 100;
+    width: 100%;
+    height: 100%;
+    color: #333;
+    background: #222;
+    box-shadow: 3px 3px 10px rgba(50, 50, 50, 0.5);
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+
+.cui-devError-header {
+    background: #CD1818;
+    color: #FFF;
+    padding: 0.5em 1em;
+}
+
+.cui-devError-errorMessage,
+.cui-devError-errorName,
+.cui-devError-errorDetails {
+    margin: 0;
+    flex: 0 0 auto;
+    font-weight: 300;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    line-height: 130%;
+}
+
+.cui-devError-errorMessage {
+    font-family: monospace;
+    margin-top: 0.5em;
+    font-size: 1.7em;
+}
+
+.cui-devError-errorDetails {
+    font-family: monospace;
+    margin-top: 0.5em;
+    font-size: 1em;
+    white-space: pre;
+    overflow-x: scroll;
+}
+
+.cui-devError-causeLink {
+    color: #FFCC00;
+    text-decoration: underline;
+}
+
+.cui-devError-stack {
+    flex: 1 1 auto;
+}
+
+.cui-devError-stack-dump {
+    color: #fff;
+    margin-top: 1em;
+    padding: 1em;
+    white-space: pre-wrap;
+}
+
+.cui-devError-bar {
+    padding: 0.2em 0.2em 0.2em 1em;
+    background: #ac1616;
+    color: #eee;
+    display: flex;
+}
+
+.cui-devError-causedBy {
+    padding: 0.2em 0.2em 0.2em 1em;
+    background: #FFCC00;
+    color: #000;
+    display: flex;
+}
+
+.cui-devError-actions {
+    margin-left: auto;
+    display: flex;
+}
+
+.cui-devError-actions .cui-button {
+    color: #fff;
+    border-color: #cbcbcb;
+}
+
+.cui-devError-actions .cui-button:hover {
+    color: #fff;
+}
+
+.cui-devError-close {
+    margin-left: 1em;
+}
+
+.cui-devError-close .cui-button {
+    border-color: transparent;
+}
+
+.cui-devError-switcher {
+    display: flex;
+    align-items: center;
+    margin-left: 2em;
+}
+
+
+.cui-devError-switcherButtons {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+}
+.cui-devError-closeButton,
+.cui-devError-switcherButton {
+    border: 1px solid #cbcbcb;
+    border-radius: 0.2em;
+    padding: 0.2em 0.5em;
+}
+
+.cui-devError-errorCount {
+    margin: 0;
+    margin-right: 0.5em;
+}
+
+.cui-devError-stackFrame {
+    font-family: monospace;
+}
+
+.cui-devError-stackFrame:last-child {
+    border-bottom: 1px solid #666;
+}
+
+.cui-devError-stackFrameHeader {
+    display: flex;
+    padding: 0.5em 1em;
+    background: #333;
+    color: #fff;
+    border-bottom: 1px solid #666;
+    border-top: 1px solid #666;
+}
+
+.cui-devError-stackFrameSource {
+    margin-left: 0.2em;
+}
+
+.cui-devError-stackFrameCallee {
+    margin-left: 1em;
+    color: #a4ffa4;
+}
+
+.cui-devError-stackFrameCode {
+    background: #222;
+    color: #D5D5D5;
+}
+
+.cui-devError-stackFrameLine {
+    display: flex;
+}
+
+.cui-devError-stackFrameLine.is-active {
+    color: #fff;
+    background: #CD1818;
+}
+
+.cui-devError-stackFrameLine.is-active .cui-devError-stackFrameLineNumber {
+    color: #fff;
+}
+
+.cui-devError-stackFrameLineNumber {
+    color: #888;
+    flex: 0 0 50px;
+    text-align: right;
+    padding: 0.2em;
+}
+
+.cui-devError-stackFrameLineCode {
+    padding: 0.2em 1em;
+    white-space: pre-wrap;
+    tab-size: 4;
+}

package/src/ui/DevError/DevError.tsx

@@ -0,0 +1,21 @@
+import { useClassNameFactory } from '@contember/react-utils'
+import { DevErrorInner, DevErrorInnerProps } from './DevErrorInner'
+
+export interface DevErrorProps extends DevErrorInnerProps {
+	source: string
+}
+
+export function DevError(props: DevErrorProps) {
+	const componentClassName = useClassNameFactory('devError')
+
+	return (
+		<div className={componentClassName()}>
+			<div className={componentClassName('in')}>
+				<div className={componentClassName('bar')}>
+					<div className={componentClassName('errorSource')}>{props.source}</div>
+				</div>
+				<DevErrorInner error={props.error} />
+			</div>
+		</div>
+	)
+}

package/src/ui/DevError/DevErrorBadge.css

@@ -0,0 +1,16 @@
+:where(.cui-devErrorBadge) {
+	position: fixed;
+	bottom: 20px;
+	left: 20px;
+}
+
+:where(.cui-devErrorBadge-button) {
+	display: block;
+	background: #CD1818;
+	color: #fff;
+	font-weight: 600;
+	box-shadow: 3px 3px 7px rgba(50, 50, 50, 0.5);
+	border-radius: 10px;
+	padding: 1em 2em;
+	cursor: pointer;
+}

package/src/ui/DevError/DevErrorBadge.tsx

@@ -0,0 +1,18 @@
+import { useClassNameFactory } from '@contember/react-utils'
+
+export interface DevErrorBadgeProps {
+	onOpen: () => void
+	errorCount: number
+}
+
+export function DevErrorBadge({ errorCount, onOpen }: DevErrorBadgeProps) {
+	const componentClassName = useClassNameFactory('devErrorBadge')
+
+	return (
+		<div className={componentClassName()}>
+			<a className={componentClassName('button')} onClick={onOpen}>
+				{errorCount} {errorCount > 1 ? 'errors' : 'error'}
+			</a>
+		</div>
+	)
+}

package/src/ui/DevError/DevErrorInner.tsx

@@ -0,0 +1,46 @@
+import { useClassNameFactory } from '@contember/react-utils'
+import { StackTrace } from './StackTrace'
+import type { ProcessedError } from './types'
+
+export interface DevErrorInnerProps {
+	error: ProcessedError
+	level?: number
+}
+
+export function DevErrorInner({ error, level = 1 }: DevErrorInnerProps) {
+	const componentClassName = useClassNameFactory('devError')
+
+	let errorObject: Error | undefined = error.error instanceof Error ? error.error : undefined
+
+	return (
+		<>
+			<div className={componentClassName('header')}>
+				{errorObject ? (
+					<>
+						<h1 className={componentClassName('errorName')}>{errorObject.name}</h1>
+						{error.cause && <a href={`#error-${level}`} className={componentClassName('causeLink')}>caused by &gt;</a>}
+						{errorObject.message && <h2 className={componentClassName('errorMessage')}>{errorObject.message}</h2>}
+						{'details' in errorObject && <h3 className={componentClassName('errorDetails')}>{(errorObject as any).details}</h3>}
+					</>
+				) : (
+					<h1 className={componentClassName('errorName')}>Unknown error</h1>
+				)}
+			</div>
+			{error.parsedStackStrace ? (
+				<StackTrace stackTrace={error.parsedStackStrace} />
+			) : errorObject?.stack ? (
+				<div className={componentClassName('stack')}>
+					<div className={componentClassName('stack-dump')}>{errorObject.stack}</div>
+				</div>
+			) : null}
+			{error.cause ? (
+				<>
+					<div className={componentClassName('causedBy')} id={`error-${level}`}>
+						Caused by
+					</div>
+					<DevErrorInner error={error.cause} level={level + 1} />
+				</>
+			) : null}
+		</>
+	)
+}

package/src/ui/DevError/DevErrorList.tsx

@@ -0,0 +1,60 @@
+import { useClassNameFactory } from '@contember/react-utils'
+import { DevErrorInner } from './DevErrorInner'
+import { ProcessedError } from './types'
+
+export interface DevErrorListProps {
+	currentError: ProcessedError
+	currentErrorSource: string
+	currentErrorIndex: number
+	errorCount: number
+	onPrevious: () => void
+	onNext: () => void
+	onClose: () => void
+}
+
+
+export function DevErrorList({
+	currentError,
+	currentErrorIndex,
+	currentErrorSource,
+	errorCount,
+	onClose,
+	onNext,
+	onPrevious,
+}: DevErrorListProps) {
+	const componentClassName = useClassNameFactory('devError')
+
+	return (
+		<div className={componentClassName()}>
+			<div className={componentClassName('in')}>
+				<div className={componentClassName('bar')}>
+					<div className={componentClassName('errorSource')}>{currentErrorSource}</div>
+					<div className={componentClassName('actions')}>
+						{errorCount > 1 ? (
+							<div className={componentClassName('switcher')}>
+								<p className={componentClassName('errorCount')}>
+									Error {currentErrorIndex + 1} of {errorCount}
+								</p>
+								<div className={componentClassName('switcherButtons')}>
+									<button className={componentClassName('switcherButton')} onClick={onPrevious}>
+										ᐊ
+									</button>
+									<button className={componentClassName('switcherButton')} onClick={onNext}>
+										ᐅ
+									</button>
+								</div>
+							</div>
+						) : null}
+						<div className={componentClassName('close')}>
+							<button className={componentClassName('closeButton')} onClick={onClose}>
+								🗙
+							</button>
+						</div>
+					</div>
+				</div>
+
+				<DevErrorInner error={currentError} />
+			</div>
+		</div>
+	)
+}