chore: fix vercel build error for example

.eslintignore

@@ -1,5 +1,4 @@
 node_modules
 build
 dist
-.parcel-cache
 example

.github/workflows/build.yml

@@ -10,10 +10,10 @@ jobs:
   build:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.3.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.1.0'
+        uses: 'actions/setup-node@v3.6.0'
         with:
           node-version: 'lts/*'
           cache: 'npm'

.github/workflows/lint.yml

@@ -10,10 +10,10 @@ jobs:
   lint:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.3.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.1.0'
+        uses: 'actions/setup-node@v3.6.0'
         with:
           node-version: 'lts/*'
           cache: 'npm'
@@ -24,5 +24,5 @@ jobs:
       - run: 'npm run lint:commit -- --to "${{ github.sha }}"'
       - run: 'npm run lint:editorconfig'
       - run: 'npm run lint:markdown'
-      - run: 'npm run lint:typescript'
+      - run: 'npm run lint:eslint'
       - run: 'npm run lint:prettier'

.github/workflows/release.yml

@@ -8,10 +8,10 @@ jobs:
   build:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.3.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.1.0'
+        uses: 'actions/setup-node@v3.6.0'
         with:
           node-version: 'lts/*'
           cache: 'npm'

.github/workflows/test.yml

@@ -10,10 +10,10 @@ jobs:
   test:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.3.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.1.0'
+        uses: 'actions/setup-node@v3.6.0'
         with:
           node-version: 'lts/*'
           cache: 'npm'

.markdownlint-cli2.jsonc

@@ -1,11 +1,5 @@
 {
-  "config": {
-    "default": true,
-    "MD013": false,
-    "MD024": false,
-    "MD033": false,
-    "MD041": false
-  },
   "globs": ["**/*.{md,mdx}"],
-  "ignores": ["**/node_modules"]
+  "ignores": ["**/node_modules"],
+  "customRules": ["markdownlint-rule-relative-links"]
 }

.markdownlint.json

@@ -0,0 +1,7 @@
+{
+  "default": true,
+  "relative-links": true,
+  "extends": "markdownlint/style/prettier",
+  "MD033": false,
+  "MD041": false
+}

README.md

@@ -34,7 +34,7 @@ npm install --save react-component-form
 
 ## ⚙️ Usage
 
