envoc-form 4.0.1-0 → 4.0.1-10

package/src/Select/SelectGroup.tsx

@@ -2,6 +2,7 @@ import { default as ReactSelect } from 'react-select';
 import classNames from 'classnames';
 import { InjectedFieldProps } from '../Field/InjectedFieldProps';
 import Group, { GroupProps } from '../Group';
+import { FormDefaults } from '../FormDefaults';
 
 export interface SelectOption<TValue> {
   value: (TValue extends Array<infer P> ? P : TValue) | undefined;
@@ -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,6 +1,7 @@
 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'> {
@@ -20,12 +21,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 +36,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>
   );

package/src/TextArea/TextAreaGroup.tsx

@@ -0,0 +1,64 @@
+import React, { LegacyRef } from 'react';
+import classNames from 'classnames';
+import { InjectedFieldProps } from '../Field/InjectedFieldProps';
+import Group, { GroupProps } from '../Group';
+import { FormDefaults } from '../FormDefaults';
+
+export interface TextAreaGroupProps
+  extends InjectedFieldProps<string | undefined>,
+    Omit<
+      React.HTMLProps<HTMLTextAreaElement>,
+      keyof InjectedFieldProps<any> | 'children' | 'className' | 'label'
+    >,
+    Omit<GroupProps, keyof InjectedFieldProps<any> | 'children'> {
+  icon?: React.ReactNode;
+}
+
+/** generic controlled <textarea/> wrapped by a Group */
+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>
+  );
+}
+
+const TextAreaGroupWithRef = React.forwardRef(
+  TextAreaGroup
+) as React.ComponentType<TextAreaGroupProps>;
+
+export default TextAreaGroupWithRef;

package/src/Validation/validators.ts

@@ -15,11 +15,11 @@ export const length = (len: number) => (value: string | number | undefined) => {
   return !hasError ? undefined : `Length must be ${len}`;
 };
 
