refactor(Hero): redefine declaration of hero prop types

Author: TylerAPfledderer

src/components/Hero/ContentHero/ContentHero.stories.tsx

@@ -5,8 +5,6 @@ import ContentHeroComponent, { ContentHeroProps } from "."
 
 type ContentHeroType = typeof ContentHeroComponent
 
-import contentHeroImg from "../../../../public/mainnet.png"
-
 const meta = {
   title: "Organisms / Layouts / Hero",
   component: ContentHeroComponent,
@@ -51,7 +49,7 @@ export const ContentHero: StoryObj = {
     return (
       <ContentHeroComponent
         breadcrumbs={{ slug: "/en/run-a-node/" }}
-        heroImg={contentHeroImg}
+        heroImg="/mainnet.png"
         title={t("hero-header")}
         description={t("hero-subtitle")}
         buttons={buttons}

src/components/Hero/ContentHero/index.tsx

@@ -1,15 +1,13 @@
 import { Box, Heading, HStack, SimpleGrid, Stack, Text } from "@chakra-ui/react"
 
-import { CommonHeroProps } from "@/lib/types"
+import type { CommonHeroProps } from "@/lib/types"
 
-import Breadcrumbs, { BreadcrumbsProps } from "@/components/Breadcrumbs"
+import Breadcrumbs from "@/components/Breadcrumbs"
 import { Image } from "@/components/Image"
 
 import { CallToAction } from "../CallToAction"
 
-export interface ContentHeroProps extends Omit<CommonHeroProps, "header"> {
-  breadcrumbs: BreadcrumbsProps
-}
+export type ContentHeroProps = Omit<CommonHeroProps<string>, "header">
 
 const ContentHero = (props: ContentHeroProps) => {
   const { breadcrumbs, heroImg, buttons, title, description } = props

src/components/Hero/HomeHero/index.tsx

@@ -1,3 +1,4 @@
+import type { StaticImageData } from "next/image"
 import { useTranslation } from "next-i18next"
 import { Box, Heading, Stack, Text, VStack } from "@chakra-ui/react"
 

src/components/Hero/HubHero/HubHero.stories.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "next-i18next"
 import { Box } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
-import HubHeroComponent from "./"
+import HubHeroComponent, { type HubHeroProps } from "./"
 
 type HubHeroType = typeof HubHeroComponent
 
@@ -24,8 +24,6 @@ const meta = {
 
 export default meta
 
-import { CommonHeroProps } from "@/lib/types"
-
 import learnHubHeroImg from "../../../../public/heroes/learn-hub-hero.png"
 
 export const HubHero: StoryObj<typeof meta> = {
@@ -40,7 +38,7 @@ export const HubHero: StoryObj<typeof meta> = {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { t } = useTranslation()
 
-    const buttons: CommonHeroProps["buttons"] = [
+    const buttons: HubHeroProps["buttons"] = [
       {
         content: t("page-learn:hero-button-lets-get-started"),
         toId: "what-is-crypto-ethereum",

src/components/Hero/HubHero/index.tsx

@@ -5,13 +5,15 @@ import type { CommonHeroProps } from "@/lib/types"
 import { CallToAction } from "@/components/Hero/CallToAction"
 import { Image } from "@/components/Image"
 
+export type HubHeroProps = Omit<CommonHeroProps, "breadcrumbs">
+
 const HubHero = ({
   heroImg,
   title,
   header,
   description,
   buttons,
-}: CommonHeroProps) => {
+}: HubHeroProps) => {
   if (buttons && buttons.length > 2) {
     throw new Error(
       "Can not have more than two call-to-action buttons in this hero component."

src/components/Hero/MdxHero/index.tsx

@@ -1,12 +1,10 @@
 import { Heading, Stack } from "@chakra-ui/react"
 
-import { CommonHeroProps } from "@/lib/types"
+import type { CommonHeroProps } from "@/lib/types"
 
-import Breadcrumbs, { type BreadcrumbsProps } from "@/components/Breadcrumbs"
+import Breadcrumbs from "@/components/Breadcrumbs"
 
-export type MdxHeroProps = Pick<CommonHeroProps, "title"> & {
-  breadcrumbs: BreadcrumbsProps
-}
+export type MdxHeroProps = Pick<CommonHeroProps, "breadcrumbs" | "title">
 
 const MdxHero = ({ breadcrumbs, title }: MdxHeroProps) => (
   <Stack py="8" px="6" spacing="6" w="full">

src/lib/types.ts

@@ -16,6 +16,7 @@ import type {
   UseCasesFrontmatter,
 } from "@/lib/interfaces"
 
+import type { BreadcrumbsProps } from "@/components/Breadcrumbs"
 import type { CallToActionProps } from "@/components/Hero/CallToAction"
 import { SimulatorNav } from "@/components/Simulator/interfaces"
 
@@ -371,12 +372,48 @@ export type IRemarkTocOptions = {
   callback: (toc: TocNodeType) => void
 }
 
-export type CommonHeroProps = {
-  heroImg: StaticImageData
-  header: string
+/**
+ * General props to be picked or omitted for any of the hero components
+ *
+ * The generic prop type `HeroImg` is assigned to the `heroImg` prop
+ * to be able to declare either defining the prop as a static image object
+ * or a string. (defaults to `StaticImageData`)
+ */
+export type CommonHeroProps<
+  HeroImg extends StaticImageData | string = StaticImageData
+> = {
+  /**
+   * Decorative image displayed as the full background or an aside to
+   * the text content
+   *
+   * Note: It is either required as a static image data object or the
+   * relative path of the image file, depending on the setup of the image component
+   * for the given hero component.
+   */
+  heroImg: HeroImg
+  /**
+   * Object of props to render the `Breadcrumbs` component.
+   */
+  breadcrumbs: BreadcrumbsProps
+  /**
+   * An array of content to render call-to-action buttons that leads the user to a section or sections of the
+   * given page from the hero.
+   *
+   * The hero can render no buttons or up to and no more than two.
+   */
+  buttons?: [CallToActionProps, CallToActionProps?]
+  /**
+   * The primary title of the page
+   */
   title: string
+  /**
+   * A tag name for the page
+   */
+  header: string
+  /**
+   * Preface text about the content in the given page
+   */
   description: string
-  buttons?: [CallToActionProps, CallToActionProps?]
 }
 
 // Learning Tools