implemented storybook

.eslintrc.json

@@ -1,7 +1,12 @@
 {
   "root": true,
   "parser": "@typescript-eslint/parser",
-  "plugins": ["react", "react-hooks", "@typescript-eslint", "eslint-plugin-import-helpers"],
+  "plugins": [
+    "react",
+    "react-hooks",
+    "@typescript-eslint",
+    "eslint-plugin-import-helpers"
+  ],
   "parserOptions": {
     "ecmaVersion": 11,
     "sourceType": "module",
@@ -20,7 +25,8 @@
     "plugin:react/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:storybook/recommended"
   ],
   "globals": {
     "importScripts": true
@@ -29,24 +35,64 @@
     "import-helpers/order-imports": [
       "warn",
       {
-        "groups": [["absolute", "module"], "/^types/", "/^api/", "/^hooks/", "/^pages/", "/^components/", "/^assets/", ["sibling", "parent", "index"]],
+        "groups": [
+          [
+            "absolute",
+            "module"
+          ],
+          "/^types/",
+          "/^api/",
+          "/^hooks/",
+          "/^pages/",
+          "/^components/",
+          "/^assets/",
+          [
+            "sibling",
+            "parent",
+            "index"
+          ]
+        ],
         "newlinesBetween": "always",
-        "alphabetize": { "order": "asc", "ignoreCase": true }
+        "alphabetize": {
+          "order": "asc",
+          "ignoreCase": true
+        }
+      }
+    ],
+    "sort-imports": [
+      "error",
+      {
+        "ignoreCase": true,
+        "ignoreDeclarationSort": true
       }
     ],
-    "sort-imports": ["error", { "ignoreCase": true, "ignoreDeclarationSort": true }],
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/no-unnecessary-type-constraint": "off",
     "arrow-spacing": "error",
-    "block-spacing": ["error", "never"],
-    "brace-style": ["error", "1tbs"],
+    "block-spacing": [
+      "error",
+      "never"
+    ],
+    "brace-style": [
+      "error",
+      "1tbs"
+    ],
     "comma-spacing": "error",
-    "comma-style": ["error", "last"],
+    "comma-style": [
+      "error",
+      "last"
+    ],
     "endOfLine": "off",
-    "curly": ["error", "all"],
+    "curly": [
+      "error",
+      "all"
+    ],
     "eol-last": "error",
-    "eqeqeq": ["error", "always"],
+    "eqeqeq": [
+      "error",
+      "always"
+    ],
     "func-call-spacing": "error",
     "guard-for-in": "off",
     "jsx-a11y/accessible-emoji": "off",
@@ -66,7 +112,9 @@
     "no-empty-function": [
       "error",
       {
-        "allow": ["arrowFunctions"]
+        "allow": [
+          "arrowFunctions"
+        ]
       }
     ],
     "no-implicit-coercion": "error",
@@ -108,7 +156,10 @@
   },
   "settings": {
     "import/parsers": {
-      "@typescript-eslint/parser": [".ts", ".tsx"]
+      "@typescript-eslint/parser": [
+        ".ts",
+        ".tsx"
+      ]
     },
     "import/resolver": {
       "typescript": {

.gitignore

@@ -35,3 +35,5 @@ package-lock.json
 
 .eslintcache
 debug.log
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,29 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+/**
+ * Storybook configuration
+ * This configuration ensures that:
+ * - All MDX documentation files are included
+ * - All stories for components in /src/components are included
+ * - All other stories throughout the src directory are included
+ */
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@chromatic-com/storybook",
+    "@storybook/experimental-addon-test",
+    "@storybook/addon-styling"
+  ],
+  "framework": {
+    "name": "@storybook/react-vite",
+    "options": {}
+  },
+  "staticDirs": ["../public"]
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react'
+import '../src/assets/css/index.css'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/react';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);

package.json

@@ -46,6 +46,7 @@
     "emoji-picker-react": "^4.12.0",
     "immutability-helper": "^3.1.1",
     "lucide-react": "^0.446.0",
+    "msw": "^2.7.3",
     "next-themes": "^0.3.0",
     "qr-scanner": "^1.4.2",
     "qrcode.react": "^3.2.0",
@@ -83,9 +84,19 @@
     "lint": "eslint --no-fix src --ext .ts,.tsx",
     "pre-commit": "eslint --cache --fix src --ext .ts,.tsx",
     "format": "eslint --fix src --ext .ts,.tsx",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.5",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-onboarding": "^8.6.4",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/experimental-addon-test": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/react-vite": "^8.6.4",
+    "@storybook/test": "^8.6.4",
     "@types/canvas-confetti": "^1.6.4",
     "@types/node": "^20.16.5",
     "@types/react": "^18.3.12",
@@ -95,22 +106,28 @@
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/browser": "^3.0.8",
+    "@vitest/coverage-v8": "^3.0.8",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import-helpers": "^1.3.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.35.2",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-storybook": "^0.11.4",
     "husky": "^9.1.6",
+    "playwright": "^1.51.0",
     "postcss": "^8.4.45",
     "prettier": "^2.8.8",
+    "storybook": "^8.6.4",
     "tailwindcss": "^3.4.10",
     "typescript": "^4.9.5",
     "vite": "^5.4.3",
     "vite-plugin-checker": "^0.8.0",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-svgr": "^4.2.0",
-    "vite-tsconfig-paths": "^4.3.2"
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^3.0.8"
   }
 }