Migrate to vite & new structure

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

packages/ui/.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+import { join, dirname } from "path"
+
+/**
+* This function is used to resolve the absolute path of a package.
+* It is needed in projects that use Yarn PnP or are set up within a monorepo.
+*/
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath("@storybook/experimental-addon-test")
+  ],
+  "framework": {
+    "name": getAbsolutePath('@storybook/react-vite'),
+    "options": {}
+  }
+};
+export default config;

packages/ui/.storybook/preview.css

@@ -0,0 +1,3 @@
+@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");
+@import 'tailwindcss';
+@import '../src/theme.css';

packages/ui/.storybook/preview.tsx

@@ -0,0 +1,27 @@
+import type { Preview } from "@storybook/react";
+
+import "../src/theme.css";
+import "./preview.css";
+import { BrowserRouter } from "react-router";
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+    decorators: [
+        (Story, { parameters }) => {
+            return (
+                <BrowserRouter>
+                    <Story />
+                </BrowserRouter>
+            );
+        },
+    ],
+};
+
+export default preview;