@dotcms/react 0.0.1-alpha.37 → 0.0.1-alpha.39

package/src/lib/components/BlockEditorRenderer/item/BlockEditorBlock.tsx

@@ -0,0 +1,146 @@
+import { Blocks } from '../../../models/blocks.interface';
+import { ContentNode, CustomRenderer } from '../../../models/content-node.interface';
+import { BlockQuote, CodeBlock } from '../blocks/Code';
+import { DotContent } from '../blocks/Contentlet';
+import { DotCMSImage } from '../blocks/Image';
+import { BulletList, ListItem, OrderedList } from '../blocks/Lists';
+import { TableRenderer } from '../blocks/Table';
+import { Heading, Paragraph, TextBlock } from '../blocks/Texts';
+import { DotCMSVideo } from '../blocks/Video';
+
+/**
+ * Renders a block editor item based on the provided content and custom renderers.
+ *
+ * @param content - The content nodes to render.
+ * @param customRenderers - Optional custom renderers for specific node types.
+ * @returns The rendered block editor item.
+ */
+export const BlockEditorBlock = ({
+    content,
+    customRenderers
+}: {
+    content: ContentNode[];
+    customRenderers?: CustomRenderer;
+}) => {
+    return content?.map((node: ContentNode, index) => {
+        const CustomRendererComponent = customRenderers?.[node.type];
+        if (CustomRendererComponent) {
+            return (
+                <CustomRendererComponent
+                    key={`${node.type}-${index}`}
+                    {...node}
+                    content={node.content}>
+                    <BlockEditorBlock content={node.content} customRenderers={customRenderers} />
+                </CustomRendererComponent>
+            );
+        }
+
+        switch (node.type) {
+            case Blocks.PARAGRAPH:
+                return (
+                    <Paragraph key={`${node.type}-${index}`} {...node}>
+                        <BlockEditorBlock
+                            content={node.content}
+                            customRenderers={customRenderers}
+                        />
+                    </Paragraph>
+                );
+
+            case Blocks.HEADING:
+                return (
+                    <Heading key={`${node.type}-${index}`} {...node}>
+                        <BlockEditorBlock
+                            content={node.content}
+                            customRenderers={customRenderers}
+                        />
+                    </Heading>
+                );
+
+            case Blocks.TEXT:
+                return <TextBlock key={`${node.type}-${index}`} {...node} />;
+
+            case Blocks.BULLET_LIST:
+                return (
+                    <BulletList key={`${node.type}-${index}`}>
+                        <BlockEditorBlock
+                            content={node.content}
+                            customRenderers={customRenderers}
+                        />
+                    </BulletList>
+                );
+
+            case Blocks.ORDERED_LIST:
+                return (
+                    <OrderedList key={`${node.type}-${index}`}>
+                        <BlockEditorBlock
+                            content={node.content}
+                            customRenderers={customRenderers}
+                        />
+                    </OrderedList>
+                );
+
+            case Blocks.LIST_ITEM:
+                return (
+                    <ListItem key={`${node.type}-${index}`}>
+                        <BlockEditorBlock
+                            content={node.content}
+                            customRenderers={customRenderers}
+                        />
+                    </ListItem>
+                );
+
+            case Blocks.BLOCK_QUOTE:
+                return (
+                    <BlockQuote key={`${node.type}-${index}`}>
+                        <BlockEditorBlock
+                            content={node.content}
+                            customRenderers={customRenderers}
+                        />
+                    </BlockQuote>
+                );
+
+            case Blocks.CODE_BLOCK:
+                return (
+                    <CodeBlock key={`${node.type}-${index}`} {...node}>
+                        <BlockEditorBlock
+                            content={node.content}
+                            customRenderers={customRenderers}
+                        />
+                    </CodeBlock>
+                );
+
+            case Blocks.HARDBREAK:
+                return <br key={`${node.type}-${index}`} />;
+
+            case Blocks.HORIZONTAL_RULE:
+                return <hr key={`${node.type}-${index}`} />;
+
+            case Blocks.DOT_IMAGE:
+                return <DotCMSImage key={`${node.type}-${index}`} {...node} />;
+
+            case Blocks.DOT_VIDEO:
+                return <DotCMSVideo key={`${node.type}-${index}`} {...node} />;
+
+            case Blocks.TABLE:
+                return (
+                    <TableRenderer
+                        key={`${node.type}-${index}`}
+                        content={node.content}
+                        blockEditorItem={BlockEditorBlock}
+                    />
+                );
+
+            case Blocks.DOT_CONTENT:
+                return (
+                    <DotContent
+                        key={`${node.type}-${index}`}
+                        {...node}
+                        customRenderers={customRenderers}
+                    />
+                );
+
+            default:
+                return <div key={`${node.type}-${index}`}>Unknown Block Type {node.type}</div>;
+        }
+    });
+};

