@aglyn/shared-data-forms
v1.0.0-beta.184
Published
Ready-made field schemas and validator lists for [data-driven-forms](https://github.com/data-driven-forms/react-forms): email, password, name, phone, message and postal address fields. Install it if you render forms with `@data-driven-forms/react-form-ren
Readme
@aglyn/shared-data-forms
Ready-made field schemas and validator lists for data-driven-forms: email, password, name, phone, message and postal address fields. Install it if you render forms with @data-driven-forms/react-form-renderer and want these common fields predefined. Inside Aglyn the console builds its sign-in and account forms from it.
Beta. Published from the Aglyn monorepo under the
betadist-tag; APIs can change between beta releases.
Install
npm install @aglyn/shared-data-forms@betaNo peer dependencies. @data-driven-forms/react-form-renderer is a regular dependency; the schemas use its componentTypes and validatorTypes.
What's in it
All exports are plain objects and arrays. There is no React code here.
- Validator lists:
VALIDATOR_LIST_EMAIL,VALIDATOR_LIST_PASSWORD. - Account fields:
FIELD_SCHEMA_EMAIL,FIELD_SCHEMA_PASSWORD,FIELD_SCHEMA_PASSWORD_OLD,FIELD_SCHEMA_PASSWORD_CONFIRM,FIELD_SCHEMA_FIRST_NAME,FIELD_SCHEMA_LAST_NAME,FIELD_SCHEMA_ORGANIZATION_NAME,FIELD_SCHEMA_PHONE_NUMBER. - Text fields:
FIELD_SCHEMA_MESSAGE_SHORT,FIELD_SCHEMA_MESSAGE_LONG,FIELD_SCHEMA_DESCRIPTION_SHORT,FIELD_SCHEMA_DESCRIPTION_LONG. - Address fields:
FIELD_SCHEMA_ADDRESS_LINE1,FIELD_SCHEMA_ADDRESS_LINE2,FIELD_SCHEMA_ADDRESS_CITY,FIELD_SCHEMA_ADDRESS_STATE,FIELD_SCHEMA_ADDRESS_POSTAL_CODE,FIELD_SCHEMA_ADDRESS_COUNTRY.
Entry points: . and @aglyn/shared-data-forms/fields.
Usage
Each constant is a data-driven-forms field. Put them in a schema's fields array, spreading to override a property:
import {
FIELD_SCHEMA_EMAIL,
FIELD_SCHEMA_PASSWORD,
} from '@aglyn/shared-data-forms'
export const signInSchema = {
fields: [
FIELD_SCHEMA_EMAIL,
{ ...FIELD_SCHEMA_PASSWORD, label: 'Your password' },
],
}Pass the schema to a FormRenderer together with a component mapper. @aglyn/shared-ui-jsx-forms provides a Material UI mapper.
How it fits
A shared data package. It depends on @aglyn/shared-data-regex for the patterns its validators use. Shared packages are generic: they import only other shared packages and hold no plugin's domain.
License
Apache-2.0. Source: https://github.com/aglyn/aglyn/tree/main/libs/shared/data/forms