envoc-form 5.0.3 → 5.0.5

package/src/TextArea/TextAreaGroup.tsx

@@ -1,64 +1,64 @@
-import React, { LegacyRef } from 'react';
-import classNames from 'classnames';
-import { InjectedFieldProps } from '../Field/InjectedFieldProps';
-import { FormDefaults } from '../FormDefaults';
-import Group, { GroupProps } from '../Group';
-
-export interface TextAreaGroupProps
-  extends InjectedFieldProps<string | undefined | null>,
-    Omit<
-      React.HTMLProps<HTMLTextAreaElement>,
-      keyof InjectedFieldProps<any> | 'children' | 'className' | 'label'
-    >,
-    Omit<GroupProps, keyof InjectedFieldProps<any> | 'children'> {
-  icon?: React.ReactNode;
-}
-
-function TextAreaGroup(
-  {
-    input,
-    meta,
-    label,
-    helpText,
-    className,
-    required,
-    disabled,
-    icon,
-    ...rest
-  }: TextAreaGroupProps,
-  ref: LegacyRef<HTMLTextAreaElement>
-) {
-  return (
-    <Group
-      input={input}
-      meta={meta}
-      required={required}
-      disabled={disabled}
-      label={label}
-      helpText={helpText}
-      className={classNames(
-        className,
-        FormDefaults.cssClassPrefix + 'text-area-group'
-      )}>
-      {icon}
-      <textarea
-        {...input}
-        {...rest}
-        value={input.value ?? ''}
-        onChange={(val) => input.onChange(val.target.value)}
-        ref={ref}
-        className={classNames(
-          className,
-          FormDefaults.cssClassPrefix + 'text-area-group'
-        )}
-      />
-    </Group>
-  );
-}
-
-/** Generic controlled `<textarea/>` wrapped by a `<Group/>` */
-const TextAreaGroupWithRef = React.forwardRef(
-  TextAreaGroup
-) as React.ComponentType<TextAreaGroupProps>;
-
-export default TextAreaGroupWithRef;
+import React, { LegacyRef } from 'react';
+import classNames from 'classnames';
+import { InjectedFieldProps } from '../Field/InjectedFieldProps';
+import { FormDefaults } from '../FormDefaults';
+import Group, { GroupProps } from '../Group';
+
+export interface TextAreaGroupProps
+  extends InjectedFieldProps<string | undefined | null>,
+    Omit<
+      React.HTMLProps<HTMLTextAreaElement>,
+      keyof InjectedFieldProps<any> | 'children' | 'className' | 'label'
+    >,
+    Omit<GroupProps, keyof InjectedFieldProps<any> | 'children'> {
+  icon?: React.ReactNode;
+}
+
+function TextAreaGroup(
+  {
+    input,
+    meta,
+    label,
+    helpText,
+    className,
+    required,
+    disabled,
+    icon,
+    ...rest
+  }: TextAreaGroupProps,
+  ref: LegacyRef<HTMLTextAreaElement>
+) {
+  return (
+    <Group
+      input={input}
+      meta={meta}
+      required={required}
+      disabled={disabled}
+      label={label}
+      helpText={helpText}
+      className={classNames(
+        className,
+        FormDefaults.cssClassPrefix + 'text-area-group'
+      )}>
+      {icon}
+      <textarea
+        {...input}
+        {...rest}
+        value={input.value ?? ''}
+        onChange={(val) => input.onChange(val.target.value)}
+        ref={ref}
+        className={classNames(
+          className,
+          FormDefaults.cssClassPrefix + 'text-area-group'
+        )}
+      />
+    </Group>
+  );
+}
+
+/** Generic controlled `<textarea/>` wrapped by a `<Group/>` */
+const TextAreaGroupWithRef = React.forwardRef(
+  TextAreaGroup
+) as React.ComponentType<TextAreaGroupProps>;
+
+export default TextAreaGroupWithRef;

package/src/Validation/ValidatedApiResult.ts

@@ -1,8 +1,8 @@
-import { ValidationError } from './ValidationError';
-
-// TODO: this means that all template projects MUST have this API shape - thoughts?
-/** The root result from a typical envoc API call when forms are returned */
-export interface ValidatedApiResult {
-  validationFailures?: ValidationError[];
-  hasErrors?: boolean;
-}
+import { ValidationError } from './ValidationError';
+
+// TODO: this means that all template projects MUST have this API shape - thoughts?
+/** The root result from a typical envoc API call when forms are returned */
+export interface ValidatedApiResult {
+  validationFailures?: ValidationError[];
+  hasErrors?: boolean;
+}

