Merge branch 'dev' into redirects

Author: corwintines

.github/labeler.yml

@@ -1,34 +1,42 @@
 "review needed :eyes:":
   - src/**/*
+  - public/*
 
 "documentation :book:":
   - README.md
 
 "tooling :wrench:":
   - .github/**/*
   - src/scripts/*
-  - netlify.toml
+  - src/lib/*
+  - src/hooks/*
 
 "dependencies :package:":
   - package.json
   - yarn.lock
 
 "internal :house:":
-  - gatsby-browser.js
-  - gatsby-config.js
-  - gatsby-node.js
-  - gatsby-ssr.js
   - .all-contributorsrc
+  - i18n.config.json
+  - next.config.js
+  - next-i18next.config,js
+  - next-sitemap.config.js
+  - tsconfig.json
+  - .nvmrc
+  - .eslintignore
+  - .eslintrc.json
+  - .prettierignore
+  - .prettierrc
+  - netlify.toml
 
 "translation :earth_africa:":
-  - /content/translations/**/*
-  - src/intl/*
-  - src/utils/translations.js
+  - src/content/translations/**/*
+  - src/intl/**/*
+  - src/lib/utils/translations.ts
 
 "content :fountain_pen:":
   - src/pages/*
-  - src/pages-conditional/*
-  - /content/**/*
+  - public/content/**/*
 
 "event :date:":
   - src/data/community-events.json

src/components/BeaconChainActions.tsx

