@delinternet/react-automate-form

@delinternet/react-automate-form

How to extend it

import ValidatorAdapter from './validator';
import controllers from './Components/Controllers';
import renderViews from './Components/RenderViews';
import FormManager, { container, CommonInputAdapter as adapter } from '@delinternet/react-automate-form';

// ================================
// EXTENDING THE FORM LIBRARY
// ================================

container.registerValidator(new ValidatorAdapter());

// Registering our custom Controllers views
for (const [key, RenderView] of Object.entries(renderViews)) {
  container.registerViewRenders(key, RenderView);
}

// Registering our controllers | The library is agnostic to the components
for (const [key, Controller] of Object.entries(controllers)) {
  container.registerController(key, adapter(Controller));
}

// Export our customized instance of the Library
export default FormManager;

How to use it

import FormManager from './form';
import { validationRulesBuilder } from '@joseaburt/json-driven-validator';

const controllersConfigs = [
  {
    type: 'text',
    name: 'name',
    label: 'Name',
    placeholder: 'Name',
    responsive: { xs: 12, sm: 6, md: 6, lg: 4 },
    validationRules: validationRulesBuilder({
      type: 'string',
      constrains: [
        {
          method: 'email',
          params: {
            message: 'First Name is required',
          },
        },
      ],
    }),
  },
];

const defaultState = { name: '--' };
const formManager = new FormManager({ formIndex: 'example', defaultState });
const controllers = formManager.initControllers(controllersConfigs);

class AppFormListener {
  onErrors({ errors, manager }) {}
  onStateChange({ value, previous, manager }) {}
  onNameStateChange({ value, previous, manager }) {}
  onNameError({ givenValue, isValid, reason, manager }) {}
}

formManager.setControllersHandlers(new AppFormListener());

export default function App() {
  return <div>{controllers}</div>;
}