@croz/nrich-form-configuration-core

@croz/nrich-form-configuration-core

Overview

@croz/nrich-form-configuration-core is a module for generating automatic validations for forms in the application. It's a frontend part of nrich-form-configuration backend module. Together, they allow the user to define validations in a single place (backend).

For validation schemas this lib uses yup.

Setup

To use this module in your project run npm install @croz/nrich-form-configuration-core or yarn add @croz/nrich-form-configuration-core

Basic usage

On some upper level of your app, wrap your components in FormConfigurationProvider.

import { FormConfigurationProvider } from "@croz/nrich-form-configuration-core";

const App = () => (
  <FormConfigurationProvider loader="Loading...">
    {/* rest of the app... */}
  </FormConfigurationProvider>
);

In your form component, use useYupFormConfiguration with your form id defined on backend.

import React, { useState } from "react";
import { useYupFormConfiguration } from "@croz/nrich-form-configuration-core";
import { Form, Formik } from "formik";

type CreateForm = {
  /* fields of the form */
}

export const SomeFormComponent = () => {
  const [formValues, setFormValues] = useState({});
  const validationSchema = useYupFormConfiguration<CreateForm>('user.create-form');

  return (
    <Formik
      validationSchema={validationSchema}
      onSubmit={(values) => setFormValues(values)}
    >
      <Form>
        { /* Rest of the form */}
      </Form>
    </Formik>
  );
};

NOTE: Formik is used just as an example, you can use any form lib compatible with yup.

Details

FormConfigurationProvider component has the following props:

Prop name	Description	Required	Default value
children	Component tree that will be using nrich form configuration	yes	none
loader	Custom component used while waiting for configuration fetch to finish	no	none
url	Backend form configuration path	no	/nrich/form/configuration
requestOptionsResolver	Function that creates options for the initial fetch call to backend	no	none
additionalValidatorConverters	List of ValidatorConverters used to allow custom validations	no	none

Registering and using custom validations

For custom validations to work, you need to provide a ValidatorConverter for it. ValidatorConverter contains two fields supports and convert.

supports is used to check if this is the correct validation for a given form validation configuration, while convert serves as an implementation of the validation. convert will usually use the yup's Schema.test method.

import oib from "oib.js";
import { FormConfigurationProvider } from "@croz/nrich-form-configuration-core";

const additionalValidatorConverters = [
  {
    supports: (configuration) => configuration.name === "ValidOib",
    convert: (configuration, validator) => validator.test("validOib", configuration.errorMessage, value => oib.validate(value))
  }
];

const getRequestParams = (): RequestInit => ({
  headers: {
    Authorization: "Bearer token",
  },
});

const App = () => (
  <FormConfigurationProvider loader="Loading..."
                             additionalValidatorConverters={additionalValidatorConverters}
                             requestOptionsResolver={getRequestParams}>
    {/* rest of the app... */}
  </FormConfigurationProvider>
);