feat: add storybook to visualizate components

.eslintrc.json

@@ -1,5 +1,8 @@
 {
-  "extends": ["airbnb-base"],
+  "extends": [
+    "airbnb-base",
+    "plugin:storybook/recommended"
+  ],
   "env": {
     "browser": true
   },

.storybook/main.js

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

.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Noto+Sans:wght@500&display=swap"
+  rel="stylesheet"
+/>

.storybook/preview.js

@@ -0,0 +1,15 @@
+import '../src/styles/base.scss';
+
+/** @type { import('@storybook/html').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package.json

@@ -14,9 +14,18 @@
     "stylelint": "stylelint \"**/*.scss\"",
     "prettier": "prettier . --check --ignore-unknown",
     "prettier:fix": "prettier . --write --ignore-unknown",
-    "code-style": "concurrently \"pnpm lint\" \"pnpm stylelint\" \"pnpm prettier\""
+    "code-style": "concurrently \"pnpm lint\" \"pnpm stylelint\" \"pnpm prettier\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "8.0.0-alpha.16",
+    "@storybook/addon-interactions": "8.0.0-alpha.16",
+    "@storybook/addon-links": "8.0.0-alpha.16",
+    "@storybook/blocks": "8.0.0-alpha.16",
+    "@storybook/html": "8.0.0-alpha.16",
+    "@storybook/html-vite": "8.0.0-alpha.16",
+    "@storybook/test": "8.0.0-alpha.16",
     "commitizen": "^4.3.0",
     "cross-env": "^7.0.3",
     "cz-format-extension": "^1.5.1",
@@ -27,12 +36,14 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "husky": "^8.0.0",
     "jsdom": "^23.2.0",
     "lint-staged": "^15.2.0",
     "prettier": "^3.2.4",
     "reset-css": "^5.0.2",
     "sass": "^1.70.0",
+    "storybook": "8.0.0-alpha.16",
     "stylelint": "^16.2.0",
     "stylelint-color-format": "^1.1.0",
     "stylelint-config-sass-guidelines": "11.0.0",