package/src/lib/components/Column/Column.module.css

@@ -0,0 +1,99 @@
+.col-start-1 {
+    grid-column-start: 1;
+}
+
+.col-start-2 {
+    grid-column-start: 2;
+}
+
+.col-start-3 {
+    grid-column-start: 3;
+}
+
+.col-start-4 {
+    grid-column-start: 4;
+}
+
+.col-start-5 {
+    grid-column-start: 5;
+}
+
+.col-start-6 {
+    grid-column-start: 6;
+}
+
+.col-start-7 {
+    grid-column-start: 7;
+}
+
+.col-start-8 {
+    grid-column-start: 8;
+}
+
+.col-start-9 {
+    grid-column-start: 9;
+}
+
+.col-start-10 {
+    grid-column-start: 10;
+}
+
+.col-start-11 {
+    grid-column-start: 11;
+}
+
+.col-start-12 {
+    grid-column-start: 12;
+}
+
+.col-end-1 {
+    grid-column-end: 1;
+}
+
+.col-end-2 {
+    grid-column-end: 2;
+}
+
+.col-end-3 {
+    grid-column-end: 3;
+}
+
+.col-end-4 {
+    grid-column-end: 4;
+}
+
+.col-end-5 {
+    grid-column-end: 5;
+}
+
+.col-end-6 {
+    grid-column-end: 6;
+}
+
+.col-end-7 {
+    grid-column-end: 7;
+}
+
+.col-end-8 {
+    grid-column-end: 8;
+}
+
+.col-end-9 {
+    grid-column-end: 9;
+}
+
+.col-end-10 {
+    grid-column-end: 10;
+}
+
+.col-end-11 {
+    grid-column-end: 11;
+}
+
+.col-end-12 {
+    grid-column-end: 12;
+}
+
+.col-end-13 {
+    grid-column-end: 13;
+}

package/src/lib/components/Column/Column.spec.tsx

