perf: enable tree-shaking

Ref: https://github.blog/2023-04-19-introducing-npm-package-provenance/

.eslintignore

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

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,6 @@
 <!-- Please first discuss the change you wish to make via issue before making a change. It might avoid a waste of your time. -->
 
-## What changes this PR introduce?
+# What changes this PR introduce?
 
 ## List any relevant issue numbers
 

.github/workflows/build.yml

@@ -2,7 +2,7 @@ name: 'Build'
 
 on:
   push:
-    branches: [master, develop]
+    branches: [develop]
   pull_request:
     branches: [master, develop]
 
@@ -10,19 +10,19 @@ jobs:
   build:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.5.2'
 
-      - name: 'Use Node.js'
+      - name: 'Setup Node.js'
-        uses: 'actions/setup-node@v3.1.0'
+        uses: 'actions/setup-node@v3.6.0'
         with:
           node-version: 'lts/*'
           cache: 'npm'
 
-      - name: 'Install'
+      - name: 'Install dependencies'
-        run: 'npm install'
+        run: 'npm clean-install'
 
       - name: 'Build Package'
         run: 'npm run build'
 
       - name: 'Build Example'
-        run: 'cd example && npm install && npm run build'
+        run: 'cd example && npm clean-install && npm run build'

.github/workflows/lint.yml

@@ -2,7 +2,7 @@ name: 'Lint'
 
 on:
   push:
-    branches: [master, develop]
+    branches: [develop]
   pull_request:
     branches: [master, develop]
 
@@ -10,19 +10,19 @@ jobs:
   lint:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.5.2'
 
-      - name: 'Use Node.js'
+      - name: 'Setup Node.js'
-        uses: 'actions/setup-node@v3.1.0'
+        uses: 'actions/setup-node@v3.6.0'
         with:
           node-version: 'lts/*'
           cache: 'npm'
 
-      - name: 'Install'
+      - name: 'Install dependencies'
-        run: 'npm install'
+        run: 'npm clean-install'
 
       - 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

@@ -7,21 +7,29 @@ on:
 jobs:
   build:
     runs-on: 'ubuntu-latest'
+    permissions:
+      contents: 'write'
+      issues: 'write'
+      pull-requests: 'write'
+      id-token: 'write'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.5.2'
 
-      - name: 'Use Node.js'
+      - name: 'Setup Node.js'
-        uses: 'actions/setup-node@v3.1.0'
+        uses: 'actions/setup-node@v3.6.0'
         with:
           node-version: 'lts/*'
           cache: 'npm'
 
-      - name: 'Install'
+      - name: 'Install dependencies'
-        run: 'npm install'
+        run: 'npm clean-install'
 
       - name: 'Build Package'
         run: 'npm run build'
 
+      - name: 'Verify the integrity of provenance attestations and registry signatures for installed dependencies'
+        run: 'npm audit signatures'
+
       - name: 'Release'
         run: 'npm run release'
         env:

.github/workflows/test.yml

@@ -2,7 +2,7 @@ name: 'Test'
 
 on:
   push:
-    branches: [master, develop]
+    branches: [develop]
   pull_request:
     branches: [master, develop]
 
@@ -10,16 +10,16 @@ jobs:
   test:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.5.2'
 
-      - name: 'Use Node.js'
+      - name: 'Setup Node.js'
-        uses: 'actions/setup-node@v3.1.0'
+        uses: 'actions/setup-node@v3.6.0'
         with:
           node-version: 'lts/*'
           cache: 'npm'
 
-      - name: 'Install'
+      - name: 'Install dependencies'
-        run: 'npm install'
+        run: 'npm clean-install'
 
       - name: 'Test'
         run: 'npm run test'
@@ -27,22 +27,22 @@ jobs:
   test-e2e:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.5.2'
 
-      - name: 'Use Node.js'
+      - name: 'Setup Node.js'
-        uses: 'actions/setup-node@v3.1.0'
+        uses: 'actions/setup-node@v3.6.0'
         with:
           node-version: 'lts/*'
           cache: 'npm'
 
-      - name: 'Install'
+      - name: 'Install dependencies'
-        run: 'npm install'
+        run: 'npm clean-install'
 
       - name: 'Build Package'
         run: 'npm run build'
 
       - name: 'Build Example'
-        run: 'cd example && npm install && npm run build'
+        run: 'cd example && npm clean-install && npm run build'
 
       - name: 'End To End (e2e) Test Example'
         run: 'cd example && npm run test:e2e'

.gitignore

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

.markdownlint-cli2.jsonc

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

.npmrc

@@ -1 +1,2 @@
 save-exact=true
+provenance=true

