⚡ (dateInput) Add format option and improve parsing

Use date-fns for custom format and make sure dates are timezone independants

Closes #533, closes #592

apps/builder/src/features/account/UserProvider.tsx

@@ -44,7 +44,6 @@ export const UserProvider = ({ children }: { children: ReactNode }) => {
       | 'dark'
       | null
     if (currentColorScheme === user.preferredAppAppearance) return
-    console.log('SET')
     setColorMode(user.preferredAppAppearance)
   }, [setColorMode, user?.preferredAppAppearance])
 

apps/builder/src/features/blocks/inputs/date/components/DateInputSettings.tsx

@@ -1,3 +1,4 @@
+import { SwitchWithRelatedSettings } from '@/components/SwitchWithRelatedSettings'
 import { TextInput } from '@/components/inputs'
 import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
 import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
@@ -11,49 +12,57 @@ type Props = {
 }
 
 export const DateInputSettings = ({ options, onOptionsChange }: Props) => {
-  const handleFromChange = (from: string) =>
+  const updateFromLabel = (from: string) =>
     onOptionsChange({ ...options, labels: { ...options?.labels, from } })
-  const handleToChange = (to: string) =>
+  const updateToLabel = (to: string) =>
     onOptionsChange({ ...options, labels: { ...options?.labels, to } })
-  const handleButtonLabelChange = (button: string) =>
+  const updateButtonLabel = (button: string) =>
     onOptionsChange({ ...options, labels: { ...options?.labels, button } })
-  const handleIsRangeChange = (isRange: boolean) =>
+  const updateIsRange = (isRange: boolean) =>
     onOptionsChange({ ...options, isRange })
-  const handleHasTimeChange = (hasTime: boolean) =>
+  const updateHasTime = (hasTime: boolean) =>
     onOptionsChange({ ...options, hasTime })
-  const handleVariableChange = (variable?: Variable) =>
+  const updateVariable = (variable?: Variable) =>
     onOptionsChange({ ...options, variableId: variable?.id })
+  const updateFormat = (format: string) => {
+    if (format === '') return onOptionsChange({ ...options, format: undefined })
+    onOptionsChange({ ...options, format })
+  }
 
   return (
     <Stack spacing={4}>
-      <SwitchWithLabel
+      <SwitchWithRelatedSettings
         label="Is range?"
         initialValue={options.isRange}
-        onCheckChange={handleIsRangeChange}
-      />
+        onCheckChange={updateIsRange}
+      >
+        <TextInput
+          label="From label:"
+          defaultValue={options.labels.from}
+          onChange={updateFromLabel}
+        />
+        <TextInput
+          label="To label:"
+          defaultValue={options.labels.to}
+          onChange={updateToLabel}
+        />
+      </SwitchWithRelatedSettings>
       <SwitchWithLabel
         label="With time?"
         initialValue={options.hasTime}
-        onCheckChange={handleHasTimeChange}
+        onCheckChange={updateHasTime}
       />
-      {options.isRange && (
-        <>
-          <TextInput
-            label="From label:"
-            defaultValue={options.labels.from}
-            onChange={handleFromChange}
-          />
-          <TextInput
-            label="To label:"
-            defaultValue={options.labels.to}
-            onChange={handleToChange}
-          />
-        </>
-      )}
       <TextInput
         label="Button label:"
         defaultValue={options.labels.button}
-        onChange={handleButtonLabelChange}
+        onChange={updateButtonLabel}
+      />
+      <TextInput
+        label="Format:"
+        defaultValue={options.format}
+        moreInfoTooltip="Popular formats: dd/MM/yyyy, MM/dd/yy, yyyy-MM-dd"
+        placeholder={options.hasTime ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy'}
+        onChange={updateFormat}
       />
       <Stack>
         <FormLabel mb="0" htmlFor="variable">
@@ -61,7 +70,7 @@ export const DateInputSettings = ({ options, onOptionsChange }: Props) => {
         </FormLabel>
         <VariableSearchInput
           initialVariableId={options.variableId}
-          onSelectVariable={handleVariableChange}
+          onSelectVariable={updateVariable}
         />
       </Stack>
     </Stack>

apps/builder/src/features/blocks/inputs/date/date.spec.ts

@@ -49,7 +49,17 @@ test.describe('Date input block', () => {
     await page.locator('[data-testid="to-date"]').fill('2022-01-01T09:00')
     await page.getByRole('button', { name: 'Go' }).click()
     await expect(
-      page.locator('text="01/01/2021, 11:00 AM to 01/01/2022, 09:00 AM"')
+      page.locator('text="01/01/2021 11:00 to 01/01/2022 09:00"')
+    ).toBeVisible()
+
+    await page.click(`text=Pick a date...`)
+    await page.getByPlaceholder('dd/MM/yyyy HH:mm').fill('dd.MM HH:mm')
+    await page.click('text=Restart')
+    await page.locator('[data-testid="from-date"]').fill('2023-01-01T11:00')
+    await page.locator('[data-testid="to-date"]').fill('2023-02-01T09:00')
+    await page.getByRole('button', { name: 'Go' }).click()
+    await expect(
+      page.locator('text="01.01 11:00 to 01.02 09:00"')
     ).toBeVisible()
   })
 })