Merge pull request #20333 from storybookjs/norbert/react-sizeme-migra…

…tion UI: swap `react-sizeme` for `react-resize-detector`
storybookjs · Dec 20, 2022 · 0fb2856 · 0fb2856
2 parents 111edc3 + 610f9e5
commit 0fb2856
Show file tree

Hide file tree

Showing 11 changed files with 54 additions and 67 deletions.
diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
@@ -74,10 +74,11 @@
     "axe-core": "^4.2.0",
     "global": "^4.4.0",
     "lodash": "^4.17.21",
-    "react-sizeme": "^3.0.1"
+    "react-resize-detector": "^7.1.2"
   },
   "devDependencies": {
     "@testing-library/react": "^11.2.2",
+    "resize-observer-polyfill": "^1.5.1",
     "typescript": "~4.9.3"
   },
   "peerDependencies": {

diff --git a/code/addons/a11y/src/components/A11YPanel.test.tsx b/code/addons/a11y/src/components/A11YPanel.test.tsx
@@ -8,6 +8,9 @@ import { A11YPanel } from './A11YPanel';
 import { EVENTS } from '../constants';
 
 jest.mock('@storybook/manager-api');
+
+global.ResizeObserver = require('resize-observer-polyfill');
+
 const mockedApi = api as jest.Mocked<typeof api>;
 
 const axeResult = {

diff --git a/code/addons/a11y/src/components/Report/Rules.tsx b/code/addons/a11y/src/components/Report/Rules.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { styled } from '@storybook/theming';
 import { Badge } from '@storybook/components';
 import type { CheckResult } from 'axe-core';
-import { SizeMe } from 'react-sizeme';
+import ReactResizeDetector from 'react-resize-detector';
 
 const List = styled.div({
   display: 'flex',
@@ -71,14 +71,14 @@ const Rule: FC<RuleProps> = ({ rule }) => {
       break;
   }
   return (
-    <SizeMe refreshMode="debounce">
-      {({ size }) => (
+    <ReactResizeDetector handleWidth handleHeight refreshMode="debounce">
+      {(size) => (
         <Item elementWidth={size.width || 0}>
           <StyledBadge status={badgeType}>{formatSeverityText(rule.impact)}</StyledBadge>
           <Message>{rule.message}</Message>
         </Item>
       )}
-    </SizeMe>
+    </ReactResizeDetector>
   );
 };
 

diff --git a/code/addons/a11y/src/components/Tabs.tsx b/code/addons/a11y/src/components/Tabs.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { styled } from '@storybook/theming';
 import type { NodeResult, Result } from 'axe-core';
-import { SizeMe } from 'react-sizeme';
+import ReactResizeDetector from 'react-resize-detector';
 import HighlightToggle from './Report/HighlightToggle';
 
 import type { RuleType } from './A11YPanel';
@@ -111,8 +111,8 @@ export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
   const highlightToggleId = `${tabs[activeTab].type}-global-checkbox`;
   const highlightLabel = `Highlight results`;
   return (
-    <SizeMe refreshMode="debounce">
-      {({ size }) => (
+    <ReactResizeDetector handleWidth handleHeight refreshMode="debounce">
+      {(size) => (
         <Container>
           <List>
             <TabsWrapper>
@@ -143,6 +143,6 @@ export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
           {tabs[activeTab].panel}
         </Container>
       )}
-    </SizeMe>
+    </ReactResizeDetector>
   );
 };
diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
@@ -76,7 +76,7 @@
     "@storybook/preview-api": "7.0.0-beta.12",
     "@storybook/theming": "7.0.0-beta.12",
     "global": "^4.4.0",
-    "react-sizeme": "^3.0.1",
+    "react-resize-detector": "^7.1.2",
     "upath": "^1.2.0"
   },
   "devDependencies": {

diff --git a/code/addons/jest/src/components/Panel.tsx b/code/addons/jest/src/components/Panel.tsx
@@ -2,10 +2,10 @@ import type { FC } from 'react';
 import React, { Fragment } from 'react';
 import { styled, themes, convert } from '@storybook/theming';
 import { ScrollArea, TabsState, Link, Placeholder } from '@storybook/components';
-import { SizeMe } from 'react-sizeme';
-import Result from './Result';
+import ResizeObserver from 'react-resize-detector';
+import { Result } from './Result';
 import type { Test } from '../hoc/provideJestResult';
-import provideJestResult from '../hoc/provideJestResult';
+import { provideTests as provideJestResult } from '../hoc/provideJestResult';
 
 const StatusTypes = {
   PASSED_TYPE: 'passed',
@@ -134,8 +134,8 @@ const Content = styled(({ tests, className }: ContentProps) => (
       const sortedTestsByCount = [...entries].sort((a, b) => a[1].length - b[1].length);
 
       return (
-        <SizeMe refreshMode="debounce" key={name}>
-          {({ size }: { size: any }) => {
+        <ResizeObserver refreshMode="debounce" key={name}>
+          {(size) => {
             const { width } = size;
             return (
               <section>
@@ -259,7 +259,7 @@ const Content = styled(({ tests, className }: ContentProps) => (
               </section>
             );
           }}
-        </SizeMe>
+        </ResizeObserver>
       );
     })}
   </div>

diff --git a/code/addons/jest/src/components/Result.tsx b/code/addons/jest/src/components/Result.tsx
@@ -86,5 +86,3 @@ export function Result(props: ResultProps) {
     </Fragment>
   );
 }
-
-export default Result;
diff --git a/code/addons/jest/src/hoc/provideJestResult.tsx b/code/addons/jest/src/hoc/provideJestResult.tsx
@@ -37,7 +37,7 @@ export interface HocState {
   tests?: Test[];
 }
 
-const provideTests = (Component: ComponentType<InjectedProps>) =>
+export const provideTests = (Component: ComponentType<InjectedProps>) =>
   class TestProvider extends ReactComponent<HocProps, HocState> {
     state: HocState = {};
 
@@ -82,5 +82,3 @@ const provideTests = (Component: ComponentType<InjectedProps>) =>
       return active ? <Component tests={tests} /> : null;
     }
   };
-
-export default provideTests;
diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json
@@ -82,7 +82,7 @@
     "react-dom": "^16.8.0",
     "react-draggable": "^4.4.3",
     "react-helmet-async": "^1.0.7",
-    "react-sizeme": "^3.0.1",
+    "react-resize-detector": "^7.1.2",
     "resolve-from": "^5.0.0",
     "semver": "^7.3.7",
     "store2": "^2.14.2",

diff --git a/code/ui/manager/src/app.tsx b/code/ui/manager/src/app.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
-import sizeMe from 'react-sizeme';
+import ResizeObserver from 'react-resize-detector';
 
 import { type State } from '@storybook/manager-api';
 import { Symbols } from '@storybook/components';
@@ -27,14 +27,12 @@ export interface AppProps {
   viewMode: State['viewMode'];
   layout: State['layout'];
   panelCount: number;
-  size: {
-    width: number;
-    height: number;
-  };
+  width: number;
+  height: number;
 }
 
 const App = React.memo<AppProps>(
-  ({ viewMode, layout, panelCount, size: { width, height } }) => {
+  ({ viewMode, layout, panelCount, width, height }) => {
     let content;
 
     const props = useMemo(
@@ -109,7 +107,11 @@ const App = React.memo<AppProps>(
   }
 );
 
-const SizedApp = sizeMe({ monitorHeight: true })(App);
+const SizedApp = (props: Omit<AppProps, 'width' | 'height'>) => (
+  <ResizeObserver>
+    {({ width, height }) => <App {...props} {...{ width, height }} />}
+  </ResizeObserver>
+);
 
 App.displayName = 'App';
 

diff --git a/code/yarn.lock b/code/yarn.lock
@@ -5283,7 +5283,8 @@ __metadata:
     axe-core: ^4.2.0
     global: ^4.4.0
     lodash: ^4.17.21
-    react-sizeme: ^3.0.1
+    react-resize-detector: ^7.1.2
+    resize-observer-polyfill: ^1.5.1
     typescript: ~4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5496,7 +5497,7 @@ __metadata:
     "@storybook/preview-api": 7.0.0-beta.12
     "@storybook/theming": 7.0.0-beta.12
     global: ^4.4.0
-    react-sizeme: ^3.0.1
+    react-resize-detector: ^7.1.2
     typescript: ~4.9.3
     upath: ^1.2.0
   peerDependencies:
@@ -6728,7 +6729,7 @@ __metadata:
     react-dom: ^16.8.0
     react-draggable: ^4.4.3
     react-helmet-async: ^1.0.7
-    react-sizeme: ^3.0.1
+    react-resize-detector: ^7.1.2
     resolve-from: ^5.0.0
     semver: ^7.3.7
     store2: ^2.14.2
@@ -11462,13 +11463,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"batch-processor@npm:1.0.0":
-  version: 1.0.0
-  resolution: "batch-processor@npm:1.0.0"
-  checksum: 048b868811bed4cd03a0eec35264055f0f3fe4ab62f501809dce4a8a7b845d905fa5051b4af8b3c5123181116b1e2b6dfabf608829043b60cf61f4da3a359b60
-  languageName: node
-  linkType: hard
-
 "batch@npm:0.6.1":
   version: 0.6.1
   resolution: "batch@npm:0.6.1"
@@ -14871,15 +14865,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"element-resize-detector@npm:^1.2.2":
-  version: 1.2.4
-  resolution: "element-resize-detector@npm:1.2.4"
-  dependencies:
-    batch-processor: 1.0.0
-  checksum: 8c180c8c2a6d5b83678f994e937890f06db6355009cce2bde3c690a45510c92f53f927431926b27db416739aa7b661c7d3afe237d17cd16491ecccfa740cda08
-  languageName: node
-  linkType: hard
-
 "ember-cli-babel-plugin-helpers@npm:^1.1.1":
   version: 1.1.1
   resolution: "ember-cli-babel-plugin-helpers@npm:1.1.1"
@@ -27476,6 +27461,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-resize-detector@npm:^7.1.2":
+  version: 7.1.2
+  resolution: "react-resize-detector@npm:7.1.2"
+  dependencies:
+    lodash: ^4.17.21
+  peerDependencies:
+    react: ^16.0.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
+  checksum: 2285b0024bcc736c7d5e80279e819835a5e8bef0899778100d2434b1c4b10971e6ae253df073ca96a20cacc47b3c249bc675479e5fc4ec1f6652fcca7f48ec22
+  languageName: node
+  linkType: hard
+
 "react-router-dom@npm:6.0.2":
   version: 6.0.2
   resolution: "react-router-dom@npm:6.0.2"
@@ -27500,18 +27497,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-sizeme@npm:^3.0.1":
-  version: 3.0.2
-  resolution: "react-sizeme@npm:3.0.2"
-  dependencies:
-    element-resize-detector: ^1.2.2
-    invariant: ^2.2.4
-    shallowequal: ^1.1.0
-    throttle-debounce: ^3.0.1
-  checksum: e6b336bbc1e9de78de5c7177afd398f6ea14c4284af698475f08d34389e9307cbc36c0125a61b158e026f182ae4dd17b13c28683bbc1a371792bccd1e51cccff
-  languageName: node
-  linkType: hard
-
 "react-syntax-highlighter@npm:^15.4.5, react-syntax-highlighter@npm:^15.5.0":
   version: 15.5.0
   resolution: "react-syntax-highlighter@npm:15.5.0"
@@ -28633,6 +28618,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resize-observer-polyfill@npm:^1.5.1":
+  version: 1.5.1
+  resolution: "resize-observer-polyfill@npm:1.5.1"
+  checksum: 5e882475067f0b97dc07e0f37c3e335ac5bc3520d463f777cec7e894bb273eddbfecb857ae668e6fb6881fd6f6bb7148246967172139302da50fa12ea3a15d95
+  languageName: node
+  linkType: hard
+
 "resolve-cwd@npm:^2.0.0":
   version: 2.0.0
   resolution: "resolve-cwd@npm:2.0.0"
@@ -31284,13 +31276,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"throttle-debounce@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "throttle-debounce@npm:3.0.1"
-  checksum: c8e558479463b7ed8bac30d6b10cc87abd1c9fc64edfce2db4109be1a04acaef5d2d0557f49c1a3845ea07d9f79e6e0389b1b60db0a77c44e5b7a1216596f285
-  languageName: node
-  linkType: hard
-
 "through2@npm:^2.0.0, through2@npm:^2.0.2, through2@npm:~2.0.3":
   version: 2.0.5
   resolution: "through2@npm:2.0.5"
-Original file line number
+Diff line change
@@ Expand Up / @@ -86,5 +86,3 @@ export function Result(props: ResultProps) { @@
         </Fragment>
       );
     }
-    export default Result;