envoc-form 2.0.1-8 → 3.0.0

package/src/__Tests__/__snapshots__/StandardFormActions.test.js.snap

@@ -1,25 +1,25 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StandardFormActions has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <button
-      class="btn btn-primary disabled"
-      disabled=""
-      title="You haven't made any changes"
-      type="submit"
-    >
-      Submit
-    </button>
-     
-    <button
-      class="btn btn-link"
-      type="button"
-    >
-      Cancel
-    </button>
-  </form>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StandardFormActions has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <button
+      class="btn btn-primary disabled"
+      disabled=""
+      title="You haven't made any changes"
+      type="submit"
+    >
+      Submit
+    </button>
+     
+    <button
+      class="btn btn-link"
+      type="button"
+    >
+      Cancel
+    </button>
+  </form>
+</DocumentFragment>
+`;

package/src/__Tests__/__snapshots__/SubmitFormButton.test.js.snap

@@ -1,18 +1,18 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SubmitFormButton has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <button
-      class="btn btn-primary disabled"
-      disabled=""
-      title="You haven't made any changes"
-      type="submit"
-    >
-      Submit
-    </button>
-  </form>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SubmitFormButton has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <button
+      class="btn btn-primary disabled"
+      disabled=""
+      title="You haven't made any changes"
+      type="submit"
+    >
+      Submit
+    </button>
+  </form>
+</DocumentFragment>
+`;

package/src/__Tests__/index.js

@@ -1,2 +1,2 @@
-import FormTestBase from './FormTestBase';
-export { FormTestBase };
+import FormTestBase from './FormTestBase';
+export { FormTestBase };

package/src/_variables.scss

@@ -1,11 +1,11 @@
-//These variables are normally in the template directly,
-
-$red: #f86c6b;
-// Couldn't find these variables directly from coreui/bootstrap
-$input-border-color: #c2cfd6;
-$input-border-color--focused: #8ad4ee;
-$input-box-shadow--focused: 0 0 0 0.2rem rgba(32, 168, 216, 0.25);
-
-//Taken from react-select because it fit better in the color scheme and is more readable.
-$input-disabled-background-color: hsl(0, 0%, 95%);
-$input-disabled-border-color: hsl(0, 0%, 90%);
+//These variables are normally in the template directly,
+
+$red: #f86c6b;
+// Couldn't find these variables directly from coreui/bootstrap
+$input-border-color: #c2cfd6;
+$input-border-color--focused: #8ad4ee;
+$input-box-shadow--focused: 0 0 0 0.2rem rgba(32, 168, 216, 0.25);
+
+//Taken from react-select because it fit better in the color scheme and is more readable.
+$input-disabled-background-color: hsl(0, 0%, 95%);
+$input-disabled-border-color: hsl(0, 0%, 90%);

package/src/index.js

@@ -1,33 +1,33 @@
-import Form from './Form';
-import FormInput from './FormInput';
-import InlineFormInput from './InlineFormInput';
-import FormInputArray from './FormInputArray';
-import IconInput from './IconInput';
-import { BoolInput, InlineBoolInput } from './BoolInput';
-import StandardFormActions from './StandardFormActions';
-import validators from './validators';
-import * as normalizers from './normalizers';
-import ConfirmBaseForm from './ConfirmBaseForm';
-import ConfirmDeleteForm from './ConfirmDeleteForm';
-import SubmitFormButton from './SubmitFormButton';
-import AddressInput from './AddressInput';
-import { MoneyInput, InlineMoneyInput } from './MoneyInput';
-
-export {
-  Form,
-  FormInput,
-  InlineFormInput,
-  FormInputArray,
-  IconInput,
-  BoolInput,
-  InlineBoolInput,
-  validators,
-  normalizers,
-  StandardFormActions,
-  ConfirmBaseForm,
-  ConfirmDeleteForm,
-  SubmitFormButton,
-  AddressInput,
-  MoneyInput,
-  InlineMoneyInput,
-};
+import Form from './Form';
+import FormInput from './FormInput';
+import InlineFormInput from './InlineFormInput';
+import FormInputArray from './FormInputArray';
+import IconInput from './IconInput';
+import { BoolInput, InlineBoolInput } from './BoolInput';
+import StandardFormActions from './StandardFormActions';
+import validators from './validators';
+import * as normalizers from './normalizers';
+import ConfirmBaseForm from './ConfirmBaseForm';
+import ConfirmDeleteForm from './ConfirmDeleteForm';
+import SubmitFormButton from './SubmitFormButton';
+import AddressInput from './AddressInput';
+import { MoneyInput, InlineMoneyInput } from './MoneyInput';
+
+export {
+  Form,
+  FormInput,
+  InlineFormInput,
+  FormInputArray,
+  IconInput,
+  BoolInput,
+  InlineBoolInput,
+  validators,
+  normalizers,
+  StandardFormActions,
+  ConfirmBaseForm,
+  ConfirmDeleteForm,
+  SubmitFormButton,
+  AddressInput,
+  MoneyInput,
+  InlineMoneyInput,
+};

