@contember/react-devbar 1.3.0-alpha.27 → 2.0.0-alpha.1

package/src/ui/DevError/DevErrorList.tsx

@@ -1,4 +1,3 @@
-import { useClassNameFactory } from '@contember/react-utils'
 import { DevErrorInner } from './DevErrorInner'
 import { ProcessedError } from './types'
 
@@ -12,6 +11,7 @@ export interface DevErrorListProps {
 	onClose: () => void
 }
 
+const className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'
 
 export function DevErrorList({
 	currentError,
@@ -22,31 +22,29 @@ export function DevErrorList({
 	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')}>
+		<div className={className()}>
+			<div className={className('in')}>
+				<div className={className('bar')}>
+					<div className={className('errorSource')}>{currentErrorSource}</div>
+					<div className={className('actions')}>
 						{errorCount > 1 ? (
-							<div className={componentClassName('switcher')}>
-								<p className={componentClassName('errorCount')}>
+							<div className={className('switcher')}>
+								<p className={className('errorCount')}>
 									Error {currentErrorIndex + 1} of {errorCount}
 								</p>
-								<div className={componentClassName('switcherButtons')}>
-									<button className={componentClassName('switcherButton')} onClick={onPrevious}>
+								<div className={className('switcherButtons')}>
+									<button className={className('switcherButton')} onClick={onPrevious}>
 										ᐊ
 									</button>
-									<button className={componentClassName('switcherButton')} onClick={onNext}>
+									<button className={className('switcherButton')} onClick={onNext}>
 										ᐅ
 									</button>
 								</div>
 							</div>
 						) : null}
-						<div className={componentClassName('close')}>
-							<button className={componentClassName('closeButton')} onClick={onClose}>
+						<div className={className('close')}>
+							<button className={className('closeButton')} onClick={onClose}>
 								🗙
 							</button>
 						</div>

package/src/ui/DevError/StackTrace.tsx

@@ -1,11 +1,10 @@
-import { useClassNameFactory } from '@contember/react-utils'
 import { ParsedStackFrame, ParsedStackTrace } from './types'
 
-export const StackTrace = ({ stackTrace }: { stackTrace: ParsedStackTrace }) => {
-	const componentClassName = useClassNameFactory('devError')
 
+const className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'
+export const StackTrace = ({ stackTrace }: { stackTrace: ParsedStackTrace }) => {
 	return (
-		<div className={componentClassName('stack')}>
+		<div className={className('stack')}>
 			{stackTrace.map((it, index) => (
 				<StackFrame stackFrame={it} key={index} />
 			))}
@@ -14,19 +13,18 @@ export const StackTrace = ({ stackTrace }: { stackTrace: ParsedStackTrace }) =>
 }
 
 const StackFrame = ({ stackFrame }: { stackFrame: ParsedStackFrame }) => {
-	const componentClassName = useClassNameFactory('devError')
 	const line = stackFrame.line
 
 	return (
-		<div className={componentClassName('stackFrame')}>
-			<div className={componentClassName('stackFrameHeader')}>
-				<div className={componentClassName('stackFrameSource')}>
+		<div className={className('stackFrame')}>
+			<div className={className('stackFrameHeader')}>
+				<div className={className('stackFrameSource')}>
 					{stackFrame.filename}:{line}
 				</div>
-				{stackFrame.callee && <div className={componentClassName('stackFrameCallee')}>{stackFrame.callee}</div>}
+				{stackFrame.callee && <div className={className('stackFrameCallee')}>{stackFrame.callee}</div>}
 			</div>
 			{line !== undefined && stackFrame.sourceCodeLines && (
-				<div className={componentClassName('stackFrameCode')}>
+				<div className={className('stackFrameCode')}>
 					{stackFrame.sourceCodeLines.map((it, index) => {
 						const lineNumber = index + 1
 						if (lineNumber + 5 < line || lineNumber - 3 > line) {
@@ -34,11 +32,11 @@ const StackFrame = ({ stackFrame }: { stackFrame: ParsedStackFrame }) => {
 						}
 						return (
 							<div
-								className={componentClassName('stackFrameLine', lineNumber === line && 'is-active')}
+								className={`${className('stackFrameLine')} ${lineNumber === line && 'is-active'}`}
 								key={lineNumber}
 							>
-								<div className={componentClassName('stackFrameLineNumber')}>{lineNumber}</div>
-								<div className={componentClassName('stackFrameLineCode')}>{it}</div>
+								<div className={className('stackFrameLineNumber')}>{lineNumber}</div>
+								<div className={className('stackFrameLineCode')}>{it}</div>
 							</div>
 						)
 					})}