@dotcms/react 0.0.1-alpha.37 → 0.0.1-alpha.39

package/src/lib/models/content-node.interface.ts

@@ -0,0 +1,90 @@
+import { BlockProps } from './blocks.interface';
+
+/**
+ * Represents a Mark used by text content in the Block Editor
+ *
+ * @export
+ * @interface Mark
+ */
+export interface Mark {
+    type: string;
+    attrs: Record<string, string>;
+}
+
+/**
+ * Represents a Content Node used by the Block Editor
+ *
+ * @export
+ * @interface ContentNode
+ */
+export interface ContentNode {
+    type: string;
+    content: ContentNode[];
+    attrs?: Record<string, string>;
+    marks?: Mark[];
+    text?: string;
+}
+
+/**
+ * Represents a Custom Renderer used by the Block Editor Component
+ *
+ * @export
+ * @interface CustomRenderer
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type CustomRenderer<T = any> = Record<string, React.FC<T>>;
+
+/**
+ * Represents a CodeBlock used by the Block Editor Component
+ * @export
+ * @interface CodeBlockProps
+ */
+export type CodeBlockProps = BlockProps & ContentNode;
+
+/**
+ * Represents a Heading used by the Block Editor Component
+ * @export
+ * @interface HeadingProps
+ */
+export type HeadingProps = BlockProps & ContentNode;
+
+/**
+ * Represents a Link used by the Block Editor Component
+ * @export
+ * @interface LinkProps
+ */
+export type LinkProps = BlockProps & { attrs?: Mark['attrs'] };
+
+/**
+ * Represents a Paragraph used by the Block Editor Component
+ * @export
+ * @interface ParagraphProps
+ */
+export type ParagraphProps = BlockProps & ContentNode;
+
+/**
+ * Represents a DotCMSVideo used by the Block Editor Component
+ * @export
+ * @interface DotCMSVideoProps
+ */
+export type DotCMSVideoProps = ContentNode['attrs'] & {
+    data?: Record<string, string>;
+};
+
+/**
+ * Represents a DotCMSImage used by the Block Editor Component
+ * @export
+ * @interface DotCMSImageProps
+ */
+export type DotCMSImageProps = ContentNode['attrs'] & {
+    data?: Record<string, unknown>;
+};
+
+/**
+ * Represents a DotContent used by the Block Editor Component
+ * @export
+ * @interface DotContentProps
+ */
+export type DotContentProps = ContentNode & {
+    customRenderers?: CustomRenderer;
+};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface ContainerData {
     [key: string]: {
         container: {
@@ -23,6 +22,7 @@ export interface ContainerData {
         };
     };
 }
+
 export interface DotCMSPageContext {
     /**
      * `components` is a property of the `PageProviderProps` type.
@@ -68,6 +68,7 @@ export interface DotCMSPageContext {
             persona: {
                 keyTag: string;
             };
+            // variant requested
             variantId: string;
         };
         vanityUrl?: {
@@ -86,6 +87,7 @@ export interface DotCMSPageContext {
     };
     isInsideEditor: boolean;
 }
+
 export interface DotCMSContentlet {
     archived: boolean;
     binaryContentAsset?: string;
@@ -123,5 +125,6 @@ export interface DotCMSContentlet {
     body?: string;
     variant?: string;
     __icon__?: string;
-    [key: string]: any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [key: string]: any; // This is a catch-all for any other custom properties that might be on the contentlet.
 }

package/src/lib/utils/utils.ts

@@ -0,0 +1,89 @@
+import { ContainerData, DotCMSPageContext } from '../models';
+
+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'
+};
+
+/**
+ * Get the container data from the containers object using the current container reference obtained from the layout.
+ *
+ * @param {ContainerData} containers
+ * @param {DotCMSPageContext['pageAsset']['layout']['body']['rows'][0]['columns'][0]['containers'][0]} containerRef
+ * @returns {Object} Container with all the data it has.
+ */
+export const getContainersData = (
+    containers: ContainerData,
+    containerRef: DotCMSPageContext['pageAsset']['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
+    };
+};
+
+/**
+ * Combine classes into a single string.
+ *
+ * @param {string[]} classes
+ * @returns {string} Combined classes
+ */
+export const combineClasses = (classes: string[]) => classes.filter(Boolean).join(' ');
+
+/**
+ * Get the start and end classes for the column based on the left offset and width.
+ *
+ * @param {number} start
+ * @param {number} end
+ * @returns {Object} Start and end classes
+ */
+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";