📘Storybook configuration added

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ["plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "plugin:css-modules/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended"],
+  extends: ["plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "plugin:css-modules/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     sourceType: "module",

.gitignore

@@ -18,3 +18,4 @@ environment.list
 src/client/assets/img/missing-file.pxd
 *.pxd
 .parcel-cache
+src/stories

.parcelrc

@@ -1,9 +0,0 @@
-{
-  "extends": "@parcel/config-default",
-  "transformers": {
-    "*.{js,mjs,jsx,cjs,ts,tsx}": [
-      "@parcel/transformer-js",
-      "@parcel/transformer-react-refresh-wrap"
-    ]
-  }
-}

.storybook/main.js

@@ -0,0 +1,8 @@
+module.exports = {
+  "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
+  "framework": "@storybook/react",
+  core: {
+    builder: "webpack5"
+  }
+};

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

.yarnclean

@@ -1,45 +0,0 @@
-# test directories
-__tests__
-test
-tests
-powered-test
-
-# asset directories
-docs
-doc
-website
-images
-assets
-
-# examples
-example
-examples
-
-# code coverage directories
-coverage
-.nyc_output
-
-# build scripts
-Makefile
-Gulpfile.js
-Gruntfile.js
-
-# configs
-appveyor.yml
-circle.yml
-codeship-services.yml
-codeship-steps.yml
-wercker.yml
-.tern-project
-.gitattributes
-.editorconfig
-.*ignore
-.eslintrc
-.jshintrc
-.flowconfig
-.documentup.json
-.yarn-metadata.json
-.travis.yml
-
-# misc
-*.md

package.json

@@ -11,7 +11,9 @@
     "server": "tsc -p tsconfig.server.json && node server/",
     "dev": "concurrently \"nodemon\" \"npm run client\"",
     "server-dev": "nodemon",
-    "docs": "jsdoc -c jsdoc.json"
+    "docs": "jsdoc -c jsdoc.json",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "author": "Rishi Ghan",
   "license": "MIT",
@@ -105,6 +107,16 @@
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.13.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/builder-webpack4": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack4": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@storybook/testing-library": "^0.0.13",
     "@teamsupercell/typings-for-css-modules-loader": "^2.5.1",
     "@tsconfig/node14": "^1.0.0",
     "@types/express": "^4.17.8",
@@ -165,5 +177,8 @@
     "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^4.7.4",
     "webpack-merge": "^5.7.3"
+  },
+  "resolutions": {
+    "@storybook/react/webpack": "^5"
   }
 }