feat(storybook): storybook init

.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../src/**/*.story.mdx', '../src/**/*.story.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+};

.storybook/preview.js

@@ -0,0 +1,5 @@
+import 'tailwindcss/tailwind.css';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+};

package.json

@@ -10,7 +10,9 @@
     "test": "yarn codegen && jest",
     "start": "next start",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx --quiet",
-    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"
+    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@apollo/client": "^3.1.3",
@@ -24,12 +26,17 @@
     "react-dom": "^16.13.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.12.10",
     "@graphql-codegen/cli": "^1.17.8",
     "@graphql-codegen/plugin-helpers": "^1.17.8",
     "@graphql-codegen/typescript": "^1.17.8",
     "@graphql-codegen/typescript-operations": "^1.17.8",
     "@graphql-codegen/typescript-react-apollo": "^2.0.6",
     "@graphql-codegen/typescript-resolvers": "^1.17.8",
+    "@storybook/addon-actions": "^6.1.15",
+    "@storybook/addon-essentials": "^6.1.15",
+    "@storybook/addon-links": "^6.1.15",
+    "@storybook/react": "^6.1.15",
     "@tailwindcss/postcss7-compat": "^2.0.2",
     "@types/jest": "^26.0.20",
     "@types/react": "^16.9.46",
@@ -39,6 +46,7 @@
     "@typescript-eslint/parser": "4.14.0",
     "autoprefixer": "^9",
     "babel-jest": "26.3.0",
+    "babel-loader": "^8.2.2",
     "eslint": "7.18.0",
     "eslint-config-prettier": "^7.1.0",
     "eslint-plugin-import": "^2.22.1",