envoc-form 4.0.1-0 → 4.0.1-10

package/lib/index.d.ts

@@ -6,13 +6,23 @@ export { default as ConfirmBaseForm } from './ConfirmBaseForm/ConfirmBaseForm';
 export type { ConfirmBaseFormProps } from './ConfirmBaseForm/ConfirmBaseForm';
 export { default as ConfirmDeleteForm } from './ConfirmDeleteForm/ConfirmDeleteForm';
 export type { ConfirmDeleteFormProps } from './ConfirmDeleteForm/ConfirmDeleteForm';
-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';
 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';
 export { default as FieldArray } from './FieldArray/FieldArray';
@@ -25,6 +35,9 @@ export { ServerErrorContext } from './Form/ServerErrorContext';
 export type { ServerErrorContextProps, ServerErrors, } from './Form/ServerErrorContext';
 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';
+export { FormDefaults } from './FormDefaults';
 export { default as Group } from './Group';
 export type { GroupProps as GroupProps } from './Group';
 export { default as IconInputGroup } from './Input/IconInputGroup';
@@ -40,13 +53,16 @@ export type { StringInputGroupProps } from './Input/StringInputGroup';
 export type { NormalizationFunction } from './Normalization/NormalizationFunction';
 export * as normalizers from './Normalization/normalizers';
 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';
 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';
+export { default as TextAreaGroup } from './TextArea/TextAreaGroup';
+export type { TextAreaGroupProps } from './TextArea/TextAreaGroup';
 export { default as objectContainsNonSerializableProperty } from './utils/objectContainsNonSerializableProperty';
 export { default as serialize } from './utils/objectToFormData';
 export type { ObjectToFormDataCfgProps } from './utils/objectToFormData';

package/lib/index.js

@@ -29,7 +29,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validators = exports.serialize = exports.objectContainsNonSerializableProperty = exports.SingleStringSelectGroup = exports.MultiStringSelectGroup = exports.SingleNumberSelectGroup = exports.MultiNumberSelectGroup = exports.BooleanSelectGroup = exports.SelectGroup = exports.normalizers = exports.StringInputGroup = exports.NumberInputGroup = exports.MoneyInputGroup = exports.InputGroup = exports.IconInputGroup = exports.Group = exports.FormActions = exports.ServerErrorContext = exports.Form = exports.FileGroup = exports.FieldArray = exports.useStandardField = exports.FieldNameContext = exports.FieldErrorScrollTarget = exports.Field = exports.DatePickerInput = exports.ConfirmDeleteForm = exports.ConfirmBaseForm = exports.SubmitFormButton = exports.AddressInput = void 0;
+exports.validators = exports.serialize = exports.objectContainsNonSerializableProperty = exports.TextAreaGroup = exports.SingleStringSelectGroup = exports.MultiStringSelectGroup = exports.SingleNumberSelectGroup = exports.MultiNumberSelectGroup = exports.BooleanSelectGroup = exports.SelectGroup = exports.normalizers = exports.StringInputGroup = exports.NumberInputGroup = exports.MoneyInputGroup = exports.InputGroup = exports.IconInputGroup = exports.Group = exports.FormDefaults = exports.StandardFormActions = exports.FormActions = exports.ServerErrorContext = exports.Form = exports.FileGroup = exports.FieldArray = exports.useStandardField = exports.StandAloneInput = exports.FieldNameContext = exports.FieldErrorScrollTarget = exports.Field = exports.StringDateOnlyPickerGroup = exports.StringDatePickerGroup = exports.convertToTimeZoneInsensitiveISOString = exports.DatePickerGroup = exports.ConfirmDeleteForm = exports.ConfirmBaseForm = exports.SubmitFormButton = exports.AddressInput = void 0;
 // Address
 var AddressInput_1 = require("./AddressInput/AddressInput");
 Object.defineProperty(exports, "AddressInput", { enumerable: true, get: function () { return __importDefault(AddressInput_1).default; } });