package/src/normalizers.js

@@ -1,32 +1,42 @@
-export const phoneNumber = (value) => {
-  if (!value) {
-    return value;
-  }
-
-  if (value.length === 12 && value.startsWith('+1')) {
-    value = value.substring(2);
-  }
-
-  const onlyNums = value.replace(/[^\d]/g, '');
-  if (onlyNums.length <= 3) {
-    return onlyNums;
-  }
-  if (onlyNums.length <= 7) {
-    return `${onlyNums.slice(0, 3)}-${onlyNums.slice(3)}`;
-  }
-  return `${onlyNums.slice(0, 3)}-${onlyNums.slice(3, 6)}-${onlyNums.slice(
-    6,
-    10
-  )}`;
-};
-
-export const zipCode = (value) => {
-  if (!value) {
-    return value;
-  }
-  const onlyNums = value.replace(/[^\d]/g, '');
-  if (onlyNums.length > 5) {
-    return onlyNums.substring(0, 5) + '-' + onlyNums.substring(5, 9);
-  }
-  return onlyNums;
-};
+export const phoneNumber = (value) => {
+  if (!value) {
+    return value;
+  }
+
+  const onlyNums = value.replace(/[^\d]/g, '');
+  if (onlyNums.length <= 3) {
+    return onlyNums;
+  }
+  if (onlyNums.length <= 7) {
+    return `${onlyNums.slice(0, 3)}-${onlyNums.slice(3)}`;
+  }
+  if (onlyNums.length <= 10) {
+    return `${onlyNums.slice(0, 3)}-${onlyNums.slice(3, 6)}-${onlyNums.slice(
+      6,
+      10
+    )}`;
+  }
+  if (onlyNums.length <= 13) {
+    const countryCodeLength = onlyNums - 10;
+    return `+${onlyNums.slice(0, countryCodeLength)} ${onlyNums.slice(
+      countryCodeLength,
+      3 + countryCodeLength
+    )}-${onlyNums.slice(
+      3 + countryCodeLength,
+      6 + countryCodeLength
+    )}-${onlyNums.slice(6 + countryCodeLength, onlyNums.length)}`;
+  }
+
+  return onlyNums;
+};
+
+export const zipCode = (value) => {
+  if (!value) {
+    return value;
+  }
+  const onlyNums = value.replace(/[^\d]/g, '');
+  if (onlyNums.length > 5) {
+    return onlyNums.substring(0, 5) + '-' + onlyNums.substring(5, 9);
+  }
+  return onlyNums;
+};

package/src/selectors.js

@@ -1,3 +1,3 @@
-export const getForm = (state, ownProps) => state.form[ownProps.form];
-export const getRegisteredFields = (state, ownProps) =>
-  getForm(state, ownProps) ? getForm(state, ownProps).registeredFields : {};
+export const getForm = (state, ownProps) => state.form[ownProps.form];
+export const getRegisteredFields = (state, ownProps) =>
+  getForm(state, ownProps) ? getForm(state, ownProps).registeredFields : {};

package/src/styles.scss

