envoc-form 5.0.9 → 6.0.1-1

package/src/__Tests__/RealisticForm.test.tsx

@@ -1,82 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import user from '@testing-library/user-event';
-import FormTestBase from './FormTestBase';
-import { Form, StringInputGroup, ValidatedApiResult } from '../';
-import { PersonDto } from '../__Tests__/FormTestBase';
-import StandardFormActions from '../StandardFormActions';
-import { validators } from '../';
-
-const handleSubmitMock = jest.fn((value: PersonDto | FormData) => {
-  //return value;
-  return new Promise<ValidatedApiResult>((res, rej) => {
-    setTimeout(() => {
-      res({});
-    }, 15);
-  });
-});
-
-describe('Realistic Form', () => {
-  it('Validates, resolves validation, submits values', async () => {
-    global.scrollTo = jest.fn();
-    const fullForm = (
-      <FormTestBase handleSubmit={handleSubmitMock}>
-        {({ Field }) => (
-          <>
-            <Field name="name" label="name" Component={StringInputGroup} />
-            <Field
-              name="nameWithIcon"
-              label="Name with Icon"
-              Component={StringInputGroup}
-              validate={validators.required}
-            />
-            <StandardFormActions />
-            <Form.DisplayFormState />
-          </>
-        )}
-      </FormTestBase>
-    );
-
-    render(fullForm);
-    const nameInput = screen.getByLabelText('name');
-    const formSubmitButton = screen.getByRole('button', {
-      name: 'Submit',
-    });
-    //The form should start off with the submit button disabled
-    expect(formSubmitButton).toBeDisabled();
-
-    //Enter a name into the name input
-    user.click(nameInput);
-    user.type(nameInput, 'Travis Overmier');
-    expect(nameInput).toHaveValue('Travis Overmier');
-
-    //Submit should be enabled, click submit
-    expect(formSubmitButton).toBeEnabled();
-    user.click(formSubmitButton);
-
-    //Submit should disable while 'submitting' then re-enable
-    expect(formSubmitButton).toBeDisabled();
-    await waitFor(() => {
-      expect(formSubmitButton).toBeEnabled();
-    });
-
-    //Validation message should appear
-    const nameWithIconInput = screen.getByLabelText('Name with Icon');
-    expect(nameWithIconInput).toHaveErrorMessage('Required');
-
-    //Fill in field, error message goes away
-    user.type(nameWithIconInput, 'Kyle Joiner');
-    user.tab();
-    await waitFor(() => {
-      expect(nameWithIconInput).not.toHaveErrorMessage();
-    });
-
-    //Click the submit button
-    user.click(formSubmitButton);
-    await waitFor(() => {
-      expect(handleSubmitMock).toHaveBeenCalled();
-      expect(JSON.stringify(handleSubmitMock.mock.calls[0][0])).toBe(
-        `{"name":"Travis Overmier","nameWithIcon":"Kyle Joiner"}`
-      );
-    });
-  });
-});

