arkemishub / form

Flexible and extensible form

@arkejs/form

Form component to automate form generation process

Usage

First of all, you need to install the library:

npm install @arkejs/form
pnpm install @arkejs/form

You can create a FormProvider to associate automatically a component from field type:

import { FormConfigProvider } from '@arkejs/form'

function Application() {
  return (
    <FormConfigProvider
        components={{
          boolean: ({field}) => (<input {...field} type="checkbox" onChange={(e) => field.onChange(e.target.value)} />),
          string: ({field}) => (<Input{...field} onChange={(e) => field.onChange(e.target.value)} />)
        }}
    >
      ...
    </FormConfigProvider>
  )
}

Then you're able to import the Form and the FormField components:

import { FormConfigProvider, Form, FormField } from '@arkejs/form'

function Application() {
  return (
    <FormConfigProvider>
       <Form
         onSubmit={(values) => setData(values)}
         onChange={(values) => console.log(values)}
       >
         <div
           style={{
             display: 'grid',
             gridTemplateColumns: 'auto auto auto auto',
             gridGap: '8px 20px',
           }}
         >
           <FormField id="name" type="string" />
           <FormField id="surname" type="string"/>
           <FormField
             id="profile_image"
             // custom render ignore type 
             render={({field, formState, fieldState}) => (
               <AvatarCustomComponent {...field} />
             )}
           />
         </div>
       </Form>
    </FormConfigProvider>
  )
}

You can also use the Form without the general FormConfigProvider and use the components props to define the component by field type

import { Form, FormField } from '@arkejs/form'

function Application() {
    return (
        <Form
            onSubmit={(values) => setData(values)}
            onChange={(values) => console.log(values)}
            // Define here the components
            components={{
                boolean: ({field}) => (<input {...field} type="checkbox" />),
                string: ({field}) => (<input{...field} />)
            }}
        >
            <div
                style={{
                    display: 'grid',
                    gridTemplateColumns: 'auto auto auto auto',
                    gridGap: '8px 20px',
                }}
            >
                <FormField id="name" type="string" />
                <FormField id="surname" type="string"/>
            </div>
        </Form>
    )
}

Manage the internal state

If you need to use the internal form state or useful functionalities, as looks the value of one field or reset the form state, you can use the useForm hook.

The methods object is based on react-hook-form library, to understand all functionalities look the React Hook Form Documentation

import { Form, FormField } from '@arkejs/form'

function Application() {
    const { formProps, methods } = useForm();
    const { watch, reset } = methods;
    const nameValue = watch('name');
    return (
        <Form
            {...formProps}
            onSubmit={(values) => setData(values)}
        >
            <div
                style={{
                    display: 'grid',
                    gridTemplateColumns: 'auto auto auto auto',
                    gridGap: '8px 20px',
                }}
            >
                <FormField id="name" type="string" />
                {nameValue.length > 0 &&<FormField id="surname" type="string"/>}
            </div>
            <button type="button" onClick={() => reset()}>Reset fields</button>
        </Form>
    )
}

Define the DefaultValues

If you need to update the default values after first render you can pass fields directly on useForm:

import { Form, FormField } from '@arkejs/form'

async function Application() {
    const responseFields = await axios.get('/fields')
    const { formProps } = useForm({
        fields: responseFields.data,
    });
    return(
        <Form
            {...formProps}
            onSubmit={(values) => setData(values)}
        >
            ...
        </Form>
    )
}

form's Issues

[bug] - nested fields are not working properly

We need to adjust following lines of code in order to make defaultValues work properly on nested fields.

 const computedDefaultValues = useMemo(() => {
    return fields?.reduce((acc: Record<string, any>, field) => {
      acc[field.id] = getFieldDefaultValue
        ? getFieldDefaultValue(field)
        : field.value;
      return acc;
    }, {});
  }, [fields, getFieldDefaultValue]);

Ideally splitting field.id by . and creating nested objects would be enough since Field is handling the id registration properly.

[feature] - add support for user defined parameter types

We should make the form as extendible as possible. Currently parameter types are defined by default but users might want to extend them.

[improvement] - make fields prop accept undefined as well

Since the form might be in a loading state we should accept fields as Field[] or undefined.