Merge pull request #457 from DTS-STN/implicity-return-type-components

refactor: implicit components return type

.prettierrc

@@ -3,7 +3,13 @@
   "tabWidth": 2,
   "singleQuote": true,
   "quoteProps": "consistent",
-  "importOrder": ["^react$", "^@testing-library/(.*)$", "<THIRD_PARTY_MODULES>", "^[./]"],
+  "importOrder": [
+    "^react$",
+    "^@testing-library/(.*)$",
+    "<THIRD_PARTY_MODULES>",
+    "^[./]"
+  ],
   "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true
-}
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
+}

__tests__/components/DateSelectField.test.tsx

@@ -1,5 +1,3 @@
-import { FC } from 'react'
-
 import '@testing-library/jest-dom/extend-expect'
 import { render, screen } from '@testing-library/react'
 
@@ -10,7 +8,7 @@ import DateSelectField from '../../src/components/DateSelectField'
 
 expect.extend(toHaveNoViolations)
 
-const DateSelectMock: FC<DateSelectProps> = ({ label }: DateSelectProps) => {
+const DateSelectMock = ({ label }: DateSelectProps) => {
   return <div data-testid="date-selector">{label}</div>
 }
 

__tests__/components/IdleTimeout.test.tsx

@@ -1,12 +1,10 @@
-import { FC } from 'react'
-
 import '@testing-library/jest-dom/extend-expect'
 import { render, screen, waitFor } from '@testing-library/react'
 
 import IdleTimeout from '../../src/components/IdleTimeout'
 import { ModalProps } from '../../src/components/Modal'
 
-const ModalMock: FC<ModalProps> = ({ open }: ModalProps) => {
+const ModalMock = ({ open }: ModalProps) => {
   return <div data-testid="modal">{open ? 'modal-opened' : 'modal-closed'}</div>
 }
 
@@ -31,7 +29,7 @@ describe('IdleTimeout', () => {
         expect(modal).toBeInTheDocument()
         expect(modal.textContent).toMatch('modal-opened')
       },
-      { timeout: 3000 }
+      { timeout: 3000 },
     )
   })
 })

src/components/ActionButton.tsx

@@ -1,4 +1,4 @@
-import { FC, MouseEventHandler } from 'react'
+import { MouseEventHandler } from 'react'
 
 export type ActionButtonSize = 'xs' | 'sm' | 'md' | 'lg'
 
@@ -29,7 +29,7 @@ const styles = {
     'border-blue-dark bg-blue-dark text-basic-white hover:bg-blue-normal active:bg-blue-active focus:bg-blue-normal focus:text-basic-white',
 }
 
