@dotcms/react 0.0.1-alpha.1 → 0.0.1-alpha.11

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

@@ -0,0 +1,106 @@
+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)}
+                data-dot-on-number-of-pages={contentlet.onNumberOfPages}
+                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

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

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

@@ -0,0 +1,41 @@
+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/DotcmsLayout/{DotcmsLayout.d.ts → DotcmsLayout.tsx}

@@ -1,32 +1,48 @@
-/// <reference types="react" />
-import { PageProviderContext } from '../PageProvider/PageProvider';
-/**
- * `DotcmsPageProps` is a type that defines the properties for the `DotcmsLayout` component.
- * It includes a readonly `entity` property that represents the context for a DotCMS page.
- *
- * @typedef {Object} DotcmsPageProps
- *
- * @property {PageProviderContext} entity - The context for a DotCMS page.
- * @readonly
- */
-export type DotcmsPageProps = {
-    /**
-     * `entity` is a readonly property of the `DotcmsPageProps` type.
-     * It represents the context for a DotCMS page and is of type `PageProviderContext`.
-     *
-     * @property {PageProviderContext} entity
-     * @memberof DotcmsPageProps
-     * @type {PageProviderContext}
-     * @readonly
-     */
-    readonly entity: PageProviderContext;
-};
-/**
- * `DotcmsLayout` is a functional component that renders a layout for a DotCMS page.
- * It takes a `DotcmsPageProps` object as a parameter and returns a JSX element.
- *
- * @category Components
- * @param {DotcmsPageProps} props - The properties for the DotCMS page.
- * @returns {JSX.Element} - A JSX element that represents the layout for a DotCMS page.
- */
-export declare function DotcmsLayout(props: DotcmsPageProps): JSX.Element;
+import { DotCMSPageEditorConfig } from '@dotcms/client';
+
+import { useDotcmsEditor } from '../../hooks/useDotcmsEditor';
+import { PageProvider, PageProviderContext } from '../PageProvider/PageProvider';
+import { Row } from '../Row/Row';
+/**
+ * `DotcmsPageProps` is a type that defines the properties for the `DotcmsLayout` component.
+ * It includes a readonly `entity` property that represents the context for a DotCMS page.
+ *
+ * @typedef {Object} DotcmsPageProps
+ *
+ * @property {PageProviderContext} entity - The context for a DotCMS page.
+ * @readonly
+ */
+export type DotcmsPageProps = {
+    /**
+     * `entity` is a readonly property of the `DotcmsPageProps` type.
+     * It represents the context for a DotCMS page and is of type `PageProviderContext`.
+     *
+     * @property {PageProviderContext} entity
+     * @memberof DotcmsPageProps
+     * @type {PageProviderContext}
+     * @readonly
+     */
+    readonly entity: PageProviderContext;
+
+    readonly config?: DotCMSPageEditorConfig;
+};
+
+/**
+ * `DotcmsLayout` is a functional component that renders a layout for a DotCMS page.
+ * It takes a `DotcmsPageProps` object as a parameter and returns a JSX element.
+ *
+ * @category Components
+ * @param {DotcmsPageProps} props - The properties for the DotCMS page.
+ * @returns {JSX.Element} - A JSX element that represents the layout for a DotCMS page.
+ */
+export function DotcmsLayout({ entity, config }: DotcmsPageProps): JSX.Element {
+    const isInsideEditor = useDotcmsEditor(config);
+
+    return (
+        <PageProvider entity={{ ...entity, isInsideEditor }}>
+            {entity.layout.body.rows.map((row, index) => (
+                <Row key={index} row={row} />
+            ))}
+        </PageProvider>
+    );
+}

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

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

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

@@ -0,0 +1,54 @@
+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.d.ts → PageProvider.tsx}

