envoc-form 3.1.0 → 4.0.1-0

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

@@ -1,15 +1,56 @@
-import React, { useState, useMemo, useContext } from 'react';
-import PropTypes from 'prop-types';
+import {
+  CSSProperties,
+  ElementType,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  Form as FormikFormWrapper,
+  Formik,
+  FormikHelpers,
+  useFormikContext,
+} from 'formik';
 import FocusError from './FocusError';
-import { Formik, Form as FormikFormWrapper, useFormikContext } from 'formik';
 import FormBasedPreventNavigation from './FormBasedPreventNavigation';
-import ServerErrorContext from './ServerErrorContext';
 import {
-  objectToFormData,
-  objectContainsNonSerializableProperty,
-} from '../utils';
+  ServerErrorContext,
+  ServerErrorContextProps,
+  ServerErrors,
+} from './ServerErrorContext';
+import Field, { FieldProps } from '../Field/Field';
+import FieldArray, { FieldArrayProps } from '../FieldArray/FieldArray';
+import objectContainsNonSerializableProperty from '../utils/objectContainsNonSerializableProperty';
+import objectToFormData from '../utils/objectToFormData';
+import { ValidatedApiResult } from '../Validation/ValidatedApiResult';
+import { ValidationError } from '../Validation/ValidationError';
+
+// This exposes the builder that ensures only "name" values on the given TForm can be used
+// Further, each Field can then infer the proper type given the name
+export type FormBuilderProp<TForm extends object> = {
+  // the first set of <> is a generic method signature - we don't split this off because we need the TForm closure
+  Field: <TProp extends keyof TForm, TRenderComponent extends ElementType>(
+    props: FieldProps<TForm, TProp, TRenderComponent>
+  ) => JSX.Element; // assumes this is never null - thought he final component may not render
+
+  FieldArray: <TProp extends keyof TForm>(
+    props: FieldArrayProps<TForm, TProp>
+  ) => JSX.Element;
+};
 