@@ -0,0 +1,78 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import * as dotcmsClient from '@dotcms/client';
+
+import { Column } from './Column';
+
+import { MockContextRender } from '../../mocks/mockPageContext';
+import { ContainerProps } from '../Container/Container';
+
+jest.mock('../Container/Container', () => {
+    return {
+        Container: ({ containerRef }: Partial<ContainerProps>) => (
+            <div data-testid="mockContainer">{containerRef?.identifier}</div>
+        )
+    };
+});
+
+describe('Column', () => {
+    const mockColumnData = {
+        width: 6, // Adjust as needed
+        leftOffset: 3, // Adjust as needed
+        containers: [
+            { identifier: 'Container1', uuid: 'unique-id-1' },
+            { identifier: 'Container2', uuid: 'unique-id-2' }
+            // Add more containers as needed for your test
+        ],
+        styleClass: ''
+    };
+
+    describe('Column is inside editor', () => {
+        beforeEach(() => {
+            jest.spyOn(dotcmsClient, 'isInsideEditor').mockReturnValue(true);
+            render(
+                <MockContextRender mockContext={{ isInsideEditor: true }}>
+                    <Column column={mockColumnData} />
+                </MockContextRender>
+            );
+        });
+
+        it('applies the correct width and start classes based on props', () => {
+            const columnElement = screen.getByTestId('column');
+            expect(columnElement).toHaveClass('col-end-9');
+            expect(columnElement).toHaveClass('col-start-3');
+        });
+
+        it('applies the correct data attr', () => {
+            expect(screen.getByTestId('column')).toHaveAttribute('data-dot', 'column');
+        });
+
+        it('renders the correct number of containers', () => {
+            const containers = screen.getAllByTestId('mockContainer');
+            expect(containers.length).toBe(mockColumnData.containers.length);
+        });
+
+        it('passes the correct props to each Container', () => {
+            mockColumnData.containers.forEach((container) => {
+                expect(screen.getByText(container.identifier)).toBeInTheDocument();
+            });
+        });
+    });
+
+    describe('Column is not inside editor', () => {
+        beforeEach(() => {
+            jest.spyOn(dotcmsClient, 'isInsideEditor').mockReturnValue(false);
+            render(
+                <MockContextRender mockContext={{ isInsideEditor: false }}>
+                    <Column column={mockColumnData} />
+                </MockContextRender>
+            );
+        });
+
+        it('should not have dot attrs', () => {
+            const columnElement = screen.queryByTestId('column');
+            expect(columnElement).toBeNull();
+        });
+    });
+});

package/src/lib/components/Column/Column.tsx

@@ -0,0 +1,59 @@
+import { useContext } from 'react';
+
+import styles from './column.module.css';
+
+import { PageContext } from '../../contexts/PageContext';
+import { DotCMSPageContext } from '../../models';
+import { combineClasses, getPositionStyleClasses } from '../../utils/utils';
+import { Container } from '../Container/Container';
+
+/**
+ * Props for Column component to render a column with its containers.
+ *
+ * @export
+ * @interface ColumnProps
+ */
+export interface ColumnProps {
+    readonly column: DotCMSPageContext['pageAsset']['layout']['body']['rows'][0]['columns'][0];
+}
+
+/**
+ * Renders a Column with its containers using information provided by dotCMS Page API.
+ *
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
+ * @export
+ * @param {ColumnProps} { column }
+ * @return {JSX.Element} Rendered column with containers
+ */
+export function Column({ column }: ColumnProps) {
+    const { isInsideEditor } = useContext(PageContext) as DotCMSPageContext;
+
+    const { startClass, endClass } = getPositionStyleClasses(
+        column.leftOffset,
+        column.width + column.leftOffset
+    );
+
+    const combinedClasses = combineClasses([
+        styles[endClass],
+        styles[startClass],
+        column.styleClass
+    ]);
+
+    const columnProps = isInsideEditor
+        ? {
+              'data-dot': 'column',
+              'data-testid': 'column'
+          }
+        : {};
+
+    return (
+        <div {...columnProps} className={combinedClasses}>
+            {column.containers.map((container) => (
+                <Container
+                    key={`${container.identifier}-${container.uuid}`}
+                    containerRef={container}
+                />
+            ))}
+        </div>
+    );
+}

package/src/lib/components/Container/Container.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

package/src/lib/components/Container/Container.spec.tsx

