envoc-form 3.3.0 → 4.0.1-0

package/src/Select/__tests__/__snapshots__/StringSelectGroup.test.tsx.snap

@@ -0,0 +1,197 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MultiStringSelectGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="multiple select-group group"
+    >
+      <div
+        id="favoritecolors-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="favoriteColors"
+      >
+        Favorite Color
+      </label>
+      <div
+        class="select-group css-b62m3t-container"
+      >
+        <span
+          class="css-1f43avz-a11yText-A11yText"
+          id="react-select-5-live-region"
+        />
+        <span
+          aria-atomic="false"
+          aria-live="polite"
+          aria-relevant="additions text"
+          class="css-1f43avz-a11yText-A11yText"
+        />
+        <div
+          class="react-select__control css-1s2u09g-control"
+        >
+          <div
+            class="react-select__value-container react-select__value-container--is-multi css-dlobye-Component"
+          >
+            <div
+              class="react-select__placeholder css-14el2xx-placeholder"
+              id="react-select-5-placeholder"
+            >
+              Select...
+            </div>
+            <div
+              class="react-select__input-container css-1u4kn00-Component"
+              data-value=""
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="react-select-5-listbox"
+                aria-describedby="react-select-5-placeholder"
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-owns="react-select-5-listbox"
+                autocapitalize="none"
+                autocomplete="off"
+                autocorrect="off"
+                class="react-select__input"
+                id="favoriteColors"
+                role="combobox"
+                spellcheck="false"
+                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                tabindex="0"
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+          <div
+            class="react-select__indicators css-ny0e4k-Component"
+          >
+            <span
+              class="react-select__indicator-separator css-1okebmr-indicatorSeparator"
+            />
+            <div
+              aria-hidden="true"
+              class="react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer"
+            >
+              <svg
+                aria-hidden="true"
+                class="css-tj5bde-Svg"
+                focusable="false"
+                height="20"
+                viewBox="0 0 20 20"
+                width="20"
+              >
+                <path
+                  d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+</DocumentFragment>
+`;
+
+exports[`SingleStringSelectGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="select-group group"
+    >
+      <div
+        id="favoritecolor-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="favoriteColor"
+      >
+        Favorite Color
+      </label>
+      <div
+        class="select-group css-b62m3t-container"
+      >
+        <span
+          class="css-1f43avz-a11yText-A11yText"
+          id="react-select-3-live-region"
+        />
+        <span
+          aria-atomic="false"
+          aria-live="polite"
+          aria-relevant="additions text"
+          class="css-1f43avz-a11yText-A11yText"
+        />
+        <div
+          class="react-select__control css-1s2u09g-control"
+        >
+          <div
+            class="react-select__value-container css-dlobye-Component"
+          >
+            <div
+              class="react-select__placeholder css-14el2xx-placeholder"
+              id="react-select-3-placeholder"
+            >
+              Select...
+            </div>
+            <div
+              class="react-select__input-container css-1u4kn00-Component"
+              data-value=""
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="react-select-3-listbox"
+                aria-describedby="react-select-3-placeholder"
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-owns="react-select-3-listbox"
+                autocapitalize="none"
+                autocomplete="off"
+                autocorrect="off"
+                class="react-select__input"
+                id="favoriteColor"
+                role="combobox"
+                spellcheck="false"
+                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                tabindex="0"
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+          <div
+            class="react-select__indicators css-ny0e4k-Component"
+          >
+            <span
+              class="react-select__indicator-separator css-1okebmr-indicatorSeparator"
+            />
+            <div
+              aria-hidden="true"
+              class="react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer"
+            >
+              <svg
+                aria-hidden="true"
+                class="css-tj5bde-Svg"
+                focusable="false"
+                height="20"
+                viewBox="0 0 20 20"
+                width="20"
+              >
+                <path
+                  d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+</DocumentFragment>
+`;

package/src/{StandardFormActions.js → StandardFormActions.tsx}

@@ -1,24 +1,30 @@
-import React from 'react';
-import { Button } from 'reactstrap';
+import { MouseEventHandler } from 'react';
+import classNames from 'classnames';
 import { useFormikContext } from 'formik';
 import SubmitFormButton from './SubmitFormButton';
 
+export interface StandardFormActionsProps {
+  allowPristineSubmit?: boolean;
+  handleCancel?: MouseEventHandler<HTMLButtonElement>;
+}
+
 export default function StandardFormActions({
   allowPristineSubmit,
   handleCancel,
-}) {
+}: StandardFormActionsProps) {
   const { isSubmitting } = useFormikContext();
+
   return (
     <>
       <SubmitFormButton allowPristineSubmit={allowPristineSubmit} />
       &nbsp;
-      <Button
+      <button
+        className={classNames('standard-form-actions-cancel-button')}
         type="button"
-        color="link"
         disabled={isSubmitting}
         onClick={handleCancel || goBack}>
         Cancel
-      </Button>
+      </button>
     </>
   );
   function goBack() {

package/src/SubmitFormButton.tsx

@@ -0,0 +1,44 @@
+import React, { LegacyRef } from 'react';
+import classNames from 'classnames';
+import { useFormikContext } from 'formik';
+
+export interface SubmitFormButtonProps
+  extends Omit<React.HTMLProps<HTMLButtonElement>, 'type'> {
+  allowPristineSubmit?: boolean;
+  children?: React.ReactNode;
+}
+function SubmitFormButton(
+  {
+    allowPristineSubmit,
+    children,
+    disabled,
+    title,
+    className,
+    ...props
+  }: SubmitFormButtonProps,
+  ref: LegacyRef<HTMLButtonElement>
+) {
+  const { isSubmitting, dirty } = useFormikContext();
+  const preventSubmit = (!dirty && !allowPristineSubmit) || isSubmitting;
+  return (
+    <button
+      {...props}
+      ref={ref}
+      type="submit"
+      disabled={preventSubmit || disabled}
+      title={
+        title || isSubmitting
+          ? 'Loading, please wait...'
+          : preventSubmit
+          ? "You haven't made any changes"
+          : ''
+      }
+      className={classNames('submit-form-button', className)}>
+      {children || 'Submit'}
+    </button>
+  );
+}
+
+export default React.forwardRef(
+  SubmitFormButton
+) as React.ComponentType<SubmitFormButtonProps>;

package/src/Validation/ValidatedApiResult.ts

@@ -0,0 +1,8 @@
+import { ValidationError } from './ValidationError';
+
+// TODO: this means that all template projects MUST have this API shape - thoughts?
+/** The root result from a typical envoc API call when forms are returned */
+export interface ValidatedApiResult {
+  validationFailures?: ValidationError[];
+  hasErrors?: boolean;
+}

package/src/Validation/ValidationError.ts

@@ -0,0 +1,6 @@
+// TODO: this means that all template projects MUST have this API shape - thoughts?
+/** Represents a server side validation failure - only 'standard' for envoc */
+export interface ValidationError {
+  propertyName?: string;
+  errorMessage?: string;
+}

package/src/Validation/ValidationFunction.ts

@@ -0,0 +1,4 @@
+/** Client side validation function */
+export interface ValidationFunction<TValue> {
+  (value: TValue): string | undefined;
+}

package/src/{validators/validators.test.js → Validation/validators.test.tsx}

@@ -2,12 +2,12 @@ import { integer, length, maxLength, maxValue, minValue } from './validators';
 
 describe('integer validator', () => {
   it('accepts an integer', () => {
-    const returned = integer(123);
+    const returned = integer('123');
     expect(returned).toBe(undefined);
   });
 
   it("doesn't accept a float", () => {
-    const returned = integer(123.5569);
+    const returned = integer('123.5569');
     expect(returned).toBe('Must be a whole number');
   });
 });
@@ -65,8 +65,10 @@ describe('minValue validator', () => {
 describe('maxLength validator', () => {
   it('fails for invalid value', () => {
     const maxLength10 = maxLength(10);
-    const tooLong = maxLength10('012345678910');
-    expect(tooLong).toBe('Maximum length 10 exceeded');
+    const stringTooLong = maxLength10('012345678910');
+    const numberTooLong = maxLength10(1234567890123);
+    expect(stringTooLong).toBe('Maximum length 10 exceeded');
+    expect(numberTooLong).toBe('Maximum length 10 exceeded');
   });
 
   it('succeeds for valid value', () => {

package/src/Validation/validators.ts

@@ -0,0 +1,92 @@
+import { ValidationFunction } from './ValidationFunction';
+
+export const required = (value: any) =>
+  Array.isArray(value)
+    ? value.length > 0
+      ? undefined
+      : 'Required'
+    : value || value === false || value === 0
+    ? undefined
+    : 'Required';
+
+//asserts that the value is a certain number of characters. numbers are coerced to a string
+export const length = (len: number) => (value: string | number | undefined) => {
+  const hasError = getLengthOfValue(value) !== len;
+  return !hasError ? undefined : `Length must be ${len}`;
+};
+
+export const integer = (val: string | undefined) => {
+  if (!val) {
+    return undefined;
+  }
+  if (!Number.isInteger(parseFloat(val))) {
+    return 'Must be a whole number';
+  }
+};
+
+export const maxLength =
+  (len: number) => (value: string | number | undefined) => {
+    const hasError = getLengthOfValue(value) > len;
+    return !hasError ? undefined : `Maximum length ${len} exceeded`;
+  };
+
+export const maxCount =
+  (count: number) => (value: { isDeleted?: boolean }[] | undefined) => {
+    const hasError =
+      !!value && value.filter((x) => !x.isDeleted).length > count;
+    return !hasError ? undefined : `Should not have more than ${count}`;
+  };
+
+export const minCount =
+  (count: number) => (value: { isDeleted?: boolean }[] | undefined) => {
+    const hasError = !value || value.filter((x) => !x.isDeleted).length < count;
+    return !hasError ? undefined : `Should have at least ${count}`;
+  };
+
+export const maxValue = (max: number) => (value: number | undefined) => {
+  const hasError = !!value && value > max;
+  return !hasError ? undefined : `Maximum value ${max} exceeded`;
+};
+
+export const minValue = (min: number) => (value: number | undefined) => {
+  const hasError = !value || value < min;
+  return !hasError ? undefined : `Minimum value ${min} not met`;
+};
+
+export const zipCode = (value: string | undefined) => {
+  return value && !/^[0-9]{5}(?:-[0-9]{4})?$/.test(value)
+    ? 'Invalid ZIP Code'
+    : undefined;
+};
+
+//one of the validators provided must be true
+export const any =
+  <TValue>(validatorList: ValidationFunction<TValue>[]) =>
+  (value: TValue) => {
+    if (validatorList.length === 0 || !value) {
+      return;
+    }
+
+    return validatorList.reduce(
+      (isAnyTrue, x) => (isAnyTrue ? isAnyTrue : x(value)),
+      undefined as string | undefined
+    );
+  };
+
+function getLengthOfValue(value: string | number | undefined) {
+  switch (typeof value) {
+    case 'undefined':
+      return 0;
+    case 'string':
+      return value.length;
+    case 'number':
+      // TODO: this seems iffy to me - what if the actual visible value is a fixed length or some special format (e.g. with commas?)
+      return value.toString().length;
+    default:
+      assertUnreachable(value);
+      return 0;
+  }
+}
+function assertUnreachable(x: never) {
+  return null;
+}

package/src/__Tests__/FormTestBase.tsx

@@ -0,0 +1,63 @@
+import '@testing-library/jest-dom/extend-expect';
+import { HashRouter } from 'react-router-dom';
+import { ValidatedApiResult } from 'Validation/ValidatedApiResult';
+import { DateOnly, Form, FormBuilderProp } from '../../src';
+
+interface FormTestBaseProps<TForm extends object> {
+  children: (formBuilder: FormBuilderProp<TForm>) => JSX.Element;
+  initialValues?: TForm;
+}
+
+export default function FormTestBase<TForm extends PersonDto>({
+  children,
+  initialValues,
+}: FormTestBaseProps<TForm>) {
+  return (
+    <HashRouter>
+      <Form onSubmit={onSubmit} initialValues={initialValues}>
+        {children}
+      </Form>
+    </HashRouter>
+  );
+
+  async function onSubmit(
+    data: PersonDto | FormData
+  ): Promise<ValidatedApiResult> {
+    const isFormData = data instanceof FormData;
+    const result = await fetch('/api/submit', {
+      body: isFormData ? data : JSON.stringify(data),
+      method: 'POST',
+      headers: {
+        'Content-Type': isFormData ? 'multipart/form-data' : 'application/json',
+        'X-Show-Errors': `Errors go here`,
+      },
+    });
+
+    const apiResult = await (result.json() as Promise<ValidatedApiResult>);
+
+    if (!apiResult.hasErrors) {
+      alert('submitted');
+    }
+
+    return apiResult;
+  }
+}
+
+interface PersonDto {
+  name?: string | undefined;
+  nameWithIcon?: string | undefined;
+  numberOfArms?: number;
+  phoneNumber?: string;
+  yearlySalaryUSD?: number;
+  isCool?: boolean;
+  gradDate?: DateOnly;
+  favoriteDate?: DateOnly;
+  favoriteNumber?: number;
+  favoriteColor?: string;
+  favoriteColors?: string[];
+  favoriteNames?: string[];
+  allowLogin?: boolean;
+  userRoles?: number[];
+  profileImage?: any;
+  favoritePictures?: any[];
+}

package/src/__Tests__/{StandardFormActions.test.js → StandardFormActions.test.tsx}

@@ -5,18 +5,12 @@ import StandardFormActions from '../StandardFormActions';
 
 describe('StandardFormActions', () => {
   it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        <StandardFormActions />
-      </FormTestBase>
-    );
+    render(<FormTestBase>{() => <StandardFormActions />}</FormTestBase>);
   });
 
   it('has matching snapshot', () => {
     const renderResult = render(
-      <FormTestBase>
-        <StandardFormActions />
-      </FormTestBase>
+      <FormTestBase>{() => <StandardFormActions />}</FormTestBase>
     );
     expect(renderResult.asFragment()).toMatchSnapshot();
   });

package/src/__Tests__/{SubmitFormButton.test.js → SubmitFormButton.test.tsx}

@@ -5,18 +5,12 @@ import SubmitFormButton from '../SubmitFormButton';
 
 describe('SubmitFormButton', () => {
   it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        <SubmitFormButton />
-      </FormTestBase>
-    );
+    render(<FormTestBase>{() => <SubmitFormButton />}</FormTestBase>);
   });
 
   it('has matching snapshot', () => {
     const renderResult = render(
-      <FormTestBase>
-        <SubmitFormButton />
-      </FormTestBase>
+      <FormTestBase>{() => <SubmitFormButton />}</FormTestBase>
     );
     expect(renderResult.asFragment()).toMatchSnapshot();
   });

package/src/__Tests__/__snapshots__/{StandardFormActions.test.js.snap → StandardFormActions.test.tsx.snap}

@@ -6,7 +6,7 @@ exports[`StandardFormActions has matching snapshot 1`] = `
     action="#"
   >
     <button