-_Note : The examples use TypeScript, but obviously you can use JavaScript. Be aware that `HandleForm` is the type definition for the `onChange` and `onSubmit` props._
+_Note: The examples use TypeScript, but obviously you can use JavaScript. Be aware that `HandleForm` is the type definition for the `onChange` and `onSubmit` props._
 
 ```tsx
 import React from 'react'

example/components/Header/SwitchTheme.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import classNames from 'clsx'
 import { useTheme } from 'next-themes'
 
 export const SwitchTheme: React.FC = () => {
@@ -18,109 +19,60 @@ export const SwitchTheme: React.FC = () => {
   }
 
   return (
-    <>
     <div
       className='flex items-center'
       data-cy='switch-theme-click'
       onClick={handleClick}
     >
-        <div className='toggle-theme-button relative inline-block cursor-pointer bg-transparent'>
-          <div className='toggle-track'>
+      <div className='relative inline-block cursor-pointer touch-pan-x select-none border-0 bg-transparent p-0'>
+        <div className='h-[24px] w-[50px] rounded-[30px] bg-[#4d4d4d] p-0 text-white transition-all duration-200 ease-in-out'>
           <div
             data-cy='switch-theme-dark'
-              className='toggle-track-check absolute'
+            className={classNames(
+              'absolute top-0 bottom-0 left-[8px] mt-auto mb-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out',
+              {
+                'opacity-100': theme === 'dark',
+                'opacity-0': theme === 'light'
+              }
+            )}
           >
-              <span className='toggle_Dark relative flex items-center justify-center'>
+            <span className='relative flex h-[10px] w-[10px] items-center justify-center'>
               🌜
             </span>
           </div>
           <div
             data-cy='switch-theme-light'
-              className='toggle-track-x absolute'
+            className={classNames(
+              'absolute right-[10px] top-0 bottom-0 mt-auto mb-auto h-[10px] w-[10px] leading-[0]',
+              {
+                'opacity-100': theme === 'light',
+                'opacity-0': theme === 'dark'
+              }
+            )}
           >
-              <span className='toggle_Light relative flex items-center justify-center'>
+            <span className='relative flex h-[10px] w-[10px] items-center justify-center'>
               🌞
             </span>
           </div>
         </div>
-          <div className='toggle-thumb absolute' />
+        <div
+          className={classNames(
+            'absolute top-[1px] box-border h-[22px] w-[22px] rounded-[50%] bg-[#fafafa] text-white transition-all duration-[250ms] ease-in-out',
+            {
+              'left-[27px]': theme === 'dark',
+              'left-0': theme === 'light'
+            }
+          )}
+          style={{ border: '1px solid #4d4d4d' }}
+        />
         <input
           data-cy='switch-theme-input'
           type='checkbox'
           aria-label='Dark mode toggle'
-            className='toggle-screenreader-only absolute overflow-hidden'
+          className='absolute m-[-1px] h-[1px] w-[1px] overflow-hidden border-0 p-0'
           defaultChecked
         />
       </div>
     </div>
-
-      <style jsx>
-        {`
-          .toggle-theme-button {
-            touch-action: pan-x;
-            border: 0;
-            padding: 0;
-            user-select: none;
-          }
-          .toggle-track {
-            width: 50px;
-            height: 24px;
-            padding: 0;
-            border-radius: 30px;
-            background-color: #4d4d4d;
-            transition: all 0.2s ease;
-            color: #fff;
-          }
-          .toggle-track-check {
-            width: 14px;
-            height: 10px;
-            top: 0;
-            bottom: 0;
-            margin-top: auto;
-            margin-bottom: auto;
-            line-height: 0;
-            left: 8px;
-            opacity: ${theme === 'dark' ? 1 : 0};
-            transition: opacity 0.25s ease;
-          }
-          .toggle-track-x {
-            width: 10px;
-            height: 10px;
-            top: 0;
-            bottom: 0;
-            margin-top: auto;
-            margin-bottom: auto;
-            line-height: 0;
-            right: 10px;
-            opacity: ${theme === 'dark' ? 0 : 1};
-          }
-          .toggle_Dark,
-          .toggle_Light {
-            height: 10px;
-            width: 10px;
-          }
-          .toggle-thumb {
-            left: ${theme === 'dark' ? '27px' : '0px'};
-            width: 22px;
-            height: 22px;
-            border: 1px solid #4d4d4d;
-            border-radius: 50%;
-            background-color: #fafafa;
-            box-sizing: border-box;
-            transition: all 0.25s ease;
-            top: 1px;
-            color: #fff;
-          }
-          .toggle-screenreader-only {
-            border: 0;
-            clip: rect(0 0 0 0);
-            height: 1px;
-            margin: -1px;
-            padding: 0;
-            width: 1px;
-          }
-        `}
-      </style>
-    </>
   )
 }

example/components/design/Loader.tsx

@@ -1,81 +0,0 @@
-export interface LoaderProps {
-  width?: number
-  height?: number
-  className?: string
-}
-
-export const Loader: React.FC<LoaderProps> = (props) => {
-  const { width = 50, height = 50 } = props
-
-  return (
-    <div className={props.className}>
-      <div data-cy='progress-spinner' className='progress-spinner'>
-        <svg className='progress-spinner-svg' viewBox='25 25 50 50'>
-          <circle
-            className='progress-spinner-circle'
-            cx='50'
-            cy='50'
-            r='20'
-            fill='none'
-            strokeWidth='2'
-            strokeMiterlimit='10'
-          />
-        </svg>
-      </div>
-
-      <style jsx>
-        {`
-          .progress-spinner {
-            position: relative;
-            margin: 0 auto;
-            width: ${width}px;
-            height: ${height}px;
-          }
-          .progress-spinner::before {
-            content: '';
-            display: block;
-            padding-top: 100%;
-          }
-          .progress-spinner-svg {
-            animation: progress-spinner-rotate 2s linear infinite;
-            height: 100%;
-            transform-origin: center center;
-            width: 100%;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            margin: auto;
-          }
-          .progress-spinner-circle {
-            stroke-dasharray: 89, 200;
-            stroke-dashoffset: 0;
-            stroke: #27b05e;
-            animation: progress-spinner-dash 1.5s ease-in-out infinite;
-            stroke-linecap: round;
-          }
-          @keyframes progress-spinner-rotate {
-            100% {
-              transform: rotate(360deg);
-            }
-          }
-          @keyframes progress-spinner-dash {
-            0% {
-              stroke-dasharray: 1, 200;
-              stroke-dashoffset: 0;
-            }
-            50% {
-              stroke-dasharray: 89, 200;
-              stroke-dashoffset: -35px;
-            }
-            100% {
-              stroke-dasharray: 89, 200;
-              stroke-dashoffset: -124px;
-            }
-          }
-        `}
-      </style>
-    </div>
-  )
-}

example/components/design/Loader/Loader.module.css

@@ -0,0 +1,39 @@
+@keyframes progressSpinnerRotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes progressSpinnerDash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}
+
+.progressSpinnerSvg {
+  animation: progressSpinnerRotate 2s linear infinite;
+  height: 100%;
+  transform-origin: center center;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+.progressSpinnerCircle {
+  stroke-dasharray: 89, 200;
+  stroke-dashoffset: 0;
+  stroke: #27b05e;
+  animation: progressSpinnerDash 1.5s ease-in-out infinite;
+  stroke-linecap: round;
+}

example/components/design/Loader/Loader.tsx

@@ -0,0 +1,33 @@
+import styles from './Loader.module.css'
+
+export interface LoaderProps {
+  width?: number
+  height?: number
+  className?: string
+}
+
+export const Loader: React.FC<LoaderProps> = (props) => {
+  const { width = 50, height = 50 } = props
+
+  return (
+    <div className={props.className}>
+      <div
+        data-cy='progress-spinner'
+        className='relative my-0 mx-auto before:content-none before:block before:pt-[100%]'
+        style={{ width: `${width}px`, height: `${height}px` }}
+      >
+        <svg className={styles['progressSpinnerSvg']} viewBox='25 25 50 50'>
+          <circle
+            className={styles['progressSpinnerCircle']}
+            cx='50'
+            cy='50'
+            r='20'
+            fill='none'
+            strokeWidth='2'
+            strokeMiterlimit='10'
+          />
+        </svg>
+      </div>
+    </div>
+  )
+}

example/components/design/Loader/index.ts

@@ -0,0 +1 @@
+export * from './Loader'

example/cypress.config.ts

@@ -5,9 +5,8 @@ export default defineConfig({
   video: false,
   downloadsFolder: undefined,
   screenshotOnRunFailure: false,
-
   e2e: {
-    baseUrl: 'http://localhost:3000',
+    baseUrl: 'http://127.0.0.1:3000',
     supportFile: false
   }
 })

example/hooks/useFormTranslation.ts

@@ -13,7 +13,7 @@ const getErrorTranslationKey = (error: Error): string => {
       return 'common:required'
     }
     if (error.keyword === 'format') {
-      if (error.params.format === 'email') {
+      if (error.params['format'] === 'email') {
         return 'common:invalid-email'
       }
       return 'common:invalid'
@@ -32,7 +32,7 @@ export const useFormTranslation = () => {
     if (error != null) {
       return t(getErrorTranslationKey(error)).replace(
         '{expected}',
-        error?.params?.limit
+        error?.params?.['limit']
       )
     }
     return undefined

example/package.json

@@ -7,13 +7,13 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "test:e2e": "start-server-and-test \"start\" \"http://localhost:3000\" \"cypress run\"",
-    "test:dev": "start-server-and-test \"dev\" \"http://localhost:3000\" \"cypress open\""
+    "test:e2e": "start-server-and-test \"start\" \"http://127.0.0.1:3000\" \"cypress run\"",
+    "test:dev": "start-server-and-test \"dev\" \"http://127.0.0.1:3000\" \"cypress open\""
   },
   "dependencies": {
-    "@sinclair/typebox": "0.24.42",
+    "@sinclair/typebox": "0.25.20",
     "clsx": "1.2.1",
-    "next": "12.3.1",
+    "next": "13.1.1",
     "next-themes": "0.2.1",
     "next-translate": "1.6.0",
     "react": "18.2.0",
@@ -21,16 +21,17 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/node": "18.7.18",
-    "@types/react": "18.0.20",
-    "@types/react-dom": "18.0.6",
-    "autoprefixer": "10.4.12",
-    "cypress": "10.8.0",
-    "eslint": "8.23.1",
-    "eslint-config-next": "12.3.1",
-    "postcss": "8.4.16",
-    "start-server-and-test": "1.14.0",
-    "tailwindcss": "3.1.8",
-    "typescript": "4.8.3"
+    "@tsconfig/strictest": "1.0.2",
+    "@types/node": "18.11.18",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
+    "autoprefixer": "10.4.13",
+    "cypress": "12.3.0",
+    "eslint": "8.31.0",
+    "eslint-config-next": "13.1.1",
+    "postcss": "8.4.21",
+    "start-server-and-test": "1.15.2",
+    "tailwindcss": "3.2.4",
+    "typescript": "4.9.4"
   }
 }

example/tailwind.config.js

@@ -1,5 +1,5 @@
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+const tailwindConfig = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',
     './components/**/*.{js,ts,jsx,tsx}'
@@ -16,3 +16,5 @@ module.exports = {
   },
   plugins: []
 }
+
+module.exports = tailwindConfig

example/tsconfig.json

@@ -1,20 +1,18 @@
 {
+  "extends": "@tsconfig/strictest/tsconfig.json",
   "compilerOptions": {
     "target": "ESNext",
     "module": "ESNext",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": ["dom", "dom.iterable", "ESNext"],
     "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
     "types": ["cypress"],
-    "forceConsistentCasingInFileNames": true,
     "noEmit": true,
-    "esModuleInterop": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "exactOptionalPropertyTypes": false
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

package.json

@@ -29,7 +29,7 @@
     "lint:commit": "commitlint",
     "lint:editorconfig": "editorconfig-checker",
     "lint:markdown": "markdownlint-cli2",
-    "lint:typescript": "eslint \"**/*.{js,jsx,ts,tsx}\"",
+    "lint:eslint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
     "lint:prettier": "prettier \".\" --check --ignore-path \".gitignore\"",
     "release": "semantic-release"
   },
@@ -37,37 +37,39 @@
     "react": ">=16"
   },
   "dependencies": {
-    "@sinclair/typebox": "0.24.42",
-    "ajv": "8.11.0",
+    "@sinclair/typebox": "0.25.20",
+    "ajv": "8.12.0",
     "ajv-formats": "2.1.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.1.2",
-    "@commitlint/config-conventional": "17.1.0",
+    "@commitlint/cli": "17.4.1",
+    "@commitlint/config-conventional": "17.4.0",
     "@testing-library/react": "13.4.0",
-    "@types/jest": "29.0.3",
-    "@types/react": "18.0.20",
-    "@types/react-dom": "18.0.6",
-    "@typescript-eslint/eslint-plugin": "5.38.0",
-    "@typescript-eslint/parser": "5.38.0",
+    "@tsconfig/strictest": "1.0.2",
+    "@types/jest": "29.2.5",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
+    "@typescript-eslint/eslint-plugin": "5.48.1",
+    "@typescript-eslint/parser": "5.48.1",
     "editorconfig-checker": "4.0.2",
-    "esbuild": "0.15.8",
+    "esbuild": "0.16.16",
     "esbuild-jest": "0.5.0",
-    "eslint": "8.23.1",
-    "eslint-config-conventions": "4.0.1",
-    "eslint-config-prettier": "8.5.0",
+    "eslint": "8.31.0",
+    "eslint-config-conventions": "6.0.0",
+    "eslint-config-prettier": "8.6.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-promise": "6.0.1",
-    "eslint-plugin-unicorn": "43.0.2",
-    "jest": "29.0.3",
-    "jest-environment-jsdom": "29.0.3",
-    "markdownlint-cli2": "0.5.1",
-    "prettier": "2.7.1",
+    "eslint-plugin-promise": "6.1.1",
+    "eslint-plugin-unicorn": "45.0.2",
+    "jest": "29.3.1",
+    "jest-environment-jsdom": "29.3.1",
+    "markdownlint-cli2": "0.6.0",
+    "markdownlint-rule-relative-links": "1.1.1",
+    "prettier": "2.8.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "semantic-release": "19.0.5",
-    "tsup": "6.2.3",
-    "typescript": "4.8.3"
+    "semantic-release": "20.0.2",
+    "tsup": "6.5.0",
+    "typescript": "4.9.4"
   }
 }

src/hooks/useFetchState.ts

@@ -2,7 +2,7 @@ import { useState } from 'react'
 
 export const fetchState = ['idle', 'loading', 'error', 'success'] as const
 
-export type FetchState = typeof fetchState[number]
+export type FetchState = (typeof fetchState)[number]
 
 export const useFetchState = (
   initialFetchState: FetchState = 'idle'

src/hooks/useForm.ts

@@ -65,7 +65,7 @@ export interface UseFormResult<K extends Schema> {
   /**
    * Global message of the form (not specific to a property).
    */
-  readonly message?: string
+  readonly message: string | undefined
   setMessage: React.Dispatch<React.SetStateAction<string | undefined>>
 
   /**

tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "@tsconfig/strictest/tsconfig.json",
   "include": ["src", "types"],
   "compilerOptions": {
     "module": "ESNext",
@@ -7,16 +8,8 @@
     "declaration": true,
     "sourceMap": true,
     "rootDir": "./src",
-    "strict": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
     "moduleResolution": "node",
     "jsx": "react",
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
     "noEmit": true
   }
 }