envoc-form 3.3.0 → 4.0.1-0

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

@@ -7,13 +7,13 @@ exports[`ConfirmBaseForm has matching snapshot 1`] = `
   >
     <h3 />
     <button
-      class="btn btn-danger"
+      class="confirm-base-form-yes-button"
       type="button"
     >
       Yes
     </button>
     <button
-      class="btn btn-link"
+      class="confirm-base-form-cancel-button"
       type="button"
     >
       Cancel

package/src/ConfirmDeleteForm/{ConfirmDeleteForm.test.js → ConfirmDeleteForm.test.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { HashRouter } from 'react-router-dom';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 
 import ConfirmDeleteForm from './ConfirmDeleteForm';
 
@@ -8,7 +8,7 @@ describe('ConfirmDeleteForm', () => {
   it('Renders without error', () => {
     render(
       <HashRouter>
-        <ConfirmDeleteForm />
+        <ConfirmDeleteForm form="foo" />
       </HashRouter>
     );
   });
@@ -16,7 +16,7 @@ describe('ConfirmDeleteForm', () => {
   it('has matching snapshot', () => {
     const renderResult = render(
       <HashRouter>
-        <ConfirmDeleteForm />
+        <ConfirmDeleteForm form="foo" />
       </HashRouter>
     );
     expect(renderResult.asFragment()).toMatchSnapshot();

package/src/ConfirmDeleteForm/ConfirmDeleteForm.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { useAxiosRequestProps } from 'envoc-request';
+import ConfirmBaseForm, { ConfirmBaseFormProps } from '../ConfirmBaseForm/ConfirmBaseForm';
+
+export interface ConfirmDeleteFormProps
+  extends Pick<ConfirmBaseFormProps, 'style'> {
+  successUrl?: string;
+  form: string;
+  title?: string;
+  handleComplete?: Function;
+  handleError?: Function;
+  children?: React.ReactNode;
+}
+
+export default function ConfirmDeleteForm({
+  successUrl,
+  form,
+  title,
+  handleComplete,
+  handleError,
+  children,
+  ...props
+}: ConfirmDeleteFormProps) {
+  const navigate = useNavigate();
+  const { entityId } = useParams();
+  const onComplete =
+    handleComplete ??
+    function () {
+      toast.success('Deleted!');
+      goBack();
+    };
+  const onError =
+    handleError ??
+    function (error: any) {
+      toast.error(
+        error.response?.data?.validationFailures[0]?.errorMessage ??
+          'Something went wrong talking to the portal. Contact support if this continues.'
+      );
+    };
+
+  const request = {
+    method: 'delete',
+    url: `/api/${form}/${entityId}`,
+    onComplete: onComplete,
+    onError: onError,
+  } as useAxiosRequestProps;
+
+  return (
+    <ConfirmBaseForm
+      request={request}
+      handleCancel={goBack}
+      title={title ?? 'Are you sure you want to delete this?'}
+      {...props}>
+      {children}
+    </ConfirmBaseForm>
+  );
+
+  function goBack() {
+    if (successUrl) {
+      navigate(successUrl);
+    } else {
+      navigate(-1);
+    }
+  }
+}

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

@@ -9,13 +9,13 @@ exports[`ConfirmDeleteForm has matching snapshot 1`] = `
       Are you sure you want to delete this?
     </h3>
     <button
-      class="btn btn-danger"
+      class="confirm-base-form-yes-button"
       type="button"
     >
       Yes
     </button>
     <button
-      class="btn btn-link"
+      class="confirm-base-form-cancel-button"
       type="button"
     >
       Cancel

