@faststore/core 2.1.33 → 2.1.36

package/src/components/sections/Breadcrumb/Overrides.tsx

@@ -1,27 +1,15 @@
 import { Breadcrumb as UIBreadcrumb, Icon as UIIcon } from '@faststore/ui'
 
-import BreadcrumbCustomizations from 'src/customizations/components/overrides/Breadcrumb'
-
-const breadcrumbComponentsCustomization = {}
-
-const breadcrumbPropsCustomization = {} as any
-
-Object.entries(BreadcrumbCustomizations.components).forEach(([key, value]) => {
-  if (value.Component) {
-    breadcrumbComponentsCustomization[key] = value.Component
-  }
-})
-
-Object.entries(BreadcrumbCustomizations.components).forEach(([key, value]) => {
-  if (value.props) {
-    breadcrumbPropsCustomization[key] = value.props
-  }
-})
-
-const Components = {
-  Breadcrumb: UIBreadcrumb,
-  Icon: UIIcon,
-  ...breadcrumbComponentsCustomization,
-}
-
-export { Components, breadcrumbPropsCustomization as Props }
+import { getSectionOverrides } from 'src/utils/overrides'
+import { override } from 'src/customizations/components/overrides/Breadcrumb'
+import type { BreadcrumbOverrideDefinition } from 'src/typings/overrides'
+
+const { Breadcrumb, Icon } = getSectionOverrides(
+  {
+    Breadcrumb: UIBreadcrumb,
+    Icon: UIIcon,
+  },
+  override as BreadcrumbOverrideDefinition
+)
+
+export { Breadcrumb, Icon }

package/src/components/sections/EmptyState/EmptyState.tsx

@@ -4,9 +4,7 @@ import type { PropsWithChildren } from 'react'
 import Section from '../Section'
 import styles from './section.module.scss'
 
