Refactor and fix tests

enonic · Dec 10, 2024 · 7803323 · 7803323
1 parent 834b841
commit 7803323
Show file tree

Hide file tree

Showing 45 changed files with 180 additions and 679 deletions.
diff --git a/src/ErrorComponent.tsx → src/Common/ErrorComponent.tsx b/src/ErrorComponent.tsx → src/Common/ErrorComponent.tsx
diff --git a/src/ComponentRegistry/HtmlComment.tsx → src/Common/HtmlComment.tsx b/src/ComponentRegistry/HtmlComment.tsx → src/Common/HtmlComment.tsx
diff --git a/src/Alert.tsx → src/Common/Message.tsx b/src/Alert.tsx → src/Common/Message.tsx
@@ -7,7 +7,7 @@ import type {ReactNode} from 'react';
 import { ErrorComponent } from './ErrorComponent';
 import { Warning } from './Warning';
 
-export const Alert = ({
+export const Message = ({
 	children,
 	mode,
 	...extraProps

diff --git a/src/TryCatch.tsx → src/Common/TryCatch.tsx b/src/TryCatch.tsx → src/Common/TryCatch.tsx
@@ -5,7 +5,7 @@ import type {
 import type {ReactNode} from 'react';
 
 import * as React from 'react';
-import { Alert } from './Alert';
+import { Message } from './Message';
 
 export const TryCatch = ({
 	children,
@@ -19,15 +19,15 @@ export const TryCatch = ({
 	} catch (e) {
 		if (mode === 'edit' || mode === 'inline') {
 			return (
-				<Alert mode={mode}>
+				<Message mode={mode}>
 					<h2>Error rendering component</h2>
 					<p>{e.message}</p>
 					{
 						mode === 'edit' && (
 							<pre>{e.stack || ''}</pre>
 						)
 					}
-				</Alert>
+				</Message>
 			);
 		}
 		console.warn(`TryCatch component didn't get mode prop! children:${children}`);

diff --git a/src/Warning.tsx → src/Common/Warning.tsx b/src/Warning.tsx → src/Common/Warning.tsx
@@ -5,7 +5,7 @@ import { ContentStudioEditModePlaceholderStyle } from './ErrorComponent';
 const lightYellow = '#c9ba9b';
 const brown = '#794b02';
 
-const STYLE = {
+export const WARNING_STYLE = {
 	...ContentStudioEditModePlaceholderStyle,
 	borderColor: lightYellow,
 	color: brown,
@@ -22,10 +22,10 @@ export function Warning({
 	if (html) {
 		return (
 			// Using dangerouslySetInnerHTML avoids encoding < to &lt;
-			<div {...extraProps} dangerouslySetInnerHTML={{ __html: html }} style={STYLE}/>
+			<div {...extraProps} dangerouslySetInnerHTML={{ __html: html }} style={WARNING_STYLE}/>
 		);
 	}
 	return (
-		<div {...extraProps} style={STYLE}>{children}</div>
+		<div {...extraProps} style={WARNING_STYLE}>{children}</div>
 	);
 }
diff --git a/src/ComponentRegistry/XpComponent.tsx → src/ComponentRegistry/BaseComponent.tsx b/src/ComponentRegistry/XpComponent.tsx → src/ComponentRegistry/BaseComponent.tsx
@@ -1,32 +1,32 @@
 import type {Component} from '@enonic-types/core';
-import type {ComponentRegistry} from '../ComponentRegistry';
+import type {ComponentRegistry} from './ComponentRegistry';
 import type {RenderableComponent} from '../types';
 
 import { toStr } from '@enonic/js-utils/value/toStr';
 import * as React from 'react';
 
 import {RENDERABLE_COMPONENT_TYPE} from '../constants';
-import {ErrorComponent} from '../ErrorComponent';
-import {Warning} from '../Warning';
-import {XpBaseLayout} from './XpBaseLayout';
-import {XpBasePage} from './XpBasePage';
-import {XpBasePart} from './XpBasePart';
-import {XpBaseText} from './XpBaseText';
-import {XpContentType} from './XpContentType';
+import {ErrorComponent} from '../Common/ErrorComponent';
+import {Warning} from '../Common/Warning';
+import {BaseLayout} from './BaseLayout';
+import {BasePage} from './BasePage';
+import {BasePart} from './BasePart';
+import {BaseText} from './BaseText';
+import {BaseContentType} from './BaseContentType';
 import {XpFallback} from './XpFallback';
 
 
-export function XpComponent({
+export function BaseComponent({
 	component,
 	componentRegistry
 }: {
 	component: RenderableComponent
 	componentRegistry?: ComponentRegistry
 }) {
-	// console.debug('XpComponent component:', toStr(component));
+	// console.debug('BaseComponent component:', toStr(component));
 
 	if (!componentRegistry) {
-		console.warn('XpComponent componentRegistry missing! with component:', toStr(component));
+		console.warn('BaseComponent componentRegistry missing! with component:', toStr(component));
 		return (
 			<XpFallback component={component as Component}/>
 		);
@@ -37,45 +37,45 @@ export function XpComponent({
 		type
 	} = component;
 	if (!type) {
-		console.error('XpComponent component missing type:', toStr(component));
+		console.error('BaseComponent component missing type:', toStr(component));
 		return (
 			<XpFallback component={component}/>
 		);
 	}
-	// console.info('XpComponent type:', type);
+	// console.info('BaseComponent type:', type);
 
 	switch (type) {
 		case RENDERABLE_COMPONENT_TYPE.PART:
 			return (
-				<XpBasePart
+				<BasePart
 					component={component}
 					componentRegistry={componentRegistry}
 				/>
 			);
 		case RENDERABLE_COMPONENT_TYPE.LAYOUT:
 			return (
-				<XpBaseLayout
+				<BaseLayout
 					component={component}
 					componentRegistry={componentRegistry}
 				/>
 			);
 		case RENDERABLE_COMPONENT_TYPE.PAGE:
 			return (
-				<XpBasePage
+				<BasePage
 					component={component}
 					componentRegistry={componentRegistry}
 				/>
 			);
 		case RENDERABLE_COMPONENT_TYPE.CONTENT_TYPE:
 			return (
-				<XpContentType
+				<BaseContentType
 					component={component}
 					componentRegistry={componentRegistry}
 				/>
 			);
 		case RENDERABLE_COMPONENT_TYPE.TEXT: {
 			return (
-				<XpBaseText
+				<BaseText
 					component={component}
 					componentRegistry={componentRegistry}
 				/>
@@ -112,4 +112,4 @@ export function XpComponent({
 		<XpFallback component={component as Component}/>
 	);
 
-} // XpComponent
+} // BaseComponent
diff --git a/src/ComponentRegistry/XpContentType.tsx → src/ComponentRegistry/BaseContentType.tsx b/src/ComponentRegistry/XpContentType.tsx → src/ComponentRegistry/BaseContentType.tsx
@@ -4,9 +4,9 @@ import type {
 } from '../types';
 
 import * as React from 'react';
-import { Alert } from '../Alert';
+import { Message } from '../Common/Message';
 
-export const XpContentType = ({
+export const BaseContentType = ({
 	component,
 	componentRegistry
 }: {
@@ -22,7 +22,7 @@ export const XpContentType = ({
 
 	// if (warning && (mode === 'edit' || mode === 'inline')) {
 	// 	return (
-	// 		<Alert mode={mode}>{warning}</Alert>
+	// 		<Message mode={mode}>{warning}</Message>
 	// 	);
 	// }
 
@@ -31,20 +31,20 @@ export const XpContentType = ({
 	}>(contentType);
 	if (!contentTypeDefinition) {
 		return (
-			<Alert mode={mode}>{`ContentType:${contentType} not registered in ComponentRegistry!`}</Alert>
+			<Message mode={mode}>{`ContentType:${contentType} not registered in ComponentRegistry!`}</Message>
 		);
 	}
 
 	const {View: ContentTypeView} = contentTypeDefinition;
 	if (!ContentTypeView) {
 		return (
-			<Alert mode={mode}>{`No View found for contentType:${contentType} in ComponentRegistry!`}</Alert>
+			<Message mode={mode}>{`No View found for contentType:${contentType} in ComponentRegistry!`}</Message>
 		);
 	}
 
 	if (!props) {
 		return (
-			<Alert mode={mode}>{`ContentType component missing props: ${contentType}!`}</Alert>
+			<Message mode={mode}>{`ContentType component missing props: ${contentType}!`}</Message>
 		);
 	}
 

diff --git a/src/ComponentRegistry/XpBaseLayout.tsx → src/ComponentRegistry/BaseLayout.tsx b/src/ComponentRegistry/XpBaseLayout.tsx → src/ComponentRegistry/BaseLayout.tsx
@@ -5,9 +5,9 @@ import type {
 } from '../types';
 
 import * as React from 'react';
-import { Alert } from '../Alert';
+import { Message } from '../Common/Message';
 
-export function XpBaseLayout({
+export function BaseLayout({
 	component,
 	componentRegistry
 }: {
@@ -23,27 +23,27 @@ export function XpBaseLayout({
 
 	if (warning && (mode === 'edit' || mode === 'inline')) {
 		return (
-			<Alert mode={mode}>{warning}</Alert>
+			<Message mode={mode}>{warning}</Message>
 		);
 	}
 
 	const layoutDefinition = componentRegistry.getLayout(descriptor);
 	if (!layoutDefinition) {
 		return (
-			<Alert mode={mode}>{`Layout descriptor:${descriptor} not registered in ComponentRegistry!`}</Alert>
+			<Message mode={mode}>{`Layout descriptor:${descriptor} not registered in ComponentRegistry!`}</Message>
 		);
 	}
 
 	const {View: LayoutView} = layoutDefinition;
 	if (!LayoutView) {
 		return (
-			<Alert mode={mode}>{`No View found for layout descriptor:${descriptor} in ComponentRegistry!`}</Alert>
+			<Message mode={mode}>{`No View found for layout descriptor:${descriptor} in ComponentRegistry!`}</Message>
 		);
 	}
 
 	if (!props) {
 		return (
-			<Alert mode={mode}>{`Layout component missing props: ${descriptor}!`}</Alert>
+			<Message mode={mode}>{`Layout component missing props: ${descriptor}!`}</Message>
 		);
 	}
 

diff --git a/src/ComponentRegistry/XpBasePage.tsx → src/ComponentRegistry/BasePage.tsx b/src/ComponentRegistry/XpBasePage.tsx → src/ComponentRegistry/BasePage.tsx
@@ -5,10 +5,10 @@ import type {
 } from '../types';
 
 import * as React from 'react';
-import { Alert } from '../Alert';
-import { ErrorComponent } from '../ErrorComponent';
+import { Message } from '../Common/Message';
+import { ErrorComponent } from '../Common/ErrorComponent';
 
-export function XpBasePage({
+export function BasePage({
 	component,
 	componentRegistry
 }: {
@@ -31,27 +31,27 @@ export function XpBasePage({
 
 	if (warning && (mode === 'inline' || mode === 'edit')) {
 		return (
-			<Alert mode={mode} children={warning}/>
+			<Message mode={mode} children={warning}/>
 		);
 	}
 
 	const pageDefinition = componentRegistry.getPage(descriptor);
 	if (!pageDefinition) {
 		return (
-			<Alert mode={mode}>{`Page descriptor:${descriptor} not registered in ComponentRegistry!`}</Alert>
+			<Message mode={mode}>{`Page descriptor:${descriptor} not registered in ComponentRegistry!`}</Message>
 		);
 	}
 
 	const {View: PageView} = pageDefinition;
 	if (!PageView) {
 		return (
-			<Alert mode={mode}>{`No View found for page descriptor:${descriptor} in ComponentRegistry!`}</Alert>
+			<Message mode={mode}>{`No View found for page descriptor:${descriptor} in ComponentRegistry!`}</Message>
 		);
 	}
 
 	if (!props) {
 		return (
-			<Alert mode={mode}>{`Page component missing props: ${descriptor}!`}</Alert>
+			<Message mode={mode}>{`Page component missing props: ${descriptor}!`}</Message>
 		);
 	}
 

diff --git a/src/ComponentRegistry/XpBasePart.tsx → src/ComponentRegistry/BasePart.tsx b/src/ComponentRegistry/XpBasePart.tsx → src/ComponentRegistry/BasePart.tsx
@@ -6,9 +6,9 @@ import type {
 
 // import { toStr } from '@enonic/js-utils/value/toStr';
 import * as React from 'react';
-import { Alert } from '../Alert';
+import { Message } from '../Common/Message';
 
-export function XpBasePart({
+export function BasePart({
 	component,
 	componentRegistry
 }: {
@@ -25,7 +25,7 @@ export function XpBasePart({
 
 	if (warning && (mode === 'edit' || mode === 'inline')) {
 		return (
-			<Alert {...{
+			<Message {...{
 				children: warning,
 				'data-portal-component-type': mode === 'edit' ? 'part' : undefined,
 				mode,
@@ -39,7 +39,7 @@ export function XpBasePart({
 
 	if (!partDefinition) {
 		return (
-			<Alert {...{
+			<Message {...{
 				children: `Part descriptor:${descriptor} not registered in ComponentRegistry!`,
 				'data-portal-component-type': mode === 'edit' ? 'part' : undefined,
 				mode,
@@ -50,7 +50,7 @@ export function XpBasePart({
 	const {View: PartView} = partDefinition;
 	if (!PartView) {
 		return (
-			<Alert {...{
+			<Message {...{
 				children: `No View found for part descriptor:${descriptor} in ComponentRegistry!`,
 				'data-portal-component-type': mode === 'edit' ? 'part' : undefined,
 				mode,
@@ -60,7 +60,7 @@ export function XpBasePart({
 
 	if (!props) {
 		return (
-			<Alert {...{
+			<Message {...{
 				children: `Part component missing props: ${descriptor}!`,
 				'data-portal-component-type': mode === 'edit' ? 'part' : undefined,
 				mode,

diff --git a/src/ComponentRegistry/XpBaseText.tsx → src/ComponentRegistry/BaseText.tsx b/src/ComponentRegistry/XpBaseText.tsx → src/ComponentRegistry/BaseText.tsx
@@ -1,16 +1,16 @@
 import type {
 	ComponentRegistry,
 	RenderableTextComponent,
-	XpTextProps,
+	TextProps,
 } from '../types';
 
 import { toStr } from '@enonic/js-utils/value/toStr';
 import * as React from 'react';
-import { Alert } from '../Alert';
+import { Message } from '../Common/Message';
 import { XpFallback } from './XpFallback';
-import { XpText } from './XpText';
+import { Text } from './Text';
 
-export const XpBaseText = ({
+export const BaseText = ({
 	component,
 	componentRegistry
 }: {
@@ -25,17 +25,17 @@ export const XpBaseText = ({
 	if (!props) {
 		if (mode === 'edit' || mode === 'inline') {
 			return (
-				<Alert mode={mode}>Text component missing props: {toStr(component)}</Alert>
+				<Message mode={mode}>Text component missing props: {toStr(component)}</Message>
 			);
 		}
-		console.warn('XpBaseText: Text component missing props:', toStr(component));
+		console.warn('BaseText: Text component missing props:', toStr(component));
 		return <XpFallback component={component}/>
 	}
 
-	const textProps = props as XpTextProps;
+	const textProps = props as TextProps;
 
 	return (
-		<XpText {...{
+		<Text {...{
 			...textProps,
 			componentRegistry,
 			'data-portal-component-type': mode === 'edit' ? 'text' : undefined

diff --git a/src/ComponentRegistry.tsx → src/ComponentRegistry/ComponentRegistry.tsx b/src/ComponentRegistry.tsx → src/ComponentRegistry/ComponentRegistry.tsx
@@ -3,7 +3,7 @@ import type {
 	ComponentDefinitionParams,
 	ComponentDictionary,
 	ComponentRegistry as ComponentRegistryInterface
-} from './types';
+} from '../types';
 
 // import {XP_COMPONENT_TYPE} from './constants';