package/src/__Tests__/StandardFormActions.test.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import FormTestBase from './FormTestBase';
-import StandardFormActions from '../StandardFormActions';
-
-describe('StandardFormActions', () => {
-  it('renders without crashing', () => {
-    render(<FormTestBase>{() => <StandardFormActions />}</FormTestBase>);
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>{() => <StandardFormActions />}</FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});

package/src/__Tests__/SubmitFormButton.test.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import FormTestBase from './FormTestBase';
-import SubmitFormButton from '../SubmitFormButton';
-
-describe('SubmitFormButton', () => {
-  it('renders without crashing', () => {
-    render(<FormTestBase>{() => <SubmitFormButton />}</FormTestBase>);
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>{() => <SubmitFormButton />}</FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});

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

@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StandardFormActions has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-    class="envoc-form-form"
-  >
-    <button
-      aria-label="Submit"
-      class="envoc-form-submit-form-button"
-      disabled=""
-      title="You haven't made any changes"
-      type="submit"
-    >
-      Submit
-    </button>
-     
-    <button
-      class="envoc-form-standard-form-actions-cancel-button"
-      type="button"
-    >
-      Cancel
-    </button>
-  </form>
-</DocumentFragment>
-`;

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

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

package/src/__Tests__/index.ts

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

package/src/_variables.scss

@@ -1,11 +0,0 @@
-//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.ts

@@ -1,163 +0,0 @@
-// Address
-export { default as AddressInput } from './AddressInput/AddressInput';
-export type { AddressInputProps } from './AddressInput/AddressInput';
-
-// Button
-export { default as SubmitFormButton } from './SubmitFormButton';
-export type { SubmitFormButtonProps } from './SubmitFormButton';
-
-// ConfirmBaseForm
-export { default as ConfirmBaseForm } from './ConfirmBaseForm/ConfirmBaseForm';
-export type { ConfirmBaseFormProps } from './ConfirmBaseForm/ConfirmBaseForm';
-
-// ConfirmDeleteForm
-export { default as ConfirmDeleteForm } from './ConfirmDeleteForm/ConfirmDeleteForm';
-export type { ConfirmDeleteFormProps } from './ConfirmDeleteForm/ConfirmDeleteForm';
-
-// Date
-export { default as DatePickerGroup } from './DatePicker/DatePickerGroup';
-export type { DatePickerGroupProps } from './DatePicker/DatePickerGroup';
-export { convertToTimeZoneInsensitiveISOString } from './DatePicker/DatePickerGroup';
-
-export type { DatePickerHelper } from './DatePicker/DatePickerHelper';
-
-export { default as StringDatePickerGroup } from './DatePicker/StringDatePickerGroup';
-export type { StringDatePickerGroupProps } from './DatePicker/StringDatePickerGroup';
-
-export { default as StringDateOnlyPickerGroup } from './DatePicker/StringDateOnlyPickerGroup';
-export type { StringDateOnlyPickerGroupProps } from './DatePicker/StringDateOnlyPickerGroup';
-
-// DateTime
-export { default as DateTimePickerGroup } from './DateTimePicker/DateTimePickerGroup';
-export type { DateTimePickerGroupProps } from './DateTimePicker/DateTimePickerGroup';
-
-export { default as StringDateTimePickerGroup } from './DateTimePicker/StringDateTimePickerGroup';
-export type { StringDateTimePickerGroupProps } from './DateTimePicker/StringDateTimePickerGroup';
-
-// Field
-export { default as Field } from './Field/Field';
-export type { FieldProps } from './Field/Field';
-
-export type { RenderComponent } from './Field/Field';
-export type { RenderComponentProps } from './Field/Field';
-
-export { default as FieldErrorScrollTarget } from './Field/FieldErrorScrollTarget';
-
-export { FieldNameContext } from './Field/FieldNameContext';
-
-export type { InjectedFieldProps } from './Field/InjectedFieldProps';
-
-export { default as StandAloneInput } from './Field/StandAloneInput';
-
-export type { StandAloneInputProps } from './Field/StandAloneInput';
-
-export { default as useStandardField } from './Field/useStandardField';
-export type { useStandardFieldProps } from './Field/useStandardField';
-
-// Field Array
-export { default as FieldArray } from './FieldArray/FieldArray';
-export type {
-  FieldArrayProps,
-  ArrayFormBuilderProp,
-} from './FieldArray/FieldArray';
-
-// File
-export { default as FileGroup } from './File/FileGroup';
-export type { FileGroupProps } from './File/FileGroup';
-
-// Form
-export { default as Form } from './Form/Form';
-export type { FormBuilderProp, FormProps } from './Form/Form';
-export { ServerErrorContext } from './Form/ServerErrorContext';
-export type {
-  ServerErrorContextProps,
-  ServerErrors,
-} from './Form/ServerErrorContext';
-
-export { default as FormActions } from './FormActions';
-export type { FormActionsProps } from './FormActions';
-
-export { default as StandardFormActions } from './StandardFormActions';
-export type { StandardFormActionsProps } from './StandardFormActions';
-
-// FormDefaults
-export { FormDefaults } from './FormDefaults';
-
-// Input
-export { default as Group } from './Group';
-export type { GroupProps } from './Group';
-
-export { default as IconInputGroup } from './Input/IconInputGroup';
-export type { IconInputGroupProps } from './Input/IconInputGroup';
-
-export { default as InputGroup } from './Input/InputGroup';
-export type { InputGroupProps } from './Input/InputGroup';
-
-export { default as MoneyInputGroup } from './Input/MoneyInputGroup';
-export type { MoneyInputGroupProps } from './Input/MoneyInputGroup';
-
-export { default as NumberInputGroup } from './Input/NumberInputGroup';
-export type { NumberInputGroupProps } from './Input/NumberInputGroup';
-
-export { default as PhoneNumberInputGroup } from './Input/PhoneNumberInputGroup';
-export type { PhoneNumberInputGroupProps } from './Input/PhoneNumberInputGroup';
-
-export { default as StringInputGroup } from './Input/StringInputGroup';
-export type { StringInputGroupProps } from './Input/StringInputGroup';
-
-// Normalization
-export type { NormalizationFunction } from './Normalization/NormalizationFunction';
-export * as normalizers from './Normalization/normalizers';
-
-// Select
-export { default as SelectGroup } from './Select/SelectGroup';
-export type { SelectGroupProps, SelectOption } from './Select/SelectGroup';
-
-export { BooleanSelectGroup } from './Select/BooleanSelectGroup';
-export type { BooleanSelectGroupProps } from './Select/BooleanSelectGroup';
-
-export { default as CheckboxInputGroup } from './Input/CheckboxInputGroup';
-export type { CheckboxInputGroupProps } from './Input/CheckboxInputGroup';
-
-export {
-  MultiNumberSelectGroup,
-  SingleNumberSelectGroup,
-} from './Select/NumberSelectGroup';
-export type {
-  MultiNumberSelectGroupProps,
-  SingleNumberSelectGroupProps,
-} from './Select/NumberSelectGroup';
-
-export type { SelectGroupPropsHelper } from './Select/SelectGroupPropsHelper';
-
-export {
-  MultiStringSelectGroup,
-  SingleStringSelectGroup,
-} from './Select/StringSelectGroup';
-export type {
-  MultiStringSelectGroupProps,
-  SingleStringSelectGroupProps,
-} from './Select/StringSelectGroup';
-
-// Text Area
-
-export { default as TextAreaGroup } from './TextArea/TextAreaGroup';
-
-export type { TextAreaGroupProps } from './TextArea/TextAreaGroup';
-
-// Utils
-export { default as objectContainsNonSerializableProperty } from './utils/objectContainsNonSerializableProperty';
-
-export { default as serialize } from './utils/objectToFormData';
-export type { ObjectToFormDataCfgProps } from './utils/objectToFormData';
-
-export * from './utils/typeChecks';
-
-// Validation
-export type { ValidatedApiResult } from './Validation/ValidatedApiResult';
-
-export type { ValidationError } from './Validation/ValidationError';
-
-export type { ValidationFunction } from './Validation/ValidationFunction';
-
-export * as validators from './Validation/validators';

package/src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

package/src/setupTests.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';

package/src/utils/objectContainsNonSerializableProperty.test.tsx

@@ -1,49 +0,0 @@
-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);
-  });
-});

package/src/utils/objectContainsNonSerializableProperty.ts

@@ -1,17 +0,0 @@
-import { isBlob, isFile, isObject } from './typeChecks';
-
-export default function objectContainsNonSerializableProperty(
-  object: any
-): boolean {
-  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/objectToFormData.test.tsx

@@ -1,76 +0,0 @@
-import serialize from './objectToFormData';
-
-const options = {
-  indices: true,
-  dotNotation: true,
-  allowEmptyArrays: true,
-  noFileListBrackets: true,
-};
-
-const formDataAppend = global.FormData.prototype.append;
-
-beforeEach(() => {
-  global.FormData.prototype.append = jest.fn(formDataAppend) as any;
-});
-
-describe('Object To Form Data', () => {
-  it('properly serializes a simple object', () => {
-    const object = {
-      name: 'Bob',
-      age: 20,
-    };
-
-    const result = serialize(object, options);
-    expect(result.get('name')).toBe(object.name);
-    expect(result.get('age')).toBe('20');
-  });
-
-  it('properly serializes an object with a non-file array property', () => {
-    const object = {
-      name: 'Bob',
-      age: 20,
-      favoriteFoods: ['Hamburger', 'Pizza'],
-    };
-
-    const result = serialize(object, options);
-    expect(result.get('name')).toBe(object.name);
-    expect(result.has('favoriteFoods[0]')).toBe(true);
-    expect(result.get('favoriteFoods[0]')).toBe('Hamburger');
-    expect(result.has('favoriteFoods[1]')).toBe(true);
-    expect(result.get('favoriteFoods[1]')).toBe('Pizza');
-  });
-
-  it('properly serializes a file in a form', () => {
-    const object = {
-      a: new File(['foo'], 'foo.txt', {
-        type: 'text/plain',
-      }),
-    };
-
-    const result = serialize(object, options);
-    expect(result.has('a')).toBe(true);
-    expect(result.get('a')).toBeInstanceOf(File);
-  });
-
-  it('properly serializes an object with a file array property', () => {
-    const foo = new File(['foo'], 'foo.txt', {
-      type: 'text/plain',
-    });
-    const bar = new File(['bar'], 'bar.txt', {
-      type: 'text/plain',
-    });
-    const object = {
-      fileArray: [foo, bar],
-    };
-
-    const result = serialize(object, options);
-    expect(result.append).toHaveBeenCalledTimes(2);
-    expect(result.append).toHaveBeenNthCalledWith(1, 'fileArray', foo);
-    expect(result.append).toHaveBeenNthCalledWith(2, 'fileArray', bar);
-    expect(result.has('fileArray[]')).toBe(false);
-    expect(result.has('fileArray[0]')).toBe(false);
-    expect(result.has('fileArray[1]')).toBe(false);
-    expect(result.has('fileArray')).toBe(true);
-    expect(result.getAll('fileArray')).toEqual(object.fileArray);
-  });
-});

package/src/utils/objectToFormData.ts

@@ -1,105 +0,0 @@
-// Original: https://github.com/therealparmesh/object-to-formdata/blob/master/src/index.js
-// With Multiple Form File Fix: https://github.com/therealparmesh/object-to-formdata/pull/94/files
-import {
-  isArray,
-  isBlob,
-  isBoolean,
-  isDate,
-  isFile,
-  isNull,
-  isObject,
-  isUndefined,
-} from './typeChecks';
-
-// TODO: make all of these optional?
-export interface ObjectToFormDataCfgProps {
-  indices: boolean;
-  dotNotation: boolean;
-  allowEmptyArrays: boolean;
-  noFileListBrackets: boolean;
-  nullsAsUndefineds?: boolean;
-  booleansAsIntegers?: boolean;
-}
-
-// 'pre' is not provided until this function recursively calls itself when 'obj' is an array or object
-const serialize = (
-  obj: any,
-  cfg: ObjectToFormDataCfgProps,
-  fd?: FormData,
-  pre?: string
-) => {
-  cfg = cfg || {};
-
-  cfg.indices = isUndefined(cfg.indices) ? false : cfg.indices;
-
-  cfg.nullsAsUndefineds = isUndefined(cfg.nullsAsUndefineds)
-    ? false
-    : cfg.nullsAsUndefineds;
-
-  cfg.booleansAsIntegers = isUndefined(cfg.booleansAsIntegers)
-    ? false
-    : cfg.booleansAsIntegers;
-
-  cfg.allowEmptyArrays = isUndefined(cfg.allowEmptyArrays)
-    ? false
-    : cfg.allowEmptyArrays;
-
-  //reverse of normal because we want a different default
-  cfg.dotNotation = isUndefined(cfg.dotNotation) ? true : cfg.dotNotation;
-
-  fd = fd || new FormData();
-
-  if (isUndefined(obj)) {
-    return fd;
-  } else if (isNull(obj) && !!pre) {
-    if (!cfg.nullsAsUndefineds) {
-      fd.append(pre, '');
-    }
-  } else if (isBoolean(obj) && !!pre) {
-    if (cfg.booleansAsIntegers) {
-      fd.append(pre, obj ? '1' : '0');
-    } else {
-      fd.append(pre, obj);
-    }
-  } else if (isDate(obj) && !!pre) {
-    fd.append(pre, obj.toISOString());
-  } else if (isArray(obj)) {
-    if (obj.length) {
-      obj.forEach((value: any, index: number) => {
-        let key;
-        if (cfg.noFileListBrackets && isFile(value)) {
-          key = pre;
-        } else {
-          key = pre + '[' + (cfg.indices ? index : '') + ']';
-        }
-        serialize(value, cfg, fd, key);
-      });
-    } else if (cfg.allowEmptyArrays) {
-      fd.append(pre + '[]', '');
-    }
-  } else if (isObject(obj) && !isFile(obj) && !isBlob(obj)) {
-    Object.keys(obj).forEach((prop) => {
-      const value = obj[prop];
-
-      if (isArray(value)) {
-        while (prop.length > 2 && prop.lastIndexOf('[]') === prop.length - 2) {
-          prop = prop.substring(0, prop.length - 2);
-        }
-      }
-
-      const key = pre
-        ? cfg.dotNotation
-          ? pre + '.' + prop
-          : pre + '[' + prop + ']'
-        : prop;
-
-      serialize(value, cfg, fd, key);
-    });
-  } else if (!!pre) {
-    fd.append(pre, obj);
-  }
-
-  return fd;
-};
-
-export default serialize;

package/src/utils/typeChecks.ts

@@ -1,18 +0,0 @@
-export const isUndefined = (value: any) => value === undefined;
-export const isNull = (value: any) => value === null;
-export const isBoolean = (value: any) => typeof value === 'boolean';
-export const isObject = (value: any) => value === Object(value);
-export const isArray = (value: any) => Array.isArray(value);
-export const isDate = (value: any) => value instanceof Date;
-
-export const isBlob = (value: any) =>
-  value &&
-  typeof value.size === 'number' &&
-  typeof value.type === 'string' &&
-  typeof value.slice === 'function';
-
-export const isFile = (value: any) =>
-  isBlob(value) &&
-  typeof value.name === 'string' &&
-  (typeof value.lastModifiedDate === 'object' ||
-    typeof value.lastModified === 'number');