@faststore/core 2.1.31 → 2.1.35

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 }

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

@@ -1,34 +1,20 @@
 import { ProductShelf as UIProductShelf } from '@faststore/ui'
+
 import ProductCard from 'src/components/product/ProductCard'
 import Carousel from 'src/components/ui/Carousel'
 
-import ProductShelfCustomizations from 'src/customizations/components/overrides/ProductShelf'
-
-const productShelfComponentsCustomization = {}
-
-const productShelfPropsCustomization = {} as any
-
-Object.entries(ProductShelfCustomizations.components).forEach(
-  ([key, value]) => {
-    if (value.Component) {
-      productShelfComponentsCustomization[key] = value.Component
-    }
-  }
-)
-
-Object.entries(ProductShelfCustomizations.components).forEach(
-  ([key, value]) => {
-    if (value.props) {
-      productShelfPropsCustomization[key] = value.props
-    }
-  }
-)
+import { getSectionOverrides } from 'src/utils/overrides'
+import { override } from 'src/customizations/components/overrides/ProductShelf'
+import type { ProductShelfOverrideDefinition } from 'src/typings/overrides'
 
-const Components = {
-  ProductShelf: UIProductShelf,
-  __experimentalCarousel: Carousel,
-  __experimentalProductCard: ProductCard,
-  ...productShelfComponentsCustomization,
-}
+const { ProductShelf, __experimentalCarousel, __experimentalProductCard } =
+  getSectionOverrides(
+    {
+      ProductShelf: UIProductShelf,
+      __experimentalCarousel: Carousel,
+      __experimentalProductCard: ProductCard,
+    },
+    override as ProductShelfOverrideDefinition
+  )
 
-export { Components, productShelfPropsCustomization as Props }
+export { ProductShelf, __experimentalCarousel, __experimentalProductCard }

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

@@ -1,28 +1,16 @@
 import { RegionBar as UIRegionBar, Icon as UIIcon } from '@faststore/ui'
 
-import RegionBarCustomizations from 'src/customizations/components/overrides/RegionBar'
+import { getSectionOverrides } from 'src/utils/overrides'
+import { override } from 'src/customizations/components/overrides/RegionBar'
+import type { RegionBarOverrideDefinition } from 'src/typings/overrides'
 
-const regionBarComponentsCustomization = {}
+const { RegionBar, LocationIcon, ButtonIcon } = getSectionOverrides(
+  {
+    RegionBar: UIRegionBar,
+    LocationIcon: UIIcon,
+    ButtonIcon: UIIcon,
+  },
+  override as RegionBarOverrideDefinition
+)
 
-const regionBarPropsCustomization = {} as any
-
-Object.entries(RegionBarCustomizations.components).forEach(([key, value]) => {
-  if (value.Component) {
-    regionBarComponentsCustomization[key] = value.Component
-  }
-})
-
-Object.entries(RegionBarCustomizations.components).forEach(([key, value]) => {
-  if (value.props) {
-    regionBarPropsCustomization[key] = value.props
-  }
-})
-
-const Components = {
-  RegionBar: UIRegionBar,
-  LocationIcon: UIIcon,
-  ButtonIcon: UIIcon,
-  ...regionBarComponentsCustomization,
-}
-
-export { Components, regionBarPropsCustomization as Props }
+export { RegionBar, LocationIcon, ButtonIcon }

package/src/components/ui/Breadcrumb/Breadcrumb.tsx

@@ -3,8 +3,10 @@ import { memo } from 'react'
 
 import Link from 'src/components/ui/Link'
 