-import { Components, Props } from 'src/components/sections/EmptyState/Overrides'
-
-const { EmptyState: EmptyStateWrapper } = Components
+import { EmptyState as EmptyStateWrapper } from 'src/components/sections/EmptyState/Overrides'
 
 export interface EmptyStateProps {
   title: string
@@ -14,20 +12,20 @@ export interface EmptyStateProps {
 }
 
 function EmptyState({
-  title = Props['EmptyState'].title,
-  titleIcon = Props['EmptyState'].titleIcon,
+  title = EmptyStateWrapper.props.title,
+  titleIcon = EmptyStateWrapper.props.titleIcon,
   children,
 }: PropsWithChildren<EmptyStateProps>) {
   return (
     <Section className={`${styles.section} section-empty-state`}>
-      <EmptyStateWrapper
+      <EmptyStateWrapper.Component
         bkgColor="light"
-        {...Props['EmptyState']}
+        {...EmptyStateWrapper.props}
         title={title}
         titleIcon={titleIcon}
       >
         {children}
-      </EmptyStateWrapper>
+      </EmptyStateWrapper.Component>
     </Section>
   )
 }

package/src/components/sections/EmptyState/Overrides.tsx

@@ -1,26 +1,14 @@
 import { EmptyState as UIEmptyState } from '@faststore/ui'
 
-import EmptyStateCustomizations from 'src/customizations/components/overrides/EmptyState'
-
-const emptyStateComponentsCustomization = {}
-
-const emptyStatePropsCustomization = {} as any
-
-Object.entries(EmptyStateCustomizations.components).forEach(([key, value]) => {
-  if (value.Component) {
-    emptyStateComponentsCustomization[key] = value.Component
-  }
-})
-
-Object.entries(EmptyStateCustomizations.components).forEach(([key, value]) => {
-  if (value.props) {
-    emptyStatePropsCustomization[key] = value.props
-  }
-})
-
-const Components = {
-  EmptyState: UIEmptyState,
-  ...emptyStateComponentsCustomization,
-}
-
-export { Components, emptyStatePropsCustomization as Props }
+import { getSectionOverrides } from 'src/utils/overrides'
+import { override } from 'src/customizations/components/overrides/EmptyState'
+import type { EmptyStateOverrideDefinition } from 'src/typings/overrides'
+
+const { EmptyState } = getSectionOverrides(
+  {
+    EmptyState: UIEmptyState,
+  },
+  override as EmptyStateOverrideDefinition
+)
+
+export { EmptyState }

package/src/components/sections/Hero/Hero.tsx

@@ -2,9 +2,14 @@ import {
   HeroProps as UIHeroProps,
   HeroHeaderProps as UIHeroHeaderProps,
 } from '@faststore/ui'
-import { Components, Props } from './Overrides'
 import { ReactNode } from 'react'
 import { Image } from 'src/components/ui/Image'
+import {
+  Hero as HeroWrapper,
+  HeroImage,
+  HeroHeader,
+} from 'src/components/sections/Hero/Overrides'
+
 import Section from '../Section'
 
 import styles from './section.module.scss'
@@ -25,25 +30,23 @@ export type HeroProps = {
   icon?: ReactNode
 }
 
-const { Hero: HeroWrapper, HeroImage, HeroHeader } = Components
-
 const Hero = ({
   link,
   title,
   subtitle,
   image,
-  variant = Props['Hero'].variant ?? 'primary',
-  colorVariant = Props['Hero'].colorVariant ?? 'main',
+  variant = HeroWrapper.props.variant ?? 'primary',
+  colorVariant = HeroWrapper.props.colorVariant ?? 'main',
   icon,
 }: HeroProps) => {
   return (
     <Section className={`${styles.section} section-hero`}>
-      <HeroWrapper
-        {...Props['Hero']}
+      <HeroWrapper.Component
+        {...HeroWrapper.props}
         variant={variant}
         colorVariant={colorVariant}
       >
-        <HeroImage {...Props['HeroImage']}>
+        <HeroImage.Component {...HeroImage.props}>
           <Image
             loading="eager"
             src={image.src}
@@ -52,16 +55,16 @@ const Hero = ({
             height={240}
             sizes="(max-width: 360px) 50vw, (max-width: 768px) 90vw, 50vw"
           />
-        </HeroImage>
-        <HeroHeader
+        </HeroImage.Component>
+        <HeroHeader.Component
           title={title}
           subtitle={subtitle}
           link={link?.url}
           linkText={link?.text}
           icon={icon}
-          {...Props['HeroHeader']}
+          {...HeroHeader.props}
         />
-      </HeroWrapper>
+      </HeroWrapper.Component>
     </Section>
   )
 }

package/src/components/sections/Hero/Overrides.tsx

@@ -4,29 +4,17 @@ import {
   HeroHeader as UIHeroHeader,
 } from '@faststore/ui'
 
-import HeroCustomizations from 'src/customizations/components/overrides/Hero'
+import { getSectionOverrides } from 'src/utils/overrides'
+import { override } from 'src/customizations/components/overrides/Hero'
+import type { HeroOverrideDefinition } from 'src/typings/overrides'
 
-const heroComponentsCustomization = {}
+const { Hero, HeroImage, HeroHeader } = getSectionOverrides(
+  {
+    Hero: UIHero,
+    HeroImage: UIHeroImage,
+    HeroHeader: UIHeroHeader,
+  },
+  override as HeroOverrideDefinition
+)
 
-const heroPropsCustomization = {} as any
-
-Object.entries(HeroCustomizations.components).forEach(([key, value]) => {
-  if (value.Component) {
-    heroComponentsCustomization[key] = value.Component
-  }
-})
-
-Object.entries(HeroCustomizations.components).forEach(([key, value]) => {
-  if (value.props) {
-    heroPropsCustomization[key] = value.props
-  }
-})
-
-const Components = {
-  Hero: UIHero,
-  HeroImage: UIHeroImage,
-  HeroHeader: UIHeroHeader,
-  ...heroComponentsCustomization,
-}
-
-export { Components, heroPropsCustomization as Props }
+export { Hero, HeroImage, HeroHeader }

package/src/components/sections/Navbar/Overrides.tsx

@@ -12,37 +12,49 @@ import {
   IconButton as UIIconButton,
 } from '@faststore/ui'
 
-import NavbarCustomizations from 'src/customizations/components/overrides/Navbar'
+import { getSectionOverrides } from 'src/utils/overrides'
+import { override } from 'src/customizations/components/overrides/Navbar'
+import type { NavbarOverrideDefinition } from 'src/typings/overrides'
 
-const navbarComponentsCustomization = {}
+const {
+  Navbar,
+  NavbarLinks,
+  NavbarLinksList,
+  NavbarSlider,
+  NavbarSliderHeader,
+  NavbarSliderContent,
+  NavbarSliderFooter,
+  NavbarHeader,
+  NavbarRow,
+  NavbarButtons,
+  IconButton,
+} = getSectionOverrides(
+  {
+    Navbar: UINavbar,
+    NavbarLinks: UINavbarLinks,
+    NavbarLinksList: UINavbarLinksList,
+    NavbarSlider: UINavbarSlider,
+    NavbarSliderHeader: UINavbarSliderHeader,
+    NavbarSliderContent: UINavbarSliderContent,
+    NavbarSliderFooter: UINavbarSliderFooter,
+    NavbarHeader: UINavbarHeader,
+    NavbarRow: UINavbarRow,
+    NavbarButtons: UINavbarButtons,
+    IconButton: UIIconButton,
+  },
+  override as NavbarOverrideDefinition
+)
 
-const navbarPropsCustomization = {} as any
-
-Object.entries(NavbarCustomizations.components).forEach(([key, value]) => {
-  if (value.Component) {
-    navbarComponentsCustomization[key] = value.Component
-  }
-})
-
-Object.entries(NavbarCustomizations.components).forEach(([key, value]) => {
-  if (value.props) {
-    navbarPropsCustomization[key] = value.props
-  }
-})
-
-const Components = {
-  Navbar: UINavbar,
-  NavbarLinks: UINavbarLinks,
-  NavbarLinksList: UINavbarLinksList,
-  NavbarSlider: UINavbarSlider,
-  NavbarSliderHeader: UINavbarSliderHeader,
-  NavbarSliderContent: UINavbarSliderContent,
-  NavbarSliderFooter: UINavbarSliderFooter,
-  NavbarHeader: UINavbarHeader,
-  NavbarRow: UINavbarRow,
-  NavbarButtons: UINavbarButtons,
-  IconButton: UIIconButton,
-  ...navbarComponentsCustomization,
+export {
+  Navbar,
+  NavbarLinks,
+  NavbarLinksList,
+  NavbarSlider,
+  NavbarSliderHeader,
+  NavbarSliderContent,
+  NavbarSliderFooter,
+  NavbarHeader,
+  NavbarRow,
+  NavbarButtons,
+  IconButton,
 }
-
-export { Components, navbarPropsCustomization as Props }

package/src/components/sections/Newsletter/Overrides.tsx

@@ -4,32 +4,34 @@ import {
   Icon as UIIcon,
 } from '@faststore/ui'
 
-import NewsletterCustomizations from 'src/customizations/components/overrides/Newsletter'
+import { getSectionOverrides } from 'src/utils/overrides'
+import { override } from 'src/customizations/components/overrides/Newsletter'
+import type { NewsletterOverrideDefinition } from 'src/typings/overrides'
 
-const newsletterComponentsCustomization = {}
+const {
+  ToastIconSuccess,
+  ToastIconError,
+  HeaderIcon,
+  InputFieldName,
+  InputFieldEmail,
+  Button,
+} = getSectionOverrides(
+  {
+    ToastIconSuccess: UIIcon,
+    ToastIconError: UIIcon,
+    HeaderIcon: UIIcon,
+    InputFieldName: UIInputField,
+    InputFieldEmail: UIInputField,
+    Button: UIButton,
+  },
+  override as NewsletterOverrideDefinition
+)
 
-const newsletterPropsCustomization = {} as any
-
-Object.entries(NewsletterCustomizations.components).forEach(([key, value]) => {
-  if (value.Component) {
-    newsletterComponentsCustomization[key] = value.Component
-  }
-})
-
-Object.entries(NewsletterCustomizations.components).forEach(([key, value]) => {
-  if (value.props) {
-    newsletterPropsCustomization[key] = value.props
-  }
-})
-
-const Components = {
-  ToastIconSuccess: UIIcon,
-  ToastIconError: UIIcon,
-  HeaderIcon: UIIcon,
-  InputFieldName: UIInputField,
-  InputFieldEmail: UIInputField,
-  Button: UIButton,
-  ...newsletterComponentsCustomization,
+export {
+  ToastIconSuccess,
+  ToastIconError,
+  HeaderIcon,
+  InputFieldName,
+  InputFieldEmail,
+  Button,
 }
-
-export { Components, newsletterPropsCustomization as Props }

package/src/components/sections/ProductDetails/Overrides.tsx

@@ -10,47 +10,60 @@ import {
   ImageZoom as UIImageZoom,
   ImageGallery as UIImageGallery,
 } from '@faststore/ui'
-import ImageGallery from 'src/components/ui/ImageGallery'
-import ShippingSimulation from 'src/components/ui/ShippingSimulation/ShippingSimulation'
-import { Image } from 'src/components/ui/Image'
-
-import ProductDetailsCustomizations from 'src/customizations/components/overrides/ProductDetails'
-
-const productDetailsComponentsCustomization = {}
 
-const productDetailsPropsCustomization = {} as any
+import LocalImageGallery from 'src/components/ui/ImageGallery'
+import LocalShippingSimulation from 'src/components/ui/ShippingSimulation/ShippingSimulation'
+import { Image } from 'src/components/ui/Image'
 
-Object.entries(ProductDetailsCustomizations.components).forEach(
-  ([key, value]) => {
-    if (value.Component) {
-      productDetailsComponentsCustomization[key] = value.Component
-    }
-  }
-)
+import { getSectionOverrides } from 'src/utils/overrides'
+import { override } from 'src/customizations/components/overrides/ProductDetails'
+import type { ProductDetailsOverrideDefinition } from 'src/typings/overrides'
 
-Object.entries(ProductDetailsCustomizations.components).forEach(
-  ([key, value]) => {
-    if (value.props) {
-      productDetailsPropsCustomization[key] = value.props
-    }
-  }
+const {
+  ProductTitle,
+  DiscountBadge,
+  BuyButton,
+  Icon,
+  Price,
+  QuantitySelector,
+  SkuSelector,
+  ShippingSimulation,
+  ImageGallery,
+  ImageZoom,
+  __experimentalImageGalleryImage,
+  __experimentalImageGallery,
+  __experimentalShippingSimulation,
+} = getSectionOverrides(
+  {
+    ProductTitle: UIProductTitle,
+    DiscountBadge: UIDiscountBadge,
+    BuyButton: UIBuyButton,
+    Icon: UIIcon,
+    Price: UIPrice,
+    QuantitySelector: UIQuantitySelector,
+    SkuSelector: UISkuSelector,
+    ShippingSimulation: UIShippingSimulation,
+    ImageGallery: UIImageGallery,
+    ImageZoom: UIImageZoom,
+    __experimentalImageGalleryImage: Image,
+    __experimentalImageGallery: LocalImageGallery,
+    __experimentalShippingSimulation: LocalShippingSimulation,
+  },
+  override as ProductDetailsOverrideDefinition
 )
 
-const Components = {
-  ProductTitle: UIProductTitle,
-  DiscountBadge: UIDiscountBadge,
-  BuyButton: UIBuyButton,
-  Icon: UIIcon,
-  Price: UIPrice,
-  QuantitySelector: UIQuantitySelector,
-  SkuSelector: UISkuSelector,
-  ShippingSimulation: UIShippingSimulation,
-  ImageGallery: UIImageGallery,
-  ImageZoom: UIImageZoom,
-  __experimentalImageGalleryImage: Image,
-  __experimentalImageGallery: ImageGallery,
-  __experimentalShippingSimulation: ShippingSimulation,
-  ...productDetailsComponentsCustomization,
+export {
+  ProductTitle,
+  DiscountBadge,
+  BuyButton,
+  Icon,
+  Price,
+  QuantitySelector,
+  SkuSelector,
+  ShippingSimulation,
+  ImageGallery,
+  ImageZoom,
+  __experimentalImageGalleryImage,
+  __experimentalImageGallery,
+  __experimentalShippingSimulation,
 }
-
-export { Components, productDetailsPropsCustomization as Props }

package/src/components/sections/ProductDetails/ProductDetails.tsx

@@ -18,16 +18,11 @@ import { ProductDetailsSettings } from 'src/components/ui/ProductDetails'
 import styles from './section.module.scss'
 
 import {
-  Components,
-  Props,
-} from 'src/components/sections/ProductDetails/Overrides'
-
-const {
   ProductTitle,
   DiscountBadge,
-  __experimentalImageGallery: ImageGallery,
-  __experimentalShippingSimulation: ShippingSimulation,
-} = Components
+  __experimentalImageGallery as ImageGallery,
+  __experimentalShippingSimulation as ShippingSimulation,
+} from 'src/components/sections/ProductDetails/Overrides'
 
 interface ProductDetailsContextProps {
   context: ProductDetailsFragment_ProductFragment
@@ -70,25 +65,22 @@ function ProductDetails({
     refNumber: showRefNumber,
     discountBadge: {
       showDiscountBadge,
-      size: discountBadgeSize = Props['DiscountBadge'].size,
+      size: discountBadgeSize = DiscountBadge.props.size,
     },
   },
   buyButton: { icon: buyButtonIcon, title: buyButtonTitle },
   shippingSimulator: {
-    title: shippingSimulatorTitle = Props['__experimentalShippingSimulation']
-      .title,
-    inputLabel: shippingSimulatorInputLabel = Props[
-      '__experimentalShippingSimulation'
-    ].inputLabel,
-    shippingOptionsTableTitle: shippingSimulatorOptionsTableTitle = Props[
-      '__experimentalShippingSimulation'
-    ].optionsLabel,
+    title: shippingSimulatorTitle = ShippingSimulation.props.title,
+    inputLabel: shippingSimulatorInputLabel = ShippingSimulation.props
+      .inputLabel,
+    shippingOptionsTableTitle:
+      shippingSimulatorOptionsTableTitle = ShippingSimulation.props
+        .optionsLabel,
     link: {
-      to: shippingSimulatorLinkUrl = Props['__experimentalShippingSimulation']
+      to: shippingSimulatorLinkUrl = ShippingSimulation.props
         .idkPostalCodeLinkProps?.href,
-      text: shippingSimulatorLinkText = Props[
-        '__experimentalShippingSimulation'
-      ].idkPostalCodeLinkProps?.children,
+      text: shippingSimulatorLinkText = ShippingSimulation.props
+        .idkPostalCodeLinkProps?.children,
     },
   },
   productDescription: {
@@ -165,16 +157,16 @@ function ProductDetails({
       <section data-fs-product-details>
         <section data-fs-product-details-body data-fs-content="product-details">
           <header data-fs-product-details-title data-fs-product-details-section>
-            <ProductTitle
+            <ProductTitle.Component
               // TODO: We should review this prop. There's now way to override the title and use the dynamic name value.
               // Maybe passing a ProductTitleHeader component as a prop would be better, as it would be overridable.
               // Maybe now it's worth to make title always a h1 and receive only the name, as it would be easier for users to override.
               title={<h1>{name}</h1>}
-              {...Props['ProductTitle']}
+              {...ProductTitle.props}
               label={
                 showDiscountBadge && (
-                  <DiscountBadge
-                    {...Props['DiscountBadge']}
+                  <DiscountBadge.Component
+                    {...DiscountBadge.props}
                     size={discountBadgeSize}
                     // Dynamic props shouldn't be overridable
                     // This decision can be reviewed later if needed
@@ -186,9 +178,9 @@ function ProductDetails({
               refNumber={showRefNumber && productId}
             />
           </header>
-          <ImageGallery
+          <ImageGallery.Component
             data-fs-product-details-gallery
-            {...Props['__experimentalImageGallery']}
+            {...ImageGallery.props}
             images={productImages}
           />
           <section data-fs-product-details-info>
@@ -211,13 +203,13 @@ function ProductDetails({
             </section>
 
             {availability && (
-              <ShippingSimulation
+              <ShippingSimulation.Component
                 data-fs-product-details-section
                 data-fs-product-details-shipping
                 formatter={useFormattedPrice}
-                {...Props['__experimentalShippingSimulation']}
+                {...ShippingSimulation.props}
                 idkPostalCodeLinkProps={{
-                  ...Props['idkPostalCodeLinkProps'],
+                  ...ShippingSimulation.props.idkPostalCodeLinkProps,
                   href: shippingSimulatorLinkUrl,
                   children: shippingSimulatorLinkText,
                 }}

package/src/components/sections/ProductGallery/Overrides.tsx

@@ -5,6 +5,7 @@ import {
   Skeleton as UISkeleton,
   Icon as UIIcon,
 } from '@faststore/ui'
+
 import ProductCard from 'src/components/product/ProductCard'
 import FilterDesktop from 'src/components/search/Filter/FilterDesktop'
 
@@ -12,41 +13,49 @@ const FilterSlider = lazy(
   () => import('src/components/search/Filter/FilterSlider')
 )
 
-import ProductGalleryCustomizations from 'src/customizations/components/overrides/ProductGallery'
-
-const productGalleryComponentsCustomization = {}
-
-const productGalleryPropsCustomization = {} as any
-
-Object.entries(ProductGalleryCustomizations.components).forEach(
-  ([key, value]) => {
-    if (value.Component) {
-      productGalleryComponentsCustomization[key] = value.Component
-    }
-  }
+import { getSectionOverrides } from 'src/utils/overrides'
+import { override } from 'src/customizations/components/overrides/ProductGallery'
+import type { ProductGalleryOverrideDefinition } from 'src/typings/overrides'
+
+const {
+  MobileFilterButton,
+  FilterIcon,
+  PrevIcon,
+  ResultsCountSkeleton,
+  SortSkeleton,
+  FilterButtonSkeleton,
+  LinkButtonPrev,
+  LinkButtonNext,
+  __experimentalFilterDesktop,
+  __experimentalFilterSlider,
+  __experimentalProductCard,
+} = getSectionOverrides(
+  {
+    MobileFilterButton: UIButton,
+    FilterIcon: UIIcon,
+    PrevIcon: UIIcon,
+    ResultsCountSkeleton: UISkeleton,
+    SortSkeleton: UISkeleton,
+    FilterButtonSkeleton: UISkeleton,
+    LinkButtonPrev: UILinkButton,
+    LinkButtonNext: UILinkButton,
+    __experimentalFilterDesktop: FilterDesktop,
+    __experimentalFilterSlider: FilterSlider,
+    __experimentalProductCard: ProductCard,
+  },
+  override as ProductGalleryOverrideDefinition
 )
 
-Object.entries(ProductGalleryCustomizations.components).forEach(
-  ([key, value]) => {
-    if (value.props) {
-      productGalleryPropsCustomization[key] = value.props
-    }
-  }
-)
-
-const Components = {
-  Button: UIButton,
-  FilterIcon: UIIcon,
-  PrevIcon: UIIcon,
-  ResultsCountSkeleton: UISkeleton,
-  SortSkeleton: UISkeleton,
-  FilterButtonSkeleton: UISkeleton,
-  LinkButtonPrev: UILinkButton,
-  LinkButtonNext: UILinkButton,
-  __experimentalFilterDesktop: FilterDesktop,
-  __experimentalFilterSlider: FilterSlider,
-  __experimentalProductCard: ProductCard,
-  ...productGalleryComponentsCustomization,
+export {
+  MobileFilterButton,
+  FilterIcon,
+  PrevIcon,
+  ResultsCountSkeleton,
+  SortSkeleton,
+  FilterButtonSkeleton,
+  LinkButtonPrev,
+  LinkButtonNext,
+  __experimentalFilterDesktop,
+  __experimentalFilterSlider,
+  __experimentalProductCard,
 }
-
-export { Components, productGalleryPropsCustomization as Props }