package/src/Validation/ValidationError.ts

@@ -1,6 +1,6 @@
-// TODO: this means that all template projects MUST have this API shape - thoughts?
-/** Represents a server side validation failure - only 'standard' for envoc */
-export interface ValidationError {
-  propertyName?: string;
-  errorMessage?: string;
-}
+// TODO: this means that all template projects MUST have this API shape - thoughts?
+/** Represents a server side validation failure - only 'standard' for envoc */
+export interface ValidationError {
+  propertyName?: string;
+  errorMessage?: string;
+}

package/src/Validation/ValidationFunction.ts

@@ -1,4 +1,4 @@
-/** Client side validation function */
-export interface ValidationFunction<TValue> {
-  (value: TValue): string | undefined;
-}
+/** Client side validation function */
+export interface ValidationFunction<TValue> {
+  (value: TValue): string | undefined;
+}

package/src/Validation/validators.test.tsx

@@ -1,81 +1,81 @@
-import { integer, length, maxLength, maxValue, minValue } from './validators';
-
-describe('integer validator', () => {
-  it('accepts an integer', () => {
-    const returned = integer('123');
-    expect(returned).toBe(undefined);
-  });
-
-  it("doesn't accept a float", () => {
-    const returned = integer('123.5569');
-    expect(returned).toBe('Must be a whole number');
-  });
-});
-
-describe('length validator', () => {
-  it('fails for invalid Length', () => {
-    const length10 = length(10);
-    const tooLong = length10('01234567890');
-    const tooShort = length10('aaa');
-    expect(tooLong).toBe('Length must be 10');
-    expect(tooShort).toBe('Length must be 10');
-  });
-
-  it('succeeds for correct length', () => {
-    const length10 = length(10);
-    const validString = length10('0123456789');
-    const validNumber = length10(1234567890);
-    expect(validString).toBe(undefined);
-    expect(validNumber).toBe(undefined);
-  });
-});
-
-describe('maxValue validator', () => {
-  it('fails for invalid value', () => {
-    const maxValue10 = maxValue(10);
-    const tooBig = maxValue10(11);
-    expect(tooBig).toBe('Maximum value 10 exceeded');
-  });
-
-  it('succeeds for valid value', () => {
-    const maxValue10 = maxValue(10);
-    const maxAllowable = maxValue10(10);
-    const lowAllowable = maxValue10(1);
-    expect(maxAllowable).toBe(undefined);
-    expect(lowAllowable).toBe(undefined);
-  });
-});
-
-describe('minValue validator', () => {
-  it('fails for invalid value', () => {
-    const minValue10 = minValue(10);
-    const tooSmall = minValue10(9);
-    expect(tooSmall).toBe('Minimum value 10 not met');
-  });
-
-  it('succeeds for valid value', () => {
-    const minValue10 = minValue(10);
-    const minAllowable = minValue10(10);
-    const highAllowable = minValue10(15);
-    expect(minAllowable).toBe(undefined);
-    expect(highAllowable).toBe(undefined);
-  });
-});
-
-describe('maxLength validator', () => {
-  it('fails for invalid value', () => {
-    const maxLength10 = maxLength(10);
-    const stringTooLong = maxLength10('012345678910');
-    const numberTooLong = maxLength10(1234567890123);
-    expect(stringTooLong).toBe('Maximum length 10 exceeded');
-    expect(numberTooLong).toBe('Maximum length 10 exceeded');
-  });
-
-  it('succeeds for valid value', () => {
-    const maxLength10 = maxLength(10);
-    const exactMatch = maxLength10('0123456789');
-    const shortValid = maxLength10('0123');
-    expect(exactMatch).toBe(undefined);
-    expect(shortValid).toBe(undefined);
-  });
-});
+import { integer, length, maxLength, maxValue, minValue } from './validators';
+
+describe('integer validator', () => {
+  it('accepts an integer', () => {
+    const returned = integer('123');
+    expect(returned).toBe(undefined);
+  });
+
+  it("doesn't accept a float", () => {
+    const returned = integer('123.5569');
+    expect(returned).toBe('Must be a whole number');
+  });
+});
+
+describe('length validator', () => {
+  it('fails for invalid Length', () => {
+    const length10 = length(10);
+    const tooLong = length10('01234567890');
+    const tooShort = length10('aaa');
+    expect(tooLong).toBe('Length must be 10');
+    expect(tooShort).toBe('Length must be 10');
+  });
+
+  it('succeeds for correct length', () => {
+    const length10 = length(10);
+    const validString = length10('0123456789');
+    const validNumber = length10(1234567890);
+    expect(validString).toBe(undefined);
+    expect(validNumber).toBe(undefined);
+  });
+});
+
+describe('maxValue validator', () => {
+  it('fails for invalid value', () => {
+    const maxValue10 = maxValue(10);
+    const tooBig = maxValue10(11);
+    expect(tooBig).toBe('Maximum value 10 exceeded');
+  });
+
+  it('succeeds for valid value', () => {
+    const maxValue10 = maxValue(10);
+    const maxAllowable = maxValue10(10);
+    const lowAllowable = maxValue10(1);
+    expect(maxAllowable).toBe(undefined);
+    expect(lowAllowable).toBe(undefined);
+  });
+});
+
+describe('minValue validator', () => {
+  it('fails for invalid value', () => {
+    const minValue10 = minValue(10);
+    const tooSmall = minValue10(9);
+    expect(tooSmall).toBe('Minimum value 10 not met');
+  });
+
+  it('succeeds for valid value', () => {
+    const minValue10 = minValue(10);
+    const minAllowable = minValue10(10);
+    const highAllowable = minValue10(15);
+    expect(minAllowable).toBe(undefined);
+    expect(highAllowable).toBe(undefined);
+  });
+});
+
+describe('maxLength validator', () => {
+  it('fails for invalid value', () => {
+    const maxLength10 = maxLength(10);
+    const stringTooLong = maxLength10('012345678910');
+    const numberTooLong = maxLength10(1234567890123);
+    expect(stringTooLong).toBe('Maximum length 10 exceeded');
+    expect(numberTooLong).toBe('Maximum length 10 exceeded');
+  });
+
+  it('succeeds for valid value', () => {
+    const maxLength10 = maxLength(10);
+    const exactMatch = maxLength10('0123456789');
+    const shortValid = maxLength10('0123');
+    expect(exactMatch).toBe(undefined);
+    expect(shortValid).toBe(undefined);
+  });
+});