-import { Components, Props } from 'src/components/sections/Breadcrumb/Overrides'
-const { Breadcrumb: BreadcrumbWrapper, Icon } = Components
+import {
+  Breadcrumb as BreadcrumbWrapper,
+  Icon,
+} from 'src/components/sections/Breadcrumb/Overrides'
 
 export interface BreadcrumbProps extends UIBreadcrumbProps {
   icon: string
@@ -12,11 +14,11 @@ export interface BreadcrumbProps extends UIBreadcrumbProps {
 }
 
 const Breadcrumb = ({
-  icon = Props['Icon'].name ?? 'Home',
+  icon = Icon.props.name ?? 'Home',
   alt = 'Go to homepage',
   ...otherProps
 }: BreadcrumbProps) => (
-  <BreadcrumbWrapper
+  <BreadcrumbWrapper.Component
     homeLink={
       <Link
         data-fs-breadcrumb-link
@@ -25,11 +27,11 @@ const Breadcrumb = ({
         href="/"
         prefetch={false}
       >
-        <Icon
+        <Icon.Component
           width={18}
           height={18}
           weight="bold"
-          {...Props['Icon']}
+          {...Icon.props}
           name={icon}
         />
       </Link>
@@ -39,7 +41,7 @@ const Breadcrumb = ({
         {name}
       </Link>
     )}
-    {...Props['Breadcrumb']}
+    {...BreadcrumbWrapper.props}
     {...otherProps}
   />
 )

package/src/components/ui/ImageGallery/ImageGallery.tsx

@@ -4,14 +4,15 @@ import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 
 import {
-  Components,
-  Props,
+  ImageGallery as ImageGalleryWrapper,
+  ImageZoom,
+  __experimentalImageGalleryImage as Image,
 } from 'src/components/sections/ProductDetails/Overrides'
 
 const ImageComponent = ({ url, alternateName }) => {
-  const { __experimentalImageGalleryImage: Image } = Components
-
-  return <Image src={url} alt={alternateName} width={68} height={68} />
+  return (
+    <Image.Component src={url} alt={alternateName} width={68} height={68} />
+  )
 }
 
 export interface ImageGalleryProps {
@@ -25,34 +26,27 @@ const ImageGallery = ({ images, ...otherProps }: ImageGalleryProps) => {
 
   useEffect(() => setSelectedImageIdx(0), [dynamicRoute])
 
-  // Deconstructing the object to avoid circular dependency errors
-  const {
-    ImageGallery: ImageGalleryWrapper,
-    ImageZoom,
-    __experimentalImageGalleryImage: Image,
-  } = Components
-
   return (
-    <ImageGalleryWrapper
-      {...Props['ImageGallery']}
+    <ImageGalleryWrapper.Component
+      {...ImageGalleryWrapper.props}
       images={images}
       ImageComponent={ImageComponent}
       selectedImageIdx={selectedImageIdx}
       setSelectedImageIdx={setSelectedImageIdx}
       {...otherProps}
     >
-      <ImageZoom {...Props['ImageZoom']}>
-        <Image
+      <ImageZoom.Component {...ImageZoom.props}>
+        <Image.Component
           sizes="(max-width: 360px) 50vw, (max-width: 768px) 90vw, 50vw"
           width={691}
           height={691 * (3 / 4)}
           loading="eager"
-          {...Props['__experimentalImageGalleryImage']}
+          {...Image.props}
           src={currentImage.url}
           alt={currentImage.alternateName}
         />
-      </ImageZoom>
-    </ImageGalleryWrapper>
+      </ImageZoom.Component>
+    </ImageGalleryWrapper.Component>
   )
 }
 

package/src/components/ui/Newsletter/Newsletter.tsx

@@ -3,18 +3,17 @@ import { forwardRef, useRef } from 'react'
 import { convertFromRaw } from 'draft-js'
 import { stateToHTML } from 'draft-js-export-html'
 import { useUI } from '@faststore/ui'
-import { useNewsletter } from 'src/sdk/newsletter/useNewsletter'
-
-import { Components, Props } from 'src/components/sections/Newsletter/Overrides'
+import type { InputFieldProps } from '@faststore/ui'
 
-const {
+import { useNewsletter } from 'src/sdk/newsletter/useNewsletter'
+import {
   ToastIconSuccess,
   ToastIconError,
   HeaderIcon,
-  InputFieldEmail,
   InputFieldName,
+  InputFieldEmail,
   Button,
-} = Components
+} from 'src/components/sections/Newsletter/Overrides'
 
 const cmsToHtml = (content) => {
   if (!content) {
@@ -146,11 +145,11 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
           ...toastSubscribe,
           status: 'INFO',
           icon: (
-            <ToastIconSuccess
+            <ToastIconSuccess.Component
               width={30}
               height={30}
-              {...Props['ToastIconSuccess']}
-              name={toastSubscribe.icon ?? Props['ToastIconSuccess'].name}
+              {...ToastIconSuccess.props}
+              name={toastSubscribe.icon ?? ToastIconSuccess.props.name}
             />
           ),
         })
@@ -159,11 +158,11 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
           ...toastSubscribeError,
           status: 'ERROR',
           icon: (
-            <ToastIconError
+            <ToastIconError.Component
               width={30}
               height={30}
-              {...Props['ToastIconError']}
-              name={toastSubscribe.icon ?? Props['ToastIconError'].name}
+              {...ToastIconError.props}
+              name={toastSubscribe.icon ?? ToastIconError.props.name}
             />
           ),
         })
@@ -184,11 +183,11 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
         >
           <header data-fs-newsletter-header>
             <h3>
-              <HeaderIcon
+              <HeaderIcon.Component
                 width={32}
                 height={32}
-                {...Props['HeaderIcon']}
-                name={icon?.icon ?? Props['HeaderIcon'].name}
+                {...HeaderIcon.props}
+                name={icon?.icon ?? HeaderIcon.props.name}
               />
               {title}
             </h3>
@@ -198,22 +197,22 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
           <div data-fs-newsletter-controls>
             <>
               {displayNameInput ? (
-                <InputFieldName
+                <InputFieldName.Component
                   id="newsletter-name"
                   required
-                  {...Props['InputFieldName']}
-                  label={nameInputLabel ?? Props['InputFieldName'].label}
+                  {...(InputFieldName.props as InputFieldProps)}
+                  label={nameInputLabel ?? InputFieldName.props.label}
                   // Dynamic props shouldn't be overridable
                   // This decision can be reviewed later if needed
                   inputRef={nameInputRef}
                 />
               ) : null}
-              <InputFieldEmail
+              <InputFieldEmail.Component
                 id="newsletter-email"
                 type="email"
                 required
-                {...Props['InputFieldEmail']}
-                label={emailInputLabel ?? Props['InputFieldEmail'].label}
+                {...(InputFieldEmail.props as InputFieldProps)}
+                label={emailInputLabel ?? InputFieldEmail.props.label}
                 // Dynamic props shouldn't be overridable
                 // This decision can be reviewed later if needed
                 inputRef={emailInputRef}
@@ -224,14 +223,14 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
                   __html: cmsToHtml(privacyPolicy),
                 }}
               ></span>
-              <Button
+              <Button.Component
                 variant="secondary"
                 inverse
                 type="submit"
-                {...Props['Button']}
+                {...Button.props}
               >
                 {loading ? subscribeButtonLoadingLabel : subscribeButtonLabel}
-              </Button>
+              </Button.Component>
             </>
           </div>
         </form>

package/src/components/ui/ProductDetails/ProductDetailsSettings.tsx

@@ -9,12 +9,12 @@ import Selectors from 'src/components/ui/SkuSelector'
 import AddToCartLoadingSkeleton from './AddToCartLoadingSkeleton'
 
 import {
-  Components,
-  Props,
+  BuyButton,
+  Icon,
+  Price,
+  QuantitySelector,
 } from 'src/components/sections/ProductDetails/Overrides'
 
-const { BuyButton, Icon, Price, QuantitySelector } = Components
-
 interface ProductDetailsSettingsProps {
   product: ProductDetailsFragment_ProductFragment
   buyButtonTitle: string
@@ -34,8 +34,8 @@ function ProductDetailsSettings({
   quantity,
   setQuantity,
   buyButtonIcon: {
-    icon: buyButtonIconName = Props['Icon'].name,
-    alt: buyButtonIconAlt = Props['Icon']['aria-label'],
+    icon: buyButtonIconName = Icon.props.name,
+    alt: buyButtonIconAlt = Icon.props['aria-label'],
   },
 }: ProductDetailsSettingsProps) {
   const {
@@ -77,30 +77,34 @@ function ProductDetailsSettings({
     <>
       <section data-fs-product-details-values>
         <div data-fs-product-details-prices>
-          <Price
+          <Price.Component
             formatter={useFormattedPrice}
             testId="list-price"
             variant="listing"
             SRText="Original price:"
-            {...Props['Price']}
+            {...Price.props}
+            // Dynamic props shouldn't be overridable
+            // This decision can be reviewed later if needed
             value={listPrice}
             data-value={listPrice}
           />
-          <Price
+          <Price.Component
             formatter={useFormattedPrice}
             testId="price"
             variant="spot"
             className="text__lead"
             SRText="Sale Price:"
-            {...Props['Price']}
+            {...Price.props}
+            // Dynamic props shouldn't be overridable
+            // This decision can be reviewed later if needed
             value={lowPrice}
             data-value={lowPrice}
           />
         </div>
-        <QuantitySelector
+        <QuantitySelector.Component
           min={1}
           max={10}
-          {...Props['QuantitySelector']}
+          {...QuantitySelector.props}
           // Dynamic props shouldn't be overridable
           // This decision can be reviewed later if needed
           onChange={setQuantity}
@@ -122,11 +126,11 @@ function ProductDetailsSettings({
         isValidating ? (
           <AddToCartLoadingSkeleton />
         ) : (
-          <BuyButton
-            {...Props['BuyButton']}
+          <BuyButton.Component
+            {...BuyButton.props}
             icon={
-              <Icon
-                {...Props['Icon']}
+              <Icon.Component
+                {...Icon.props}
                 aria-label={buyButtonIconAlt}
                 name={buyButtonIconName}
               />
@@ -135,7 +139,7 @@ function ProductDetailsSettings({
             {...buyProps}
           >
             {buyButtonTitle || 'Add to Cart'}
-          </BuyButton>
+          </BuyButton.Component>
         )
       }
     </>