Zen components conversion.

src/components/metrics/DatePickerForm.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
-import { Button, ButtonGroup, Calendar } from 'react-basics';
+import { Button, Row, Calendar } from '@umami/react-zen';
 import { isAfter, isBefore, isSameDay, startOfDay, endOfDay } from 'date-fns';
-import { useLocale } from '@/components/hooks';
 import { FILTER_DAY, FILTER_RANGE } from '@/lib/constants';
 import { useMessages } from '@/components/hooks';
+import { parseDate } from '@internationalized/date';
 import styles from './DatePickerForm.module.css';
 
 export function DatePickerForm({
@@ -17,10 +17,9 @@ export function DatePickerForm({
   const [selected, setSelected] = useState(
     isSameDay(defaultStartDate, defaultEndDate) ? FILTER_DAY : FILTER_RANGE,
   );
-  const [singleDate, setSingleDate] = useState(defaultStartDate);
-  const [startDate, setStartDate] = useState(defaultStartDate);
-  const [endDate, setEndDate] = useState(defaultEndDate);
-  const { dateLocale } = useLocale();
+  const [singleDate, setSingleDate] = useState(defaultStartDate || new Date());
+  const [startDate, setStartDate] = useState(defaultStartDate || new Date());
+  const [endDate, setEndDate] = useState(defaultEndDate || new Date());
   const { formatMessage, labels } = useMessages();
 
   const disabled =
@@ -36,48 +35,41 @@ export function DatePickerForm({
     }
   };
 
+  console.log({ minDate, maxDate, singleDate, startDate, endDate, disabled });
+
   return (
     <div className={styles.container}>
       <div className={styles.filter}>
-        <ButtonGroup selectedKey={selected} onSelect={key => setSelected(key as any)}>
-          <Button key={FILTER_DAY}>{formatMessage(labels.singleDay)}</Button>
-          <Button key={FILTER_RANGE}>{formatMessage(labels.dateRange)}</Button>
-        </ButtonGroup>
+        <Row>
+          <Button key={FILTER_DAY} onPress={key => setSelected(key as any)}>
+            {formatMessage(labels.singleDay)}
+          </Button>
+          <Button key={FILTER_RANGE} onPress={key => setSelected(key as any)}>
+            {formatMessage(labels.dateRange)}
+          </Button>
+        </Row>
       </div>
       <div className={styles.calendars}>
         {selected === FILTER_DAY && (
           <Calendar
-            date={singleDate}
-            minDate={minDate}
-            maxDate={maxDate}
-            locale={dateLocale}
-            onChange={setSingleDate}
+            value={parseDate(singleDate.toISOString().split('T')[0])}
+            onChange={d => setSingleDate(d.toDate('America/Los_Angeles'))}
           />
         )}
         {selected === FILTER_RANGE && (
           <>
             <Calendar
-              date={startDate}
-              minDate={minDate}
-              maxDate={endDate}
-              locale={dateLocale}
-              onChange={setStartDate}
-            />
-            <Calendar
-              date={endDate}
-              minDate={startDate}
-              maxDate={maxDate}
-              locale={dateLocale}
-              onChange={setEndDate}
+              value={parseDate(startDate.toISOString().split('T')[0])}
+              onChange={d => setStartDate(d.toDate('America/Los_Angeles'))}
             />
           </>
         )}
       </div>
       <div className={styles.buttons}>
-        <Button variant="primary" onClick={handleSave} disabled={disabled}>
+        <Button variant="primary" onPress={handleSave} isDisabled={disabled}>
           {formatMessage(labels.save)}
         </Button>
-        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+        <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
       </div>
     </div>
   );