build-react-form

Description

Build Enterprise grade forms quickly with React Form Enterprise

Features

• Rich pre set of input components based on Material-UI, BlueprintJS and Antd
• Add your own Custom Components/Inputs
• Form Sections
• Fully customizable
• Internationalization supported

Installation and usage

Install through the command

npm install build-react-form

You can import BuildReactForm and access its functionality through

import FormGenerator, { FormProvider } from "build-react-form";

// Add Form Provider to Root of Project
(...)
      <FormProvider>
        <App />
      <FormProvider>
(...)


// Build your Form
(...)
    <FormGenerator id={id} inputOptions={inputOptions} {...formGeneratorDefaultValues} />
(...)

Supported Components

In order to access out-of-the-box components you can use BRF.FormEnums.RegisteredInputs

• MUI_BUTTON - Material UI Button
• MUI_TEXTINPUT - Material UI Text Field
• MUI_SELECT - Material UI Select
• MUI_AUTOCOMPLETE - Material UI AutoComplete
• MUI_CHECKBOX - Material UI Checkbox
• MUI_DATEPICKER - Material UI DatePicker
• MUI_RADIOGROUP - Material UI RadioGroup
• MUI_SLIDER - Material UI Slider
• MUI_SWITCH - Material UI Switch
• MUI_TIMEPICKERTEXTINPUT - Material UI Time Picker (Text Field based)
• MUI_NUMERICFROMTO - Material UI Numeric Input (From To)
• REACT_DATEPICKER - Based on react-datepicker
• REACT_NUMBERFORMAT: Based on react-numberformat
• HTML_INPUT - Generic HTML Input Component inputProps available in documentation soon

Demo

Demo is available here https://github.com/jtiagodev/react-form-generator

git clone https://github.com/jtiagodev/react-form-generator.git
npm install
npm run start

Advanced Usage

FormProvider

Add to the root of your project, provides global access to your form functionalities

(...)
      <FormProvider>
        <App />
      </FormProvider>
(...)

FormGenerator

/**
* Maximum Width of the Form Container
*/
maxWidth: PropTypes.string,
/**
* Maximum Height of the Form Container
*/
maxHeight: PropTypes.string,


/**
* (Advanced usage) Mapping the supported types of Form Inputs provided to the Form Generator. Additional Input Registry
*/
additionalInputRegistry: PropTypes.object,
/**
* Size for a column (in pixels)
*/
colSize: PropTypes.number,
/**
* Amount of Rows on the form
*/
rowNum: PropTypes.number,
/**
* Amount fo Columns on the form
*/
colNum: PropTypes.number,
/**
* Form elements definition
*/
inputOptions: PropTypes.array,
/**
* Default magins applied to each cell
*/
margin: PropTypes.number,
/**
* Enable Form Footer
*/
enableFooter: PropTypes.bool,
/**
* Enable Default Footer Buttons
*/
enableFooterButtons: PropTypes.bool,
/**
* Styles to be spread to the Form Wrapper Flex
*/
styleFormWrapper: PropTypes.object,
/**
* Styles to be spread to the Form Body Flex
*/
styleFormBody: PropTypes.object,
/**
* Styles to be spread to the Form Footer Flex
*/
styleFormFooter: PropTypes.object,
/**
* Override all Input Form to behave as Read Only (eg. when you want to use the form as a info table)
*/
readOnlyMode: PropTypes.bool,
/**
* Sections configuration {id, title, displayTitle }
*/
sections: PropTypes.array,
/**
* If the Form should use sections or ignore them and spawn all Inputs in the Array order through the col/rows defined
*/
useSections: PropTypes.bool

import FormGenerator, { formGeneratorDefaultValues } from "build-react-form";

{
  typesMap: defaultTypesMap,
  colSize: 200,
  rowNum: 2,
  colNum: 5,
  margin: "5px",
  enableFooter: true,
  enableFooterButtons: true,
  styleFormWrapper: {},
  styleFormBody: {},
  styleFormFooter: {},
  readOnlyMode: false,
  sections: defaultSections,
  useSections: true,
  additionalInputRegistry: {}
}

