infra: remove react-resize-detector

finos · Dec 18, 2024 · abcb29c · abcb29c
1 parent c903004
commit abcb29c
Show file tree

Hide file tree

Showing 18 changed files with 277 additions and 143 deletions.
diff --git a/.changeset/fair-experts-cross.md b/.changeset/fair-experts-cross.md
@@ -0,0 +1,45 @@
+---
+'@finos/legend-application-data-cube-deployment': patch
+'@finos/legend-application-data-cube-bootstrap': patch
+'@finos/legend-application-pure-ide-deployment': patch
+'@finos/legend-extension-dsl-data-space-studio': patch
+'@finos/legend-application-studio-deployment': patch
+'@finos/legend-extension-store-service-store': patch
+'@finos/legend-vscode-extension-dependencies': patch
+'@finos/legend-application-query-deployment': patch
+'@finos/legend-application-studio-bootstrap': patch
+'@finos/legend-application-query-bootstrap': patch
+'@finos/legend-application-repl-deployment': patch
+'@finos/legend-extension-dsl-data-quality': patch
+'@finos/legend-extension-store-relational': patch
+'@finos/legend-server-showcase-deployment': patch
+'@finos/legend-extension-dsl-persistence': patch
+'@finos/legend-extension-store-flat-data': patch
+'@finos/legend-extension-dsl-data-space': patch
+'@finos/legend-extension-tracer-zipkin': patch
+'@finos/legend-application-data-cube': patch
+'@finos/legend-extension-dsl-diagram': patch
+'@finos/legend-extension-dsl-service': patch
+'@finos/legend-application-pure-ide': patch
+'@finos/legend-extension-assortment': patch
+'@finos/legend-application-studio': patch
+'@finos/legend-extension-dsl-text': patch
+'@finos/legend-application-query': patch
+'@finos/legend-application-repl': patch
+'@finos/legend-server-showcase': patch
+'@finos/legend-query-builder': patch
+'@finos/legend-server-depot': patch
+'@finos/legend-application': patch
+'@finos/legend-code-editor': patch
+'@finos/legend-server-sdlc': patch
+'@finos/legend-data-cube': patch
+'@finos/legend-dev-utils': patch
+'@finos/stylelint-config-legend-studio': patch
+'@finos/legend-storage': patch
+'@finos/eslint-plugin-legend-studio': patch
+'@finos/legend-shared': patch
+'@finos/babel-preset-legend-studio': patch
+'@finos/legend-graph': patch
+'@finos/legend-lego': patch
+'@finos/legend-art': patch
+---
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
@@ -33,8 +33,8 @@
     "@babel/core": "7.26.0",
     "@babel/eslint-parser": "7.25.9",
     "@eslint/js": "9.17.0",
-    "@typescript-eslint/eslint-plugin": "8.18.0",
-    "@typescript-eslint/parser": "8.18.0",
+    "@typescript-eslint/eslint-plugin": "8.18.1",
+    "@typescript-eslint/parser": "8.18.1",
     "eslint": "9.17.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.31.0",

diff --git a/packages/legend-application-data-cube-deployment/package.json b/packages/legend-application-data-cube-deployment/package.json
@@ -45,7 +45,7 @@
     "eslint": "9.17.0",
     "npm-run-all": "4.1.5",
     "rimraf": "6.0.1",
-    "tailwindcss": "3.4.16",
+    "tailwindcss": "3.4.17",
     "typescript": "5.7.2",
     "webpack": "5.97.1",
     "webpack-bundle-analyzer": "4.10.2",

