envoc-form 4.0.1-10 → 4.0.1-12

package/src/SubmitFormButton.tsx

@@ -5,9 +5,12 @@ import { FormDefaults } from './FormDefaults';
 
 export interface SubmitFormButtonProps
   extends Omit<React.HTMLProps<HTMLButtonElement>, 'type'> {
+  /** Allow the form to be submitted without any changes. By default this is not allowed. */
   allowPristineSubmit?: boolean;
+  /** Text to display on the button. Default text is 'Submit'. */
   children?: React.ReactNode;
 }
+
 function SubmitFormButton(
   {
     allowPristineSubmit,
@@ -45,6 +48,7 @@ function SubmitFormButton(
   );
 }
 
+/** Generic submit button for forms. */
 export default React.forwardRef(
   SubmitFormButton
-) as React.ComponentType<SubmitFormButtonProps>;
+) as React.FunctionComponent<SubmitFormButtonProps>;

package/src/TextArea/TextAreaGroup.tsx

@@ -1,11 +1,11 @@
 import React, { LegacyRef } from 'react';
 import classNames from 'classnames';
 import { InjectedFieldProps } from '../Field/InjectedFieldProps';
-import Group, { GroupProps } from '../Group';
 import { FormDefaults } from '../FormDefaults';
+import Group, { GroupProps } from '../Group';
 
 export interface TextAreaGroupProps
-  extends InjectedFieldProps<string | undefined>,
+  extends InjectedFieldProps<string | undefined | null>,
     Omit<
       React.HTMLProps<HTMLTextAreaElement>,
       keyof InjectedFieldProps<any> | 'children' | 'className' | 'label'
@@ -14,7 +14,6 @@ export interface TextAreaGroupProps
   icon?: React.ReactNode;
 }
 
