Compare commits
3 Commits
Author | SHA1 | Date | |
---|---|---|---|
040e3a0ae1 | |||
5bb73df804 | |||
69f12002c7 |
2
.github/workflows/build.yml
vendored
2
.github/workflows/build.yml
vendored
@ -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'
|
||||
|
2
.github/workflows/lint.yml
vendored
2
.github/workflows/lint.yml
vendored
@ -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'
|
||||
|
2
.github/workflows/release.yml
vendored
2
.github/workflows/release.yml
vendored
@ -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'
|
||||
|
6
.github/workflows/test.yml
vendored
6
.github/workflows/test.yml
vendored
@ -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'
|
||||
|
1
.gitignore
vendored
1
.gitignore
vendored
@ -5,6 +5,7 @@ node_modules
|
||||
# production
|
||||
build
|
||||
dist
|
||||
.next
|
||||
|
||||
# testing
|
||||
coverage
|
||||
|
@ -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'
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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'
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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')
|
||||
|
@ -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 }),
|
||||
|
@ -1,4 +1,4 @@
|
||||
const nextTranslate = require('next-translate')
|
||||
const nextTranslate = require('next-translate-plugin')
|
||||
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
|
1189
example/package-lock.json
generated
1189
example/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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",
|
||||
"@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",
|
||||
"@tsconfig/strictest": "2.0.0",
|
||||
"@types/node": "18.15.11",
|
||||
"@types/react": "18.0.32",
|
||||
"@types/react-dom": "18.0.11",
|
||||
"autoprefixer": "10.4.14",
|
||||
"cypress": "12.9.0",
|
||||
"eslint": "8.37.0",
|
||||
"eslint-config-next": "13.2.4",
|
||||
"next-translate-plugin": "2.0.4",
|
||||
"postcss": "8.4.21",
|
||||
"start-server-and-test": "1.15.2",
|
||||
"tailwindcss": "3.2.4",
|
||||
"typescript": "4.9.4"
|
||||
"start-server-and-test": "2.0.0",
|
||||
"tailwindcss": "3.3.1",
|
||||
"typescript": "5.0.3"
|
||||
}
|
||||
}
|
||||
|
@ -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"]
|
||||
|
5987
package-lock.json
generated
5987
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
52
package.json
52
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/config-conventional": "17.4.0",
|
||||
"@testing-library/react": "13.4.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.16.16",
|
||||
"@commitlint/cli": "17.5.1",
|
||||
"@commitlint/config-conventional": "17.4.4",
|
||||
"@testing-library/react": "14.0.0",
|
||||
"@tsconfig/strictest": "2.0.0",
|
||||
"@types/jest": "29.5.0",
|
||||
"@types/react": "18.0.32",
|
||||
"@types/react-dom": "18.0.11",
|
||||
"@typescript-eslint/eslint-plugin": "5.57.0",
|
||||
"@typescript-eslint/parser": "5.57.0",
|
||||
"editorconfig-checker": "5.0.1",
|
||||
"esbuild": "0.17.15",
|
||||
"esbuild-jest": "0.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": "8.37.0",
|
||||
"eslint-config-conventions": "8.0.0",
|
||||
"eslint-config-prettier": "8.8.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",
|
||||
"jest": "29.3.1",
|
||||
"jest-environment-jsdom": "29.3.1",
|
||||
"eslint-plugin-unicorn": "46.0.0",
|
||||
"jest": "29.5.0",
|
||||
"jest-environment-jsdom": "29.5.0",
|
||||
"markdownlint-cli2": "0.6.0",
|
||||
"markdownlint-rule-relative-links": "1.1.1",
|
||||
"prettier": "2.8.2",
|
||||
"markdownlint-rule-relative-links": "1.1.2",
|
||||
"prettier": "2.8.7",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"semantic-release": "20.0.2",
|
||||
"tsup": "6.5.0",
|
||||
"typescript": "4.9.4"
|
||||
"semantic-release": "21.0.1",
|
||||
"tsup": "6.7.0",
|
||||
"typescript": "5.0.3"
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
setMessage(value)
|
||||
const { message: messageValue, type, properties } = message
|
||||
setMessage(messageValue)
|
||||
setFetchState(type)
|
||||
if (type === 'error') {
|
||||
const propertiesErrors: ErrorsObject<typeof validationSchema> =
|
||||
|
@ -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,
|
||||
validateSchemaObject: TObject<ObjectAny>
|
||||
): ObjectAny => {
|
||||
object: Schema,
|
||||
validateSchemaObject: TObject<Schema>
|
||||
): Schema => {
|
||||
const booleanProperties: string[] = []
|
||||
for (const property in validateSchemaObject.properties) {
|
||||
const rule = validateSchemaObject.properties[property]
|
||||
|
@ -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 => {
|
||||
|
@ -1,3 +0,0 @@
|
||||
export interface ObjectAny {
|
||||
[key: string]: any
|
||||
}
|
Reference in New Issue
Block a user