@evercamps/evercamps 2.0.1

package/dist/components/common/form/Button.scss

@@ -0,0 +1,66 @@
+.button {
+  display: inline-block;
+  position: relative;
+  border: 1px solid rgba(186, 191, 195, 1);
+  border-radius: 3px;
+  padding: 0.7rem 1.6rem;
+  font-weight: 600;
+  color: inherit;
+  background-color: white;
+  border-top-color: rgba(201, 204, 207, 1);
+  border-bottom-color: rgba(186, 191, 196, 1);
+  &:hover {
+    text-decoration: none;
+    background-color: rgba(201, 204, 207, 0.05);
+  }
+  &.primary {
+    background-color: var(--primary);
+    border: 0;
+    color: white;
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
+    &:hover {
+      background-color: #006e52;
+    }
+  }
+  &.critical {
+    background-color: var(--critical);
+    border: 0;
+    color: white;
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
+    &:hover {
+      background-color: #bc2200;
+    }
+  }
+  &.outline.interactive {
+    border-color: var(--interactive);
+    color: var(--interactive);
+    &:hover {
+      background-color: #e6eef9;
+    }
+  }
+  &.outline.critical {
+    background-color: transparent;
+    box-shadow: none;
+    border-color: var(--critical);
+    color: var(--critical);
+    &:hover {
+      background-color: #fff4f4;
+    }
+  }
+  &.loading {
+    background-color: var(--divider);
+    &:hover {
+      background-color: var(--divider);
+    }
+    span {
+      opacity: 0;
+    }
+    svg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: -1rem;
+      margin-left: -1rem;
+    }
+  }
+}

package/dist/components/common/form/Field.d.ts

@@ -0,0 +1,19 @@
+export function Field(props: any): React.JSX.Element;
+export namespace Field {
+    namespace propTypes {
+        let name: any;
+        let type: any;
+        let onChange: any;
+        let validationRules: any;
+        let value: any;
+    }
+    namespace defaultProps {
+        let onChange_1: undefined;
+        export { onChange_1 as onChange };
+        let validationRules_1: never[];
+        export { validationRules_1 as validationRules };
+        let value_1: string;
+        export { value_1 as value };
+    }
+}
+import React from 'react';

package/dist/components/common/form/Field.js

@@ -0,0 +1,120 @@
+import { Checkbox } from '@components/common/form/fields/Checkbox';
+import { Date } from '@components/common/form/fields/Date';
+import { DateTime } from '@components/common/form/fields/DateTime';
+import { Hidden } from '@components/common/form/fields/Hidden';
+import { Input } from '@components/common/form/fields/Input';
+import { MultiSelect } from '@components/common/form/fields/MultiSelect';
+import { Password } from '@components/common/form/fields/Password';
+import { Radio } from '@components/common/form/fields/Radio';
+import { Select } from '@components/common/form/fields/Select';
+import { TextArea } from '@components/common/form/fields/Textarea';
+import { Toggle } from '@components/common/form/fields/Toggle';
+import { useFormContext } from '@components/common/form/Form';
+import PropTypes from 'prop-types';
+import PubSub from 'pubsub-js';
+import React from 'react';
+import isEqual from 'react-fast-compare';
+import './Field.scss';
+import { FORM_FIELD_UPDATED } from '../../../lib/util/events';
+const useMemoizeArgs = (args, equalityFunc) => {
+    const ref = React.useRef();
+    const prevArgs = ref.current;
+    const argsAreEqual = prevArgs !== undefined &&
+        args.length === prevArgs.length &&
+        args.every((v, i) => equalityFunc(v, prevArgs[i]));
+    React.useEffect(() => {
+        if (!argsAreEqual) {
+            ref.current = args;
+        }
+    });
+    return argsAreEqual ? prevArgs : args;
+};
+export function Field(props) {
+    const { name, value, validationRules, onChange, type } = props;
+    const context = useFormContext();
+    const [fieldValue, setFieldValue] = React.useState(value || '');
+    const field = context.fields.find((f) => f.name && f.name === name);
+    React.useEffect(() => {
+        context.addField(name, value, validationRules || []);
+        return () => {
+            context.removeField(name);
+        };
+    }, [name]);
+    React.useEffect(() => {
+        setFieldValue(value);
+        if (!field) {
+            return;
+        }
+        context.updateField(name, value, validationRules);
+    }, useMemoizeArgs([value], isEqual));
+    React.useEffect(() => {
+        if (field) {
+            setFieldValue(field.value);
+        }
+    }, [field]);
+    React.useEffect(() => {
+        PubSub.publishSync(FORM_FIELD_UPDATED, { name, value: fieldValue });
+    }, [fieldValue]);
+    const onChangeFunc = (newValue) => {
+        let fieldVal;
+        if (typeof newValue === 'object' && newValue !== null && newValue.target) {
+            fieldVal = newValue.target.value;
+        }
+        else {
+            fieldVal = newValue;
+        }
+        setFieldValue(fieldVal);
+        context.updateField(name, fieldVal, validationRules);
+        if (onChange) {
+            onChange.call(window, newValue, props);
+        }
+    };
+    const F = (() => {
+        switch (type) {
+            case 'text':
+                return Input;
+            case 'select':
+                return Select;
+            case 'multiselect':
+                return MultiSelect;
+            case 'checkbox':
+                return Checkbox;
+            case 'radio':
+                return Radio;
+            case 'toggle':
+                return Toggle;
+            case 'date':
+                return Date;
+            case 'datetime':
+                return DateTime;
+            case 'textarea':
+                return TextArea;
+            case 'password':
+                return Password;
+            case 'hidden':
+                return Hidden;
+            default:
+                return Input;
+        }
+    })();
+    return (React.createElement(F, { ...props, onChange: onChangeFunc, value: fieldValue, error: field ? field.error : undefined }));
+}
+Field.propTypes = {
+    name: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    onChange: PropTypes.func,
+    validationRules: PropTypes.arrayOf(PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.shape({
+            rule: PropTypes.string,
+            message: PropTypes.string
+        })
+    ])),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+Field.defaultProps = {
+    onChange: undefined,
+    validationRules: [],
+    value: ''
+};
+//# sourceMappingURL=Field.js.map