-/** generic controlled <textarea/> wrapped by a Group */
 function TextAreaGroup(
   {
     input,
@@ -45,7 +44,7 @@ function TextAreaGroup(
       <textarea
         {...input}
         {...rest}
-        value={input.value}
+        value={input.value ?? ''}
         onChange={(val) => input.onChange(val.target.value)}
         ref={ref}
         className={classNames(
@@ -57,6 +56,7 @@ function TextAreaGroup(
   );
 }
 
+/** Generic controlled `<textarea/>` wrapped by a `<Group/>` */
 const TextAreaGroupWithRef = React.forwardRef(
   TextAreaGroup
 ) as React.ComponentType<TextAreaGroupProps>;

package/src/Validation/validators.ts

@@ -9,13 +9,14 @@ export const required = (value: any) =>
     ? undefined
     : 'Required';
 
-//asserts that the value is a certain number of characters. numbers are coerced to a string
-export const length = (len: number) => (value: string | number | undefined) => {
-  const hasError = getLengthOfValue(value) !== len;
-  return !hasError ? undefined : `Length must be ${len}`;
-};
+/** Asserts that the value is a certain number of characters. numbers are coerced to a string */
+export const length =
+  (len: number) => (value: string | number | undefined | null) => {
+    const hasError = getLengthOfValue(value) !== len;
+    return !hasError ? undefined : `Length must be ${len}`;
+  };
 
-export const integer = (val: string | number | undefined) => {
+export const integer = (val: string | number | undefined | null) => {
   if (!val) {
     return undefined;
   }
@@ -25,41 +26,42 @@ export const integer = (val: string | number | undefined) => {
 };
 
 export const maxLength =
-  (len: number) => (value: string | number | undefined) => {
+  (len: number) => (value: string | number | undefined | null) => {
     const hasError = getLengthOfValue(value) > len;
     return !hasError ? undefined : `Maximum length ${len} exceeded`;
   };
 
 export const maxCount =
-  (count: number) => (value: { isDeleted?: boolean }[] | undefined) => {
+  (count: number) => (value: { isDeleted?: boolean }[] | undefined | null) => {
     const hasError =
       !!value && value.filter((x) => !x.isDeleted).length > count;
     return !hasError ? undefined : `Should not have more than ${count}`;
   };
 
 export const minCount =
-  (count: number) => (value: { isDeleted?: boolean }[] | undefined) => {
+  (count: number) => (value: { isDeleted?: boolean }[] | undefined | null) => {
     const hasError = !value || value.filter((x) => !x.isDeleted).length < count;
     return !hasError ? undefined : `Should have at least ${count}`;
   };
 
-export const maxValue = (max: number) => (value: number | undefined) => {
+export const maxValue = (max: number) => (value: number | undefined | null) => {
   const hasError = !!value && value > max;
   return !hasError ? undefined : `Maximum value ${max} exceeded`;
 };
 
-export const minValue = (min: number) => (value: number | undefined) => {
+export const minValue = (min: number) => (value: number | undefined | null) => {
   const hasError = !value || value < min;
   return !hasError ? undefined : `Minimum value ${min} not met`;
 };
 
-export const zipCode = (value: string | undefined) => {
+/** Validate for a ZIP Code. Accepts formats: ##### and #####-#### */
+export const zipCode = (value: string | undefined | null) => {
   return value && !/^[0-9]{5}(?:-[0-9]{4})?$/.test(value)
     ? 'Invalid ZIP Code'
     : undefined;
 };
 
-//one of the validators provided must be true
+/** One of the validators provided must be true. */
 export const any =
   <TValue>(validatorList: ValidationFunction<TValue>[]) =>
   (value: TValue) => {
@@ -73,7 +75,10 @@ export const any =
     );
   };
 
-function getLengthOfValue(value: string | number | undefined) {
+function getLengthOfValue(value: string | number | undefined | null) {
+  if (value === null) {
+    return 0;
+  }
   switch (typeof value) {
     case 'undefined':
       return 0;

package/src/__Tests__/FormTestBase.tsx

@@ -1,28 +1,29 @@
-import '@testing-library/jest-dom/extend-expect';
 import { HashRouter } from 'react-router-dom';
-import { ValidatedApiResult } from 'Validation/ValidatedApiResult';
-import { Form, FormBuilderProp } from '../../src';
+import { Form, FormBuilderProp } from '../';
+import { ValidatedApiResult } from '../Validation/ValidatedApiResult';
 
 interface FormTestBaseProps<TForm extends object> {
   children: (formBuilder: FormBuilderProp<TForm>) => JSX.Element;
   initialValues?: TForm;
+  handleSubmit?: (data: TForm | FormData) => Promise<ValidatedApiResult>;
 }
 
 export default function FormTestBase<TForm extends PersonDto>({
   children,
   initialValues,
+  handleSubmit,
 }: FormTestBaseProps<TForm>) {
   return (
     <HashRouter>
-      <Form onSubmit={onSubmit} initialValues={initialValues}>
+      <Form
+        onSubmit={handleSubmit ? handleSubmit : onSubmit}
+        initialValues={initialValues}>
         {children}
       </Form>
     </HashRouter>
   );
 
-  async function onSubmit(
-    data: PersonDto | FormData
-  ): Promise<ValidatedApiResult> {
+  async function onSubmit(data: TForm | FormData): Promise<ValidatedApiResult> {
     const isFormData = data instanceof FormData;
     const result = await fetch('/api/submit', {
       body: isFormData ? data : JSON.stringify(data),
@@ -43,7 +44,7 @@ export default function FormTestBase<TForm extends PersonDto>({
   }
 }
 
-interface PersonDto {
+export interface PersonDto {
   name?: string | undefined;
   nameWithIcon?: string | undefined;
   numberOfArms?: number;

package/src/__Tests__/RealisticForm.test.tsx

@@ -0,0 +1,82 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import FormTestBase from './FormTestBase';
+import { Form, StringInputGroup, ValidatedApiResult } from '../';
+import { PersonDto } from '../__Tests__/FormTestBase';
+import StandardFormActions from '../StandardFormActions';
+import { validators } from '../';
+
+const handleSubmitMock = jest.fn((value: PersonDto | FormData) => {
+  //return value;
+  return new Promise<ValidatedApiResult>((res, rej) => {
+    setTimeout(() => {
+      res({});
+    }, 15);
+  });
+});
+
+describe('Realistic Form', () => {
+  it('Validates, resolves validation, submits values', async () => {
+    global.scrollTo = jest.fn();
+    const fullForm = (
+      <FormTestBase handleSubmit={handleSubmitMock}>
+        {({ Field }) => (
+          <>
+            <Field name="name" label="name" Component={StringInputGroup} />
+            <Field
+              name="nameWithIcon"
+              label="Name with Icon"
+              Component={StringInputGroup}
+              validate={validators.required}
+            />
+            <StandardFormActions />
+            <Form.DisplayFormState />
+          </>
+        )}
+      </FormTestBase>
+    );
+
+    render(fullForm);
+    const nameInput = screen.getByLabelText('name');
+    const formSubmitButton = screen.getByRole('button', {
+      name: 'Submit',
+    });
+    //The form should start off with the submit button disabled
+    expect(formSubmitButton).toBeDisabled();
+
+    //Enter a name into the name input
+    user.click(nameInput);
+    user.type(nameInput, 'Travis Overmier');
+    expect(nameInput).toHaveValue('Travis Overmier');
+
+    //Submit should be enabled, click submit
+    expect(formSubmitButton).toBeEnabled();
+    user.click(formSubmitButton);
+
+    //Submit should disable while 'submitting' then re-enable
+    expect(formSubmitButton).toBeDisabled();
+    await waitFor(() => {
+      expect(formSubmitButton).toBeEnabled();
+    });
+
+    //Validation message should appear
+    const nameWithIconInput = screen.getByLabelText('Name with Icon');
+    expect(nameWithIconInput).toHaveErrorMessage('Required');
+
+    //Fill in field, error message goes away
+    user.type(nameWithIconInput, 'Kyle Joiner');
+    user.tab();
+    await waitFor(() => {
+      expect(nameWithIconInput).not.toHaveErrorMessage();
+    });
+
+    //Click the submit button
+    user.click(formSubmitButton);
+    await waitFor(() => {
+      expect(handleSubmitMock).toHaveBeenCalled();
+      expect(JSON.stringify(handleSubmitMock.mock.calls[0][0])).toBe(
+        `{"name":"Travis Overmier","nameWithIcon":"Kyle Joiner"}`
+      );
+    });
+  });
+});

package/src/index.ts

@@ -16,7 +16,7 @@ export type { ConfirmDeleteFormProps } from './ConfirmDeleteForm/ConfirmDeleteFo
 
 // Date
 export { default as DatePickerGroup } from './DatePicker/DatePickerGroup';
-export type { DatePickerGroupProps as DatePickerGroupProps } from './DatePicker/DatePickerGroup';
+export type { DatePickerGroupProps } from './DatePicker/DatePickerGroup';
 export { convertToTimeZoneInsensitiveISOString } from './DatePicker/DatePickerGroup';
 
 export type { DatePickerHelper } from './DatePicker/DatePickerHelper';
@@ -68,17 +68,17 @@ export type {
 } from './Form/ServerErrorContext';
 
 export { default as FormActions } from './FormActions';
-export type { FormActionsProps as FormActionsProps } from './FormActions';
+export type { FormActionsProps } from './FormActions';
 
 export { default as StandardFormActions } from './StandardFormActions';
-export type { StandardFormActionsProps as StandardFormActionsProps } from './StandardFormActions';
+export type { StandardFormActionsProps } from './StandardFormActions';
 
 // FormDefaults
 export { FormDefaults } from './FormDefaults';
 
 // Input
 export { default as Group } from './Group';
-export type { GroupProps as GroupProps } from './Group';
+export type { GroupProps } from './Group';
 
 export { default as IconInputGroup } from './Input/IconInputGroup';
 export type { IconInputGroupProps } from './Input/IconInputGroup';

package/src/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/es/__Tests__/FormTestBase.d.ts

@@ -1,27 +0,0 @@
-/// <reference types="react" />
-import '@testing-library/jest-dom/extend-expect';
-import { FormBuilderProp } from '../../src';
-interface FormTestBaseProps<TForm extends object> {
-    children: (formBuilder: FormBuilderProp<TForm>) => JSX.Element;
-    initialValues?: TForm;
-}
-export default function FormTestBase<TForm extends PersonDto>({ children, initialValues, }: FormTestBaseProps<TForm>): JSX.Element;
-interface PersonDto {
-    name?: string | undefined;
-    nameWithIcon?: string | undefined;
-    numberOfArms?: number;
-    phoneNumber?: string;
-    yearlySalaryUSD?: number;
-    isCool?: boolean;
-    gradDate?: string;
-    favoriteDate?: string;
-    favoriteNumber?: number;
-    favoriteColor?: string;
-    favoriteColors?: string[];
-    favoriteNames?: string[];
-    allowLogin?: boolean;
-    userRoles?: number[];
-    profileImage?: any;
-    favoritePictures?: any[];
-}
-export {};

package/es/__Tests__/FormTestBase.js

@@ -1,83 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import '@testing-library/jest-dom/extend-expect';
-import { HashRouter } from 'react-router-dom';
-import { Form } from '../../src';
-export default function FormTestBase(_a) {
-    var children = _a.children, initialValues = _a.initialValues;
-    return (_jsx(HashRouter, { children: _jsx(Form, __assign({ onSubmit: onSubmit, initialValues: initialValues }, { children: children })) }));
-    function onSubmit(data) {
-        return __awaiter(this, void 0, void 0, function () {
-            var isFormData, result, apiResult;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        isFormData = data instanceof FormData;
-                        return [4 /*yield*/, fetch('/api/submit', {
-                                body: isFormData ? data : JSON.stringify(data),
-                                method: 'POST',
-                                headers: {
-                                    'Content-Type': isFormData ? 'multipart/form-data' : 'application/json',
-                                    'X-Show-Errors': "Errors go here",
-                                },
-                            })];
-                    case 1:
-                        result = _a.sent();
-                        return [4 /*yield*/, result.json()];
-                    case 2:
-                        apiResult = _a.sent();
-                        if (!apiResult.hasErrors) {
-                            alert('submitted');
-                        }
-                        return [2 /*return*/, apiResult];
-                }
-            });
-        });
-    }
-}

package/es/__Tests__/index.d.ts

@@ -1,2 +0,0 @@
-import FormTestBase from './FormTestBase';
-export { FormTestBase };

package/es/__Tests__/index.js

@@ -1,2 +0,0 @@
-import FormTestBase from './FormTestBase';
-export { FormTestBase };

package/lib/__Tests__/FormTestBase.d.ts

@@ -1,27 +0,0 @@
-/// <reference types="react" />
-import '@testing-library/jest-dom/extend-expect';
-import { FormBuilderProp } from '../../src';
-interface FormTestBaseProps<TForm extends object> {
-    children: (formBuilder: FormBuilderProp<TForm>) => JSX.Element;
-    initialValues?: TForm;
-}
-export default function FormTestBase<TForm extends PersonDto>({ children, initialValues, }: FormTestBaseProps<TForm>): JSX.Element;
-interface PersonDto {
-    name?: string | undefined;
-    nameWithIcon?: string | undefined;
-    numberOfArms?: number;
-    phoneNumber?: string;
-    yearlySalaryUSD?: number;
-    isCool?: boolean;
-    gradDate?: string;
-    favoriteDate?: string;
-    favoriteNumber?: number;
-    favoriteColor?: string;
-    favoriteColors?: string[];
-    favoriteNames?: string[];
-    allowLogin?: boolean;
-    userRoles?: number[];
-    profileImage?: any;
-    favoritePictures?: any[];
-}
-export {};

package/lib/__Tests__/FormTestBase.js

@@ -1,86 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-require("@testing-library/jest-dom/extend-expect");
-var react_router_dom_1 = require("react-router-dom");
-var src_1 = require("../../src");
-function FormTestBase(_a) {
-    var children = _a.children, initialValues = _a.initialValues;
-    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.HashRouter, { children: (0, jsx_runtime_1.jsx)(src_1.Form, __assign({ onSubmit: onSubmit, initialValues: initialValues }, { children: children })) }));
-    function onSubmit(data) {
-        return __awaiter(this, void 0, void 0, function () {
-            var isFormData, result, apiResult;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        isFormData = data instanceof FormData;
-                        return [4 /*yield*/, fetch('/api/submit', {
-                                body: isFormData ? data : JSON.stringify(data),
-                                method: 'POST',
-                                headers: {
-                                    'Content-Type': isFormData ? 'multipart/form-data' : 'application/json',
-                                    'X-Show-Errors': "Errors go here",
-                                },
-                            })];
-                    case 1:
-                        result = _a.sent();
-                        return [4 /*yield*/, result.json()];
-                    case 2:
-                        apiResult = _a.sent();
-                        if (!apiResult.hasErrors) {
-                            alert('submitted');
-                        }
-                        return [2 /*return*/, apiResult];
-                }
-            });
-        });
-    }
-}
-exports.default = FormTestBase;

package/lib/__Tests__/index.d.ts

@@ -1,2 +0,0 @@
-import FormTestBase from './FormTestBase';
-export { FormTestBase };

package/lib/__Tests__/index.js

@@ -1,8 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormTestBase = void 0;
-var FormTestBase_1 = __importDefault(require("./FormTestBase"));
-exports.FormTestBase = FormTestBase_1.default;