CODE_OF_CONDUCT.md

@@ -60,7 +60,7 @@ representative at an online or offline event.
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported to the community leaders responsible for enforcement at
-contact@divlo.fr.
+<contact@divlo.fr>.
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the

CONTRIBUTING.md

@@ -6,6 +6,10 @@ Thanks a lot for your interest in contributing to **react-component-form**! 🎉
 
 **react-component-form** has adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as its Code of Conduct, and we expect project participants to adhere to it. Please read [the full text](./CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.
 
+## Open Development
+
+All work on **react-component-form** happens directly on this repository. Both core team members and external contributors send pull requests which go through the same review process.
+
 ## Types of contributions
 
 - Reporting a bug.
@@ -25,28 +29,4 @@ If you're adding new features to **react-component-form**, please include tests.
 
 ## Commits
 
-The commit message guidelines respect
+The commit message guidelines adheres to [Conventional Commits](https://www.conventionalcommits.org/) and [Semantic Versioning](https://semver.org/) for releases.
-[@commitlint/config-conventional](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional)
-and [Semantic Versioning](https://semver.org/) for releases.
-
-### Types
-
-Types define which kind of changes you made to the project.
-
-| Types    | Description                                                                                                  |
-| -------- | ------------------------------------------------------------------------------------------------------------ |
-| feat     | A new feature.                                                                                               |
-| fix      | A bug fix.                                                                                                   |
-| docs     | Documentation only changes.                                                                                  |
-| style    | Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc).      |
-| refactor | A code change that neither fixes a bug nor adds a feature.                                                   |
-| perf     | A code change that improves performance.                                                                     |
-| test     | Adding missing tests or correcting existing tests.                                                           |
-| build    | Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm).         |
-| ci       | Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs). |
-| chore    | Other changes that don't modify src or test files.                                                           |
-| revert   | Reverts a previous commit.                                                                                   |
-
-### Scopes
-
-Scopes define what part of the code changed.

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'
@@ -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

@@ -1,4 +1,7 @@
-import { Form, HandleUseFormCallback, useForm } from 'react-component-form'
+'use client'
+
+import { Form, useForm } from 'react-component-form'
+import type { HandleUseFormCallback } from 'react-component-form'
 import useTranslation from 'next-translate/useTranslation'
 
 import { Input } from './design/Input'
@@ -7,7 +10,7 @@ import { useFormTranslation } from '../hooks/useFormTranslation'
 import { userSchema } from '../models/User'
 import { FormState } from './design/FormState'
 
