feat(design-system): use intl format for datetime inputs

Signed-off-by: ryanwolhuter <[email protected]>

packages/design-system/src/connect/components/index.ts

@@ -2,7 +2,6 @@ export * from "./animated-loader";
 export * from "./breadcrumbs";
 export * from "./combobox";
 export * from "./cookie-banner";
-export * from "./date-time-input";
 export * from "./default-editor-loader";
 export * from "./disclosure";
 export * from "./divider";

packages/design-system/src/rwa/hooks/useDefaultFormValues.ts

@@ -13,7 +13,7 @@ import {
   TableItemType,
   TableName,
 } from "../types";
-import { convertToDateTimeLocalFormat } from "../utils";
+import { isoDateStringToDateInput } from "../utils";
 
 export function useDefaultFormValues(args: {
   tableName: TableName;
@@ -40,7 +40,7 @@ export function useDefaultFormValues(args: {
         case tableNames.TRANSACTION:
           return {
             type: allGroupTransactionTypes[0],
-            entryTime: convertToDateTimeLocalFormat(new Date()),
+            entryTime: isoDateStringToDateInput(new Date().toISOString(), true),
             cashAmount: null,
             fixedIncomeId: null,
             fixedIncomeAmount: null,
@@ -78,7 +78,9 @@ export function useDefaultFormValues(args: {
           fixedIncomeTypeId: item.fixedIncomeTypeId,
           spvId: item.spvId,
           name: item.name,
-          maturity: item.maturity,
+          maturity: item.maturity
+            ? isoDateStringToDateInput(item.maturity)
+            : null,
           ISIN: item.ISIN,
           CUSIP: item.CUSIP,
           coupon: item.coupon,
@@ -89,7 +91,9 @@ export function useDefaultFormValues(args: {
         return {
           id: item.id,
           type: item.type,
-          entryTime: convertToDateTimeLocalFormat(item.entryTime),
+          entryTime: item.entryTime
+            ? isoDateStringToDateInput(item.entryTime, true)
+            : null,
           cashAmount: item.cashTransaction.amount ?? null,
           fixedIncomeId: item.fixedIncomeTransaction?.assetId ?? null,
           fixedIncomeAmount: item.fixedIncomeTransaction?.amount ?? null,

packages/design-system/src/rwa/hooks/useFormInputs.tsx

@@ -1,4 +1,3 @@
-import { DateTimeLocalInput } from "@/connect";
 import {
   Account,
   allGroupTransactionTypes,
@@ -67,7 +66,6 @@ export function useFormInputs(props: Props): {
     fixedIncomes,
   } = useEditorContext();
   const { showModal } = useModal();
-
   const showCreateItemModal = useCallback(
     (tableName: TableName) => () => {
       showModal("createItem", { tableName });
@@ -81,9 +79,9 @@ export function useFormInputs(props: Props): {
         const tableItem = _tableItem as TableItemType<"ASSET"> | null;
         type Payload = FormInputsByTableName["ASSET"];
         const register = _register as UseFormRegister<Payload>;
-        const watch = _watch as UseFormWatch<Payload>;
         const formState = _formState as FormState<Payload>;
         const { errors } = formState;
+
         const control = _control as Control<Payload>;
         const derivedInputsToDisplay =
           operation !== "create" && !!tableItem
@@ -111,11 +109,6 @@ export function useFormInputs(props: Props): {
               ]
             : [];
 
-        const maturityInputValue =
-          operation === "view" && tableItem
-            ? tableItem.maturity
-            : watch("maturity") || tableItem?.maturity;
-
         const inputs = [
           {
             label: "Asset Name",
@@ -189,20 +182,17 @@ export function useFormInputs(props: Props): {
           {
             label: "Maturity",
             Input: () => (
-              <DateTimeLocalInput
+              <input
+                className="h-8 w-full rounded-md bg-gray-100 px-3 disabled:bg-transparent disabled:p-0"
+                step={1}
+                type="date"
                 {...register("maturity", {
                   disabled: operation === "view",
-                  setValueAs: (value) => {
-                    if (value === "") return null;
-                    return value as string;
-                  },
                 })}
-                inputType="date"
-                name="maturity"
               />
             ),
-            inputLabel: maturityInputValue
-              ? formatDateForDisplay(maturityInputValue, true)
+            inputLabel: tableItem?.maturity
+              ? formatDateForDisplay(tableItem.maturity, true)
               : null,
           },
           {
@@ -302,12 +292,14 @@ export function useFormInputs(props: Props): {
           {
             label: "Entry Time",
             Input: () => (
-              <DateTimeLocalInput
+              <input
+                className="h-8 w-full rounded-md bg-gray-100 px-3 disabled:bg-transparent disabled:p-0"
+                step={1}
+                type="datetime-local"
                 {...register("entryTime", {
-                  required: true,
                   disabled: operation === "view",
+                  required: "Entry time is required",
                 })}
-                name="entryTime"
               />
             ),
             inputLabel: entryTimeInputValue

packages/design-system/src/rwa/utils/date.ts

@@ -1,20 +1,25 @@
 import { formatInTimeZone } from "date-fns-tz/formatInTimeZone";
-import { format } from "date-fns/format";
 
-/**
- * The html datetime local input requires this specific format
- */
-export function convertToDateTimeLocalFormat(date: Date | string = new Date()) {
-  return format(date, "yyyy-MM-dd'T'HH:mm");
-}
 export function formatDateForDisplay(date: Date | string, displayTime = true) {
   const formatString = displayTime ? "yyyy/MM/dd, HH:mm:ss zzz" : "yyyy/MM/dd";
-
-  return formatInTimeZone(date, "UTC", formatString);
+  return formatInTimeZone(date, getTimeZone(), formatString);
 }
 
 export function isISODate(str: string) {
   if (!/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/.test(str)) return false;
   const d = new Date(str);
   return d instanceof Date && !isNaN(d.getTime()) && d.toISOString() === str;
 }
+
+export function getTimeZone() {
+  return Intl.DateTimeFormat().resolvedOptions().timeZone;
+}
+
+export function isoDateStringToDateInput(
+  isoDateString: string,
+  withTime = false,
+) {
+  const format = withTime ? "yyyy-MM-dd'T'HH:mm:ss.SSS" : "yyyy-MM-dd";
+  const timeZone = getTimeZone();
+  return formatInTimeZone(isoDateString, timeZone, format);
+}

packages/document-model-libs/package.json

@@ -90,7 +90,7 @@
     "@monaco-editor/react": "^4.6.0",
     "@mui/material": "^5.15.5",
     "@powerhousedao/codegen": "0.14.1",
-    "@powerhousedao/design-system": "^1.7.2",
+    "@powerhousedao/design-system": "workspace:*",
     "@powerhousedao/scalars": "^1.9.0",
     "@prettier/sync": "^0.5.2",
     "@radix-ui/react-checkbox": "^1.1.2",