chore(rich-text-alpha): bump forma36 to v6; modify emotion import [TOL-3884] (#2110)

This upgrade bumps packages to use dependency/devDependency and/or peerDependency of @contentful/f36-components@6.7.1, @contentful/f36-icons@6.7.1 and @contentful/f36-tokens@6.1.2

Adds explicit react (>=18.3.1) as peer dependencies to make the React version requirement visible to consumers, rather than leaving it as an implicit transitive dependency through F36 v6.

Deprecated emotion@10 in order to use emotion/css@^11.13.5 and follow the Forma36 pattern.

* chore: bump forma36 to v6; modify emotion import

* chore: bump react version as peerDependency


BREAKING CHANGE: Migrate from emotion@10. to emotion/css@^11.13.4. Consumers also must be on Forma 36 v6 and React 18.3.1+

Author: joseliacosta

packages/rich-text-alpha/package.json

@@ -37,10 +37,11 @@
   },
   "dependencies": {
     "@contentful/app-sdk": "^4.42.0",
-    "@contentful/f36-components": "^5.4.1",
-    "@contentful/f36-icons": "^5.4.1",
-    "@contentful/f36-tokens": "^5.1.0",
-    "@contentful/f36-utils": "^5.1.0",
+    "@contentful/f36-components": "^6.7.1",
+    "@contentful/f36-icons": "^6.7.1",
+    "@contentful/f36-tokens": "^6.1.2",
+    "@contentful/f36-utils": "^6.1.0",
+    "@emotion/css": "^11.13.5",
     "@contentful/field-editor-reference": "^7.0.1",
     "@contentful/field-editor-shared": "^3.0.1",
     "@contentful/field-editor-validation-errors": "^3.0.1",
@@ -63,8 +64,8 @@
   "peerDependencies": {
     "@lingui/core": "^5.3.0",
     "@tanstack/react-query": "^4.3.9",
-    "react": ">=17",
-    "react-dom": ">=17",
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1",
     "react-reconciler": ">=0.26.1 <=0.33.0"
   },
   "devDependencies": {

packages/rich-text-alpha/src/components/Doc.tsx

@@ -4,8 +4,8 @@ import type { FieldAppSDK } from '@contentful/app-sdk';
 import tokens from '@contentful/f36-tokens';
 import { EntityProvider } from '@contentful/field-editor-reference';
 import type { Document } from '@contentful/rich-text-types';
+import { css, cx } from '@emotion/css';
 import { ProseMirror, ProseMirrorDoc } from '@handlewithcare/react-prosemirror';
-import { css, cx } from 'emotion';
 
 import { createEditor } from '../plugins';
 

packages/rich-text-alpha/src/plugins/blockquote.ts

@@ -1,5 +1,5 @@
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { wrapIn, lift } from 'prosemirror-commands';
 import type { NodeSpec } from 'prosemirror-model';
 import type { Command } from 'prosemirror-state';

packages/rich-text-alpha/src/plugins/embeds/components/FetchingWrappedInlineEntryCard.tsx

@@ -14,7 +14,7 @@ import {
   useContentType,
 } from '@contentful/field-editor-shared/react-query';
 import { INLINES } from '@contentful/rich-text-types';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 const { getEntryTitle, getEntityStatus } = entityHelpers;
 

packages/rich-text-alpha/src/plugins/embeds/inline.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 
 import tokens from '@contentful/f36-tokens';
 import { INLINES } from '@contentful/rich-text-types';
+import { css } from '@emotion/css';
 import { useIsNodeSelected, type NodeViewComponentProps } from '@handlewithcare/react-prosemirror';
-import { css } from 'emotion';
 import type { NodeSpec } from 'prosemirror-model';
 import type { Command } from 'prosemirror-state';
 import { assert, object, union, string, literal } from 'superstruct';

packages/rich-text-alpha/src/plugins/heading.ts

@@ -1,5 +1,5 @@
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { setBlockType } from 'prosemirror-commands';
 import type { NodeSpec } from 'prosemirror-model';
 import type { Command } from 'prosemirror-state';

packages/rich-text-alpha/src/plugins/hr.ts

@@ -1,5 +1,5 @@
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import type { NodeSpec } from 'prosemirror-model';
 import type { EditorState } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';

packages/rich-text-alpha/src/plugins/link/dialog.tsx

@@ -15,7 +15,7 @@ import tokens from '@contentful/f36-tokens';
 import { EntityProvider, Entity } from '@contentful/field-editor-reference';
 import { FieldAppSDK, ModalDialogLauncher } from '@contentful/field-editor-shared';
 import { INLINES, ResourceLink, Link } from '@contentful/rich-text-types';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import type { Except, SetRequired } from 'type-fest';
 
 import { FetchingWrappedAssetCard } from '../../components/FetchingWrappedAssetCard';

packages/rich-text-alpha/src/plugins/link/link.ts

@@ -1,5 +1,5 @@
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import type { MarkSpec } from 'prosemirror-model';
 import type { Command } from 'prosemirror-state';
 import { assert, enums, object, union, string, literal } from 'superstruct';

packages/rich-text-alpha/src/plugins/paragraph.ts

@@ -1,5 +1,5 @@
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { setBlockType } from 'prosemirror-commands';
 import type { NodeSpec } from 'prosemirror-model';
 import type { Command } from 'prosemirror-state';