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

frontend/src/components/DatePicker/Calendar/CalendarHeader.tsx

@@ -30,6 +30,8 @@ const MonthYearSelect = ({
     <Select
       // Prevents any parent form control from applying error styles to this select.
       isInvalid={false}
+      variant="flushed"
+      borderRadius="4px"
       color="secondary.500"
       textStyle="subhead-1"
       flexBasis="fit-content"
@@ -54,6 +56,7 @@ const SelectableMonthYear = memo(() => {
 
   const shouldUseMonthFullName = useBreakpointValue({
     base: false,
+    xs: false,
     md: true,
   })
 
@@ -87,36 +90,37 @@ const SelectableMonthYear = memo(() => {
   )
 
   return (
-    <HStack>
+    <>
       <VisuallyHidden aria-live="polite" aria-atomic>
         Currently displaying {MONTH_NAMES[currMonth].fullName} {currYear}
       </VisuallyHidden>
-      <MonthYearSelect
-        tabIndex={1}
-        value={currMonth}
-        onChange={handleMonthChange}
-        aria-label="Change displayed month"
-        // Align with dates
-        pl={{ base: '0', md: '2px' }}
-      >
-        {memoizedMonthOptions}
-      </MonthYearSelect>
-      <MonthYearSelect
-        tabIndex={1}
-        value={currYear}
-        onChange={handleYearChange}
-        aria-label="Change displayed year"
-      >
-        {memoizedYearOptions}
-      </MonthYearSelect>
-    </HStack>
+      <HStack>
+        <MonthYearSelect
+          // Align with dates in the calendar
+          pl={{ base: '0.5rem', md: '1rem' }}
+          value={currMonth}
+          onChange={handleMonthChange}
+          aria-label="Change displayed month"
+        >
+          {memoizedMonthOptions}
+        </MonthYearSelect>
+        <MonthYearSelect
+          value={currYear}
+          onChange={handleYearChange}
+          aria-label="Change displayed year"
+        >
+          {memoizedYearOptions}
+        </MonthYearSelect>
+      </HStack>
+    </>
   )
 })
 
 const MonthYear = memo(({ monthOffset }: CalendarHeaderProps) => {
   const { currMonth, currYear } = useCalendar()
   const shouldUseMonthFullName = useBreakpointValue({
     base: false,
+    xs: false,
     md: true,
   })
 
@@ -136,7 +140,7 @@ const MonthYear = memo(({ monthOffset }: CalendarHeaderProps) => {
 
   return (
     <HStack
-      ml="1.25rem"
+      ml={{ base: '0.5rem', md: '1rem' }}
       textStyle="subhead-1"
       color="secondary.500"
       spacing="1.5rem"
@@ -164,21 +168,19 @@ export const CalendarHeader = memo(
         {calendars.length - 1 === monthOffset ? (
           <Flex sx={styles.monthArrowContainer}>
             <IconButton
-              tabIndex={1}
               variant="clear"
               colorScheme="secondary"
               icon={<BxChevronLeft />}
               aria-label="Back one month"
-              minW={{ base: '1.75rem', xs: '2.75rem', sm: '2.75rem' }}
+              // minW={{ base: '1.75rem', xs: '2.75rem', sm: '2.75rem' }}
               {...getBackProps({ calendars })}
             />
             <IconButton
-              tabIndex={1}
               variant="clear"
               colorScheme="secondary"
               icon={<BxChevronRight />}
               aria-label="Forward one month"
-              minW={{ base: '1.75rem', xs: '2.75rem', sm: '2.75rem' }}
+              // minW={{ base: '1.75rem', xs: '2.75rem', sm: '2.75rem' }}
               {...getForwardProps({ calendars })}
             />
           </Flex>

frontend/src/components/DatePicker/DateInput.tsx

@@ -10,13 +10,11 @@ import {
   PopoverHeader,
   PopoverTrigger,
   Text,
-  VisuallyHidden,
 } from '@chakra-ui/react'
 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 +37,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,15 +72,13 @@ 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 }) => (
             <>
               <PopoverAnchor>
                 <Input
+                  zIndex={1}
                   type="date"
                   onKeyDown={handlePreventOpenNativeCalendar}
                   sx={{
@@ -105,14 +99,9 @@ export const DateInput = forwardRef<DateInputProps, 'input'>(
                 <IconButton
                   aria-label={calendarButtonAria}
                   icon={<BxCalendar />}
+                  variant="inputAttached"
+                  borderRadius={0}
                   isActive={isOpen}
-                  fontSize="1.25rem"
-                  variant="outline"
-                  color="secondary.500"
-                  borderColor="neutral.400"
-                  borderRadius="0"
-                  // Avoid double border with input
-                  ml="-1px"
                 />
               </PopoverTrigger>
               <PopoverContent
@@ -122,11 +111,6 @@ export const DateInput = forwardRef<DateInputProps, 'input'>(
                 bg="white"
               >
                 <FocusLock returnFocus>
-                  {/* Having this extra guard here allows for tab rotation instead of closing the 
-                    calendar on certain tab key presses.
-                    data-focus-guard is required to work with FocusLock
-                    NFI why this is necessary, just that it works. Such is the life of a software engineer. */}
-                  <VisuallyHidden data-focus-guard tabIndex={2} />
                   <PopoverHeader p={0}>
                     <Flex
                       h="3.5rem"

frontend/src/components/DatePicker/DateRangeInput.tsx

@@ -19,7 +19,6 @@ import {
   PopoverTrigger,
   Portal,
   Text,
-  VisuallyHidden,
   Wrap,
 } from '@chakra-ui/react'
 import { compareAsc } from 'date-fns'
@@ -249,11 +248,6 @@ export const DateRangeInput = forwardRef<DateRangeInputProps, 'input'>(
                   bg="white"
                 >
                   <FocusLock returnFocus>
-                    {/* Having this extra guard here allows for tab rotation instead of closing the 
-                    calendar on certain tab key presses.
-                    data-focus-guard is required to work with FocusLock
-                    NFI why this is necessary, just that it works. Such is the life of a software engineer. */}
-                    <VisuallyHidden data-focus-guard tabIndex={2} />
                     <PopoverHeader p={0}>
                       <Flex
                         h="3.5rem"

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

@@ -1,11 +1,10 @@
-import { Text } from '@chakra-ui/react'
-
 import { BasicField, FormFieldDto } from '~shared/types/field'
 import { FormColorTheme } from '~shared/types/form'
 
 import {
   AttachmentField,
   CheckboxField,
+  DateField,
   DecimalField,
   DropdownField,
   EmailField,
@@ -33,6 +32,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} />
@@ -117,11 +120,5 @@ export const FormField = ({ field, colorTheme }: FormFieldProps) => {
       )
     case BasicField.Table:
       return <TableField key={field._id} schema={field as TableFieldSchema} />
-    default:
-      return (
-        <Text w="100%" key={field._id}>
-          {JSON.stringify(field)}
-        </Text>
-      )
   }
 }

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',
+}