Add storybook + some common components

.eslintrc.json

@@ -4,7 +4,13 @@
         "es2021": true,
         "node": true
     },
-    "extends": ["plugin:react/recommended", "standard", "prettier"],
+    "extends": [
+        "plugin:react/recommended",
+        "standard",
+        "prettier",
+        "plugin:storybook/recommended",
+        "plugin:storybook/recommended"
+    ],
     "overrides": [],
     "parserOptions": {
         "ecmaVersion": "latest",
@@ -14,9 +20,17 @@
             "js": true
         }
     },
-    "plugins": ["react", "no-relative-import-paths"],
+    "plugins": [
+        "react",
+        "no-relative-import-paths"
+    ],
     "rules": {
         "react/prop-types": "off",
-        "no-relative-import-paths/no-relative-import-paths": ["error", { "allowSameFolder": true }]
+        "no-relative-import-paths/no-relative-import-paths": [
+            "error",
+            {
+                "allowSameFolder": true
+            }
+        ]
     }
 }

.gitignore

@@ -31,3 +31,5 @@ dist-ssr
 .eslintcache
 .env
 TheCyberHUB.iml
+
+*storybook.log

.storybook/main.js

@@ -0,0 +1,16 @@
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [
+        "@storybook/addon-onboarding",
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@chromatic-com/storybook",
+        "@storybook/addon-interactions",
+    ],
+    framework: {
+        name: "@storybook/react-vite",
+        options: {},
+    },
+};
+export default config;

.storybook/preview.js

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