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

package/package.json

@@ -1,29 +1,32 @@
 {
-    "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"
+  "name": "@dotcms/react",
+  "version": "0.0.1-alpha.12",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@dotcms/client": "0.0.1-alpha.12"
+  },
+  "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"
 }

package/src/lib/components/Column/Column.d.ts

@@ -0,0 +1,5 @@
+import { PageProviderContext } from '../PageProvider/PageProvider';
+export interface ColumnProps {
+    readonly column: PageProviderContext['layout']['body']['rows'][0]['columns'][0];
+}
+export declare function Column({ column }: ColumnProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/Container/Container.d.ts

@@ -0,0 +1,5 @@
+import { PageProviderContext } from '../PageProvider/PageProvider';
+export interface ContainerProps {
+    readonly containerRef: PageProviderContext['layout']['body']['rows'][0]['columns'][0]['containers'][0];
+}
+export declare function Container({ containerRef }: ContainerProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/DotcmsLayout/{DotcmsLayout.tsx → DotcmsLayout.d.ts}

@@ -1,8 +1,6 @@
+/// <reference types="react" />
 import { DotCMSPageEditorConfig } from '@dotcms/client';
-
-import { useDotcmsEditor } from '../../hooks/useDotcmsEditor';
-import { PageProvider, PageProviderContext } from '../PageProvider/PageProvider';
-import { Row } from '../Row/Row';
+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.
@@ -23,10 +21,8 @@ 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.
@@ -35,14 +31,4 @@ 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 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>
-    );
-}
+export declare function DotcmsLayout({ entity, config }: DotcmsPageProps): JSX.Element;

package/src/lib/components/PageProvider/{PageProvider.tsx → PageProvider.d.ts}

@@ -1,13 +1,8 @@
 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: {
@@ -31,7 +26,6 @@ export interface ContainerData {
         };
     };
 }
-
 export interface PageProviderContext {
     /**
      * `components` is a property of the `PageProviderProps` type.
@@ -79,7 +73,6 @@ 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.
@@ -88,8 +81,4 @@ 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 function PageProvider(props: PageProviderProps): JSX.Element {
-    const { entity, children } = props;
-
-    return <PageContext.Provider value={entity}>{children}</PageContext.Provider>;
-}
+export declare function PageProvider(props: PageProviderProps): JSX.Element;

package/src/lib/components/Row/Row.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+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 declare const Row: import("react").ForwardRefExoticComponent<RowProps & import("react").RefAttributes<HTMLDivElement>>;

package/src/lib/contexts/PageContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PageProviderContext } from '../components/PageProvider/PageProvider';
+export declare const PageContext: import("react").Context<PageProviderContext | null>;

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

@@ -0,0 +1,2 @@
+import { DotCMSPageEditorConfig } from '@dotcms/client';
+export declare const useDotcmsEditor: (config?: DotCMSPageEditorConfig) => boolean;

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

@@ -1,8 +1,4 @@
-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.
@@ -10,6 +6,4 @@ import { PageContext } from '../contexts/PageContext';
  * @category Hooks
  * @returns {PageProviderContext | null} - The context value or `null` if it's not available.
  */
-export function useDotcmsPageContext() {
-    return useContext<PageProviderContext | null>(PageContext);
-}
+export declare function useDotcmsPageContext(): PageProviderContext | null;

package/src/lib/mocks/mockPageContext.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { PageProviderContext } from '../components/PageProvider/PageProvider';
+export declare const mockPageContext: PageProviderContext;
+export declare const MockContextRender: ({ children, mockContext }: {
+    children: JSX.Element;
+    mockContext: Partial<PageProviderContext>;
+}) => import("react/jsx-runtime").JSX.Element;

package/src/lib/utils/utils.d.ts

@@ -0,0 +1,22 @@
+import { ContainerData, PageProviderContext } from '../components/PageProvider/PageProvider';
+export declare const getContainersData: (containers: ContainerData, containerRef: PageProviderContext['layout']['body']['rows'][0]['columns'][0]['containers'][0]) => {
+    acceptTypes: string;
+    contentlets: {
+        contentType: string;
+        identifier: string;
+        title: string;
+        inode: string;
+        onNumberOfPages: number;
+        widgetTitle?: string | undefined;
+    }[];
+    variantId: string;
+    path: string;
+    identifier: string;
+    maxContentlets: number;
+    parentPermissionable: Record<string, string>;
+};
+export declare const combineClasses: (classes: string[]) => string;
+export declare const getPositionStyleClasses: (start: number, end: number) => {
+    startClass: string;
+    endClass: string;
+};

package/.babelrc

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

package/.eslintrc.json

@@ -1,18 +0,0 @@
-{
-    "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

@@ -1,11 +0,0 @@
-/* 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/project.json

@@ -1,51 +0,0 @@
-{
-    "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/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...
-});