@@ -1,7 +1,7 @@
-@use './DatePickerInput/date-picker-input.scss';
-@use './InlineFormInput/inline-form-input.scss';
-@use './MoneyInput/money-input.scss';
-@use './FormInput/form-input.scss';
-@use './FileInput/file-input.scss';
-@use './FormInputArray/form-input-array.scss';
-@use './ReactSelectField/react-select-field.scss';
+@use './DatePickerInput/date-picker-input.scss';
+@use './InlineFormInput/inline-form-input.scss';
+@use './MoneyInput/money-input.scss';
+@use './FormInput/form-input.scss';
+@use './FileInput/file-input.scss';
+@use './FormInputArray/form-input-array.scss';
+@use './ReactSelectField/react-select-field.scss';

package/src/useStandardFormInput.js

@@ -1,118 +1,118 @@
-import { useField, useFormikContext } from 'formik';
-import { useContext, useEffect } from 'react';
-import NestedFormFieldContext from './NestedFormFieldContext';
-import { ServerErrorContext } from './Form';
-
-// provides a consistent way to deal with all form fields (non array)
-export default function useStandardFormInput({
-  id: providedId,
-  name: providedName,
-  disabled,
-  validate,
-  normalize,
-  ...props
-}) {
-  // because the formik errors are evaluated all at the same time we need to keep server errors separate
-  const { getError: getServerError, setError: setServerError } = useContext(
-    ServerErrorContext
-  );
-
-  // ensure that form section values are obeyed, e.g. homeAddress.zipCode
-  const parentFormFieldContext = useContext(NestedFormFieldContext);
-  const name = parentFormFieldContext
-    ? `${parentFormFieldContext}.${providedName}`
-    : providedName;
-
-  // ensure that nested contexts don't have duplicate id issues when an id is specified
-  const id =
-    providedId && parentFormFieldContext
-      ? `${parentFormFieldContext}.${providedId}`
-      : providedId;
-
-  // ensure that our custom validation rules are handled
-  // e.g. we allow arrays of validators
-  const [{ onChange: formikOnChange, value, ...formikProps }, meta] = useField(
-    Object.assign({ name, id }, props, {
-      validate: callAllValidators,
-    })
-  );
-  const { setFieldValue, isSubmitting } = useFormikContext();
-
-  // these are the props we expect consumers of this hook to pass directly to the input (or other control)
-  const inputProps = Object.assign({}, props, formikProps, {
-    // ensure that we don't send a undefined / null - which signals to react that we are uncontrolled
-    // also, pass any direct from server props through normalize without making the form dirty (e.g. phone number)
-    value:
-      value === undefined || value === null
-        ? ''
-        : (normalize && normalize(value)) || value,
-    // ensure the id is set if not provided
-    id: id ? id : name,
-    // ensure we can handle both events from direct inputs and controlled ones like react select AND normalize
-    onChange: handleChange,
-    onBlur: handleBlur,
-    disabled: disabled,
-  });
-
-  useEffect(() => {
-    if (!meta.touched && isSubmitting) {
-      // because we do not always register all fields up front.
-      // e.g. formik expects even a 'create' form to have all fields given, at least, blank values
-      // that seems to be how it touches on submit:
-      // see: https://codesandbox.io/s/formik-example-4n7n8 vs https://codesandbox.io/s/formik-example-kttk5
-      // note in particular the change in line 24
-      // thus, we manually touch all fields here by calling onBlur
-      // there is a "setFieldTouched" from useFormikContext but it doesn't appear to work on field arrays
-      handleBlur();
-    }
-  });
-
-  const resultMeta = Object.assign({}, meta, {
-    error: getServerError(name) || (meta.touched ? meta.error : null),
-  });
-
-  return [inputProps, resultMeta];
-
-  function handleBlur(e) {
-    // some components are fully controlled and do not return synthetic events on blur
-    if (!e || !e.target) {
-      formikProps.onBlur({ target: { name: name } });
-    } else {
-      formikProps.onBlur(e);
-    }
-  }
-
-  function handleChange(e) {
-    if (disabled) {
-      return;
-    }
-    // some components are fully controlled and do not return synthetic events (e.g. ReactSelect) on change
-    // we should handle all our normal cases here to normalize / get the value / etc
-    const value =
-      e && e.target
-        ? e.target.type === 'checkbox'
-          ? e.target.checked
-          : e.target.value
-        : e;
-    const normalized = normalize ? normalize(value) : value;
-    setFieldValue(name, normalized);
-    setServerError(name, null);
-  }
-
-  function callAllValidators(value) {
-    if (disabled || !validate) {
-      return;
-    }
-
-    if (!Array.isArray(validate)) {
-      return validate(value);
-    }
-
-    for (let i = 0; i < validate.length; i++) {
-      const result = validate[i](value);
-      if (result) {
-        return result;
-      }
-    }
-  }
-}
+import { useField, useFormikContext } from 'formik';
+import { useContext, useEffect } from 'react';
+import NestedFormFieldContext from './NestedFormFieldContext';
+import { ServerErrorContext } from './Form';
+
+// provides a consistent way to deal with all form fields (non array)
+export default function useStandardFormInput({
+  id: providedId,
+  name: providedName,
+  disabled,
+  validate,
+  normalize,
+  ...props
+}) {
+  // because the formik errors are evaluated all at the same time we need to keep server errors separate
+  const { getError: getServerError, setError: setServerError } = useContext(
+    ServerErrorContext
+  );
+
+  // ensure that form section values are obeyed, e.g. homeAddress.zipCode
+  const parentFormFieldContext = useContext(NestedFormFieldContext);
+  const name = parentFormFieldContext
+    ? `${parentFormFieldContext}.${providedName}`
+    : providedName;
+
+  // ensure that nested contexts don't have duplicate id issues when an id is specified
+  const id =
+    providedId && parentFormFieldContext
+      ? `${parentFormFieldContext}.${providedId}`
+      : providedId;
+
+  // ensure that our custom validation rules are handled
+  // e.g. we allow arrays of validators
+  const [{ onChange: formikOnChange, value, ...formikProps }, meta] = useField(
+    Object.assign({ name, id }, props, {
+      validate: callAllValidators,
+    })
+  );
+  const { setFieldValue, isSubmitting } = useFormikContext();
+
+  // these are the props we expect consumers of this hook to pass directly to the input (or other control)
+  const inputProps = Object.assign({}, props, formikProps, {
+    // ensure that we don't send a undefined / null - which signals to react that we are uncontrolled
+    // also, pass any direct from server props through normalize without making the form dirty (e.g. phone number)
+    value:
+      value === undefined || value === null
+        ? ''
+        : (normalize && normalize(value)) || value,
+    // ensure the id is set if not provided
+    id: id ? id : name,
+    // ensure we can handle both events from direct inputs and controlled ones like react select AND normalize
+    onChange: handleChange,
+    onBlur: handleBlur,
+    disabled: disabled,
+  });
+
+  useEffect(() => {
+    if (!meta.touched && isSubmitting) {
+      // because we do not always register all fields up front.
+      // e.g. formik expects even a 'create' form to have all fields given, at least, blank values
+      // that seems to be how it touches on submit:
+      // see: https://codesandbox.io/s/formik-example-4n7n8 vs https://codesandbox.io/s/formik-example-kttk5
+      // note in particular the change in line 24
+      // thus, we manually touch all fields here by calling onBlur
+      // there is a "setFieldTouched" from useFormikContext but it doesn't appear to work on field arrays
+      handleBlur();
+    }
+  });
+
+  const resultMeta = Object.assign({}, meta, {
+    error: getServerError(name) || (meta.touched ? meta.error : null),
+  });
+
+  return [inputProps, resultMeta];
+
+  function handleBlur(e) {
+    // some components are fully controlled and do not return synthetic events on blur
+    if (!e || !e.target) {
+      formikProps.onBlur({ target: { name: name } });
+    } else {
+      formikProps.onBlur(e);
+    }
+  }
+
+  function handleChange(e) {
+    if (disabled) {
+      return;
+    }
+    // some components are fully controlled and do not return synthetic events (e.g. ReactSelect) on change
+    // we should handle all our normal cases here to normalize / get the value / etc
+    const value =
+      e && e.target
+        ? e.target.type === 'checkbox'
+          ? e.target.checked
+          : e.target.value
+        : e;
+    const normalized = normalize ? normalize(value) : value;
+    setFieldValue(name, normalized);
+    setServerError(name, null);
+  }
+
+  function callAllValidators(value) {
+    if (disabled || !validate) {
+      return;
+    }
+
+    if (!Array.isArray(validate)) {
+      return validate(value);
+    }
+
+    for (let i = 0; i < validate.length; i++) {
+      const result = validate[i](value);
+      if (result) {
+        return result;
+      }
+    }
+  }
+}