package/dist/components/common/form/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../src/components/common/form/Field.jsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,qCAAqC,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,4CAA4C,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,OAAO,MAAM,oBAAoB,CAAC;AACzC,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,MAAM,cAAc,GAAG,CAAC,IAAI,EAAE,YAAY,EAAE,EAAE;IAC5C,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC;IAC3B,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,MAAM,YAAY,GAChB,QAAQ,KAAK,SAAS;QACtB,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,MAAM;QAC/B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAErD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;QACrB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;AACxC,CAAC,CAAC;AAEF,MAAM,UAAU,KAAK,CAAC,KAAK;IACzB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAC/D,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAChE,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;IAEpE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,eAAe,IAAI,EAAE,CAAC,CAAC;QAErD,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAC5B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO;QACT,CAAC;QACD,OAAO,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC;IACpD,CAAC,EAAE,cAAc,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;IAErC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,KAAK,EAAE,CAAC;YACV,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,CAAC,WAAW,CAAC,kBAAkB,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,YAAY,GAAG,CAAC,QAAQ,EAAE,EAAE;QAChC,IAAI,QAAQ,CAAC;QACb,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,KAAK,IAAI,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;YACzE,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC;QACnC,CAAC;aAAM,CAAC;YACN,QAAQ,GAAG,QAAQ,CAAC;QACtB,CAAC;QACD,aAAa,CAAC,QAAQ,CAAC,CAAC;QACxB,OAAO,CAAC,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC;QAErD,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;QACd,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,MAAM;gBACT,OAAO,KAAK,CAAC;YACf,KAAK,QAAQ;gBACX,OAAO,MAAM,CAAC;YAChB,KAAK,aAAa;gBAChB,OAAO,WAAW,CAAC;YACrB,KAAK,UAAU;gBACb,OAAO,QAAQ,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,KAAK,CAAC;YACf,KAAK,QAAQ;gBACX,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,IAAI,CAAC;YACd,KAAK,UAAU;gBACb,OAAO,QAAQ,CAAC;YAClB,KAAK,UAAU;gBACb,OAAO,QAAQ,CAAC;YAClB,KAAK,UAAU;gBACb,OAAO,QAAQ,CAAC;YAClB,KAAK,QAAQ;gBACX,OAAO,MAAM,CAAC;YAChB;gBACE,OAAO,KAAK,CAAC;QACjB,CAAC;IACH,CAAC,CAAC,EAAE,CAAC;IACL,OAAO,CACL,oBAAC,CAAC,OACI,KAAK,EACT,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GACtC,CACH,CAAC;AACJ,CAAC;AAED,KAAK,CAAC,SAAS,GAAG;IAChB,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IACjC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IACjC,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,eAAe,EAAE,SAAS,CAAC,OAAO,CAChC,SAAS,CAAC,SAAS,CAAC;QAClB,SAAS,CAAC,MAAM;QAChB,SAAS,CAAC,KAAK,CAAC;YACd,IAAI,EAAE,SAAS,CAAC,MAAM;YACtB,OAAO,EAAE,SAAS,CAAC,MAAM;SAC1B,CAAC;KACH,CAAC,CACH;IACD,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CACjE,CAAC;AAEF,KAAK,CAAC,YAAY,GAAG;IACnB,QAAQ,EAAE,SAAS;IACnB,eAAe,EAAE,EAAE;IACnB,KAAK,EAAE,EAAE;CACV,CAAC"}

