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>

.eslintignore

@@ -92,4 +92,5 @@ typings/
 *.svg
 
 config
-.eslintrc.js
+.eslintrc.js
+!.storybook

.eslintrc

@@ -14,10 +14,11 @@
         "eslint:recommended",
         "plugin:react/recommended",
         "plugin:react-hooks/recommended",
+        "plugin:storybook/recommended",
         "airbnb-base",
         "airbnb/rules/react",
         "airbnb-typescript",
-        "prettier"
+        "prettier",
     ],
     "plugins": [
         "import",

.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'),
+    },
+  },
+});

package.json

@@ -12,7 +12,9 @@
         "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
         "preview": "vite preview",
         "devtools": "react-devtools",
-        "preinstall": "npx only-allow pnpm"
+        "preinstall": "npx only-allow pnpm",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build"
     },
     "dependencies": {
         "@types/sql.js": "^1.4.9",
@@ -30,6 +32,13 @@
     },
     "devDependencies": {
         "@crxjs/vite-plugin": "2.0.0-beta.21",
+        "@storybook/addon-designs": "^7.0.9",
+        "@storybook/addon-essentials": "^7.6.11",
+        "@storybook/addon-links": "^7.6.11",
+        "@storybook/blocks": "^7.6.11",
+        "@storybook/react": "^7.6.11",
+        "@storybook/react-vite": "^7.6.11",
+        "@storybook/test": "^7.6.11",
         "@types/chrome": "^0.0.254",
         "@types/node": "^20.10.5",
         "@types/prompts": "^2.4.9",
@@ -46,21 +55,24 @@
         "es-module-lexer": "^1.4.1",
         "eslint": "^8.56.0",
         "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-airbnb-base": "^15.0.0",
         "eslint-config-airbnb-typescript": "^17.1.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-import-resolver-typescript": "^3.6.1",
         "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-jsdoc": "^46.9.1",
-        "eslint-plugin-prettier": "^5.1.1",
+        "eslint-plugin-jsdoc": "^46.10.1",
+        "eslint-plugin-prettier": "^5.1.2",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-prefer-function-component": "^3.3.0",
         "eslint-plugin-react-refresh": "^0.4.5",
+        "eslint-plugin-storybook": "^0.6.15",
         "path": "^0.12.7",
         "postcss": "^8.4.32",
         "prettier": "^3.1.1",
         "react-dev-utils": "^12.0.1",
         "react-devtools": "^4.27.1",
+        "storybook": "^7.6.11",
         "typescript": "^5.3.3",
         "vite": "^5.0.10",
         "vite-plugin-inspect": "^0.8.1"