Merge pull request #12014 from TylerAPfledderer/refactor/replace-fc-with-plain-prop-declare

refactor: replace `React.FC` and `interface` with direct declaration and `type`

Author: corwintines

src/components/BannerGrid/index.tsx

@@ -1,11 +1,9 @@
 import React from "react"
 import { Box, Flex, Grid, useToken } from "@chakra-ui/react"
 
-export type Props = {
-  children: React.ReactNode
-}
+import { ChildOnlyProp } from "@/lib/types"
 
-export const Banner: React.FC<Props> = ({ children }) => {
+export const Banner = ({ children }: ChildOnlyProp) => {
   return (
     <Flex
       w="full"
@@ -26,23 +24,23 @@ export const Banner: React.FC<Props> = ({ children }) => {
   )
 }
 
-export const BannerBody: React.FC<Props> = ({ children }) => {
+export const BannerBody = ({ children }: ChildOnlyProp) => {
   return (
     <Box flex={4} p={10}>
       {children}
     </Box>
   )
 }
 
-export const BannerImage: React.FC<Props> = ({ children }) => {
+export const BannerImage = ({ children }: ChildOnlyProp) => {
   return (
     <Flex justifyContent="end" flex={2} alignSelf="end">
       {children}
     </Flex>
   )
 }
 
-export const BannerGrid: React.FC<Props> = ({ children }) => {
+export const BannerGrid = ({ children }: ChildOnlyProp) => {
   return (
     <Grid
       templateColumns={{
@@ -62,7 +60,7 @@ export const BannerGrid: React.FC<Props> = ({ children }) => {
   )
 }
 
-export const BannerGridCell: React.FC<Props> = ({ children }) => {
+export const BannerGridCell = ({ children }: ChildOnlyProp) => {
   const [medBp, lgBp] = useToken("breakpoints", ["md", "lg"])
 
   return (

src/components/BannerNotification/index.tsx

@@ -3,15 +3,15 @@ import { Center, FlexProps, useMediaQuery } from "@chakra-ui/react"
 
 import { lightTheme as oldTheme } from "../../theme"
 
-export interface IProps extends FlexProps {
+export type BannerNotificationProps = FlexProps & {
   shouldShow?: boolean
 }
 
-const BannerNotification: React.FC<IProps> = ({
+const BannerNotification = ({
   children,
   shouldShow = false,
   ...props
-}) => {
+}: BannerNotificationProps) => {
   const [isLGScreen] = useMediaQuery(`min-width: ${oldTheme.breakpoints.l}`)
   return (
     <>

src/components/Banners/BugBountyBanner.tsx

@@ -5,7 +5,7 @@ import { Center, Text } from "@chakra-ui/react"
 // Components
 import BannerNotification from "../BannerNotification"
 
-const BugBountyBanner: React.FC = () => (
+const BugBountyBanner = () => (
   <BannerNotification shouldShow>
     <Center>
       <Text m={0} p={0}>

src/components/Banners/DismissableBanner.tsx

@@ -6,12 +6,15 @@ import { Center, CloseButton } from "@chakra-ui/react"
 import BannerNotification from "../BannerNotification"
 
 // Interface
-export interface IProps {
+export type DismissableBannerProps = {
   children: JSX.Element
   storageKey: string
 }
 
-const DismissableBanner: React.FC<IProps> = ({ children, storageKey }) => {
+const DismissableBanner = ({
+  children,
+  storageKey,
+}: DismissableBannerProps) => {
   const [show, setShow] = useState<boolean>(false)
 
   useEffect(() => {

src/components/Banners/PostMergeBanner.tsx

@@ -6,11 +6,11 @@ import type { TranslationKey } from "@/lib/types"
 import BannerNotification from "../BannerNotification"
 import Translation from "../Translation"
 
-export interface IProps {
+export type PostMergeBannerProps = {
   translationString: TranslationKey
 }
 
-const PostMergeBanner: React.FC<IProps> = ({ translationString }) => (
+const PostMergeBanner = ({ translationString }: PostMergeBannerProps) => (
   <BannerNotification
     shouldShow
     zIndex={1}

src/components/BeaconChainActions.tsx

@@ -1,6 +1,8 @@
 import { useTranslation } from "next-i18next"
 import { Box, Flex } from "@chakra-ui/react"
 
+import { ChildOnlyProp } from "@/lib/types"
+
 import { ButtonLink } from "@/components/Buttons"
 import Card from "@/components/Card"
 import CardList, { type CardListItem } from "@/components/CardList"
@@ -10,7 +12,7 @@ import Translation from "@/components/Translation"
 import beaconchain from "@/public/upgrades/beaconchainemoji.png"
 import beaconscan from "@/public/upgrades/etherscan.png"
 
-const H3: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+const H3 = ({ children }: ChildOnlyProp) => (
   <OldHeading
     as="h3"
     fontSize="2xl"
@@ -22,7 +24,7 @@ const H3: React.FC<{ children: React.ReactNode }> = ({ children }) => (
   </OldHeading>
 )
 
-const BeaconChainActions: React.FC = () => {
+const BeaconChainActions = () => {
   const { t } = useTranslation(["page-upgrades-index", "page-upgrades"])
 
   const datapoints: CardListItem[] = [

src/components/BoxGrid.tsx

@@ -7,15 +7,15 @@ import Emoji from "./Emoji"
 import OldHeading from "./OldHeading"
 import Text from "./OldText"
 
-export interface IBoxItem {
+export interface BoxItem {
   emoji: string
   title: string
   description: string
   matomo: MatomoEventOptions
 }
 
-export interface IProps {
-  items: Array<IBoxItem>
+export type BoxGridProps = {
+  items: Array<BoxItem>
 }
 
 // Represent string as 32-bit integer
@@ -40,7 +40,7 @@ const colors = [
   "gridPurple",
 ]
 
-const BoxGrid: React.FC<IProps> = ({ items }) => {
+const BoxGrid = ({ items }: BoxGridProps) => {
   const [indexOpen, setOpenIndex] = useState(0)
 
   return (

src/components/ButtonDropdown.tsx

@@ -33,11 +33,11 @@ export interface List {
   items: Array<ListItem>
 }
 
-export interface IProps extends ButtonProps {
+export type ButtonDropdownProps = ButtonProps & {
   list: List
 }
 
-const ButtonDropdown: React.FC<IProps> = ({ list, ...rest }) => {
+const ButtonDropdown = ({ list, ...rest }: ButtonDropdownProps) => {
   const { t } = useTranslation("common")
   const handleClick = (
     e: MouseEvent<HTMLElement>,

src/components/CallToContribute.tsx

@@ -2,20 +2,18 @@ import React, { ReactNode } from "react"
 import { FaGithub } from "react-icons/fa"
 import { Flex, FlexProps, Icon, useToken } from "@chakra-ui/react"
 
+import { ChildOnlyProp } from "@/lib/types"
+
 import { ButtonLink } from "./Buttons"
 import InlineLink from "./Link"
 import OldHeading from "./OldHeading"
 import Text from "./OldText"
 import Translation from "./Translation"
 
-export interface IProps {
+export type CallToContributeProps = {
   editPath: string
 }
 
-export type ChildOnlyType = {
-  children: ReactNode
-}
-
 const ContentColumn = (props: {
   children: ReactNode
   hideBelow?: FlexProps["hideBelow"]
@@ -32,13 +30,13 @@ const ContentColumn = (props: {
   />
 )
 
-const DescriptionParagraph = ({ children }: ChildOnlyType) => (
+const DescriptionParagraph = ({ children }: ChildOnlyProp) => (
   <Text lineHeight="140%" color="text" fontFamily="monospace">
     {children}
   </Text>
 )
 
-const CallToContribute: React.FC<IProps> = ({ editPath }) => {
+const CallToContribute = ({ editPath }: CallToContributeProps) => {
   /**
    * TODO: After completion of the UI migration,
    * Remove this and pass the token value directly

src/components/Callout.tsx

@@ -8,7 +8,7 @@ import { Image, type ImageProps } from "@/components/Image"
 import OldHeading from "@/components/OldHeading"
 import Text from "@/components/OldText"
 
-export interface IProps extends FlexProps {
+export type CalloutProps = FlexProps & {
   children?: React.ReactNode
   image?: ImageProps["src"]
   emoji?: string
@@ -18,7 +18,7 @@ export interface IProps extends FlexProps {
   className?: string
 }
 
-const Callout: React.FC<IProps> = ({
+const Callout = ({
   image,
   emoji,
   alt,
@@ -27,7 +27,7 @@ const Callout: React.FC<IProps> = ({
   children,
   className,
   ...rest
-}) => {
+}: CalloutProps) => {
   const { t } = useTranslation("common")
 
   return (