package/src/utils/index.js

@@ -1,3 +1,3 @@
-import objectToFormData from './objectToFormData';
-import objectContainsNonSerializableProperty from './objectContainsNonSerializableProperty';
-export { objectToFormData, objectContainsNonSerializableProperty };
+import objectToFormData from './objectToFormData';
+import objectContainsNonSerializableProperty from './objectContainsNonSerializableProperty';
+export { objectToFormData, objectContainsNonSerializableProperty };

package/src/utils/objectContainsNonSerializableProperty.js

@@ -1,15 +1,15 @@
-import { isObject, isBlob, isFile } from './typeChecks';
-
-export default function objectContainsNonSerializableProperty(object) {
-  return Object.entries(object).some((value) => {
-    if (value) {
-      if (isBlob(value[1]) || isFile(value[1])) {
-        return true;
-      }
-      if (isObject(value[1])) {
-        return objectContainsNonSerializableProperty(value[1]);
-      }
-    }
-    return false;
-  });
-}
+import { isObject, isBlob, isFile } from './typeChecks';
+
+export default function objectContainsNonSerializableProperty(object) {
+  return Object.entries(object).some((value) => {
+    if (value) {
+      if (isBlob(value[1]) || isFile(value[1])) {
+        return true;
+      }
+      if (isObject(value[1])) {
+        return objectContainsNonSerializableProperty(value[1]);
+      }
+    }
+    return false;
+  });
+}

