From dd9cf19b6158cbdf35a4b26cb62b4206f755b1c7 Mon Sep 17 00:00:00 2001 From: Harshit Pant Date: Wed, 23 Apr 2025 09:03:15 +0530 Subject: [PATCH] [web] workspace: upgrade react-tiling and other workspace deps (#1408) --- apps/web/package.json | 8 +- .../common/CodingWorkspaceDivider.tsx | 4 +- .../src/emails/preview/EmailsPreviewPage.tsx | 5 +- .../react-tiling/components/TilesPanel.tsx | 21 +- .../components/TilesPanelItem.tsx | 22 +- pnpm-lock.yaml | 523 ++++++++++++++---- 6 files changed, 463 insertions(+), 120 deletions(-) diff --git a/apps/web/package.json b/apps/web/package.json index 74bade88d..ada36c7a4 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -54,7 +54,7 @@ "@lexical/selection": "^0.13.1", "@lexical/utils": "^0.13.1", "@mdx-js/react": "^2.3.0", - "@monaco-editor/react": "^4.5.1", + "@monaco-editor/react": "^4.7.0", "@next/mdx": "14.2.15", "@number-flow/react": "^0.5.5", "@prisma/client": "6.6.0", @@ -90,7 +90,7 @@ "class-variance-authority": "^0.7.0", "clean-set": "^1.1.2", "clsx": "^2.0.0", - "console-feed": "3.3.0", + "console-feed": "3.8.0", "contentlayer": "^0.3.4", "cors": "^2.8.5", "date-fns": "^4.1.0", @@ -117,7 +117,7 @@ "nuqs": "^2.2.3", "octokit": "^3.1.2", "prettier": "^3.3.2", - "prettier-plugin-svelte": "^3.2.5", + "prettier-plugin-svelte": "^3.3.3", "prism-react-renderer": "^2.4.0", "prisma": "6.6.0", "puppeteer-core": "^22.6.0", @@ -133,7 +133,7 @@ "react-icons": "5.3.0", "react-intl": "^6.2.8", "react-merge-refs": "^2.1.1", - "react-resizable-panels": "^0.0.55", + "react-resizable-panels": "^2.1.8", "react-select": "^5.8.0", "react-use": "^17.6.0", "reading-time": "^1.5.0", diff --git a/apps/web/src/components/workspace/common/CodingWorkspaceDivider.tsx b/apps/web/src/components/workspace/common/CodingWorkspaceDivider.tsx index 615ed02a1..3a1ceeac3 100644 --- a/apps/web/src/components/workspace/common/CodingWorkspaceDivider.tsx +++ b/apps/web/src/components/workspace/common/CodingWorkspaceDivider.tsx @@ -10,8 +10,8 @@ export function CodingWorkspaceDividerWrapperClassname( ) { return clsx( 'relative bg-transparent group', - direction === 'horizontal' && 'h-3', - direction === 'vertical' && 'w-3', + direction === 'horizontal' && 'h-3 w-full', + direction === 'vertical' && 'w-3 h-full', ); } diff --git a/apps/web/src/emails/preview/EmailsPreviewPage.tsx b/apps/web/src/emails/preview/EmailsPreviewPage.tsx index 8c818fec5..f2a4249d8 100644 --- a/apps/web/src/emails/preview/EmailsPreviewPage.tsx +++ b/apps/web/src/emails/preview/EmailsPreviewPage.tsx @@ -127,10 +127,7 @@ export default function EmailsPreviewPage({ emailKey, html, text }: Props) { - + = Readonly<{ label: string; }>; level: number; + minSize?: PanelProps['minSize']; order?: number; parentDirection: PanelGroupProps['direction']; renderTab: (tabId: TabType) => JSX.Element; @@ -47,11 +48,11 @@ export default function TilesPanel({ level, order, id, - disablePointerEventsDuringResize, getTabLabel, renderTab, parentDirection, defaultSize = 100, + minSize = 10, getResizeHandlerProps, ...props }: TilesPanelGroupTypeProps | TilesPanelItemTypeProps) { @@ -111,10 +112,7 @@ export default function TilesPanel({ ); return level === 0 ? ( - + {panel} ) : ( @@ -129,7 +127,6 @@ export default function TilesPanel({ ref={panelGroupRef} className={clsx(level === 0 && 'relative')} direction={groupDirection} - disablePointerEventsDuringResize={disablePointerEventsDuringResize} id={String(id)}> {props.items.map((item, index) => { const itemSizeEqual = 100 / Math.max(props.items.length, 1); @@ -146,7 +143,7 @@ export default function TilesPanel({ className={resizeHandlerProps.className} style={resizeHandlerProps.style} onDoubleClick={() => handleDoubleClick(index)}> - + {resizeHandlerProps.children} @@ -154,9 +151,6 @@ export default function TilesPanel({ ({ return level === 0 ? ( group ) : ( - + {group} ); diff --git a/apps/web/src/react-tiling/components/TilesPanelItem.tsx b/apps/web/src/react-tiling/components/TilesPanelItem.tsx index cb21cb157..1aa41fa83 100644 --- a/apps/web/src/react-tiling/components/TilesPanelItem.tsx +++ b/apps/web/src/react-tiling/components/TilesPanelItem.tsx @@ -95,14 +95,24 @@ export default function TilesPanelItem({ collapsible, defaultSize, id: panelId, - onCollapse: (collapsedValue: boolean) => + onCollapse: () => { dispatch({ payload: { - collapsed: collapsedValue, + collapsed: true, panelId, }, type: 'panel-collapse', - }), + }); + }, + onExpand: () => { + dispatch({ + payload: { + collapsed: false, + panelId, + }, + type: 'panel-collapse', + }); + }, order, ref, }; @@ -130,7 +140,8 @@ export default function TilesPanelItem({ ['border', themeBorderColor], themeBackgroundColor, )} - collapsedSize={5}> + collapsedSize={5} + minSize={5}>