@faststore/core 2.1.33 → 2.1.36

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>
         )
       }
     </>

package/src/components/ui/ProductGallery/ProductGallery.tsx

@@ -17,15 +17,7 @@ import { useDelayedFacets } from './useDelayedFacets'
 import { useDelayedPagination } from './useDelayedPagination'
 import { useProductsPrefetch } from './usePageProducts'
 import {
-  Components,
-  Props,
-} from 'src/components/sections/ProductGallery/Overrides'
-
-const GalleryPage = lazy(() => import('./ProductGalleryPage'))
-const GalleryPageSkeleton = <ProductGridSkeleton loading />
-
-const {
-  Button,
+  MobileFilterButton,
   FilterIcon,
   PrevIcon,
   ResultsCountSkeleton,
@@ -33,7 +25,10 @@ const {
   FilterButtonSkeleton,
   LinkButtonPrev,
   LinkButtonNext,
-} = Components
+} from 'src/components/sections/ProductGallery/Overrides'
+
+const GalleryPage = lazy(() => import('./ProductGalleryPage'))
+const GalleryPageSkeleton = <ProductGridSkeleton loading />
 
 export interface ProductGalleryProps {
   title?: string
@@ -111,10 +106,10 @@ function ProductGallery({
           </FilterSkeleton>
         </div>
         <div data-fs-product-listing-results-count data-count={totalCount}>
-          <ResultsCountSkeleton
+          <ResultsCountSkeleton.Component
             data-fs-product-listing-results-count-skeleton
             size={{ width: '100%', height: '1.5rem' }}
-            {...Props['ResultsCountSkeleton']}
+            {...ResultsCountSkeleton.props}
             // Dynamic props shouldn't be overridable
             // This decision can be reviewed later if needed
             loading={!productGalleryData}
@@ -122,13 +117,13 @@ function ProductGallery({
             <h2 data-testid="total-product-count">
               {totalCount} {totalCountLabel}
             </h2>
-          </ResultsCountSkeleton>
+          </ResultsCountSkeleton.Component>
         </div>
         <div data-fs-product-listing-sort>
-          <SortSkeleton
+          <SortSkeleton.Component
             data-fs-product-listing-sort-skeleton
             size={{ width: 'auto', height: '1.5rem' }}
-            {...Props['SortSkeleton']}
+            {...SortSkeleton.props}
             // Dynamic props shouldn't be overridable
             // This decision can be reviewed later if needed
             loading={facets?.length === 0}
@@ -137,42 +132,42 @@ function ProductGallery({
               label={sortBySelector?.label}
               options={sortBySelector?.options}
             />
-          </SortSkeleton>
-          <FilterButtonSkeleton
+          </SortSkeleton.Component>
+          <FilterButtonSkeleton.Component
             data-fs-product-listing-filter-button-skeleton
             size={{ width: '6rem', height: '1.5rem' }}
-            {...Props['FilterButtonSkeleton']}
+            {...FilterButtonSkeleton.props}
             // Dynamic props shouldn't be overridable
             // This decision can be reviewed later if needed
             loading={facets?.length === 0}
           >
-            <Button
+            <MobileFilterButton.Component
               variant="tertiary"
               data-testid="open-filter-button"
               icon={
-                <FilterIcon
+                <FilterIcon.Component
                   width={16}
                   height={16}
-                  {...Props['FilterIcon']}
+                  {...FilterIcon.props}
                   name={
                     filter?.mobileOnly?.filterButton?.icon?.icon ??
-                    Props['FilterIcon'].name
+                    FilterIcon.props.name
                   }
                   aria-label={
                     filter?.mobileOnly?.filterButton?.icon?.alt ??
-                    Props['FilterIcon']['aria-label']
+                    FilterIcon.props['aria-label']
                   }
                 />
               }
               iconPosition="left"
-              {...Props['Button']}
+              {...MobileFilterButton.props}
               // Dynamic props shouldn't be overridable
               // This decision can be reviewed later if needed
               onClick={openFilter}
             >
               {filter?.mobileOnly?.filterButton?.label}
-            </Button>
-          </FilterButtonSkeleton>
+            </MobileFilterButton.Component>
+          </FilterButtonSkeleton.Component>
         </div>
         <div data-fs-product-listing-results>
           {/* Add link to previous page. This helps on SEO */}
@@ -181,27 +176,25 @@ function ProductGallery({
               <NextSeo
                 additionalLinkTags={[{ rel: 'prev', href: prev.link }]}
               />
-              <LinkButtonPrev
+              <LinkButtonPrev.Component
                 rel="prev"
                 variant="secondary"
                 iconPosition="left"
                 icon={
-                  <PrevIcon
+                  <PrevIcon.Component
                     width={16}
                     height={16}
                     weight="bold"
-                    {...Props['PrevIcon']}
-                    name={
-                      previousPageButton?.icon?.icon ?? Props['PrevIcon'].name
-                    }
+                    {...PrevIcon.props}
+                    name={previousPageButton?.icon?.icon ?? PrevIcon.props.name}
                     aria-label={
                       previousPageButton?.icon?.alt ??
                       previousPageButton?.label ??
-                      Props['PrevIcon']['aria-label']
+                      PrevIcon.props['aria-label']
                     }
                   />
                 }
-                {...Props['LinkButtonPrev']}
+                {...LinkButtonPrev.props}
                 // Dynamic props shouldn't be overridable
                 // This decision can be reviewed later if needed
                 onClick={(e: MouseEvent<HTMLElement>) => {
@@ -212,7 +205,7 @@ function ProductGallery({
                 href={prev.link}
               >
                 {previousPageButton?.label}
-              </LinkButtonPrev>
+              </LinkButtonPrev.Component>
             </div>
           )}
           {/* Render ALL products */}
@@ -236,11 +229,11 @@ function ProductGallery({
               <NextSeo
                 additionalLinkTags={[{ rel: 'next', href: next.link }]}
               />
-              <LinkButtonNext
+              <LinkButtonNext.Component
                 testId="show-more"
                 rel="next"
                 variant="secondary"
-                {...Props['LinkButtonNext']}
+                {...LinkButtonNext.props}
                 // Dynamic props shouldn't be overridable
                 // This decision can be reviewed later if needed
                 onClick={(e: MouseEvent<HTMLElement>) => {
@@ -251,7 +244,7 @@ function ProductGallery({
                 href={next.link}
               >
                 {loadMorePageButton?.label}
-              </LinkButtonNext>
+              </LinkButtonNext.Component>
             </div>
           )}
         </div>

package/src/components/ui/ProductShelf/ProductShelf.tsx

@@ -6,16 +6,11 @@ import { useProductsQuery } from 'src/sdk/product/useProductsQuery'
 import { textToKebabCase } from 'src/utils/utilities'
 
 import {
-  Components,
-  Props,
+  ProductShelf as ProductShelfWrapper,
+  __experimentalCarousel as Carousel,
+  __experimentalProductCard as ProductCard,
 } from 'src/components/sections/ProductShelf/Overrides'
 
-const {
-  ProductShelf: ProductShelfWrapper,
-  __experimentalCarousel: Carousel,
-  __experimentalProductCard: ProductCard,
-} = Components
-
 type Sort =
   | 'discount_desc'
   | 'name_asc'
@@ -47,8 +42,8 @@ function ProductShelf({
   title,
   inView,
   productCardConfiguration: {
-    bordered = Props['__experimentalProductCard'].bordered,
-    showDiscountBadge = Props['__experimentalProductCard'].showDiscountBadge,
+    bordered = ProductCard.props.bordered,
+    showDiscountBadge = ProductCard.props.showDiscountBadge,
   } = {},
   ...variables
 }: ProductShelfProps) {
@@ -85,17 +80,17 @@ function ProductShelf({
         aspectRatio={aspectRatio}
         loading={products === undefined}
       >
-        <ProductShelfWrapper {...Props['ProductShelfWrapper']}>
-          <Carousel id={titleId || id} {...Props['__experimentalCarousel']}>
+        <ProductShelfWrapper.Component {...ProductShelfWrapper.props}>
+          <Carousel.Component id={titleId || id} {...Carousel.props}>
             {productEdges.map((product, idx) => (
-              <ProductCard
+              <ProductCard.Component
                 aspectRatio={aspectRatio}
                 imgProps={{
                   width: 216,
                   height: 216,
                   sizes: '(max-width: 768px) 42vw, 30vw',
                 }}
-                {...Props['__experimentalProductCard']}
+                {...ProductCard.props}
                 bordered={bordered}
                 showDiscountBadge={showDiscountBadge}
                 // Dynamic props shouldn't be overridable
@@ -105,8 +100,8 @@ function ProductShelf({
                 index={idx + 1}
               />
             ))}
-          </Carousel>
-        </ProductShelfWrapper>
+          </Carousel.Component>
+        </ProductShelfWrapper.Component>
       </ProductShelfSkeleton>
     </>
   )