fix(sdk): Fix build on sdk-experiments (dotCMS#31427)

KevinDavilaDotCMS · kevindaviladev · web-flow · commit d5f65f91968b · 2025-02-20T01:01:32.000Z
https://github.com/user-attachments/assets/8a1766ad-add6-41fb-b0a0-6809a0709152 This pull request includes several changes to update dependencies, refactor imports, and clean up the TypeScript configuration. The most important changes are listed below: Dependency updates: * [`core-web/libs/sdk/experiments/package.json`](diffhunk://#diff-68dca14af128d4f3c11f3f15f20268f9e50d5f3d8886b00845a16344aacfae35L28-R29): Updated `@dotcms/client` and added `@dotcms/react` to use the `next` version. Refactoring imports: * [`core-web/libs/sdk/react/src/lib/next/hooks/useIsDevMode.ts`](diffhunk://#diff-793e5a8e4779776f9af6518bb4c05a75267059db2aa82f5acac2cc28c1caa4ddL3-R7): Reorganized imports to ensure `DotCMSPageRendererMode` and `DotCMSPageContext` are imported from the correct local context file. * [`core-web/libs/sdk/react/src/lib/next/utils/index.ts`](diffhunk://#diff-3d9ca80fd74cf5ec1dc58260167bc521739f8b5a09e4073322a7fe2e935f924aL6-R6): Simplified import path for `DotCMSContentlet`, `DotCMSColumnContainer`, and `DotCMSPageAsset` to use a relative path. TypeScript configuration cleanup: * [`core-web/tsconfig.base.json`](diffhunk://#diff-a96484261b73ba1eb1e119e1aa36e6be97f219d53cdbdbf3fc718cf11bfa98ebL61): Removed the path mapping for `@dotcms/react/next/*` to streamline the configuration. --------- Co-authored-by: Kevin Davila <56242609+kevindaviladev@users.noreply.github.com>
diff --git a/core-web/libs/sdk/experiments/package.json b/core-web/libs/sdk/experiments/package.json
@@ -25,6 +25,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@dotcms/client": "0.0.1-alpha.38"
+    "@dotcms/client": "next",
+    "@dotcms/react": "next"
   }
 }
diff --git a/core-web/libs/sdk/react/src/lib/next/__test__/components/Column.test.tsx b/core-web/libs/sdk/react/src/lib/next/__test__/components/Column.test.tsx
@@ -2,11 +2,10 @@ import '@testing-library/jest-dom';
 
 import { render, screen } from '@testing-library/react';
 
-import { Column } from '@dotcms/react/next/components/Column/Column';
-
+import { Column } from '../../components/Column/Column';
 import { MOCK_COLUMN } from '../mock';
 
