Merge branch 'staging' into writingcohortbug

Author: corwintines

src/@chakra-ui/gatsby-plugin/theme.ts

@@ -1,8 +1,4 @@
-import {
-  extendBaseTheme,
-  type ThemeConfig,
-  type ThemeOverride,
-} from "@chakra-ui/react"
+import { extendBaseTheme, type ThemeConfig } from "@chakra-ui/react"
 
 // Global style overrides
 import styles from "./styles"
@@ -27,7 +23,7 @@ const config: ThemeConfig = {
  * The complete list of default Chakra styles can be found here:
  * https://github.com/chakra-ui/chakra-ui/tree/main/packages/theme/src
  */
-const theme: ThemeOverride = {
+const theme = {
   config,
   styles,
   ...foundations,

src/components/BeaconChainActions.tsx

@@ -118,11 +118,11 @@ const BeaconChainActions: React.FC = () => {
         <Translation id="consensus-explore" />
       </H3>
 
-      <CardList content={datapoints} />
+      <CardList items={datapoints} />
       <H3>
         <Translation id="read-more" />
       </H3>
-      <CardList content={reads} />
+      <CardList items={reads} />
     </Box>
   )
 }

src/components/CardList.tsx

@@ -26,7 +26,7 @@ export type CardListItem = {
 }
 
 export interface IProps extends BoxProps {
-  content: Array<CardListItem>
+  items: Array<CardListItem>
   clickHandler?: (idx: string | number) => void
 }
 
@@ -92,12 +92,12 @@ const Card = (props: CardListItem & Omit<StackProps, "title" | "id">) => {
 }
 
 const CardList: React.FC<IProps> = ({
-  content,
+  items,
   clickHandler = () => null,
   ...rest
 }) => (
   <Box bg="background.base" w="full" {...rest}>
-    {content.map((listItem, idx) => {
+    {items.map((listItem, idx) => {
       const { link, id } = listItem
       const isLink = !!link
 

src/components/Codeblock.tsx

@@ -204,7 +204,7 @@ export interface IProps {
   allowCollapse?: boolean
   codeLanguage: string
   fromHomepage?: boolean
-  children: React.ReactChild
+  children: React.ReactNode
 }
 
 const Codeblock: React.FC<IProps> = ({
@@ -215,13 +215,16 @@ const Codeblock: React.FC<IProps> = ({
 }) => {
   const selectedTheme = useColorModeValue(codeTheme.light, codeTheme.dark)
 
-  const codeText = React.Children.map(children, (child) => {
-    return getValidChildrenForCodeblock(child)
-  }).join("")
+  const codeText = React.Children.toArray(children)
+    .map((child) => {
+      if (!child) return
+      return getValidChildrenForCodeblock(child)
+    })
+    .join("")
 
   const [isCollapsed, setIsCollapsed] = useState(allowCollapse)
 
-  let className
+  let className: string
   if (React.isValidElement(children)) {
     className = children?.props?.className
   } else {

src/components/EnergyConsumptionChart.tsx

@@ -1,9 +1,16 @@
 import React from "react"
-import { Box, Center, useBreakpointValue, useToken } from "@chakra-ui/react"
+import {
+  Box,
+  Center,
+  chakra,
+  useBreakpointValue,
+  useToken,
+} from "@chakra-ui/react"
 import {
   BarChart,
   Bar,
   Cell,
+  Text,
   XAxis,
   LabelList,
   ResponsiveContainer,
@@ -12,7 +19,6 @@ import {
 import { useTranslation } from "gatsby-plugin-react-i18next"
 
 import Translation from "./Translation"
-import Text from "./OldText"
 
 interface ITickProps {
   x: number
@@ -26,23 +32,43 @@ type Data = Array<{
   color: string
 }>
 
-const CustomTick: React.FC<ITickProps> = ({ x, y, payload }) => {
-  const textColor = useToken("colors", "text")
+const RechartText = chakra(Text, {
+  shouldForwardProp: (prop) => {
+    const isValidRechartProp = [
+      "width",
+      "children",
+      "x",
+      "y",
+      "dy",
+      "angle",
+      "scaleToFit",
+      "textAnchor",
+      "verticalAnchor",
+      "breakAll",
+      "maxLines",
+    ].includes(prop)
 
+    if (isValidRechartProp) return true
+
+    return false
+  },
+})
+
+const CustomTick: React.FC<ITickProps> = ({ x, y, payload }) => {
   return (
     <g transform={`translate(${x},${y})`}>
-      <Text
+      <RechartText
         x={0}
         y={0}
         dy={15}
+        fill="text"
         width={50}
-        fill={textColor}
         textAnchor="middle"
         verticalAnchor="middle"
-        fontSize="10px"
+        fontSize="2xs"
       >
         {payload.value}
-      </Text>
+      </RechartText>
     </g>
   )
 }
@@ -175,8 +201,7 @@ const EnergyConsumptionChart: React.FC = () => {
               dataKey="name"
               tickLine={false}
               axisLine={false}
-              // @ts-ignore
-              tick={<CustomTick />}
+              tick={(props) => <CustomTick {...props} />}
               interval={0}
             />
             <Legend

src/components/EthExchanges/index.tsx

@@ -144,7 +144,7 @@ const EthExchanges = () => {
                   <Text>
                     <Translation id="page-get-eth-exchanges-success-exchange" />
                   </Text>
-                  <CardList content={filteredExchanges} />
+                  <CardList items={filteredExchanges} />
                 </SuccessContainer>
               )}
               {!hasExchangeResults && (

src/components/FileContributorsCrowdin.tsx

@@ -18,7 +18,7 @@ interface Data {
   contributors: Contributor[]
 }
 
-interface LangContributor {
+export interface LangContributor {
   lang: string
   data: Data[]
 }

src/components/MergeArticleList.tsx

@@ -53,7 +53,7 @@ const MergeArticleList: React.FC<IProps> = () => {
 
   return (
     <Box mb="4rem">
-      <CardList content={reads} />
+      <CardList items={reads} />
     </Box>
   )
 }

src/components/Quiz/QuizWidget.tsx

@@ -60,8 +60,8 @@ import questionBank from "../../data/quizzes/questionBank"
 
 interface IProps {
   quizKey?: string
-  currentHandler: (next?: string) => void
-  statusHandler: (status: QuizStatus) => void
+  currentHandler?: (next?: string) => void
+  statusHandler?: (status: QuizStatus) => void
   maxQuestions?: number
   isStandaloneQuiz?: boolean
 }
@@ -112,7 +112,7 @@ const QuizWidget: React.FC<IProps> = ({
     setSelectedAnswer(null)
 
     if (!isStandaloneQuiz) {
-      statusHandler("neutral")
+      statusHandler?.("neutral")
     }
 
     const currentQuizKey =
@@ -220,11 +220,11 @@ const QuizWidget: React.FC<IProps> = ({
 
     if (!isStandaloneQuiz) {
       if (currentQuestionAnswerChoice?.isCorrect) {
-        statusHandler("success")
+        statusHandler?.("success")
       }
 
       if (!currentQuestionAnswerChoice?.isCorrect) {
-        statusHandler("error")
+        statusHandler?.("error")
       }
     }
   }
@@ -241,7 +241,7 @@ const QuizWidget: React.FC<IProps> = ({
     setShowAnswer(false)
 
     if (!isStandaloneQuiz) {
-      statusHandler("neutral")
+      statusHandler?.("neutral")
     }
   }
 
@@ -274,7 +274,7 @@ const QuizWidget: React.FC<IProps> = ({
 
     // Reset quiz status (modifies bg color for mobile)
     if (!isStandaloneQuiz) {
-      statusHandler("neutral")
+      statusHandler?.("neutral")
     }
 
     if (finishedQuiz) {
@@ -288,7 +288,7 @@ const QuizWidget: React.FC<IProps> = ({
   }
 
   const handleNextQuiz = () => {
-    currentHandler(nextQuiz)
+    currentHandler?.(nextQuiz)
   }
 
   const AnswerIcon = () => {

src/components/ShardChainsList.tsx

@@ -53,7 +53,7 @@ const ShardChainsList: React.FC<IProps> = () => {
 
   return (
     <Box mb="4rem">
-      <CardList content={reads} />
+      <CardList items={reads} />
     </Box>
   )
 }