Upgrade UI to use Typescript, Node v20 details below

This is a breakdown that I wrote down on another PR xola#379

Author: rushi

.storybook/main.js

@@ -1,19 +1,45 @@
 module.exports = {
-    stories: ["../src/**/*.stories.@(js|jsx|mdx)"],
+    // Story files: .jsx/.tsx for components with JSX, .js/.ts for pure JS/TS
+    stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+
+    // Framework: Vite-based React for Storybook 8
+    framework: {
+        name: "@storybook/react-vite",
+        options: {},
+    },
+
     core: {
         disableTelemetry: true,
-        builder: 'webpack5',
     },
+
     addons: [
-        "@storybook/addon-postcss",
         "@storybook/addon-links",
-        "storybook-css-modules-preset",
-        "storybook-addon-designs",
+        // "storybook-addon-designs", // Temporarily disabled - incompatible with Storybook 8
         {
             name: "@storybook/addon-essentials",
             options: {
                 backgrounds: false,
             },
         },
     ],
+
+    // TypeScript configuration for Storybook
+    typescript: {
+        check: false, // We'll use tsc separately for type checking
+        reactDocgen: false, // Disabled - causes issues with .jsx files
+    },
+
+    // Static files directory
+    staticDirs: ["../public"],
+
+    // Vite configuration
+    async viteFinal(config) {
+        // Vite automatically handles:
+        // - Modern JS syntax
+        // - JSX in .jsx and .tsx files
+        // - PostCSS via postcss.config.mjs
+        // - CSS Modules out of the box
+
+        return config;
+    },
 };

.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from "@storybook/addons";
+import { addons } from "@storybook/manager-api";
 import xola from "./xola";
 
 addons.setConfig({

.storybook/preview.js

@@ -0,0 +1,30 @@
+import React from "react";
+import type { Preview } from "@storybook/react";
+import { Provider } from "../src";
+import xola from "./xola";
+import "../index.css";
+
+const preview: Preview = {
+    parameters: {
+        actions: { argTypesRegex: "^on[A-Z].*" },
+        docs: {
+            theme: xola,
+        },
+        options: {
+            storySort: {
+                method: "alphabetical",
+                order: ["Introduction", "Components"],
+                includeName: true,
+            },
+        },
+    },
+    decorators: [
+        (Story) => (
+            <Provider>
+                <Story />
+            </Provider>
+        ),
+    ],
+};
+
+export default preview;