@dotcms/react 0.0.1-alpha.9 → 0.0.1-beta.2

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,45 +0,0 @@
-import { useContext } from 'react';
-
-import styles from './column.module.css';
-
-import { PageContext } from '../../contexts/PageContext';
-import { combineClasses, getPositionStyleClasses } from '../../utils/utils';
-import { Container } from '../Container/Container';
-import { PageProviderContext } from '../PageProvider/PageProvider';
-
-export interface ColumnProps {
-    readonly column: PageProviderContext['layout']['body']['rows'][0]['columns'][0];
-}
-
-export function Column({ column }: ColumnProps) {
-    const { isInsideEditor } = useContext(PageContext) as PageProviderContext;
-
-    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,82 +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';
-
-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 NoContent component for unsupported content types', () => {
-            const updatedContext = {
-                ...mockPageContext,
-                components: {}
-            };
-
-            render(
-                <MockContextRender mockContext={updatedContext}>
-                    <Container containerRef={mockContainerRef} />
-                </MockContextRender>
-            );
-
-            expect(screen.getByTestId('no-component')).toHaveTextContent(
-                'No Component for content-type-1'
-            );
-        });
-
-        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('empty-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('empty-container')).toBeNull();
-            });
-        });
-    });
-
-    // Add tests for pointer events, dynamic component rendering, and other scenarios...
-});

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

@@ -1,105 +0,0 @@
-import { useContext } from 'react';
-
-import { PageContext } from '../../contexts/PageContext';
-import { getContainersData } from '../../utils/utils';
-import { PageProviderContext } from '../PageProvider/PageProvider';
-
-const FAKE_CONTENLET = {
-    identifier: 'TEMP_EMPTY_CONTENTLET',
-    title: 'TEMP_EMPTY_CONTENTLET',
-    contentType: 'TEMP_EMPTY_CONTENTLET_TYPE',
-    inode: 'TEMPY_EMPTY_CONTENTLET_INODE',
-    widgetTitle: 'TEMP_EMPTY_CONTENTLET',
-    onNumberOfPages: 1
-};
-
-function EmptyContainer() {
-    return (
-        <div
-            data-testid="empty-container"
-            style={{
-                width: '100%',
-                backgroundColor: '#ECF0FD',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                color: '#030E32',
-                height: '10rem'
-            }}>
-            This container is empty.
-        </div>
-    );
-}
-
-function NoContent({ contentType }: { readonly contentType: string }) {
-    return <div data-testid="no-component">No Component for {contentType}</div>;
-}
-
-export interface ContainerProps {
-    readonly containerRef: PageProviderContext['layout']['body']['rows'][0]['columns'][0]['containers'][0];
-}
-
-export function Container({ containerRef }: ContainerProps) {
-    const { isInsideEditor } = useContext(PageContext) as PageProviderContext;
-
-    const { identifier, uuid } = containerRef;
-
-    // Get the containers from the global context
-    const { containers, components } = useContext<PageProviderContext | null>(
-        PageContext
-    ) as PageProviderContext;
-
-    const { acceptTypes, contentlets, maxContentlets, variantId, path } = getContainersData(
-        containers,
-        containerRef
-    );
-
-    const updatedContentlets =
-        contentlets.length === 0 && isInsideEditor ? [FAKE_CONTENLET] : contentlets;
-
-    const container = {
-        acceptTypes,
-        identifier: path ?? identifier,
-        maxContentlets,
-        variantId,
-        uuid
-    };
-
-    const renderContentlets = updatedContentlets.map((contentlet) => {
-        const ContentTypeComponent = components[contentlet.contentType] || NoContent;
-
-        const Component =
-            contentlet.identifier === 'TEMP_EMPTY_CONTENTLET'
-                ? EmptyContainer
-                : ContentTypeComponent;
-
-        return isInsideEditor ? (
-            <div
-                data-dot-object="contentlet"
-                data-dot-identifier={contentlet.identifier}
-                data-dot-title={contentlet.widgetTitle || contentlet.title}
-                data-dot-inode={contentlet.inode}
-                data-dot-type={contentlet.contentType}
-                data-dot-container={JSON.stringify(container)}
-                key={contentlet.identifier}>
-                <Component {...contentlet} />
-            </div>
-        ) : (
-            <Component {...contentlet} key={contentlet.identifier} />
-        );
-    });
-
-    return isInsideEditor ? (
-        <div
-            data-dot-object="container"
-            data-dot-accept-types={acceptTypes}
-            data-dot-identifier={path ?? identifier}
-            data-max-contentlets={maxContentlets}
-            data-uuid={uuid}>
-            {renderContentlets}
-        </div>
-    ) : (
-        // eslint-disable-next-line react/jsx-no-useless-fragment
-        <>{renderContentlets}</>
-    );
-}

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

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

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

