Support Storybook v8

.github/workflows/test.yml

@@ -7,7 +7,7 @@ on:
     branches: [master]
 
 jobs:
-  storybook7:
+  storybook8:
     runs-on: ubuntu-latest
     env:
       HAPPO_API_KEY: ${{ secrets.HAPPO_API_KEY }}
@@ -26,6 +26,23 @@ jobs:
       - run: yarn build && yarn happo run
       - run: yarn build-local-storybook && HAPPO_USE_PREBUILT_PACKAGE=yes yarn happo run
 
+  storybook7:
+    runs-on: ubuntu-latest
+    env:
+      HAPPO_API_KEY: ${{ secrets.HAPPO_API_KEY }}
+      HAPPO_API_SECRET: ${{ secrets.HAPPO_API_SECRET }}
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 18
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18
+      - run: corepack enable
+      - run: yarn install --frozen-lockfile
+      - run: yarn add --dev @storybook/addon-actions@7 @storybook/addon-interactions@7 @storybook/api@7 @storybook/manager-api@7 @storybook/preview-api@7 @storybook/react@7 @storybook/react-webpack5@7 storybook@7
+      - run: yarn build && yarn happo run
+
   storybook6:
     runs-on: ubuntu-latest
     env:

.gitignore

@@ -7,3 +7,4 @@ node_modules
 /constants.js
 .yarnrc.yml
 .yarn
+dist

.npmignore

@@ -1,3 +1,4 @@
 node_modules
 .happo-out
 test
+dist

.storybook/Interactive.stories.js

@@ -1,13 +1,13 @@
-import { within, userEvent } from '@storybook/testing-library';
-import { useState } from 'react';
-import { expect } from '@storybook/jest';
+import { within, userEvent } from '@storybook/test';
+import React, { useState } from 'react';
+import { expect } from '@storybook/test';
 import { forceHappoScreenshot } from '../register';
 
 const Interactive = () => {
   const [value, setValue] = useState();
   return (
     <div>
-      <button onClick={() => setValue(old => !old)}>click me</button>
+      <button onClick={() => setValue((old) => !old)}>click me</button>
       {value && <p>I was clicked</p>}
       {!value && <p>I was not clicked</p>}
     </div>

.storybook/Story.stories.js

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import TetherComponent from 'react-tether';
-import { configure } from '@storybook/react';
-import { storiesOf } from '@storybook/react';
 import Tooltip from '@mui/material/Tooltip';
 
 import testImage from './testImage.png';

.storybook/main.js

@@ -1,16 +1,19 @@
 const result = {
-  features: {
-    storyStoreV7: process.env.USE_STORYSTORE_V7 !== 'false',
-  },
   stories: ['./**/*.stories.js'],
   staticDirs: ['../public'],
+
   addons: process.env.DISABLE_ADDONS
     ? []
     : [
         '@storybook/addon-actions',
         '@storybook/addon-interactions',
         '../preset.js',
+        '@storybook/addon-webpack5-compiler-babel',
       ],
+
+  docs: {
+    autodocs: true,
+  },
 };
 
 if (process.env.DISABLE_REACT_WEBPACK5_FRAMEWORK) {

package.json

@@ -52,15 +52,15 @@
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.8.0",
-    "@storybook/addon-actions": "^7.6.7",
-    "@storybook/addon-interactions": "^7.6.7",
-    "@storybook/api": "^7.6.7",
-    "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^7.6.7",
-    "@storybook/preview-api": "^7.6.7",
-    "@storybook/react": "^7.6.7",
-    "@storybook/react-webpack5": "^7.6.7",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/addon-actions": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/api": "^7.6.17",
+    "@storybook/manager-api": "^8.0.0",
+    "@storybook/preview-api": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-webpack5": "^8.0.0",
+    "@storybook/test": "^8.0.0",
     "babel-loader": "^8.0.5",
     "eslint": "^8.6.0",
     "eslint-plugin-jest": "^27.6.3",
@@ -72,7 +72,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-tether": "^2.0.0",
-    "storybook": "^7.6.7",
+    "storybook": "^8.0.0",
     "styled-components": "^4.1.3",
     "webpack": "^4.0.0"
   },

src/register.js

@@ -42,7 +42,9 @@ async function waitForWaitFor(waitFor, start = time.originalDateNow()) {
 }
 
 async function getExamples() {
-  const storyStore = window.__STORYBOOK_CLIENT_API__._storyStore;
+  const storyStore = window.__STORYBOOK_CLIENT_API__
+    ? window.__STORYBOOK_CLIENT_API__._storyStore
+    : window.__STORYBOOK_PREVIEW__.storyStoreValue;
 
   if (!storyStore.extract) {
     throw new Error('Missing Storybook Client API');

test/getStorybookVersionFromPackageJson-test.js

@@ -5,7 +5,7 @@ const getStorybookVersionFromPackageJson = require('../getStorybookVersionFromPa
 describe('with project package.json', () => {
   it('finds the right version', () => {
     const version = getStorybookVersionFromPackageJson();
-    expect(version).toBe(7);
+    expect(version).toBe(8);
   });
 });