Add DatePicker and TimePicker to the design system

cspell.jsonc

@@ -304,6 +304,7 @@
         "xname",
         "xstar",
         "yatki",
+        "zagjs",
         "zerion",
         "zerossl",
         "zetachain",

package.json

@@ -72,6 +72,7 @@
     "@graphiql/toolkit": "0.11.3",
     "@growthbook/growthbook-react": "0.21.0",
     "@helia/verified-fetch": "2.6.12",
+    "@internationalized/date": "3.12.2",
     "@metamask/post-message-stream": "^7.0.0",
     "@metamask/providers": "^10.2.1",
     "@monaco-editor/react": "4.7.0",

public/icons/name.d.ts

@@ -29,6 +29,7 @@
 	| "brands/tac"
 	| "brands/ton"
 	| "burger"
+	| "calendar"
 	| "certified"
 	| "check"
 	| "checkered_flag"

src/features/contract-audit-reports/components/ContractSubmitAuditForm.tsx

@@ -1,6 +1,8 @@
 // SPDX-License-Identifier: LicenseRef-Blockscout
 
+import type { DateValue } from '@chakra-ui/react';
 import { VStack } from '@chakra-ui/react';
+import { getLocalTimeZone, toCalendarDate, today } from '@internationalized/date';
 import React from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { FormProvider, useForm } from 'react-hook-form';
@@ -10,11 +12,10 @@ import type { operations } from '@blockscout/api-types';
 import useApiFetch from 'src/api/hooks/useApiFetch';
 import type { ResourceError } from 'src/api/resources';
 
-import dayjs from 'src/shared/date-and-time/dayjs';
-
 import { Button } from 'src/toolkit/chakra/button';
 import { toaster } from 'src/toolkit/chakra/toaster';
 import { FormFieldCheckbox } from 'src/toolkit/components/forms/fields/FormFieldCheckbox';
+import { FormFieldDate } from 'src/toolkit/components/forms/fields/FormFieldDate';
 import { FormFieldEmail } from 'src/toolkit/components/forms/fields/FormFieldEmail';
 import { FormFieldText } from 'src/toolkit/components/forms/fields/FormFieldText';
 import { FormFieldUrl } from 'src/toolkit/components/forms/fields/FormFieldUrl';
@@ -32,7 +33,7 @@ export type Inputs = {
   project_url: string;
   audit_company_name: string;
   audit_report_url: string;
-  audit_publish_date: string;
+  audit_publish_date: Array<DateValue>;
   comment?: string;
 };
 