@@ -1,81 +1,95 @@
-import { ReactNode } from 'react';
-export interface PageProviderProps {
-    readonly entity: any;
-    readonly children: ReactNode;
-}
-export interface ContainerData {
-    [key: string]: {
-        container: {
-            path: string;
-            identifier: string;
-            maxContentlets: number;
-        };
-        containerStructures: {
-            contentTypeVar: string;
-        }[];
-        contentlets: {
-            [key: string]: {
-                contentType: string;
-                identifier: string;
-                title: string;
-                inode: string;
-                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;
-        };
-    };
-}
-/**
- * `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 declare function PageProvider(props: PageProviderProps): JSX.Element;
+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

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

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

@@ -0,0 +1,92 @@
+import { render, screen } from '@testing-library/react';
+
+import { Row } from './Row';
+
+import { MockContextRender } from '../../mocks/mockPageContext';
+import { ColumnProps } from '../Column/Column';
+import { PageProviderContext } from '../PageProvider/PageProvider';
+
+import '@testing-library/jest-dom';
+
+jest.mock('../Column/Column', () => {
+    return {
+        Column: ({ column }: ColumnProps) => (
+            <div data-testid="mockColumn">{JSON.stringify(column)}</div>
+        )
+    };
+});
+
+describe('Row', () => {
+    const mockRowData: PageProviderContext['layout']['body']['rows'][0] = {
+        columns: [
+            {
+                width: 60,
+                leftOffset: 2,
+                containers: [
+                    {
+                        identifier: '123',
+                        uuid: '1'
+                    }
+                ],
+                styleClass: ''
+            },
+            {
+                width: 20,
+                leftOffset: 0,
+                containers: [
+                    {
+                        identifier: '456',
+                        uuid: '2'
+                    }
+                ],
+                styleClass: ''
+            }
+        ],
+        styleClass: ''
+    };
+
+    describe('row is inside editor', () => {
+        beforeEach(() => {
+            render(
+                <MockContextRender mockContext={{ isInsideEditor: true }}>
+                    <Row row={mockRowData} />
+                </MockContextRender>
+            );
+        });
+
+        it('should set the data-dot attribute', () => {
+            expect(screen.getByTestId('row')).toHaveAttribute('data-dot', 'row');
+        });
+
+        it('renders the correct number of mock columns', () => {
+            const mockColumns = screen.getAllByTestId('mockColumn');
+            expect(mockColumns.length).toBe(mockRowData.columns.length);
+        });
+
+        it('passes the correct props to each mock Column', () => {
+            mockRowData.columns.forEach((column, index) => {
+                expect(screen.getAllByTestId('mockColumn')[index].innerHTML).toBe(
+                    JSON.stringify(column)
+                );
+            });
+        });
+
+        it('renders the correct number of columns', () => {
+            const columns = screen.getAllByTestId('mockColumn');
+            expect(columns.length).toBe(mockRowData.columns.length);
+        });
+    });
+    describe('row is not inside editor', () => {
+        beforeEach(() => {
+            render(
+                <MockContextRender mockContext={{ isInsideEditor: false }}>
+                    <Row row={mockRowData} />
+                </MockContextRender>
+            );
+        });
+
+        it('should not have dot attr', () => {
+            expect(screen.queryByTestId('row')).toBeNull();
+        });
+    });
+});

package/src/lib/components/Row/Row.tsx

@@ -0,0 +1,51 @@
+import { forwardRef, useContext } from 'react';
+
+import styles from './row.module.css';
+
+import { PageContext } from '../../contexts/PageContext';
+import { combineClasses } from '../../utils/utils';
+import { Column } from '../Column/Column';
+import { PageProviderContext } from '../PageProvider/PageProvider';
+
+/**
+ * Props for the row component
+ *
+ * @interface RowProps
+ *
+ */
+export interface RowProps {
+    /**
+     * Row data
+     *
+     * @type {PageProviderContext['layout']['body']['rows'][0]}
+     * @memberof RowProps
+     */
+    row: PageProviderContext['layout']['body']['rows'][0];
+}
+
+/**
+ * Renders a row
+ *
+ * @category Components
+ * @param {React.ForwardedRef<HTMLDivElement, RowProps>} ref
+ * @return {*}
+ */
+export const Row = forwardRef<HTMLDivElement, RowProps>((props: RowProps, ref) => {
+    const { isInsideEditor } = useContext<PageProviderContext | null>(
+        PageContext
+    ) as PageProviderContext;
+
+    const { row } = props;
+
+    const combinedClasses = combineClasses([styles.row, row.styleClass]);
+
+    const rowProps = isInsideEditor ? { 'data-dot': 'row', 'data-testid': 'row', ref } : {};
+
+    return (
+        <div {...rowProps} className={combinedClasses}>
+            {row.columns.map((column, index) => (
+                <Column key={index} column={column} />
+            ))}
+        </div>
+    );
+});

package/src/lib/contexts/PageContext.tsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+import { PageProviderContext } from '../components/PageProvider/PageProvider';
+
+export const PageContext = createContext<PageProviderContext | null>(null);