refactor(react storybook): switch react storybook from webpack to vite

packages/react/.storybook/main.ts

@@ -1,52 +1,50 @@
-// import type { StorybookConfig } from '@storybook/react-vite' // Uncomment once https://github.com/storybookjs/storybook/issues/22435 is resolved
-import type { StorybookConfig } from '@storybook/react-webpack5' // Remove once https://github.com/storybookjs/storybook/issues/22435 is resolved
+import { mergeConfig, type InlineConfig } from 'vite'
+import type { StorybookConfig } from '@storybook/react-vite'
 
 const config: StorybookConfig = {
-	stories: ['../src/stories/**/*.mdx', '../src/stories/**/*.stories.tsx'],
+	stories: ['../src/stories/**/*.stories.tsx', '../src/stories/**/*.mdx'],
 	staticDirs: ['../../core/.storybook/assets'],
 
-	// Uncomment once https://github.com/storybookjs/storybook/issues/22435 is resolved
-	// viteFinal: (config) => {
-	// 	if (config.build) {
-	// 		config.build.chunkSizeWarningLimit = 1800
-	// 	}
-
-	// 	// Remove vite:dts - no need for declarations
-	// 	config.plugins = config.plugins!.filter((plugin) => plugin!.name !== 'vite:dts' /* || plugin!.name !== 'storybook:react-docgen-plugin'*/)
-
-	// 	return config
-	// },
-
-	// Remove once https://github.com/storybookjs/storybook/issues/22435 is resolved
-	webpackFinal: async (config) => {
-		config.module?.rules?.push({
-			test: /\.scss$/,
-			use: ['style-loader', 'css-loader']
-		})
-		config.performance = {
-			hints: 'warning',
-			maxAssetSize: 1024 * 1024 * 2.5, // 2.5 MB
-			maxEntrypointSize: 1024 * 1024 * 5 // 5 MB
-		}
-
-		return config
-	},
 	addons: [
+		"@storybook/addon-links",
 		{
 			name: '@storybook/addon-essentials',
 			options: {
 				actions: false
 			}
-		}
+		},
+		"@storybook/addon-onboarding",
+    "@storybook/addon-interactions"
 	],
+
 	framework: {
-		// name: '@storybook/react-vite', // Uncomment once https://github.com/storybookjs/storybook/issues/22435 is resolved
-		name: '@storybook/react-webpack5', // Remove once https://github.com/storybookjs/storybook/issues/22435 is resolved
+		name: '@storybook/react-vite',
 		options: {}
 	},
+
 	docs: {
 		autodocs: 'tag'
 	},
+
+	async viteFinal(config: InlineConfig) {
+		config.plugins = config.plugins!.filter((plugin) => plugin!.name !== 'vite:dts')
+		return mergeConfig(config, {
+			build: {
+				chunkSizeWarningLimit: 1800,
+				rollupOptions: {
+          external: [
+            /sb-preview\/runetime.js$/,
+          ]
+        }
+			},
+			optimizeDeps: {
+				include: [
+					'@carbon/charts'
+				]
+			}
+		})
+	},
+
 	features: {
 		storyStoreV7: false // required for storiesOf API
 	}

packages/react/tsconfig.json

@@ -3,10 +3,10 @@
 	"extends": "../../tsconfig.json",
 	"compilerOptions": {
 		// Package-specific
+		"allowSyntheticDefaultImports": true,
 		"allowImportingTsExtensions": true,
 		"jsx": "react-jsx",
-		"noEmit": true,
-		"noUnusedLocals": false // Only while Storybook's webpack 5 builder is used
+		"noEmit": true
 	},
 	"include": ["src"],
 	"exclude": ["src/all.test.tsx"],

packages/react/vite.config.ts

@@ -16,23 +16,13 @@ export default defineConfig({
 			external: ['react', 'react-dom'],
 			output: {
 				globals: {
-					react: 'React'
+					react: 'React',
+					'react-dom': 'ReactDOM'
 				},
 				exports: 'named'
 			}
 		}
 	},
-	optimizeDeps: {
-		disabled: true,
-		include: ['@carbon/charts', '@carbon/icons-react'],
-		exclude: [
-			// Will cause errors when running storybook if in the include list
-			'@carbon/telemetry'
-		]
-	},
-	resolve: {
-		alias: {
-		}
-	},
+
 	plugins: [react(), dts()]
 })