-      class="btn btn-primary disabled"
+      class="submit-form-button"
       disabled=""
       title="You haven't made any changes"
       type="submit"
@@ -15,7 +15,7 @@ exports[`StandardFormActions has matching snapshot 1`] = `
     </button>
      
     <button
-      class="btn btn-link"
+      class="standard-form-actions-cancel-button"
       type="button"
     >
       Cancel

package/src/__Tests__/__snapshots__/{SubmitFormButton.test.js.snap → SubmitFormButton.test.tsx.snap}

@@ -6,7 +6,7 @@ exports[`SubmitFormButton has matching snapshot 1`] = `
     action="#"
   >
     <button
-      class="btn btn-primary disabled"
+      class="submit-form-button"
       disabled=""
       title="You haven't made any changes"
       type="submit"

package/src/__Tests__/index.ts

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

package/src/index.ts

@@ -0,0 +1,114 @@
+// 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 DatePickerInput } from './DatePickerInput/DatePickerInput';
+export type { DatePickerInputProps, DateOnly } from './DatePickerInput/DatePickerInput';
+
+// Field
+export { default as Field } from './Field/Field';
+export type { FieldProps } from './Field/Field';
+
+export { default as FieldErrorScrollTarget } from './Field/FieldErrorScrollTarget';
+
+export { FieldNameContext } from './Field/FieldNameContext';
+
+export type { InjectedFieldProps } from './Field/InjectedFieldProps';
+
+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 as FormActionsProps } from './FormActions';
+
+// Input
+export { default as Group } from './Group';
+export type { GroupProps as 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 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 } from './Select/SelectGroup';
+
+export { BooleanSelectGroup } from './Select/BooleanSelectGroup';
+export type { BooleanSelectGroupProps } from './Select/BooleanSelectGroup';
+
+export {
+  MultiNumberSelectGroup,
+  SingleNumberSelectGroup,
+} from './Select/NumberSelectGroup';
+export type { MultiNumberSelectGroupProps, SingleNumberSelectGroupProps } from './Select/NumberSelectGroup';
+
+export {
+  MultiStringSelectGroup,
+  SingleStringSelectGroup,
+} from './Select/StringSelectGroup';
+export type { MultiStringSelectGroupProps, SingleStringSelectGroupProps } from './Select/StringSelectGroup';
+
+// 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

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