refactor: replace chunk of FC and interface with direct declarati…

…on and `type`

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 (

src/components/Card/Card.stories.tsx

@@ -4,7 +4,7 @@ import { Meta, StoryFn } from "@storybook/react"
 
 import { Button } from "@/components/Buttons"
 
-import Card, { IProps } from "."
+import Card, { CardProps } from "."
 
 export default {
   component: Card,
@@ -20,7 +20,7 @@ export default {
 export const Default: StoryFn<typeof Card> = (args) => {
   const { t } = useTranslation("page-developers-index")
 
-  const defaultProps: IProps = {
+  const defaultProps: CardProps = {
     emoji: ":woman_student:",
     title: t("page-developers-learn"),
     description: t("page-developers-learn-desc"),

src/components/Card/index.tsx

@@ -3,20 +3,14 @@ import { Heading, Stack, StackProps, Text } from "@chakra-ui/react"
 
 import Emoji from "@/components/Emoji"
 
-export interface IProps extends Omit<StackProps, "children" | "title"> {
+export type CardProps = Omit<StackProps, "children" | "title"> & {
   children?: ReactNode
   emoji?: string
   title?: ReactNode
   description?: ReactNode
 }
 
-const Card: React.FC<IProps> = ({
-  emoji,
-  title,
-  description,
-  children,
-  ...props
-}) => (
+const Card = ({ emoji, title, description, children, ...props }: CardProps) => (
   <Stack
     spacing="4"
     justifyContent="space-between"

src/components/Codeblock.tsx

@@ -204,19 +204,19 @@ const getValidChildrenForCodeblock = (child) => {
   }
 }
 
-export interface IProps {
+export type CodeblockProps = {
   allowCollapse?: boolean
   codeLanguage: string
   fromHomepage?: boolean
   children: React.ReactNode
 }
 
-const Codeblock: React.FC<IProps> = ({
+const Codeblock = ({
   children,
   allowCollapse = true,
   codeLanguage,
   fromHomepage = false,
-}) => {
+}: CodeblockProps) => {
   const { t } = useTranslation("common")
   const selectedTheme = useColorModeValue(codeTheme.light, codeTheme.dark)
 

src/components/CopyToClipboard.tsx

@@ -2,17 +2,17 @@ import { useEffect, useRef, useState } from "react"
 import ClipboardJS from "clipboard"
 import { Box } from "@chakra-ui/react"
 
-export interface IProps {
+export type CopyToClipboardProps = {
   text: string
   inline?: boolean
   children: (isCopied: boolean) => React.ReactNode
 }
 
-const CopyToClipboard: React.FC<IProps> = ({
+const CopyToClipboard = ({
   children,
   text,
   inline = false,
-}) => {
+}: CopyToClipboardProps) => {
   const [isCopied, setIsCopied] = useState<boolean>(false)
   const targetEl = useRef<HTMLDivElement>(null)
   const timer = useRef(0)

src/components/DataProductCard.tsx

@@ -19,7 +19,7 @@ export interface DataRow {
   apy: string
 }
 
-export interface IProps {
+export type DataProductCardProps = {
   url: string
   background: string
   image: StaticImageData
@@ -30,7 +30,7 @@ export interface IProps {
   data?: Array<DataRow>
 }
 
-const DataProductCard: React.FC<IProps> = ({
+const DataProductCard = ({
   url,
   background,
   image,
@@ -39,7 +39,7 @@ const DataProductCard: React.FC<IProps> = ({
   name,
   description,
   data,
-}) => {
+}: DataProductCardProps) => {
   const boxShadow = useColorModeValue("tableBox.light", "tableBox.dark")
 
   return (

src/components/DeveloperDocsLinks.tsx

@@ -6,11 +6,11 @@ import Translation from "@/components/Translation"
 
 import docLinks from "@/data/developer-docs-links.yaml"
 
-export interface IProps {
+export type DeveloperDocsLinksProps = {
   headerId: string
 }
 
-const DeveloperDocsLinks: React.FC<IProps> = ({ headerId }) => (
+const DeveloperDocsLinks = ({ headerId }: DeveloperDocsLinksProps) => (
   <React.Fragment>
     {docLinks
       .filter(({ id }) => id.includes(headerId))

src/components/DocLink.tsx

@@ -14,13 +14,13 @@ import Text from "./OldText"
 
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
-export interface IProps {
+export type DocLinkProps = {
   children?: React.ReactNode
   to: string
   isExternal?: boolean
 }
 
-const DocLink: React.FC<IProps> = ({ to, children, isExternal = false }) => {
+const DocLink = ({ to, children, isExternal = false }: DocLinkProps) => {
   const linkBoxShadowColor = useToken("colors", "primary.base")
   const { flipForRtl } = useRtlFlip()
 

src/components/DocsNav.tsx

@@ -22,7 +22,7 @@ import docLinks from "@/data/developer-docs-links.yaml"
 
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
-const TextDiv: React.FC<FlexProps> = ({ children, ...props }) => (
+const TextDiv = ({ children, ...props }: FlexProps) => (
   <Flex
     direction="column"
     justify="space-between"