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

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/README.md

@@ -4,9 +4,9 @@
 
 ## Features
 
-- A collection of React components and hooks tailored to render dotCMS pages.
-- Streamlined integration with dotCMS page editor.
-- Improved development experience with comprehensive TypeScript typings.
+-   A collection of React components and hooks tailored to render dotCMS pages.
+-   Streamlined integration with dotCMS page editor.
+-   Improved development experience with comprehensive TypeScript typings.
 
 ## Installation
 
@@ -30,7 +30,7 @@ A functional component that renders a layout for a dotCMS page.
 
 #### Props
 
-- **entity**: The context for a dotCMS page.
+-   **entity**: The context for a dotCMS page.
 
 #### Usage
 
@@ -38,7 +38,7 @@ A functional component that renders a layout for a dotCMS page.
 import { DotcmsLayout } from '@dotcms/react';
 
 const MyPage = ({ entity }) => {
-  return <DotcmsLayout entity={entity} />;
+    return <DotcmsLayout entity={entity} />;
 };
 ```
 
@@ -50,7 +50,7 @@ A custom React hook that provides access to the `PageProviderContext`.
 
 #### Returns
 
-- `PageProviderContext | null`: The context value or `null` if it's not available.
+-   `PageProviderContext | null`: The context value or `null` if it's not available.
 
 #### Usage
 
@@ -58,8 +58,8 @@ A custom React hook that provides access to the `PageProviderContext`.
 import { useDotcmsPageContext } from '@dotcms/react';
 
 const MyComponent = () => {
-  const context = useDotcmsPageContext();
-  // Use the context
+    const context = useDotcmsPageContext();
+    // Use the context
 };
 ```
 
@@ -69,11 +69,11 @@ A custom React hook that sets up the page editor for a dotCMS page.
 
 #### Parameters
 
-- **props**: `PageEditorOptions` - The options for the page editor. Includes a `reloadFunction` and a `pathname`.
+-   **props**: `PageEditorOptions` - The options for the page editor. Includes a `reloadFunction` and a `pathname`.
 
 #### Returns
 
-- `React.RefObject<HTMLDivElement>[]`: A reference to the rows of the page.
+-   `React.RefObject<HTMLDivElement>[]`: A reference to the rows of the page.
 
 #### Usage
 
@@ -81,8 +81,8 @@ A custom React hook that sets up the page editor for a dotCMS page.
 import { usePageEditor } from '@dotcms/react';
 
 const MyEditor = () => {
-  const rowsRef = usePageEditor({ pathname: '/my-page' });
-  // Use the rowsRef
+    const rowsRef = usePageEditor({ pathname: '/my-page' });
+    // Use the rowsRef
 };
 ```
 
@@ -94,8 +94,8 @@ A functional component that provides a context for a dotCMS page.
 
 #### Props
 
-- **entity**: The entity representing the page's data.
-- **children**: The children components.
+-   **entity**: The entity representing the page's data.
+-   **children**: The children components.
 
 #### Usage
 
@@ -103,11 +103,7 @@ A functional component that provides a context for a dotCMS page.
 import { PageProvider } from '@dotcms/react';
 
 const MyApp = ({ entity }) => {
-  return (
-    <PageProvider entity={entity}>
-      {/* children */}
-    </PageProvider>
-  );
+    return <PageProvider entity={entity}>{/* children */}</PageProvider>;
 };
 ```
 
@@ -115,7 +111,6 @@ const MyApp = ({ entity }) => {
 
 GitHub pull requests are the preferred method to contribute code to dotCMS. Before any pull requests can be accepted, an automated tool will ask you to agree to the [dotCMS Contributor's Agreement](https://gist.github.com/wezell/85ef45298c48494b90d92755b583acb3).
 
-
 ## Licensing
 
 dotCMS comes in multiple editions and as such is dual licensed. The dotCMS Community Edition is licensed under the GPL 3.0 and is freely available for download, customization and deployment for use within organizations of all stripes. dotCMS Enterprise Editions (EE) adds a number of enterprise features and is available via a supported, indemnified commercial license from dotCMS. For the differences between the editions, see [the feature page](http://dotcms.com/cms-platform/features).
@@ -138,4 +133,4 @@ Always refer to the official [DotCMS documentation](https://www.dotcms.com/docs/
 | Code Examples   | [Codeshare](https://dotcms.com/codeshare/)                          |
 | Forums/Listserv | [via Google Groups](https://groups.google.com/forum/#!forum/dotCMS) |
 | Twitter         | @dotCMS                                                             |
-| Main Site       | [dotCMS.com](https://dotcms.com/)                                   |
+| Main Site       | [dotCMS.com](https://dotcms.com/)                                   |

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,33 +1,29 @@
 {
-  "name": "@dotcms/react",
-  "version": "0.0.1-alpha.1",
-  "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "@dotcms/client": "latest"
-  },
-  "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.js",
-  "main": "./index.js",
-  "type": "module",
-  "types": "./src/index.d.ts"
+    "name": "@dotcms/react",
+    "version": "0.0.1-alpha.11",
+    "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18",
+        "@dotcms/client": "0.0.1-alpha.11"
+    },
+    "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}

@@ -1,5 +1,4 @@
-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';
+export * from './lib/components/DotcmsLayout/DotcmsLayout';
+export * from './lib/components/PageProvider/PageProvider';
+export * from './lib/components/Row/Row';
+export * from './lib/hooks/useDotcmsPageContext';

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...
+});