@@ -25,7 +25,7 @@ const H3: React.FC<{ children: React.ReactNode }> = ({ children }) => (
 const BeaconChainActions: React.FC = () => {
   const { t } = useTranslation(["page-upgrades-index", "page-upgrades"])
 
-  const datapoints: Array<CardListItem> = [
+  const datapoints: CardListItem[] = [
     {
       title: t("consensus-beaconscan-title"),
       image: beaconscan,
@@ -43,7 +43,7 @@ const BeaconChainActions: React.FC = () => {
   ]
 
   //TODO: we should refactor the naming here instead of using authors into the description field
-  const reads: Array<CardListItem> = [
+  const reads: CardListItem[] = [
     {
       title: t("page-upgrade-article-title-two-point-oh"),
       description: t("page-upgrade-article-author-status"),

src/components/Buttons/Button.tsx

@@ -1,26 +1,27 @@
-import React from "react"
 import {
   Button as ChakraButton,
-  ButtonProps,
+  ButtonProps as ChakraButtonProps,
   forwardRef,
 } from "@chakra-ui/react"
 
 import { type MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
 import { scrollIntoView } from "@/lib/utils/scrollIntoView"
 
-export const checkIsSecondary = (props: {
+export const checkIsSecondary = ({
+  variant,
+  isSecondary,
+}: {
   variant?: string
   isSecondary?: boolean
 }) => {
-  const { variant, isSecondary } = props
   // These two variants do not have secondary styling, so prevent overrides
   return {
     "data-secondary":
       !["solid", "link"].includes(variant || "solid") && isSecondary,
   }
 }
 
-export interface IProps extends ButtonProps {
+export type ButtonProps = ChakraButtonProps & {
   /**
    * Set string value that matches the `id` attribute value used
    * on another element in a given page. Selecting the button will then
@@ -37,24 +38,27 @@ export interface IProps extends ButtonProps {
   customEventOptions?: MatomoEventOptions
 }
 
-const Button = forwardRef<IProps, "button">((props, ref) => {
-  const { toId, onClick, isSecondary, customEventOptions, ...rest } = props
+const Button = forwardRef<ButtonProps, "button">(
+  ({ toId, onClick, isSecondary, customEventOptions, ...props }, ref) => {
+    const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      toId && scrollIntoView(toId)
+      customEventOptions && trackCustomEvent(customEventOptions)
 
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    toId && scrollIntoView(toId)
-    customEventOptions && trackCustomEvent(customEventOptions)
+      onClick?.(e)
+    }
 
-    onClick?.(e)
+    return (
+      <ChakraButton
+        ref={ref}
+        onClick={handleOnClick}
+        {...checkIsSecondary({
+          variant: props.variant?.toString(),
+          isSecondary,
+        })}
+        {...props}
+      />
+    )
   }
-
-  return (
-    <ChakraButton
-      ref={ref}
-      onClick={handleOnClick}
-      {...checkIsSecondary({ variant: rest.variant?.toString(), isSecondary })}
-      {...rest}
-    />
-  )
-})
+)
 
 export default Button

src/components/Buttons/ButtonLink.tsx

@@ -1,14 +1,20 @@
-import React from "react"
+import Button, { type ButtonProps } from "@/components/Buttons/Button"
+import { BaseLink, type LinkProps } from "@/components/Link"
 
-import { BaseLink, LinkProps } from "../Link"
+import { type MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
 
-import type { IProps as IButtonProps } from "./Button"
-import Button from "./Button"
+export type ButtonLinkProps = LinkProps &
+  Omit<ButtonProps, "toId" | "onClick"> & {
+    customEventOptions?: MatomoEventOptions
+  }
 
-export type ButtonLinkProps = LinkProps & Omit<IButtonProps, "toId">
-
-const ButtonLink: React.FC<ButtonLinkProps> = (props) => {
-  return <Button as={BaseLink} activeStyle={{}} {...props} />
+const ButtonLink = ({ customEventOptions, ...props }: ButtonLinkProps) => {
+  const handleClick = () => {
+    customEventOptions && trackCustomEvent(customEventOptions)
+  }
+  return (
+    <Button as={BaseLink} activeStyle={{}} {...props} onClick={handleClick} />
+  )
 }
 
 export default ButtonLink

src/components/Buttons/ButtonTwoLines/ButtonTwoLines.stories.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { BiCircle } from "react-icons/bi"
 import { Stack } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"

src/components/Buttons/ButtonTwoLines/index.tsx

@@ -1,9 +1,10 @@
-import * as React from "react"
 import type { IconType } from "react-icons/lib"
 import { Icon, Stack, Text } from "@chakra-ui/react"
 
-import Button, { type IProps as ButtonProps } from "../Button"
-import ButtonLink, { type ButtonLinkProps } from "../ButtonLink"
+import { Button, type ButtonProps } from "@/components/Buttons"
+import ButtonLink, {
+  type ButtonLinkProps,
+} from "@/components/Buttons/ButtonLink"
 
 type CommonProps = {
   icon: IconType | typeof Icon
@@ -85,7 +86,7 @@ const ButtonTwoLines = (props: ButtonTwoLinesProps) => {
       }}
     >
       <Stack
-        spacing={0}
+        spacing="0"
         flexDir={reverseTextOrder ? "column-reverse" : "column"}
       >
         <Text

src/components/Buttons/IconButton.tsx

@@ -1,23 +1,18 @@
-import * as React from "react"
 import {
   IconButton as ChakraIconButton,
   IconButtonProps as ChakraIconButtonProps,
 } from "@chakra-ui/react"
 
-import { checkIsSecondary, IProps as IButtonProps } from "./Button"
+import { type ButtonProps, checkIsSecondary } from "@/components/Buttons"
 
-interface IconButtonProps
-  extends Omit<IButtonProps, keyof ChakraIconButtonProps>,
-    ChakraIconButtonProps {}
+type IconButtonProps = Omit<ButtonProps, keyof ChakraIconButtonProps> &
+  ChakraIconButtonProps
 
-const IconButton = (props: IconButtonProps) => {
-  const { isSecondary, ...rest } = props
-  return (
-    <ChakraIconButton
-      {...checkIsSecondary({ variant: rest.variant?.toString(), isSecondary })}
-      {...rest}
-    />
-  )
-}
+const IconButton = ({ isSecondary, ...props }: IconButtonProps) => (
+  <ChakraIconButton
+    {...checkIsSecondary({ variant: props.variant?.toString(), isSecondary })}
+    {...props}
+  />
+)
 
 export default IconButton

src/components/Buttons/index.ts

@@ -1,4 +1,4 @@
-export { default as Button, type IProps as IButtonProps } from "./Button"
+export { default as Button, type ButtonProps, checkIsSecondary } from "./Button"
 export { default as ButtonLink, type ButtonLinkProps } from "./ButtonLink"
 export { default as ButtonTwoLines } from "./ButtonTwoLines"
 export { default as IconButton } from "./IconButton"

src/components/CalloutBanner.tsx

@@ -7,7 +7,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 CalloutBannerProps = FlexProps & {
   children?: React.ReactNode
   image: ImageProps["src"]
   imageWidth?: ImageProps["width"]
@@ -17,16 +17,16 @@ export interface IProps extends FlexProps {
   alt: string
 }
 
-const CalloutBanner: React.FC<IProps> = ({
+const CalloutBanner = ({
   image,
   imageWidth,
   maxImageWidth,
   titleKey,
   descriptionKey,
   alt,
   children,
-  ...restProps
-}) => {
+  ...props
+}: CalloutBannerProps) => {
   const { t } = useTranslation("page-staking")
 
   return (
@@ -36,15 +36,14 @@ const CalloutBanner: React.FC<IProps> = ({
       bg="layer2Gradient"
       p={{ base: 8, sm: 12 }}
       borderRadius="base"
-      {...restProps}
+      {...props}
     >
       {image && (
         <Flex>
           <Image
             src={image}
             alt={alt}
             w={imageWidth}
-            maxW={`${maxImageWidth}px`}
             style={{
               objectFit: "contain",
             }}

src/components/CardList.tsx

@@ -1,16 +1,16 @@
+import Image, { type ImageProps } from "next/image"
 import type { ReactNode } from "react"
 import {
   Box,
-  BoxProps,
+  type BoxProps,
   Flex,
   HStack,
   LinkBox,
   LinkOverlay,
-  StackProps,
+  type StackProps,
   useColorModeValue,
 } from "@chakra-ui/react"
 
-import { Image, type ImageProps } from "@/components/Image"
 import { BaseLink } from "@/components/Link"
 
 import * as url from "@/lib/utils/url"
@@ -43,18 +43,26 @@ const CardContainer = (props: StackProps) => (
   />
 )
 
-const Card = (props: CardListItem & Omit<StackProps, "title" | "id">) => {
-  const { title, description, caption, link, image, alt, ...rest } = props
-  const { flipForRtl } = useRtlFlip()
+type CardProps = CardListItem & Omit<StackProps, "title" | "id">
 
+const Card = ({
+  title,
+  description,
+  caption,
+  link,
+  image,
+  alt,
+  ...props
+}: CardProps) => {
+  const { flipForRtl } = useRtlFlip()
   const isLink = !!link
   const isExternal = url.isExternal(link || "")
 
   const descriptionColor = useColorModeValue("gray.500", "gray.400")
 
   return (
-    <CardContainer {...rest}>
-      {image && <Image src={image} alt={alt ?? ""} minW="20px" />}
+    <CardContainer {...props}>
+      {image && <Image src={image} alt={alt ?? ""} width={20} />}
       <Flex flex="1 1 75%" direction="column">
         {isLink ? (
           <LinkOverlay
@@ -87,17 +95,17 @@ const Card = (props: CardListItem & Omit<StackProps, "title" | "id">) => {
   )
 }
 
-export interface IProps extends BoxProps {
-  items: Array<CardListItem>
+export type CardListProps = BoxProps & {
+  items: CardProps[]
   clickHandler?: (idx: string | number) => void
 }
 
-const CardList: React.FC<IProps> = ({
+const CardList = ({
   items,
   clickHandler = () => null,
-  ...rest
-}) => (
-  <Box bg="background.base" w="full" {...rest}>
+  ...props
+}: CardListProps) => (
+  <Box bg="background.base" w="full" {...props}>
     {items.map((listItem, idx) => {
       const { link, id } = listItem
       const isLink = !!link