envoc-form 4.0.1-0 → 4.0.1-10

package/src/Field/StandAloneInput.tsx

@@ -0,0 +1,51 @@
+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: RenderComponent<TValue, TRenderComponent>;
+  value: TValue;
+  onChange: (arg: TValue) => void;
+} & Omit<
+  RenderComponentProps<TValue, TRenderComponent>,
+  | keyof InjectedFieldProps<TValue>
+  | 'value'
+  | 'onChange'
+  | 'normalize'
+  | 'validate'
+>;
+
+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/FieldArray/FieldArray.tsx

@@ -4,6 +4,7 @@ import Field, { FieldProps } from '../Field/Field';
 import { FieldNameContext } from '../Field/FieldNameContext';
 import useStandardFormInput from '../Field/useStandardField';
 import { ValidationFunction } from '../Validation/ValidationFunction';
+import { FormDefaults } from '../FormDefaults';
 
 export type FieldArrayProps<
   TForm extends object,
@@ -64,18 +65,23 @@ export default function FieldArray<
     : [];
 
   return (
-    <div className="field-array">
-      <div className="field-array-header">
-        <div className="field-array-title">{label}</div>
+    <div className={FormDefaults.cssClassPrefix + 'field-array'}>
+      <div className={FormDefaults.cssClassPrefix + 'field-array-header'}>
+        <div className={FormDefaults.cssClassPrefix + 'field-array-title'}>
+          {label}
+        </div>
         <button
-          className={classNames('add-array-item-button', { disabled })}
+          className={classNames(
+            FormDefaults.cssClassPrefix + 'add-array-item-button',
+            { [FormDefaults.cssClassPrefix + 'disabled']: disabled }
+          )}
           title="Add Item"
           type="button"
           onClick={addItem}>
           +
         </button>
       </div>
-      <div className="field-array-body">
+      <div className={FormDefaults.cssClassPrefix + 'field-array-body'}>
         {values.map((value, index) => {
           const itemName = `${input.name}[${index}]`;
           return (
@@ -85,9 +91,12 @@ export default function FieldArray<
                 (value && value['id']) ||
                 itemName
               }
-              className={classNames('field-array-item', {
-                removed: value.isDeleted,
-              })}
+              className={classNames(
+                FormDefaults.cssClassPrefix + 'field-array-item',
+                {
+                  [FormDefaults.cssClassPrefix + 'removed']: value.isDeleted,
+                }
+              )}
               role="listitem">
               <FieldNameContext.Provider value={itemName}>
                 {children({
@@ -96,7 +105,10 @@ export default function FieldArray<
                 } as any)}
               </FieldNameContext.Provider>
               <button
-                className={classNames('remove-array-item-button', { disabled })}
+                className={classNames(
+                  FormDefaults.cssClassPrefix + 'remove-array-item-button',
+                  { [FormDefaults.cssClassPrefix + 'disabled']: disabled }
+                )}
                 type="button"
                 title="Remove Item"
                 onClick={() => removeItem(value)}>

package/src/File/FileGroup.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import FileList from './FileList';
 import { InjectedFieldProps } from '../Field/InjectedFieldProps';
 import Group, { GroupProps } from '../Group';
+import { FormDefaults } from '../FormDefaults';
 
 export interface FileGroupProps
   // note: file props are of type "any" with the current type generation
@@ -22,6 +23,8 @@ function FileGroup(
     label,
     helpText,
     className,
+    required,
+    disabled,
     multiple,
     ...rest
   }: FileGroupProps,
@@ -33,7 +36,13 @@ function FileGroup(
       meta={meta}
       label={label}
       helpText={helpText}
-      className={classNames(className, { multiple }, 'file-group')}>
+      className={classNames(
+        className,
+        { [FormDefaults.cssClassPrefix + 'multiple']: multiple },
+        FormDefaults.cssClassPrefix + 'file-group'
+      )}
+      required={required}
+      disabled={disabled}>
       <input
         {...input}
         {...rest}
@@ -56,7 +65,10 @@ function FileGroup(
         value={undefined}
         ref={ref}
         type="file"
-        className={classNames(className, 'file-group')}
+        className={classNames(
+          className,
+          FormDefaults.cssClassPrefix + 'file-group'
+        )}
       />
       {/* Note: because input.value is any - due to how files are currently handled - type safeness isn't great here */}
       <FileList files={input.value} />

package/src/File/FileList.tsx

@@ -1,10 +1,12 @@
+import { FormDefaults } from '../FormDefaults';
+
 export interface FileListProps {
   files?: File | File[] | undefined;
   rejectedFiles?: File | File[] | undefined;
 }
 export default function FileList({ files, rejectedFiles }: FileListProps) {
   return (
-    <div className="file-list">
+    <div className={FormDefaults.cssClassPrefix + 'file-list'}>
       {!files ? null : Array.isArray(files) ? (
         files.map((x, i) => <File file={x} key={i} />)
       ) : (

package/src/File/__snapshots__/FileGroup.test.tsx.snap

@@ -4,9 +4,10 @@ exports[`FileGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
+    class="envoc-form-form"
   >
     <div
-      class="file-group group"
+      class="envoc-form-file-group envoc-form-group"
     >
       <div
         id="profileimage-error-scroll-target"
@@ -18,13 +19,14 @@ exports[`FileGroup has matching snapshot 1`] = `
         Profile Image
       </label>
       <input
-        class="file-group"
+        class="envoc-form-file-group"
+        id="profileImage"
         name="profileImage"
         type="file"
         value=""
       />
       <div
-        class="file-list"
+        class="envoc-form-file-list"
       />
     </div>
   </form>

package/src/Form/Form.tsx

@@ -5,6 +5,7 @@ import {
   useMemo,
   useState,
 } from 'react';
+import classNames from 'classnames';
 import {
   Form as FormikFormWrapper,
   Formik,
@@ -20,6 +21,7 @@ import {
 } from './ServerErrorContext';
 import Field, { FieldProps } from '../Field/Field';
 import FieldArray, { FieldArrayProps } from '../FieldArray/FieldArray';
+import { FormDefaults } from '../FormDefaults';
 import objectContainsNonSerializableProperty from '../utils/objectContainsNonSerializableProperty';
 import objectToFormData from '../utils/objectToFormData';
 import { ValidatedApiResult } from '../Validation/ValidatedApiResult';
@@ -38,10 +40,14 @@ export type FormBuilderProp<TForm extends object> = {
   ) => JSX.Element;
 };
 
-export interface FormProps<TForm extends object> {
+export interface FullFormProps<TForm extends object> {
   children: (formBuilder: FormBuilderProp<TForm>) => JSX.Element;
   onSubmit: (
-    formValues: FormData | TForm,
+    formValues: TForm,
+    formikBag: FormikHelpers<TForm>
+  ) => Promise<ValidatedApiResult>;
+  onFormDataSubmit: (
+    formValues: FormData,
     formikBag: FormikHelpers<TForm>
   ) => Promise<ValidatedApiResult>;
   className?: string;
@@ -50,12 +56,26 @@ export interface FormProps<TForm extends object> {
   initialValues?: TForm;
 }
 
+type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<
+  T,
+  Exclude<keyof T, Keys>
+> &
+  {
+    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
+  }[Keys];
+
+export type FormProps<TForm extends object> = RequireAtLeastOne<
+  FullFormProps<TForm>,
+  'onSubmit' | 'onFormDataSubmit'
+>;
+
 export default function Form<TForm extends object>({
   children,
   className,
   style,
   ignoreLostChanges,
   onSubmit,
+  onFormDataSubmit,
   initialValues,
   ...props
 }: FormProps<TForm>) {
@@ -92,7 +112,12 @@ export default function Form<TForm extends object>({
       onSubmit={handleSubmit}
       {...props}>
       <ServerErrorContext.Provider value={serverErrorContextValue}>
-        <FormikFormWrapper className={className} style={style}>
+        <FormikFormWrapper
+          className={classNames(
+            className,
+            FormDefaults.cssClassPrefix + 'form'
+          )}
+          style={style}>
           <FocusError serverErrors={serverErrorContextValue} />
           <FormBasedPreventNavigation ignoreLostChanges={ignoreLostChanges} />
           {children({
@@ -107,6 +132,7 @@ export default function Form<TForm extends object>({
 
   function handleSubmit(values: TForm, formikBag: FormikHelpers<TForm>) {
     let formData: FormData | undefined = undefined;
+    let submitFunc: () => Promise<ValidatedApiResult>;
     if (objectContainsNonSerializableProperty(values)) {
       formData = objectToFormData(values, {
         indices: true,
@@ -114,9 +140,35 @@ export default function Form<TForm extends object>({
         allowEmptyArrays: true,
         noFileListBrackets: true,
       });
+      if (onFormDataSubmit === undefined) {
+        throw new Error(
+          'No onFormDataSubmit supplied for non-serializable properties.'
+        );
+      }
+      submitFunc = () =>
+        onFormDataSubmit(formData ?? new FormData(), formikBag);
+    } else {
+      if (onSubmit === undefined) {
+        formData = objectToFormData(values, {
+          indices: true,
+          dotNotation: true,
+          allowEmptyArrays: true,
+          noFileListBrackets: true,
+        });
+        if (onFormDataSubmit === undefined) {
+          // This error should never occur, as this case is covered by RequireAtLeastOne type safety
+          throw new Error(
+            'No onFormDataSubmit supplied for non-serializable properties.'
+          );
+        }
+        submitFunc = () =>
+          onFormDataSubmit(formData ?? new FormData(), formikBag);
+      } else {
+        submitFunc = () => onSubmit(values, formikBag);
+      }
     }
 
-    return onSubmit(formData ?? values, formikBag)
+    return submitFunc()
       .then((response) => {
         return response;
       })

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

@@ -4,6 +4,7 @@ exports[`FormTestBase has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
+    class="envoc-form-form"
   />
 </DocumentFragment>
 `;

package/src/FormActions.tsx

@@ -1,3 +1,4 @@
+import { FormDefaults } from './FormDefaults';
 import { useFormikContext } from 'formik';
 import SubmitFormButton from './SubmitFormButton';
 
@@ -15,13 +16,18 @@ export default function FormActions({
   return (
     <>
       <SubmitFormButton
-        className="form-actions"
+        className={FormDefaults.cssClassPrefix + 'form-actions'}
         allowPristineSubmit={allowPristineSubmit}
         disabled={disabled}
       />
       <button
         type="button"
-        className="form-actions cancel-form-button"
+        className={
+          FormDefaults.cssClassPrefix +
+          'form-actions ' +
+          FormDefaults.cssClassPrefix +
+          'cancel-form-button'
+        }
         disabled={isSubmitting || disabled}
         onClick={handleCancel || goBack}>
         Cancel

package/src/FormDefaults.ts

@@ -0,0 +1 @@
+export const FormDefaults = { cssClassPrefix: 'envoc-form-' };

package/src/Group.tsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import { FormDefaults } from './FormDefaults';
 import FieldErrorScrollTarget from './Field/FieldErrorScrollTarget';
 import { InjectedFieldProps } from './Field/InjectedFieldProps';
 
@@ -11,9 +12,11 @@ export interface GroupProps extends InjectedFieldProps<any> {
   label?: string;
 
   /** simple helper text after the input*/
-  helpText?: string;
+  helpText?: string | React.ReactNode;
 
   disabled?: boolean;
+
+  required?: boolean;
 }
 
 /** contains standard field bits like a label, helper text, error scroll target, validation message container, etc */
@@ -25,19 +28,31 @@ export default function Group({
   meta,
   input,
   disabled,
+  required,
 }: GroupProps) {
   return (
     <div
-      className={classNames(className, 'group', {
-        'is-invalid': meta.error,
-        disabled: disabled,
+      className={classNames(className, FormDefaults.cssClassPrefix + 'group', {
+        [FormDefaults.cssClassPrefix + 'invalid']: meta.error,
+        [FormDefaults.cssClassPrefix + 'disabled']: disabled,
+        [FormDefaults.cssClassPrefix + 'required']: required,
       })}>
       <FieldErrorScrollTarget />
-      {meta.warning && <div className="warning">{meta.warning}</div>}
+      {meta.warning && (
+        <div className={FormDefaults.cssClassPrefix + '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>}
+      {meta.error && (
+        <div className={FormDefaults.cssClassPrefix + 'error'}>
+          {meta.error}
+        </div>
+      )}
+      {helpText && (
+        <div className={FormDefaults.cssClassPrefix + 'help'}>{helpText}</div>
+      )}
     </div>
   );
 }

package/src/Input/IconInputGroup.tsx

@@ -1,7 +1,7 @@
 import React, { LegacyRef } from 'react';
 import classNames from 'classnames';
 import InputGroupWithRef, { InputGroupProps } from './InputGroup';
-import useStandardFormInput from '../Field/useStandardField';
+import { FormDefaults } from '../FormDefaults';
 
 // 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)
@@ -26,7 +26,10 @@ function IconInputGroup(
       <InputGroupWithRef
         icon={icon}
         ref={ref}
-        className={classNames(className, 'icon-input-group')}
+        className={classNames(
+          className,
+          FormDefaults.cssClassPrefix + 'icon-input-group'
+        )}
         value={input.value || ''}
         onChange={(e) => {
           if (!e.target.value) {

package/src/Input/InputGroup.tsx

@@ -2,6 +2,7 @@ import React, { ChangeEventHandler, LegacyRef } from 'react';
 import classNames from 'classnames';
 import { InjectedFieldProps } from '../Field/InjectedFieldProps';
 import Group, { GroupProps } from '../Group';
+import { FormDefaults } from '../FormDefaults';
 
 export interface InputGroupProps<TValue>
   extends InjectedFieldProps<TValue>,
@@ -23,6 +24,7 @@ function InputGroup<TValue>(
     label,
     helpText,
     className,
+    required,
     disabled,
     onChange,
     value,
@@ -35,10 +37,14 @@ function InputGroup<TValue>(
     <Group
       input={input}
       meta={meta}
+      required={required}
       disabled={disabled}
       label={label}
       helpText={helpText}
-      className={classNames(className, 'input-group')}>
+      className={classNames(
+        className,
+        FormDefaults.cssClassPrefix + 'input-group'
+      )}>
       {icon}
       <input
         {...input}
@@ -46,7 +52,10 @@ function InputGroup<TValue>(
         value={value}
         onChange={onChange}
         ref={ref}
-        className={classNames(className, 'input-group')}
+        className={classNames(
+          className,
+          FormDefaults.cssClassPrefix + 'input-group'
+        )}
       />
     </Group>
   );

package/src/Input/MoneyInputGroup.tsx

@@ -1,6 +1,7 @@
 import React, { LegacyRef } from 'react';
 import classNames from 'classnames';
 import InputGroup, { InputGroupProps } from './InputGroup';
+import { FormDefaults } from '../FormDefaults';
 
 export interface MoneyInputGroupProps
   extends Omit<
@@ -24,7 +25,10 @@ function MoneyInputGroup(
       min={0}
       {...rest}
       type="number"
-      className={classNames(className, 'money-group')}
+      className={classNames(
+        className,
+        FormDefaults.cssClassPrefix + 'money-group'
+      )}
       value={input.value || ''}
       onChange={(e) => {
         if (!e.target.value) {

package/src/Input/NumberInputGroup.tsx

@@ -1,6 +1,7 @@
 import React, { LegacyRef } from 'react';
 import classNames from 'classnames';
 import InputGroup, { InputGroupProps } from './InputGroup';
+import { FormDefaults } from '../FormDefaults';
 
 export interface NumberInputGroupProps
   extends Omit<
@@ -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,13 +1,22 @@
 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>,
     'onChange' | 'type' | 'value'
   > {
-  type?: 'color' | 'email' | 'search' | 'tel' | 'text' | 'url';
+  type?:
+    | 'color'
+    | 'email'
+    | 'search'
+    | 'tel'
+    | 'text'
+    | 'url'
+    | 'password'
+    | 'textarea';
 }
 
 function StringInputGroup(
@@ -20,7 +29,10 @@ function StringInputGroup(
     <InputGroup
       ref={ref}
       {...rest}
-      className={classNames(className, 'string-group')}
+      className={classNames(
+        className,
+        FormDefaults.cssClassPrefix + 'string-group'
+      )}
       value={input.value || ''}
       onChange={(e) => {
         if (!e.target.value) {

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=""
       />