-export const integer = (val: string | undefined) => {
+export const integer = (val: string | number | undefined) => {
   if (!val) {
     return undefined;
   }
-  if (!Number.isInteger(parseFloat(val))) {
+  if (!Number.isInteger(typeof val === 'number' ? val : parseFloat(val))) {
     return 'Must be a whole number';
   }
 };

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 '../../src';
 
 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

@@ -15,19 +15,35 @@ export { default as ConfirmDeleteForm } from './ConfirmDeleteForm/ConfirmDeleteF
 export type { ConfirmDeleteFormProps } from './ConfirmDeleteForm/ConfirmDeleteForm';
 
 // Date
-export { default as DatePickerInput } from './DatePickerInput/DatePickerInput';
-export type { DatePickerInputProps, DateOnly } from './DatePickerInput/DatePickerInput';
+export { default as DatePickerGroup } from './DatePicker/DatePickerGroup';
+export type { DatePickerGroupProps as DatePickerGroupProps } from './DatePicker/DatePickerGroup';
+export { convertToTimeZoneInsensitiveISOString } from './DatePicker/DatePickerGroup';
+
+export type { DatePickerHelper } from './DatePicker/DatePickerHelper';
+
+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';
 
+export type { RenderComponent } from './Field/Field';
+export type { RenderComponentProps } from './Field/Field';
+
 export { default as FieldErrorScrollTarget } from './Field/FieldErrorScrollTarget';
 
 export { FieldNameContext } from './Field/FieldNameContext';
 
 export type { InjectedFieldProps } from './Field/InjectedFieldProps';
 
+export { default as StandAloneInput } from './Field/StandAloneInput';
+
+export type { StandAloneInputProps } from './Field/StandAloneInput';
+
 export { default as useStandardField } from './Field/useStandardField';
 export type { useStandardFieldProps } from './Field/useStandardField';
 
@@ -54,6 +70,12 @@ export type {
 export { default as FormActions } from './FormActions';
 export type { FormActionsProps as FormActionsProps } from './FormActions';
 
+export { default as StandardFormActions } from './StandardFormActions';
+export type { StandardFormActionsProps as StandardFormActionsProps } from './StandardFormActions';
+
+// FormDefaults
+export { FormDefaults } from './FormDefaults';
+
 // Input
 export { default as Group } from './Group';
 export type { GroupProps as GroupProps } from './Group';
@@ -79,7 +101,7 @@ export * as normalizers from './Normalization/normalizers';
 
 // Select
 export { default as SelectGroup } from './Select/SelectGroup';
-export type { SelectGroupProps } from './Select/SelectGroup';
+export type { SelectGroupProps, SelectOption } from './Select/SelectGroup';
 
 export { BooleanSelectGroup } from './Select/BooleanSelectGroup';
 export type { BooleanSelectGroupProps } from './Select/BooleanSelectGroup';
@@ -88,13 +110,27 @@ export {
   MultiNumberSelectGroup,
   SingleNumberSelectGroup,
 } from './Select/NumberSelectGroup';
-export type { MultiNumberSelectGroupProps, SingleNumberSelectGroupProps } from './Select/NumberSelectGroup';
+export type {
+  MultiNumberSelectGroupProps,
+  SingleNumberSelectGroupProps,
+} from './Select/NumberSelectGroup';
+
+export type { SelectGroupPropsHelper } from './Select/SelectGroupPropsHelper';
 
 export {
   MultiStringSelectGroup,
   SingleStringSelectGroup,
 } from './Select/StringSelectGroup';
-export type { MultiStringSelectGroupProps, SingleStringSelectGroupProps } from './Select/StringSelectGroup';
+export type {
+  MultiStringSelectGroupProps,
+  SingleStringSelectGroupProps,
+} from './Select/StringSelectGroup';
+
+// Text Area
+
+export { default as TextAreaGroup } from './TextArea/TextAreaGroup';
+
+export type { TextAreaGroupProps } from './TextArea/TextAreaGroup';
 
 // Utils
 export { default as objectContainsNonSerializableProperty } from './utils/objectContainsNonSerializableProperty';

package/es/DatePickerInput/DatePickerInput.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import { DatePickerProps } from 'react-date-picker';
-import { InjectedFieldProps } from '../Field/InjectedFieldProps';
-import { GroupProps } from '../Group';
-export interface DateOnly {
-    year?: number;
-    month?: number;
-    day?: number;
-}
-declare type InjectedDate = InjectedFieldProps<DateOnly | undefined>;
-export interface DatePickerInputProps extends InjectedDate, Omit<DatePickerProps, keyof InjectedDate | 'name' | 'value' | 'className'>, Omit<GroupProps, keyof InjectedDate | 'children'> {
-}
-export default function DatePickerInput({ input, meta, label, helpText, className, disabled, ...rest }: DatePickerInputProps): JSX.Element;
-export {};

package/es/DatePickerInput/DatePickerInput.js

@@ -1,63 +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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import DatePicker from 'react-date-picker';
-import classnames from 'classnames';
-import parseISO from 'date-fns/parseISO';
-import Group from '../Group';
-export default function DatePickerInput(_a) {
-    var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, disabled = _a.disabled, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "disabled"]);
-    var _b = useState(null), displayDate = _b[0], setDisplayDate = _b[1];
-    function handleChange(e) {
-        var onChange = input.onChange;
-        if (onChange == null) {
-            return;
-        }
-        if (!e) {
-            onChange(undefined);
-            setDisplayDate(null);
-            return;
-        }
-        if (e instanceof Date) {
-            var parsedValue = parseISO(e.toISOString().split('T')[0]);
-            setDisplayDate(parsedValue);
-            onChange({
-                year: e.getFullYear(),
-                month: e.getMonth() + 1,
-                day: e.getDate(),
-            });
-        }
-        else {
-            // e is instanceof Date[]
-            var parsedValue = parseISO(e[0].toISOString().split('T')[0]);
-            setDisplayDate(parsedValue);
-            onChange({
-                year: e[0].getFullYear(),
-                month: e[0].getMonth() + 1,
-                day: e[0].getDate(),
-            });
-        }
-    }
-    return (_jsx(Group, __assign({ input: input, meta: meta, label: label, helpText: helpText, className: classnames(className, 'date-picker'), disabled: disabled }, { children: _jsx(DatePicker, __assign({}, rest, { className: classnames('date-picker', className), value: displayDate, onChange: handleChange })) })));
-}

package/lib/DatePickerInput/DatePickerInput.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import { DatePickerProps } from 'react-date-picker';
-import { InjectedFieldProps } from '../Field/InjectedFieldProps';
-import { GroupProps } from '../Group';
-export interface DateOnly {
-    year?: number;
-    month?: number;
-    day?: number;
-}
-declare type InjectedDate = InjectedFieldProps<DateOnly | undefined>;
-export interface DatePickerInputProps extends InjectedDate, Omit<DatePickerProps, keyof InjectedDate | 'name' | 'value' | 'className'>, Omit<GroupProps, keyof InjectedDate | 'children'> {
-}
-export default function DatePickerInput({ input, meta, label, helpText, className, disabled, ...rest }: DatePickerInputProps): JSX.Element;
-export {};

package/lib/DatePickerInput/DatePickerInput.js

@@ -1,69 +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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_date_picker_1 = __importDefault(require("react-date-picker"));
-var classnames_1 = __importDefault(require("classnames"));
-var parseISO_1 = __importDefault(require("date-fns/parseISO"));
-var Group_1 = __importDefault(require("../Group"));
-function DatePickerInput(_a) {
-    var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, disabled = _a.disabled, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "disabled"]);
-    var _b = (0, react_1.useState)(null), displayDate = _b[0], setDisplayDate = _b[1];
-    function handleChange(e) {
-        var onChange = input.onChange;
-        if (onChange == null) {
-            return;
-        }
-        if (!e) {
-            onChange(undefined);
-            setDisplayDate(null);
-            return;
-        }
-        if (e instanceof Date) {
-            var parsedValue = (0, parseISO_1.default)(e.toISOString().split('T')[0]);
-            setDisplayDate(parsedValue);
-            onChange({
-                year: e.getFullYear(),
-                month: e.getMonth() + 1,
-                day: e.getDate(),
-            });
-        }
-        else {
-            // e is instanceof Date[]
-            var parsedValue = (0, parseISO_1.default)(e[0].toISOString().split('T')[0]);
-            setDisplayDate(parsedValue);
-            onChange({
-                year: e[0].getFullYear(),
-                month: e[0].getMonth() + 1,
-                day: e[0].getDate(),
-            });
-        }
-    }
-    return ((0, jsx_runtime_1.jsx)(Group_1.default, __assign({ input: input, meta: meta, label: label, helpText: helpText, className: (0, classnames_1.default)(className, 'date-picker'), disabled: disabled }, { children: (0, jsx_runtime_1.jsx)(react_date_picker_1.default, __assign({}, rest, { className: (0, classnames_1.default)('date-picker', className), value: displayDate, onChange: handleChange })) })));
-}
-exports.default = DatePickerInput;