Upgrade storybook and chromatic (#4132)

Upgrade storybook to 6.5.10. 6.5 is needed for React 18 support: storybookjs/storybook#16797
foxglove · Aug 15, 2022 · 0ea6c51 · 0ea6c51
1 parent 18c9db2
commit 0ea6c51
Show file tree

Hide file tree

Showing 6 changed files with 1,180 additions and 1,509 deletions.
diff --git a/package.json b/package.json
@@ -72,11 +72,11 @@
     "@sentry/electron": "4.0.0",
     "@sentry/tracing": "7.10.0",
     "@sentry/webpack-plugin": "1.18.8",
-    "@storybook/addon-actions": "6.4.18",
-    "@storybook/addon-essentials": "6.4.18",
-    "@storybook/builder-webpack5": "6.4.18",
-    "@storybook/manager-webpack5": "6.4.18",
-    "@storybook/react": "patch:@storybook/react@6.4.18#./patches/storybook-react.patch",
+    "@storybook/addon-actions": "6.5.10",
+    "@storybook/addon-essentials": "6.5.10",
+    "@storybook/builder-webpack5": "6.5.10",
+    "@storybook/manager-webpack5": "6.5.10",
+    "@storybook/react": "patch:@storybook/react@6.5.10#./patches/storybook-react.patch",
     "@types/babel__core": "^7.1.18",
     "@types/babel__preset-env": "^7.9.2",
     "@types/case-sensitive-paths-webpack-plugin": "2.1.6",

diff --git a/packages/studio-base/package.json b/packages/studio-base/package.json
@@ -119,7 +119,7 @@
     "chart.js": "3.7.0",
     "chartjs-plugin-annotation": "1.2.1",
     "chartjs-plugin-datalabels": "2.0.0",
-    "chromatic": "6.4.3",
+    "chromatic": "6.7.4",
     "circular-dependency-plugin": "5.2.2",
     "classnames": "2.3.1",
     "comlink": "4.3.1",
@@ -190,7 +190,6 @@
     "sanitize-html": "2.7.0",
     "seedrandom": "3.0.5",
     "shallowequal": "1.1.0",
-    "storycap": "3.1.0",
     "string-hash": "1.1.3",
     "string-replace-loader": "3.1.0",
     "style-loader": "3.3.1",

diff --git a/packages/studio-base/src/panels/Tab/index.stories.tsx b/packages/studio-base/src/panels/Tab/index.stories.tsx
@@ -376,8 +376,8 @@ storiesOf("panels/Tab", module)
         }}
       >
         <PanelLayout />
-        <SExpectedResult css="left: 0">Should have only #2</SExpectedResult>
-        <SExpectedResult css="left: 50%">Should have #3 and #1</SExpectedResult>
+        <SExpectedResult style={{ left: 0 }}>Should have only #2</SExpectedResult>
+        <SExpectedResult style={{ left: "50%" }}>Should have #3 and #1</SExpectedResult>
       </PanelSetup>
     );
   })
@@ -412,10 +412,10 @@ storiesOf("panels/Tab", module)
         }}
       >
         <PanelLayout />
-        <SExpectedResult css="left: 0">
+        <SExpectedResult style={{ left: 0 }}>
           the first tab should be hidden (we never dropped it)
         </SExpectedResult>
-        <SExpectedResult css="top: 50px">tab content should be hidden</SExpectedResult>
+        <SExpectedResult style={{ top: "50px" }}>tab content should be hidden</SExpectedResult>
       </PanelSetup>
     );
   })

diff --git a/packages/three-text/package.json b/packages/three-text/package.json
@@ -29,11 +29,11 @@
     "three": ">=0.140.2"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "6.4.18",
-    "@storybook/addon-essentials": "6.4.18",
-    "@storybook/builder-webpack5": "6.4.18",
-    "@storybook/manager-webpack5": "6.4.18",
-    "@storybook/react": "6.4.18",
+    "@storybook/addon-actions": "6.5.10",
+    "@storybook/addon-essentials": "6.5.10",
+    "@storybook/builder-webpack5": "6.5.10",
+    "@storybook/manager-webpack5": "6.5.10",
+    "@storybook/react": "6.5.10",
     "three": "0.140.2",
     "ts-loader": "9.2.7",
     "typescript": "4.6.2"

diff --git a/patches/storybook-react.patch b/patches/storybook-react.patch
@@ -1,30 +1,31 @@
 diff --git a/dist/esm/client/preview/render.js b/dist/esm/client/preview/render.js
-index 4a388101c8db468e1a4c9805c5b5a6a364655487..43a5fda1a29a58df0ee07c4c999d02d282589665 100644
+index 5bf30e1d97021f22c529384316e215df1537f302..43567af6f9b47d550f59898caa21e75a9b4121bc 100644
 --- a/dist/esm/client/preview/render.js
 +++ b/dist/esm/client/preview/render.js
-@@ -53,14 +53,16 @@ export var render = function render(args, context) {
+@@ -57,7 +57,7 @@ export var render = function render(args, context) {
  };
 
  var renderElement = /*#__PURE__*/function () {
 -  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(node, el) {
 +  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(node, el, storyContext) {
+     var root;
      return regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
-         switch (_context.prev = _context.next) {
-           case 0:
-             return _context.abrupt("return", new Promise(function (resolve) {
-               ReactDOM.render(node, el, function () {
--                return resolve(null);
-+                // access the parameters in the render callback to allow decorators to set storyReady
-+                var maybeSignal = storyContext.parameters?.storyReady;
-+                maybeSignal ? maybeSignal.then(() => resolve(null)) : resolve(null);
-               });
+@@ -76,7 +76,9 @@ var renderElement = /*#__PURE__*/function () {
+                 }, 0);
+               } else {
+                 ReactDOM.render(node, el, function () {
+-                  return resolve(null);
++		  // access the parameters in the render callback to allow decorators to set storyReady
++                  var maybeSignal = storyContext.parameters?.storyReady;
++                  maybeSignal ? maybeSignal.then(() => resolve(null)) : resolve(null);
+                 });
+               }
              }));
-
-@@ -164,7 +166,7 @@ function _renderToDOM() {
+@@ -242,7 +244,7 @@ function _renderToDOM() {
              }
 
-             _context2.next = 7;
+             _context3.next = 7;
 -            return renderElement(element, domElement);
 +            return renderElement(element, domElement, storyContext);