feat: upgrade typescript to 5.4.5 across app

frontend/package.json

@@ -82,7 +82,7 @@
     "stripe": "^11.1.0",
     "timezone-mock": "^1.3.6",
     "type-fest": "^4.17.0",
-    "typescript": "^4.5.3",
+    "typescript": "^5.4.5",
     "use-debounce": "^7.0.1",
     "use-draggable-scroll": "^0.1.0",
     "validator": "^13.7.0",
@@ -94,7 +94,7 @@
     "postinstall": "npm run gen:theme-typings && npm --prefix ../shared install",
     "gen:theme-typings": "chakra-cli tokens --template augmentation src/theme/index.ts || true",
     "start": "vite",
-    "build": "vite build",
+    "build": "npx tsc && vite build",
     "test": "cross-env SKIP_PREFLIGHT_CHECK=true vitest",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",

frontend/src/components/Button/Button.tsx

@@ -5,20 +5,13 @@ import {
   IconProps,
 } from '@chakra-ui/react'
 
-import { ThemeColorScheme } from '~theme/foundations/colours'
-
 import Spinner from '../Spinner'
 
 export interface ButtonProps extends ChakraButtonProps {
   /**
    * Loading spinner font size. Defaults to `1.5rem`.
    */
   spinnerFontSize?: IconProps['fontSize']
-
-  /**
-   * Color scheme of button.
-   */
-  colorScheme?: ThemeColorScheme
   /**
    * Base color intensity of button.
    */

frontend/src/components/Calendar/Calendar.tsx

@@ -1,12 +1,11 @@
 import {
   Box,
   forwardRef,
+  ThemingProps,
   useControllableState,
   useMultiStyleConfig,
 } from '@chakra-ui/react'
 
-import { ThemeColorScheme } from '~theme/foundations/colours'
-
 import { CalendarStylesProvider } from './CalendarBase/CalendarStyleProvider'
 import {
   CalendarAria,
@@ -33,7 +32,7 @@ export interface CalendarProps extends CalendarBaseProps {
   /** Function to determine whether a date should be made unavailable. */
   isDateUnavailable?: (d: Date) => boolean
   /** Color scheme for component */
-  colorScheme?: ThemeColorScheme
+  colorScheme?: ThemingProps<'Calendar'>['colorScheme']
 }
 
 export const Calendar = forwardRef<CalendarProps, 'input'>(

frontend/src/components/Calendar/CalendarBase/CalendarContext.tsx

@@ -7,6 +7,7 @@
   useMemo,
   useState,
 } from 'react'
+import { ThemingProps } from '@chakra-ui/react'
 import cuid from 'cuid'
 import {
   addMonths,
@@ -18,8 +19,6 @@
 import { inRange } from 'lodash'
 import { useKey } from 'rooks'
 
-import { ThemeColorScheme } from '~theme/foundations/colours'
-
 import { CalendarProps } from '../Calendar'
 
 import { DateRangeValue } from './types'
@@ -71,7 +70,10 @@
   /**
    * Color scheme of date input
    */
-  colorScheme?: ThemeColorScheme
+  colorScheme?: ThemingProps<'Calendar'>['colorScheme']
+
+  /** Size of the component */
+  size?: ThemingProps<'Calendar'>['size']
 }
 export type UseProvideCalendarProps = Pick<DayzedProps, 'monthsToDisplay'> &
   PassthroughProps
@@ -112,7 +114,7 @@
   )
 }
 
 export const useCalendar = (): CalendarContextProps => {
   const context = useContext(CalendarContext)
 
   if (!context) {

frontend/src/components/Calendar/CalendarBase/types.ts

@@ -2,7 +2,7 @@ import { UseProvideCalendarProps } from './CalendarContext'
 
 export type CalendarBaseProps = Pick<
   UseProvideCalendarProps,
-  'colorScheme' | 'isDateUnavailable' | 'monthsToDisplay'
+  'colorScheme' | 'isDateUnavailable' | 'monthsToDisplay' | 'size'
 >
 
 export type DateRangeValue = [null, null] | [Date, null] | [Date, Date]

frontend/src/components/DatePicker/DatePickerContext.tsx

@@ -13,6 +13,7 @@
 import {
   CSSObject,
   FormControlProps,
+  ThemingProps,
   useControllableState,
   useDisclosure,
   UseDisclosureReturn,
@@ -21,7 +22,6 @@
 } from '@chakra-ui/react'
 import { format, isValid, parse } from 'date-fns'
 
-import { ThemeColorScheme } from '~theme/foundations/colours'
 import { useIsMobile } from '~hooks/useIsMobile'
 
 import { DatePickerProps } from './DatePicker'
@@ -42,7 +42,7 @@
   closeCalendarOnChange: boolean
   placeholder: string
   allowManualInput: boolean
-  colorScheme: ThemeColorScheme
+  colorScheme?: ThemingProps<'DatePicker'>['colorScheme']
   isDateUnavailable?: (date: Date) => boolean
   disclosureProps: UseDisclosureReturn
   monthsToDisplay?: number
@@ -62,7 +62,7 @@
   )
 }
 
 export const useDatePicker = () => {
   const context = useContext(DatePickerContext)
   if (!context) {
     throw new Error('useDatePicker must be used within a DatePickerProvider')

frontend/src/components/DatePicker/types.ts

@@ -3,7 +3,7 @@ import { InputProps } from '@chakra-ui/react'
 export interface DatePickerBaseProps
   extends Omit<
     InputProps,
-    'value' | 'defaultValue' | 'onChange' | 'colorScheme'
+    'value' | 'defaultValue' | 'onChange' | 'colorScheme' | 'size'
   > {
   /**
    * The `date-fns` format to display the date.

frontend/src/components/DateRangePicker/DateRangePickerContext.tsx

@@ -14,6 +14,7 @@
 import {
   CSSObject,
   FormControlProps,
+  ThemingProps,
   useControllableState,
   useDisclosure,
   UseDisclosureReturn,
@@ -22,7 +23,6 @@
 } from '@chakra-ui/react'
 import { format, isValid, parse } from 'date-fns'
 
-import { ThemeColorScheme } from '~theme/foundations/colours'
 import { useIsMobile } from '~hooks/useIsMobile'
 import { DateRangeValue } from '~components/Calendar'
 
@@ -51,7 +51,7 @@
   isDateUnavailable?: (date: Date) => boolean
   disclosureProps: UseDisclosureReturn
   labelSeparator: string
-  colorScheme: ThemeColorScheme
+  colorScheme?: ThemingProps<'DatePicker'>['colorScheme']
   monthsToDisplay?: number
 }
 
@@ -70,7 +70,7 @@
   )
 }
 
 export const useDateRangePicker = () => {
   const context = useContext(DateRangePickerContext)
   if (!context) {
     throw new Error(
@@ -96,7 +96,7 @@
   allowManualInput = true,
   allowInvalidDates = true,
   closeCalendarOnChange = true,
   onBlur,
   onClick,
   colorScheme = 'primary',
   monthsToDisplay,
@@ -181,7 +181,7 @@
   })
 
   const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(
     (e) => {
       const startDate = parse(startInputDisplay, dateFormat, new Date())
       const endDate = parse(endInputDisplay, dateFormat, new Date())
       // Clear if input is invalid on blur if invalid dates are not allowed.

frontend/src/components/Field/YesNo/YesNoOption.tsx

@@ -4,6 +4,7 @@ import {
   Box,
   forwardRef,
   Icon,
+  ThemingProps,
   useMultiStyleConfig,
   useRadio,
   UseRadioGroupReturn,
@@ -40,6 +41,8 @@ interface YesNoOptionProps extends UseRadioProps {
    * instead of the default event-only argument.
    */
   onChange?: UseRadioGroupReturn['onChange']
+
+  size?: ThemingProps<'Radio'>['size']
 }
 
 /**

frontend/src/components/NumberInput/NumberInput.tsx

@@ -31,6 +31,8 @@ export interface NumberInputProps extends ChakraNumberInputProps {
    * Whether to prevent default on user pressing the 'Enter' key.
    */
   preventDefaultOnEnter?: boolean
+
+  placeholder?: string
 }
 
 export const NumberInput = forwardRef<NumberInputProps, 'input'>(

frontend/src/components/Toast/Toast.tsx

@@ -15,7 +15,13 @@ import { BxsCheckCircle, BxsErrorCircle } from '~assets/icons'
 import { useMdComponents } from '~hooks/useMdComponents'
 import { MarkdownText } from '~components/MarkdownText'
 
-export type ToastStatus = 'danger' | 'success' | 'warning'
+export type ToastStatus =
+  | 'info'
+  | 'danger'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'loading'
 
 export interface ToastProps
   extends Omit<

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditTable/EditTable.tsx

@@ -181,7 +181,7 @@ export const EditTable = ({ field }: EditTableProps): JSX.Element => {
                 // Must be greater than minimum rows
                 validate: (value) =>
                   !value ||
-                  value > getValues('minimumRows') ||
+                  value > (getValues('minimumRows') || 0) ||
                   'Maximum rows must be greater than minimum rows',
               }}
               control={control}

frontend/src/features/admin-form/create/logic/components/LogicContent/EditLogicBlock/EditCondition/EditConditionBlock.tsx

@@ -3,6 +3,7 @@ import {
   Controller,
   ControllerRenderProps,
   UseFormReturn,
+  Validate,
 } from 'react-hook-form'
 import { BiTrash } from 'react-icons/bi'
 import {
@@ -185,7 +186,9 @@ export const EditConditionBlock = ({
     return ifValueTypeValue === LogicIfValue.MultiSelect ? '0px' : 'auto'
   }, [ifValueTypeValue])
 
-  const validateValueInputComponent = useCallback(
+  const validateValueInputComponent: Validate<
+    string | number | string[] | number[]
+  > = useCallback(
     (val) => {
       switch (ifValueTypeValue) {
         case LogicIfValue.Number: {

frontend/src/features/admin-form/preview/PreviewFormProvider.tsx

@@ -21,6 +21,7 @@ import { HttpError } from '~services/ApiService'
 import { FormFieldValues } from '~templates/Field'
 
 import NotFoundErrorPage from '~pages/NotFoundError'
+import { SubmitEmailFormArgs } from '~features/public-form/PublicFormService'
 
 import { useEnv } from '../../env/queries'
 import { axiosDebugFlow } from '../../public-form/utils'
@@ -51,7 +52,7 @@ export const PreviewFormProvider = ({
     useCommonFormProvider(formId)
 
   const showErrorToast = useCallback(
-    (error) => {
+    (error: unknown) => {
       toast({
         status: 'danger',
         description:
@@ -119,11 +120,10 @@ export const PreviewFormProvider = ({
     async (formInputs) => {
       const { form } = data ?? {}
       if (!form) return
-
-      const formData = {
+      const formData: Omit<SubmitEmailFormArgs, 'formId'> = {
         formFields: form.form_fields,
         formLogics: form.form_logics,
-        formInputs,
+        formInputs: formInputs,
       }
 
       const logMeta = {

frontend/src/features/admin-form/responses/ResponsesPage/storage/UnlockedResponses/ResponsesTable/ResponsesTable.tsx

@@ -169,7 +169,7 @@ export const ResponsesTable = () => {
   }, [currentPage, gotoPage])
 
   const handleRowClick = useCallback(
-    (submissionId: string, responseNumber) => {
+    (submissionId: string, responseNumber: number) => {
       onRowClick()
       return navigate(submissionId, {
         state: {

frontend/src/features/admin-form/responses/ResponsesPage/storage/utils/ndjsonStream.ts

@@ -18,7 +18,7 @@ export const ndjsonStream = (
       let data_buf = ''
 
       const processResult = (
-        result?: ReadableStreamDefaultReadResult<Uint8Array>,
+        result?: ReadableStreamReadResult<Uint8Array>,
       ): Promise<void> | undefined => {
         if (!result || (result.done && shouldCancel)) {
           return

frontend/src/features/public-form/PublicFormProvider.tsx

@@ -354,7 +354,7 @@ export const PublicFormProvider = ({
   }, [data, toast, t])
 
   const showErrorToast = useCallback(
-    (error, form: PublicFormDto) => {
+    (error: unknown, form: PublicFormDto) => {
       toast({
         status: 'danger',
         description:

frontend/src/features/public-form/components/FormPaymentPage/FormPaymentPage.stories.tsx

@@ -94,7 +94,6 @@ export const CompleteWithoutReceipt = Template(
       min_amount: 50,
       max_amount: 200,
     }}
-    paymentDate={new Date(Date.now())}
   />,
 ).bind({})
 CompleteWithoutReceipt.parameters = {
@@ -119,7 +118,6 @@ export const CompleteWithReceipt = Template(
       min_amount: 50,
       max_amount: 200,
     }}
-    paymentDate={new Date(Date.now())}
   />,
 ).bind({})
 CompleteWithReceipt.parameters = {

frontend/src/features/public-form/components/FormPaymentPage/components/PaymentQuantityModal.tsx

@@ -101,7 +101,7 @@ const PaymentQuantityModal = ({
                 variant="clear"
                 aria-label="Decrement"
                 colorScheme="secondary"
-                isDisabled={quantity <= minQty}
+                isDisabled={(quantity || 0) <= minQty}
                 onClick={() => {
                   setValue('quantity', quantity ? quantity - 1 : minQty)
                   trigger('quantity')
@@ -133,7 +133,7 @@ const PaymentQuantityModal = ({
                 variant="clear"
                 aria-label="Increment"
                 colorScheme="secondary"
-                isDisabled={quantity >= maxQty}
+                isDisabled={(quantity || 0) >= maxQty}
                 onClick={() => {
                   setValue('quantity', quantity ? quantity + 1 : minQty)
                   trigger('quantity')

frontend/src/features/user/billing/BillCharges/components/BillingTable.tsx

@@ -19,7 +19,7 @@ type BillingColumnData = Pick<
   'formName' | 'adminEmail' | 'authType' | 'total'
 >
 
-const AUTHTYPE_TO_TEXT = {
+const AUTHTYPE_TO_TEXT: { [K in FormAuthType]?: string } = {
   [FormAuthType.NIL]: '-',
   [FormAuthType.SP]: 'Singpass',
   [FormAuthType.SGID]: 'sgID',

frontend/src/features/workspace/components/CreateFormModal/CreateFormModal.stories.tsx

@@ -98,6 +98,10 @@ export const StorageModeAckScreen = () => {
         Promise.resolve(console.log('create storage mode form')),
       secretKey,
       register,
+      handleCreateStorageModeOrMultirespondentForm: () =>
+        Promise.resolve(
+          console.log('create storage mode or multirespondent form'),
+        ),
     }
   }, [handleCopyKey, hasCopiedKey, register])
 

frontend/src/features/workspace/components/WorkspaceFormRow/WorkspaceRowsContext.tsx

@@ -76,7 +76,6 @@ export const WorkspaceRowsProvider = ({
       }}
     >
       <DuplicateFormModal
-        formId={activeFormMeta?._id ?? ''}
         isOpen={dupeFormModalDisclosure.isOpen}
         onClose={dupeFormModalDisclosure.onClose}
       />