envoc-form 3.2.0 → 4.0.1-1

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/DatePicker/DateOnlyDatePickerGroup.tsx

@@ -0,0 +1,24 @@
+import DatePickerGroup from './DatePickerGroup';
+import { DatePickerHelper } from './DatePickerHelper';
+
+export interface DateOnly {
+  year?: number;
+  month?: number;
+  day?: number;
+}
+
+export interface DateOnlyDatePickerGroupProps
+  extends DatePickerHelper<DateOnly | undefined> {}
+export default function DateOnlyDatePickerGroup(
+  props: DateOnlyDatePickerGroupProps
+) {
+  return <DatePickerGroup {...props} convert={convertToDateOnly} />;
+}
+
+function convertToDateOnly(arg: Date) {
+  return {
+    year: arg.getFullYear(),
+    month: arg.getMonth() + 1,
+    day: arg.getDate(),
+  };
+}

package/src/DatePicker/DatePicker.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DateOnlyDatePickerGroup from './DateOnlyDatePickerGroup';
+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={DateOnlyDatePickerGroup}
+            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={DateOnlyDatePickerGroup}
+            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/DatePicker/DatePickerGroup.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import DatePicker, { DatePickerProps } from 'react-date-picker/dist/entry.nostyle';
+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
+
+export interface DatePickerGroupProps<T>
+  extends InjectedFieldProps<T | undefined>,
+    Omit<
+      DatePickerProps,
+      keyof InjectedFieldProps<T> | 'name' | 'value' | 'className'
+    >,
+    Omit<GroupProps, keyof InjectedFieldProps<T> | 'children'> {
+  convert: (arg: Date) => T;
+}
+
+export default function DatePickerGroup<T>({
+  input,
+  meta,
+  label,
+  helpText,
+  className,
+  disabled,
+  convert,
+  ...rest
+}: DatePickerGroupProps<T>) {
+  const [displayDate, setDisplayDate] = useState<Date | null>(null);
+
+  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>
+  );
+
+  function handleChange(e: Date | Date[] | string | undefined) {
+    const { onChange } = input;
+    if (onChange === null) {
+      return;
+    }
+
+    if (!e) {
+      onChange(undefined);
+      setDisplayDate(null);
+      return;
+    } else if (typeof e === 'string') {
+      const parsedValue = parseISO(e.toString().split('T')[0]);
+      setDisplayDate(parsedValue);
+      onChange(convert(parsedValue));
+    } else if (e instanceof Date) {
+      const parsedValue = parseISO(e.toISOString().split('T')[0]);
+      setDisplayDate(parsedValue);
+      onChange(convert(parsedValue));
+    } else {
+      // e is instanceof Date[]
+      const parsedValue = parseISO(e[0].toISOString().split('T')[0]);
+
+      setDisplayDate(parsedValue);
+      onChange(convert(parsedValue));
+    }
+  }
+}

package/src/DatePicker/DatePickerHelper.ts

@@ -0,0 +1,4 @@
+import { DatePickerGroupProps } from './DatePickerGroup';
+
+export interface DatePickerHelper<T>
+  extends Omit<DatePickerGroupProps<T>, 'convert'> {}

package/src/DatePicker/StringDatePickerGroup.tsx

@@ -0,0 +1,14 @@
+import DatePickerGroup from './DatePickerGroup';
+import { DatePickerHelper } from './DatePickerHelper';
+
+export interface StringDatePickerGroupProps
+  extends DatePickerHelper<string | undefined> {}
+export default function StringDatePickerGroup(
+  props: StringDatePickerGroupProps
+) {
+  return <DatePickerGroup {...props} convert={convertToDateOnly} />;
+}
+
+function convertToDateOnly(arg: Date) {
+  return arg.toISOString();
+}

package/src/DatePicker/__snapshots__/DatePicker.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,93 @@
+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
+
+export type RenderComponent<
+  TValue,
+  TRenderComponent extends ElementType
+> = Partial<ComponentProps<TRenderComponent>> extends Partial<
+  InjectedFieldProps<TValue>
+>
+  ? TRenderComponent
+  : never;
+
+export 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/StandAloneInput.tsx

@@ -0,0 +1,51 @@
+import { ElementType, useRef } from 'react';
+import * as uuid from 'uuid';
+import { CustomFieldInputProps } from './CustomFieldInputProps';
+import { CustomFieldMetaProps } from './CustomFieldMetaProps';
+import { RenderComponent, RenderComponentProps } from './Field';
+import { InjectedFieldProps } from './InjectedFieldProps';
+
+export type StandAloneInputProps<
+  TValue,
+  TRenderComponent extends ElementType
+> = {
+  Component: RenderComponent<TValue, TRenderComponent>;
+  value: TValue;
+  onChange: (arg: TValue) => void;
+} & Omit<
+  RenderComponentProps<TValue, TRenderComponent>,
+  | keyof InjectedFieldProps<TValue>
+  | 'value'
+  | 'onChange'
+  | 'normalize'
+  | 'validate'
+>;
+
+export default function StandAloneInput<TValue, TComponent extends ElementType>(
+  props: StandAloneInputProps<TValue, TComponent>
+) {
+  const { Component, value, onChange, disabled, ...rest } = props;
+  const handleChange = (arg: TValue) => {
+    if (!disabled) {
+      onChange(arg);
+    }
+  };
+  const Wrapped = Component as React.ComponentType<InjectedFieldProps<TValue>>;
+  const idRef = useRef(uuid.v4());
+  const input: CustomFieldInputProps<TValue> = {
+    id: idRef.current,
+    name: idRef.current,
+    value: value,
+    onChange: handleChange,
+    onBlur: () => {},
+  };
+
+  const meta: CustomFieldMetaProps<TValue> = {
+    warning: undefined,
+    value: value,
+    touched: false,
+    initialTouched: false,
+  };
+
+  return <Wrapped {...rest} disabled={disabled} input={input} meta={meta} />;
+}