feat(editor): Upgrade to Storybook v7 (no-changelog) (#5454)

Storybook 6 + Webpack 4 are pulling in a lot of dependencies that are blocking us from supporting node 18.

packages/design-system/.storybook/main.js

@@ -1,9 +1,13 @@
 const path = require('path');
 
 /**
- * @type {import('@storybook/core-common').StorybookConfig}
+ * @type {import('@storybook/types').StorybookConfig}
  */
 module.exports = {
+	framework: {
+		name: '@storybook/vue-webpack5',
+		options: {},
+	},
 	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.{ts,js}'],
 	addons: [
 		'@storybook/addon-links',

packages/design-system/package.json

@@ -19,8 +19,8 @@
     "test": "vitest run",
     "test:ci": "vitest run --coverage",
     "test:dev": "vitest",
-    "build:storybook": "build-storybook",
+    "build:storybook": "storybook build",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "storybook dev -p 6006",
     "format": "prettier --write . --ignore-path ../../.prettierignore",
     "lint": "eslint --quiet --ext .js,.ts,.vue src",
     "lintfix": "eslint --ext .js,.ts,.vue src --fix"
@@ -42,11 +42,12 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^2.0.9",
-    "@storybook/addon-actions": "^6.5.15",
+    "@storybook/addon-actions": "^7.0.0-beta.46",
-    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-essentials": "^7.0.0-beta.46",
-    "@storybook/addon-links": "^6.5.15",
+    "@storybook/addon-links": "^7.0.0-beta.46",
-    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/addon-postcss": "^3.0.0-alpha.1",
-    "@storybook/vue": "^6.5.15",
+    "@storybook/vue": "^7.0.0-beta.46",
+    "@storybook/vue-webpack5": "^7.0.0-beta.46",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/vue": "^5.8.3",
     "@types/markdown-it": "^12.2.3",
@@ -54,12 +55,14 @@
     "@types/markdown-it-link-attributes": "^3.0.1",
     "@types/sanitize-html": "^2.8.0",
     "@vitejs/plugin-vue2": "^2.2.0",
+    "autoprefixer": "^10.4.13",
     "c8": "7.12.0",
-    "core-js": "^3.27.1",
+    "core-js": "^3.27.2",
-    "jsdom": "21.0.0",
+    "jsdom": "21.1.0",
     "node-notifier": "^10.0.1",
-    "sass": "^1.57.1",
+    "sass": "^1.58.0",
-    "sass-loader": "^10.3.1",
+    "sass-loader": "^13.2.0",
+    "storybook": "^7.0.0-beta.46",
     "storybook-addon-designs": "^6.3.1",
     "storybook-addon-themes": "^6.1.0",
     "trim": "^1.0.1",
@@ -69,8 +72,7 @@
     "vue-loader": "^15.10.1",
     "vue-property-decorator": "^9.1.2",
     "vue-template-compiler": "^2.7.14",
-    "vue-tsc": "^1.0.24",
+    "vue-tsc": "^1.0.24"
-    "webpack": "^4.46.0"
   },
   "dependencies": {
     "element-ui": "~2.15.12",
@@ -78,7 +80,7 @@
     "markdown-it-emoji": "^2.0.2",
     "markdown-it-link-attributes": "^4.0.1",
     "markdown-it-task-lists": "^2.1.1",
-    "sanitize-html": "2.7.3",
+    "sanitize-html": "2.9.0",
     "vue": "^2.7.14",
     "vue-typed-mixins": "^0.2.0",
     "vue2-boring-avatars": "^0.3.8",