@@ -47,11 +48,18 @@ const ContractSubmitAuditForm = ({ address, onSuccess }: Props) => {
 
   const formApi = useForm<Inputs>({
     mode: 'onTouched',
-    defaultValues: { is_project_owner: false },
+    defaultValues: { is_project_owner: false, audit_publish_date: [] },
   });
   const { handleSubmit, formState, setError } = formApi;
 
+  const maxDate = React.useMemo(() => today(getLocalTimeZone()), []);
+
   const onFormSubmit: SubmitHandler<Inputs> = React.useCallback(async(data) => {
+    const [ publishDate ] = data.audit_publish_date;
+    if (!publishDate) {
+      return;
+    }
+
     try {
       await apiFetch<
         'core:contract_security_audits',
@@ -61,7 +69,11 @@ const ContractSubmitAuditForm = ({ address, onSuccess }: Props) => {
         pathParams: { hash: address },
         fetchParams: {
           method: 'POST',
-          body: data,
+          body: {
+            ...data,
+            // the API expects a date-only string, the picker may carry a time
+            audit_publish_date: toCalendarDate(publishDate).toString(),
+          },
         },
       });
 
@@ -103,9 +115,9 @@ const ContractSubmitAuditForm = ({ address, onSuccess }: Props) => {
           <FormFieldUrl<Inputs> name="project_url" required placeholder="Project URL"/>
           <FormFieldText<Inputs> name="audit_company_name" required placeholder="Audit company name"/>
           <FormFieldUrl<Inputs> name="audit_report_url" required placeholder="Audit report URL"/>
-          <FormFieldText<Inputs>
+          <FormFieldDate<Inputs, 'audit_publish_date'>
             name="audit_publish_date"
-            inputProps={{ type: 'date', max: dayjs().format('YYYY-MM-DD') }}
+            max={ maxDate }
             required
             placeholder="Audit publish date"
           />

src/features/csv-export/components/CsvExport.tsx

@@ -22,7 +22,6 @@ import { useMultichainContext } from 'src/features/multichain/context';
 import config from 'src/config';
 import ReCaptcha from 'src/services/re-captcha/ReCaptcha';
 import useReCaptcha from 'src/services/re-captcha/useReCaptcha';
-import dayjs from 'src/shared/date-and-time/dayjs';
 import getErrorMessage from 'src/shared/errors/get-error-message';
 import getErrorObjStatusCode from 'src/shared/errors/get-error-obj-status-code';
 import useIsInitialLoading from 'src/shared/hooks/useIsInitialLoading';
@@ -37,6 +36,7 @@ import { downloadBlob } from 'src/toolkit/utils/file';
 
 import { useCsvExportContext } from '../utils/context';
 import getFileName from '../utils/get-file-name';
+import serializeFormFields from '../utils/serialize-form-fields';
 import type { StorageItem } from '../utils/storage';
 import CsvExportDialog from './dialog/CsvExportDialog';
 import CsvExportDialogDescription from './dialog/CsvExportDialogDescription';
@@ -101,7 +101,7 @@ const CsvExport = <R extends ResourceName>({
   const fetchFactorySync = React.useCallback((data?: FormFields) => {
     return async(recaptchaToken?: string) => {
       const url = buildUrl(resourceName, pathParams, {
-        ...mapValues(data || {}, (value) => dayjs(value).toISOString()),
+        ...serializeFormFields(data),
         ...queryParams,
       }, undefined, chain);
 
@@ -135,7 +135,7 @@ const CsvExport = <R extends ResourceName>({
       return apiFetch<typeof resourceName>(resourceName, {
         pathParams,
         queryParams: {
-          ...mapValues(data || {}, (value) => dayjs(value).toISOString()),
+          ...serializeFormFields(data),
           ...queryParams,
         },
         chain,
@@ -158,7 +158,7 @@ const CsvExport = <R extends ResourceName>({
         blob,
         getFileName({
           type,
-          params: { ...mergedParams, ...data },
+          params: { ...mergedParams, ...serializeFormFields(data) },
           chainConfig,
         }),
       );
@@ -186,7 +186,7 @@ const CsvExport = <R extends ResourceName>({
           status: 'pending',
           type,
           params: pickBy({
-            ...mapValues(data || {}, (value) => dayjs(value).toISOString()),
+            ...serializeFormFields(data),
             ...mergedParams,
             chain_id: chain?.id,
           }, (value) => value !== '' && value !== undefined && value !== null),

src/features/csv-export/components/dialog/CsvExportDialog.tsx

@@ -1,13 +1,12 @@
 // SPDX-License-Identifier: LicenseRef-Blockscout
 
 import { chakra, Flex } from '@chakra-ui/react';
+import { getLocalTimeZone, now } from '@internationalized/date';
 import React from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import type { FormFields } from './types';
 
-import dayjs from 'src/shared/date-and-time/dayjs';
-
 import { Button } from 'src/toolkit/chakra/button';
 import { DialogBody, DialogContent, DialogHeader, DialogRoot } from 'src/toolkit/chakra/dialog';
 import type { OnOpenChangeHandler } from 'src/toolkit/hooks/useDisclosure';
@@ -27,8 +26,9 @@ const CsvExportDialog = ({ open, onOpenChange, onFormSubmit, onCancel, children,
   const formApi = useForm<FormFields>({
     mode: 'onBlur',
     defaultValues: {
-      from_period: dayjs().subtract(1, 'day').format('YYYY-MM-DDTHH:mm'),
-      to_period: dayjs().format('YYYY-MM-DDTHH:mm'),
+      // truncated to whole minutes, matching what the picker itself can express
+      from_period: [ now(getLocalTimeZone()).set({ second: 0, millisecond: 0 }).subtract({ days: 1 }) ],
+      to_period: [ now(getLocalTimeZone()).set({ second: 0, millisecond: 0 }) ],
     },
   });