package/src/Validation/validators.ts

@@ -1,97 +1,97 @@
-import { ValidationFunction } from './ValidationFunction';
-
-export const required = (value: any) =>
-  Array.isArray(value)
-    ? value.length > 0
-      ? undefined
-      : 'Required'
-    : value || value === false || value === 0
-    ? 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 | null) => {
-    const hasError = getLengthOfValue(value) !== len;
-    return !hasError ? undefined : `Length must be ${len}`;
-  };
-
-export const integer = (val: string | number | undefined | null) => {
-  if (!val) {
-    return undefined;
-  }
-  if (!Number.isInteger(typeof val === 'number' ? val : parseFloat(val))) {
-    return 'Must be a whole number';
-  }
-};
-
-export const maxLength =
-  (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 | 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 | 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 | null) => {
-  const hasError = !!value && value > max;
-  return !hasError ? undefined : `Maximum value ${max} exceeded`;
-};
-
-export const minValue = (min: number) => (value: number | undefined | null) => {
-  const hasError = !value || value < min;
-  return !hasError ? undefined : `Minimum value ${min} not met`;
-};
-
-/** 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. */
-export const any =
-  <TValue>(validatorList: ValidationFunction<TValue>[]) =>
-  (value: TValue) => {
-    if (validatorList.length === 0 || !value) {
-      return;
-    }
-
-    return validatorList.reduce(
-      (isAnyTrue, x) => (isAnyTrue ? isAnyTrue : x(value)),
-      undefined as string | undefined
-    );
-  };
-
-function getLengthOfValue(value: string | number | undefined | null) {
-  if (value === null) {
-    return 0;
-  }
-  switch (typeof value) {
-    case 'undefined':
-      return 0;
-    case 'string':
-      return value.length;
-    case 'number':
-      // TODO: this seems iffy to me - what if the actual visible value is a fixed length or some special format (e.g. with commas?)
-      return value.toString().length;
-    default:
-      assertUnreachable(value);
-      return 0;
-  }
-}
-function assertUnreachable(x: never) {
-  return null;
-}
+import { ValidationFunction } from './ValidationFunction';
+
+export const required = (value: any) =>
+  Array.isArray(value)
+    ? value.length > 0
+      ? undefined
+      : 'Required'
+    : value || value === false || value === 0
+    ? 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 | null) => {
+    const hasError = getLengthOfValue(value) !== len;
+    return !hasError ? undefined : `Length must be ${len}`;
+  };
+
+export const integer = (val: string | number | undefined | null) => {
+  if (!val) {
+    return undefined;
+  }
+  if (!Number.isInteger(typeof val === 'number' ? val : parseFloat(val))) {
+    return 'Must be a whole number';
+  }
+};
+
+export const maxLength =
+  (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 | 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 | 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 | null) => {
+  const hasError = !!value && value > max;
+  return !hasError ? undefined : `Maximum value ${max} exceeded`;
+};
+
+export const minValue = (min: number) => (value: number | undefined | null) => {
+  const hasError = !value || value < min;
+  return !hasError ? undefined : `Minimum value ${min} not met`;
+};
+
+/** 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. */
+export const any =
+  <TValue>(validatorList: ValidationFunction<TValue>[]) =>
+  (value: TValue) => {
+    if (validatorList.length === 0 || !value) {
+      return;
+    }
+
+    return validatorList.reduce(
+      (isAnyTrue, x) => (isAnyTrue ? isAnyTrue : x(value)),
+      undefined as string | undefined
+    );
+  };
+
+function getLengthOfValue(value: string | number | undefined | null) {
+  if (value === null) {
+    return 0;
+  }
+  switch (typeof value) {
+    case 'undefined':
+      return 0;
+    case 'string':
+      return value.length;
+    case 'number':
+      // TODO: this seems iffy to me - what if the actual visible value is a fixed length or some special format (e.g. with commas?)
+      return value.toString().length;
+    default:
+      assertUnreachable(value);
+      return 0;
+  }
+}
+function assertUnreachable(x: never) {
+  return null;
+}

