Removed date-fns and date-fns-tz from all autocomponents

packages/react/package.json

@@ -50,8 +50,6 @@
     "@0no-co/graphql.web": "^1.0.4",
     "@gadgetinc/api-client-core": "^0.15.24",
     "@hookform/resolvers": "^3.3.1",
-    "date-fns": "^2.30.0",
-    "date-fns-tz": "^2.0.0",
     "filesize": "^10.1.2",
     "pluralize": "^8.0.0",
     "react-fast-compare": "^3.2.2",
@@ -113,7 +111,9 @@
     "setup-polly-jest": "^0.11.0",
     "storybook": "^8.1.6",
     "tmp": "^0.2.3",
-    "wonka": "^6.3.2"
+    "wonka": "^6.3.2",
+    "date-fns": "^2.30.0",
+    "date-fns-tz": "^2.0.0"
   },
   "peerDependencies": {
     "@mdxeditor/editor": "^3.8.0",

packages/react/src/auto/mui/inputs/MUIAutoDateTimePicker.tsx

@@ -1,9 +1,9 @@
 import { Box } from "@mui/material";
 import { DatePicker, TimePicker } from "@mui/x-date-pickers";
-import { zonedTimeToUtc } from "date-fns-tz";
 import React from "react";
 import { useController } from "react-hook-form";
 import type { GadgetDateTimeConfig } from "../../../internal/gql/graphql.js";
+import { zonedTimeToUtc } from "../../../utils.js";
 import { useFieldMetadata } from "../../hooks/useFieldMetadata.js";
 
 export const MUIAutoDateTimePicker = (props: { field: string; value?: Date; onChange?: (value: Date) => void; error?: string }) => {

packages/react/src/auto/polaris/inputs/PolarisAutoDateTimePicker.tsx

@@ -1,11 +1,10 @@
 import type { DatePickerProps, TextFieldProps } from "@shopify/polaris";
 import { DatePicker, Icon, InlineStack, Popover, TextField } from "@shopify/polaris";
 import { CalendarIcon } from "@shopify/polaris-icons";
-import { format, isValid } from "date-fns";
-import { utcToZonedTime, zonedTimeToUtc } from "date-fns-tz";
 import React, { useCallback, useMemo, useState } from "react";
 import { useController } from "react-hook-form";
 import type { GadgetDateTimeConfig } from "../../../internal/gql/graphql.js";
+import { formatShortDateString, isValidDate, utcToZonedTime, zonedTimeToUtc } from "../../../utils.js";
 import { useFieldMetadata } from "../../hooks/useFieldMetadata.js";
 import type { DateTimeState } from "./PolarisAutoTimePicker.js";
 import PolarisAutoTimePicker from "./PolarisAutoTimePicker.js";
@@ -60,7 +59,7 @@ export const PolarisAutoDateTimePicker = (props: {
   const { onChange, value } = props;
   const localTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
   const localTime = useMemo(() => {
-    return value ? value : isValid(new Date(fieldProps.value)) ? new Date(fieldProps.value) : undefined;
+    return value ? value : isValidDate(new Date(fieldProps.value)) ? new Date(fieldProps.value) : undefined;
   }, [value, fieldProps.value]);
 
   const [datePopoverActive, setDatePopoverActive] = useState(false);
@@ -74,7 +73,7 @@ export const PolarisAutoDateTimePicker = (props: {
     (range) => {
       (fieldProps || value) && copyTime(range.start, zonedTimeToUtc(range.start, localTz));
       const dateOverride = value ?? new Date(fieldProps.value);
-      if (isValid(dateOverride)) {
+      if (isValidDate(dateOverride)) {
         range.start.setHours(dateOverride.getHours());
         range.start.setMinutes(dateOverride.getMinutes());
         range.start.setSeconds(dateOverride.getSeconds());
@@ -88,8 +87,8 @@ export const PolarisAutoDateTimePicker = (props: {
   );
 
   const toggleDatePopoverActive = useCallback(() => {
-    setPopoverMonth(getDateTimeObjectFromDate(isValid(localTime) && localTime ? localTime : new Date()).month);
-    setPopoverYear(getDateTimeObjectFromDate(isValid(localTime) && localTime ? localTime : new Date()).year);
+    setPopoverMonth(getDateTimeObjectFromDate(isValidDate(localTime) && localTime ? localTime : new Date()).month);
+    setPopoverYear(getDateTimeObjectFromDate(isValidDate(localTime) && localTime ? localTime : new Date()).year);
     setDatePopoverActive((active) => !active);
   }, [localTime]);
   const handleMonthChange = useCallback((month: number, year: number) => {
@@ -108,7 +107,7 @@ export const PolarisAutoDateTimePicker = (props: {
             label={metadata.name ?? "Date"}
             prefix={<Icon source={CalendarIcon} />}
             autoComplete="off"
-            value={localTime ? format(localTime, "yyyy-MM-dd") : ""}
+            value={localTime ? formatShortDateString(localTime) : ""}
             onFocus={toggleDatePopoverActive}
             error={props.error}
           />

packages/react/src/auto/polaris/inputs/PolarisAutoTimePicker.tsx

@@ -1,9 +1,9 @@
 import type { TextFieldProps } from "@shopify/polaris";
 import { Box, Icon, Listbox, Popover, Scrollable, Text, TextField } from "@shopify/polaris";
 import { ClockIcon } from "@shopify/polaris-icons";
-import { zonedTimeToUtc } from "date-fns-tz";
 import React, { useEffect, useState } from "react";
 import type { ControllerRenderProps, FieldValues } from "react-hook-form";
+import { zonedTimeToUtc } from "../../../utils.js";
 import { copyTime, getDateFromDateTimeObject, getDateTimeObjectFromDate } from "./PolarisAutoDateTimePicker.js";
 
 const createMarkup = (

packages/react/src/auto/polaris/tableCells/PolarisAutoTableDateTimeCell.tsx

@@ -1,11 +1,9 @@
-import { format } from "date-fns";
 import React from "react";
+import { formatLongDateTimeString } from "../../../utils.js";
 import { PolarisAutoTableTextCell } from "./PolarisAutoTableTextCell.js";
 
 export const PolarisAutoTableDateTimeCell = (props: { value: Date; includeTime: boolean }) => {
   const { value, includeTime } = props;
 
-  const timeFormat = includeTime ? "LLL d, y K:mm a" : "LLL d, y";
-
-  return value instanceof Date ? <PolarisAutoTableTextCell value={format(value, timeFormat)} /> : null;
+  return value instanceof Date ? <PolarisAutoTableTextCell value={formatLongDateTimeString(value, includeTime)} /> : null;
 };