Refactoring for separation of concerns

.env.template

@@ -0,0 +1 @@
+VITE_REACT_APP_API_HOST=https://reqres.in/api

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store
@@ -21,3 +22,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# env variables
+.env

.storybook/main.ts

@@ -0,0 +1,22 @@
+const path = require("path");
+
+module.exports = {
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  framework: "@storybook/react",
+  core: {
+    builder: "storybook-builder-vite",
+  },
+  async viteFinal(config) {
+    return {
+      ...config,
+      resolve: {
+        alias: [
+          {
+            find: "@",
+            replacement: path.resolve(__dirname, "../src"),
+          },
+        ],
+      },
+    };
+  },
+};

.storybook/preview.ts

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

__mocks__/api/login.ts

@@ -0,0 +1,13 @@
+import { rest } from "../rest";
+
+export const login = [
+  rest.post("/login", (_, res, ctx) =>
+    res(
+      // Delays response for 2000ms.
+      ctx.delay(1000),
+      ctx.json({
+        token: "QpwL5tke4Pnpja7X4",
+      })
+    )
+  ),
+];

__mocks__/api/user.ts

@@ -0,0 +1,61 @@
+import { rest } from "../rest";
+import { getItem, setItem, setInitalItem } from "../mockDatabase";
+
+const testUser = {
+  id: 1,
+  email: "george.bluth@reqres.in",
+  first_name: "George",
+  last_name: "Bluth",
+  avatar: "https://reqres.in/img/faces/1-image.jpg",
+  avatar_size_width: 128,
+  avatar_size_height: 128,
+};
+setInitalItem({ testUser });
+
+// Validate a token in the backend that is specific to a user
+const isValidatedAccessToken = (token?: string) => !!token;
+
+export const user = [
+  rest.get("/user/1", (req, res, ctx) => {
+    const token = req.headers.get("Authorization")?.split(" ").at(-1);
+
+    if (!isValidatedAccessToken(token)) {
+      return res(
+        ctx.status(401),
+        ctx.json({
+          error: "Invalid Access Token",
+        })
+      );
+    }
+
+    return res(ctx.json(getItem("testUser")));
+  }),
+  rest.post<{ email: string }>("/user/1", (req, res, ctx) => {
+    const token = req.headers.get("Authorization")?.split(" ").at(-1);
+
+    if (!isValidatedAccessToken(token)) {
+      return res(
+        ctx.status(401),
+        ctx.json({
+          error: "Invalid Access Token",
+        })
+      );
+    }
+
+    if (!req.body.email || typeof req.body.email !== "string") {
+      return res(
+        ctx.status(400),
+        ctx.json({
+          error: "Invalid Payload",
+        })
+      );
+    }
+
+    setItem("testUser", {
+      ...testUser,
+      email: req.body.email,
+    });
+
+    return res(ctx.json({ message: "Update success" }));
+  }),
+];

__mocks__/mockDatabase.ts

@@ -0,0 +1,11 @@
+export const setItem = (itemName: string, data: any) => {
+  localStorage.setItem(itemName, JSON.stringify(data));
+};
+
+export const getItem = (itemName: string) =>
+  JSON.parse(localStorage.getItem(itemName) || "");
+
+export const setInitalItem = (o: Record<string, any>) =>
+  Object.keys(o).map((k) => {
+    !localStorage.getItem(k) && localStorage.setItem(k, JSON.stringify(o[k]));
+  });

__mocks__/rest.ts

@@ -0,0 +1,9 @@
+import { rest as _rest } from "msw";
+
+const BASE_API_URL = "/api/v1";
+
+// Not support yet: allow to define general configuration https://github.com/mswjs/msw/issues/617
+export const rest = {
+  get: (url: string, fn) => _rest.get(`${BASE_API_URL}${url}`, fn),
+  post: (url: string, fn) => _rest.post(`${BASE_API_URL}${url}`, fn),
+} as typeof _rest;

__mocks__/server.ts

@@ -0,0 +1,7 @@
+import { setupWorker } from "msw";
+import { user } from "./api/user";
+import { login } from "./api/login";
+
+const requestHandler = [...login, ...user];
+
+export const mockServer = setupWorker(...requestHandler);

babel.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        targets: {
+          node: "current",
+        },
+      },
+    ],
+    [
+      "@babel/preset-react",
+      {
+        runtime: "automatic",
+      },
+    ],
+    "@babel/preset-typescript",
+  ],
+};

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

jest-setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package.json

@@ -1,43 +1,69 @@
 {
-  "name": "react-boilerplate",
+  "name": "reactjs-boilerplate",
   "version": "0.1.0",
   "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+  "repository": "git@github.com:monstar-lab-oss/reactjs-boilerplate.git",
+  "author": "山下 仁麻 <jinma.yamashita@monstar-lab.com>",
+  "engines": {
+    "node": ">=16.x"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "test": "jest",
+    "type": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@babel/core": "7.16.7",
+    "@babel/preset-env": "7.16.8",
+    "@babel/preset-react": "7.16.7",
+    "@babel/preset-typescript": "7.16.7",
+    "@storybook/addon-actions": "6.5.0-alpha.16",
+    "@storybook/addon-essentials": "6.5.0-alpha.16",
+    "@storybook/addon-links": "6.5.0-alpha.16",
+    "@storybook/react": "6.5.0-alpha.16",
+    "@storybook/testing-react": "1.2.3",
+    "@testing-library/jest-dom": "5.16.1",
+    "@testing-library/react": "12.1.2",
+    "@testing-library/user-event": "13.5.0",
+    "@types/node": "17.0.8",
+    "@types/react": "17.0.38",
+    "@types/react-dom": "17.0.11",
+    "@vitejs/plugin-react": "1.1.4",
+    "babel-loader": "8.2.3",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "27.4.7",
+    "msw": "0.36.4",
+    "sass": "1.48.0",
+    "storybook-builder-vite": "0.1.13",
+    "typescript": "4.5.4",
+    "vite": "2.7.12"
+  },
+  "dependencies": {
+    "classnames": "2.3.1",
+    "constate": "3.3.0",
+    "i18next": "21.6.6",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-hook-form": "7.23.0",
+    "react-i18next": "11.15.3",
+    "react-query": "3.34.8",
+    "wouter": "2.8.0-alpha.2",
+    "zustand": "3.7.1"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "msw": {
+    "workerDirectory": "public"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
+  "jest": {
+    "testEnvironment": "jsdom",
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest-setup.ts"
     ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "moduleNameMapper": {
+      "\\.(css|scss)$": "identity-obj-proxy"
+    }
   }
 }