package/src/DatePickerInput/DatePickerInput.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DatePickerInput from './DatePickerInput';
+import FormTestBase from '../__Tests__/FormTestBase';
+
+//hack so the datepicker internals don't complain about this not existing in the context of jest
+HTMLCanvasElement.prototype.getContext = () => {};
+
+describe('IconInputGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="favoriteDate"
+            Component={DatePickerInput}
+            label="Favorite Date"
+            monthPlaceholder="mm"
+            dayPlaceholder="dd"
+            yearPlaceholder="yyyy"
+            maxDate={new Date('9/23/2023')}
+            minDate={new Date('6/22/2022')}
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="favoriteDate"
+            Component={DatePickerInput}
+            label="Favorite Date"
+            monthPlaceholder="mm"
+            dayPlaceholder="dd"
+            yearPlaceholder="yyyy"
+            maxDate={new Date('9/23/2023')}
+            minDate={new Date('6/22/2022')}
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/DatePickerInput/DatePickerInput.tsx

@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import DatePicker, { DatePickerProps } from 'react-date-picker';
+import classnames from 'classnames';
+import parseISO from 'date-fns/parseISO';
+import { InjectedFieldProps } from '../Field/InjectedFieldProps';
+import Group, { GroupProps } from '../Group';
+
+// Docs for react-date-picker https://www.npmjs.com/package/react-date-picker
+
+// TODO: pick better home for this
+export interface DateOnly {
+  year?: number;
+  month?: number;
+  day?: number;
+}
+
+type InjectedDate = InjectedFieldProps<DateOnly | undefined>;
+
+export interface DatePickerInputProps
+  extends InjectedDate,
+    Omit<DatePickerProps, keyof InjectedDate | 'name' | 'value' | 'className'>,
+    Omit<GroupProps, keyof InjectedDate | 'children'> {}
+
+export default function DatePickerInput({
+  input,
+  meta,
+  label,
+  helpText,
+  className,
+  disabled,
+  ...rest
+}: DatePickerInputProps) {
+  const [displayDate, setDisplayDate] = useState<Date | null>(null);
+
+  function handleChange(e: DatePickerProps['value'] | undefined) {
+    const { onChange } = input;
+    if (onChange == null) {
+      return;
+    }
+
+    if (!e) {
+      onChange(undefined);
+      setDisplayDate(null);
+      return;
+    }
+
+    if (e instanceof Date) {
+      const parsedValue = parseISO(e.toISOString().split('T')[0]);
+
+      setDisplayDate(parsedValue);
+      onChange({
+        year: e.getFullYear(),
+        month: e.getMonth() + 1,
+        day: e.getDate(),
+      });
+    } else {
+      // e is instanceof Date[]
+      const parsedValue = parseISO(e[0].toISOString().split('T')[0]);
+
+      setDisplayDate(parsedValue);
+      onChange({
+        year: e[0].getFullYear(),
+        month: e[0].getMonth() + 1,
+        day: e[0].getDate(),
+      });
+    }
+  }
+
+  return (
+    <Group
+      input={input}
+      meta={meta}
+      label={label}
+      helpText={helpText}
+      className={classnames(className, 'date-picker')}
+      disabled={disabled}>
+      <DatePicker
+        {...rest}
+        className={classnames('date-picker', className)}
+        value={displayDate}
+        onChange={handleChange}
+      />
+    </Group>
+  );
+}

package/src/DatePickerInput/__snapshots__/DatePickerInput.test.tsx.snap

@@ -0,0 +1,151 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconInputGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="date-picker group"
+    >
+      <div
+        id="favoritedate-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="favoriteDate"
+      >
+        Favorite Date
+      </label>
+      <div
+        class="react-date-picker react-date-picker--closed react-date-picker--enabled date-picker"
+      >
+        <div
+          class="react-date-picker__wrapper"
+        >
+          <div
+            class="react-date-picker__inputGroup"
+          >
+            <input
+              max="2023-09-23"
+              min="2022-06-22"
+              name="date"
+              style="visibility: hidden; position: absolute; z-index: -999;"
+              type="date"
+              value=""
+            />
+            <input
+              autocomplete="off"
+              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__month"
+              data-input="true"
+              inputmode="numeric"
+              max="12"
+              min="1"
+              name="month"
+              placeholder="mm"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-date-picker__inputGroup__divider"
+            >
+              /
+            </span>
+            <input
+              autocomplete="off"
+              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__day"
+              data-input="true"
+              inputmode="numeric"
+              max="31"
+              min="1"
+              name="day"
+              placeholder="dd"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-date-picker__inputGroup__divider"
+            >
+              /
+            </span>
+            <input
+              autocomplete="off"
+              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__year"
+              data-input="true"
+              inputmode="numeric"
+              max="2023"
+              min="2022"
+              name="year"
+              placeholder="yyyy"
+              step="1"
+              type="number"
+              value=""
+            />
+          </div>
+          <button
+            class="react-date-picker__clear-button react-date-picker__button"
+            type="button"
+          >
+            <svg
+              class="react-date-picker__clear-button__icon react-date-picker__button__icon"
+              height="19"
+              stroke="black"
+              stroke-width="2"
+              viewBox="0 0 19 19"
+              width="19"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <line
+                x1="4"
+                x2="15"
+                y1="4"
+                y2="15"
+              />
+              <line
+                x1="15"
+                x2="4"
+                y1="4"
+                y2="15"
+              />
+            </svg>
+          </button>
+          <button
+            class="react-date-picker__calendar-button react-date-picker__button"
+            type="button"
+          >
+            <svg
+              class="react-date-picker__calendar-button__icon react-date-picker__button__icon"
+              height="19"
+              stroke="black"
+              stroke-width="2"
+              viewBox="0 0 19 19"
+              width="19"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                fill="none"
+                height="15"
+                width="15"
+                x="2"
+                y="2"
+              />
+              <line
+                x1="6"
+                x2="6"
+                y1="0"
+                y2="4"
+              />
+              <line
+                x1="13"
+                x2="13"
+                y1="0"
+                y2="4"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </form>
+</DocumentFragment>
+`;

package/src/Field/CustomFieldInputProps.ts

@@ -0,0 +1,10 @@
+export interface CustomFieldInputProps<TValue> {
+  id: string;
+  name: string;
+  value: TValue;
+  // we want to be more strict than formik is for setting the value
+  onChange: (newValue: TValue) => void;
+
+  // we don't want controlled vs uncontrolled components to behave oddly
+  onBlur: () => void;
+}

package/src/Field/CustomFieldMetaProps.ts

@@ -0,0 +1,5 @@
+import { FieldMetaProps } from 'formik';
+
+export interface CustomFieldMetaProps<TValue> extends FieldMetaProps<TValue> {
+  warning: string | undefined;
+}

package/src/Field/Field.tsx

@@ -0,0 +1,90 @@
+import React, { ComponentProps, ElementType, LegacyRef } from 'react';
+import { FieldNameContext } from './FieldNameContext';
+import { InjectedFieldProps } from './InjectedFieldProps';
+import useStandardFormInput from './useStandardField';
+import { NormalizationFunction } from '../Normalization/NormalizationFunction';
+import { ValidationFunction } from '../Validation/ValidationFunction';
+
+// we attempted to support generic components but failed
+// so, we assume the actual TRenderComponent has no generic arguments
+// instead, any concrete TRenderComponent can utilize a TRenderComponent<TValue> as needed
+
+type RenderComponent<TValue, TRenderComponent extends ElementType> = Partial<
+  ComponentProps<TRenderComponent>
+> extends Partial<InjectedFieldProps<TValue>>
+  ? TRenderComponent
+  : never;
+
+type RenderComponentProps<
+  TValue,
+  TRenderComponent extends ElementType
+> = Partial<ComponentProps<TRenderComponent>> extends Partial<
+  InjectedFieldProps<TValue>
+>
+  ? ComponentProps<TRenderComponent>
+  : never;
+
+/** A specific Field instance to be rendered by the given TRenderComponent or by whatever default is reasonable */
+export type FieldProps<
+  TForm extends object,
+  TProp extends keyof TForm,
+  TRenderComponent extends ElementType
+> = {
+  name: TProp; // somewhat duplicated from useStandardFormInputProps but better for autocomplete
+  Component: RenderComponent<TForm[TProp], TRenderComponent>;
+
+  id?: string;
+  disabled?: boolean;
+  validate?:
+    | ValidationFunction<TForm[TProp]>
+    | ValidationFunction<TForm[TProp]>[];
+  normalize?: NormalizationFunction<TForm[TProp]>;
+} & Omit<
+  RenderComponentProps<TForm[TProp], TRenderComponent>,
+  keyof InjectedFieldProps<TForm[TProp]>
+>;
+
+/**
+ * Renders whatever Component is passed - injecting the formik values needed to finish wiring up that individual field.
+ * Should no Component be used then the default will be provided by the default lookup based on typeof(TForm[TProp])
+ */
+function Field<
+  TForm extends object,
+  TProp extends keyof TForm,
+  TRenderComponent extends ElementType
+>(
+  {
+    name,
+    Component,
+    id,
+    normalize,
+    validate,
+    disabled,
+    ...rest
+  }: FieldProps<TForm, TProp, TRenderComponent>,
+  ref: LegacyRef<any>
+) {
+  const [input, meta] = useStandardFormInput<TForm[TProp]>({
+    name: String(name),
+    id: id,
+    normalize: normalize,
+    validate: validate,
+    disabled: disabled,
+  });
+
+  // a bit of a hack so JSX is happy with us
+  const Wrapped = Component as React.ComponentType<
+    InjectedFieldProps<TForm[TProp]>
+  >;
+
+  return (
+    <FieldNameContext.Provider value={input.name}>
+      <Wrapped {...rest} ref={ref} id={id} input={input} meta={meta} />
+    </FieldNameContext.Provider>
+  );
+}
+
+// hack to get forwarded refs to work
+const FieldWithRef = React.forwardRef(Field as any);
+
+export default FieldWithRef as typeof Field;

package/src/Field/FieldErrorScrollTarget.tsx

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { FieldNameContext } from './FieldNameContext';
+
+export default function FieldErrorScrollTarget() {
+  const name = useContext(FieldNameContext);
+  if (!name) {
+    return null;
+  }
+  const divId = `${name.toLowerCase()}-error-scroll-target`;
+  return <div id={divId} style={{ display: 'none' }} />;
+}

package/src/Field/FieldNameContext.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+
+/** provides the full, qualified name of the current field name - including nested fields, path/dot delimited */
+export const FieldNameContext = React.createContext<string | undefined>(
+  undefined
+);

package/src/Field/FieldSection.tsx

@@ -0,0 +1,18 @@
+import React, { useContext } from 'react';
+import { FieldNameContext } from './FieldNameContext';
+
+interface FieldSectionProps {
+  children: React.ReactNode;
+  name: string;
+}
+
+export default function FieldSection({ children, name }: FieldSectionProps) {
+  const parentContext = useContext(FieldNameContext);
+  const effectiveValue = parentContext ? `${parentContext}.${name}` : name;
+
+  return (
+    <FieldNameContext.Provider value={effectiveValue}>
+      {children}
+    </FieldNameContext.Provider>
+  );
+}

package/src/Field/InjectedFieldProps.ts

@@ -0,0 +1,8 @@
+import { CustomFieldInputProps } from './CustomFieldInputProps';
+import { CustomFieldMetaProps } from './CustomFieldMetaProps';
+
+/** Defines what is injected by a Field wrapper of some TRenderComponent */
+export interface InjectedFieldProps<TValue> {
+  input: CustomFieldInputProps<TValue>;
+  meta: CustomFieldMetaProps<TValue>;
+}

package/src/Field/useStandardField.ts

@@ -0,0 +1,121 @@
+import { useContext, useEffect } from 'react';
+import { useField, useFormikContext } from 'formik';
+import { CustomFieldInputProps } from './CustomFieldInputProps';
+import { CustomFieldMetaProps } from './CustomFieldMetaProps';
+import { FieldNameContext } from './FieldNameContext';
+import { ServerErrorContext } from '../Form/ServerErrorContext';
+import { NormalizationFunction } from '../Normalization/NormalizationFunction';
+import { ValidationFunction } from '../Validation/ValidationFunction';
+
+export interface useStandardFieldProps<TValue> {
+  id?: string;
+  name: string;
+  disabled?: boolean;
+  validate?: ValidationFunction<TValue> | ValidationFunction<TValue>[];
+  normalize?: NormalizationFunction<TValue>;
+}
+
+// provides a consistent way to deal with all form fields (non array)
+export default function useStandardField<TValue>({
+  id: providedId,
+  name: providedName,
+  disabled,
+  validate,
+  normalize,
+}: useStandardFieldProps<TValue>): [
+  CustomFieldInputProps<TValue>,
+  CustomFieldMetaProps<TValue>
+] {
+  // 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 fieldNameContextValue = useContext(FieldNameContext);
+  const name = fieldNameContextValue
+    ? `${fieldNameContextValue}.${providedName}`
+    : providedName;
+
+  // ensure that nested contexts don't have duplicate id issues when an id is specified
+  const id = providedId
+    ? fieldNameContextValue
+      ? `${fieldNameContextValue}.${providedId}`
+      : providedId
+    : name;
+
+  // ensure that our custom validation rules are handled
+  // e.g. we allow arrays of validators
+  const [formikInput, formikMeta] = useField<TValue>({
+    name,
+    id: id ? id : name,
+    disabled: disabled,
+    validate: callAllValidators,
+  });
+  const { setFieldValue, isSubmitting } = useFormikContext();
+
+  const touched =
+    formikMeta.touched !== false && formikMeta.touched !== undefined;
+  useEffect(() => {
+    if (!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();
+    }
+  });
+
+  // these are the props we expect consumers of this hook to pass directly to the input (or other control)
+  const resultInput: CustomFieldInputProps<TValue> = {
+    name: formikInput.name,
+    // pass any direct from server props through normalize without making the form dirty (e.g. phone number)
+    value: normalize ? normalize(formikInput.value) : formikInput.value,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    // extensions to formik
+    id: id,
+  };
+
+  const resultMeta: CustomFieldMetaProps<TValue> = {
+    ...formikMeta,
+    error: getServerError(name) || (touched ? formikMeta.error : undefined),
+    // extensions to formik
+    warning: undefined, // TODO - did this never work?
+    touched: touched,
+  };
+
+  return [resultInput, resultMeta];
+
+  function handleBlur() {
+    formikInput.onBlur({ target: { name: name } });
+  }
+
+  function handleChange(value: TValue) {
+    if (disabled) {
+      return;
+    }
+    const normalized = normalize ? normalize(value) : value;
+    setFieldValue(name, normalized);
+    setServerError(name, undefined);
+  }
+
+  function callAllValidators(value: TValue) {
+    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;
+      }
+    }
+  }
+}