diff --git a/packages/legend-application-data-cube/package.json b/packages/legend-application-data-cube/package.json
@@ -70,7 +70,7 @@
     "typescript": "5.7.2"
   },
   "peerDependencies": {
-    "react": "^18.0.0"
+    "react": "^19.0.0"
   },
   "publishConfig": {
     "directory": "build/publishContent"

diff --git a/packages/legend-application-query-deployment/package.json b/packages/legend-application-query-deployment/package.json
@@ -45,7 +45,7 @@
     "eslint": "9.17.0",
     "npm-run-all": "4.1.5",
     "rimraf": "6.0.1",
-    "tailwindcss": "3.4.16",
+    "tailwindcss": "3.4.17",
     "typescript": "5.7.2",
     "webpack": "5.97.1",
     "webpack-bundle-analyzer": "4.10.2",

diff --git a/packages/legend-application-repl-deployment/package.json b/packages/legend-application-repl-deployment/package.json
@@ -51,7 +51,7 @@
     "eslint": "9.17.0",
     "npm-run-all": "4.1.5",
     "rimraf": "6.0.1",
-    "tailwindcss": "3.4.16",
+    "tailwindcss": "3.4.17",
     "typescript": "5.7.2",
     "webpack": "5.97.1",
     "webpack-bundle-analyzer": "4.10.2",

diff --git a/packages/legend-application-studio-deployment/package.json b/packages/legend-application-studio-deployment/package.json
@@ -45,7 +45,7 @@
     "eslint": "9.17.0",
     "npm-run-all": "4.1.5",
     "rimraf": "6.0.1",
-    "tailwindcss": "3.4.16",
+    "tailwindcss": "3.4.17",
     "typescript": "5.7.2",
     "webpack": "5.97.1",
     "webpack-bundle-analyzer": "4.10.2",

diff --git a/packages/legend-art/package.json b/packages/legend-art/package.json
@@ -76,9 +76,8 @@
     "react-draggable": "4.4.6",
     "react-icons": "5.4.0",
     "react-markdown": "9.0.1",
-    "react-reflex": "4.2.6",
+    "react-reflex": "4.2.7",
     "react-resizable": "3.0.5",
-    "react-resize-detector": "12.0.1",
     "react-rnd": "10.4.13",
     "react-select": "5.9.0",
     "react-window": "1.8.11",

diff --git a/packages/legend-art/src/Interaction.ts b/packages/legend-art/src/Interaction.ts
diff --git a/packages/legend-art/src/index.ts b/packages/legend-art/src/index.ts
@@ -78,7 +78,5 @@ export * from './utils/ComponentUtils.js';
 
 export * from './markdown/MarkdownTextViewer.js';
 
-export * from './Interaction.js';
-
 export * from './color/TailwindCSSPalette.js';
 export * from './color/ColorPicker.js';
diff --git a/packages/legend-art/src/layout/BlankPanelContent.tsx b/packages/legend-art/src/layout/BlankPanelContent.tsx
@@ -15,7 +15,7 @@
  */
 
 import { useEffect, useState } from 'react';
-import { useResizeDetector } from 'react-resize-detector';
+import { useResizeDetector } from '../utils/ComponentUtils.js';
 import { clsx } from 'clsx';
 
 const DEFAULT_CONTENT_PADDING = 20;

diff --git a/packages/legend-art/src/layout/BlankPanelPlaceholder.tsx b/packages/legend-art/src/layout/BlankPanelPlaceholder.tsx
@@ -16,7 +16,7 @@
 
 import { useEffect, useState } from 'react';
 import { VerticalAlignBottomIcon, AddIcon, EditIcon } from '../icon/Icon.js';
-import { useResizeDetector } from 'react-resize-detector';
+import { useResizeDetector } from '../utils/ComponentUtils.js';
 import { BlankPanelContent } from './BlankPanelContent.js';
 import { clsx } from 'clsx';
 

diff --git a/packages/legend-art/src/utils/ComponentUtils.ts b/packages/legend-art/src/utils/ComponentUtils.ts
@@ -14,20 +14,28 @@
  * limitations under the License.
  */
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import Draggable from 'react-draggable';
+import { Resizable, ResizableBox } from 'react-resizable';
+import { Rnd } from 'react-rnd';
+import { debounce, throttle, type DebouncedFunc } from '@finos/legend-shared';
 
 export { clsx, type ClassValue };
 export { Portal, useForkRef } from '@mui/material';
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+export { Global, css } from '@emotion/react';
+export { Draggable };
+export { Resizable, ResizableBox };
+export { Rnd as ResizableAndDraggableBox };
 
-export { useResizeDetector } from 'react-resize-detector';
-
-// React `setState` used to come with a callback that runs after the state is updated
-// See https://www.robinwieruch.de/react-usestate-callback
+/**
+ * React `setState` used to come with a callback that runs after the state is updated
+ * See https://www.robinwieruch.de/react-usestate-callback
+ */
 export const useStateWithCallback = <T>(
   initialState: T,
   callback: (newState: T) => void,
@@ -37,4 +45,131 @@ export const useStateWithCallback = <T>(
   return [state, setState];
 };
 
-export { Global, css } from '@emotion/react';
+/**
+ * Use ResizeObserver to detect size of an element
+ * Adapted from `react-resize-detector`
+ *
+ * See https://github.com/maslianok/react-resize-detector
+ * See https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
+ */
+export function useResizeDetector<
+  T extends HTMLElement = HTMLElement,
+>(options?: {
+  /**
+   * Do not trigger update when a component mounts.
+   */
+  skipOnMount?: boolean;
+  refreshMode?: 'throttle' | 'debounce';
+  refreshRate?: number;
+  refreshOptions?: { leading?: boolean; trailing?: boolean } | undefined;
+  /**
+   * NOTE: Make sure to wrap this with `useCallback` to avoid unnecessary re-renders.
+   */
+  onResize?:
+    | ((
+        payload:
+          | { width: number; height: number; entry: ResizeObserverEntry }
+          | { width: undefined; height: undefined; entry: undefined },
+      ) => void)
+    | undefined;
+  targetRef?: React.RefObject<T | null> | undefined;
+}): {
+  ref: React.RefObject<T | null>;
+  width?: number | undefined;
+  height?: number | undefined;
+} {
+  // If `skipOnMount` is enabled, skip the first resize event
+  const skipResize = useRef<boolean>(options?.skipOnMount);
+  const refreshMode = options?.refreshMode;
+  const refreshRate = options?.refreshRate ?? 1000;
+  const refreshOptions = useMemo(
+    () => ({
+      leading: options?.refreshOptions?.leading,
+      trailing: options?.refreshOptions?.trailing,
+    }),
+    [options?.refreshOptions?.leading, options?.refreshOptions?.trailing],
+  );
+
+  const [size, setSize] = useState<{
+    width: number | undefined;
+    height: number | undefined;
+  }>({
+    width: undefined,
+    height: undefined,
+  });
+  const _ref = useRef<T>(null);
+  const ref = useMemo(() => options?.targetRef ?? _ref, [options?.targetRef]);
+
+  const onResize = options?.onResize;
+  const resizeCallback = useCallback(
+    (entries: ResizeObserverEntry[]) => {
+      if (skipResize.current) {
+        skipResize.current = false;
+        return;
+      }
+
+      entries.forEach((entry) => {
+        const nextSize = {
+          width: entry.contentRect.width,
+          height: entry.contentRect.height,
+        };
+        setSize((prevSize) => {
+          if (
+            prevSize.width === nextSize.width &&
+            prevSize.height === nextSize.height
+          ) {
+            return prevSize;
+          }
+          onResize?.({
+            width: nextSize.width,
+            height: nextSize.height,
+            entry,
+          });
+          return nextSize;
+        });
+      });
+    },
+    [skipResize, onResize],
+  );
+
+  // customize refresh behavior
+  const resizeHandler = useMemo(() => {
+    switch (refreshMode) {
+      case 'debounce':
+        return debounce(resizeCallback, refreshRate, refreshOptions);
+      case 'throttle':
+        return throttle(resizeCallback, refreshRate, refreshOptions);
+      default:
+        return resizeCallback;
+    }
+  }, [resizeCallback, refreshMode, refreshRate, refreshOptions]);
+
+  // attach ResizeObserver to the element
+  useEffect(() => {
+    let resizeObserver: ResizeObserver | undefined;
+
+    if (ref.current) {
+      resizeObserver = new window.ResizeObserver(resizeHandler);
+      resizeObserver.observe(ref.current);
+    } else {
+      // if ref element is not registered, reset the size
+      onResize?.({
+        width: undefined,
+        height: undefined,
+        entry: undefined,
+      });
+      setSize({ width: undefined, height: undefined });
+    }
+
+    return () => {
+      resizeObserver?.disconnect();
+      if ('cancel' in resizeHandler) {
+        (
+          resizeHandler as unknown as DebouncedFunc<ResizeObserverCallback>
+        ).cancel();
+      }
+    };
+  }, [resizeHandler, onResize, ref]);
+
+  return { ref, ...size };
+}
diff --git a/packages/legend-dev-utils/WebpackConfigUtils.js b/packages/legend-dev-utils/WebpackConfigUtils.js
@@ -296,11 +296,6 @@ export const getWebAppBaseWebpackConfig = (
         // Reduce `monaco-editor` bundle size by using ESM bundle which enables tree-shaking
         // See https://github.com/microsoft/monaco-editor-webpack-plugin/issues/97
         'monaco-editor': 'monaco-editor/esm/vs/editor/editor.api.js',
-        // This is added to handle `react-resize-detector` importing lodash/debounce despite being an ESM module
-        // (it's probably should be updated to use lodash-es instead)
-        // TODO: check if this is still needed later
-        'lodash/debounce': 'lodash-es/debounce.js',
-        'lodash/throttle': 'lodash-es/throttle.js',
       },
     },
     devServer: {

diff --git a/packages/legend-query-builder/src/components/__tests__/QueryBuilderResultPanel.test.ts b/packages/legend-query-builder/src/components/__tests__/QueryBuilderResultPanel.test.ts
@@ -287,7 +287,7 @@ const testQueryBuilderStateSetup = async (): Promise<{
   return { renderResult, queryBuilderState };
 };
 
-test(
+test.only(
   integrationTest('Query Builder Execution Data Incompleteness Warning'),
   async () => {
     const { renderResult, queryBuilderState } =

diff --git a/packages/legend-vscode-extension-dependencies/package.json b/packages/legend-vscode-extension-dependencies/package.json
@@ -70,7 +70,7 @@
     "rollup-plugin-flow": "1.1.1",
     "rollup-plugin-import-css": "3.5.8",
     "rollup-plugin-postcss": "4.0.2",
-    "tailwindcss": "3.4.16",
+    "tailwindcss": "3.4.17",
     "typescript": "5.7.2"
   },
   "publishConfig": {

diff --git a/scripts/test/jest.config.base.js b/scripts/test/jest.config.base.js
@@ -88,9 +88,6 @@ export const getBaseJestConfig = (isGlobal) => {
       'ag-grid-community',
       'ag-grid-enterprise',
 
-      // react-resize-detector
-      'react-resize-detector',
-
       // color-parse
       'color-parse',
       'color-name',