@dotcms/react 0.0.1-alpha.40 → 0.0.1-alpha.41

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

@@ -1,146 +0,0 @@
-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

@@ -1,99 +0,0 @@
-.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

@@ -1,78 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

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

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

@@ -1,155 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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}</>
-    );
-}