feat: react hook form setting and feature add (#12)

minsgy · Jun 16, 2024 · 77edbc3 · 77edbc3
2 parents 0b2b91b + 4bec014
commit 77edbc3
Show file tree

Hide file tree

Showing 43 changed files with 1,889 additions and 702 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,11 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
+  rules: {
+    "@typescript-eslint/no-explicit-any": "off",
+  },
+}
diff --git a/.knip.json b/.knip.json
@@ -0,0 +1,4 @@
+{
+  "entry": ["src/**/*.{js,ts,tsx}"],
+  "project": ["src/**/*.{js,ts,tsx}"]
+}
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "semi": false,
+  "tabWidth": 2,
+  "printWidth": 80,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "bracketSameLine": true,
+  "jsxSingleQuote": false,
+  "endOfLine": "auto"
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  }
+}
diff --git a/example/README.md b/example/README.md
@@ -17,9 +17,9 @@ If you are developing a production application, we recommend updating the config
 export default {
   // other rules...
   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
+    ecmaVersion: "latest",
+    sourceType: "module",
+    project: ["./tsconfig.json", "./tsconfig.node.json"],
     tsconfigRootDir: __dirname,
   },
 }

diff --git a/example/public/mockServiceWorker.js b/example/public/mockServiceWorker.js
@@ -8,20 +8,20 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.2.13'
-const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
-const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+const PACKAGE_VERSION = "2.2.13"
+const INTEGRITY_CHECKSUM = "26357c79639bfa20d64c0efca2a87423"
+const IS_MOCKED_RESPONSE = Symbol("isMockedResponse")
 const activeClientIds = new Set()
 
