feat(inputs): ✨ Add Date input

apps/builder/components/board/StepTypesList/StepIcon.tsx

@@ -1,4 +1,5 @@
 import {
+  CalendarIcon,
   ChatIcon,
   EmailIcon,
   FlagIcon,
@@ -28,6 +29,9 @@ export const StepIcon = ({ type }: StepIconProps) => {
     case InputStepType.URL: {
       return <GlobeIcon />
     }
+    case InputStepType.DATE: {
+      return <CalendarIcon />
+    }
     case 'start': {
       return <FlagIcon />
     }

apps/builder/components/board/StepTypesList/StepTypeLabel.tsx

@@ -19,6 +19,9 @@ export const StepTypeLabel = ({ type }: Props) => {
     case InputStepType.URL: {
       return <Text>Website</Text>
     }
+    case InputStepType.DATE: {
+      return <Text>Date</Text>
+    }
     default: {
       return <></>
     }

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx

@@ -1,10 +1,13 @@
 import { PopoverContent, PopoverArrow, PopoverBody } from '@chakra-ui/react'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { InputStepType, Step, TextInputOptions } from 'models'
-import { EmailInputSettingsBody } from './EmailInputSettingsBody'
-import { NumberInputSettingsBody } from './NumberInputSettingsBody'
-import { TextInputSettingsBody } from './TextInputSettingsBody'
-import { UrlInputSettingsBody } from './UrlInputSettingsBody'
+import {
+  TextInputSettingsBody,
+  NumberInputSettingsBody,
+  EmailInputSettingsBody,
+  UrlInputSettingsBody,
+  DateInputSettingsBody,
+} from './bodies'
 
 type Props = {
   step: Step
@@ -60,6 +63,14 @@ const SettingsPopoverBodyContent = ({ step }: Props) => {
         />
       )
     }
+    case InputStepType.DATE: {
+      return (
+        <DateInputSettingsBody
+          options={step.options}
+          onOptionsChange={handleOptionsChange}
+        />
+      )
+    }
     default: {
       return <></>
     }

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx

@@ -0,0 +1,80 @@
+import { FormLabel, Stack } from '@chakra-ui/react'
+import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
+import { DateInputOptions } from 'models'
+import React from 'react'
+
+type DateInputSettingsBodyProps = {
+  options?: DateInputOptions
+  onOptionsChange: (options: DateInputOptions) => void
+}
+
+export const DateInputSettingsBody = ({
+  options,
+  onOptionsChange,
+}: DateInputSettingsBodyProps) => {
+  const handleFromChange = (from: string) =>
+    onOptionsChange({ ...options, labels: { ...options?.labels, from } })
+  const handleToChange = (to: string) =>
+    onOptionsChange({ ...options, labels: { ...options?.labels, to } })
+  const handleButtonLabelChange = (button: string) =>
+    onOptionsChange({ ...options, labels: { ...options?.labels, button } })
+  const handleIsRangeChange = (isRange: boolean) =>
+    onOptionsChange({ ...options, isRange })
+  const handleHasTimeChange = (hasTime: boolean) =>
+    onOptionsChange({ ...options, hasTime })
+
+  return (
+    <Stack spacing={4}>
+      <SwitchWithLabel
+        id="is-range"
+        label={'Is range?'}
+        initialValue={options?.isRange ?? false}
+        onCheckChange={handleIsRangeChange}
+      />
+      <SwitchWithLabel
+        id="with-time"
+        label={'With time?'}
+        initialValue={options?.isRange ?? false}
+        onCheckChange={handleHasTimeChange}
+      />
+      {options?.isRange && (
+        <Stack>
+          <FormLabel mb="0" htmlFor="from">
+            From label:
+          </FormLabel>
+          <DebouncedInput
+            id="from"
+            initialValue={options?.labels?.from ?? 'From:'}
+            delay={100}
+            onChange={handleFromChange}
+          />
+        </Stack>
+      )}
+      {options?.isRange && (
+        <Stack>
+          <FormLabel mb="0" htmlFor="to">
+            To label:
+          </FormLabel>
+          <DebouncedInput
+            id="to"
+            initialValue={options?.labels?.to ?? 'To:'}
+            delay={100}
+            onChange={handleToChange}
+          />
+        </Stack>
+      )}
+      <Stack>
+        <FormLabel mb="0" htmlFor="button">
+          Button label:
+        </FormLabel>
+        <DebouncedInput
+          id="button"
+          initialValue={options?.labels?.button ?? 'Send'}
+          delay={100}
+          onChange={handleButtonLabelChange}
+        />
+      </Stack>
+    </Stack>
+  )
+}

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/index.ts

@@ -0,0 +1,5 @@
+export * from './DateInputSettingsBody'
+export * from './EmailInputSettingsBody'
+export * from './NumberInputSettingsBody'
+export * from './TextInputSettingsBody'
+export * from './UrlInputSettingsBody'

apps/builder/components/board/graph/BlockNode/StepNode/StepNodeLabel.tsx

@@ -46,6 +46,13 @@ export const StepNodeLabel = (props: Step | StartStep) => {
         </Text>
       )
     }
+    case InputStepType.DATE: {
+      return (
+        <Text color={'gray.500'}>
+          {props.options?.labels?.from ?? 'Pick a date...'}
+        </Text>
+      )
+    }
     case 'start': {
       return <Text>{props.label}</Text>
     }