feat(client): initial storybook/jest setup

Roll back to Webpack 4 because Storybook does not support Webpack 5 for
the near future (see
storybookjs/storybook#11326 (comment)).

Use @storybook/react (which includes React as a dependency) instead of
Preact because the Storybook build breaks when using theme-ui (most
likely because of the bundled React dependency).

client/.storybook/.babelrc

@@ -0,0 +1,15 @@
+{
+  presets: [
+    ['@babel/preset-typescript', {
+      isTSX: true,
+      allExtensions: true
+    }],
+    ['@babel/preset-react', {
+      pragma: 'jsx',
+      pragmaFrag: 'Fragment'
+    }],
+    ['@babel/preset-env', {
+      targets: { esmodules: true }
+    }]
+  ]
+}

client/.storybook/main.js

@@ -0,0 +1,15 @@
+const webpack = require('webpack')
+
+module.exports = {
+  stories: ['../src/**/*.stories.tsx'],
+  webpackFinal: config => {
+    config.plugins.push(
+      new webpack.ProvidePlugin({
+        jsx: ['theme-ui', 'jsx'],
+        Fragment: ['react', 'Fragment']
+      })
+    )
+
+    return config
+  }
+}

client/webpack.config.js

@@ -4,7 +4,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const TerserWebpackPlugin = require('terser-webpack-plugin')
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
-// const PrefreshWebpackPlugin = require('@prefresh/webpack')
+const PrefreshWebpackPlugin = require('@prefresh/webpack')
 
 module.exports = (env) => {
   const babelConfig = {
@@ -23,7 +23,7 @@ module.exports = (env) => {
     ],
     plugins: [
       ...(env === 'development' ? [
-        // 'react-refresh/babel'
+        'react-refresh/babel'
       ] : [])
     ]
   }
@@ -60,8 +60,8 @@ module.exports = (env) => {
       }),
       new ForkTsCheckerWebpackPlugin(),
       ...(env === 'development' ? [
+        new PrefreshWebpackPlugin(),
         new webpack.HotModuleReplacementPlugin()
-        // new PrefreshWebpackPlugin()
       ] : [])
     ],
     optimization: {
@@ -80,6 +80,7 @@ module.exports = (env) => {
         loader: 'eslint-loader'
       }, {
         test: /\.[jt]sx?$/,
+        exclude: /node_modules/,
         use: [{
           loader: 'babel-loader',
           options: babelConfig
@@ -96,8 +97,8 @@ module.exports = (env) => {
       host: '0.0.0.0',
       disableHostCheck: true,
       overlay: {
-        errors: true
-        // warnings: true
+        errors: true,
+        warnings: true
       },
       hot: true,
       historyApiFallback: true,

package.json

@@ -17,6 +17,7 @@
     "watch:server": "nodemon --enable-source-maps dist/server/index.js | pino-pretty -c -t",
     "watch:ts": "tsc -w -p server",
     "dev": "yarn build:ts && concurrently -k -t \"HH:mm:ss.SSS\" -p \"[{time}]\" -c \"cyan,green,red\" \"yarn:watch:*\"",
+    "storybook": "start-storybook -c client/.storybook",
     "test": "yarn build && nyc --nycrc-path server/.nycrc.json --skip-full ava",
     "test:slim": "ava",
     "test:report": "nyc --nycrc-path server/.nycrc.json --skip-full --reporter=lcov ava",
@@ -63,6 +64,7 @@
     "@babel/preset-react": "7.10.4",
     "@babel/preset-typescript": "7.10.4",
     "@prefresh/webpack": "0.8.2",
+    "@storybook/react": "6.0.0-rc.29",
     "@types/content-disposition": "0.5.3",
     "@types/mailgun-js": "0.22.10",
     "@types/mustache": "4.0.1",
@@ -97,19 +99,21 @@
     "history": "5.0.0",
     "html-webpack-plugin": "4.3.0",
     "husky": "4.2.5",
+    "jest": "26.2.2",
     "lint-staged": "10.2.11",
     "nodemon": "2.0.4",
     "nyc": "15.1.0",
     "pino-pretty": "4.1.0",
     "preact": "10.4.6",
+    "preact-render-to-json": "3.6.6",
     "react-refresh": "0.8.3",
     "react-router-dom": "6.0.0-beta.0",
     "supertest": "4.0.2",
     "terser-webpack-plugin": "4.0.0",
     "theme-ui": "0.3.1",
     "type-fest": "0.16.0",
     "typescript": "3.9.7",
-    "webpack": "5.0.0-beta.24",
+    "webpack": "4.44.1",
     "webpack-cli": "3.3.12",
     "webpack-dev-server": "3.11.0"
   },