package/src/utils/objectContainsNonSerializableProperty.test.js

@@ -1,49 +1,49 @@
-import check from './objectContainsNonSerializableProperty';
-
-describe('Object contains non serializable property checker', () => {
-  it('Should return true for simple object', () => {
-    const object = {
-      name: 'Bob',
-      age: 20,
-      favoriteFoods: ['Hamburger', 'Pizza'],
-      homeAddress: {
-        addressLine1: '12345 Test Place',
-        addressLine2: null,
-        city: 'SomePlace',
-        state: 'LA',
-        zip: 12345,
-      },
-    };
-
-    const result = check(object);
-    expect(result).toBe(false);
-  });
-
-  it('Should return false for direct file property', () => {
-    const object = {
-      name: 'Bob',
-      age: 20,
-      profilePhoto: new File(['foo'], 'foo.txt', {
-        type: 'text/plain',
-      }),
-    };
-
-    const result = check(object);
-    expect(result).toBe(true);
-  });
-
-  it('Should return false for deeply nested file property', () => {
-    const object = {
-      a: {
-        b: {
-          c: new File(['foo'], 'foo.txt', {
-            type: 'text/plain',
-          }),
-        },
-      },
-    };
-
-    const result = check(object);
-    expect(result).toBe(true);
-  });
-});
+import check from './objectContainsNonSerializableProperty';
+
+describe('Object contains non serializable property checker', () => {
+  it('Should return true for simple object', () => {
+    const object = {
+      name: 'Bob',
+      age: 20,
+      favoriteFoods: ['Hamburger', 'Pizza'],
+      homeAddress: {
+        addressLine1: '12345 Test Place',
+        addressLine2: null,
+        city: 'SomePlace',
+        state: 'LA',
+        zip: 12345,
+      },
+    };
+
+    const result = check(object);
+    expect(result).toBe(false);
+  });
+
+  it('Should return false for direct file property', () => {
+    const object = {
+      name: 'Bob',
+      age: 20,
+      profilePhoto: new File(['foo'], 'foo.txt', {
+        type: 'text/plain',
+      }),
+    };
+
+    const result = check(object);
+    expect(result).toBe(true);
+  });
+
+  it('Should return false for deeply nested file property', () => {
+    const object = {
+      a: {
+        b: {
+          c: new File(['foo'], 'foo.txt', {
+            type: 'text/plain',
+          }),
+        },
+      },
+    };
+
+    const result = check(object);
+    expect(result).toBe(true);
+  });
+});