build(client): initial sb6.2/builder-webpack5 migration

Migrate to storybook 6.2 beta with webpack 5 builder.

packages/client/.storybook/main.js

@@ -1,24 +1,15 @@
-const webpack = require('webpack')
-
 module.exports = {
   stories: ['../src/**/*.stories.tsx'],
+  core: {
+    builder: 'webpack5',
+  },
   addons: [
     '@storybook/addon-docs',
     '@storybook/addon-controls',
     '@storybook/addon-knobs',
     '@storybook/addon-actions',
     '@storybook/addon-a11y',
   ],
-  webpackFinal: config => {
-    config.plugins.push(
-      new webpack.ProvidePlugin({
-        jsx: ['theme-ui', 'jsx'],
-        Fragment: ['react', 'Fragment'],
-      })
-    )
-
-    return config
-  },
   typescript: {
     check: false,
     checkOptions: {},

packages/client/.storybook/preview.tsx

@@ -1,11 +1,20 @@
-import { addDecorator } from '@storybook/react'
-import centered from '@storybook/addon-centered/react'
+import { ComponentType } from 'react'
 import { withKnobs } from '@storybook/addon-knobs'
 import { ThemeProvider } from 'theme-ui'
 import theme from '../src/util/theme'
 
-if (process.env.NODE_ENV !== 'test') {
-  addDecorator(withKnobs)
-  addDecorator(story => <ThemeProvider theme={theme}>{story()}</ThemeProvider>)
-  addDecorator(centered)
+export const decorators =
+  process.env.NODE_ENV !== 'test'
+    ? [
+        withKnobs,
+        (Story: ComponentType) => (
+          <ThemeProvider theme={theme}>
+            <Story />
+          </ThemeProvider>
+        ),
+      ]
+    : []
+
+export const parameters = {
+  layout: 'centered',
 }

packages/client/package.json

@@ -26,14 +26,14 @@
     "@prefresh/babel-plugin": "0.4.1",
     "@prefresh/webpack": "3.2.0",
     "@reach/auto-id": "0.13.2",
-    "@storybook/addon-a11y": "6.1.21",
-    "@storybook/addon-actions": "6.1.21",
-    "@storybook/addon-centered": "6.0.0-alpha.30",
-    "@storybook/addon-controls": "6.1.21",
-    "@storybook/addon-docs": "6.1.21",
-    "@storybook/addon-knobs": "6.1.21",
-    "@storybook/addon-storyshots": "6.1.21",
-    "@storybook/react": "6.1.21",
+    "@storybook/addon-a11y": "6.2.0-rc.10",
+    "@storybook/addon-actions": "6.2.0-rc.10",
+    "@storybook/addon-controls": "6.2.0-rc.10",
+    "@storybook/addon-docs": "6.2.0-rc.10",
+    "@storybook/addon-knobs": "6.2.0-rc.10",
+    "@storybook/addon-storyshots": "6.2.0-rc.10",
+    "@storybook/builder-webpack5": "6.2.0-rc.10",
+    "@storybook/react": "6.2.0-rc.10",
     "@testing-library/jest-dom": "5.11.10",
     "@testing-library/preact": "2.0.1",
     "@testing-library/user-event": "13.0.16",
@@ -57,6 +57,8 @@
     "preact": "10.5.13",
     "preact-render-to-json": "3.6.6",
     "preact-render-to-string": "5.1.16",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-router-dom": "6.0.0-beta.0",
     "size-plugin": "2.0.2",
     "swr": "0.5.4",