@dotcms/react 0.0.1-alpha.7 → 0.0.1-alpha.9

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,14 +1,20 @@
 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;
@@ -19,11 +25,13 @@ export interface ContainerData {
                 identifier: string;
                 title: string;
                 inode: string;
+                onNumberOfPages: number;
                 widgetTitle?: string;
             }[];
         };
     };
 }
+
 export interface PageProviderContext {
     /**
      * `components` is a property of the `PageProviderProps` type.
@@ -71,6 +79,7 @@ export interface PageProviderContext {
     };
     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.
@@ -79,4 +88,8 @@ export interface PageProviderContext {
  * @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;
+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);

package/src/lib/hooks/useDotcmsEditor.spec.ts

@@ -0,0 +1,56 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import * as dotcmsClient from '@dotcms/client';
+
+import { useDotcmsEditor } from './useDotcmsEditor';
+
+describe('useDotcmsEditor', () => {
+    let isInsideEditorSpy: jest.SpyInstance<boolean>;
+    let initEditorSpy: jest.SpyInstance<void>;
+    let destroyEditorSpy: jest.SpyInstance<void>;
+
+    beforeEach(() => {
+        isInsideEditorSpy = jest.spyOn(dotcmsClient, 'isInsideEditor');
+        initEditorSpy = jest.spyOn(dotcmsClient, 'initEditor');
+        destroyEditorSpy = jest.spyOn(dotcmsClient, 'destroyEditor');
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should call initEditor when inside editor', () => {
+        isInsideEditorSpy.mockReturnValueOnce(true);
+
+        renderHook(() => useDotcmsEditor());
+
+        expect(initEditorSpy).toHaveBeenCalled();
+    });
+
+    it('should call destroyEditor on unmount when inside editor', () => {
+        isInsideEditorSpy.mockReturnValueOnce(true);
+
+        const { unmount } = renderHook(() => useDotcmsEditor());
+
+        unmount();
+
+        expect(destroyEditorSpy).toHaveBeenCalled();
+    });
+
+    it('should not call initEditor or destroyEditor when outside editor', () => {
+        isInsideEditorSpy.mockReturnValueOnce(false);
+
+        renderHook(() => useDotcmsEditor());
+
+        expect(initEditorSpy).not.toHaveBeenCalled();
+        expect(destroyEditorSpy).not.toHaveBeenCalled();
+    });
+
+    it('should call initEditor with options', () => {
+        isInsideEditorSpy.mockReturnValueOnce(true);
+
+        renderHook(() => useDotcmsEditor({ onReload: jest.fn() }));
+
+        expect(initEditorSpy).toHaveBeenCalledWith({ onReload: expect.any(Function) });
+    });
+});

package/src/lib/hooks/useDotcmsEditor.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+
+import {
+    DotCMSPageEditorConfig,
+    destroyEditor,
+    initEditor,
+    isInsideEditor,
+    updateNavigation
+} from '@dotcms/client';
+export const useDotcmsEditor = (config?: DotCMSPageEditorConfig) => {
+    const [isInsideEditorPage, setIsInsideEditorPage] = useState(false);
+    useEffect(() => {
+        const insideEditor = isInsideEditor();
+        if (insideEditor) {
+            initEditor(config);
+            updateNavigation(config?.pathname || '/');
+        }
+
+        setIsInsideEditorPage(insideEditor);
+
+        return () => {
+            if (insideEditor) {
+                destroyEditor();
+            }
+        };
+    }, [config]);
+
+    return isInsideEditorPage;
+};

package/src/lib/hooks/useDotcmsPageContext.spec.tsx

@@ -0,0 +1,43 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { ReactNode } from 'react';
+
+import { useDotcmsPageContext } from './useDotcmsPageContext'; // Adjust the import path based on your file structure.
+
+import { PageProviderContext } from '../components/PageProvider/PageProvider';
+import { PageContext } from '../contexts/PageContext';
+
+const mockContextValue: PageProviderContext = {
+    components: {},
+    containers: {},
+    layout: {
+        header: false,
+        footer: false,
+        body: {
+            rows: []
+        }
+    },
+    page: {
+        title: 'Test Page',
+        identifier: 'test-page'
+    },
+    viewAs: {
+        language: {
+            id: 'en'
+        },
+        persona: {
+            keyTag: 'persona'
+        }
+    }
+};
+
+describe('useDotcmsPageContext', () => {
+    it('returns the context value', () => {
+        const { result } = renderHook(() => useDotcmsPageContext(), {
+            wrapper: ({ children }: { children: ReactNode }) => (
+                <PageContext.Provider value={mockContextValue}>{children}</PageContext.Provider>
+            )
+        });
+
+        expect(result.current).toEqual(mockContextValue);
+    });
+});

package/src/lib/hooks/{useDotcmsPageContext.d.ts → useDotcmsPageContext.tsx}

@@ -1,4 +1,8 @@
+import { useContext } from 'react';
+
 import { PageProviderContext } from '../components/PageProvider/PageProvider';
+import { PageContext } from '../contexts/PageContext';
+
 /**
  * `useDotcmsPageContext` is a custom React hook that provides access to the `PageProviderContext`.
  * It takes no parameters and returns the context value or `null` if it's not available.
@@ -6,4 +10,6 @@ import { PageProviderContext } from '../components/PageProvider/PageProvider';
  * @category Hooks
  * @returns {PageProviderContext | null} - The context value or `null` if it's not available.
  */
-export declare function useDotcmsPageContext(): PageProviderContext | null;
+export function useDotcmsPageContext() {
+    return useContext<PageProviderContext | null>(PageContext);
+}

package/src/lib/mocks/mockPageContext.tsx

@@ -0,0 +1,84 @@
+import { PageProvider, PageProviderContext } from '../components/PageProvider/PageProvider';
+
+export const mockPageContext: PageProviderContext = {
+    layout: {
+        header: true,
+        footer: true,
+        body: {
+            rows: [
+                {
+                    styleClass: 'row',
+                    columns: [
+                        {
+                            styleClass: 'col-md-12',
+                            width: 6,
+                            leftOffset: 3,
+                            containers: [
+                                {
+                                    identifier: 'container-1',
+                                    uuid: 'uuid-1'
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    },
+    containers: {
+        'container-1': {
+            container: {
+                path: 'path/to/container',
+                identifier: 'container-1',
+                maxContentlets: 100,
+                parentPermissionable: {}
+            },
+            containerStructures: [
+                {
+                    contentTypeVar: 'content-type-1'
+                }
+            ],
+            contentlets: {
+                'uuid-1': [
+                    {
+                        contentType: 'content-type-1',
+                        identifier: 'contentlet-1',
+                        title: 'Contentlet 1',
+                        inode: 'inode-1',
+                        onNumberOfPages: 1
+                    }
+                ]
+            }
+        },
+        'container-2': {
+            container: {
+                path: 'path/to/container',
+                identifier: 'container-2',
+                maxContentlets: 100,
+                parentPermissionable: {}
+            },
+            containerStructures: [
+                {
+                    contentTypeVar: 'content-type-2'
+                }
+            ],
+            contentlets: {
+                'uuid-2': []
+            }
+        }
+    },
+    page: { identifier: 'page-1', title: 'Hello Page' },
+    viewAs: { language: { id: 'en' }, persona: { keyTag: 'persona-1' } },
+    components: {},
+    isInsideEditor: false
+};
+
+export const MockContextRender = ({
+    children,
+    mockContext
+}: {
+    children: JSX.Element;
+    mockContext: Partial<PageProviderContext>;
+}) => {
+    return <PageProvider entity={mockContext}>{children}</PageProvider>;
+};

package/src/lib/utils/utils.ts

@@ -0,0 +1,69 @@
+import { ContainerData, PageProviderContext } from '../components/PageProvider/PageProvider';
+
+const endClassMap: Record<number, string> = {
+    1: 'col-end-1',
+    2: 'col-end-2',
+    3: 'col-end-3',
+    4: 'col-end-4',
+    5: 'col-end-5',
+    6: 'col-end-6',
+    7: 'col-end-7',
+    8: 'col-end-8',
+    9: 'col-end-9',
+    10: 'col-end-10',
+    11: 'col-end-11',
+    12: 'col-end-12',
+    13: 'col-end-13'
+};
+
+const startClassMap: Record<number, string> = {
+    1: 'col-start-1',
+    2: 'col-start-2',
+    3: 'col-start-3',
+    4: 'col-start-4',
+    5: 'col-start-5',
+    6: 'col-start-6',
+    7: 'col-start-7',
+    8: 'col-start-8',
+    9: 'col-start-9',
+    10: 'col-start-10',
+    11: 'col-start-11',
+    12: 'col-start-12'
+};
+
+export const getContainersData = (
+    containers: ContainerData,
+    containerRef: PageProviderContext['layout']['body']['rows'][0]['columns'][0]['containers'][0]
+) => {
+    const { identifier, uuid } = containerRef;
+
+    const { containerStructures, container } = containers[identifier];
+
+    // Get the variant id
+    const { variantId } = container?.parentPermissionable || {};
+
+    // Get accepts types of content types for this container
+    const acceptTypes = containerStructures.map((structure) => structure.contentTypeVar).join(',');
+
+    // Get the contentlets for "this" container
+    const contentlets = containers[identifier].contentlets[`uuid-${uuid}`];
+
+    return {
+        ...containers[identifier].container,
+        acceptTypes,
+        contentlets,
+        variantId
+    };
+};
+
+export const combineClasses = (classes: string[]) => classes.filter(Boolean).join(' ');
+
+export const getPositionStyleClasses = (start: number, end: number) => {
+    const startClass = startClassMap[start];
+    const endClass = endClassMap[end];
+
+    return {
+        startClass,
+        endClass
+    };
+};

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "allowJs": false,
+        "esModuleInterop": false,
+        "allowSyntheticDefaultImports": true,
+        "strict": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ],
+    "extends": "../../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "types": ["node"]
+    },
+    "files": [
+        "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+        "../../../node_modules/@nrwl/react/typings/image.d.ts"
+    ],
+    "exclude": [
+        "jest.config.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.tsx",
+        "src/**/*.test.tsx",
+        "src/**/*.spec.js",
+        "src/**/*.test.js",
+        "src/**/*.spec.jsx",
+        "src/**/*.test.jsx"
+    ],
+    "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,20 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "module": "commonjs",
+        "types": ["jest", "node"]
+    },
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.test.tsx",
+        "src/**/*.spec.tsx",
+        "src/**/*.test.js",
+        "src/**/*.spec.js",
+        "src/**/*.test.jsx",
+        "src/**/*.spec.jsx",
+        "src/**/*.d.ts"
+    ]
+}

package/index.esm.d.ts

@@ -1 +0,0 @@
-export * from "./src/index";