diff --git a/packages/design-system/src/connect/components/date-time-input/date-time-local-input.stories.tsx b/packages/design-system/src/connect/components/date-time-input/date-time-local-input.stories.tsx deleted file mode 100644 index f594ce357..000000000 --- a/packages/design-system/src/connect/components/date-time-input/date-time-local-input.stories.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { useState } from "react"; -import { DateTimeLocalInput } from "."; - -const meta = { - title: "Connect/Components/Date Time Local Input", - component: DateTimeLocalInput, - argTypes: { - inputType: { - control: "radio", - options: ["datetime-local", "date"], - }, - }, -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = { - args: { - inputType: "datetime-local", - }, - render: function Wrapper(args) { - const [value, setValue] = useState(""); - - return ( - { - setValue(e.target.value); - console.log(e.target.value); - }} - value={value} - /> - ); - }, -}; diff --git a/packages/design-system/src/connect/components/date-time-input/date-time-local-input.tsx b/packages/design-system/src/connect/components/date-time-input/date-time-local-input.tsx deleted file mode 100644 index e69e0dae5..000000000 --- a/packages/design-system/src/connect/components/date-time-input/date-time-local-input.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { ComponentPropsWithRef, Ref, forwardRef } from "react"; -import { twMerge } from "tailwind-merge"; - -export type DateTimeLocalInputProps = Omit< - ComponentPropsWithRef<"input">, - "type" -> & { - readonly inputType?: "datetime-local" | "date"; -}; - -export const DateTimeLocalInput = forwardRef(function DateTimeLocalInput( - props: DateTimeLocalInputProps, - ref: Ref, -) { - const { inputType = "datetime-local", ...inputProps } = props; - - return ( - - ); -}); diff --git a/packages/design-system/src/connect/components/date-time-input/index.ts b/packages/design-system/src/connect/components/date-time-input/index.ts deleted file mode 100644 index 17373dc2b..000000000 --- a/packages/design-system/src/connect/components/date-time-input/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./date-time-local-input"; diff --git a/packages/design-system/src/connect/components/index.ts b/packages/design-system/src/connect/components/index.ts index 5b2296c5b..3b0462d95 100644 --- a/packages/design-system/src/connect/components/index.ts +++ b/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"; diff --git a/packages/design-system/src/rwa/hooks/useDefaultFormValues.ts b/packages/design-system/src/rwa/hooks/useDefaultFormValues.ts index 80dfc1861..1087d70b5 100644 --- a/packages/design-system/src/rwa/hooks/useDefaultFormValues.ts +++ b/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, diff --git a/packages/design-system/src/rwa/hooks/useFormInputs.tsx b/packages/design-system/src/rwa/hooks/useFormInputs.tsx index 59e6dfcfc..b3607c6a6 100644 --- a/packages/design-system/src/rwa/hooks/useFormInputs.tsx +++ b/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; - const watch = _watch as UseFormWatch; const formState = _formState as FormState; const { errors } = formState; + const control = _control as Control; 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: () => ( - { - 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: () => ( - ), inputLabel: entryTimeInputValue diff --git a/packages/design-system/src/rwa/utils/date.ts b/packages/design-system/src/rwa/utils/date.ts index 96c291f64..abc58f5c5 100644 --- a/packages/design-system/src/rwa/utils/date.ts +++ b/packages/design-system/src/rwa/utils/date.ts @@ -1,16 +1,8 @@ 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) { @@ -18,3 +10,16 @@ export function isISODate(str: string) { 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); +} diff --git a/packages/document-model-libs/package.json b/packages/document-model-libs/package.json index 9bf49cdd1..2c7f82deb 100644 --- a/packages/document-model-libs/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 17d32eadf..73e88208c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -782,7 +782,7 @@ importers: specifier: 0.14.1 version: link:../codegen '@powerhousedao/design-system': - specifier: ^1.7.2 + specifier: workspace:* version: link:../design-system '@powerhousedao/scalars': specifier: ^1.9.0