package/dist/components/common/form/Field.scss

@@ -0,0 +1,203 @@
+html {
+  input[type='text'],
+  input[type='email'],
+  input[type='password'],
+  input[type='tel'],
+  select,
+  textarea {
+    background: none;
+    padding: 0.5rem 1.2rem;
+    display: block;
+    flex: 1 1;
+    display: block;
+    width: 100%;
+    position: relative;
+    z-index: 10;
+    border: 1px solid transparent;
+    margin: 1px;
+    border-radius: 4px;
+    &:focus {
+      outline: none;
+
+      & + .field-border:after {
+        box-shadow: 0 0 0 2px #458fff;
+      }
+    }
+  }
+}
+select {
+  -webkit-appearance: none;
+  appearance: none;
+  & ~ .field-suffix {
+    margin-left: -1.85rem;
+  }
+}
+input[type='radio'] {
+  width: 0;
+  height: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  & + .radio-checked,
+  + .radio-unchecked {
+    border: 2px solid var(--formFieldBorder);
+    border-radius: 100%;
+    width: 1.9rem;
+    height: 1.9rem;
+    display: inline-flex;
+    box-sizing: border-box;
+    justify-content: center;
+    transition: border-color 1s;
+  }
+  &:checked {
+    & + .radio-checked {
+      border-color: var(--interactive);
+      span {
+        align-self: center;
+        background-color: var(--interactive);
+        display: inline-block;
+        border-radius: 100%;
+        width: 1.1rem;
+        height: 1.1rem;
+      }
+    }
+  }
+}
+input[type='checkbox'] {
+  width: 0;
+  height: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  & + .checkbox-checked,
+  + .checkbox-unchecked {
+    border: 2px solid var(--formFieldBorder);
+    border-radius: 4px;
+    width: 1.8rem;
+    height: 1.8rem;
+    display: inline-flex;
+    box-sizing: border-box;
+    justify-content: center;
+    -webkit-transition: background-color 1000ms ease-in;
+    -ms-transition: background-color 1000ms ease-in;
+    transition: background-color 1000ms ease-in;
+  }
+  &:checked {
+    & + .checkbox-checked {
+      border: 0;
+      background-color: var(--interactive);
+      svg {
+        fill: white;
+        color: white;
+      }
+    }
+  }
+}
+.radio-field {
+  > div {
+    padding: 0.15rem 0;
+  }
+}
+.field-wrapper {
+  background-color: white;
+  position: relative;
+  label {
+    cursor: pointer;
+  }
+  &.radio-field {
+    background-color: transparent;
+  }
+  .field-border {
+    border: 1px solid var(--formFieldBorder);
+    border-top-color: var(--formFieldBorderShadow);
+    border-radius: 4px;
+    position: absolute;
+    z-index: 9;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    &:after {
+      transition: box-shadow 0.1s;
+      position: absolute;
+      z-index: 9;
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      content: '';
+      border-radius: 4px;
+    }
+  }
+}
+.field-instruction {
+  color: var(--textSubdued);
+}
+.form-field-container {
+  margin-top: 2rem;
+  &:first-child {
+    margin-top: 0;
+  }
+  label {
+    margin-bottom: 0.3rem;
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
+.field-error {
+  margin-top: 0.25rem;
+  svg {
+    width: 22px;
+    height: 22px;
+    fill: var(--critical);
+    color: var(--critical);
+    align-self: center;
+    margin-right: 0.4rem;
+  }
+  span {
+    align-self: center;
+    line-height: 1;
+  }
+}
+.form-field-container.has-error {
+  .field-border {
+    border-color: var(--critical);
+    background-color: #fff4f4;
+  }
+}
+.field-prefix,
+.field-suffix {
+  position: relative;
+  z-index: 10;
+  padding: 0 1.25rem;
+  align-self: center;
+  display: inline-flex;
+}
+
+.dropdown .field-prefix,
+.dropdown .field-suffix {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  align-self: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.dropdown .field-prefix {
+  left: 0;
+  padding-left: 0 0 0 1rem;
+}
+
+.dropdown .field-suffix {
+  right: 0;
+  padding-right: 0 1rem 0 0;
+}
+
+.form-control[disabled] + .field-border,
+input[readonly] + .field-border {
+  background-color: #e2e2e2;
+  cursor: not-allowed;
+  &:after {
+    box-shadow: none;
+  }
+}

package/dist/components/common/form/Form.d.ts

@@ -0,0 +1,47 @@
+export function Form(props: any): React.JSX.Element;
+export namespace Form {
+    namespace propTypes {
+        let action: any;
+        let btnText: any;
+        let children: any;
+        let id: any;
+        let method: any;
+        let onComplete: any;
+        let onError: any;
+        let onStart: any;
+        let onSuccess: any;
+        let onValidationError: any;
+        let submitBtn: any;
+        let isJSON: any;
+        let dataFilter: any;
+    }
+    namespace defaultProps {
+        let btnText_1: undefined;
+        export { btnText_1 as btnText };
+        let onComplete_1: undefined;
+        export { onComplete_1 as onComplete };
+        let onError_1: undefined;
+        export { onError_1 as onError };
+        let onStart_1: undefined;
+        export { onStart_1 as onStart };
+        let onSuccess_1: undefined;
+        export { onSuccess_1 as onSuccess };
+        let onValidationError_1: undefined;
+        export { onValidationError_1 as onValidationError };
+        let submitBtn_1: boolean;
+        export { submitBtn_1 as submitBtn };
+        let isJSON_1: boolean;
+        export { isJSON_1 as isJSON };
+        let action_1: string;
+        export { action_1 as action };
+        let method_1: string;
+        export { method_1 as method };
+        let dataFilter_1: undefined;
+        export { dataFilter_1 as dataFilter };
+    }
+}
+export const FormContext: React.Context<any>;
+export const FormDispatch: React.Context<any>;
+export function useFormContext(): any;
+export function useFormDispatch(): any;
+import React from 'react';

package/dist/components/common/form/Form.js

@@ -0,0 +1,192 @@
+import Button from '@components/common/form/Button';
+import PropTypes from 'prop-types';
+import PubSub from 'pubsub-js';
+import React, { useState } from 'react';
+import { FORM_SUBMIT, FORM_VALIDATED } from '../../../lib/util/events';
+import { serializeForm } from '../../../lib/util/formToJson';
+import { get } from '../../../lib/util/get.js';
+import { validator } from './validator';
+export const FormContext = React.createContext();
+export const FormDispatch = React.createContext();
+export function Form(props) {
+    const { id, action, method, isJSON = true, onStart, onComplete, onError, onSuccess, onValidationError, children, submitBtn = true, btnText, dataFilter } = props;
+    const [fields, setFields] = React.useState([]);
+    const formRef = React.useRef();
+    const [loading, setLoading] = useState(false);
+    const [state, setState] = useState('initialized');
+    const addField = (name, value, validationRules = []) => {
+        setFields((previous) => previous.concat({ name, value, validationRules, updated: false }));
+    };
+    const updateField = (name, value, validationRules = []) => {
+        setFields((previous) => previous.map((f) => {
+            if (f.name === name) {
+                return { name, value, validationRules, updated: true };
+            }
+            else {
+                return f;
+            }
+        }));
+    };
+    const removeField = (name) => {
+        setFields((previous) => previous.filter((f) => f.name !== name));
+    };
+    const validate = () => {
+        const errors = {};
+        fields.forEach((f) => {
+            f.validationRules.forEach((r) => {
+                let rule;
+                // Check if r is a string or an object
+                if (typeof r === 'string') {
+                    rule = r;
+                }
+                else {
+                    rule = r.rule;
+                }
+                const ruleValidator = validator.getRule(rule);
+                if (ruleValidator === undefined)
+                    return;
+                if (!ruleValidator.handler.call(fields, f.value)) {
+                    if (r.message) {
+                        errors[f.name] = r.message;
+                    }
+                    else {
+                        errors[f.name] = ruleValidator.errorMessage;
+                    }
+                }
+            });
+        });
+        if (Object.keys(errors).length === 0) {
+            setFields(fields.map((f) => ({ ...f, error: undefined })));
+        }
+        else {
+            setFields(fields.map((f) => {
+                if (!errors[f.name]) {
+                    return { ...f, error: undefined };
+                }
+                return { ...f, error: errors[f.name] };
+            }));
+        }
+        return errors;
+    };
+    const submit = async (e) => {
+        e.preventDefault();
+        setState('submitting');
+        try {
+            PubSub.publishSync(FORM_SUBMIT, { props });
+            const errors = validate();
+            PubSub.publishSync(FORM_VALIDATED, { formId: id, errors });
+            if (Object.keys(errors).length === 0) {
+                const formData = new FormData(document.getElementById(id));
+                setLoading(true);
+                if (onStart) {
+                    await onStart();
+                }
+                const response = await fetch(
+                // TODO: Replace by Axios
+                action, {
+                    method,
+                    body: isJSON === true
+                        ? JSON.stringify(serializeForm(formData.entries(), dataFilter))
+                        : formData,
+                    headers: {
+                        'X-Requested-With': 'XMLHttpRequest',
+                        ...(isJSON === true ? { 'Content-Type': 'application/json' } : {})
+                    }
+                });
+                if (!response.headers.get('content-type') ||
+                    !response.headers.get('content-type').includes('application/json')) {
+                    throw new TypeError('Something wrong. Please try again');
+                }
+                const responseJson = await response.json();
+                if (get(responseJson, 'data.redirectUrl') !== undefined) {
+                    window.location.href = responseJson.data.redirectUrl;
+                    return true;
+                }
+                if (onSuccess) {
+                    await onSuccess(responseJson);
+                }
+                setState('submitSuccess'); // This indicates that the form has been submitted successfully. It does not mean that the business logic is successful.
+            }
+            else {
+                setState('validateFailed');
+                if (onValidationError) {
+                    await onValidationError();
+                }
+                // Get the first field with error
+                const firstFieldWithError = Object.keys(errors)[0];
+                // Get the first element with the name of the field with error
+                const firstElementWithError = document.getElementsByName(firstFieldWithError)[0];
+                // Focus on the first element with error
+                if (firstElementWithError) {
+                    firstElementWithError.focus();
+                }
+            }
+        }
+        catch (error) {
+            setState('submitFailed');
+            if (onError) {
+                await onError(error);
+            }
+            throw error;
+        }
+        finally {
+            setLoading(false);
+            setState('submitted');
+            if (onComplete) {
+                await onComplete();
+            }
+        }
+        return true;
+    };
+    return (React.createElement(FormContext.Provider, { value: {
+            fields,
+            addField,
+            updateField,
+            removeField,
+            state,
+            ...props
+        } },
+        React.createElement(FormDispatch.Provider, { value: { submit, validate } },
+            React.createElement("form", { ref: formRef, id: id, action: action, method: method, onSubmit: (e) => submit(e) },
+                children,
+                submitBtn === true && (React.createElement("div", { className: "form-submit-button flex border-t border-divider mt-4 pt-4" },
+                    React.createElement(Button, { title: btnText || 'Save', onAction: () => {
+                            document
+                                .getElementById(id)
+                                .dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
+                        }, isLoading: loading, type: "submit" })))))));
+}
+Form.propTypes = {
+    action: PropTypes.string,
+    btnText: PropTypes.string,
+    children: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.node),
+        PropTypes.node
+    ]).isRequired,
+    id: PropTypes.string.isRequired,
+    method: PropTypes.string,
+    onComplete: PropTypes.func,
+    onError: PropTypes.func,
+    onStart: PropTypes.func,
+    onSuccess: PropTypes.func,
+    onValidationError: PropTypes.func,
+    submitBtn: PropTypes.bool,
+    isJSON: PropTypes.bool,
+    dataFilter: PropTypes.func
+};
+Form.defaultProps = {
+    btnText: undefined,
+    onComplete: undefined,
+    onError: undefined,
+    onStart: undefined,
+    onSuccess: undefined,
+    onValidationError: undefined,
+    submitBtn: true,
+    isJSON: true,
+    action: '',
+    method: 'POST',
+    dataFilter: undefined
+};
+export const useFormContext = () => React.useContext(FormContext);
+export const useFormDispatch = () => React.useContext(FormDispatch);
+//# sourceMappingURL=Form.js.map

package/dist/components/common/form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../../src/components/common/form/Form.jsx"],"names":[],"mappings":"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"}