@@ -0,0 +1,155 @@
+import '@testing-library/jest-dom';
+
+import { render, screen } from '@testing-library/react';
+
+import * as dotcmsClient from '@dotcms/client';
+
+import { Container } from './Container';
+
+import { MockContextRender, mockPageContext } from '../../mocks/mockPageContext';
+import { getContainersData } from '../../utils/utils';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const getContainer = ({ containerRef, containers }: { containerRef: any; containers: any }) => {
+    const { acceptTypes, maxContentlets, variantId, path } = getContainersData(
+        containers,
+        containerRef
+    );
+
+    return {
+        acceptTypes,
+        identifier: path ?? containerRef.identifier,
+        maxContentlets,
+        variantId,
+        uuid: containerRef.uuid
+    };
+};
+
+describe('Container', () => {
+    // Mock data for your context and container
+    jest.spyOn(dotcmsClient, 'isInsideEditor').mockReturnValue(true);
+
+    describe('with contentlets', () => {
+        const mockContainerRef = {
+            identifier: 'container-1',
+            uuid: '1',
+            containers: []
+        };
+
+        it('renders NoComponent component for unsupported content types', () => {
+            const updatedContext = {
+                ...mockPageContext,
+                isInsideEditor: true,
+                components: {}
+            };
+
+            render(
+                <MockContextRender mockContext={updatedContext}>
+                    <Container containerRef={mockContainerRef} />
+                </MockContextRender>
+            );
+
+            expect(screen.getByTestId('no-component')).toHaveTextContent(
+                'No Component for content-type-1'
+            );
+        });
+
+        it('render custom NoComponent component for unsetted content types', () => {
+            const updatedContext = {
+                ...mockPageContext,
+                isInsideEditor: true,
+                components: {
+                    CustomNoComponent: () => (
+                        <div data-testid="custom-no-component">Custom No Component</div>
+                    )
+                }
+            };
+
+            render(
+                <MockContextRender mockContext={updatedContext}>
+                    <Container containerRef={mockContainerRef} />
+                </MockContextRender>
+            );
+
+            expect(screen.getByTestId('custom-no-component')).toHaveTextContent(
+                'Custom No Component'
+            );
+        });
+
+        it('should render contentlets with the right attributes', () => {
+            const mockContainer = {
+                identifier: 'container-1',
+                uuid: '1',
+                containers: []
+            };
+
+            const updatedContext = {
+                ...mockPageContext,
+                components: {},
+                isInsideEditor: true
+            };
+
+            render(
+                <MockContextRender mockContext={updatedContext}>
+                    <Container containerRef={mockContainer} />
+                </MockContextRender>
+            );
+
+            const container = getContainer({
+                containerRef: mockContainer,
+                containers: updatedContext.pageAsset.containers
+            });
+
+            const contentlet = screen.getByTestId('dot-contentlet');
+            expect(contentlet).toHaveAttribute('data-dot-identifier', 'contentlet-1');
+            expect(contentlet).toHaveAttribute('data-dot-title', 'Contentlet 1');
+            expect(contentlet).toHaveAttribute('data-dot-inode', 'inode-1');
+            expect(contentlet).toHaveAttribute('data-dot-on-number-of-pages', '1');
+            expect(contentlet).toHaveAttribute('data-dot-basetype', 'base-type-1');
+            expect(contentlet).toHaveAttribute('data-dot-container', JSON.stringify(container));
+        });
+
+        describe('without contentlets', () => {
+            const mockContainerRef = {
+                identifier: 'container-2',
+                uuid: '2',
+                containers: []
+            };
+            it('renders EmptyContainer component in editor mode', () => {
+                const updatedContext = {
+                    ...mockPageContext,
+                    components: {},
+                    isInsideEditor: true
+                };
+                render(
+                    <MockContextRender mockContext={updatedContext}>
+                        <Container containerRef={mockContainerRef} />
+                    </MockContextRender>
+                );
+
+                expect(screen.getByTestId('dot-container')).toHaveTextContent(
+                    'This container is empty.'
+                );
+            });
+
+            it('dont render EmptyContainer component outside editor mode', () => {
+                jest.spyOn(dotcmsClient, 'isInsideEditor').mockReturnValue(false);
+
+                const updatedContext = {
+                    ...mockPageContext,
+                    components: {},
+                    isInsideEditor: false
+                };
+                render(
+                    <MockContextRender mockContext={updatedContext}>
+                        <Container containerRef={mockContainerRef} />
+                    </MockContextRender>
+                );
+
+                expect(screen.queryByTestId('dot-container')).toBeNull();
+            });
+        });
+    });
+
+    // Add tests for pointer events, dynamic component rendering, and other scenarios...
+});