-jest.mock('@dotcms/react/next/components/Container/Container', () => ({
+jest.mock('../../components/Container/Container', () => ({
     Container: ({ container }: any) => (
         <div data-testid="mock-container" data-container-id={container.identifier}>
             Mock Container
diff --git a/core-web/libs/sdk/react/src/lib/next/__test__/components/Container.test.tsx b/core-web/libs/sdk/react/src/lib/next/__test__/components/Container.test.tsx
@@ -1,21 +1,17 @@
 import { render, screen } from '@testing-library/react';
 
-import { Container } from '@dotcms/react/next/components/Container/Container';
-import {
-    DotCMSPageContext,
-    DotCMSPageContextProps
-} from '@dotcms/react/next/contexts/DotCMSPageContext';
-import * as utils from '@dotcms/react/next/utils';
-
+import { Container } from '../../components/Container/Container';
+import { DotCMSPageContext, DotCMSPageContextProps } from '../../contexts/DotCMSPageContext';
+import * as utils from '../../utils';
 import { EMPTY_PAGE_ASSET, MOCK_CONTAINER, MOCK_PAGE_ASSET, MOCK_CONTAINER_DATA } from '../mock';
 
-jest.mock('@dotcms/react/next/components/Contentlet/Contentlet', () => ({
+jest.mock('../../components/Contentlet/Contentlet', () => ({
     Contentlet: ({ contentlet }: { contentlet: any }) => (
         <div data-testid="mock-contentlet">{contentlet.identifier}</div>
     )
 }));
 
-jest.mock('@dotcms/react/next/utils', () => ({
+jest.mock('../../utils', () => ({
     getContainersData: jest.fn(),
     getDotContainerAttributes: jest.fn(),
     getContentletsInContainer: jest.fn()
diff --git a/core-web/libs/sdk/react/src/lib/next/__test__/components/Contentlet.test.tsx b/core-web/libs/sdk/react/src/lib/next/__test__/components/Contentlet.test.tsx
@@ -2,23 +2,23 @@ import '@testing-library/jest-dom';
 
 import { render, screen } from '@testing-library/react';
 
-import { Contentlet } from '@dotcms/react/next/components/Contentlet/Contentlet';
-import { DotCMSPageContext } from '@dotcms/react/next/contexts/DotCMSPageContext';
-import { useCheckVisibleContent } from '@dotcms/react/next/hooks/useCheckVisibleContent';
-import { getDotContentletAttributes } from '@dotcms/react/next/utils';
+import { Contentlet } from '../../components/Contentlet/Contentlet';
+import { DotCMSPageContext } from '../../contexts/DotCMSPageContext';
+import { useCheckVisibleContent } from '../../hooks/useCheckVisibleContent';
+import { getDotContentletAttributes } from '../../utils';
 
-jest.mock('@dotcms/react/next/components/FallbackComponent/FallbackComponent', () => ({
+jest.mock('../../components/FallbackComponent/FallbackComponent', () => ({
     FallbackComponent: ({ contentlet }: any) => (
         <div data-testid="fallback">Fallback Component: {contentlet.contentType}</div>
     ),
     NoComponentType: () => <div>No Component</div>
 }));
 
-jest.mock('@dotcms/react/next/hooks/useCheckVisibleContent', () => ({
+jest.mock('../../hooks/useCheckVisibleContent', () => ({
     useCheckVisibleContent: jest.fn(() => false)
 }));
 
-jest.mock('@dotcms/react/next/utils', () => ({
+jest.mock('../../utils', () => ({
     getDotContentletAttributes: jest.fn(() => ({ 'data-custom': 'true' }))
 }));
 
diff --git a/core-web/libs/sdk/react/src/lib/next/__test__/components/DotCMSLayoutBody.test.tsx b/core-web/libs/sdk/react/src/lib/next/__test__/components/DotCMSLayoutBody.test.tsx
@@ -2,13 +2,13 @@ import '@testing-library/jest-dom';
 
 import { render, screen } from '@testing-library/react';
 
-import { DotCMSLayoutBody } from '@dotcms/react/next/components/DotCMSLayoutBody/DotCMSLayoutBody';
 import * as dotcmsUVE from '@dotcms/uve';
 import { UVE_MODE } from '@dotcms/uve/types';
 
+import { DotCMSLayoutBody } from '../../components/DotCMSLayoutBody/DotCMSLayoutBody';
 import { MOCK_PAGE_ASSET } from '../mock';
 
-jest.mock('@dotcms/react/next/components/Row/Row', () => ({
+jest.mock('../../components/Row/Row', () => ({
     Row: ({ row }: { row: any }) => <div data-testid="row">Mocked Row - {row.content}</div>
 }));
 
diff --git a/core-web/libs/sdk/react/src/lib/next/__test__/components/FallbackComponent.test.tsx b/core-web/libs/sdk/react/src/lib/next/__test__/components/FallbackComponent.test.tsx
@@ -3,11 +3,11 @@ import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { FallbackComponent } from '@dotcms/react/next/components/FallbackComponent/FallbackComponent';
-import * as useIsDevModeHook from '@dotcms/react/next/hooks/useIsDevMode';
-import { DotCMSContentlet } from '@dotcms/react/next/types';
+import { FallbackComponent } from '../../components/FallbackComponent/FallbackComponent';
+import * as useIsDevModeHook from '../../hooks/useIsDevMode';
+import { DotCMSContentlet } from '../../types';
 
-jest.mock('@dotcms/react/next/hooks/useIsDevMode', () => ({
+jest.mock('../../hooks/useIsDevMode', () => ({
     useIsDevMode: jest.fn()
 }));
 
diff --git a/core-web/libs/sdk/react/src/lib/next/__test__/components/Row.test.tsx b/core-web/libs/sdk/react/src/lib/next/__test__/components/Row.test.tsx
@@ -1,9 +1,8 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 
-import { Row } from '@dotcms/react/next/components/Row/Row';
-import { DotPageAssetLayoutRow } from '@dotcms/react/next/types';
-
+import { Row } from '../../components/Row/Row';
+import { DotPageAssetLayoutRow } from '../../types';
 import { MOCK_COLUMN } from '../mock';
 
 const MOCK_ROW: DotPageAssetLayoutRow = {
@@ -12,7 +11,7 @@ const MOCK_ROW: DotPageAssetLayoutRow = {
     columns: [MOCK_COLUMN]
 };
 
-jest.mock('@dotcms/react/next/components/Column/Column', () => ({
+jest.mock('../../components/Column/Column', () => ({
     Column: ({ column }: any) => <div data-testid="mock-column">{column?.width}</div>
 }));
 
diff --git a/core-web/libs/sdk/react/src/lib/next/__test__/hook/useCheckVisibleContent.test.tsx b/core-web/libs/sdk/react/src/lib/next/__test__/hook/useCheckVisibleContent.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import { useRef } from 'react';
 
-import { useCheckVisibleContent } from '@dotcms/react/next/hooks/useCheckVisibleContent';
+import { useCheckVisibleContent } from '../../hooks/useCheckVisibleContent';
 
 const MOCK_DOM_RECT = {
     height: 0,
diff --git a/core-web/libs/sdk/react/src/lib/next/__test__/hook/useIsDevMode.test.tsx b/core-web/libs/sdk/react/src/lib/next/__test__/hook/useIsDevMode.test.tsx
@@ -1,13 +1,11 @@
 import { renderHook } from '@testing-library/react';
 
-import {
-    DotCMSPageContext,
-    DotCMSPageRendererMode
-} from '@dotcms/react/next/contexts/DotCMSPageContext';
-import { useIsDevMode } from '@dotcms/react/next/hooks/useIsDevMode';
 import { getUVEState } from '@dotcms/uve';
 import { UVE_MODE } from '@dotcms/uve/types';
 
+import { DotCMSPageContext, DotCMSPageRendererMode } from '../../contexts/DotCMSPageContext';
+import { useIsDevMode } from '../../hooks/useIsDevMode';
+
 const Wrapper = ({ children, mode = 'production' }: any) => {
     return (
         <DotCMSPageContext.Provider value={{ mode, pageAsset: {} as any, userComponents: {} }}>
diff --git a/core-web/libs/sdk/react/src/lib/next/__test__/utils.test.ts b/core-web/libs/sdk/react/src/lib/next/__test__/utils.test.ts
@@ -5,7 +5,7 @@ import {
     getContainersData,
     getContentletsInContainer,
     getDotContainerAttributes
-} from '@dotcms/react/next/utils';
+} from '../utils';
 
 describe('utils', () => {
     describe('combineClasses', () => {
diff --git a/core-web/libs/sdk/react/src/lib/next/hooks/useIsDevMode.ts b/core-web/libs/sdk/react/src/lib/next/hooks/useIsDevMode.ts
@@ -1,12 +1,10 @@
 import { useContext, useEffect, useState } from 'react';
 
-import {
-    DotCMSPageContext,
-    DotCMSPageRendererMode
-} from '@dotcms/react/next/contexts/DotCMSPageContext';
 import { getUVEState } from '@dotcms/uve';
 import { UVE_MODE } from '@dotcms/uve/types';
 
+import { DotCMSPageRendererMode, DotCMSPageContext } from '../contexts/DotCMSPageContext';
+
 /**
  * @internal
  * A React hook that determines if the current environment is in development mode.
diff --git a/core-web/libs/sdk/react/src/lib/next/utils/index.ts b/core-web/libs/sdk/react/src/lib/next/utils/index.ts
@@ -3,7 +3,7 @@ import {
     DotCMSContentlet,
     DotCMSColumnContainer,
     DotCMSPageAsset
-} from '@dotcms/react/next/types';
+} from '../types';
 
 /**
  * @internal
diff --git a/core-web/tsconfig.base.json b/core-web/tsconfig.base.json
@@ -58,7 +58,6 @@
             ],
             "@dotcms/react": ["libs/sdk/react/src/index.ts"],
             "@dotcms/react/mocks": ["libs/sdk/react/src/lib/mocks/index.ts"],
-            "@dotcms/react/next/*": ["libs/sdk/react/src/lib/next/*"],
             "@dotcms/template-builder": ["libs/template-builder/src/index.ts"],
             "@dotcms/ui": ["libs/ui/src/index.ts"],
             "@dotcms/utils": ["libs/utils/src"],

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,7 @@`
`25`	`25`	`"peerDependencies": {`
`26`	`26`	`"react": ">=18",`
`27`	`27`	`"react-dom": ">=18",`
`28`		`- "@dotcms/client": "0.0.1-alpha.38"`
	`28`	`+ "@dotcms/client": "next",`
	`29`	`+ "@dotcms/react": "next"`
`29`	`30`	`}`
`30`	`31`	`}`