chore: upgrade storybook

Author: jscottsmith

.storybook/main.js

@@ -1,39 +1,28 @@
 module.exports = {
   stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
-  addons: [
-    {
-      name: '@storybook/addon-postcss',
-      options: {
-        postcssLoaderOptions: {
-          implementation: require('postcss'),
-          postcssOptions: {
-            plugins: {
-              tailwindcss: {},
-              autoprefixer: {},
-            },
-          },
-        },
+
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', {
+    name: '@storybook/preset-scss',
+    options: {
+      rule: {
+        test: /\.module\.s[ca]ss$/,
       },
-    },
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    {
-      name: '@storybook/preset-scss',
-      options: {
-        rule: {
-          test: /\.module\.s[ca]ss$/,
-        },
-        cssLoaderOptions: {
-          modules: {
-            localIdentName: '[name]__[local]--[hash:base64:5]',
-          },
+      cssLoaderOptions: {
+        modules: {
+          localIdentName: '[name]__[local]--[hash:base64:5]',
         },
       },
     },
-  ],
+  }, '@storybook/addon-webpack5-compiler-swc'],
+
   // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
   typescript: {
     check: true, // type-check stories during Storybook build
     // reactDocgen: false, // https://github.com/storybookjs/storybook/issues/15336
   },
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  }
 };

.storybook/preview.js

@@ -3,5 +3,5 @@ import '/stories/styles.css';
 // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
 export const parameters = {
   // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
-  actions: { argTypesRegex: '^on.*' },
+  actions: {},
 };

package.json

@@ -25,7 +25,7 @@
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "engines": {
-    "node": ">=10"
+    "node": ">=18"
   },
   "scripts": {
     "start": "tsdx watch",
@@ -36,8 +36,8 @@
     "prepare": "tsdx build",
     "size": "size-limit",
     "analyze": "size-limit --why",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "release": "np"
   },
   "jest": {
@@ -97,31 +97,33 @@
   "devDependencies": {
     "@babel/core": "^7.17.8",
     "@size-limit/preset-small-lib": "^6.0.4",
-    "@storybook/addon-essentials": "^6.4.20",
-    "@storybook/addon-links": "^6.4.20",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.4.20",
+    "@storybook/addon-essentials": "^8.5.3",
+    "@storybook/addon-links": "^8.5.3",
+    "@storybook/addon-webpack5-compiler-swc": "^2.0.0",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.4.20",
+    "@storybook/react": "^8.5.3",
+    "@storybook/react-webpack5": "^8.5.3",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^27.0.3",
-    "@types/react": "^17.0.35",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "autoprefixer": "^10.4.20",
     "babel-jest": "^27.5.1",
     "babel-loader": "^8.2.4",
     "css-loader": "^5.0.0",
     "husky": "^7.0.4",
     "np": "^7.7.0",
     "postcss": "^8",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-hooks-testing-library": "^0.6.0",
     "react-is": "^17.0.2",
     "react-test-renderer": "^17.0.1",
     "sass": "^1.49.11",
     "sass-loader": "^10.1.0",
     "size-limit": "^6.0.4",
+    "storybook": "^8.5.3",
     "style-loader": "^2.0.0",
     "tailwindcss": "^2.2.19",
     "tsdx": "^0.14.1",

src/components/ParallaxProvider/index.test.tsx

@@ -1,7 +1,7 @@
 /* global describe, it */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { ParallaxController } from 'parallax-controller';
 
 import { render } from '@testing-library/react';
@@ -19,11 +19,11 @@ describe('A <ParallaxProvider>', () => {
     };
 
     const render = () => {
-      ReactDOM.render(
+      const root = createRoot(node);
+      root.render(
         <ParallaxProvider>
           <Child />
-        </ParallaxProvider>,
-        node
+        </ParallaxProvider>
       );
     };
 
@@ -161,26 +161,26 @@ describe('A <ParallaxProvider>', () => {
         instance = useParallaxController();
         return null;
       };
-      ReactDOM.render(
-        // @ts-ignore
+
+      const root = createRoot(node);
+      root.render(
         <ParallaxProvider>
           <GetInstance />
-        </ParallaxProvider>,
-        node
+        </ParallaxProvider>
       );
-      return instance;
+      return { instance, root };
     };
 
     // first instance mounted
-    const instance1 = render(node1);
+    const { instance: instance1, root: root1 } = render(node1);
     expect(instance1).toBeInstanceOf(ParallaxController);
 
     // second instance mounted
-    const instance2 = render(node2);
+    const { instance: instance2 } = render(node2);
     expect(instance2).toBeInstanceOf(ParallaxController);
 
     // unmount first instance
-    ReactDOM.unmountComponentAtNode(node1);
+    root1.unmount();
 
     // this must still be defined
     expect(instance2).toBeInstanceOf(ParallaxController);

src/testUtils/MockProvider.tsx

@@ -1,16 +1,22 @@
-import React, { Component } from 'react';
+import React, { Component, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { ParallaxContext } from '../../src/context/ParallaxContext';
 import { ParallaxController } from 'parallax-controller';
 
-export class MockProvider extends Component {
+export class MockProvider extends Component<{
+  children: ReactNode;
+  controllerMock: ParallaxController;
+}> {
   static propTypes = {
     children: PropTypes.node.isRequired,
     controllerMock: PropTypes.object.isRequired,
   };
   controller: ParallaxController;
 
-  constructor(props: { controllerMock: ParallaxController }) {
+  constructor(props: {
+    children: ReactNode;
+    controllerMock: ParallaxController;
+  }) {
     super(props);
     this.controller = props.controllerMock;
   }

src/testUtils/expectRenderError.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable */
 const React = require('react');
-const ReactDOM = require('react-dom');
+const { createRoot } = require('react-dom/client');
 
 export default function expectRenderError(
   element: any,
@@ -32,8 +32,9 @@ export default function expectRenderError(
   const div = document.createElement('div');
   window.addEventListener('error', handleTopLevelError);
   try {
+    const root = createRoot(div);
     // @ts-ignore
-    ReactDOM.render(<TestBoundary>{element}</TestBoundary>, div);
+    root.render(<TestBoundary>{element}</TestBoundary>, div);
   } finally {
     window.removeEventListener('error', handleTopLevelError);
   }

stories/styles.css

@@ -2,17 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700');
-
 html {
   height: 100%;
 }
 body,
-#root {
+#storybook-root {
   display: flex !important;
   min-width: 100%;
   min-height: 100%;
 }
-
 body {
   padding: 0 !important;
   margin: 0;
@@ -22,7 +20,6 @@ body {
   background-image: url('static/bg-grid.svg');
   background-color: #222;
 }
-
 .scroll-container {
   position: fixed;
   top: 50px;
@@ -52,7 +49,6 @@ body {
   transform: translate3d(-50%, 0, 0);
   top: 60px;
 }
-
 .vertical {
   width: 100%;
   min-height: 300vh;
@@ -74,7 +70,6 @@ body {
   z-index: 1000;
   transform: translate3d(-50%, 0, 0);
 }
-
 .horizontal {
   height: 100%;
   min-width: 300vw;
@@ -96,11 +91,9 @@ body {
   z-index: 1000;
   transform: translate3d(-50%, 0, 0);
 }
-
 .parallax-outer {
   background-color: rgba(255, 255, 255, 0.05);
 }
-
 .parallax-inner {
   will-change: transform;
 }