style: fix linting

BREAKING CHANGE: Migrate your onSubmit handlers to return a `message` instead of `value`

.github/workflows/build.yml

@@ -10,7 +10,7 @@ jobs:
   build:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.3.0'
+      - uses: 'actions/checkout@v3.5.0'
 
       - name: 'Use Node.js'
         uses: 'actions/setup-node@v3.6.0'

.github/workflows/lint.yml

@@ -10,7 +10,7 @@ jobs:
   lint:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.3.0'
+      - uses: 'actions/checkout@v3.5.0'
 
       - name: 'Use Node.js'
         uses: 'actions/setup-node@v3.6.0'

.github/workflows/release.yml

@@ -8,7 +8,7 @@ jobs:
   build:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.3.0'
+      - uses: 'actions/checkout@v3.5.0'
 
       - name: 'Use Node.js'
         uses: 'actions/setup-node@v3.6.0'

.github/workflows/test.yml

@@ -10,7 +10,7 @@ jobs:
   test:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.3.0'
+      - uses: 'actions/checkout@v3.5.0'
 
       - name: 'Use Node.js'
         uses: 'actions/setup-node@v3.6.0'
@@ -27,10 +27,10 @@ jobs:
   test-e2e:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.5.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'

.gitignore

@@ -5,6 +5,7 @@ node_modules
 # production
 build
 dist
+.next
 
 # testing
 coverage

README.md

@@ -89,13 +89,13 @@ export const Example = () => {
     formData,
     formElement
   ) => {
-    console.log(formData) // { inputName: 'value of the input validated' }
+    console.log(formData) // { inputName: 'value of the input validated and type-safe' }
     formElement.reset()
 
     // The return can be either `null` or an object with a global message of type `'error' | 'success'`.
     return {
       type: 'success',
-      value: 'Success: Form submitted'
+      message: 'Success: Form submitted'
     }
   }
 

example/components/FormExample.tsx

@@ -23,12 +23,12 @@ export const FormExample: React.FC = () => {
     formData,
     formElement
   ) => {
-    await simulateServerRequest(2000)
+    await simulateServerRequest(2_000)
     console.log('onSubmit:', formData)
     formElement.reset()
     return {
       type: 'success',
-      value: 'common:success-message'
+      message: 'common:success-message'
     }
   }
 

example/cypress/e2e/Form.cy.ts

@@ -3,7 +3,7 @@ describe('Form', () => {
     cy.visit('/')
   })
 
