envoc-form 5.0.9 → 6.0.1-1

package/src/DateTimePicker/StringDateTimePickerGroup.tsx

@@ -1,61 +0,0 @@
-import DateTimePickerGroup from './DateTimePickerGroup';
-import { DateTimePickerHelper } from './DateTimePickerHelper';
-
-export interface StringDateTimePickerGroupProps
-  extends DateTimePickerHelper<string | undefined | null> {}
-
-/**
- * Date Time picker input that consumes JS Date object and outputs as a date time offset string in ISO format `YYYY-MM-DDTHH:mm:ss.sss±hh:mm`.
- *
- * Default display to the user is in `MM/DD/YYYY HH:mm:ss AM/PM` format.
- */
-export default function StringDateTimePickerGroup(
-  props: StringDateTimePickerGroupProps
-) {
-  return <DateTimePickerGroup {...props} convert={convertToISOString} />;
-}
-
-function convertToISOString(date: Date): string {
-  // Get the offset in minutes
-  const offsetMinutes = date.getTimezoneOffset();
-
-  // Calculate the offset in hours and minutes
-  const offsetHours = Math.floor(Math.abs(offsetMinutes) / 60);
-  const offsetMinutesPart = Math.abs(offsetMinutes) % 60;
-
-  // Format the offset in the required format (+/-hh:mm)
-  const offsetString =
-    (offsetMinutes >= 0 ? '-' : '+') +
-    String(offsetHours).padStart(2, '0') +
-    ':' +
-    String(offsetMinutesPart).padStart(2, '0');
-
-  // Format the date in the required format using `intl.DateTimeFormat`
-  const year = new Intl.DateTimeFormat('en', { year: 'numeric' })
-    .format(date)
-    .padStart(4, '0');
-
-  const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(
-    date
-  );
-
-  const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date);
-
-  const hour = new Intl.DateTimeFormat('en', {
-    hour: '2-digit',
-    hourCycle: 'h23',
-  }).format(date);
-
-  const minute = new Intl.DateTimeFormat('en', { minute: '2-digit' })
-    .format(date)
-    .padStart(2, '0');
-
-  const second = new Intl.DateTimeFormat('en', {
-    second: '2-digit',
-    fractionalSecondDigits: 3,
-  })
-    .format(date)
-    .padStart(6, '0');
-
-  return `${year}-${month}-${day}T${hour}:${minute}:${second}${offsetString}`;
-}

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

@@ -1,217 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StringDateTimePickerGroup has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-    class="envoc-form-form"
-  >
-    <div
-      class="envoc-form-date-time-picker envoc-form-group"
-    >
-      <div
-        id="createddatetime-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="createdDateTime"
-      >
-        Created Date Time
-      </label>
-      <div
-        class="react-datetime-picker react-datetime-picker--closed react-datetime-picker--enabled envoc-form-date-time-picker"
-        id="createdDateTime"
-      >
-        <div
-          class="react-datetime-picker__wrapper"
-        >
-          <div
-            class="react-datetime-picker__inputGroup"
-          >
-            <input
-              hidden=""
-              max="2023-09-23T00:00"
-              min="2022-06-22T00:00"
-              name="datetime"
-              step="60"
-              style="visibility: hidden; position: absolute; z-index: -999;"
-              type="datetime-local"
-              value=""
-            />
-            <input
-              autocomplete="off"
-              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__month"
-              data-input="true"
-              inputmode="numeric"
-              max="12"
-              min="1"
-              name="month"
-              placeholder="mm"
-              type="number"
-              value=""
-            />
-            <span
-              class="react-datetime-picker__inputGroup__divider"
-            >
-              /
-            </span>
-            <input
-              autocomplete="off"
-              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__day"
-              data-input="true"
-              inputmode="numeric"
-              max="31"
-              min="1"
-              name="day"
-              placeholder="dd"
-              type="number"
-              value=""
-            />
-            <span
-              class="react-datetime-picker__inputGroup__divider"
-            >
-              /
-            </span>
-            <input
-              autocomplete="off"
-              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__year"
-              data-input="true"
-              inputmode="numeric"
-              max="2023"
-              min="2022"
-              name="year"
-              placeholder="yyyy"
-              step="1"
-              type="number"
-              value=""
-            />
-            <span
-              class="react-datetime-picker__inputGroup__divider"
-            >
-               
-            </span>
-            <input
-              autocomplete="off"
-              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__hour"
-              data-input="true"
-              inputmode="numeric"
-              max="12"
-              min="1"
-              name="hour12"
-              placeholder="--"
-              type="number"
-              value=""
-            />
-            <span
-              class="react-datetime-picker__inputGroup__divider"
-            >
-              :
-            </span>
-            <input
-              autocomplete="off"
-              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__minute"
-              data-input="true"
-              inputmode="numeric"
-              max="59"
-              min="0"
-              name="minute"
-              placeholder="--"
-              type="number"
-              value=""
-            />
-            <span
-              class="react-datetime-picker__inputGroup__divider"
-            >
-               
-            </span>
-            <select
-              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__amPm"
-              data-input="true"
-              data-select="true"
-              name="amPm"
-            >
-              <option
-                value=""
-              >
-                --
-              </option>
-              <option
-                value="am"
-              >
-                AM
-              </option>
-              <option
-                value="pm"
-              >
-                PM
-              </option>
-            </select>
-          </div>
-          <button
-            class="react-datetime-picker__clear-button react-datetime-picker__button"
-            type="button"
-          >
-            <svg
-              class="react-datetime-picker__clear-button__icon react-datetime-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
-            aria-expanded="false"
-            class="react-datetime-picker__calendar-button react-datetime-picker__button"
-            type="button"
-          >
-            <svg
-              class="react-datetime-picker__calendar-button__icon react-datetime-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

