feat(v2): add (and render) public form date field

frontend/src/components/DatePicker/DateInput.tsx

@@ -16,7 +16,6 @@ import { ComponentWithAs, forwardRef } from '@chakra-ui/system'
 import { format } from 'date-fns'
 
 import { BxCalendar } from '~assets/icons'
-import { useIsMobile } from '~hooks/useIsMobile'
 import IconButton from '~components/IconButton'
 
 import Input, { InputProps } from '../Input'
@@ -39,8 +38,6 @@ export const DateInput = forwardRef<DateInputProps, 'input'>(
   ({ onChange, value = '', isDateUnavailable, ...props }, ref) => {
     const initialFocusRef = useRef<HTMLInputElement>(null)
 
-    const isMobile = useIsMobile()
-
     const handleDatepickerSelection = useCallback(
       (d: Date) => {
         onChange?.(format(d, 'yyyy-MM-dd'))
@@ -76,9 +73,6 @@ export const DateInput = forwardRef<DateInputProps, 'input'>(
         <Popover
           placement="bottom-start"
           initialFocusRef={initialFocusRef}
-          // Prevent mobile taps to close popover when doing something like
-          // changing months in the selector.
-          closeOnBlur={!isMobile}
           isLazy
         >
           {({ isOpen }) => (

frontend/src/features/public-form/components/FormFields/FormField.tsx

@@ -6,6 +6,7 @@ import { FormColorTheme } from '~shared/types/form'
 import {
   AttachmentField,
   CheckboxField,
+  DateField,
   DecimalField,
   EmailField,
   HomeNoField,
@@ -32,6 +33,10 @@ interface FormFieldProps {
 
 export const FormField = ({ field, colorTheme }: FormFieldProps) => {
   switch (field.fieldType) {
+    case BasicField.Date:
+      return (
+        <DateField key={field._id} schema={field} colorTheme={colorTheme} />
+      )
     case BasicField.Section:
       return (
         <SectionField key={field._id} schema={field} colorTheme={colorTheme} />

frontend/src/templates/Field/Date/DateField.stories.tsx

@@ -0,0 +1,158 @@
+import { useEffect, useState } from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
+import { Text } from '@chakra-ui/react'
+import { Meta, Story } from '@storybook/react'
+import { addDays, lightFormat } from 'date-fns'
+
+import { BasicField, DateSelectedValidation } from '~shared/types/field'
+
+import { mockDateDecorator } from '~utils/storybook'
+import Button from '~components/Button'
+
+import {
+  DateField as DateFieldComponent,
+  DateFieldProps,
+  DateFieldSchema,
+} from './DateField'
+
+const MOCKED_TODAY_DATE = '2021-12-13'
+
+export default {
+  title: 'Templates/Field/DateField',
+  component: DateFieldComponent,
+  decorators: [mockDateDecorator],
+  parameters: {
+    // Exported for testing
+    test: {
+      MOCKED_TODAY_DATE,
+    },
+    mockdate: new Date(MOCKED_TODAY_DATE),
+    docs: {
+      // Required in this story due to react-hook-form conflicting with
+      // Storybook somehow.
+      // See https://github.com/storybookjs/storybook/issues/12747.
+      source: {
+        type: 'code',
+      },
+    },
+  },
+} as Meta
+
+const baseSchema: DateFieldSchema = {
+  dateValidation: {
+    customMaxDate: null,
+    customMinDate: null,
+    selectedDateValidation: null,
+  },
+  title: 'Date field snapshot',
+  description: '',
+  required: true,
+  disabled: false,
+  fieldType: BasicField.Date,
+  _id: '611b94dfbb9e300012f702a7',
+}
+
+interface StoryDateFieldProps extends DateFieldProps {
+  defaultValue?: string
+}
+
+const Template: Story<StoryDateFieldProps> = ({ defaultValue, ...args }) => {
+  const formMethods = useForm({
+    defaultValues: {
+      [args.schema._id]: defaultValue,
+    },
+  })
+
+  const [submitValues, setSubmitValues] = useState<string>()
+
+  const onSubmit = (values: Record<string, string>) => {
+    setSubmitValues(values[args.schema._id] || 'Nothing was selected')
+  }
+
+  useEffect(() => {
+    if (defaultValue !== undefined) {
+      formMethods.trigger()
+    }
+  }, [])
+
+  return (
+    <FormProvider {...formMethods}>
+      <form onSubmit={formMethods.handleSubmit(onSubmit)} noValidate>
+        <DateFieldComponent {...args} />
+        <Button
+          mt="1rem"
+          type="submit"
+          isLoading={formMethods.formState.isSubmitting}
+          loadingText="Submitting"
+        >
+          Submit
+        </Button>
+        {submitValues && <Text>You have submitted: {submitValues}</Text>}
+      </form>
+    </FormProvider>
+  )
+}
+
+export const ValidationRequired = Template.bind({})
+ValidationRequired.args = {
+  schema: baseSchema,
+  defaultValue: '',
+}
+
+export const ValidationOptional = Template.bind({})
+ValidationOptional.args = {
+  schema: {
+    ...baseSchema,
+    required: false,
+    description: 'Date field is optional',
+  },
+  defaultValue: '',
+}
+
+export const ValidationNoFuture = Template.bind({})
+ValidationNoFuture.args = {
+  schema: {
+    ...baseSchema,
+    description: 'Future dates are disallowed',
+    dateValidation: {
+      customMaxDate: null,
+      customMinDate: null,
+      selectedDateValidation: DateSelectedValidation.NoFuture,
+    },
+  },
+  defaultValue: lightFormat(
+    addDays(new Date(MOCKED_TODAY_DATE), 10),
+    'yyyy-MM-dd',
+  ),
+}
+
+export const ValidationNoPast = Template.bind({})
+ValidationNoPast.args = {
+  schema: {
+    ...baseSchema,
+    description: 'Past dates are disallowed',
+    dateValidation: {
+      customMaxDate: null,
+      customMinDate: null,
+      selectedDateValidation: DateSelectedValidation.NoPast,
+    },
+  },
+  defaultValue: lightFormat(
+    addDays(new Date(MOCKED_TODAY_DATE), -10),
+    'yyyy-MM-dd',
+  ),
+}
+
+export const ValidationCustomRange = Template.bind({})
+ValidationCustomRange.args = {
+  schema: {
+    ...baseSchema,
+    description: 'Only 12 December to 25 December 2021 is allowed',
+    dateValidation: {
+      customMaxDate: new Date('2021-12-25'),
+      customMinDate: new Date('2021-12-12'),
+      selectedDateValidation: DateSelectedValidation.Custom,
+    },
+  },
+  defaultValue: '2021-12-26',
+}