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

package/.babelrc

@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "@nrwl/react/babel",
+            {
+                "runtime": "automatic",
+                "useBuiltIns": "usage"
+            }
+        ]
+    ],
+    "plugins": []
+}

package/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+    "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.base.json"],
+    "ignorePatterns": ["!**/*"],
+    "overrides": [
+        {
+            "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+            "rules": {}
+        },
+        {
+            "files": ["*.ts", "*.tsx"],
+            "rules": {}
+        },
+        {
+            "files": ["*.js", "*.jsx"],
+            "rules": {}
+        }
+    ]
+}

package/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+    displayName: 'sdk-react',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
+        '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/react/babel'] }]
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/libs/sdk/react'
+};

package/package.json

@@ -1,32 +1,29 @@
 {
-  "name": "@dotcms/react",
-  "version": "0.0.1-alpha.7",
-  "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@dotcms/client": "0.0.1-alpha.7"
-  },
-  "description": "Official React Components library to render a dotCMS page.",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/dotCMS/core.git#master"
-  },
-  "keywords": [
-    "dotCMS",
-    "CMS",
-    "Content Management",
-    "API Client",
-    "REST API",
-    "React",
-    "Components"
-  ],
-  "author": "dotcms <dev@dotcms.com>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/dotCMS/core/issues"
-  },
-  "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/react/README.md",
-  "module": "./index.esm.js",
-  "type": "module",
-  "main": "./index.esm.js"
+    "name": "@dotcms/react",
+    "version": "0.0.1-alpha.9",
+    "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18",
+        "@dotcms/client": "0.0.1-alpha.9"
+    },
+    "description": "Official React Components library to render a dotCMS page.",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/dotCMS/core.git#master"
+    },
+    "keywords": [
+        "dotCMS",
+        "CMS",
+        "Content Management",
+        "API Client",
+        "REST API",
+        "React",
+        "Components"
+    ],
+    "author": "dotcms <dev@dotcms.com>",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/dotCMS/core/issues"
+    },
+    "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/react/README.md"
 }

package/project.json

@@ -0,0 +1,51 @@
+{
+    "name": "sdk-react",
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/sdk/react/src",
+    "projectType": "library",
+    "tags": [],
+    "targets": {
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": ["libs/sdk/react/**/*.{ts,tsx,js,jsx}"]
+            }
+        },
+        "build": {
+            "executor": "@nrwl/rollup:rollup",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/sdk/react",
+                "tsConfig": "libs/sdk/react/tsconfig.lib.json",
+                "project": "libs/sdk/react/package.json",
+                "entryFile": "libs/sdk/react/src/index.ts",
+                "external": ["react/jsx-runtime"],
+                "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+                "compiler": "babel",
+                "extractCss": false,
+                "assets": [
+                    {
+                        "glob": "libs/sdk/react/README.md",
+                        "input": ".",
+                        "output": "."
+                    }
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/sdk/react/jest.config.ts",
+                "passWithNoTests": true
+            },
+            "configurations": {
+                "ci": {
+                    "ci": true,
+                    "codeCoverage": true
+                }
+            }
+        }
+    }
+}

package/src/{index.d.ts → index.ts}

@@ -2,4 +2,3 @@ export * from './lib/components/DotcmsLayout/DotcmsLayout';
 export * from './lib/components/PageProvider/PageProvider';
 export * from './lib/components/Row/Row';
 export * from './lib/hooks/useDotcmsPageContext';
-export * from './lib/hooks/usePageEditor';

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,45 @@
+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

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

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

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

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

@@ -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,5 +1,8 @@
-/// <reference types="react" />
-import { PageProviderContext } from '../PageProvider/PageProvider';
+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.
@@ -20,7 +23,10 @@ export type DotcmsPageProps = {
      * @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.
@@ -29,4 +35,14 @@ export type DotcmsPageProps = {
  * @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;
+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 {
+ * }
+*/