feat: setup storybook (#1918)

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "plugin:storybook/recommended"]
 }

.storybook/main.js

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

.storybook/preview.js

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

package.json

@@ -19,7 +19,9 @@
     "cypress:run": "cypress run",
     "test:e2e": "concurrently -k --success first \"npm run cypress:run\" \"npm run start\"",
     "prepare": "husky install",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "browserslist": {
     "production": [
@@ -34,15 +36,27 @@
     ]
   },
   "devDependencies": {
+    "@babel/core": "^7.19.3",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-interactions": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
+    "@storybook/builder-webpack5": "^6.5.12",
+    "@storybook/manager-webpack5": "^6.5.12",
+    "@storybook/react": "^6.5.12",
+    "@storybook/testing-library": "^0.0.13",
     "autoprefixer": "^10.4.7",
+    "babel-loader": "^8.2.5",
     "concurrently": "^6.2.2",
     "cypress": "^8.5.0",
     "cypress-cucumber-preprocessor": "^4.3.0",
     "eslint": "8.19.0",
     "eslint-config-next": "12.2.0",
+    "eslint-plugin-storybook": "^0.6.4",
     "husky": "^7.0.2",
     "lint-staged": "^12.1.4",
     "postcss": "^8.4.14",
+    "storybook-addon-next": "^1.6.9",
     "tailwindcss": "^3.1.4"
   },
   "cypress-cucumber-preprocessor": {

stories/components/user/UserLink.stories.js

@@ -0,0 +1,17 @@
+import UserLink from "../../../components/user/UserLink";
+
+export default {
+  component: UserLink,
+};
+
+export const Basic = (args) => <UserLink {...args} />;
+
+Basic.args = {
+  link: {
+    url: "https://www.youtube.com",
+    clicks: 2,
+    name: "My youtube channel",
+  },
+  username: "test",
+  displayStatsPublic: true,
+};

stories/pages/[username].stories.js

@@ -0,0 +1,30 @@
+import User from "../../pages/[username]";
+
+export default {
+  component: User,
+};
+
+export const Basic = (args) => <User {...args} />;
+
+Basic.args = {
+  data: {
+    name: "John",
+    bio: "I'm  a developer",
+    avatar: require("./person-placeholder.png"),
+    views: 2,
+    displayStatsPublic: true,
+    username: "john",
+    links: [
+      {
+        url: "<https://www.youtube.com>",
+        clicks: 2,
+        name: "My Youtube",
+      },
+      {
+        url: "<https://www.instagram.com>",
+        clicks: 2,
+        name: "My Instagram",
+      },
+    ],
+  },
+};