envoc-form 4.0.1-1 → 4.0.1-11

package/src/Input/NumberInputGroup.tsx

@@ -1,10 +1,11 @@
 import React, { LegacyRef } from 'react';
 import classNames from 'classnames';
 import InputGroup, { InputGroupProps } from './InputGroup';
+import { FormDefaults } from '../FormDefaults';
 
 export interface NumberInputGroupProps
   extends Omit<
-    InputGroupProps<number | undefined>,
+    InputGroupProps<number | undefined | null>,
     'onChange' | 'type' | 'value'
   > {
   parseFunc?: typeof parseInt | typeof parseFloat;
@@ -22,7 +23,10 @@ function NumberInputGroup(
       ref={ref}
       {...rest}
       type="number"
-      className={classNames(className, 'number-group')}
+      className={classNames(
+        className,
+        FormDefaults.cssClassPrefix + 'number-group'
+      )}
       value={input.value || ''}
       onChange={(e) => {
         if (!e.target.value) {

package/src/Input/StringInputGroup.tsx

@@ -1,10 +1,11 @@
 import React, { LegacyRef } from 'react';
 import classNames from 'classnames';
 import InputGroup, { InputGroupProps } from './InputGroup';
+import { FormDefaults } from '../FormDefaults';
 
 export interface StringInputGroupProps
   extends Omit<
-    InputGroupProps<string | undefined>,
+    InputGroupProps<string | undefined | null>,
     'onChange' | 'type' | 'value'
   > {
   type?:
@@ -28,8 +29,11 @@ function StringInputGroup(
     <InputGroup
       ref={ref}
       {...rest}
-      className={classNames(className, 'string-group')}
-      value={input.value || ''}
+      className={classNames(
+        className,
+        FormDefaults.cssClassPrefix + 'string-group'
+      )}
+      value={input.value ?? ''}
       onChange={(e) => {
         if (!e.target.value) {
           input.onChange(undefined);

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

@@ -4,9 +4,10 @@ exports[`IconInputGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
+    class="envoc-form-form"
   >
     <div
-      class="icon-input-group input-group group"
+      class="envoc-form-icon-input-group envoc-form-input-group envoc-form-group"
     >
       <div
         id="namewithicon-error-scroll-target"
@@ -19,7 +20,8 @@ exports[`IconInputGroup has matching snapshot 1`] = `
         Pretend this is an icon
       </span>
       <input
-        class="icon-input-group input-group"
+        class="envoc-form-icon-input-group envoc-form-input-group"
+        id="nameWithIcon"
         name="nameWithIcon"
         value=""
       />

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

@@ -4,9 +4,10 @@ exports[`MoneyInputGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
+    class="envoc-form-form"
   >
     <div
-      class="something-here money-group input-group group"
+      class="something-here envoc-form-money-group envoc-form-input-group envoc-form-group"
     >
       <div
         id="yearlysalaryusd-error-scroll-target"
@@ -18,7 +19,8 @@ exports[`MoneyInputGroup has matching snapshot 1`] = `
         Salary
       </label>
       <input
-        class="something-here money-group input-group"
+        class="something-here envoc-form-money-group envoc-form-input-group"
+        id="yearlySalaryUSD"
         min="0"
         name="yearlySalaryUSD"
         step="0.01"

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

@@ -4,9 +4,10 @@ exports[`NumberInputGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
+    class="envoc-form-form"
   >
     <div
-      class="number-group input-group group"
+      class="envoc-form-number-group envoc-form-input-group envoc-form-group"
     >
       <div
         id="numberofarms-error-scroll-target"
@@ -18,7 +19,8 @@ exports[`NumberInputGroup has matching snapshot 1`] = `
         Arm Count
       </label>
       <input
-        class="number-group input-group"
+        class="envoc-form-number-group envoc-form-input-group"
+        id="numberOfArms"
         name="numberOfArms"
         type="number"
         value=""

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

@@ -4,9 +4,10 @@ exports[`StringInputGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
+    class="envoc-form-form"
   >
     <div
-      class="string-group input-group group"
+      class="envoc-form-string-group envoc-form-input-group envoc-form-group"
     >
       <div
         id="name-error-scroll-target"
@@ -18,7 +19,8 @@ exports[`StringInputGroup has matching snapshot 1`] = `
         Name
       </label>
       <input
-        class="string-group input-group"
+        class="envoc-form-string-group envoc-form-input-group"
+        id="name"
         name="name"
         value=""
       />

package/src/Normalization/normalizers.ts

@@ -1,4 +1,4 @@
-export const phoneNumber = (value: string | undefined) => {
+export const phoneNumber = (value: string | undefined | null) => {
   if (!value) {
     return undefined;
   }
@@ -30,7 +30,7 @@ export const phoneNumber = (value: string | undefined) => {
   return onlyNums;
 };
 
-export const zipCode = (value: string | undefined) => {
+export const zipCode = (value: string | undefined | null) => {
   if (!value) {
     return undefined;
   }

package/src/Select/BooleanSelectGroup.tsx

@@ -13,7 +13,7 @@ const booleanOptions: SelectOption<boolean>[] = [
 ];
 
 export interface BooleanSelectGroupProps
-  extends Omit<SelectGroupPropsHelper<boolean>, 'options'> {
+  extends Omit<SelectGroupPropsHelper<boolean | undefined | null>, 'options'> {
   options?: SelectOption<boolean>[];
 }
 export function BooleanSelectGroup(props: BooleanSelectGroupProps) {

package/src/Select/NumberSelectGroup.tsx

@@ -2,13 +2,13 @@ import SelectGroup from './SelectGroup';
 import { SelectGroupPropsHelper } from './SelectGroupPropsHelper';
 
 export interface MultiNumberSelectGroupProps
-  extends SelectGroupPropsHelper<number[]> {}
+  extends SelectGroupPropsHelper<number[] | undefined | null> {}
 export function MultiNumberSelectGroup(props: MultiNumberSelectGroupProps) {
   return <SelectGroup multiple={true} {...props} />;
 }
 
 export interface SingleNumberSelectGroupProps
-  extends SelectGroupPropsHelper<number> {}
+  extends SelectGroupPropsHelper<number | undefined | null> {}
 export function SingleNumberSelectGroup(props: SingleNumberSelectGroupProps) {
   return <SelectGroup multiple={false} {...props} />;
 }

package/src/Select/SelectGroup.tsx

@@ -1,6 +1,7 @@
 import { default as ReactSelect } from 'react-select';
 import classNames from 'classnames';
 import { InjectedFieldProps } from '../Field/InjectedFieldProps';
+import { FormDefaults } from '../FormDefaults';
 import Group, { GroupProps } from '../Group';
 
 export interface SelectOption<TValue> {
@@ -22,7 +23,7 @@ interface OptionsUseServiceResult<TValue> {
 }
 
 export interface SelectGroupProps<TValue>
-  extends InjectedFieldProps<TValue | undefined>,
+  extends InjectedFieldProps<TValue | undefined | null>,
     Omit<GroupProps, 'input' | 'meta' | 'children'> {
   // allows for "useService" or other handles to control the data - including cache
   // TODO: do we still want a version of select that has a "url" or maybe a promise func or something?
@@ -37,6 +38,8 @@ export default function SelectGroup<TValue>({
   input,
   meta,
   className,
+  required,
+  disabled,
   options,
   multiple,
   placeholder,
@@ -63,10 +66,15 @@ export default function SelectGroup<TValue>({
       {...rest}
       input={input}
       meta={meta}
+      required={required}
+      disabled={disabled}
       className={classNames(
         className,
-        { multiple, 'is-loading': isLoading },
-        'select-group'
+        {
+          [FormDefaults.cssClassPrefix + 'multiple']: multiple,
+          [FormDefaults.cssClassPrefix + 'loading']: isLoading,
+        },
+        FormDefaults.cssClassPrefix + 'select-group'
       )}>
       <ReactSelect<
         Partial<SelectOption<TValue>>,
@@ -74,6 +82,7 @@ export default function SelectGroup<TValue>({
       >
         inputId={input.id}
         isMulti={multiple}
+        isDisabled={disabled}
         options={effectiveOptions}
         onBlur={input.onBlur}
         value={getValue()}
@@ -85,7 +94,10 @@ export default function SelectGroup<TValue>({
           }
         }}
         getOptionLabel={(option) => option?.label ?? ''}
-        className={classNames(className, 'select-group')}
+        className={classNames(
+          className,
+          FormDefaults.cssClassPrefix + 'select-group'
+        )}
         classNamePrefix="react-select"
         menuPortalTarget={document.body}
         menuPlacement="auto"

package/src/Select/__tests__/__snapshots__/BooleanSelectGroup.test.tsx.snap

@@ -4,9 +4,10 @@ exports[`BooleanSelectGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
+    class="envoc-form-form"
   >
     <div
-      class="select-group group"
+      class="envoc-form-select-group envoc-form-group"
     >
       <div
         id="allowlogin-error-scroll-target"
@@ -18,7 +19,7 @@ exports[`BooleanSelectGroup has matching snapshot 1`] = `
         Allow Login
       </label>
       <div
-        class="select-group css-b62m3t-container"
+        class="envoc-form-select-group css-b62m3t-container"
       >
         <span
           class="css-1f43avz-a11yText-A11yText"

package/src/Select/__tests__/__snapshots__/NumberSelectGroup.test.tsx.snap

@@ -4,9 +4,10 @@ exports[`MultiNumberSelectGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
+    class="envoc-form-form"
   >
     <div
-      class="multiple select-group group"
+      class="envoc-form-multiple envoc-form-select-group envoc-form-group"
     >
       <div
         id="userroles-error-scroll-target"
@@ -18,7 +19,7 @@ exports[`MultiNumberSelectGroup has matching snapshot 1`] = `
         Favorite Number
       </label>
       <div
-        class="select-group css-b62m3t-container"
+        class="envoc-form-select-group css-b62m3t-container"
       >
         <span
           class="css-1f43avz-a11yText-A11yText"
@@ -102,9 +103,10 @@ exports[`SingleNumberSelectGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
+    class="envoc-form-form"
   >
     <div
-      class="select-group group"
+      class="envoc-form-select-group envoc-form-group"
     >
       <div
         id="favoritenumber-error-scroll-target"
@@ -116,7 +118,7 @@ exports[`SingleNumberSelectGroup has matching snapshot 1`] = `
         Favorite Number
       </label>
       <div
-        class="select-group css-b62m3t-container"
+        class="envoc-form-select-group css-b62m3t-container"
       >
         <span
           class="css-1f43avz-a11yText-A11yText"

package/src/Select/__tests__/__snapshots__/StringSelectGroup.test.tsx.snap

@@ -4,9 +4,10 @@ exports[`MultiStringSelectGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
+    class="envoc-form-form"
   >
     <div
-      class="multiple select-group group"
+      class="envoc-form-multiple envoc-form-select-group envoc-form-group"
     >
       <div
         id="favoritecolors-error-scroll-target"
@@ -18,7 +19,7 @@ exports[`MultiStringSelectGroup has matching snapshot 1`] = `
         Favorite Color
       </label>
       <div
-        class="select-group css-b62m3t-container"
+        class="envoc-form-select-group css-b62m3t-container"
       >
         <span
           class="css-1f43avz-a11yText-A11yText"
@@ -102,9 +103,10 @@ exports[`SingleStringSelectGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
+    class="envoc-form-form"
   >
     <div
-      class="select-group group"
+      class="envoc-form-select-group envoc-form-group"
     >
       <div
         id="favoritecolor-error-scroll-target"
@@ -116,7 +118,7 @@ exports[`SingleStringSelectGroup has matching snapshot 1`] = `
         Favorite Color
       </label>
       <div
-        class="select-group css-b62m3t-container"
+        class="envoc-form-select-group css-b62m3t-container"
       >
         <span
           class="css-1f43avz-a11yText-A11yText"

package/src/StandardFormActions.tsx

@@ -2,6 +2,7 @@ import { MouseEventHandler } from 'react';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';
 import SubmitFormButton from './SubmitFormButton';
+import { FormDefaults } from './FormDefaults';
 
 export interface StandardFormActionsProps {
   allowPristineSubmit?: boolean;
@@ -19,7 +20,9 @@ export default function StandardFormActions({
       <SubmitFormButton allowPristineSubmit={allowPristineSubmit} />
       &nbsp;
       <button
-        className={classNames('standard-form-actions-cancel-button')}
+        className={classNames(
+          FormDefaults.cssClassPrefix + 'standard-form-actions-cancel-button'
+        )}
         type="button"
         disabled={isSubmitting}
         onClick={handleCancel || goBack}>

package/src/SubmitFormButton.tsx

@@ -1,12 +1,14 @@
 import React, { LegacyRef } from 'react';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';
+import { FormDefaults } from './FormDefaults';
 
 export interface SubmitFormButtonProps
   extends Omit<React.HTMLProps<HTMLButtonElement>, 'type'> {
   allowPristineSubmit?: boolean;
   children?: React.ReactNode;
 }
+
 function SubmitFormButton(
   {
     allowPristineSubmit,
@@ -20,12 +22,14 @@ function SubmitFormButton(
 ) {
   const { isSubmitting, dirty } = useFormikContext();
   const preventSubmit = (!dirty && !allowPristineSubmit) || isSubmitting;
+  const buttonName = typeof children === 'string' ? children : 'Submit';
   return (
     <button
       {...props}
       ref={ref}
       type="submit"
       disabled={preventSubmit || disabled}
+      aria-label={buttonName}
       title={
         title || isSubmitting
           ? 'Loading, please wait...'
@@ -33,7 +37,10 @@ function SubmitFormButton(
           ? "You haven't made any changes"
           : ''
       }
-      className={classNames('submit-form-button', className)}>
+      className={classNames(
+        FormDefaults.cssClassPrefix + 'submit-form-button',
+        className
+      )}>
       {children || 'Submit'}
     </button>
   );
@@ -41,4 +48,4 @@ function SubmitFormButton(
 
 export default React.forwardRef(
   SubmitFormButton
-) as React.ComponentType<SubmitFormButtonProps>;
+) as React.FunctionComponent<SubmitFormButtonProps>;

package/src/TextArea/TextAreaGroup.tsx

@@ -1,10 +1,11 @@
 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>,
+  extends InjectedFieldProps<string | undefined | null>,
     Omit<
       React.HTMLProps<HTMLTextAreaElement>,
       keyof InjectedFieldProps<any> | 'children' | 'className' | 'label'
@@ -21,6 +22,7 @@ function TextAreaGroup(
     label,
     helpText,
     className,
+    required,
     disabled,
     icon,
     ...rest
@@ -31,18 +33,25 @@ function TextAreaGroup(
     <Group
       input={input}
       meta={meta}
+      required={required}
       disabled={disabled}
       label={label}
       helpText={helpText}
-      className={classNames(className, 'text-area-group')}>
+      className={classNames(
+        className,
+        FormDefaults.cssClassPrefix + 'text-area-group'
+      )}>
       {icon}
       <textarea
         {...input}
         {...rest}
-        value={input.value}
+        value={input.value ?? ''}
         onChange={(val) => input.onChange(val.target.value)}
         ref={ref}
-        className={classNames(className, 'text-area-group')}
+        className={classNames(
+          className,
+          FormDefaults.cssClassPrefix + 'text-area-group'
+        )}
       />
     </Group>
   );

package/src/Validation/validators.ts

@@ -10,12 +10,13 @@ export const required = (value: any) =>
     : '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}`;
-};
+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,35 +26,35 @@ 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) => {
+export const zipCode = (value: string | undefined | null) => {
   return value && !/^[0-9]{5}(?:-[0-9]{4})?$/.test(value)
     ? 'Invalid ZIP Code'
     : undefined;
@@ -73,7 +74,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,7 +1,7 @@
 import '@testing-library/jest-dom/extend-expect';
 import { HashRouter } from 'react-router-dom';
-import { ValidatedApiResult } from 'Validation/ValidatedApiResult';
-import { DateOnly, Form, FormBuilderProp } from '../../src';
+import { Form, FormBuilderProp } from '../';
+import { ValidatedApiResult } from '../Validation/ValidatedApiResult';
 
 interface FormTestBaseProps<TForm extends object> {
   children: (formBuilder: FormBuilderProp<TForm>) => JSX.Element;
@@ -50,8 +50,8 @@ interface PersonDto {
   phoneNumber?: string;
   yearlySalaryUSD?: number;
   isCool?: boolean;
-  gradDate?: DateOnly;
-  favoriteDate?: DateOnly;
+  gradDate?: string;
+  favoriteDate?: string;
   favoriteNumber?: number;
   favoriteColor?: string;
   favoriteColors?: string[];

package/src/__Tests__/__snapshots__/StandardFormActions.test.tsx.snap

@@ -4,9 +4,11 @@ exports[`StandardFormActions has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
+    class="envoc-form-form"
   >
     <button
-      class="submit-form-button"
+      aria-label="Submit"
+      class="envoc-form-submit-form-button"
       disabled=""
       title="You haven't made any changes"
       type="submit"
@@ -15,7 +17,7 @@ exports[`StandardFormActions has matching snapshot 1`] = `
     </button>
      
     <button
-      class="standard-form-actions-cancel-button"
+      class="envoc-form-standard-form-actions-cancel-button"
       type="button"
     >
       Cancel

package/src/__Tests__/__snapshots__/SubmitFormButton.test.tsx.snap

@@ -4,9 +4,11 @@ exports[`SubmitFormButton has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
+    class="envoc-form-form"
   >
     <button
-      class="submit-form-button"
+      aria-label="Submit"
+      class="envoc-form-submit-form-button"
       disabled=""
       title="You haven't made any changes"
       type="submit"

package/src/index.ts

@@ -16,19 +16,17 @@ 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';
 
-export { default as DateOnlyDatePickerGroup } from './DatePicker/DateOnlyDatePickerGroup';
-export type {
-  DateOnly,
-  DateOnlyDatePickerGroupProps,
-} from './DatePicker/DateOnlyDatePickerGroup';
-
 export { default as StringDatePickerGroup } from './DatePicker/StringDatePickerGroup';
 export type { StringDatePickerGroupProps } from './DatePicker/StringDatePickerGroup';
 
+export { default as StringDateOnlyPickerGroup } from './DatePicker/StringDateOnlyPickerGroup';
+export type { StringDateOnlyPickerGroupProps } from './DatePicker/StringDateOnlyPickerGroup';
+
 // Field
 export { default as Field } from './Field/Field';
 export type { FieldProps } from './Field/Field';
@@ -70,14 +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/es/DatePicker/DateOnlyDatePickerGroup.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-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): JSX.Element;