envoc-form 5.0.9 → 6.0.1-1

package/src/FieldArray/FieldArray.tsx

@@ -1,154 +0,0 @@
-import { ElementType } from 'react';
-import { clsx } from 'clsx';
-import Field, { FieldProps } from '../Field/Field';
-import { FieldNameContext } from '../Field/FieldNameContext';
-import useStandardFormInput from '../Field/useStandardField';
-import { FormDefaults } from '../FormDefaults';
-import { ValidationFunction } from '../Validation/ValidationFunction';
-
-export type FieldArrayProps<
-  TForm extends object,
-  TProp extends keyof TForm
-> = TForm[TProp] extends Array<any> | undefined | null
-  ? {
-      /** Name of the field, used on submission. If using codegen this must be the provided dto. */
-      name: TProp;
-      /** Label of the field. */
-      label?: string;
-      /** Whether the field should be disabled. */
-      disabled?: boolean;
-      /** Function to validate the value. */
-      validate?:
-        | ValidationFunction<TForm[TProp]>
-        | ValidationFunction<TForm[TProp]>[];
-      children: (
-        formBuilder: ArrayFormBuilderProp<TForm[TProp]>
-      ) => JSX.Element;
-    }
-  : never;
-
-export type ArrayFormBuilderProp<TValue extends Array<any> | undefined | null> =
-  TValue extends Array<infer TForm> | undefined | null
-    ? TForm extends object
-      ? {
-          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;
-        }
-      : never
-    : never;
-
-/**
- * An array of fields that allows the user to add multiple instances of the same field.
- *
- * Includes "Add Item" and "Remove Item" buttons to allow the user to speicify the number of fields.
- */
-export default function FieldArray<
-  TForm extends object,
-  TProp extends keyof TForm
->({
-  name,
-  label,
-  validate,
-  disabled,
-  children,
-  ...rest
-}: FieldArrayProps<TForm, TProp>) {
-  const [input] = useStandardFormInput<TForm[TProp]>({
-    name: String(name),
-    validate: validate,
-    disabled: disabled,
-  });
-
-  const values: any[] = !input.value
-    ? []
-    : Array.isArray(input.value)
-    ? input.value
-    : [];
-
-  return (
-    <div className={FormDefaults.cssClassPrefix + 'field-array'}>
-      <div className={FormDefaults.cssClassPrefix + 'field-array-header'}>
-        <div className={FormDefaults.cssClassPrefix + 'field-array-title'}>
-          {label}
-        </div>
-        <button
-          className={clsx(
-            FormDefaults.cssClassPrefix + 'add-array-item-button',
-            { [FormDefaults.cssClassPrefix + 'disabled']: disabled }
-          )}
-          title="Add Item"
-          type="button"
-          onClick={addItem}>
-          +
-        </button>
-      </div>
-      <div className={FormDefaults.cssClassPrefix + 'field-array-body'}>
-        {values.map((value, index) => {
-          const itemName = `${input.name}[${index}]`;
-          return (
-            <div
-              key={
-                (value && value['form-input-array-key']) ||
-                (value && value['id']) ||
-                itemName
-              }
-              className={clsx(
-                FormDefaults.cssClassPrefix + 'field-array-item',
-                {
-                  [FormDefaults.cssClassPrefix + 'removed']: value.isDeleted,
-                }
-              )}
-              role="listitem">
-              <FieldNameContext.Provider value={itemName}>
-                {children({
-                  Field: Field,
-                  FieldArray: FieldArray,
-                } as any)}
-              </FieldNameContext.Provider>
-              <button
-                className={clsx(
-                  FormDefaults.cssClassPrefix + 'remove-array-item-button',
-                  { [FormDefaults.cssClassPrefix + 'disabled']: disabled }
-                )}
-                type="button"
-                title="Remove Item"
-                onClick={() => removeItem(value)}>
-                -
-              </button>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-
-  function addItem() {
-    if (disabled) {
-      return;
-    }
-    input.onChange([...values, {}] as any);
-  }
-
-  function removeItem(item: any) {
-    if (disabled) {
-      return;
-    }
-    // assumes anything from the server has an 'id' value sent
-    if (!item.id) {
-      input.onChange(values.filter((x) => x !== item) as any);
-      return;
-    }
-    const mapped = values.map((x) =>
-      x !== item ? x : Object.assign({}, x, { isDeleted: true })
-    );
-    input.onChange(mapped as any);
-  }
-}

package/src/File/FileGroup.test.tsx

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

package/src/File/FileGroup.tsx

@@ -1,82 +0,0 @@
-import React, { ComponentType, LegacyRef } from 'react';
-import { clsx } from 'clsx';
-import FileList from './FileList';
-import { InjectedFieldProps } from '../Field/InjectedFieldProps';
-import { FormDefaults } from '../FormDefaults';
-import Group, { GroupProps } from '../Group';
-
-export interface FileGroupProps
-  // note: file props are of type "any" with the current type generation
-  extends InjectedFieldProps<any | undefined | null>,
-    Omit<GroupProps, keyof InjectedFieldProps<any> | 'children'>,
-    Omit<
-      React.HTMLProps<HTMLInputElement>,
-      keyof InjectedFieldProps<any> | 'children' | 'className' | 'label'
-    > {
-  /** Allow multiple files to be uploaded. */
-  multiple?: boolean | undefined;
-}
-
-function FileGroup(
-  {
-    input,
-    meta,
-    label,
-    helpText,
-    className,
-    required,
-    disabled,
-    multiple,
-    ...rest
-  }: FileGroupProps,
-  ref: LegacyRef<HTMLInputElement>
-) {
-  return (
-    <Group
-      input={input}
-      meta={meta}
-      label={label}
-      helpText={helpText}
-      className={clsx(
-        className,
-        { [FormDefaults.cssClassPrefix + 'multiple']: multiple },
-        FormDefaults.cssClassPrefix + 'file-group'
-      )}
-      required={required}
-      disabled={disabled}>
-      <input
-        {...input}
-        {...rest}
-        multiple={multiple}
-        onChange={(e) => {
-          if (!e?.target?.files?.length) {
-            input.onChange(undefined);
-          } else {
-            const files: File[] = [];
-            for (let i = 0; i < e.target.files.length; i++) {
-              files.push(e.target.files[i]);
-            }
-            if (!multiple) {
-              input.onChange(files[0]);
-            } else {
-              input.onChange(files);
-            }
-          }
-        }}
-        value={undefined}
-        ref={ref}
-        type="file"
-        className={clsx(className, FormDefaults.cssClassPrefix + 'file-group')}
-      />
-      {/* Note: because input.value is any - due to how files are currently handled - type safeness isn't great here */}
-      <FileList files={input.value} />
-    </Group>
-  );
-}
-
-/** File upload input group.  */
-const FileGroupWithRef = React.forwardRef(
-  FileGroup
-) as ComponentType<FileGroupProps>;
-
-export default FileGroupWithRef;

package/src/File/FileList.tsx

@@ -1,21 +0,0 @@
-import { FormDefaults } from '../FormDefaults';
-
-export interface FileListProps {
-  files?: File | File[] | undefined | null;
-  rejectedFiles?: File | File[] | undefined | null;
-}
-export default function FileList({ files, rejectedFiles }: FileListProps) {
-  return (
-    <div className={FormDefaults.cssClassPrefix + 'file-list'}>
-      {!files ? null : Array.isArray(files) ? (
-        files.map((x, i) => <File file={x} key={i} />)
-      ) : (
-        <File file={files} />
-      )}
-    </div>
-  );
-}
-
-function File({ file }: { file: File }) {
-  return null;
-}

package/src/File/__snapshots__/FileGroup.test.tsx.snap

@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FileGroup has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-    class="envoc-form-form"
-  >
-    <div
-      class="envoc-form-file-group envoc-form-group"
-    >
-      <div
-        id="profileimage-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="profileImage"
-      >
-        Profile Image
-      </label>
-      <input
-        class="envoc-form-file-group"
-        id="profileImage"
-        name="profileImage"
-        type="file"
-        value=""
-      />
-      <div
-        class="envoc-form-file-list"
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;

package/src/File/humanFileSize.ts

@@ -1,8 +0,0 @@
-export function humanFileSize(size: number) {
-  const i = Math.floor(Math.log(size) / Math.log(1024));
-  return (
-    (size / Math.pow(1024, i)).toFixed(2) +
-    ' ' +
-    ['B', 'KB', 'MB', 'GB', 'TB'][i]
-  );
-}

package/src/Form/FocusError.tsx

@@ -1,55 +0,0 @@
-import { useEffect } from 'react';
-import { useFormikContext } from 'formik';
-import smoothscroll from 'smoothscroll-polyfill';
-import { ServerErrorContextProps } from './ServerErrorContext';
-
-export interface FocusErrorProps {
-  /** Validation errors that have been received from the server. */
-  serverErrors: ServerErrorContextProps;
-}
-
-/** Function to scroll to the field that has an error. */
-export default function FocusError(props: FocusErrorProps) {
-  const { errors, isSubmitting, isValidating } = useFormikContext();
-  smoothscroll.polyfill();
-  useEffect(() => {
-    if (!isSubmitting || isValidating) {
-      return;
-    }
-    //This block handles any front-end input validation errors
-    //e.g. required fields, max characters, etc
-    const keys = Object.keys(errors);
-    if (keys.length > 0) {
-      return scrollToErrorElement(keys);
-    }
-    //This block handles any input-specific server-side errors
-    //e.g. improper email formatting, invalid phone number, etc.
-    if (
-      props.serverErrors.errors &&
-      Object.values(props.serverErrors.errors).some((x) => !!x)
-    ) {
-      const names = Object.keys(props.serverErrors.errors);
-      return scrollToErrorElement(names);
-    }
-  }, [errors, isSubmitting, isValidating, props]);
-  return null;
-}
-
-const scrollToErrorElement = (keys: string[]) => {
-  let firstErrorElement: HTMLElement | null = document.getElementById(
-    `${keys[0].toLowerCase()}-error-scroll-target`
-  );
-  if (!firstErrorElement || !firstErrorElement.parentNode) {
-    return;
-  }
-  firstErrorElement = firstErrorElement.parentNode as HTMLElement;
-  const headerOffset = -110;
-  const y =
-    firstErrorElement.getBoundingClientRect().top +
-    window.pageYOffset +
-    headerOffset;
-  window.scrollTo({ top: y, behavior: 'smooth' });
-  setTimeout(() => {
-    firstErrorElement?.focus();
-  }, 500);
-};

package/src/Form/Form.test.tsx

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

package/src/Form/Form.tsx

@@ -1,234 +0,0 @@
-import {
-  CSSProperties,
-  ElementType,
-  useContext,
-  useMemo,
-  useState,
-} from 'react';
-import { clsx } from 'clsx';
-import {
-  Form as FormikFormWrapper,
-  Formik,
-  FormikHelpers,
-  useFormikContext,
-} from 'formik';
-import FocusError from './FocusError';
-import FormBasedPreventNavigation from './FormBasedPreventNavigation';
-import {
-  ServerErrorContext,
-  ServerErrorContextProps,
-  ServerErrors,
-} from './ServerErrorContext';
-import Field, { FieldProps } from '../Field/Field';
-import FieldArray, { FieldArrayProps } from '../FieldArray/FieldArray';
-import { FormDefaults } from '../FormDefaults';
-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 interface FullFormProps<TForm extends object> {
-  /** The `<Field/>` and `<FieldArray/>` components. */
-  children: (formBuilder: FormBuilderProp<TForm>) => JSX.Element;
-  /** Submission handler  */
-  onSubmit: (
-    formValues: TForm,
-    formikBag: FormikHelpers<TForm>
-  ) => Promise<ValidatedApiResult>;
-  /** Submission handler for forms that use [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData).*/
-  onFormDataSubmit: (
-    formValues: FormData,
-    formikBag: FormikHelpers<TForm>
-  ) => Promise<ValidatedApiResult>;
-  className?: string;
-  style?: CSSProperties;
-  /** Prevent the user from leaving the form if they have edited any field. This is presented as a JS `alert()`. */
-  ignoreLostChanges?: boolean;
-  /** The intitial values of the form. */
-  initialValues?: TForm;
-}
-
-type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<
-  T,
-  Exclude<keyof T, Keys>
-> &
-  {
-    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
-  }[Keys];
-
-export type FormProps<TForm extends object> = RequireAtLeastOne<
-  FullFormProps<TForm>,
-  'onSubmit' | 'onFormDataSubmit'
->;
-
-/** Define a form. Uses [formik](https://formik.org/docs/overview). Usually contains many `<Field/>` components. */
-export default function Form<TForm extends object>({
-  children,
-  className,
-  style,
-  ignoreLostChanges,
-  onSubmit,
-  onFormDataSubmit,
-  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<ServerErrors>({});
-  const serverErrorContextValue = useMemo<ServerErrorContextProps>(
-    () => ({
-      errors: serverErrors,
-      getError: (path) => {
-        const lowered = path.toLowerCase();
-        return serverErrors && serverErrors[lowered];
-      },
-      setError: (path, errorMessage) => {
-        const lowered = path.toLowerCase();
-        setServerErrors(
-          Object.assign({}, serverErrors, {
-            [lowered]: !errorMessage ? undefined : errorMessage,
-          })
-        );
-      },
-    }),
-    [serverErrors]
-  );
-
-  return (
-    <Formik
-      validateOnChange={false}
-      validateOnBlur={true}
-      validateOnMount={false}
-      initialValues={initialValues || ({} as TForm)}
-      onSubmit={handleSubmit}
-      {...props}>
-      <ServerErrorContext.Provider value={serverErrorContextValue}>
-        <FormikFormWrapper
-          className={clsx(className, FormDefaults.cssClassPrefix + 'form')}
-          style={style}>
-          <FocusError serverErrors={serverErrorContextValue} />
-          <FormBasedPreventNavigation ignoreLostChanges={ignoreLostChanges} />
-          {children({
-            // hack for ref forwarding
-            Field: Field as any,
-            FieldArray: FieldArray as any,
-          })}
-        </FormikFormWrapper>
-      </ServerErrorContext.Provider>
-    </Formik>
-  );
-
-  function handleSubmit(values: TForm, formikBag: FormikHelpers<TForm>) {
-    let formData: FormData | undefined = undefined;
-    let submitFunc: () => Promise<ValidatedApiResult>;
-    if (objectContainsNonSerializableProperty(values)) {
-      formData = objectToFormData(values, {
-        indices: true,
-        dotNotation: true,
-        allowEmptyArrays: true,
-        noFileListBrackets: true,
-      });
-      if (onFormDataSubmit === undefined) {
-        throw new Error(
-          'No onFormDataSubmit supplied for non-serializable properties.'
-        );
-      }
-      submitFunc = () =>
-        onFormDataSubmit(formData ?? new FormData(), formikBag);
-    } else {
-      if (onSubmit === undefined) {
-        formData = objectToFormData(values, {
-          indices: true,
-          dotNotation: true,
-          allowEmptyArrays: true,
-          noFileListBrackets: true,
-        });
-        if (onFormDataSubmit === undefined) {
-          // This error should never occur, as this case is covered by RequireAtLeastOne type safety
-          throw new Error(
-            'No onFormDataSubmit supplied for non-serializable properties.'
-          );
-        }
-        submitFunc = () =>
-          onFormDataSubmit(formData ?? new FormData(), formikBag);
-      } else {
-        submitFunc = () => onSubmit(values, formikBag);
-      }
-    }
-
-    return submitFunc()
-      .then((response) => {
-        return response;
-      })
-      .catch((err) => {
-        //this is an http error
-        if (
-          err &&
-          err.response &&
-          err.response.data &&
-          err.response.data.validationFailures
-        ) {
-          try {
-            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
-                // 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');
-            console.error(err);
-            throw err;
-          }
-        }
-        throw err;
-      });
-  }
-}
-
-Form.DisplayFormState = DisplayFormState;
-function DisplayFormState() {
-  const formState = useFormikContext();
-  const serverErrorContext = useContext(ServerErrorContext);
-  return (
-    <div style={{ margin: '1rem 0' }}>
-      <pre
-        style={{
-          background: '#f6f8fa',
-          fontSize: '.65rem',
-          padding: '.5rem',
-        }}>
-        {serverErrorContext && serverErrorContext.errors && (
-          <div>
-            <strong>serverErrors = </strong>
-            {JSON.stringify(serverErrorContext.errors, null, 2)}
-          </div>
-        )}
-        <strong>formState = </strong>
-        {JSON.stringify(formState, null, 2)}
-      </pre>
-    </div>
-  );
-}

package/src/Form/FormBasedPreventNavigation.tsx

@@ -1,56 +0,0 @@
-import type { History } from 'history';
-import { ContextType, useContext } from 'react';
-import {
-  Navigator as BaseNavigator,
-  UNSAFE_NavigationContext as NavigationContext,
-} from 'react-router-dom';
-import { useFormikContext } from 'formik';
-import LegacyFormBasedPreventNavigation from './LegacyFormBasedPreventNavigation';
-import NewFormBasedPreventNavigation from './NewFormBasedPreventNavigation';
-
-interface Navigator extends BaseNavigator {
-  block?: History['block'];
-  location: Location;
-}
-
-type NavigationContextWithBlock = ContextType<typeof NavigationContext> & {
-  navigator: Navigator;
-};
-
-export interface FormBasedPreventNavigationProps {
-  ignoreLostChanges?: boolean;
-  promptMessage?: string;
-}
-
-/** Prevent the user from navigating away from a form if there are any changes. */
-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;
-
-  const isUsingDataRouter = navigator.location === undefined;
-
-  if (isUsingDataRouter) {
-    return (
-      <NewFormBasedPreventNavigation
-        promptMessage={promptMessage}
-        preventNavigate={preventNavigate}
-        navigator={navigator}
-      />
-    );
-  } else {
-    return (
-      <LegacyFormBasedPreventNavigation
-        promptMessage={promptMessage}
-        preventNavigate={preventNavigate}
-        navigator={navigator}
-      />
-    );
-  }
-}