package/src/__Tests__/FormTestBase.tsx

@@ -1,64 +1,65 @@
-import { HashRouter } from 'react-router-dom';
-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={handleSubmit ? handleSubmit : onSubmit}
-        initialValues={initialValues}>
-        {children}
-      </Form>
-    </HashRouter>
-  );
-
-  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),
-      method: 'POST',
-      headers: {
-        'Content-Type': isFormData ? 'multipart/form-data' : 'application/json',
-        'X-Show-Errors': `Errors go here`,
-      },
-    });
-
-    const apiResult = await (result.json() as Promise<ValidatedApiResult>);
-
-    if (!apiResult.hasErrors) {
-      alert('submitted');
-    }
-
-    return apiResult;
-  }
-}
-
-export 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[];
-}
+import { HashRouter } from 'react-router-dom';
+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={handleSubmit ? handleSubmit : onSubmit}
+        initialValues={initialValues}>
+        {children}
+      </Form>
+    </HashRouter>
+  );
+
+  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),
+      method: 'POST',
+      headers: {
+        'Content-Type': isFormData ? 'multipart/form-data' : 'application/json',
+        'X-Show-Errors': `Errors go here`,
+      },
+    });
+
+    const apiResult = await (result.json() as Promise<ValidatedApiResult>);
+
+    if (!apiResult.hasErrors) {
+      alert('submitted');
+    }
+
+    return apiResult;
+  }
+}
+
+export interface PersonDto {
+  name?: string | undefined;
+  nameWithIcon?: string | undefined;
+  numberOfArms?: number;
+  phoneNumber?: string;
+  yearlySalaryUSD?: number;
+  isCool?: boolean;
+  isMusicEnjoyer?: boolean;
+  gradDate?: string;
+  favoriteDate?: string;
+  favoriteNumber?: number;
+  favoriteColor?: string;
+  favoriteColors?: string[];
+  favoriteNames?: string[];
+  allowLogin?: boolean;
+  userRoles?: number[];
+  profileImage?: any;
+  favoritePictures?: any[];
+}