-  it('suceeds, reset input values and display the global success message', () => {
+  it('succeeds, reset input values and display the global success message', () => {
     cy.get('[data-cy=input-name]').type('John')
     cy.get('[data-cy=input-email]').type('john@john.com')
     cy.get('#error-name').should('not.exist')

example/models/User.ts

@@ -1,4 +1,5 @@
-import { Static, Type } from '@sinclair/typebox'
+import type { Static } from '@sinclair/typebox'
+import { Type } from '@sinclair/typebox'
 
 export const userSchema = {
   name: Type.String({ minLength: 3, maxLength: 10 }),

example/next.config.js

@@ -1,4 +1,4 @@
-const nextTranslate = require('next-translate')
+const nextTranslate = require('next-translate-plugin')
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {

example/package.json

@@ -11,27 +11,28 @@
     "test:dev": "start-server-and-test \"dev\" \"http://127.0.0.1:3000\" \"cypress open\""
   },
   "dependencies": {
-    "@sinclair/typebox": "0.25.20",
+    "@sinclair/typebox": "0.26.8",
     "clsx": "1.2.1",
-    "next": "13.1.1",
+    "next": "13.2.4",
     "next-themes": "0.2.1",
-    "next-translate": "1.6.0",
+    "next-translate": "2.0.4",
     "react": "18.2.0",
     "react-component-form": "file:..",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@tsconfig/strictest": "1.0.2",
+    "@tsconfig/strictest": "2.0.0",
-    "@types/node": "18.11.18",
+    "@types/node": "18.15.11",
-    "@types/react": "18.0.26",
+    "@types/react": "18.0.32",
-    "@types/react-dom": "18.0.10",
+    "@types/react-dom": "18.0.11",
-    "autoprefixer": "10.4.13",
+    "autoprefixer": "10.4.14",
-    "cypress": "12.3.0",
+    "cypress": "12.9.0",
-    "eslint": "8.31.0",
+    "eslint": "8.37.0",
-    "eslint-config-next": "13.1.1",
+    "eslint-config-next": "13.2.4",
+    "next-translate-plugin": "2.0.4",
     "postcss": "8.4.21",
-    "start-server-and-test": "1.15.2",
+    "start-server-and-test": "2.0.0",
-    "tailwindcss": "3.2.4",
+    "tailwindcss": "3.3.1",
-    "typescript": "4.9.4"
+    "typescript": "5.0.3"
   }
 }

example/tsconfig.json

@@ -9,10 +9,11 @@
     "noEmit": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
-    "exactOptionalPropertyTypes": false
+    "exactOptionalPropertyTypes": false,
+    "verbatimModuleSyntax": false,
+    "isolatedModules": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

package.json

@@ -29,47 +29,47 @@
     "lint:commit": "commitlint",
     "lint:editorconfig": "editorconfig-checker",
     "lint:markdown": "markdownlint-cli2",
-    "lint:eslint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
+    "lint:eslint": "eslint \".\"",
     "lint:prettier": "prettier \".\" --check --ignore-path \".gitignore\"",
     "release": "semantic-release"
   },
   "peerDependencies": {
-    "react": ">=16"
+    "react": ">=18.2.0"
   },
   "dependencies": {
-    "@sinclair/typebox": "0.25.20",
+    "@sinclair/typebox": "0.26.8",
     "ajv": "8.12.0",
     "ajv-formats": "2.1.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.4.1",
+    "@commitlint/cli": "17.5.1",
-    "@commitlint/config-conventional": "17.4.0",
+    "@commitlint/config-conventional": "17.4.4",
-    "@testing-library/react": "13.4.0",
+    "@testing-library/react": "14.0.0",
-    "@tsconfig/strictest": "1.0.2",
+    "@tsconfig/strictest": "2.0.0",
-    "@types/jest": "29.2.5",
+    "@types/jest": "29.5.0",
-    "@types/react": "18.0.26",
+    "@types/react": "18.0.32",
-    "@types/react-dom": "18.0.10",
+    "@types/react-dom": "18.0.11",
-    "@typescript-eslint/eslint-plugin": "5.48.1",
+    "@typescript-eslint/eslint-plugin": "5.57.0",
-    "@typescript-eslint/parser": "5.48.1",
+    "@typescript-eslint/parser": "5.57.0",
-    "editorconfig-checker": "4.0.2",
+    "editorconfig-checker": "5.0.1",
-    "esbuild": "0.16.16",
+    "esbuild": "0.17.15",
     "esbuild-jest": "0.5.0",
-    "eslint": "8.31.0",
+    "eslint": "8.37.0",
-    "eslint-config-conventions": "6.0.0",
+    "eslint-config-conventions": "8.0.0",
-    "eslint-config-prettier": "8.6.0",
+    "eslint-config-prettier": "8.8.0",
-    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-import": "2.27.5",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-unicorn": "45.0.2",
+    "eslint-plugin-unicorn": "46.0.0",
-    "jest": "29.3.1",
+    "jest": "29.5.0",
-    "jest-environment-jsdom": "29.3.1",
+    "jest-environment-jsdom": "29.5.0",
     "markdownlint-cli2": "0.6.0",
-    "markdownlint-rule-relative-links": "1.1.1",
+    "markdownlint-rule-relative-links": "1.1.2",
-    "prettier": "2.8.2",
+    "prettier": "2.8.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "semantic-release": "20.0.2",
+    "semantic-release": "21.0.1",
-    "tsup": "6.5.0",
+    "tsup": "6.7.0",
-    "typescript": "4.9.4"
+    "typescript": "5.0.3"
   }
 }

src/hooks/useForm.ts

@@ -11,7 +11,7 @@ import { handleCheckboxBoolean } from '../utils/handleCheckboxBoolean'
 import { handleOptionalEmptyStringToNull } from '../utils/handleOptionalEmptyStringToNull'
 
 export interface Schema {
-  [property: string]: any
+  [property: string | symbol]: any
 }
 
 export type Error = ErrorObject
@@ -38,13 +38,13 @@ export type HandleUseForm<K extends Schema> = (
 
 export interface GlobalMessage {
   type: 'error' | 'success'
-  value?: string
+  message?: string
   properties?: undefined
 }
 
 export interface PropertiesMessage<K extends Schema> {
   type: 'error'
-  value?: string
+  message?: string
   properties: { [key in keyof Partial<K>]: string }
 }
 
@@ -129,8 +129,8 @@ export const useForm = <K extends Schema>(
             formElement
           )
           if (message != null) {
-            const { value, type, properties } = message
+            const { message: messageValue, type, properties } = message
-            setMessage(value)
+            setMessage(messageValue)
             setFetchState(type)
             if (type === 'error') {
               const propertiesErrors: ErrorsObject<typeof validationSchema> =

src/utils/handleCheckboxBoolean.ts

@@ -1,11 +1,11 @@
 import type { TObject } from '@sinclair/typebox'
 
-import type { ObjectAny } from './types'
+import type { Schema } from '../hooks/useForm'
 
 export const handleCheckboxBoolean = (
-  object: ObjectAny,
+  object: Schema,
-  validateSchemaObject: TObject<ObjectAny>
+  validateSchemaObject: TObject<Schema>
-): ObjectAny => {
+): Schema => {
   const booleanProperties: string[] = []
   for (const property in validateSchemaObject.properties) {
     const rule = validateSchemaObject.properties[property]

src/utils/handleOptionalEmptyStringToNull.ts

@@ -1,4 +1,6 @@
-export const handleOptionalEmptyStringToNull = <K>(
+import type { Schema } from '../hooks/useForm'
+
+export const handleOptionalEmptyStringToNull = <K extends Schema>(
   object: K,
   required: string[] = []
 ): K => {

src/utils/types.ts

@@ -1,3 +0,0 @@
-export interface ObjectAny {
-  [key: string]: any
-}