feat: Storybook for Vite (#52)

* feat: storybook

* feat: option to add figma links

* refactor: resolve pr comments

* chore: fix storybook build

---------

Co-authored-by: Sriram Hariharan <sghsri@gmail.com>

.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-designs'],
+    framework: {
+        name: '@storybook/react-vite',
+        options: {
+            builder: {
+                viteConfigPath: '.storybook/vite-storybook.config.ts',
+            },
+        },
+    },
+    docs: {
+        autodocs: 'tag',
+    },
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,24 @@
+import ExtensionRoot from 'src/views/components/common/ExtensionRoot/ExtensionRoot';
+import type { Preview } from '@storybook/react';
+import React from 'react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    Story => (
+      <ExtensionRoot>
+        <Story />
+      </ExtensionRoot>
+    ),
+  ],
+};
+
+export default preview;

.storybook/vite-storybook.config.ts

@@ -0,0 +1,26 @@
+import react from '@vitejs/plugin-react-swc';
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+
+const root = resolve(__dirname, '../src');
+const pagesDir = resolve(root, 'pages');
+const assetsDir = resolve(root, 'assets');
+const publicDir = resolve(__dirname, '../public');
+
+console.log(root);
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      src: root,
+      '@assets': assetsDir,
+      '@pages': pagesDir,
+      '@public': publicDir,
+      '@shared': resolve(root, 'shared'),
+      '@background': resolve(pagesDir, 'background'),
+      '@views': resolve(root, 'views'),
+    },
+  },
+});