-self.addEventListener('install', function () {
+self.addEventListener("install", function () {
   self.skipWaiting()
 })
 
-self.addEventListener('activate', function (event) {
+self.addEventListener("activate", function (event) {
   event.waitUntil(self.clients.claim())
 })
 
-self.addEventListener('message', async function (event) {
+self.addEventListener("message", async function (event) {
   const clientId = event.source.id
 
   if (!clientId || !self.clients) {
@@ -35,20 +35,20 @@ self.addEventListener('message', async function (event) {
   }
 
   const allClients = await self.clients.matchAll({
-    type: 'window',
+    type: "window",
   })
 
   switch (event.data) {
-    case 'KEEPALIVE_REQUEST': {
+    case "KEEPALIVE_REQUEST": {
       sendToClient(client, {
-        type: 'KEEPALIVE_RESPONSE',
+        type: "KEEPALIVE_RESPONSE",
       })
       break
     }
 
-    case 'INTEGRITY_CHECK_REQUEST': {
+    case "INTEGRITY_CHECK_REQUEST": {
       sendToClient(client, {
-        type: 'INTEGRITY_CHECK_RESPONSE',
+        type: "INTEGRITY_CHECK_RESPONSE",
         payload: {
           packageVersion: PACKAGE_VERSION,
           checksum: INTEGRITY_CHECKSUM,
@@ -57,22 +57,22 @@ self.addEventListener('message', async function (event) {
       break
     }
 
-    case 'MOCK_ACTIVATE': {
+    case "MOCK_ACTIVATE": {
       activeClientIds.add(clientId)
 
       sendToClient(client, {
-        type: 'MOCKING_ENABLED',
+        type: "MOCKING_ENABLED",
         payload: true,
       })
       break
     }
 
-    case 'MOCK_DEACTIVATE': {
+    case "MOCK_DEACTIVATE": {
       activeClientIds.delete(clientId)
       break
     }
 
-    case 'CLIENT_CLOSED': {
+    case "CLIENT_CLOSED": {
       activeClientIds.delete(clientId)
 
       const remainingClients = allClients.filter((client) => {
@@ -89,17 +89,17 @@ self.addEventListener('message', async function (event) {
   }
 })
 
-self.addEventListener('fetch', function (event) {
+self.addEventListener("fetch", function (event) {
   const { request } = event
 
   // Bypass navigation requests.
-  if (request.mode === 'navigate') {
+  if (request.mode === "navigate") {
     return
   }
 
   // Opening the DevTools triggers the "only-if-cached" request
   // that cannot be handled by the worker. Bypass such requests.
-  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+  if (request.cache === "only-if-cached" && request.mode !== "same-origin") {
     return
   }
 
@@ -129,7 +129,7 @@ async function handleRequest(event, requestId) {
       sendToClient(
         client,
         {
-          type: 'RESPONSE',
+          type: "RESPONSE",
           payload: {
             requestId,
             isMockedResponse: IS_MOCKED_RESPONSE in response,
@@ -140,7 +140,7 @@ async function handleRequest(event, requestId) {
             headers: Object.fromEntries(responseClone.headers.entries()),
           },
         },
-        [responseClone.body],
+        [responseClone.body]
       )
     })()
   }
@@ -155,18 +155,18 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
-  if (client?.frameType === 'top-level') {
+  if (client?.frameType === "top-level") {
     return client
   }
 
   const allClients = await self.clients.matchAll({
-    type: 'window',
+    type: "window",
   })
 
   return allClients
     .filter((client) => {
       // Get only those clients that are currently visible.
-      return client.visibilityState === 'visible'
+      return client.visibilityState === "visible"
     })
     .find((client) => {
       // Find the client ID that's recorded in the
@@ -188,7 +188,7 @@ async function getResponse(event, client, requestId) {
     // Remove internal MSW request header so the passthrough request
     // complies with any potential CORS preflight checks on the server.
     // Some servers forbid unknown request headers.
-    delete headers['x-msw-intention']
+    delete headers["x-msw-intention"]
 
     return fetch(requestClone, { headers })
   }
@@ -211,7 +211,7 @@ async function getResponse(event, client, requestId) {
   const clientMessage = await sendToClient(
     client,
     {
-      type: 'REQUEST',
+      type: "REQUEST",
       payload: {
         id: requestId,
         url: request.url,
@@ -229,15 +229,15 @@ async function getResponse(event, client, requestId) {
         keepalive: request.keepalive,
       },
     },
-    [requestBuffer],
+    [requestBuffer]
   )
 
   switch (clientMessage.type) {
-    case 'MOCK_RESPONSE': {
+    case "MOCK_RESPONSE": {
       return respondWithMock(clientMessage.data)
     }
 
-    case 'PASSTHROUGH': {
+    case "PASSTHROUGH": {
       return passthrough()
     }
   }
@@ -259,7 +259,7 @@ function sendToClient(client, message, transferrables = []) {
 
     client.postMessage(
       message,
-      [channel.port2].concat(transferrables.filter(Boolean)),
+      [channel.port2].concat(transferrables.filter(Boolean))
     )
   })
 }

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -9,7 +9,9 @@ function App() {
     queryKey: ["test"],
     queryFn: async () => {
       try {
-        const response = await fetch("https://jsonplaceholder.typicode.com/todos/1")
+        const response = await fetch(
+          "https://jsonplaceholder.typicode.com/todos/1"
+        )
         setError(null)
         return response.json()
       } catch (e) {
@@ -28,17 +30,15 @@ function App() {
       <div
         style={{
           textAlign: "left",
-        }}
-      >
+        }}>
         <JsonView style={darkStyles} data={data} />
         {error && (
           <p
             style={{
               color: "red",
               fontSize: "1.2rem",
               fontWeight: "bold",
-            }}
-          >
+            }}>
             {error}
           </p>
         )}

diff --git a/example/src/main.tsx b/example/src/main.tsx
@@ -30,8 +30,7 @@ prepareWorker().then((worker) =>
           onRouteUpdate={() => {
             console.log("[MSW Devtools] Route updated")
             queryClient.resetQueries()
-          }}
-        >
+          }}>
           <App />
         </MSWDevtools>
       </QueryClientProvider>

diff --git a/example/src/mocks/handlers.ts b/example/src/mocks/handlers.ts
@@ -14,8 +14,8 @@ export const handlers = [
         status: 200,
         description: "Success",
         response: {
-          firstName: "John",
-          lastName: "Maverick",
+          firstName: "리",
+          lastName: "앜코",
         },
       },
       {

diff --git a/example/vite.config.ts b/example/vite.config.ts
@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
 
 // https://vitejs.dev/config/
 export default defineConfig({

diff --git a/package.json b/package.json
@@ -34,15 +34,19 @@
   "scripts": {
     "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
     "build": "tsup src/index.ts --format cjs,esm --dts --minify",
-    "example": "pnpm build && cd example && pnpm i && pnpm dev"
+    "example": "pnpm build && cd example && pnpm i && pnpm dev",
+    "prettier": "prettier --ignore-path .gitignore --write \"**/*.+(js|jsx|ts|tsx|css|scss|md|json)\"",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
+    "knip": "knip"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.16.2",
     "@codemirror/commands": "^6.6.0",
-    "@codemirror/lang-json": "^6.0.1",
     "@codemirror/language": "^6.10.2",
     "@codemirror/lint": "^6.8.0",
     "@faker-js/faker": "^8.4.1",
+    "@hookform/resolvers": "^3.6.0",
     "@radix-ui/react-accordion": "1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-label": "^2.0.2",
@@ -57,9 +61,9 @@
     "@uiw/react-codemirror": "^4.22.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "codemirror-json-schema": "^0.7.8",
     "codemirror-json5": "^1.0.3",
     "constate": "^3.3.2",
+    "json5": "^2.2.3",
     "lucide-react": "0.378.0",
     "msw": "2.2.13",
     "postcss": "^8.4.38",
@@ -70,10 +74,16 @@
     "tailwind-merge": "2.3.0",
     "tailwindcss-animate": "1.0.7",
     "ts-pattern": "^5.1.2",
-    "typescript": "5.4.5"
+    "typescript": "5.4.5",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "knip": "^5.18.2",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
     "tsup": "^7.1.0"