-const ActionButton: FC<ActionButtonProps> = ({
+const ActionButton = ({
   disabled,
   fullWidth,
   id,
@@ -38,7 +38,7 @@ const ActionButton: FC<ActionButtonProps> = ({
   style,
   text,
   type,
-}) => {
+}: ActionButtonProps) => {
   const baseClasses =
     'align-middle border font-display inline-flex items-center justify-center shadow-sm disabled:cursor-not-allowed disabled:opacity-70 disabled:pointer-events-none disabled:shadow-none focus:ring-1 focus:ring-black focus:ring-offset-2'
   const fullWidthClasses = fullWidth ? 'w-full' : undefined

src/components/AlertBlock.tsx

@@ -1,5 +1,3 @@
-import { FC } from 'react'
-
 import { useTranslation } from 'next-i18next'
 
 import { AlertPage } from '../lib/types'
@@ -12,7 +10,7 @@ export interface AlertBlockProps {
   className?: string
 }
 
-const AlertBlock: FC<AlertBlockProps> = ({ page, className }) => {
+const AlertBlock = ({ page, className }: AlertBlockProps) => {
   const { data } = useAlerts({ page })
   const { i18n } = useTranslation()
 

src/components/AlertSection.tsx

@@ -1,8 +1,8 @@
-import { FC, PropsWithChildren } from 'react'
+import { PropsWithChildren } from 'react'
 
 import { AlertType } from '../lib/types'
 
-export interface AlertSectionProps {
+export interface AlertSectionProps extends PropsWithChildren {
   type: AlertType
   className?: string
 }
@@ -72,11 +72,7 @@ const svg = (type: AlertType) => {
   }
 }
 
-const AlertSection: FC<PropsWithChildren<AlertSectionProps>> = ({
-  children,
-  type,
-  className,
-}) => {
+const AlertSection = ({ children, type, className }: AlertSectionProps) => {
   const borderColor = borderColors[type]
 
   return (

src/components/ApplicationNameBar.tsx

@@ -1,13 +1,11 @@
-import { FC } from 'react'
-
 import Link from 'next/link'
 
 export interface ApplicationNameBarProps {
   text: string
   href: string
 }
 
-const ApplicationNameBar: FC<ApplicationNameBarProps> = ({ text, href }) => {
+const ApplicationNameBar = ({ text, href }: ApplicationNameBarProps) => {
   return (
     <div id="app-bar" className="bg-blue-dark">
       <section className="container mx-auto p-4">

src/components/Banner.tsx

@@ -1,11 +1,9 @@
-import { FC } from 'react'
-
 export interface BannerProps {
   alert: string
   description: string
 }
 
-const Banner: FC<BannerProps> = ({ alert, description }) => {
+const Banner = ({ alert, description }: BannerProps) => {
   return (
     <div className="bg-blue-normal font-body text-white">
       <div className="container mx-auto flex flex-col space-y-2 p-4 lg:flex-row lg:items-center lg:space-x-4 lg:space-y-0">

src/components/CheckStatusInfo.tsx

@@ -1,7 +1,6 @@
-import { FC, MouseEventHandler } from 'react'
+import { MouseEventHandler } from 'react'
 
-import { CheckStatusApiResponse } from '../lib/types'
-import { StatusCode } from '../lib/types'
+import { CheckStatusApiResponse, StatusCode } from '../lib/types'
 import ActionButton, { ActionButtonStyle } from './ActionButton'
 import CheckStatusFileBeingProcessed from './check-status-responses/CheckStatusFileBeingProcessed'
 import CheckStatusNoRecord from './check-status-responses/CheckStatusNoRecord'
@@ -18,13 +17,13 @@ export interface CheckStatusInfoProps {
   checkStatusResponse?: CheckStatusApiResponse | null
 }
 
-export const CheckStatusInfo: FC<CheckStatusInfoProps> = ({
+export const CheckStatusInfo = ({
   goBackText,
   id,
   onGoBackClick,
   goBackStyle,
   checkStatusResponse,
-}) => {
+}: CheckStatusInfoProps) => {
   //Determine which status response to render
   let statusComponent
   switch (checkStatusResponse?.status) {

src/components/Collapse.tsx

@@ -1,11 +1,11 @@
-import { FC, useId } from 'react'
+import { useId } from 'react'
 
 export interface CollapseProps {
   title: string
   children?: React.ReactNode
 }
 
-const Collapse: FC<CollapseProps> = ({ title, children }) => {
+const Collapse = ({ title, children }: CollapseProps) => {
   const id = useId()
   return (
     <details

src/components/DateModified.tsx

@@ -1,5 +1,3 @@
-import { FC } from 'react'
-
 export interface DateModifiedProps {
   // text to be displayed
   text?: string
@@ -11,7 +9,7 @@ export interface DateModifiedProps {
 /**
  * Contains build time stamp
  */
-const DateModified: FC<DateModifiedProps> = ({ id, text }) => {
+const DateModified = ({ id, text }: DateModifiedProps) => {
   return (
     <dl id={id} className="container mx-auto py-8 px-4">
       <dt className="inline">{text}</dt>

src/components/DateSelect.tsx

@@ -1,5 +1,3 @@
-import { FC } from 'react'
-
 export interface DateSelectOption {
   value: string
   label: string
@@ -9,7 +7,7 @@ export type DateSelectType = 'year' | 'month' | 'day'
 
 export type DateSelectOnChangeEvent = (
   e: React.ChangeEvent<HTMLSelectElement>,
-  type: DateSelectType
+  type: DateSelectType,
 ) => void
 
 export interface DateSelectProps {
@@ -25,7 +23,7 @@ export interface DateSelectProps {
   value: string
 }
 
-const DateSelect: FC<DateSelectProps> = ({
+const DateSelect = ({
   ariaDescribedby,
   dateSelectLabelId,
   error,
@@ -36,9 +34,9 @@ const DateSelect: FC<DateSelectProps> = ({
   required,
   type,
   value,
-}) => {
+}: DateSelectProps) => {
   const handleOnSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (
-    e
+    e,
   ) => onChange(e, type)
 
   return (

src/components/DateSelectField.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { getDaysInMonth, isExists } from 'date-fns'
 import { useTranslation } from 'next-i18next'
@@ -32,7 +32,7 @@ interface DateSelectState {
   yearValue: string
 }
 
-const DateSelectField: FC<DateSelectFieldProps> = ({
+const DateSelectField = ({
   errorMessage,
   firstYear,
   helpMessage,
@@ -43,7 +43,7 @@ const DateSelectField: FC<DateSelectFieldProps> = ({
   required,
   textRequired,
   value,
-}) => {
+}: DateSelectFieldProps) => {
   const { t } = useTranslation()
 
   const [state, setState] = useState<DateSelectState & { changeCount: number }>(
@@ -53,7 +53,7 @@ const DateSelectField: FC<DateSelectFieldProps> = ({
       monthValue: '',
       yearValue: '',
       changeCount: 0, // HACK: Use this state as a dependency of the `useEffect` below so that `onChange` is called only when it should be.
-    }
+    },
   )
 
   const dateSelectErrorMessageId = `date-select-${id}-error`
@@ -126,7 +126,7 @@ const DateSelectField: FC<DateSelectFieldProps> = ({
         }
       })
     },
-    []
+    [],
   )
 
   // Sync from the state to the upper component through onChange when necessary.
@@ -239,7 +239,7 @@ const padZero = (value: number, maxLength: number): string => {
 }
 
 const parseDateString = (
-  dateString: string
+  dateString: string,
 ): {
   year: string
   month: string

src/components/ErrorLayout.tsx

@@ -1,12 +1,10 @@
-import { FC } from 'react'
+import { PropsWithChildren } from 'react'
 
 import Image from 'next/image'
 
-export interface ErrorLayoutProps {
-  children?: React.ReactNode
-}
+export interface ErrorLayoutProps extends PropsWithChildren {}
 
-const ErrorLayout: FC<ErrorLayoutProps> = ({ children }) => {
+const ErrorLayout = ({ children }: ErrorLayoutProps) => {
   return (
     <div className="flex min-h-screen flex-col">
       <header className="container mx-auto my-6 px-4">

src/components/ErrorSummary.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect } from 'react'
+import { useEffect } from 'react'
 
 import { FormikErrors, FormikValues } from 'formik'
 import { Namespace, TFunction } from 'i18next'
@@ -16,15 +16,15 @@ export interface ErrorSummaryProps {
 
 export const getErrorSummaryItem = (
   feildId: string,
-  errorMessage: string
+  errorMessage: string,
 ): ErrorSummaryItem => ({
   feildId,
   errorMessage,
 })
 
 export const getErrorSummaryItems = <T extends FormikValues>(
   formErrors: FormikErrors<T>,
-  t: TFunction<Namespace, undefined>
+  t: TFunction<Namespace, undefined>,
 ) => {
   return Object.keys(formErrors)
     .filter((key) => !!formErrors[key])
@@ -33,13 +33,13 @@ export const getErrorSummaryItems = <T extends FormikValues>(
 
 export const goToErrorSummary = (errorSummaryId: string) => {
   const errorSummaryEl = document.querySelector<HTMLElement>(
-    `#${errorSummaryId}`
+    `#${errorSummaryId}`,
   )
   errorSummaryEl?.scrollIntoView({ behavior: 'smooth', block: 'center' })
   errorSummaryEl?.focus()
 }
 
-const ErrorSummary: FC<ErrorSummaryProps> = ({ id, errors, summary }) => {
+const ErrorSummary = ({ id, errors, summary }: ErrorSummaryProps) => {
   useEffect(() => {
     goToErrorSummary(id)
   }, [id])

src/components/ExampleImage.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react'
+import { PropsWithChildren } from 'react'
 
 import Image from 'next/image'
 
@@ -14,11 +14,7 @@ export interface ExampleImageProps extends PropsWithChildren {
   imageProps: ImageProps
 }
 
-const ExampleImage: FC<ExampleImageProps> = ({
-  children,
-  title,
-  imageProps,
-}) => {
+const ExampleImage = ({ children, title, imageProps }: ExampleImageProps) => {
   return (
     <>
       {title && (

src/components/ExternalLink.tsx

@@ -1,7 +1,6 @@
 import {
   AnchorHTMLAttributes,
   DetailedHTMLProps,
-  FC,
   PropsWithChildren,
 } from 'react'
 
@@ -16,11 +15,11 @@ export interface ExternalLinkProps
   href: string
 }
 
-export const ExternalLink: FC<ExternalLinkProps> = ({
+export const ExternalLink = ({
   children,
   href,
   ...rest
-}) => {
+}: ExternalLinkProps) => {
   const { t } = useTranslation(['common'])
   return (
     <a {...rest} href={href} target="_blank" rel="noopener noreferrer">