envoc-form 3.3.0 → 4.0.1-2

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 | React.ReactNode;
+
+  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,48 @@
+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'
+    | 'password'
+    | 'textarea';
+}
+
+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();
+  });
+});

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

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

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

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconInputGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="icon-input-group input-group group"
+    >
+      <div
+        id="namewithicon-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="nameWithIcon"
+      />
+      <span>
+        Pretend this is an icon
+      </span>
+      <input
+        class="icon-input-group input-group"
+        id="nameWithIcon"
+        name="nameWithIcon"
+        value=""
+      />
+    </div>
+  </form>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MoneyInputGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="something-here money-group input-group group"
+    >
+      <div
+        id="yearlysalaryusd-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="yearlySalaryUSD"
+      >
+        Salary
+      </label>
+      <input
+        class="something-here money-group input-group"
+        id="yearlySalaryUSD"
+        min="0"
+        name="yearlySalaryUSD"
+        step="0.01"
+        type="number"
+        value=""
+      />
+    </div>
+  </form>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NumberInputGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="number-group input-group group"
+    >
+      <div
+        id="numberofarms-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="numberOfArms"
+      >
+        Arm Count
+      </label>
+      <input
+        class="number-group input-group"
+        id="numberOfArms"
+        name="numberOfArms"
+        type="number"
+        value=""
+      />
+    </div>
+  </form>
+</DocumentFragment>
+`;

package/src/Input/__Tests__/__snapshots__/StringInputGroup.test.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StringInputGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="string-group input-group group"
+    >
+      <div
+        id="name-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="name"
+      >
+        Name
+      </label>
+      <input
+        class="string-group input-group"
+        id="name"
+        name="name"
+        value=""
+      />
+    </div>
+  </form>
+</DocumentFragment>
+`;

package/src/Normalization/NormalizationFunction.ts

@@ -0,0 +1,4 @@
+/** Normalization of values */
+export interface NormalizationFunction<TValue> {
+  (value: TValue): TValue;
+}