[housekeeping] Upgrade Storybook to v9 to resolve Vite compatibility (#638)

Upgrades Storybook to version 9 to resolve version conflicts between our build setup (Vite v5) and Storybook (Vite v4). Storybook’s migration tool was used to update stories, imports, and configuration.

* Upgraded and migrated
* Added prettier as a dev dependency
* Remove deprecated package
* Fix: error  Do not import renderer package "@storybook/react" directly
* Ran prettier

Author: thelevicole

.storybook/main.ts

@@ -1,35 +1,22 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 const config: StorybookConfig = {
   core: {
-    disableTelemetry: true,
+    disableTelemetry: true
   },
   stories: [
     "../src/Introduction.mdx",
     "../src/components/icons/Icons.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)",
   ],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    {
-      name: "@storybook/addon-storysource",
-      options: {
-        loaderOptions: {
-          prettierConfig: { printWidth: 80, singleQuote: false },
-        },
-      },
-    },
-    //"@storybook/addon-interactions",
-    "storybook-addon-pseudo-states",
-    "@storybook/addon-a11y",
-  ],
+
+  addons: ["@storybook/addon-links", //"@storybook/addon-interactions",
+  "storybook-addon-pseudo-states", "@storybook/addon-a11y", "@storybook/addon-docs"],
+
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
-  docs: {
-    autodocs: "tag",
-  },
+
   staticDirs: ["../public"],
   typescript: {
     reactDocgen: "react-docgen-typescript",

.storybook/manager.ts

@@ -1,6 +1,6 @@
 // .storybook/manager.js
 
-import { addons } from "@storybook/manager-api";
+import { addons } from "storybook/manager-api";
 import theme from "./theme";
 
 addons.setConfig({

.storybook/preview.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import type { Preview } from "@storybook/react";
+import type { Preview } from "@storybook/react-vite";
 import "../src/styles/variables.css";
-import { Decorator } from "@storybook/react";
+import { Decorator } from "@storybook/react-vite";
 import styled from "styled-components";
-import { themes } from "@storybook/theming";
+import { themes } from "storybook/theming";
 import ClickUIProvider from "../src/components/ClickUIProvider/ClickUIProvider";
 
 const ThemeBlock = styled.div<{ $left?: boolean; $bfill?: boolean }>(
@@ -83,6 +83,7 @@ const preview: Preview = {
     },
     docs: {
       theme: themes.dark,
+      codePanel: true
     },
   },
 };

.storybook/theme.ts

@@ -1,6 +1,6 @@
 // .storybook/YourTheme.js
 
-import { create } from "@storybook/theming/create";
+import { create } from "storybook/theming/create";
 
 export default create({
   base: "dark",