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

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

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

1. setValue('name', 'value'): Set a component value.
2. 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

1. arrow: bool => If true, adds an arrow to the helper.
2. classes: object => Override or extend the styles applied to the component.
3. placement: 'bottom-end'| 'bottom-start'| 'bottom'| 'left-end'| 'left-start'| 'left'| 'right-end'| 'right-start'| 'right'| 'top-end'| 'top-start'| 'top'
4. 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