-const simulateServerRequest = async (ms: number): Promise<void> => {
+const fakeServerRequest = async (ms: number): Promise<void> => {
   return await new Promise((resolve) => {
     setTimeout(resolve, ms)
   })
@@ -22,12 +25,12 @@ export const FormExample: React.FC = () => {
     formData,
     formElement
   ) => {
-    await simulateServerRequest(2000)
+    await fakeServerRequest(2_000)
     console.log('onSubmit:', formData)
     formElement.reset()
     return {
       type: 'success',
-      value: 'common:success-message'
+      message: 'common:success-message'
     }
   }
 

example/components/Header/Language/index.tsx

@@ -13,7 +13,9 @@ export const Language: React.FC = () => {
   const languageClickRef = useRef<HTMLDivElement | null>(null)
 
   const handleHiddenMenu = useCallback(() => {
-    setHiddenMenu((oldHiddenMenu) => !oldHiddenMenu)
+    setHiddenMenu((oldHiddenMenu) => {
+      return !oldHiddenMenu
+    })
   }, [])
 
   useEffect(() => {
@@ -64,7 +66,9 @@ export const Language: React.FC = () => {
             <li
               key={index}
               className='flex h-12 w-full items-center justify-center pl-2 hover:bg-[#4f545c] hover:bg-opacity-20'
-              onClick={async () => await handleLanguage(language)}
+              onClick={async () => {
+                await handleLanguage(language)
+              }}
             >
               <LanguageFlag language={language} />
             </li>

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
-      <div
+      className='flex items-center'
-        className='flex items-center'
+      data-cy='switch-theme-click'
-        data-cy='switch-theme-click'
+      onClick={handleClick}
-        onClick={handleClick}
+    >
-      >
+      <div className='relative inline-block cursor-pointer touch-pan-x select-none border-0 bg-transparent p-0'>
-        <div className='toggle-theme-button relative inline-block cursor-pointer bg-transparent'>
+        <div className='h-[24px] w-[50px] rounded-[30px] bg-[#4d4d4d] p-0 text-white transition-all duration-200 ease-in-out'>
-          <div className='toggle-track'>
+          <div
-            <div
+            data-cy='switch-theme-dark'
-              data-cy='switch-theme-dark'
+            className={classNames(
-              className='toggle-track-check absolute'
+              'absolute top-0 bottom-0 left-[8px] mt-auto mb-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out',
-            >
+              {
-              <span className='toggle_Dark relative flex items-center justify-center'>
+                'opacity-100': theme === 'dark',
-                🌜
+                'opacity-0': theme === 'light'
-              </span>
+              }
-            </div>
+            )}
-            <div
+          >
-              data-cy='switch-theme-light'
+            <span className='relative flex h-[10px] w-[10px] items-center justify-center'>
-              className='toggle-track-x absolute'
+              🌜
-            >
+            </span>
-              <span className='toggle_Light relative flex items-center justify-center'>
+          </div>
-                🌞
+          <div
-              </span>
+            data-cy='switch-theme-light'
-            </div>
+            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='relative flex h-[10px] w-[10px] items-center justify-center'>
+              🌞
+            </span>
           </div>
-          <div className='toggle-thumb absolute' />
-          <input
-            data-cy='switch-theme-input'
-            type='checkbox'
-            aria-label='Dark mode toggle'
-            className='toggle-screenreader-only absolute overflow-hidden'
-            defaultChecked
-          />
         </div>
+        <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='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/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/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/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

@@ -7,30 +7,32 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "test:e2e": "start-server-and-test \"start\" \"http://localhost:3000\" \"cypress run\"",
+    "test:e2e": "start-server-and-test \"start\" \"http://127.0.0.1:3000\" \"cypress run\"",
-    "test:dev": "start-server-and-test \"dev\" \"http://localhost:3000\" \"cypress open\""
+    "test:dev": "start-server-and-test \"dev\" \"http://127.0.0.1:3000\" \"cypress open\""
   },
   "dependencies": {
-    "@sinclair/typebox": "0.24.28",
+    "@sinclair/typebox": "0.28.10",
     "clsx": "1.2.1",
-    "next": "12.2.5",
+    "next": "13.2.4",
-    "next-themes": "0.2.0",
+    "next-themes": "0.2.1",
-    "next-translate": "1.5.0",
+    "next-translate": "2.0.5",
     "react": "18.2.0",
     "react-component-form": "file:..",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/node": "18.7.13",
+    "@tsconfig/strictest": "2.0.1",
-    "@types/react": "18.0.17",
+    "@types/node": "20.1.4",
-    "@types/react-dom": "18.0.6",
+    "@types/react": "18.2.6",
-    "autoprefixer": "10.4.8",
+    "@types/react-dom": "18.2.4",
-    "cypress": "10.6.0",
+    "autoprefixer": "10.4.14",
-    "eslint": "8.22.0",
+    "cypress": "12.12.0",
-    "eslint-config-next": "12.2.5",
+    "eslint": "8.40.0",
-    "postcss": "8.4.16",
+    "eslint-config-next": "13.2.4",
-    "start-server-and-test": "1.14.0",
+    "next-translate-plugin": "2.0.5",
-    "tailwindcss": "3.1.8",
+    "postcss": "8.4.23",
-    "typescript": "4.8.2"
+    "start-server-and-test": "2.0.0",
+    "tailwindcss": "3.3.2",
+    "typescript": "5.0.4"
   }
 }

example/pages/_app.tsx

@@ -1,9 +1,9 @@
-import type { AppProps } from 'next/app'
+import type { AppType } from 'next/app'
 import { ThemeProvider } from 'next-themes'
 
 import '../styles/globals.css'
 
-const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => {
+const MyApp: AppType = ({ Component, pageProps }) => {
   return (
     <ThemeProvider attribute='class' defaultTheme='dark'>
       <Component {...pageProps} />

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,19 @@
 {
+  "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,
+    "verbatimModuleSyntax": false,
+    "isolatedModules": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

package.json

@@ -18,56 +18,62 @@
     "url": "https://github.com/Divlo/react-component-form/issues"
   },
   "homepage": "https://react-component-form.vercel.app/",
-  "main": "dist/index.js",
+  "main": "build/index.js",
-  "types": "dist/index.d.ts",
+  "types": "build/index.d.ts",
   "files": [
-    "dist"
+    "build"
   ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
   "scripts": {
     "build": "tsup",
     "test": "jest",
     "lint:commit": "commitlint",
     "lint:editorconfig": "editorconfig-checker",
     "lint:markdown": "markdownlint-cli2",
-    "lint:typescript": "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.24.28",
+    "@sinclair/typebox": "0.28.10",
-    "ajv": "8.11.0",
+    "ajv": "8.12.0",
     "ajv-formats": "2.1.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.0.3",
+    "@commitlint/cli": "17.6.3",
-    "@commitlint/config-conventional": "17.0.3",
+    "@commitlint/config-conventional": "17.6.3",
-    "@testing-library/react": "13.3.0",
+    "@testing-library/react": "14.0.0",
-    "@types/jest": "28.1.8",
+    "@tsconfig/strictest": "2.0.1",
-    "@types/react": "18.0.17",
+    "@types/jest": "29.5.1",
-    "@types/react-dom": "18.0.6",
+    "@types/react": "18.2.6",
-    "@typescript-eslint/eslint-plugin": "5.35.1",
+    "@types/react-dom": "18.2.4",
-    "@typescript-eslint/parser": "5.35.1",
+    "@typescript-eslint/eslint-plugin": "5.59.5",
-    "editorconfig-checker": "4.0.2",
+    "@typescript-eslint/parser": "5.59.5",
-    "esbuild": "0.15.5",
+    "editorconfig-checker": "5.0.1",
+    "esbuild": "0.17.19",
     "esbuild-jest": "0.5.0",
-    "eslint": "8.22.0",
+    "eslint": "8.40.0",
-    "eslint-config-conventions": "3.0.0",
+    "eslint-config-conventions": "9.0.0",
-    "eslint-config-prettier": "8.5.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.0.1",
+    "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-unicorn": "43.0.2",
+    "eslint-plugin-unicorn": "47.0.0",
-    "jest": "29.0.0",
+    "jest": "29.5.0",
-    "jest-environment-jsdom": "29.0.0",
+    "jest-environment-jsdom": "29.5.0",
-    "markdownlint-cli2": "0.5.1",
+    "markdownlint-cli2": "0.7.1",
-    "prettier": "2.7.1",
+    "markdownlint-rule-relative-links": "1.2.0",
+    "prettier": "2.8.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "semantic-release": "19.0.5",
+    "semantic-release": "21.0.2",
-    "tsup": "6.2.2",
+    "tsup": "6.7.0",
-    "typescript": "4.7.4"
+    "typescript": "5.0.4"
   }
 }

src/__test__/index.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import { render, cleanup, fireEvent } from '@testing-library/react'
 
-import { Form, HandleForm } from '..'
+import type { HandleForm } from '..'
+import { Form } from '..'
 
 afterEach(cleanup)
 
@@ -28,14 +29,14 @@ describe('<Form />', () => {
     const text = 'some random text'
 
     fireEvent.change(inputForm, { target: { value: text } })
-    expect(formData.inputName).toEqual(text)
+    expect(formData['inputName']).toEqual(text)
     expect(formElement instanceof HTMLFormElement).toBeTruthy()
     formData = {}
     formElement = null
 
     fireEvent.click(buttonSubmit)
     expect(Object.keys(formData).length).toEqual(1)
-    expect(formData.inputName).toEqual(text)
+    expect(formData['inputName']).toEqual(text)
     expect(formElement instanceof HTMLFormElement).toBeTruthy()
   })
 })

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

@@ -1,14 +1,18 @@
 import { useMemo, useState } from 'react'
-import { SchemaOptions, Static, TObject, Type } from '@sinclair/typebox'
+import type { Static, TObject } from '@sinclair/typebox'
+import { Type } from '@sinclair/typebox'
 import type { ErrorObject } from 'ajv'
 
 import type { HandleForm } from '../components/Form'
-import { FetchState, useFetchState } from './useFetchState'
+import type { FetchState } from './useFetchState'
+import { useFetchState } from './useFetchState'
 import { ajv } from '../utils/ajv'
 import { handleCheckboxBoolean } from '../utils/handleCheckboxBoolean'
 import { handleOptionalEmptyStringToNull } from '../utils/handleOptionalEmptyStringToNull'
 
-export type Schema = SchemaOptions
+export interface Schema {
+  [property: string | symbol]: any
+}
 
 export type Error = ErrorObject
 
@@ -34,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 }
 }
 
@@ -61,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>>
 
   /**
@@ -125,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
-}

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
   }
 }

tsup.config.js

@@ -1,12 +1,13 @@
 import { defineConfig } from 'tsup'
 
 export default defineConfig({
-  entry: ['src/index.ts'],
+  entry: ['src/**/*.{ts,tsx}', '!src/**/*.test.{ts,tsx}'],
-  sourcemap: true,
+  sourcemap: false,
   clean: true,
   platform: 'browser',
   target: 'esnext',
   format: ['esm'],
-  minify: true,
+  minify: false,
+  outDir: 'build',
   dts: true
 })