chore: bump fondue to 12.5.1 (#1011)

* chore: bump fondue to 12.4.0 * add theme provider * fix typecheck * fix tests * fix tests * fix tests * remove barrel exports
Frontify · Feb 12, 2025 · 01e4674 · 01e4674
1 parent 97fb647
commit 01e4674
Show file tree

Hide file tree

Showing 87 changed files with 3,090 additions and 3,608 deletions.
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
@@ -6,6 +6,5 @@ global.process ||= {};
 global.process.env ||= {};
 
 import "@frontify/fondue/style";
-import "tailwindcss/tailwind.css";
 import "cypress-real-events/support";
 import "./structuredClone";
diff --git a/examples/asset-upload/package.json b/examples/asset-upload/package.json
@@ -32,7 +32,7 @@
     },
     "dependencies": {
         "@frontify/app-bridge": "^3.11.1",
-        "@frontify/fondue": "12.2.13",
+        "@frontify/fondue": "12.5.1",
         "@frontify/guideline-blocks-settings": "0.36.14",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"

diff --git a/examples/asset-upload/src/ExampleAssetUploadBlock.tsx b/examples/asset-upload/src/ExampleAssetUploadBlock.tsx
@@ -6,8 +6,8 @@ import { Button } from '@frontify/fondue';
 
 import { BlockProps } from '@frontify/guideline-blocks-settings';
 import { ReactElement, useEffect, useState } from 'react';
-import 'tailwindcss/tailwind.css';
 import { IMAGE_SETTING_ID } from './settings';
+import { StyleProvider } from '@frontify/guideline-blocks-shared';
 
 export const ExampleAssetUploadBlock = ({ appBridge }: BlockProps): ReactElement => {
     const { blockAssets, updateAssetIdsFromKey } = useBlockAssets(appBridge);
@@ -63,38 +63,40 @@ export const ExampleAssetUploadBlock = ({ appBridge }: BlockProps): ReactElement
 
     return (
         <div className="example-asset-upload">
-            <div className="tw-flex tw-flex-col tw-gap-4">
-                <div className="tw-flex tw-gap-4">
-                    <Button onClick={onOpenAssetChooser}>Open asset chooser</Button>
-                    <Button onClick={openFileDialog} disabled={loading}>
-                        {loading ? 'Uploading...' : 'Upload'}
-                    </Button>
-                </div>
+            <StyleProvider>
+                <div className="tw-flex tw-flex-col tw-gap-4">
+                    <div className="tw-flex tw-gap-4">
+                        <Button onClick={onOpenAssetChooser}>Open asset chooser</Button>
+                        <Button onClick={openFileDialog} disabled={loading}>
+                            {loading ? 'Uploading...' : 'Upload'}
+                        </Button>
+                    </div>
 
-                <div data-test-id="example-asset-upload-block">
-                    {blockAssets[IMAGE_SETTING_ID] ? (
-                        blockAssets[IMAGE_SETTING_ID].map((asset: Asset) => (
-                            <div key={asset.id}>
-                                <img
-                                    src={asset.previewUrl}
-                                    alt={asset.title}
-                                    data-test-id="example-asset-upload-image"
-                                />
-                                <div className="tw-flex tw-flex-col tw-gap-4">
-                                    <strong>{asset.title}</strong>
-                                    <div className="tw-flex tw-gap-4">
-                                        <Link link={asset.previewUrl} text="Preview URL" />
-                                        <Link link={asset.genericUrl} text="Generic URL" />
-                                        {asset.originUrl && <Link link={asset.originUrl} text="Origin URL" />}
+                    <div data-test-id="example-asset-upload-block">
+                        {blockAssets[IMAGE_SETTING_ID] ? (
+                            blockAssets[IMAGE_SETTING_ID].map((asset: Asset) => (
+                                <div key={asset.id}>
+                                    <img
+                                        src={asset.previewUrl}
+                                        alt={asset.title}
+                                        data-test-id="example-asset-upload-image"
+                                    />
+                                    <div className="tw-flex tw-flex-col tw-gap-4">
+                                        <strong>{asset.title}</strong>
+                                        <div className="tw-flex tw-gap-4">
+                                            <Link link={asset.previewUrl} text="Preview URL" />
+                                            <Link link={asset.genericUrl} text="Generic URL" />
+                                            {asset.originUrl && <Link link={asset.originUrl} text="Origin URL" />}
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                        ))
-                    ) : (
-                        <p>No image set</p>
-                    )}
+                            ))
+                        ) : (
+                            <p>No image set</p>
+                        )}
+                    </div>
                 </div>
-            </div>
+            </StyleProvider>
         </div>
     );
 };
diff --git a/examples/asset-upload/tsconfig.json b/examples/asset-upload/tsconfig.json
@@ -2,8 +2,8 @@
     "compilerOptions": {
         "esModuleInterop": true,
         "isolatedModules": true,
-        "module": "commonjs",
-        "moduleResolution": "node",
+        "module": "ES2022",
+        "moduleResolution": "bundler",
         "noImplicitAny": true,
         "noImplicitReturns": true,
         "noImplicitThis": true,

diff --git a/package.json b/package.json
@@ -41,15 +41,15 @@
         "vitest": "^2.0.5"
     },
     "dependencies": {
-        "@frontify/fondue": "12.2.13",
+        "@frontify/fondue": "12.5.1",
         "glob": "^11.0.0",
         "happy-dom": "^15.7.3",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },
     "pnpm": {
         "patchedDependencies": {
-            "@udecode/plate-emoji@31.0.0": "patches/@udecode__plate-emoji@31.0.0.patch"
+            "@udecode/plate-emoji@31.4.0": "patches/@udecode__plate-emoji@31.4.0.patch"
         }
     },
     "packageManager": "pnpm@9.15.5"

diff --git a/packages/animation-curve-block/package.json b/packages/animation-curve-block/package.json
@@ -35,7 +35,7 @@
         "@dnd-kit/modifiers": "^9.0.0",
         "@dnd-kit/sortable": "^10.0.0",
         "@frontify/app-bridge": "^3.11.1",
-        "@frontify/fondue": "12.2.13",
+        "@frontify/fondue": "12.5.1",
         "@frontify/guideline-blocks-settings": "0.36.14",
         "@frontify/guideline-blocks-shared": "workspace:*",
         "react": "^18.3.1",

diff --git a/packages/animation-curve-block/src/AnimationCurveBlock.tsx b/packages/animation-curve-block/src/AnimationCurveBlock.tsx
@@ -4,16 +4,14 @@ import { useState } from 'react';
 import { DndContext, DragEndEvent, DragOverlay, DragStartEvent, closestCenter } from '@dnd-kit/core';
 import { restrictToParentElement } from '@dnd-kit/modifiers';
 import { SortableContext, arrayMove, rectSortingStrategy } from '@dnd-kit/sortable';
-import '@frontify/guideline-blocks-settings/styles';
-import '@frontify/fondue/style';
-import 'tailwindcss/tailwind.css';
 
 import { useBlockSettings, useEditorState } from '@frontify/app-bridge';
 
 import { AnimationCurve, AnimationCurvePatch, Settings } from './types';
 import { gridClasses } from './constants';
 import { BlankSlate, Card, SortableCard } from './components';
 import { BlockProps, gutterSpacingStyleMap, useDndSensors } from '@frontify/guideline-blocks-settings';
+import { StyleProvider } from '@frontify/guideline-blocks-shared';
 
 export const AnimationCurveBlock = ({ appBridge }: BlockProps) => {
     const [blockSettings, setBlockSettings] = useBlockSettings<Settings>(appBridge);
@@ -57,62 +55,64 @@ export const AnimationCurveBlock = ({ appBridge }: BlockProps) => {
 
     return (
         <div className="animation-curve-block tw-@container">
-            <DndContext
-                sensors={sensors}
-                collisionDetection={closestCenter}
-                onDragEnd={handleDragEnd}
-                onDragStart={handleDragStart}
-                modifiers={[restrictToParentElement]}
-            >
-                <div
-                    data-test-id="animation-curve-block"
-                    className={`tw-grid tw-auto-rows-auto ${gridClasses[columns]}`}
-                    style={{
-                        gap,
-                    }}
+            <StyleProvider>
+                <DndContext
+                    sensors={sensors}
+                    collisionDetection={closestCenter}
+                    onDragEnd={handleDragEnd}
+                    onDragStart={handleDragStart}
+                    modifiers={[restrictToParentElement]}
                 >
-                    <SortableContext items={localItems} strategy={rectSortingStrategy}>
-                        {localItems?.map((animationCurve) => (
-                            <SortableCard
-                                appBridge={appBridge}
-                                key={animationCurve.id}
-                                animationCurve={animationCurve}
-                                isEditing={isEditing}
-                                blockSettings={blockSettings}
-                                onDelete={deleteAnimationCurve}
-                                onUpdate={updateAnimationCurve}
-                                setCanvasHeight={setCanvasHeight}
-                            />
-                        ))}
-                        <DragOverlay>
-                            {activeItem && (
-                                <Card
+                    <div
+                        data-test-id="animation-curve-block"
+                        className={`tw-grid tw-auto-rows-auto ${gridClasses[columns]}`}
+                        style={{
+                            gap,
+                        }}
+                    >
+                        <SortableContext items={localItems} strategy={rectSortingStrategy}>
+                            {localItems?.map((animationCurve) => (
+                                <SortableCard
                                     appBridge={appBridge}
-                                    key={activeItem.id}
-                                    animationCurve={activeItem}
+                                    key={animationCurve.id}
+                                    animationCurve={animationCurve}
                                     isEditing={isEditing}
-                                    isDragging={true}
                                     blockSettings={blockSettings}
                                     onDelete={deleteAnimationCurve}
                                     onUpdate={updateAnimationCurve}
                                     setCanvasHeight={setCanvasHeight}
                                 />
-                            )}
-                        </DragOverlay>
-                    </SortableContext>
-                    {isEditing && (
-                        <BlankSlate
-                            key={localItems.length}
-                            appBridge={appBridge}
-                            content={localItems}
-                            hasBorder={hasBorder}
-                            setLocalItems={setLocalItems}
-                            setBlockSettings={setBlockSettings}
-                            canvasHeight={canvasHeight}
-                        />
-                    )}
-                </div>
-            </DndContext>
+                            ))}
+                            <DragOverlay>
+                                {activeItem && (
+                                    <Card
+                                        appBridge={appBridge}
+                                        key={activeItem.id}
+                                        animationCurve={activeItem}
+                                        isEditing={isEditing}
+                                        isDragging={true}
+                                        blockSettings={blockSettings}
+                                        onDelete={deleteAnimationCurve}
+                                        onUpdate={updateAnimationCurve}
+                                        setCanvasHeight={setCanvasHeight}
+                                    />
+                                )}
+                            </DragOverlay>
+                        </SortableContext>
+                        {isEditing && (
+                            <BlankSlate
+                                key={localItems.length}
+                                appBridge={appBridge}
+                                content={localItems}
+                                hasBorder={hasBorder}
+                                setLocalItems={setLocalItems}
+                                setBlockSettings={setBlockSettings}
+                                canvasHeight={canvasHeight}
+                            />
+                        )}
+                    </div>
+                </DndContext>
+            </StyleProvider>
         </div>
     );
 };
diff --git a/packages/animation-curve-block/tsconfig.json b/packages/animation-curve-block/tsconfig.json
@@ -2,8 +2,8 @@
     "compilerOptions": {
         "esModuleInterop": true,
         "isolatedModules": true,
-        "module": "commonjs",
-        "moduleResolution": "node",
+        "module": "ES2022",
+        "moduleResolution": "bundler",
         "noImplicitAny": true,
         "noImplicitReturns": true,
         "noImplicitThis": true,

diff --git a/packages/asset-kit-block/package.json b/packages/asset-kit-block/package.json
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@frontify/app-bridge": "^3.11.1",
-        "@frontify/fondue": "12.2.13",
+        "@frontify/fondue": "12.5.1",
         "@frontify/guideline-blocks-settings": "0.36.14",
         "@frontify/guideline-blocks-shared": "workspace:*",
         "react": "^18.3.1",