Added storybook

Author: GCoder-13

.eslintrc

@@ -67,6 +67,16 @@
       "allow": "as-needed",
       "extensions": [".tsx"]
     }],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": [
+          "**/*.stories.*",
+          "**/.storybook/**/*.*"
+        ],
+        "peerDependencies": true
+      }
+    ],
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
     "react/require-default-props": "off",

.github/workflows/deploy.yml

@@ -3,7 +3,7 @@ name: Deploy to GitHub Pages
 on:
   push:
     tags:
-      - v*
+      - '*'
     # Review gh actions docs if you want to further define triggers, paths, etc
     # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on
 

.gitignore

@@ -9,6 +9,9 @@ node_modules
 npm-debug.log
 npm-debug.log.*
 
+# storybook
+/storybook-static
+
 # *Storm
 .idea
 .idea/*

.storybook/main.ts

@@ -0,0 +1,26 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    '@storybook/addon-viewport'
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['../public'],
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react';
+import '../src/index.scss';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;