@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>
);