feat: upgrade to storybook 8

.storybook/main.ts

@@ -3,10 +3,15 @@ import { StorybookConfig } from "@storybook/react-vite";
 const config: StorybookConfig = {
   stories: ["../stories/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: ["@storybook/addon-essentials", "../manager.js"],
+
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
+
+  docs: {
+    autodocs: true
+  }
 };
 
 export default config;

package.json

@@ -35,46 +35,45 @@
     "storybook": "storybook dev -p 6007",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@storybook/components": "^8",
+    "@storybook/manager-api": "^8",
+    "@storybook/preview-api": "^8"
+  },
   "devDependencies": {
-    "@kickstartds/core": "^4.0.0",
+    "@kickstartds/core": "^4.0.2",
     "@kickstartds/json-schema-viewer": "^2.0.1",
-    "@monaco-editor/react": "^4.5.1",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/components": "^7.6.17",
-    "@storybook/manager-api": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-vite": "^7.6.17",
-    "@types/decomment": "^0.9.3",
-    "@types/json-schema": "^7.0.13",
-    "@types/react-dom": "^18.2.8",
+    "@monaco-editor/react": "^4.6.0",
+    "@storybook/addon-essentials": "^8",
+    "@storybook/components": "^8",
+    "@storybook/manager-api": "^8",
+    "@storybook/react": "^8",
+    "@storybook/react-vite": "^8",
+    "@storybook/theming": "^8",
+    "@types/decomment": "^0.9.5",
+    "@types/json-schema": "^7.0.15",
+    "@types/react-dom": "^18.2.24",
     "@types/react-router-dom": "^5.3.3",
-    "@types/styled-components": "^3.0.6",
-    "auto": "^11.0.5",
+    "@vitejs/plugin-react": "^4.2.1",
+    "auto": "^11.1.6",
     "decomment": "^0.9.5",
-    "esbuild": "^0.19.3",
-    "esbuild-node-externals": "^1.9.0",
-    "monaco-editor": "^0.39.0",
+    "esbuild": "^0.20.2",
+    "esbuild-node-externals": "^1.13.0",
+    "monaco-editor": "^0.47.0",
     "patch-package": "^8.0.0",
-    "prettier": "^3.0.3",
+    "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "rimraf": "^5.0.5",
-    "storybook": "^7.6.17",
+    "storybook": "^8",
     "styled-components": "^3.2.6",
-    "typescript": "^5.2.2",
-    "vite": "^5.1.4"
+    "typescript": "^5.4.4",
+    "vite": "^5.2.8"
   },
   "peerDependencies": {
     "@kickstartds/core": "^2.2.0 || ^4.0.0",
-    "@storybook/api": "^7.0.0",
-    "@storybook/components": "^7.0.0",
-    "@storybook/core-events": "^7.0.0",
-    "@storybook/manager-api": "^7.0.0",
-    "@storybook/preview-api": "^7.0.0",
-    "@storybook/theming": "^7.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.2.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.2.0"
   },

src/Panel.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { MemoryRouter } from "react-router-dom";
 import { AddonPanel } from "@storybook/components";
-import styled from "styled-components";
+import { styled } from "@storybook/theming";
 import { SchemaView } from "./components/SchemaView";
 
 interface PanelProps {

src/components/SchemaEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import type { IRange, editor } from "monaco-editor";
 import type { Args } from "@storybook/types";
 import Editor, { useMonaco, OnMount, OnValidate } from "@monaco-editor/react";

src/components/SchemaView.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useParameter } from "@storybook/manager-api";
-import styled from "styled-components";
+import { styled } from "@storybook/theming";
 import type { editor, IRange } from "monaco-editor";
 
 import { forSize } from "@kickstartds/json-schema-viewer";

vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+});