README

ebs-form

EbsForm were developed to help the EBS FontEnd team to develop standardized interfaces faster.

Installation

You can use the package manager npm or yarn to install ebs-form.

npm install ebs-form

yarn add ebs-form

Usage

import React from "react";
import { Button } from "@material-ui/core";
import EbsForm from "ebs-form";

const normalDefinition = (props) => {
    const { getValues, setValue, reset } = props;
    return {
      name: "myForm",
      components: [
        {
          sizes: [12, 6, 4, 3, 2],
          component: "TextField",
          name: "TextField",
          inputProps: {
            label: "textfield",
          },
          rules: { required: "It's required" },
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "CheckBox",
          name: "checkbox",
          title: "Check Box Group",
          options: [{ label: "Hello" }, { label: "World" }],
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "DatePicker",
          name: "datepicker",
          inputProps: {
            label: "DatePicker",
          },
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "Radio",
          name: "radiogroup",
          label: "Radio Group",
          row: false,
          options: [
            { label: "Uno", value: 1, disabled: true },
            { label: "Dos", value: 2, color: "primary" },
          ],
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "Select",
          name: "select",
          options: users,
          inputProps: {
            placeholder: "Hello",
          },
          defaultValue: { label: "Uno", value: 1 },
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "Switch",
          name: "switch",
          label: "Switch",
          defaultValue: true,
          inputProps: { disabled: true, color: "primary" },
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "Button",
          name: "button",
          label: "Button",
          buttonProps: {
            color: "primary",
            variant: "outlined",
          },
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "File",
          name: "file",
          label: "Choose a file...",
          customProps: {
            button: {
              color: "primary",
              variant: "outlined",
              size: "small",
            },
            input: {
                acceptedFiles: [".csv"],
                cancelButtonText: "cancel",
                submitButtonText: "submit",
                maxFileSize: 5000000,
                showPreviews: true,
                showFileNamesInPreview: true,
              },
        },
      ],
    };
  };

const onSubmit = (data) => {
  console.log(data);
};

const Demo = (props) => {

  return (
    <div>
      <EbsForm definition={normalDefinition} onSubmit={onSubmit}>
        <Button type="submit" variant="contained" color="primary">
          Submit
        </Button>
      </EbsForm>
    </div>
  );
};

Properties

Name	Type	Description
definition	func	Function to defines the Form structure Signature: function({ getValues: `func`, setValue: `func`, reset: `func` }) => `object`. `getValues:` This function allows you to dynamically get the values of the form. `setValue:` This function allows you to dynamically set the value of a component. `reset:` Reset the fields' values and errors, you have the freedom to only reset specific component values. You can pass values as an optional argument to reset your form to the assigned default values
onSubmit	func	Function to handle form data
children*	node	Nodes to show under the form

getValues: (payload?: string | string[]) => Object

getValues(): Read all form values.
getValues('test'): Read an individual field value by name.
getValues(['test', 'test1']): Read multiple fields by name.

setValues: (name: string, value: any, config?: Object) => void

setValue('name', 'value'): Set a component value.
You can also set the shouldValidate parameter to true in order to trigger a field validation.
- setValue('name', 'value', { shouldValidate: true })

reset: (values?: Record<string, any>, omitResetState?: Record<string, boolean>) => void

When invoking reset({ value }) without supply defaultValues, the form will replace defaultValues with shallow clone value object which you have supplied

Examples

Accordion Form

import React from "react";
import { Button } from "@material-ui/core";
import EbsForm from "ebs-form";

const accordionDefinition = (props) => {
  const { getValues, setValue, reset } = props;

  return {
    name: "accordion",
    groups: [
      {
        name: "myForm",
        title: "My Form",
        components: [
          {
            sizes: [12, 6, 4, 3, 2],
            component: "TextField",
            name: "TextField",
            inputProps: {
              label: "textfield",
            },
          },
          {
            sizes: [12, 6, 4, 3, 2],
            component: "CheckBox",
            name: "checkbox",
            title: "Check Box Group",
            options: [{ label: "Hello" }, { label: "World" }],
          },
          {
            sizes: [12, 6, 4, 3, 2],
            component: "DatePicker",
            name: "datepicker",
            inputProps: {
              label: "DatePicker",
            },
          },
          {
            sizes: [12, 6, 4, 3, 2],
            component: "Radio",
            name: "radiogroup",
            label: "Radio Group",
            options: [
              { label: "One", value: 1, disabled: true },
              { label: "Two", value: 2, color: "primary" },
            ],
            defaultValue: { label: "One", value: 1 },
          },
          {
            sizes: [12, 6, 4, 3, 2],
            component: "Select",
            name: "select",
            options: [
              { label: "Uno", value: 1 },
              { label: "Dos", value: 2 },
            ],
            inputProps: {
              placeholder: "hola",
            },
          },
          {
            sizes: [12, 6, 4, 3, 2],
            component: "Switch",
            name: "switch",
            label: "Switch",
          },
          {
            sizes: [12, 6, 4, 3, 2],
            component: "Button",
            name: "button",
            label: "Button",
            onClick: (e) => {
              reset({});
            },
            buttonProps: {
              color: "primary",
              variant: "outlined",
            },
          },
          {
            sizes: [12, 6, 4, 3, 2],
            component: "File",
            name: "file",
            label: "Choose a file...",
            customProps: {
              button: { color: "primary", variant: "contained" },
              input: {
                acceptedFiles: [".csv"],
                cancelButtonText: "cancel",
                submitButtonText: "submit",
                maxFileSize: 5000000,
                showPreviews: true,
                showFileNamesInPreview: true,
              },
            },
            rules: {
              required: <p>Is required</p>,
            },
          },
        ],
      },
    ],
  };
};

const onSubmit = (data) => {
  console.log(data);
};

const Demo = (props) => {
  return (
    <div>
            
      <EbsForm definition={accordionDefinition} onSubmit={onSubmit}>
                
        <Button type="submit" variant="contained" color="primary">
                    Submit         
        </Button>
              
      </EbsForm>
          
    </div>
  );
};

Normal Form

import React from "react";
import { Button } from "@material-ui/core";
import EbsForm from "ebs-form";

const normalDefinition = (props) => {
    const { getValues, setValue, reset } = props;
    return {
      name: "myForm",
      components: [
        {
          sizes: [12, 6, 4, 3, 2],
          component: "TextField",
          name: "TextField",
          inputProps: {
            label: "textfield",
          },
          rules: { required: "It's required" },
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "CheckBox",
          name: "checkbox",
          title: "Check Box Group",
          options: [{ label: "Hello" }, { label: "World" }],
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "DatePicker",
          name: "datepicker",
          inputProps: {
            label: "DatePicker",
          },
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "Radio",
          name: "radiogroup",
          label: "Radio Group",
          row: false,
          options: [
            { label: "Uno", value: 1, disabled: true },
            { label: "Dos", value: 2, color: "primary" },
          ],
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "Select",
          name: "select",
          options: users,
          inputProps: {
            placeholder: "Hello",
          },
          defaultValue: { label: "Uno", value: 1 },
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "Switch",
          name: "switch",
          label: "Switch",
          defaultValue: true,
          inputProps: { disabled: true, color: "primary" },
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "Button",
          name: "button",
          label: "Button",
          buttonProps: {
            color: "primary",
            variant: "outlined",
          },
        },
        {
          sizes: [12, 6, 4, 3, 2],
          component: "File",
          name: "file",
          label: "Choose a file...",
          customProps: {
            button: {
              color: "primary",
              variant: "outlined",
              size: "small",
            },
            input: {
                acceptedFiles: [".csv"],
                cancelButtonText: "cancel",
                submitButtonText: "submit",
                maxFileSize: 5000000,
                showPreviews: true,
                showFileNamesInPreview: true,
              },
        },
      ],
    };
  };

const onSubmit = (data) => {
  console.log(data);
};

const Demo = (props) => {
  
  return (
    <div>
      <EbsForm definition={normalDefinition} onSubmit={onSubmit}>
        <Button type="submit" variant="contained" color="primary">
          Submit
        </Button>
      </EbsForm>
    </div>
  );
};

Components API

Helper Attributes

arrow: bool => If true, adds an arrow to the helper.
classes: object => Override or extend the styles applied to the component.
placement: 'bottom-end'| 'bottom-start'| 'bottom'| 'left-end'| 'left-start'| 'left'| 'right-end'| 'right-start'| 'right'| 'top-end'| 'top-start'| 'top'
title: node => label to show

Button

Name	Type	Default	Description
sizes	`Array`	["auto", "auto", "auto", "auto", "auto"]	Defines the number of grids the component is going to use. It's applied for the ["xs","sm","md","lg","xl"] breakpoints and wider screens if not overridden.
name	`String`		Defines the component name.
buttonProps	`Object`		Attributes applied to the element.
helper	`Object`		Attributes applied to the helper element. (see Helper Attributes)
label	`Node`		Component or text to show as label.

buttonProps Attributes

classes: Override or extend the styles applied to the component color: 'default'| 'inherit'| 'primary'| 'secondary'
disabled: bool
endIcon: node
fullWidth: bool
size: 'large'| 'medium'| 'small'
startIcon: node

CheckBox

Name	Type	Default	Description
sizes	`Array`	["auto", "auto", "auto", "auto", "auto"]	Defines the number of grids the component is going to use. It's applied for the ["xs","sm","md","lg","xl"] breakpoints and wider screens if not overridden.
name	`String`		Defines the component name.
checkProps	`Object`		Attributes applied to all checkbox.
helper	`Object`		Attributes applied to the helper element. (see Helper Attributes)
title	`Node`		Component or text to show on Top as label.
options	`Array`	[{}]	CheckBox options, it can be only one or multiple. Signature: `{{ label: "Hello", defaultValue: false },{ label: <p>World</p>}}`
onChange	`Func`		`function(event: object) => void` event: The event source of the callback. You can pull out the new checked state by accessing event.target.checked (boolean).

checkProps Attributes

classes: Override or extend the styles applied to the component
color: 'default'| 'primary'| 'secondary'
disabled: bool
icon: node
size: 'medium'| 'small'

DatePicker

Name	Type	Default	Description
sizes	`Array`	["auto", "auto", "auto", "auto", "auto"]	Defines the number of grids the component is going to use. It's applied for the ["xs","sm","md","lg","xl"] breakpoints and wider screens if not overridden.
Name	`String`		Defines the component name.
inputProps	`Object`		Attributes applied to the element.
helper	`Object`		Attributes applied to the helper element. (see Helper Attributes)
defaultValue	`Date`	new Date()	Picker defaultValue
onChange	`Func`		`function(event: object) => void` event: The event source of the callback. You can pull out the date selected.
rules	`Object`		Rules to validate element. (see Validation section)

Select

Name	Type	Default	Description
sizes	`Array`	["auto", "auto", "auto", "auto", "auto"]	Defines the number of grids the component is going to use. It's applied for the ["xs","sm","md","lg","xl"] breakpoints and wider screens if not overridden.
name	`String`		Defines the component name.
inputProps	`Object`		Attributes applied to the element.
helper	`Object`		Attributes applied to the helper element. (see Helper Attributes)
defaultValue	`Array`	[{}]	Value(s) selected by default Signature: `[{ label: "One", value: 1 }]`
onChange	`Func`		`function(event: object) => void` event: The event source of the callback. You can pull out the option selected.
rules	`Object`		Rules to validate element. (see Validation section)
options	`Array`		As minimum structure for each object you must to send label and value. Signature: `[{ label: "One", value: 1, color: '#00B8D9', isFixed: true },{ label: "Two", value: 2, isDisabled: true }]`

inputProps Attributes

className: Override or extend the styles applied to the component
color: 'default'| 'primary'| 'secondary'
isDisabled: bool
placeholder: node
isMulti: bool

RadioGroup

Name	Type	Default	Description
sizes	`Array`	["auto", "auto", "auto", "auto", "auto"]	Defines the number of grids the component is going to use. It's applied for the ["xs","sm","md","lg","xl"] breakpoints and wider screens if not overridden.
Name	`String`		Defines the component name.
helper	`Object`		Attributes applied to the helper element. (see Helper Attributes)
label	`Node`		Component or text to show on Top as label.
options	`Array`	[{}]	Radio options, it can be only one or multiple. Signature: `{{ label: "One", value: 1, disabled: true },{ label: <p>World</p>, value: 2, color: "primary" }}`
row	`Bool`	false	Defines the flex-direction style property. It is applied for all screen sizes.
defaultValue	`Object`		Radio selected by default Signaure: `{ label: "Hello", value:1 }`
rules	`Object`		Rules to validate element. (see Validation section)

Switch

Name	Type	Default	Description
sizes	`Array`	["auto", "auto", "auto", "auto", "auto"]	Defines the number of grids the component is going to use. It's applied for the ["xs","sm","md","lg","xl"] breakpoints and wider screens if not overridden.
Name	`String`		Defines the component name.
inputProps	`Object`		Attributes applied to the element.
helper	`Object`		Attributes applied to the helper element. (see Helper Attributes)
defaultValue	`bool`	false	If true, the component is checked.
onChange	`Func`		`function(event: object) => void` event: The event source of the callback. You can pull out the new value by accessing event.target.value (string). You can pull out the new checked state by accessing event.target.checked (boolean).
label	`Node`		Component or text to show on Top as label.
rules	`Object`		Rules to validate element. (see Validation section)

inputProps Attributes

classes: Override or extend the styles applied to the component
color: 'default'| 'primary'| 'secondary'
disabled: bool
size: 'medium'| 'small'

TextField

Name	Type	Default	Description
sizes	`Array`	["auto", "auto", "auto", "auto", "auto"]	Defines the number of grids the component is going to use. It's applied for the ["xs","sm","md","lg","xl"] breakpoints and wider screens if not overridden.
Name	`String`		Defines the component name.
inputProps	`Object`		Attributes applied to the element.
helper	`Object`		Attributes applied to the helper element. (see Helper Attributes)
defaultValue	`Node`	""	Component or text to show as defaultValue.
rules	`Object`		Rules to validate element. (see Validation section)

inputProps Attributes

classes: Override or extend the styles applied to the component
color: 'primary'| 'secondary'
disabled: bool
label: node
multiline: bool
fullWidth: bool
size: 'medium'| 'small'
rows: int => Number of rows to display when multiline option is set to true.

File

Name	Type	Default	Definition
sizes	`Array`	["auto", "auto", "auto", "auto", "auto"]	Defines the number of grids the component is going to use. It's applied for the ["xs","sm","md","lg","xl"] breakpoints and wider screens if not overridden.
name	`String`		Defines the component name.
customProps	`Object`		Attributes applied to the element.
helper	`Object`		Attributes applied to the helper element. (see Helper Attributes)
label	`Node`		Component or text to show as label.
rules	`Object`		Rules to validate the element. (see Validation section)

customProps Attributes

button: object
- classes: Override or extend the styles applied to the component
- color: 'default'| 'inherit'| 'primary'| 'secondary'
- disabled: bool
- endIcon: node
- fullWidth: bool
- size: 'large'| 'medium'| 'small'
- startIcon: node
input: object
- acceptedFiles: {['image/*']}
- cancelButtonText: {"cancel"}
- submitButtonText: {"submit"}
- maxFileSize: {5000000}
- showPreviews: {true}
- showFileNamesInPreview: {true}

Apply Validations

List of validation rules supported:

required
min
max
minLength
maxLength
pattern
validate

Example

{
          sizes: [12, 6, 4, 3, 2],
          component: "TextField",
          name: "TextField",
          inputProps: {
            label: "textfield",
            disabled: false,
            rows: 5,
            size: "medium",
            variant: "outlined",
          },
          helper: { title: "ayuda", placement: "right", arrow: true },
          defaultValue: "Hola mundo",
          rules: {
            min: 8,
            max: 99,
            patern: /^[A-Za-z]+$/i,
            validate: (value) => {
              return value == "Hello world";
            },
            required: "It's required",
          },
        },

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

Usage no npm install needed!

README

ebs-form

Installation

Usage

Properties

getValues: (payload?: string | string[]) => Object

setValues: (name: string, value: any, config?: Object) => void

reset: (values?: Record<string, any>, omitResetState?: Record<string, boolean>) => void

Examples

Accordion Form

Normal Form

Components API

Helper Attributes

Button

buttonProps Attributes

CheckBox

checkProps Attributes

DatePicker

Select

inputProps Attributes

RadioGroup

Switch

inputProps Attributes

TextField

inputProps Attributes

File

customProps Attributes

Apply Validations

Example

Contributing

License