@@ -43,8 +43,14 @@ Object.defineProperty(exports, "ConfirmBaseForm", { enumerable: true, get: funct
 var ConfirmDeleteForm_1 = require("./ConfirmDeleteForm/ConfirmDeleteForm");
 Object.defineProperty(exports, "ConfirmDeleteForm", { enumerable: true, get: function () { return __importDefault(ConfirmDeleteForm_1).default; } });
 // Date
-var DatePickerInput_1 = require("./DatePickerInput/DatePickerInput");
-Object.defineProperty(exports, "DatePickerInput", { enumerable: true, get: function () { return __importDefault(DatePickerInput_1).default; } });
+var DatePickerGroup_1 = require("./DatePicker/DatePickerGroup");
+Object.defineProperty(exports, "DatePickerGroup", { enumerable: true, get: function () { return __importDefault(DatePickerGroup_1).default; } });
+var DatePickerGroup_2 = require("./DatePicker/DatePickerGroup");
+Object.defineProperty(exports, "convertToTimeZoneInsensitiveISOString", { enumerable: true, get: function () { return DatePickerGroup_2.convertToTimeZoneInsensitiveISOString; } });
+var StringDatePickerGroup_1 = require("./DatePicker/StringDatePickerGroup");
+Object.defineProperty(exports, "StringDatePickerGroup", { enumerable: true, get: function () { return __importDefault(StringDatePickerGroup_1).default; } });
+var StringDateOnlyPickerGroup_1 = require("./DatePicker/StringDateOnlyPickerGroup");
+Object.defineProperty(exports, "StringDateOnlyPickerGroup", { enumerable: true, get: function () { return __importDefault(StringDateOnlyPickerGroup_1).default; } });
 // Field
 var Field_1 = require("./Field/Field");
 Object.defineProperty(exports, "Field", { enumerable: true, get: function () { return __importDefault(Field_1).default; } });
@@ -52,6 +58,8 @@ var FieldErrorScrollTarget_1 = require("./Field/FieldErrorScrollTarget");
 Object.defineProperty(exports, "FieldErrorScrollTarget", { enumerable: true, get: function () { return __importDefault(FieldErrorScrollTarget_1).default; } });
 var FieldNameContext_1 = require("./Field/FieldNameContext");
 Object.defineProperty(exports, "FieldNameContext", { enumerable: true, get: function () { return FieldNameContext_1.FieldNameContext; } });
+var StandAloneInput_1 = require("./Field/StandAloneInput");
+Object.defineProperty(exports, "StandAloneInput", { enumerable: true, get: function () { return __importDefault(StandAloneInput_1).default; } });
 var useStandardField_1 = require("./Field/useStandardField");
 Object.defineProperty(exports, "useStandardField", { enumerable: true, get: function () { return __importDefault(useStandardField_1).default; } });
 // Field Array
@@ -67,6 +75,11 @@ var ServerErrorContext_1 = require("./Form/ServerErrorContext");
 Object.defineProperty(exports, "ServerErrorContext", { enumerable: true, get: function () { return ServerErrorContext_1.ServerErrorContext; } });
 var FormActions_1 = require("./FormActions");
 Object.defineProperty(exports, "FormActions", { enumerable: true, get: function () { return __importDefault(FormActions_1).default; } });
+var StandardFormActions_1 = require("./StandardFormActions");
+Object.defineProperty(exports, "StandardFormActions", { enumerable: true, get: function () { return __importDefault(StandardFormActions_1).default; } });
+// FormDefaults
+var FormDefaults_1 = require("./FormDefaults");
+Object.defineProperty(exports, "FormDefaults", { enumerable: true, get: function () { return FormDefaults_1.FormDefaults; } });
 // Input
 var Group_1 = require("./Group");
 Object.defineProperty(exports, "Group", { enumerable: true, get: function () { return __importDefault(Group_1).default; } });
@@ -92,6 +105,9 @@ Object.defineProperty(exports, "SingleNumberSelectGroup", { enumerable: true, ge
 var StringSelectGroup_1 = require("./Select/StringSelectGroup");
 Object.defineProperty(exports, "MultiStringSelectGroup", { enumerable: true, get: function () { return StringSelectGroup_1.MultiStringSelectGroup; } });
 Object.defineProperty(exports, "SingleStringSelectGroup", { enumerable: true, get: function () { return StringSelectGroup_1.SingleStringSelectGroup; } });
+// Text Area
+var TextAreaGroup_1 = require("./TextArea/TextAreaGroup");
+Object.defineProperty(exports, "TextAreaGroup", { enumerable: true, get: function () { return __importDefault(TextAreaGroup_1).default; } });
 // Utils
 var objectContainsNonSerializableProperty_1 = require("./utils/objectContainsNonSerializableProperty");
 Object.defineProperty(exports, "objectContainsNonSerializableProperty", { enumerable: true, get: function () { return __importDefault(objectContainsNonSerializableProperty_1).default; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "envoc-form",
-  "version": "4.0.1-0",
+  "version": "4.0.1-10",
   "description": "Envoc form components",
   "keywords": [
     "react-component",
@@ -37,7 +37,7 @@
     "axios": "^0.21.1",
     "classnames": "^2.3.1",
     "date-fns": "^2.22.1",
-    "envoc-request": "^4.0.1-0",
+    "envoc-request": "^4.0.1-10",
     "lru-cache": "^6.0.0",
     "prop-types": "^15.7.2",
     "react-date-picker": "^8.2.0",
@@ -72,6 +72,8 @@
     "clean-webpack-plugin": "^3.0.0",
     "cross-env": "7.0.3",
     "css-loader": "^5.0.2",
+    "eslint": "^8.32.0",
+    "eslint-config-react-app": "^7.0.1",
     "html-webpack-plugin": "^5.3.2",
     "identity-obj-proxy": "^3.0.0",
     "jest-junit": "~12.2.0",

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

@@ -4,9 +4,10 @@ exports[`AddressInput 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 envoc-form-required"
     >
       <div
         id="normaladdressinput.address1-error-scroll-target"
@@ -18,14 +19,15 @@ exports[`AddressInput has matching snapshot 1`] = `
         Address 1
       </label>
       <input
-        class="string-group input-group"
+        class="envoc-form-string-group envoc-form-input-group"
+        id="normalAddressInput.address1"
         name="normalAddressInput.address1"
         placeholder="Address, Line 1"
         value=""
       />
     </div>
     <div
-      class="string-group input-group group"
+      class="envoc-form-string-group envoc-form-input-group envoc-form-group"
     >
       <div
         id="normaladdressinput.address2-error-scroll-target"
@@ -37,14 +39,15 @@ exports[`AddressInput has matching snapshot 1`] = `
         Address 2
       </label>
       <input
-        class="string-group input-group"
+        class="envoc-form-string-group envoc-form-input-group"
+        id="normalAddressInput.address2"
         name="normalAddressInput.address2"
         placeholder="Address, Line 2"
         value=""
       />
     </div>
     <div
-      class="string-group input-group group"
+      class="envoc-form-string-group envoc-form-input-group envoc-form-group envoc-form-required"
     >
       <div
         id="normaladdressinput.city-error-scroll-target"
@@ -56,14 +59,15 @@ exports[`AddressInput has matching snapshot 1`] = `
         City
       </label>
       <input
-        class="string-group input-group"
+        class="envoc-form-string-group envoc-form-input-group"
+        id="normalAddressInput.city"
         name="normalAddressInput.city"
         placeholder="City"
         value=""
       />
     </div>
     <div
-      class="select-group group"
+      class="envoc-form-select-group envoc-form-group envoc-form-required"
     >
       <div
         id="normaladdressinput.state-error-scroll-target"
@@ -75,7 +79,7 @@ exports[`AddressInput has matching snapshot 1`] = `
         State
       </label>
       <div
-        class="select-group css-b62m3t-container"
+        class="envoc-form-select-group css-b62m3t-container"
       >
         <span
           class="css-1f43avz-a11yText-A11yText"
@@ -152,7 +156,7 @@ exports[`AddressInput has matching snapshot 1`] = `
       </div>
     </div>
     <div
-      class="string-group input-group group"
+      class="envoc-form-string-group envoc-form-input-group envoc-form-group envoc-form-required"
     >
       <div
         id="normaladdressinput.zipcode-error-scroll-target"
@@ -164,7 +168,8 @@ exports[`AddressInput has matching snapshot 1`] = `
         Zip
       </label>
       <input
-        class="string-group input-group"
+        class="envoc-form-string-group envoc-form-input-group"
+        id="normalAddressInput.zipCode"
         name="normalAddressInput.zipCode"
         placeholder="Zip"
         value=""

package/src/ConfirmBaseForm/ConfirmBaseForm.tsx

@@ -1,6 +1,7 @@
 import React, { MouseEventHandler } from 'react';
 import classNames from 'classnames';
 import { useAxiosRequest, useAxiosRequestProps } from 'envoc-request';
+import { FormDefaults } from '../FormDefaults';
 
 // TODO: change the style prop type to Tailwind type (does this exist before Tailwind 3.1 ???), or
 // should this just be type 'string'
@@ -9,6 +10,8 @@ export interface ConfirmBaseFormProps {
   request: useAxiosRequestProps;
   style?: React.CSSProperties;
   title?: string;
+  confirmButtonText?: string;
+  confirmButtonClass?: string;
   children?: React.ReactNode;
 }
 
@@ -18,6 +21,8 @@ export default function ConfirmBaseForm({
   request,
   style,
   title,
+  confirmButtonText,
+  confirmButtonClass,
   children,
   ...props
 }: ConfirmBaseFormProps) {
@@ -31,13 +36,18 @@ export default function ConfirmBaseForm({
       <h3>{title}</h3>
       {children}
       <button
-        className={classNames('confirm-base-form-yes-button')}
+        className={classNames(
+          confirmButtonClass ??
+            FormDefaults.cssClassPrefix + 'confirm-base-form-confirm-button'
+        )}
         type="button"
         onClick={webRequest.submitRequest}>
-        Yes
+        {confirmButtonText ?? 'Confirm'}
       </button>
       <button
-        className={classNames('confirm-base-form-cancel-button')}
+        className={classNames(
+          FormDefaults.cssClassPrefix + 'confirm-base-form-cancel-button'
+        )}
         type="button"
         onClick={onCancel}>
         Cancel

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

@@ -7,13 +7,13 @@ exports[`ConfirmBaseForm has matching snapshot 1`] = `
   >
     <h3 />
     <button
-      class="confirm-base-form-yes-button"
+      class="envoc-form-confirm-base-form-confirm-button"
       type="button"
     >
-      Yes
+      Confirm
     </button>
     <button
-      class="confirm-base-form-cancel-button"
+      class="envoc-form-confirm-base-form-cancel-button"
       type="button"
     >
       Cancel

package/src/ConfirmDeleteForm/ConfirmDeleteForm.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { useAxiosRequestProps } from 'envoc-request';
-import ConfirmBaseForm, { ConfirmBaseFormProps } from '../ConfirmBaseForm/ConfirmBaseForm';
+import ConfirmBaseForm, {
+  ConfirmBaseFormProps,
+} from '../ConfirmBaseForm/ConfirmBaseForm';
+import { FormDefaults } from '../FormDefaults';
 
 export interface ConfirmDeleteFormProps
   extends Pick<ConfirmBaseFormProps, 'style'> {
@@ -52,6 +55,10 @@ export default function ConfirmDeleteForm({
       request={request}
       handleCancel={goBack}
       title={title ?? 'Are you sure you want to delete this?'}
+      confirmButtonText="Yes"
+      confirmButtonClass={
+        FormDefaults.cssClassPrefix + 'confirm-delete-form-yes-button'
+      }
       {...props}>
       {children}
     </ConfirmBaseForm>

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

@@ -9,13 +9,13 @@ exports[`ConfirmDeleteForm has matching snapshot 1`] = `
       Are you sure you want to delete this?
     </h3>
     <button
-      class="confirm-base-form-yes-button"
+      class="envoc-form-confirm-delete-form-yes-button"
       type="button"
     >
       Yes
     </button>
     <button
-      class="confirm-base-form-cancel-button"
+      class="envoc-form-confirm-base-form-cancel-button"
       type="button"
     >
       Cancel

package/src/{DatePickerInput/DatePickerInput.test.tsx → DatePicker/DatePicker.test.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DatePickerInput from './DatePickerInput';
+import StringDatePickerGroup from './StringDatePickerGroup';
 import FormTestBase from '../__Tests__/FormTestBase';
 
 //hack so the datepicker internals don't complain about this not existing in the context of jest
@@ -13,7 +13,7 @@ describe('IconInputGroup', () => {
         {({ Field }) => (
           <Field
             name="favoriteDate"
-            Component={DatePickerInput}
+            Component={StringDatePickerGroup}
             label="Favorite Date"
             monthPlaceholder="mm"
             dayPlaceholder="dd"
@@ -32,7 +32,7 @@ describe('IconInputGroup', () => {
         {({ Field }) => (
           <Field
             name="favoriteDate"
-            Component={DatePickerInput}
+            Component={StringDatePickerGroup}
             label="Favorite Date"
             monthPlaceholder="mm"
             dayPlaceholder="dd"

package/src/DatePicker/DatePickerGroup.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react';
+import DatePicker, {
+  DatePickerProps,
+} from 'react-date-picker/dist/entry.nostyle';
+import classnames from 'classnames';
+import parseISO from 'date-fns/parseISO';
+import { InjectedFieldProps } from '../Field/InjectedFieldProps';
+import { FormDefaults } from '../FormDefaults';
+import Group, { GroupProps } from '../Group';
+
+// Docs for react-date-picker https://www.npmjs.com/package/react-date-picker
+
+export interface DatePickerGroupProps<T>
+  extends InjectedFieldProps<T | undefined>,
+    Omit<
+      DatePickerProps,
+      keyof InjectedFieldProps<T> | 'name' | 'value' | 'className'
+    >,
+    Omit<GroupProps, keyof InjectedFieldProps<T> | 'children'> {
+  convert: (arg: Date) => T;
+}
+
+export default function DatePickerGroup<T>({
+  input,
+  meta,
+  label,
+  helpText,
+  className,
+  required,
+  disabled,
+  convert,
+  ...rest
+}: DatePickerGroupProps<T>) {
+  const [displayDate, setDisplayDate] = useState<Date | null>(null);
+
+  useEffect(() => {
+    if (input.value != null) {
+      setDisplayDate(new Date(`${input.value}T00:00:00.000`));
+    } else {
+      setDisplayDate(null);
+    }
+  }, [setDisplayDate, input.value]);
+
+  return (
+    <Group
+      input={input}
+      meta={meta}
+      label={label}
+      helpText={helpText}
+      className={classnames(
+        className,
+        FormDefaults.cssClassPrefix + 'date-picker'
+      )}
+      required={required}
+      disabled={disabled}>
+      <DatePicker
+        {...rest}
+        className={classnames(
+          FormDefaults.cssClassPrefix + 'date-picker',
+          className
+        )}
+        value={displayDate}
+        onChange={handleChange}
+      />
+    </Group>
+  );
+
+  function handleChange(e: Date | Date[] | string | undefined) {
+    const { onChange } = input;
+    if (onChange === null) {
+      return;
+    }
+
+    if (!e) {
+      onChange(undefined);
+      setDisplayDate(null);
+      return;
+    } else if (typeof e === 'string') {
+      const parsedValue = parseISO(e.toString().split('T')[0]);
+      setDisplayDate(parsedValue);
+      onChange(convert(parsedValue));
+    } else if (e instanceof Date) {
+      const parsedValue = parseISO(
+        convertToTimeZoneInsensitiveISOString(e).split('T')[0]
+      );
+      setDisplayDate(parsedValue);
+      onChange(convert(parsedValue));
+    } else {
+      // e is instanceof Date[]
+      const parsedValue = parseISO(
+        convertToTimeZoneInsensitiveISOString(e[0]).split('T')[0]
+      );
+      setDisplayDate(parsedValue);
+      onChange(convert(parsedValue));
+    }
+  }
+}
+
+export function convertToTimeZoneInsensitiveISOString(date: Date): string {
+  const year = new Intl.DateTimeFormat('en', { year: 'numeric' })
+    .format(date)
+    .padStart(4, '0');
+  const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(
+    date
+  );
+  const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date);
+  return `${year}-${month}-${day}T00:00:00.000Z`;
+}

package/src/DatePicker/DatePickerHelper.ts

@@ -0,0 +1,4 @@
+import { DatePickerGroupProps } from './DatePickerGroup';
+
+export interface DatePickerHelper<T>
+  extends Omit<DatePickerGroupProps<T>, 'convert'> {}

package/src/DatePicker/StringDateOnlyPickerGroup.tsx

@@ -0,0 +1,23 @@
+import { DatePickerHelper } from './DatePickerHelper';
+import DatePickerGroup from './DatePickerGroup';
+
+export interface StringDateOnlyPickerGroupProps
+  extends DatePickerHelper<string | undefined> {}
+
+export default function StringDatePickerGroup(
+  props: StringDateOnlyPickerGroupProps
+) {
+  return <DatePickerGroup {...props} convert={convertToDateOnly} />;
+}
+
+function convertToDateOnly(arg: Date) {
+  const year = new Intl.DateTimeFormat('en', { year: 'numeric' })
+    .format(arg)
+    .padStart(4, '0');
+
+  const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(arg);
+
+  const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(arg);
+
+  return `${year}-${month}-${day}`;
+}

package/src/DatePicker/StringDatePickerGroup.tsx

@@ -0,0 +1,14 @@
+import DatePickerGroup from './DatePickerGroup';
+import { DatePickerHelper } from './DatePickerHelper';
+
+export interface StringDatePickerGroupProps
+  extends DatePickerHelper<string | undefined> {}
+export default function StringDatePickerGroup(
+  props: StringDatePickerGroupProps
+) {
+  return <DatePickerGroup {...props} convert={convertToDateOnly} />;
+}
+
+function convertToDateOnly(arg: Date) {
+  return arg.toISOString();
+}

package/src/{DatePickerInput/__snapshots__/DatePickerInput.test.tsx.snap → DatePicker/__snapshots__/DatePicker.test.tsx.snap}

@@ -4,9 +4,10 @@ exports[`IconInputGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
+    class="envoc-form-form"
   >
     <div
-      class="date-picker group"
+      class="envoc-form-date-picker envoc-form-group"
     >
       <div
         id="favoritedate-error-scroll-target"
@@ -18,7 +19,7 @@ exports[`IconInputGroup has matching snapshot 1`] = `
         Favorite Date
       </label>
       <div
-        class="react-date-picker react-date-picker--closed react-date-picker--enabled date-picker"
+        class="react-date-picker react-date-picker--closed react-date-picker--enabled envoc-form-date-picker"
       >
         <div
           class="react-date-picker__wrapper"

package/src/Field/Field.tsx

@@ -4,22 +4,26 @@ import { InjectedFieldProps } from './InjectedFieldProps';
 import useStandardFormInput from './useStandardField';
 import { NormalizationFunction } from '../Normalization/NormalizationFunction';
 import { ValidationFunction } from '../Validation/ValidationFunction';
+import { required as requiredValidator } from '../Validation/validators';
 
 // we attempted to support generic components but failed
 // so, we assume the actual TRenderComponent has no generic arguments
 // instead, any concrete TRenderComponent can utilize a TRenderComponent<TValue> as needed
 
-type RenderComponent<TValue, TRenderComponent extends ElementType> = Partial<
-  ComponentProps<TRenderComponent>
-> extends Partial<InjectedFieldProps<TValue>>
+export type RenderComponent<
+  TValue,
+  TRenderComponent extends ElementType
+> = Partial<ComponentProps<TRenderComponent>> extends Partial<
+  InjectedFieldProps<TValue | undefined>
+>
   ? TRenderComponent
   : never;
 
-type RenderComponentProps<
+export type RenderComponentProps<
   TValue,
   TRenderComponent extends ElementType
 > = Partial<ComponentProps<TRenderComponent>> extends Partial<
-  InjectedFieldProps<TValue>
+  InjectedFieldProps<TValue | undefined>
 >
   ? ComponentProps<TRenderComponent>
   : never;
@@ -57,9 +61,9 @@ function Field<
     name,
     Component,
     id,
-    normalize,
-    validate,
     disabled,
+    validate,
+    normalize,
     ...rest
   }: FieldProps<TForm, TProp, TRenderComponent>,
   ref: LegacyRef<any>
@@ -67,11 +71,17 @@ function Field<
   const [input, meta] = useStandardFormInput<TForm[TProp]>({
     name: String(name),
     id: id,
-    normalize: normalize,
-    validate: validate,
     disabled: disabled,
+    validate: validate,
+    normalize: normalize,
   });
 
+  const isRequired =
+    rest?.required !== undefined
+      ? rest.required
+      : validate === requiredValidator ||
+        (Array.isArray(validate) && validate.includes(requiredValidator));
+
   // a bit of a hack so JSX is happy with us
   const Wrapped = Component as React.ComponentType<
     InjectedFieldProps<TForm[TProp]>
@@ -79,7 +89,15 @@ function Field<
 
   return (
     <FieldNameContext.Provider value={input.name}>
-      <Wrapped {...rest} ref={ref} id={id} input={input} meta={meta} />
+      <Wrapped
+        {...rest}
+        ref={ref}
+        id={input.id}
+        input={input}
+        meta={meta}
+        required={isRequired}
+        disabled={disabled}
+      />
     </FieldNameContext.Provider>
   );
 }