-export default function Form({
+export interface FormProps<TForm extends object> {
+  children: (formBuilder: FormBuilderProp<TForm>) => JSX.Element;
+  onSubmit: (
+    formValues: FormData | TForm,
+    formikBag: FormikHelpers<TForm>
+  ) => Promise<ValidatedApiResult>;
+  className?: string;
+  style?: CSSProperties;
+  ignoreLostChanges?: boolean;
+  initialValues?: TForm;
+}
+
+export default function Form<TForm extends object>({
   children,
   className,
   style,
@@ -17,13 +58,13 @@ export default function Form({
   onSubmit,
   initialValues,
   ...props
-}) {
+}: FormProps<TForm>) {
   // formik resets all error on each blur (with our settings)
   // this means that ALL errors from the server disappear when any one field is blurred
   // So, we have to store server errors ourselves
   // Since we only use useStandardFormInput, that means there is only one consumer
-  const [serverErrors, setServerErrors] = useState(null);
-  const serverErrorContextValue = useMemo(
+  const [serverErrors, setServerErrors] = useState<ServerErrors>({});
+  const serverErrorContextValue = useMemo<ServerErrorContextProps>(
     () => ({
       errors: serverErrors,
       getError: (path) => {
@@ -47,21 +88,25 @@ export default function Form({
       validateOnChange={false}
       validateOnBlur={true}
       validateOnMount={false}
-      initialValues={initialValues || {}}
+      initialValues={initialValues || ({} as TForm)}
       onSubmit={handleSubmit}
       {...props}>
       <ServerErrorContext.Provider value={serverErrorContextValue}>
         <FormikFormWrapper className={className} style={style}>
           <FocusError serverErrors={serverErrorContextValue} />
           <FormBasedPreventNavigation ignoreLostChanges={ignoreLostChanges} />
-          {typeof children === 'function' ? children(props) : children}
+          {children({
+            // hack for ref forwarding
+            Field: Field as any,
+            FieldArray: FieldArray as any,
+          })}
         </FormikFormWrapper>
       </ServerErrorContext.Provider>
     </Formik>
   );
 
-  function handleSubmit(values, formikBag) {
-    let formData = null;
+  function handleSubmit(values: TForm, formikBag: FormikHelpers<TForm>) {
+    let formData: FormData | undefined = undefined;
     if (objectContainsNonSerializableProperty(values)) {
       formData = objectToFormData(values, {
         indices: true,
@@ -71,7 +116,7 @@ export default function Form({
       });
     }
 
-    return Promise.resolve(onSubmit(formData || values))
+    return onSubmit(formData ?? values, formikBag)
       .then((response) => {
         return response;
       })
@@ -84,17 +129,18 @@ export default function Form({
           err.response.data.validationFailures
         ) {
           try {
-            const serverErrors = err.response.data.validationFailures
-              .map((error) => ({
-                // case insensitive path
-                path: error.propertyName.toLowerCase(),
-                errorMessage: error.errorMessage,
-              }))
-              .reduce((acc, value) => {
+            const serverErrors = err.response.data.validationFailures.reduce(
+              (acc: ServerErrors, value: ValidationError) => {
                 // for simplicity, just keep it to one server error at a time per path
-                acc[value.path] = value.errorMessage;
+                // don't care of the property name case changes
+                const path = value.propertyName?.toLowerCase();
+                if (!!path && !!value.errorMessage) {
+                  acc[path] = value.errorMessage;
+                }
                 return acc;
-              }, {});
+              },
+              {} as ServerErrors
+            );
             setServerErrors(serverErrors);
           } catch (err) {
             console.error('Failure to getErrorObject');
@@ -131,9 +177,3 @@ function DisplayFormState() {
     </div>
   );
 }
-
-Form.propTypes = {
-  ignoreLostChanges: PropTypes.bool,
-  onSubmit: PropTypes.func.isRequired,
-  initialValues: PropTypes.object,
-};

package/src/Form/FormBasedPreventNavigation.tsx

@@ -0,0 +1,74 @@
+import type { History, Blocker, Transition } from 'history';
+import { ContextType, useContext, useEffect } from 'react';
+// see: https://gist.github.com/rmorse/426ffcc579922a82749934826fa9f743
+import {
+  Navigator as BaseNavigator,
+  UNSAFE_NavigationContext as NavigationContext,
+} from 'react-router-dom';
+import { useFormikContext } from 'formik';
+
+interface Navigator extends BaseNavigator {
+  block: History['block'];
+}
+// see: https://github.com/remix-run/react-router/issues/8139#issuecomment-1023105785
+type NavigationContextWithBlock = ContextType<typeof NavigationContext> & {
+  navigator: Navigator;
+};
+
+export interface FormBasedPreventNavigationProps {
+  ignoreLostChanges?: boolean;
+  promptMessage?: string;
+}
+export default function FormBasedPreventNavigation({
+  ignoreLostChanges,
+  promptMessage = 'Changes you made may not be saved.',
+}: FormBasedPreventNavigationProps) {
+  const { dirty, isSubmitting } = useFormikContext();
+  const preventNavigate = !ignoreLostChanges && dirty && !isSubmitting;
+
+  const { navigator } = useContext(
+    NavigationContext
+  ) as NavigationContextWithBlock;
+
+  useEffect(() => {
+    if (!preventNavigate) {
+      return;
+    }
+
+    // TODO: https://reactrouter.com/docs/en/v6/upgrading/v5#prompt-is-not-currently-supported
+    // this is a workaround until we get native support for prompt on navigate
+
+    const blocker: Blocker = (tx) => {
+      if (window.confirm(promptMessage)) {
+        tx.retry();
+      }
+    };
+    const unblock = navigator.block((tx: Transition) => {
+      const autoUnblockingTx = {
+        ...tx,
+        retry() {
+          // Automatically unblock the transition so it can play all the way
+          // through before retrying it. TODO: Figure out how to re-enable
+          // this block if the transition is cancelled for some reason.
+          unblock();
+          tx.retry();
+        },
+      };
+
+      blocker(autoUnblockingTx);
+    });
+
+    window.addEventListener('beforeunload', beforeUnload);
+    return () => {
+      unblock();
+      window.removeEventListener('beforeunload', beforeUnload);
+    };
+
+    function beforeUnload(e: BeforeUnloadEvent) {
+      e.preventDefault();
+      e.returnValue = promptMessage;
+    }
+  }, [preventNavigate, promptMessage, navigator]);
+
+  return null;
+}

package/src/Form/ServerErrorContext.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export interface ServerErrors {
+  [path: string]: string;
+}
+export interface ServerErrorContextProps {
+  errors: ServerErrors;
+  getError: (path: string) => string | undefined;
+  setError: (path: string, errorMessage: string | undefined) => void;
+}
+export const ServerErrorContext = React.createContext<ServerErrorContextProps>({
+  errors: {},
+  getError: (path: string) => {
+    return undefined;
+  },
+  setError: (path: string, errorMessage: string | undefined) => {},
+});

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MoneyInput has matching snapshot 1`] = `
+exports[`FormTestBase has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"

package/src/FormActions.tsx

@@ -0,0 +1,34 @@
+import { useFormikContext } from 'formik';
+import SubmitFormButton from './SubmitFormButton';
+
+export interface FormActionsProps {
+  allowPristineSubmit?: boolean;
+  handleCancel?: () => void;
+  disabled?: boolean;
+}
+export default function FormActions({
+  allowPristineSubmit,
+  handleCancel,
+  disabled,
+}: FormActionsProps) {
+  const { isSubmitting } = useFormikContext();
+  return (
+    <>
+      <SubmitFormButton
+        className="form-actions"
+        allowPristineSubmit={allowPristineSubmit}
+        disabled={disabled}
+      />
+      <button
+        type="button"
+        className="form-actions cancel-form-button"
+        disabled={isSubmitting || disabled}
+        onClick={handleCancel || goBack}>
+        Cancel
+      </button>
+    </>
+  );
+  function goBack() {
+    window.history.back();
+  }
+}

package/src/Group.tsx

@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import FieldErrorScrollTarget from './Field/FieldErrorScrollTarget';
+import { InjectedFieldProps } from './Field/InjectedFieldProps';
+
+export interface GroupProps extends InjectedFieldProps<any> {
+  className?: string;
+
+  children: React.ReactNode;
+
+  /** simple text label before the input */
+  label?: string;
+
+  /** simple helper text after the input*/
+  helpText?: string;
+
+  disabled?: boolean;
+}
+
+/** contains standard field bits like a label, helper text, error scroll target, validation message container, etc */
+export default function Group({
+  className,
+  children,
+  label,
+  helpText,
+  meta,
+  input,
+  disabled,
+}: GroupProps) {
+  return (
+    <div
+      className={classNames(className, 'group', {
+        'is-invalid': meta.error,
+        disabled: disabled,
+      })}>
+      <FieldErrorScrollTarget />
+      {meta.warning && <div className="warning">{meta.warning}</div>}
+      <label htmlFor={input.id}>{label}</label>
+      {children}
+      {meta.error && <div className="error">{meta.error}</div>}
+      {helpText && <div className="help">{helpText}</div>}
+    </div>
+  );
+}

package/src/Input/IconInputGroup.tsx

@@ -0,0 +1,48 @@
+import React, { LegacyRef } from 'react';
+import classNames from 'classnames';
+import InputGroupWithRef, { InputGroupProps } from './InputGroup';
+import useStandardFormInput from '../Field/useStandardField';
+
+// TODO: make className tailwind-able instead of css. make it typeof string ????
+// or should we just give a div a className and let each project decide? (this seems to be the patern)
+export interface IconInputGroupProps
+  extends Omit<
+    InputGroupProps<string | undefined>,
+    'onChange' | 'type' | 'value'
+  > {
+  type?: 'color' | 'email' | 'search' | 'tel' | 'text' | 'url';
+  icon: React.ReactNode;
+  helpText?: string;
+}
+
+function IconInputGroup(
+  { icon, className, ...rest }: IconInputGroupProps,
+  ref: LegacyRef<HTMLInputElement>
+) {
+  const { input } = rest;
+
+  return (
+    <>
+      <InputGroupWithRef
+        icon={icon}
+        ref={ref}
+        className={classNames(className, 'icon-input-group')}
+        value={input.value || ''}
+        onChange={(e) => {
+          if (!e.target.value) {
+            input.onChange(undefined);
+          } else {
+            input.onChange(e.target.value);
+          }
+        }}
+        {...rest}
+      />
+    </>
+  );
+}
+
+const IconInputGroupWithRef = React.forwardRef(
+  IconInputGroup
+) as React.ComponentType<IconInputGroupProps>;
+
+export default IconInputGroupWithRef;

package/src/Input/InputGroup.tsx

@@ -0,0 +1,57 @@
+import React, { ChangeEventHandler, LegacyRef } from 'react';
+import classNames from 'classnames';
+import { InjectedFieldProps } from '../Field/InjectedFieldProps';
+import Group, { GroupProps } from '../Group';
+
+export interface InputGroupProps<TValue>
+  extends InjectedFieldProps<TValue>,
+    Omit<
+      React.HTMLProps<HTMLInputElement>,
+      keyof InjectedFieldProps<any> | 'children' | 'className' | 'label'
+    >,
+    Omit<GroupProps, keyof InjectedFieldProps<any> | 'children'> {
+  onChange: ChangeEventHandler<HTMLInputElement>;
+  value: string | number;
+  icon?: React.ReactNode;
+}
+
+/** generic controlled <input/> wrapped by a Group */
+function InputGroup<TValue>(
+  {
+    input,
+    meta,
+    label,
+    helpText,
+    className,
+    disabled,
+    onChange,
+    value,
+    icon,
+    ...rest
+  }: InputGroupProps<TValue>,
+  ref: LegacyRef<HTMLInputElement>
+) {
+  return (
+    <Group
+      input={input}
+      meta={meta}
+      disabled={disabled}
+      label={label}
+      helpText={helpText}
+      className={classNames(className, 'input-group')}>
+      {icon}
+      <input
+        {...input}
+        {...rest}
+        value={value}
+        onChange={onChange}
+        ref={ref}
+        className={classNames(className, 'input-group')}
+      />
+    </Group>
+  );
+}
+
+const InputGroupWithRef = React.forwardRef(InputGroup) as typeof InputGroup;
+
+export default InputGroupWithRef;

package/src/Input/MoneyInputGroup.tsx

@@ -0,0 +1,44 @@
+import React, { LegacyRef } from 'react';
+import classNames from 'classnames';
+import InputGroup, { InputGroupProps } from './InputGroup';
+
+export interface MoneyInputGroupProps
+  extends Omit<
+    InputGroupProps<number | undefined>,
+    'onChange' | 'type' | 'value'
+  > {
+  parseFunc?: typeof parseInt | typeof parseFloat;
+}
+
+function MoneyInputGroup(
+  { parseFunc, className, ...rest }: MoneyInputGroupProps,
+  ref: LegacyRef<HTMLInputElement>
+) {
+  const effectiveParse = parseFunc ?? parseFloat;
+  const { input } = rest;
+
+  return (
+    <InputGroup
+      ref={ref}
+      step={0.01}
+      min={0}
+      {...rest}
+      type="number"
+      className={classNames(className, 'money-group')}
+      value={input.value || ''}
+      onChange={(e) => {
+        if (!e.target.value) {
+          input.onChange(undefined);
+        } else {
+          input.onChange(effectiveParse(e.target.value));
+        }
+      }}
+    />
+  );
+}
+
+const MoneyInputGroupWithRef = React.forwardRef(
+  MoneyInputGroup
+) as React.FunctionComponent<MoneyInputGroupProps>;
+
+export default MoneyInputGroupWithRef;

package/src/Input/NumberInputGroup.tsx

@@ -0,0 +1,42 @@
+import React, { LegacyRef } from 'react';
+import classNames from 'classnames';
+import InputGroup, { InputGroupProps } from './InputGroup';
+
+export interface NumberInputGroupProps
+  extends Omit<
+    InputGroupProps<number | undefined>,
+    'onChange' | 'type' | 'value'
+  > {
+  parseFunc?: typeof parseInt | typeof parseFloat;
+}
+
+function NumberInputGroup(
+  { parseFunc, className, ...rest }: NumberInputGroupProps,
+  ref: LegacyRef<HTMLInputElement>
+) {
+  const effectiveParse = parseFunc ?? parseFloat;
+  const { input } = rest;
+
+  return (
+    <InputGroup
+      ref={ref}
+      {...rest}
+      type="number"
+      className={classNames(className, 'number-group')}
+      value={input.value || ''}
+      onChange={(e) => {
+        if (!e.target.value) {
+          input.onChange(undefined);
+        } else {
+          input.onChange(effectiveParse(e.target.value));
+        }
+      }}
+    />
+  );
+}
+
+const NumberInputGroupWithRef = React.forwardRef(
+  NumberInputGroup
+) as React.ComponentType<NumberInputGroupProps>;
+
+export default NumberInputGroupWithRef;

package/src/Input/StringInputGroup.tsx

@@ -0,0 +1,40 @@
+import React, { LegacyRef } from 'react';
+import classNames from 'classnames';
+import InputGroup, { InputGroupProps } from './InputGroup';
+
+export interface StringInputGroupProps
+  extends Omit<
+    InputGroupProps<string | undefined>,
+    'onChange' | 'type' | 'value'
+  > {
+  type?: 'color' | 'email' | 'search' | 'tel' | 'text' | 'url';
+}
+
+function StringInputGroup(
+  { className, ...rest }: StringInputGroupProps,
+  ref: LegacyRef<HTMLInputElement>
+) {
+  const { input } = rest;
+
+  return (
+    <InputGroup
+      ref={ref}
+      {...rest}
+      className={classNames(className, 'string-group')}
+      value={input.value || ''}
+      onChange={(e) => {
+        if (!e.target.value) {
+          input.onChange(undefined);
+        } else {
+          input.onChange(e.target.value);
+        }
+      }}
+    />
+  );
+}
+
+const StringInputGroupWithRef = React.forwardRef(
+  StringInputGroup
+) as React.ComponentType<StringInputGroupProps>;
+
+export default StringInputGroupWithRef;

package/src/Input/__Tests__/IconInputGroup.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormTestBase from '../../__Tests__/FormTestBase';
+import IconInputGroup from '../IconInputGroup';
+
+describe('IconInputGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="nameWithIcon"
+            Component={IconInputGroup}
+            icon={<span>Pretend this is an icon</span>}
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="nameWithIcon"
+            Component={IconInputGroup}
+            icon={<span>Pretend this is an icon</span>}
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/Input/__Tests__/MoneyInputGroup.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormTestBase from '../../__Tests__/FormTestBase';
+import MoneyInputGroup from '../MoneyInputGroup';
+
+describe('MoneyInputGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="yearlySalaryUSD"
+            Component={MoneyInputGroup}
+            label="Salary"
+            className="something-here"
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="yearlySalaryUSD"
+            Component={MoneyInputGroup}
+            label="Salary"
+            className="something-here"
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/Input/__Tests__/NumberInputGroup.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormTestBase from '../../__Tests__/FormTestBase';
+import NumberInputGroup from '../NumberInputGroup';
+
+describe('NumberInputGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="numberOfArms"
+            Component={NumberInputGroup}
+            label="Arm Count"
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="numberOfArms"
+            Component={NumberInputGroup}
+            label="Arm Count"
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});