storybook html plugin

packages/storybook/.storybook/main.ts

@@ -1,6 +1,7 @@
-import type { StorybookConfig } from "storybook-solidjs-vite";
-
 import { join, dirname } from "path";
+import { mergeConfig } from "vite";
+import { StorybookConfig } from "@storybook/html-vite";
+import solidPlugin from "vite-plugin-solid";
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -18,13 +19,27 @@ const config: StorybookConfig = {
 		getAbsolutePath("@storybook/addon-interactions"),
 		getAbsolutePath("storybook-dark-mode"),
 	],
+	core: {
+		builder: "@storybook/builder-vite",
+	},
 	framework: {
-		name: getAbsolutePath("storybook-solidjs-vite"),
+		name: "@storybook/html-vite",
 		options: {},
 	},
 	docs: {
 		autodocs: "tag",
 	},
+	async viteFinal(config) {
+		console.log(config);
+		// Merge custom configuration into the default config
+		return mergeConfig(config, {
+			plugins: [solidPlugin()],
+			// Add dependencies to pre-optimization
+			optimizeDeps: {
+				include: ["storybook-dark-mode"],
+			},
+		});
+	},
 };
 
 export default config;

packages/storybook/.storybook/preview.tsx

@@ -2,12 +2,12 @@ import { Preview } from "storybook-solidjs";
 import { themes, ThemeVars } from "@storybook/theming";
 import { DARK_MODE_EVENT_NAME, useDarkMode } from "storybook-dark-mode";
 import { addons } from "@storybook/addons";
-import { Component, createEffect, createSignal, FlowProps } from "solid-js";
+import { createEffect, createSignal, FlowProps } from "solid-js";
 import "./reset.css";
 import "./global.css";
 import "./global-ve.css";
 import { DocsContainer, DocsContainerProps } from "@storybook/blocks";
-import { themeVars } from "@codeui/kit";
+import { render } from "solid-js/web";
 
 function ThemeWrapper(props: FlowProps) {
 	const [darkMode, setDarkMode] = createSignal<boolean>(true);
@@ -23,9 +23,17 @@ function ThemeWrapper(props: FlowProps) {
 	return <div>{props.children}</div>;
 }
 
+let disposeStory: () => void;
+
 export const decorators = [
 	(Story: () => any) => {
-		return <ThemeWrapper>{Story()}</ThemeWrapper>;
+		disposeStory?.();
+
+		const solidRoot = document.createElement("div");
+
+		disposeStory = render(() => ThemeWrapper({ children: Story }), solidRoot);
+
+		return solidRoot;
 	},
 ];
 

packages/storybook/package.json

@@ -20,6 +20,8 @@
     "@storybook/api": "^7.5.3",
     "@storybook/blocks": "7.5.3",
     "@storybook/components": "^7.5.3",
+    "@storybook/html": "^7.5.3",
+    "@storybook/html-vite": "^7.5.3",
     "@storybook/manager-api": "^7.5.3",
     "@storybook/testing-library": "0.2.2",
     "@storybook/theming": "^7.5.3",
@@ -35,8 +37,8 @@
     "vite-tsconfig-paths": "^4.2.1"
   },
   "dependencies": {
-		"@kobalte/core": "^0.11.0",
-		"@kobalte/utils": "^0.9.0",
+    "@kobalte/core": "^0.11.0",
+    "@kobalte/utils": "^0.9.0",
     "@vanilla-extract/css": "^1.11.0",
     "solid-js": "^1.7.3"
   }