@hawk-ui/form

Installation

To install a component run

$ npm install @hawk-ui/form --save

Please import CSS styles via

@import '/path__to__node_modules/@hawk-ui/form/dist/index.min.css

Usage

Form:

Demo

import Form from '@hawk-ui/form';

const configuration = {
  data_type: "object",
  properties: {
    name: {
        data_type: "object",
        title: "",
        visual: {
          show_inline: true
        },
        validation: {},
        properties: {
          first_name: {
            data_type: "string",
            title: "First name",
            description: "This is my First name",
            visual: {
              field_type: "input",
              show_title: true,
              show_description: true
            },
            validation: {
              only_alphabets_spaces: true,
              required: true
            }
          },
          middle_name: {
            data_type: "string",
            title: "Middle name",
            visual: {
              field_type: "input",
              show_title: true
            },
            validation: {
              required: true
            }
          },
          last_name: {
            data_type: "string",
            title: "Last name",
            visual: {
              field_type: "input",
              show_title: true
            },
            validation: {
              required: true
            }
          }
        }
      },
      fruits: {
        data_type: "object",
        title: "",
        visual: {},
        validation: {},
        properties: {
          value: {
            data_type: "array",
            title: "Select Fruits",
            visual: {
              array_supported_field: true,
              show_title: true
            },
            validation: {},
            items: {
              visual: {
                field_type: "checkbox",
                options: [
                  { key: 1, label: "apple", value: "apple" },
                  { key: 2, label: "mango", value: "mango" },
                  { key: 3, label: "banana", value: "banana" },
                  { key: 4, label: "orange", value: "orange" },
                  { key: 5, label: "pineapple", value: "pineapple" }
                ],
                show_inline: true
              },
              data_type: "string"
            }
          }
        }
      },
      country: {
        data_type: "object",
        title: "",
        visual: {},
        validation: {},
        properties: {
          value: {
            data_type: "array",
            title: "Select Country",
            visual: {
              array_supported_field: true,
              show_title: true
            },
            validation: {},
            items: {
              visual: {
                field_type: "radio",
                options: [
                  { key: 1, label: "germany", value: "germany" },
                  { key: 2, label: "mexico", value: "mexico" },
                  { key: 3, label: "austria", value: "austria" },
                  { key: 4, label: "argentina", value: "argentina" },
                  { key: 5, label: "georgia", value: "georgia" }
                ],
                show_inline: true
              },
              data_type: "string"
            }
          }
        }
      },
      date: {
        data_type: "string",
        title: "Select Date",
        visual: {
          show_title: true,
          field_type: "datepicker"
        },
        validation: {
          dateISO: true
        }
      },
      upload_image: {
        data_type: "string",
        title: "Upload Image",
        visual: {
          show_title: true,
          describable: true,
          field_type: "file-upload"
        },
        validation: {}
      },
      update_drag_image: {
        data_type: "string",
        title: 'Upload Image',
        visual: {
          show_title: true,
          title: "Drag and Drop Image Here",
          description: "Supported file types: (*.png, *.jpg, *.jpeg). View format instructions.",
          variant: "draggable",
          field_type: "file-upload",
        },
        validation: {}
      },
      address: {
        data_type: "string",
        title: "Address",
        placeholder: "Address",
        visual: {
          field_type: "textarea",
          show_title: true,
          rows: 5
        },
        validation: {}
      },
      description: {
        data_type: "string",
        title: "Description",
        placeholder: "Description",
        visual: {
          field_type: "rich-text-editor",
          show_title: true,
          editable_id: "containerEditable",
          options: [
            'bold', 'italic', 'underline', 'link', 'unlink', 'strike through', 'ordered list'
            , 'unordered list', 'formatblock', 'cut', 'copy', 'print', 'pre', 'header', 'font family'
            , 'font size', 'select all', 'text color picker', 'background color picker', 'remove format', 'clean', 'divider', 'left justify'
            , 'center justify', 'right justify', 'outdent', 'indent', 'undo', 'redo'
          ],
          rows: 10,
        },
        validation: {}
      },
      price: {
        data_type: "string",
        title: "Price",
        placeholder: "Write price",
        visual: {
          field_type: "input-group",
          show_title: true,
          addon: "0.00",
          addon_size: "small",
          addon_placement: "right",
          addon_icon: false
        },
        validation: {}
      },
      style: {
        data_type: "object",
        title: "",
        visual: {
          show_inline: true,
        },
        validation: {},
        properties: {
          color: {
            data_type: "string",
            title: "Color Picker",
            visual: {
              field_type: "color-picker",
              default_color: "f18ca6",
              show_title: true,
            },
            validation: {},
          },
          border: {
            data_type: "string",
            title: "Border Picker",
            visual: {
              field_type: "border-picker",
              border_type: "dotted",
              show_title: true,
            },
            validation: {},
          },
          group: {
            data_type: "string",
            title: "Select Options",
            visual: {
              field_type: "button-group",
              show_title: true,
              variant: "outlined",
              suggest: {
                options: [
                  { key: 1, title: 'First' },
                  { key: 2, title: 'Second' },
                ],
              },
            },
            validation: {},
          },
        },
      },
      range: {
        data_type: "number",
        title: "Range",
        visual: {
          field_type: "range-slider",
          value_id: "valueSliderId",
          range_id: "rangeSliderId",
          range_min: 0,
          range_max: 100,
          range_step: 1,
          value: 20,
          show_title: true
        },
        validation: {}
      },
      state: {
        data_type: "string",
        title: "State",
        visual: {
          field_type: "select",
          array_supported_field: true,
          show_title: true,
          is_readable: false,
          suggest: {
            query: "name",
            api: "/api/v1/suggest/skill/",
            data: "data"
          }
        },
        validation: {}
      },
      currency: {
        data_type: "string",
        title: "Currency",
        visual: {
          field_type: "select",
          show_icon: true,
          show_title: true,
          suggest: {
            name: "title",
            value: "value",
            options: [
              {
                title: "INR",
                value: "INR"
              },
              {
                title: "USD",
                value: "USD"
              },
              {
                title: "GBP",
                value: "GBP"
              },
              {
                title: "SGD",
                value: "SGD"
              }
            ]
          }
        },
        validation: {
          required_if: {
            check: "current_ctc.value"
          }
        }
      },
      company: {
        data_type: "string",
        title: "Company",
        visual: {
          field_type: "tags-input",
          show_icon: true,
          show_title: true,
          suggest: {
            name: "title",
            value: "value",
            options: [
              {
                title: "Alfreds Futterkiste",
                value: "alfreds futterkiste"
              },
              {
                title: "Centro comercial Moctezuma",
                value: "centro comercial moctezuma"
              },
              {
                title: "Ernst Handel",
                value: "ernst handel"
              },
              {
                title: "Island Trading",
                value: "island trading"
              }
            ]
          }
        },
        validation: {
          required_if: {
            check: "current_ctc.value"
          }
        }
      },
      city: {
        data_type: "string",
        title: "City",
        visual: {
          field_type: "tags-input",
          array_supported_field: true,
          show_title: true,
          suggest: {
            query: "name",
            api: "/api/v1/suggest/skill/",
            data: "data"
          }
        },
        validation: {}
      }
  }
};

initialState = {
  data: {},
  errors: {},
  submitted: false,
};

<div>
  <Form
    className="candidate-edit-form"
    configuration={configuration}
    data={state.data}
    errors={state.errors}
    onChange={({ property, data, error }) => {
      setState((prevState) => {
        let updatedErrors = _.cloneDeep(prevState.errors || {});

        if (_.isEmpty(error)) {
          updatedErrors = _.omit(updatedErrors, property);
        } else {
          updatedErrors = _.set(updatedErrors, property, error);
        }

        updatedErrors = _.mapValues(updatedErrors, value => {
          if (_.isArray(value) && _.every(value, (val) => (_.isNil(val) || _.isEmpty(val)))) {
            return [];
          }

          if (_.isPlainObject(value) && _.every(_.values(value), (val) => (_.isNil(val) || _.isEmpty(val)))) {
            return {};
          }

          return value;
        });

        return ({ data, errors: _.omitBy(updatedErrors, _.isEmpty) });
      });
    }}
    isSubmitted={state.submitted}
  />

  <button
    type="button"
    className="hawk-button"
    onClick={() => {
      setState({ submitted: true });
    }}
  >
    Submit
  </button>
</div>