Merge pull request #47 from syakoo/develop

🔧 chore(.node-version): update to 20.9.0

.env.template

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_API_BASE_PATH="https://9ism4mkurb.execute-api.ap-northeast-1.amazonaws.com/prod"
+NEXT_PUBLIC_API_KEY="7yFfLKIXOn77xKeu6y3sH3ZYSEug8ZFz1iGJta9y"
+API_ADMIN_PASS=

.env.test

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_API_BASE_PATH="http://localhost:8000"
+NEXT_PUBLIC_API_KEY="dummy-api-key"
+API_ADMIN_PASS="dummy-admin-pass"

.eslintrc.cjs

@@ -17,7 +17,13 @@ module.exports = {
     "plugin:react/jsx-runtime",
     "plugin:storybook/recommended",
   ],
-  plugins: ["@typescript-eslint", "react", "import"],
+  plugins: [
+    "@typescript-eslint",
+    "react",
+    "import",
+    "unused-imports",
+    "no-relative-import-paths",
+  ],
   rules: {
     "react/prop-types": "off",
     "react/jsx-sort-props": ["error", { reservedFirst: true }],
@@ -47,21 +53,24 @@ module.exports = {
     "import/order": [
       "warn",
       {
-        groups: ["builtin", "external", "parent", "sibling", "index", "object"],
-        pathGroups: [
-          {
-            pattern: "{react,react-dom,vite}",
-            group: "builtin",
-            position: "before",
-          },
+        groups: [
+          "builtin",
+          "external",
+          "internal",
+          ["parent", "sibling", "index"],
+          "object",
         ],
-        pathGroupsExcludedImportTypes: ["react", "react-dom", "vite"],
         alphabetize: {
           order: "asc",
         },
-        "newlines-between": "never",
+        "newlines-between": "always",
       },
     ],
+    "unused-imports/no-unused-imports": "error",
+    "no-relative-import-paths/no-relative-import-paths": [
+      "error",
+      { allowSameFolder: true, rootDir: "src", prefix: "@" },
+    ],
   },
   settings: {
     react: {

.gitignore

@@ -13,6 +13,7 @@ pnpm-debug.log*
 
 # environment variables
 .env
+.env.local
 .env.production
 
 # macOS-specific files

.node-version

@@ -1 +1 @@
-18.16.0
+20.9.0

.storybook/main.ts

@@ -3,6 +3,7 @@ import { VanillaExtractPlugin } from "@vanilla-extract/webpack-plugin";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  staticDirs: ["../public"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",

.storybook/preview.ts

@@ -1,9 +1,15 @@
-import { theme } from "./manager";
-import { tokens } from "../src/design-system/tokens";
+import "ress";
 import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
 import { Preview } from "@storybook/react";
-import "ress";
-import "../src/globalStyle.css";
+import { initialize, mswLoader } from "msw-storybook-addon";
+
+import { defaultHandlers } from "@/api/_mocks/msw";
+import { tokens } from "@/design-system/tokens";
+import "@/globalStyle.css";
+
+import { theme } from "./manager";
+
+initialize({ onUnhandledRequest: "bypass" });
 
 const preview: Preview = {
   parameters: {
@@ -36,7 +42,11 @@ const preview: Preview = {
     nextjs: {
       appDirectory: true,
     },
+    msw: {
+      handlers: [...defaultHandlers],
+    },
   },
+  loaders: [mswLoader],
 };
 
 export default preview;

jest.config.cjs

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
+/** @type{import('next/jest').default} */
 const nextJest = require("next/jest");
 const { pathsToModuleNameMapper } = require("ts-jest");
+
 const { compilerOptions } = require("./tsconfig.json");
 
 const createJestConfig = nextJest({
@@ -10,7 +12,13 @@ const createJestConfig = nextJest({
 /** @type{import('jest').Config} */
 const customJestConfig = {
   testEnvironment: "jest-environment-jsdom",
-  setupFiles: ["<rootDir>/src/test/setup.ts"],
+  setupFiles: [
+    "<rootDir>/src/test/msw-jest.polyfill.cjs",
+    "<rootDir>/src/test/setup.ts",
+  ],
+  testEnvironmentOptions: {
+    customExportConditions: [""],
+  },
   moduleNameMapper: {
     ...pathsToModuleNameMapper(compilerOptions.paths),
   },

next.config.mjs

@@ -4,6 +4,9 @@ import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin";
 const nextConfig = {
   output: "export",
   images: { unoptimized: true },
+  eslint: {
+    dirs: ["src", ".storybook"],
+  },
 };
 
 export default createVanillaExtractPlugin()(nextConfig);

package.json

@@ -4,7 +4,9 @@
   "version": "6.0.0",
   "scripts": {
     "prepare": "simple-git-hooks",
-    "dev": "next dev",
+    "dev": "run-p dev:*",
+    "dev:local": "next dev",
+    "dev:mock-server": "pnpm dlx tsx ./scripts/mock-server.ts",
     "build": "next build",
     "start": "next start",
     "test": "jest --verbose",
@@ -37,10 +39,14 @@
     "@fontsource-variable/noto-sans-jp": "^5.0.16",
     "@fontsource/roboto": "^5.0.8",
     "@mdx-js/mdx": "^2.3.0",
+    "@mswjs/http-middleware": "^0.9.1",
     "@vanilla-extract/css": "^1.13.0",
     "@vanilla-extract/next-plugin": "^2.3.1",
     "@vanilla-extract/recipes": "^0.5.0",
+    "cors": "^2.8.5",
     "date-fns": "^2.30.0",
+    "dotenv": "^16.3.1",
+    "express": "^4.18.2",
     "glob": "^10.3.10",
     "gray-matter": "^4.0.3",
     "jsdom": "^22.1.0",
@@ -72,6 +78,8 @@
     "@storybook/theming": "^7.5.2",
     "@syakoo/emoji-prefix-commit": "github:syakoo/emoji-prefix-commit",
     "@testing-library/react": "^14.0.0",
+    "@types/cors": "^2.8.16",
+    "@types/express": "^4.17.21",
     "@types/jest": "^29.5.7",
     "@types/jsdom": "^21.1.4",
     "@types/probe-image-size": "^7.2.2",
@@ -85,19 +93,28 @@
     "eslint": "^8.53.0",
     "eslint-config-next": "^14.0.1",
     "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-no-relative-import-paths": "^1.5.3",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-unused-imports": "^3.0.0",
     "hygen": "^6.2.11",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^14.0.1",
+    "msw": "^2.0.3",
+    "msw-storybook-addon": "2.0.0--canary.122.b3ed3b1.0",
+    "npm-run-all": "^4.1.5",
     "prettier": "^3.0.3",
     "prop-types": "^15.8.1",
     "simple-git-hooks": "^2.9.0",
     "storybook": "^7.5.2",
     "ts-jest": "^29.1.1",
     "typescript": "^5.2.2",
+    "undici": "^5.27.2",
     "vite": "^4.5.0",
     "vite-tsconfig-paths": "^4.2.1"
+  },
+  "msw": {
+    "workerDirectory": "public"
   }
 }