@@ -1,10 +0,0 @@
-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

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

package/src/Field/Field.tsx

@@ -1,127 +0,0 @@
-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';
-import { required as requiredValidator } from '../Validation/validators';
-
-// 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 | undefined | null>
->
-  ? TRenderComponent
-  : never;
-
-export type RenderComponentProps<
-  TValue,
-  TRenderComponent extends ElementType
-> = Partial<ComponentProps<TRenderComponent>> extends Partial<
-  InjectedFieldProps<TValue | undefined | null>
->
-  ? 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 of the field. Used on submission. */
-  name: TProp; // somewhat duplicated from useStandardFormInputProps but better for autocomplete
-  /** Component to be rendered. Usually this is a type of input group e.g. `<StringInputGroup/>` */
-  Component: RenderComponent<TForm[TProp], TRenderComponent>;
-  /** Id of the field. */
-  id?: string;
-  /** Whether the field should be disabled. */
-  disabled?: boolean;
-  /** Client side validation functions */
-  validate?:
-    | ValidationFunction<TForm[TProp]>
-    | ValidationFunction<TForm[TProp]>[];
-  /** Function to modify the field value without making the form dirty. (e.g. phone number) */
-  normalize?: NormalizationFunction<TForm[TProp]>;
-  required?: boolean;
-} & 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,
-    disabled,
-    validate,
-    normalize,
-    required,
-    ...rest
-  }: FieldProps<TForm, TProp, TRenderComponent>,
-  ref: LegacyRef<any>
-) {
-  // enforces that validate is an array and adds the required validator if required prop is true
-  const validateArray: ValidationFunction<TForm[TProp]>[] = Array.isArray(
-    validate
-  )
-    ? validate
-    : validate !== undefined
-    ? [validate]
-    : [];
-
-  const validateWithRequired = required
-    ? validateArray
-        .filter((x) => x !== requiredValidator)
-        .concat([requiredValidator])
-    : validateArray;
-
-  const isRequired =
-    required || validateWithRequired.includes(requiredValidator);
-
-  const [input, meta] = useStandardFormInput<TForm[TProp]>({
-    name: String(name),
-    id: id,
-    disabled: disabled,
-    validate: validateWithRequired,
-    normalize: normalize,
-  });
-
-  // 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={input.id}
-        input={input}
-        meta={meta}
-        required={isRequired}
-        disabled={disabled}
-      />
-    </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

@@ -1,12 +0,0 @@
-import { useContext } from 'react';
-import { FieldNameContext } from './FieldNameContext';
-
-/** Hidden `<div/>` that acts as an anchor to scroll to when a form error occurs. */
-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

@@ -1,6 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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 to render inside of the field. */
-  Component: RenderComponent<TValue, TRenderComponent>;
-  /** Value of the field. */
-  value: TValue;
-  /** Function to change the value of the field. */
-  onChange: (arg: TValue) => void;
-} & Omit<
-  RenderComponentProps<TValue, TRenderComponent>,
-  | keyof InjectedFieldProps<TValue>
-  | 'value'
-  | 'onChange'
-  | 'normalize'
-  | 'validate'
->;
-
-/** The stand alone version of `<Field/>`. Can use a type of input component outside of a `<Form/>`. */
-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} />;
-}

package/src/Field/useStandardField.ts

@@ -1,125 +0,0 @@
-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 of the field. */
-  id?: string;
-  /** Name of the field. */
-  name: string;
-  /** Whether the field should be disabled. */
-  disabled?: boolean;
-  /** Function to validate the field. */
-  validate?: ValidationFunction<TValue> | ValidationFunction<TValue>[];
-  /** Function to modify the field value without making the form dirty. (e.g. phone number) */
-  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 { setFieldTouched, 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
-      // It looks like this was going to be a thing: https://github.com/jaredpalmer/formik/issues/691
-      // Formik appears to not have an active maintainer: https://github.com/jaredpalmer/formik/discussions/3526
-      // We previously had a different fix in place using handleBlur, but it was causing an infinite update cycle.
-      // This was noted as existing, but there was a note about it not working for FieldArray (this does appear to work in my testing with FieldArray)
-      setFieldTouched(name);
-    }
-  }, [isSubmitting, name, setFieldTouched, touched]);
-
-  // 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;
-      }
-    }
-  }
-}