@@ -1,41 +0,0 @@
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-import { ElementRef, ForwardRefExoticComponent } from 'react';
-
-import { DotcmsLayout } from './DotcmsLayout';
-
-import { mockPageContext } from '../../mocks/mockPageContext';
-
-jest.mock('../Row/Row', () => {
-    const { forwardRef } = jest.requireActual('react');
-
-    return {
-        Row: forwardRef(
-            (
-                { children }: { children: JSX.Element },
-                ref: ElementRef<ForwardRefExoticComponent<unknown>>
-            ) => (
-                <div data-testid="mockRow" ref={ref}>
-                    {children}
-                </div>
-            )
-        )
-    };
-});
-
-jest.mock('../PageProvider/PageProvider', () => {
-    return {
-        PageProvider: ({ children }: { children: JSX.Element }) => (
-            <div data-testid="mockPageProvider">{children}</div>
-        )
-    };
-});
-
-describe('DotcmsLayout', () => {
-    it('renders correctly with PageProvider and rows', () => {
-        render(<DotcmsLayout entity={{ ...mockPageContext, isInsideEditor: true }} />);
-        expect(screen.getAllByTestId('mockRow').length).toBe(
-            mockPageContext.layout.body.rows.length
-        );
-    });
-});

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

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

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

@@ -1,54 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-
-import '@testing-library/jest-dom';
-import { PageProvider } from './PageProvider';
-
-import { PageContext } from '../../contexts/PageContext';
-
-const MockChildComponent = () => {
-    const context = React.useContext(PageContext);
-
-    return <div data-testid="mockChild">{JSON.stringify(context?.page.title)}</div>;
-};
-
-describe('PageProvider', () => {
-    const mockEntity = {
-        page: {
-            title: 'Test Page',
-            identifier: 'test-page-1'
-        }
-        // ... add other context properties as needed
-    };
-
-    it('provides the context to its children', () => {
-        render(
-            <PageProvider entity={mockEntity}>
-                <MockChildComponent />
-            </PageProvider>
-        );
-        expect(screen.getByTestId('mockChild')).toHaveTextContent(mockEntity.page.title);
-    });
-
-    it('updates context when entity changes', () => {
-        const { rerender } = render(
-            <PageProvider entity={mockEntity}>
-                <MockChildComponent />
-            </PageProvider>
-        );
-        // Change the context
-        const newEntity = {
-            ...mockEntity,
-            page: {
-                ...mockEntity.page,
-                title: 'Updated Test Page'
-            }
-        };
-        rerender(
-            <PageProvider entity={newEntity}>
-                <MockChildComponent />
-            </PageProvider>
-        );
-        expect(screen.getByTestId('mockChild')).toHaveTextContent(newEntity.page.title);
-    });
-});

package/src/lib/components/PageProvider/PageProvider.tsx

@@ -1,95 +0,0 @@
-import { ReactNode } from 'react';
-
-import { PageContext } from '../../contexts/PageContext';
-
-export interface PageProviderProps {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    readonly entity: any;
-    readonly children: ReactNode;
-}
-
-export interface ContainerData {
-    [key: string]: {
-        container: {
-            path: string;
-            identifier: string;
-            maxContentlets: number;
-            parentPermissionable: Record<string, string>;
-        };
-        containerStructures: {
-            contentTypeVar: string;
-        }[];
-        contentlets: {
-            [key: string]: {
-                contentType: string;
-                identifier: string;
-                title: string;
-                inode: string;
-                onNumberOfPages: number;
-                widgetTitle?: string;
-            }[];
-        };
-    };
-}
-
-export interface PageProviderContext {
-    /**
-     * `components` is a property of the `PageProviderProps` type.
-     * It is an object that maps content type variables to their corresponding React components.
-     *
-     * It will be use to render the contentlets in the page.
-     *
-     * @property {Object} components
-     * @memberof PageProviderProps
-     * @type {Object.<string, React.ElementType>}
-     */
-    components: {
-        [contentTypeVariable: string]: React.ElementType;
-    };
-    containers: ContainerData;
-    layout: {
-        header: boolean;
-        footer: boolean;
-        body: {
-            rows: {
-                styleClass: string;
-                columns: {
-                    styleClass: string;
-                    width: number;
-                    leftOffset: number;
-                    containers: {
-                        identifier: string;
-                        uuid: string;
-                    }[];
-                }[];
-            }[];
-        };
-    };
-    page: {
-        title: string;
-        identifier: string;
-    };
-    viewAs: {
-        language: {
-            id: string;
-        };
-        persona: {
-            keyTag: string;
-        };
-    };
-    isInsideEditor: boolean;
-}
-
-/**
- * `PageProvider` is a functional component that provides a context for a DotCMS page.
- * It takes a `PageProviderProps` object as a parameter and returns a JSX element.
- *
- * @category Components
- * @param {PageProviderProps} props - The properties for the PageProvider. Includes an `entity` and `children`.
- * @returns {JSX.Element} - A JSX element that provides a context for a DotCMS page.
- */
-export function PageProvider(props: PageProviderProps): JSX.Element {
-    const { entity, children } = props;
-
-    return <PageContext.Provider value={entity}>{children}</PageContext.Provider>;
-}

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

@@ -1,5 +0,0 @@
-.row {
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    gap: 1rem;
-}