fix(ui): migrate storybook to webpack5

ui/.depcheckrc.yaml

@@ -15,5 +15,7 @@ ignores:
   - "@percy/cli"
   - "@percy/storybook"
   - "@storybook/preset-create-react-app"
+  - "@storybook/builder-webpack5"
+  - "@storybook/manager-webpack5"
   - "purgecss"
   - "eslint-plugin-jest"

ui/.storybook/main.js

@@ -5,4 +5,8 @@ module.exports = {
   typescript: {
     reactDocgen: "none",
   },
+  core: {
+    builder: "webpack5",
+  },
+  staticDirs: ["../public"],
 };

ui/.storybook/preview.js

@@ -1,6 +1,6 @@
-import { configure, getStorybook, addDecorator } from "@storybook/react";
+import { configure, addDecorator } from "@storybook/react";
 
-import { advanceTo } from "jest-date-mock";
+import timemachine from "timemachine";
 
 import { ThemeContext } from "Components/Theme";
 import {
@@ -13,7 +13,9 @@ import { config } from "react-transition-group";
 config.disabled = true;
 
 // mock date so the silence form always shows same preview
-advanceTo(new Date(Date.UTC(2018, 7, 14, 17, 36, 40)));
+timemachine.config({
+  dateString: "August 14, 2018 17:36:40",
+});
 
 addDecorator((story) => {
   document.body.style = "";

ui/package.json

@@ -57,8 +57,10 @@
   "devDependencies": {
     "@percy/cli": "1.0.0-beta.71",
     "@percy/storybook": "4.1.0",
-    "@storybook/preset-create-react-app": "3.2.0",
-    "@storybook/react": "6.4.9",
+    "@storybook/builder-webpack5": "6.5.0-alpha.3",
+    "@storybook/manager-webpack5": "6.5.0-alpha.3",
+    "@storybook/preset-create-react-app": "4.0.0",
+    "@storybook/react": "6.5.0-alpha.3",
     "@testing-library/react-hooks": "7.0.2",
     "@types/body-scroll-lock": "3.1.0",
     "@types/bricks.js": "1.8.2",
@@ -89,6 +91,7 @@
     "purgecss": "4.1.3",
     "react-scripts": "5.0.0",
     "sass": "1.45.0",
+    "timemachine": "0.3.2",
     "typescript": "4.5.4"
   },
   "scripts": {
@@ -97,7 +100,7 @@
     "postbuild": "make backup-css && purgecss -c purgecss.config.js -o build/static/css",
     "test": "react-scripts test",
     "storybook": "start-storybook",
-    "snapshot": "build-storybook --quiet -s public && percy storybook --verbose ./storybook-static",
+    "snapshot": "build-storybook --quiet && percy storybook --verbose ./storybook-static",
     "analyze": "npx source-map-explorer 'build/static/js/*.js'"
   },
   "jest": {