update storybook

.storybook/main.js

@@ -1,9 +1,6 @@
 const path = require("path");
-
 const fs = require("fs");
-
 const themesPath = path.resolve(__dirname, "..", "themes.json");
-
 if (fs.existsSync(themesPath)) {
   const appConfig = {};
   const themesString = fs.readFileSync(themesPath).toString();
@@ -11,7 +8,6 @@ if (fs.existsSync(themesPath)) {
   appConfig.theme.themes = JSON.parse(themesString);
   process.env.STORYBOOK_APP_CONFIG = JSON.stringify(appConfig);
 }
-
 module.exports = {
   stories: ["../src/react-components/**/*.stories.mdx", "../src/react-components/**/*.stories.js"],
   addons: ["@storybook/addon-links", "@storybook/addon-essentials", "storybook-addon-designs"],
@@ -44,7 +40,9 @@ module.exports = {
           loader: "@svgr/webpack",
           options: {
             titleProp: true,
-            replaceAttrValues: { "#000": "currentColor" },
+            replaceAttrValues: {
+              "#000": "currentColor"
+            },
             exportType: "named",
             svgo: true,
             svgoConfig: {
@@ -73,7 +71,8 @@ module.exports = {
     });
     return config;
   },
-  core: {
+  framework: {
-    builder: "webpack5"
+    name: "@storybook/react-webpack5",
+    options: {}
   }
 };

package.json

@@ -35,7 +35,7 @@
     "spritesheet": "npm run spritesheet:system-action && npm run spritesheet:system-notice",
     "spritesheet:system-action": "spritesheet-js -f json -p src/assets/images/spritesheets/ --padding 8 --divisibleByTwo -n sprite-system-action-spritesheet --powerOfTwo src/assets/images/sprites/action/*",
     "spritesheet:system-notice": "spritesheet-js -f json -p src/assets/images/spritesheets/ --padding 8 --divisibleByTwo -n sprite-system-notice-spritesheet --powerOfTwo src/assets/images/sprites/notice/*",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "storybook dev -p 6006",
     "deploy-storybook": "storybook-to-ghpages",
     "intl-extract": "node ./src/assets/locales/intl-extract.js",
     "intl-extract-en-locale": "node ./src/assets/locales/intl-extract.js en"
@@ -133,6 +133,7 @@
     "screenfull": "^4.0.1",
     "sdp-transform": "^2.14.1",
     "semver": "^7.3.2",
+    "stream-browserify": "^3.0.0",
     "three": "github:mozillareality/three.js#65b5105908f5f135cad25fed07e25f15f3876777",
     "three-ammo": "github:mozillareality/three-ammo",
     "three-gltf-extensions": "^0.0.14",
@@ -140,6 +141,7 @@
     "three-pathfinding": "^1.1.0",
     "three-to-ammo": "github:infinitelee/three-to-ammo",
     "troika-three-text": "^0.45.0",
+    "url": "^0.11.1",
     "use-clipboard-copy": "^0.2.0",
     "uuid": "^3.2.1",
     "webrtc-adapter": "^7.7.0",
@@ -160,13 +162,12 @@
     "@formatjs/cli": "^5.0.6",
     "@formatjs/cli-lib": "^5.1.0",
     "@iarna/toml": "^2.2.5",
-    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-actions": "^7.0.20",
-    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-essentials": "^7.0.20",
-    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-links": "^7.0.20",
-    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/react": "^7.0.20",
-    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/react-webpack5": "^7.0.20",
-    "@storybook/react": "^6.5.9",
+    "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/storybook-deployer": "^2.8.12",
     "@svgr/webpack": "^6.3.1",
     "@types/three": "^0.141.0",
     "@types/webxr": "^0.5.0",
@@ -183,7 +184,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.1",
+    "eslint-plugin-storybook": "^0.6.12",
     "esm": "^3.2.25",
     "fast-plural-rules": "1.0.2",
     "file-loader": "^6.2.0",
@@ -214,6 +215,7 @@
     "selfsigned": "^2.0.1",
     "shelljs": "^0.8.5",
     "spritesheet-js": "github:mozillareality/spritesheet.js#hubs/master",
+    "storybook": "^7.0.20",
     "storybook-addon-designs": "^6.3.1",
     "style-loader": "^3.3.1",
     "stylelint": "^14.9.1",