Props:

• id (string): Identifier of the FormGenerator
• inputOptions (array of Inputs): Inputs to be added to your FormGenerator
• additionalInputRegistry (array of Registry): Additional inputs to be added to the Input Registry to be used within the FormGenerator

(...)
    <FormGenerator id={id} inputOptions={inputOptions} {...formGeneratorDefaultValues} />
(...)

InputBuilder

Simple build for your Input definition

import { inputBuilder, FormEnums } from "build-react-form";

// inputBuilder(label, type, options)
inputBuilder("DatePicker1", FormEnums.RegisteredInputs.MUI_TIMEPICKERTEXTINPUT, { section: "section3", readOnly: true, inputProps: { displayDateDiff: true }})

Here is the schema for an Input

// Label to Identify Value Field within Form
inputLabel: string
// Input type to render the Component (must be mapped in typesMapper)
inputType: string
// Disables the Input until the following Input IDs are filled/touched
disableWhileNotFilled: array of strings
// List of inputLabel dependencies, which are resetted to "resetValue" when value of the input is changed
dependencies: array of strings
// Default Value for the input
defaultValue: string | bool | number
// Value to reset to, as a dependency of another input that changed value
resetValue: string | bool | number
// Props to spread in the underlying Input Component
inputProps: object
// Margin for the cell that spawns the Input
margin: string
// Display Error Validation Messages
showValidation: bool
// Validation options
validation: ValidationSchema
// Number of cells to spawn the Input
cols: number
// Should display label on the input form
labelDisplay: bool
// Position for the Input Label (either Left or Top)
labelPosition: string
// Text to be applied to the Input Label
labelText: string
// Margin Right to be applied to the Input Label
labelMarginRight: string
// Style to be applied to the Input Label
labelStyle: object
// Ref Data to be fetched on Input load
useRefDataLoader: bool
refDataMethod: string
refDataURL: string
refDataPayload: object
refDataLensPath: array of strings
// Styles to be spread to the Flex wrapping the Input Form
entryStyle: object
// If the component should be readOnly and assume read-only styles
readOnly: bool
// Styles to be applied to the Input Component when it's in read only mode
readOnlyStyles: object
// Which section the Input should be added to
section: string
// The amount of grid cols to spawn the input in (ranges from 1-12)
gridCols: number
// Should include surrounding Paper on the Input
includePaper: bool

Accessing Form Context & Handlers

Within formContext you can access registeredForms and you have the following methods available:

• setValues(inputId, value)
• getValues()

import react, { useContext } from "react";
import { FormGlobalContext } from "build-react-form";

// You can use the form internal context anywhere
(...)
    const formContext = useContext(FormGlobalContext);
    const formId = "myForm1";

    (...)
    <button
            onClick={() => { 
              formContext
              .registeredForms[formId]
              .setValues(
              "text1",
              "hello test"
              );
          }}
          >
    (...)
(...)

Add your own input components

You can pass the prop additionalInputRegistry (array of Registry) to any FormGenerator. Registry example follows:

{
  id: string - Unique identifier of the Component to be added in inputOptions,
  render: React.Component - Renderer for the Input Component,
  inputPropsSchema: Joi Schema - Schema for the specific inputProps available to the Component
}

import MyInputComponent, { MyInputComponentJoiSchema } from "./MyInputComponent";
import FormGenerator from "build-react-form";

const additionalInputRegistry = [
  { id: "myComponent",
    render: MyInputComponent,
    inputSchema: MyInputComponentJoiSchema 
  }
];

const App = (props) => {
  return (
    <FormGenerator (...) additionalInputRegistry={additionalInputRegistry} />
  )
}

Roadmap

• v1.3 - Initial Demo
• v1.4 - Add i18n Support
• v1.5 - Add TypeScript Support

License

MIT