From f36bbdfb73f24d690036ea273daa4dd2e8be5599 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 19 Dec 2022 19:47:09 +0100 Subject: [PATCH 1/2] swap react-sizeme for react-resize-detector --- code/addons/a11y/package.json | 2 +- .../a11y/src/components/Report/Rules.tsx | 8 +-- code/addons/a11y/src/components/Tabs.tsx | 8 +-- code/addons/jest/package.json | 2 +- code/addons/jest/src/components/Panel.tsx | 8 +-- code/ui/manager/package.json | 2 +- code/ui/manager/src/app.tsx | 16 +++--- code/yarn.lock | 53 ++++++------------- 8 files changed, 39 insertions(+), 60 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index cdbe2c3e33a4..2e4a8ce7e225 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -74,7 +74,7 @@ "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", diff --git a/code/addons/a11y/src/components/Report/Rules.tsx b/code/addons/a11y/src/components/Report/Rules.tsx index 7bbffcc73c10..fa7bb73ea8fe 100644 --- 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 = ({ rule }) => { break; } return ( - - {({ size }) => ( + + {(size) => ( {formatSeverityText(rule.impact)} {rule.message} )} - + ); }; diff --git a/code/addons/a11y/src/components/Tabs.tsx b/code/addons/a11y/src/components/Tabs.tsx index 913988d776e3..aef69aafaace 100644 --- 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 = ({ tabs }) => { const highlightToggleId = `${tabs[activeTab].type}-global-checkbox`; const highlightLabel = `Highlight results`; return ( - - {({ size }) => ( + + {(size) => ( @@ -143,6 +143,6 @@ export const Tabs: React.FC = ({ tabs }) => { {tabs[activeTab].panel} )} - + ); }; diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 5990ae503e6f..309633aedb24 100644 --- 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 index 2202b05210f8..01d75050dd8e 100644 --- a/code/addons/jest/src/components/Panel.tsx +++ b/code/addons/jest/src/components/Panel.tsx @@ -2,7 +2,7 @@ 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 ResizeObserver from 'react-resize-detector'; import Result from './Result'; import type { Test } from '../hoc/provideJestResult'; import provideJestResult from '../hoc/provideJestResult'; @@ -134,8 +134,8 @@ const Content = styled(({ tests, className }: ContentProps) => ( const sortedTestsByCount = [...entries].sort((a, b) => a[1].length - b[1].length); return ( - - {({ size }: { size: any }) => { + + {(size) => { const { width } = size; return (
@@ -259,7 +259,7 @@ const Content = styled(({ tests, className }: ContentProps) => (
); }} - + ); })} diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index bd5eb594c971..9c2e7709efb7 100644 --- 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 index 3efac0841ee8..666c93752b42 100644 --- 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( - ({ viewMode, layout, panelCount, size: { width, height } }) => { + ({ viewMode, layout, panelCount, width, height }) => { let content; const props = useMemo( @@ -109,7 +107,11 @@ const App = React.memo( } ); -const SizedApp = sizeMe({ monitorHeight: true })(App); +const SizedApp = (props: Omit) => ( + + {({ width, height }) => } + +); App.displayName = 'App'; diff --git a/code/yarn.lock b/code/yarn.lock index 210634d1e733..70c8b3ebb12c 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5276,7 +5276,7 @@ __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 typescript: ~4.9.3 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -5489,7 +5489,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: @@ -6721,7 +6721,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 @@ -11452,13 +11452,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" @@ -14861,15 +14854,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" @@ -27466,6 +27450,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" @@ -27490,18 +27486,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" @@ -31274,13 +31258,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" From 71e5df42c2ee708665c50bd4e3a51c0a15a31ba4 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 20 Dec 2022 00:05:53 +0100 Subject: [PATCH 2/2] make tests pass by adding a global polyfill for node for web-only API missing in jsdom --- code/addons/a11y/package.json | 1 + code/addons/a11y/src/components/A11YPanel.test.tsx | 3 +++ code/addons/jest/src/components/Panel.tsx | 4 ++-- code/addons/jest/src/components/Result.tsx | 2 -- code/addons/jest/src/hoc/provideJestResult.tsx | 4 +--- code/yarn.lock | 8 ++++++++ 6 files changed, 15 insertions(+), 7 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 2e4a8ce7e225..e2f53ca7774a 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -78,6 +78,7 @@ }, "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 index 4aa43f866eb5..cb1be531cad3 100644 --- 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; const axeResult = { diff --git a/code/addons/jest/src/components/Panel.tsx b/code/addons/jest/src/components/Panel.tsx index 01d75050dd8e..cba956f1ec0a 100644 --- a/code/addons/jest/src/components/Panel.tsx +++ b/code/addons/jest/src/components/Panel.tsx @@ -3,9 +3,9 @@ import React, { Fragment } from 'react'; import { styled, themes, convert } from '@storybook/theming'; import { ScrollArea, TabsState, Link, Placeholder } from '@storybook/components'; import ResizeObserver from 'react-resize-detector'; -import Result from './Result'; +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', diff --git a/code/addons/jest/src/components/Result.tsx b/code/addons/jest/src/components/Result.tsx index 054118a804ec..c40d15b522d7 100644 --- 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) { ); } - -export default Result; diff --git a/code/addons/jest/src/hoc/provideJestResult.tsx b/code/addons/jest/src/hoc/provideJestResult.tsx index d74f100c7acb..d1cad23b25fc 100644 --- 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) => +export const provideTests = (Component: ComponentType) => class TestProvider extends ReactComponent { state: HocState = {}; @@ -82,5 +82,3 @@ const provideTests = (Component: ComponentType) => return active ? : null; } }; - -export default provideTests; diff --git a/code/yarn.lock b/code/yarn.lock index 70c8b3ebb12c..3fd39e4c0566 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5277,6 +5277,7 @@ __metadata: global: ^4.4.0 lodash: ^4.17.21 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 @@ -28607,6 +28608,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"