Initial version of Component Override V2 for the Hero Section

packages/core/src/components/sections/Hero/DefaultComponents.ts

@@ -0,0 +1,11 @@
+import {
+  Hero as UIHero,
+  HeroImage as UIHeroImage,
+  HeroHeader as UIHeroHeader,
+} from '@faststore/ui'
+
+export const HeroDefaultComponents = {
+  Hero: UIHero,
+  HeroImage: UIHeroImage,
+  HeroHeader: UIHeroHeader,
+}

packages/core/src/components/sections/Hero/Hero.tsx

@@ -4,11 +4,8 @@ import {
 } from '@faststore/ui'
 import { ReactNode } from 'react'
 import { Image } from 'src/components/ui/Image'
-import {
-  Hero as HeroWrapper,
-  HeroImage,
-  HeroHeader,
-} from 'src/components/sections/Hero/Overrides'
+
+import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
 import Section from '../Section'
 
@@ -36,16 +33,22 @@ const Hero = ({
   title,
   subtitle,
   image,
-  variant = HeroWrapper.props.variant ?? 'primary',
-  colorVariant = HeroWrapper.props.colorVariant ?? 'main',
+  variant = 'primary',
+  colorVariant = 'main',
   icon,
 }: HeroProps) => {
+  const {
+    Hero: HeroWrapper,
+    HeroImage,
+    HeroHeader,
+  } = useOverrideComponents<'Hero'>()
+
   return (
     <Section className={`${styles.section} section-hero`}>
       <HeroWrapper.Component
         {...HeroWrapper.props}
-        variant={variant}
-        colorVariant={colorVariant}
+        variant={HeroWrapper.props.variant ?? variant}
+        colorVariant={HeroWrapper.props.colorVariant ?? colorVariant}
       >
         <HeroImage.Component {...HeroImage.props}>
           <Image

packages/core/src/components/sections/Hero/OverridenDefaultHero.ts

@@ -0,0 +1,12 @@
+import { override } from 'src/customizations/src/components/overrides/Hero'
+import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
+import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
+
+/**
+ * This component exists to support overrides 1.0
+ *
+ * This allows users to override the default Hero section present in the Headless CMS
+ */
+export const OverriddenDefaultHero = getOverriddenSection(
+  override as SectionOverrideDefinition<'Hero'>
+)

packages/core/src/sdk/overrides/sections.tsx

@@ -1,11 +1,14 @@
 import Alert from '../../components/sections/Alert'
+import Hero from '../../components/sections/Hero'
 
 import type { DefaultSectionComponentsDefinitions } from '../../typings/overridesDefinition'
 import type { SectionsOverrides } from '../../typings/overrides'
 import { AlertDefaultComponents } from '../../components/sections/Alert/DefaultComponents'
+import { HeroDefaultComponents } from '../../components/sections/Hero/DefaultComponents'
 
 export const Sections = {
   Alert,
+  Hero,
 }
 
 export const DefaultComponents: Partial<
@@ -15,4 +18,5 @@ export const DefaultComponents: Partial<
   >
 > = {
   Alert: AlertDefaultComponents,
+  Hero: HeroDefaultComponents,
 }

packages/core/src/typings/overrides.ts

@@ -47,7 +47,7 @@ export type SectionOverride = {
 }[keyof SectionsOverrides]
 
 /** TODO: every use of this type should be replaced by SectionsOverrides after all sections are supported */
-export type SupportedSectionsOverridesV2 = Pick<SectionsOverrides, 'Alert'>
+export type SupportedSectionsOverridesV2 = Pick<SectionsOverrides, 'Alert' | 'Hero'>
 
 /**
  * Originally, these types were defined in their respective Overrides file