package/src/lib/components/Container/Container.tsx

@@ -0,0 +1,122 @@
+import { useContext } from 'react';
+
+import { PageContext } from '../../contexts/PageContext';
+import { DotCMSPageContext } from '../../models';
+import { getContainersData } from '../../utils/utils';
+
+/**
+ * Component to render when there is no component for the content type.
+ *
+ * @param {{ readonly contentType: string }} { contentType }
+ * @return {*}
+ */
+function NoComponent({ contentType }: { readonly contentType: string }) {
+    return <div data-testid="no-component">No Component for {contentType}</div>;
+}
+
+/**
+ * Component to render when there is no content in the container.
+ *
+ * @return {*}
+ */
+function EmptyContent() {
+    return null;
+}
+
+/**
+ * Props for the Container component.
+ *
+ * @export
+ * @interface ContainerProps
+ */
+export interface ContainerProps {
+    readonly containerRef: DotCMSPageContext['pageAsset']['layout']['body']['rows'][0]['columns'][0]['containers'][0];
+}
+
+/**
+ * Renders a Container with its content using information provided by dotCMS Page API.
+ *
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
+ * @export
+ * @param {ContainerProps} { containerRef }
+ * @return {JSX.Element} Rendered container with content
+ */
+export function Container({ containerRef }: ContainerProps) {
+    const { isInsideEditor } = useContext(PageContext) as DotCMSPageContext;
+
+    const { identifier, uuid } = containerRef;
+
+    // Get the containers from the global context
+    const {
+        pageAsset: { containers },
+        components
+    } = useContext<DotCMSPageContext | null>(PageContext) as DotCMSPageContext;
+
+    const { acceptTypes, contentlets, maxContentlets, variantId, path } = getContainersData(
+        containers,
+        containerRef
+    );
+
+    const container = {
+        acceptTypes,
+        identifier: path ?? identifier,
+        maxContentlets,
+        variantId,
+        uuid
+    };
+
+    const containerStyles = contentlets.length
+        ? undefined
+        : {
+              width: '100%',
+              backgroundColor: '#ECF0FD',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              color: '#030E32',
+              height: '10rem'
+          };
+
+    const ContainerChildren = contentlets.map((contentlet) => {
+        const ContentTypeComponent = components[contentlet.contentType];
+        const DefaultComponent = components['CustomNoComponent'] || NoComponent;
+
+        const Component = isInsideEditor
+            ? ContentTypeComponent || DefaultComponent
+            : ContentTypeComponent || EmptyContent;
+
+        return isInsideEditor ? (
+            <div
+                data-testid="dot-contentlet"
+                data-dot-object="contentlet"
+                data-dot-identifier={contentlet.identifier}
+                data-dot-basetype={contentlet.baseType}
+                data-dot-title={contentlet.widgetTitle || contentlet.title}
+                data-dot-inode={contentlet.inode}
+                data-dot-type={contentlet.contentType}
+                data-dot-container={JSON.stringify(container)}
+                data-dot-on-number-of-pages={contentlet.onNumberOfPages}
+                key={contentlet.identifier}>
+                <Component {...contentlet} />
+            </div>
+        ) : (
+            <Component {...contentlet} key={contentlet.identifier} />
+        );
+    });
+
+    return isInsideEditor ? (
+        <div
+            data-testid="dot-container"
+            data-dot-object="container"
+            data-dot-accept-types={acceptTypes}
+            data-dot-identifier={path ?? identifier}
+            data-max-contentlets={maxContentlets}
+            data-dot-uuid={uuid}
+            style={containerStyles}>
+            {ContainerChildren.length ? ContainerChildren : 'This container is empty.'}
+        </div>
+    ) : (
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        <>{ContainerChildren}</>
+    );
+}