@faststore/core 2.2.69 → 2.2.71

package/src/typings/overrides.ts

@@ -43,27 +43,62 @@ import type {
 
 import type {
   ComponentOverrideDefinition,
-  SectionOverrideDefinition,
+  SectionOverrideDefinitionV1,
 } from './overridesDefinition'
+import Alert from '../components/sections/Alert'
+import Breadcrumb from '../components/sections/Breadcrumb'
+import BannerText from '../components/sections/BannerText'
+import CrossSellingShelf from '../components/sections/CrossSellingShelf'
+import Hero from '../components/sections/Hero'
+import ProductShelf from '../components/sections/ProductShelf'
+import ProductDetails from '../components/sections/ProductDetails'
+import Navbar from '../components/sections/Navbar'
+import Newsletter from '../components/sections/Newsletter'
+import ProductGallery from '../components/sections/ProductGallery'
+import RegionBar from '../components/sections/RegionBar'
 
 export type SectionOverride = {
-  [K in keyof SectionsOverrides]: SectionOverrideDefinition<K>
+  [K in keyof SectionsOverrides]: SectionOverrideDefinitionV1<K>
 }[keyof SectionsOverrides]
 
-/** TODO: every use of this type should be replaced by SectionsOverrides after all sections are supported */
-export type SupportedSectionsOverridesV2 = Pick<
-  SectionsOverrides,
-  | 'Alert'
-  | 'BannerText'
-  | 'Breadcrumb'
-  | 'CrossSellingShelf'
-  | 'Hero'
-  | 'Newsletter'
-  | 'ProductShelf'
-  | 'ProductDetails'
-  | 'ProductGallery'
-  | 'RegionBar'
->
+/**
+ * This type exists for us to be able to provide proper autocomplete
+ * and type checking for the override components.
+ *
+ * What it does is it maps a section component to its override components.
+ *
+ * OverrideComponentsForSection<typeof Alert> translates to:
+ * {
+ *  Alert: {
+ *   Alert: ComponentOverrideDefinition<AlertProps, Omit<AlertProps, 'onClose'>>
+ *   Icon: ComponentOverrideDefinition<IconProps, IconProps>
+ *  }
+ * }
+ *
+ * We then use ComponentsFromSection to extract the list of components
+ */
+export type OverrideComponentsForSection<
+  Section extends SectionsOverrides[keyof SectionsOverrides]['Section']
+> = {
+  // The first 'extends' condition is used to filter out sections that don't have overrides (typed 'never')
+  [K in keyof SectionsOverrides as SectionsOverrides[K] extends {
+    Section: never
+  }
+    ? never
+    : // In the second 'extends' condition, we check if the section matches the one we're looking for
+    SectionsOverrides[K] extends {
+        Section: Section
+      }
+    ? // If it does, we return the components. Otherwise, we return 'never', which is filtered out
+      K
+    : never]: SectionsOverrides[K]['components']
+}
+
+// This type is used to extract only the list of components from the section override
+export type ComponentsFromSection<
+  Section extends SectionsOverrides[keyof SectionsOverrides]['Section']
+> =
+  OverrideComponentsForSection<Section>[keyof OverrideComponentsForSection<Section>]
 
 /**
  * Originally, these types were defined in their respective Overrides file
@@ -73,199 +108,243 @@ export type SupportedSectionsOverridesV2 = Pick<
  * For some reason, defining them in the same file as SectionOverride seems to fix the issue.
  * Consider that before moving them elsewhere and test it on the starter as well.
  */
-
 export type SectionsOverrides = {
   Alert: {
-    Alert: ComponentOverrideDefinition<AlertProps, Omit<AlertProps, 'onClose'>>
-    Icon: ComponentOverrideDefinition<IconProps, IconProps>
+    Section: typeof Alert
+    components: {
+      Alert: ComponentOverrideDefinition<
+        AlertProps,
+        Omit<AlertProps, 'onClose'>
+      >
+      Icon: ComponentOverrideDefinition<IconProps, IconProps>
+    }
   }
   BannerText: {
-    BannerText: ComponentOverrideDefinition<BannerTextProps, BannerTextProps>
-    BannerTextContent: ComponentOverrideDefinition<
-      BannerTextContentProps,
-      BannerTextContentProps
-    >
+    Section: typeof BannerText
+    components: {
+      BannerText: ComponentOverrideDefinition<BannerTextProps, BannerTextProps>
+      BannerTextContent: ComponentOverrideDefinition<
+        BannerTextContentProps,
+        BannerTextContentProps
+      >
+    }
   }
   Breadcrumb: {
-    Breadcrumb: ComponentOverrideDefinition<BreadcrumbProps, BreadcrumbProps>
-    Icon: ComponentOverrideDefinition<IconProps, IconProps>
+    Section: typeof Breadcrumb
+    components: {
+      Breadcrumb: ComponentOverrideDefinition<BreadcrumbProps, BreadcrumbProps>
+      Icon: ComponentOverrideDefinition<IconProps, IconProps>
+    }
   }
   EmptyState: {
-    EmptyState: ComponentOverrideDefinition<
-      PropsWithChildren<EmptyStateProps>,
-      EmptyStateProps
-    >
+    Section: never
+    components: {
+      EmptyState: ComponentOverrideDefinition<
+        PropsWithChildren<EmptyStateProps>,
+        EmptyStateProps
+      >
+    }
   }
   Hero: {
-    Hero: ComponentOverrideDefinition<HeroProps, HeroProps>
-    HeroImage: ComponentOverrideDefinition<HeroImageProps, HeroImageProps>
-    HeroHeader: ComponentOverrideDefinition<HeroHeaderProps, HeroHeaderProps>
+    Section: typeof Hero
+    components: {
+      Hero: ComponentOverrideDefinition<HeroProps, HeroProps>
+      HeroImage: ComponentOverrideDefinition<HeroImageProps, HeroImageProps>
+      HeroHeader: ComponentOverrideDefinition<HeroHeaderProps, HeroHeaderProps>
+    }
   }
   Navbar: {
-    Navbar: ComponentOverrideDefinition<NavbarProps, NavbarProps>
-    NavbarLinks: ComponentOverrideDefinition<NavbarLinksProps, NavbarLinksProps>
-    NavbarLinksList: ComponentOverrideDefinition<
-      NavbarLinksListProps,
-      NavbarLinksListProps
-    >
-    NavbarSlider: ComponentOverrideDefinition<
-      NavbarSliderProps,
-      NavbarSliderProps
-    >
-    NavbarSliderHeader: ComponentOverrideDefinition<
-      NavbarSliderHeaderProps,
-      NavbarSliderHeaderProps
-    >
-    NavbarSliderContent: ComponentOverrideDefinition<
-      NavbarSliderContentProps,
-      NavbarSliderContentProps
-    >
-    NavbarSliderFooter: ComponentOverrideDefinition<
-      NavbarSliderFooterProps,
-      NavbarSliderFooterProps
-    >
-    NavbarHeader: ComponentOverrideDefinition<
-      NavbarHeaderProps,
-      NavbarHeaderProps
-    >
-    NavbarRow: ComponentOverrideDefinition<NavbarRowProps, NavbarRowProps>
-    NavbarButtons: ComponentOverrideDefinition<
-      NavbarButtonsProps,
-      NavbarButtonsProps
-    >
-    IconButton: ComponentOverrideDefinition<
-      IconButtonProps,
-      Omit<IconButtonProps, 'onClick'>
-    >
+    Section: typeof Navbar,
+    components: {
+      Navbar: ComponentOverrideDefinition<NavbarProps, NavbarProps>
+      NavbarLinks: ComponentOverrideDefinition<
+        NavbarLinksProps,
+        NavbarLinksProps
+      >
+      NavbarLinksList: ComponentOverrideDefinition<
+        NavbarLinksListProps,
+        NavbarLinksListProps
+      >
+      NavbarSlider: ComponentOverrideDefinition<
+        NavbarSliderProps,
+        NavbarSliderProps
+      >
+      NavbarSliderHeader: ComponentOverrideDefinition<
+        NavbarSliderHeaderProps,
+        NavbarSliderHeaderProps
+      >
+      NavbarSliderContent: ComponentOverrideDefinition<
+        NavbarSliderContentProps,
+        NavbarSliderContentProps
+      >
+      NavbarSliderFooter: ComponentOverrideDefinition<
+        NavbarSliderFooterProps,
+        NavbarSliderFooterProps
+      >
+      NavbarHeader: ComponentOverrideDefinition<
+        NavbarHeaderProps,
+        NavbarHeaderProps
+      >
+      NavbarRow: ComponentOverrideDefinition<NavbarRowProps, NavbarRowProps>
+      NavbarButtons: ComponentOverrideDefinition<
+        NavbarButtonsProps,
+        NavbarButtonsProps
+      >
+      IconButton: ComponentOverrideDefinition<
+        IconButtonProps,
+        Omit<IconButtonProps, 'onClick'>
+      >
+    }
   }
   Newsletter: {
-    Newsletter: ComponentOverrideDefinition<NewsletterProps, NewsletterProps>
-    NewsletterAddendum: ComponentOverrideDefinition<
-      NewsletterAddendumProps,
-      NewsletterAddendumProps
-    >
-    NewsletterContent: ComponentOverrideDefinition<
-      NewsletterContentProps,
-      NewsletterContentProps
-    >
-    NewsletterForm: ComponentOverrideDefinition<
-      NewsletterFormProps,
-      NewsletterFormProps
-    >
-    NewsletterHeader: ComponentOverrideDefinition<
-      NewsletterHeaderProps,
-      NewsletterHeaderProps
-    >
-    ToastIconSuccess: ComponentOverrideDefinition<IconProps, IconProps>
-    ToastIconError: ComponentOverrideDefinition<IconProps, IconProps>
-    HeaderIcon: ComponentOverrideDefinition<IconProps, IconProps>
-    InputFieldName: ComponentOverrideDefinition<
-      InputFieldProps,
-      Omit<InputFieldProps, 'inputRef'>
-    >
-    InputFieldEmail: ComponentOverrideDefinition<
-      InputFieldProps,
-      Omit<InputFieldProps, 'inputRef'>
-    >
-    Button: ComponentOverrideDefinition<ButtonProps, ButtonProps>
+    Section: typeof Newsletter
+    components: {
+      Newsletter: ComponentOverrideDefinition<NewsletterProps, NewsletterProps>
+      NewsletterAddendum: ComponentOverrideDefinition<
+        NewsletterAddendumProps,
+        NewsletterAddendumProps
+      >
+      NewsletterContent: ComponentOverrideDefinition<
+        NewsletterContentProps,
+        NewsletterContentProps
+      >
+      NewsletterForm: ComponentOverrideDefinition<
+        NewsletterFormProps,
+        NewsletterFormProps
+      >
+      NewsletterHeader: ComponentOverrideDefinition<
+        NewsletterHeaderProps,
+        NewsletterHeaderProps
+      >
+      ToastIconSuccess: ComponentOverrideDefinition<IconProps, IconProps>
+      ToastIconError: ComponentOverrideDefinition<IconProps, IconProps>
+      HeaderIcon: ComponentOverrideDefinition<IconProps, IconProps>
+      InputFieldName: ComponentOverrideDefinition<
+        InputFieldProps,
+        Omit<InputFieldProps, 'inputRef'>
+      >
+      InputFieldEmail: ComponentOverrideDefinition<
+        InputFieldProps,
+        Omit<InputFieldProps, 'inputRef'>
+      >
+      Button: ComponentOverrideDefinition<ButtonProps, ButtonProps>
+    }
   }
   ProductDetails: {
-    ProductTitle: ComponentOverrideDefinition<
-      ProductTitleProps,
-      ProductTitleProps
-    >
-    DiscountBadge: ComponentOverrideDefinition<
-      DiscountBadgeProps,
-      Omit<DiscountBadgeProps, 'listPrice' | 'spotPrice'>
-    >
-    BuyButton: ComponentOverrideDefinition<ButtonProps, ButtonProps>
-    Icon: ComponentOverrideDefinition<IconProps, IconProps>
-    ProductPrice: ComponentOverrideDefinition<
-      ProductPriceProps,
-      Omit<ProductPriceProps, 'value'>
-    >
-    QuantitySelector: ComponentOverrideDefinition<
-      QuantitySelectorProps,
-      Omit<QuantitySelectorProps, 'onChange'>
-    >
-    SkuSelector: ComponentOverrideDefinition<SkuSelectorProps, SkuSelectorProps>
-    ShippingSimulation: ComponentOverrideDefinition<
-      ShippingSimulationProps,
-      ShippingSimulationProps
-    >
-    ImageGallery: ComponentOverrideDefinition<
-      ImageGalleryProps,
-      ImageGalleryProps
-    >
-    ImageGalleryViewer: ComponentOverrideDefinition<
-      ImageGalleryViewerProps,
-      ImageGalleryViewerProps
-    >
-    __experimentalImageGalleryImage: ComponentOverrideDefinition<any, any>
-    __experimentalImageGallery: ComponentOverrideDefinition<any, any>
-    __experimentalShippingSimulation: ComponentOverrideDefinition<any, any>
-    __experimentalNotAvailableButton: ComponentOverrideDefinition<any, any>
+    Section: typeof ProductDetails
+    components: {
+      ProductTitle: ComponentOverrideDefinition<
+        ProductTitleProps,
+        ProductTitleProps
+      >
+      DiscountBadge: ComponentOverrideDefinition<
+        DiscountBadgeProps,
+        Omit<DiscountBadgeProps, 'listPrice' | 'spotPrice'>
+      >
+      BuyButton: ComponentOverrideDefinition<ButtonProps, ButtonProps>
+      Icon: ComponentOverrideDefinition<IconProps, IconProps>
+      ProductPrice: ComponentOverrideDefinition<
+        ProductPriceProps,
+        Omit<ProductPriceProps, 'value'>
+      >
+      QuantitySelector: ComponentOverrideDefinition<
+        QuantitySelectorProps,
+        Omit<QuantitySelectorProps, 'onChange'>
+      >
+      SkuSelector: ComponentOverrideDefinition<
+        SkuSelectorProps,
+        SkuSelectorProps
+      >
+      ShippingSimulation: ComponentOverrideDefinition<
+        ShippingSimulationProps,
+        ShippingSimulationProps
+      >
+      ImageGallery: ComponentOverrideDefinition<
+        ImageGalleryProps,
+        ImageGalleryProps
+      >
+      ImageGalleryViewer: ComponentOverrideDefinition<
+        ImageGalleryViewerProps,
+        ImageGalleryViewerProps
+      >
+      __experimentalImageGalleryImage: ComponentOverrideDefinition<any, any>
+      __experimentalImageGallery: ComponentOverrideDefinition<any, any>
+      __experimentalShippingSimulation: ComponentOverrideDefinition<any, any>
+      __experimentalNotAvailableButton: ComponentOverrideDefinition<any, any>
+    }
   }
   ProductGallery: {
-    MobileFilterButton: ComponentOverrideDefinition<
-      ButtonProps,
-      Omit<ButtonProps, 'onClick'>
-    >
-    FilterIcon: ComponentOverrideDefinition<IconProps, IconProps>
-    PrevIcon: ComponentOverrideDefinition<IconProps, IconProps>
-    ResultsCountSkeleton: ComponentOverrideDefinition<
-      SkeletonProps,
-      Omit<SkeletonProps, 'loading'>
-    >
-    SortSkeleton: ComponentOverrideDefinition<
-      SkeletonProps,
-      Omit<SkeletonProps, 'loading'>
-    >
-    FilterButtonSkeleton: ComponentOverrideDefinition<
-      SkeletonProps,
-      Omit<SkeletonProps, 'loading'>
-    >
-    LinkButtonPrev: ComponentOverrideDefinition<
-      LinkButtonProps,
-      Omit<LinkButtonProps, 'onClick' | 'href'>
-    >
-    LinkButtonNext: ComponentOverrideDefinition<
-      LinkButtonProps,
-      Omit<LinkButtonProps, 'onClick' | 'href'>
-    >
-    __experimentalFilterDesktop: ComponentOverrideDefinition<any, any>
-    __experimentalFilterSlider: ComponentOverrideDefinition<any, any>
-    __experimentalProductCard: ComponentOverrideDefinition<any, any>
-    __experimentalEmptyGallery: ComponentOverrideDefinition<any, any>
+    Section: typeof ProductGallery
+    components: {
+      MobileFilterButton: ComponentOverrideDefinition<
+        ButtonProps,
+        Omit<ButtonProps, 'onClick'>
+      >
+      FilterIcon: ComponentOverrideDefinition<IconProps, IconProps>
+      PrevIcon: ComponentOverrideDefinition<IconProps, IconProps>
+      ResultsCountSkeleton: ComponentOverrideDefinition<
+        SkeletonProps,
+        Omit<SkeletonProps, 'loading'>
+      >
+      SortSkeleton: ComponentOverrideDefinition<
+        SkeletonProps,
+        Omit<SkeletonProps, 'loading'>
+      >
+      FilterButtonSkeleton: ComponentOverrideDefinition<
+        SkeletonProps,
+        Omit<SkeletonProps, 'loading'>
+      >
+      LinkButtonPrev: ComponentOverrideDefinition<
+        LinkButtonProps,
+        Omit<LinkButtonProps, 'onClick' | 'href'>
+      >
+      LinkButtonNext: ComponentOverrideDefinition<
+        LinkButtonProps,
+        Omit<LinkButtonProps, 'onClick' | 'href'>
+      >
+      __experimentalFilterDesktop: ComponentOverrideDefinition<any, any>
+      __experimentalFilterSlider: ComponentOverrideDefinition<any, any>
+      __experimentalProductCard: ComponentOverrideDefinition<any, any>
+      __experimentalEmptyGallery: ComponentOverrideDefinition<any, any>
+    }
   }
   ProductShelf: {
-    ProductShelf: ComponentOverrideDefinition<
-      ProductShelfProps,
-      ProductShelfProps
-    >
-    __experimentalCarousel: ComponentOverrideDefinition<any, any>
-    __experimentalProductCard: ComponentOverrideDefinition<
-      any,
-      Omit<any, 'key' | 'product' | 'index'>
-    >
+    Section: typeof ProductShelf
+    components: {
+      ProductShelf: ComponentOverrideDefinition<
+        ProductShelfProps,
+        ProductShelfProps
+      >
+      __experimentalCarousel: ComponentOverrideDefinition<any, any>
+      __experimentalProductCard: ComponentOverrideDefinition<
+        any,
+        Omit<any, 'key' | 'product' | 'index'>
+      >
+    }
   }
   CrossSellingShelf: {
-    ProductShelf: ComponentOverrideDefinition<
-      ProductShelfProps,
-      ProductShelfProps
-    >
-    __experimentalCarousel: ComponentOverrideDefinition<any, any>
-    __experimentalProductCard: ComponentOverrideDefinition<
-      any,
-      Omit<any, 'key' | 'product' | 'index'>
-    >
+    Section: typeof CrossSellingShelf
+    components: {
+      ProductShelf: ComponentOverrideDefinition<
+        ProductShelfProps,
+        ProductShelfProps
+      >
+      __experimentalCarousel: ComponentOverrideDefinition<any, any>
+      __experimentalProductCard: ComponentOverrideDefinition<
+        any,
+        Omit<any, 'key' | 'product' | 'index'>
+      >
+    }
   }
   RegionBar: {
-    RegionBar: ComponentOverrideDefinition<
-      RegionBarProps,
-      Omit<RegionBarProps, 'onButtonClick' | 'postalCode'>
-    >
-    LocationIcon: ComponentOverrideDefinition<IconProps, IconProps>
-    ButtonIcon: ComponentOverrideDefinition<IconProps, IconProps>
+    Section: typeof RegionBar
+    components: {
+      RegionBar: ComponentOverrideDefinition<
+        RegionBarProps,
+        Omit<RegionBarProps, 'onButtonClick' | 'postalCode'>
+      >
+      LocationIcon: ComponentOverrideDefinition<IconProps, IconProps>
+      ButtonIcon: ComponentOverrideDefinition<IconProps, IconProps>
+    }
   }
 }

package/src/typings/overridesDefinition.ts

@@ -1,6 +1,6 @@
-import { SectionsOverrides } from './overrides'
+import { ComponentsFromSection, SectionsOverrides } from './overrides'
 
-export type SectionOverrideDefinition<
+export type SectionOverrideDefinitionV1<
   SectionName extends keyof SectionsOverrides
 > = {
   /**
@@ -11,19 +11,33 @@ export type SectionOverrideDefinition<
   /** Name of the section to override */
   section: SectionName
   /** An object containing component and prop overrides for section components */
-  components?: Partial<Prettify<SectionsOverrides[SectionName]>>
+  components?: Partial<Prettify<SectionsOverrides[SectionName]['components']>>
+}
+
+export type SectionOverrideDefinition<
+  Section extends SectionsOverrides[keyof SectionsOverrides]['Section']
+> = {
+  /**
+   * CSS class to be appended to the \<section\> element. Behaves similarly to React's className.
+   * Default classNames from \<section\> element will still be applied.
+   */
+  className?: string
+  /** Section to override. Accepts a React Component. */
+  Section: Section
+  /** An object containing component and prop overrides for section components */
+  components?: Partial<Prettify<ComponentsFromSection<Section>>>
 }
 
 export type OverriddenComponents<SectionName extends keyof SectionsOverrides> =
   {
-    [Key in keyof SectionsOverrides[SectionName]]: Merge<
-      SectionsOverrides[SectionName][Key]
+    [Key in keyof SectionsOverrides[SectionName]['components']]: Merge<
+      SectionsOverrides[SectionName]['components'][Key]
     >
   }
 
 export type DefaultSectionComponentsDefinitions<
   K extends keyof SectionsOverrides
-> = Record<keyof SectionsOverrides[K], React.ComponentType>
+> = Record<keyof SectionsOverrides[K]['components'], React.ComponentType>
 
 export type ComponentOverrideDefinition<ComponentProps, Props> =
   | {