wip
Check the live version
Test all tem components on Storybook
UI testing on chromatic
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
const formConfig: FormConfig = {
title: 'He',
fields: [
{
label: 'Name',
name: 'name',
value: ''
},
{
label: 'Description',
name: 'field1',
type: 'text'
value: 'test'
},
{
label: 'Age',
name: 'age',
type: 'number'
value: ''
}
]
}
<Form
{...formConfig}
onChange={handleOnChange}
onSubmit={handleSubmit}
/>`The form config has text (title, description, button) and a array of field configs
type FormConfig = {
fields: FieldConfig[]
title?: string
submitText?: string
description?: string
}The field config should use the default HTML <input /> and <textarea /> props
type FieldConfig = {
name: string
value: FieldData['value']
label?: string
type?: FieldTypes
placeholder?: string
validate?: ValidationSchema[]
disabled: boolean
readonly: boolean
// textarea
rows?: number
// select
options?: FieldOption[]
maxErrors?: number
}
type FieldOption = {
value: FieldData['value']
label: string
}by default, the type is text, but you can choose one of the following options
| 'color'
| 'datetime-local'
| 'datetime'
| 'date'
| 'email'
| 'hidden'
| 'month'
| 'number'
| 'password'
| 'search'
| 'tel'
| 'text'
| 'time'
| 'url'
| 'textarea'
| 'select'
| 'radioGroup'
The validation uses fastest-validator as root element schema.
to add validation to a field, add:
{
label: 'Age',
name: 'age',
type: 'number'
value: '',
validation: [
{ type: 'number', min: 18, max: 69 }
]
}The available built in methods:
// No validation
{ type: 'any' }
// URL
{ type: 'url' }
// email
{ type: 'email' }
// date, convert from string with convert
{ type: 'date', convert?: true },
// enum
{ type: 'enum', values: ['AA', 'BBB'] }
// equal, strict with type check
{ type: 'equal', value: 'CCC', strict?: true }
// number
{ type: 'number',
min?: 5
max?: 10
equal?: 'DD'
notEqual?: 'EE'
integer?: true
positive?: true
negative?: true
convert?: true
}
// Strings
{ type: 'string',
empty?: false,
min?: true,
max?: true,
length?: true,
pattern?: /^foo/,
contains?: 'bar',
enum?: ['foo', 'bar'],
alpha?: true,
numeric?: true,
alphanum?: true,
alphadash?: true,
hex?: true,
singleLine?: true,
base64?: true
}