@faststore/core 2.1.1 → 2.1.3

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

@@ -1,16 +1,18 @@
-import {
-  ImageElementData,
-  ImageZoom,
-  ImageGallery as UIImageGallery,
-} from '@faststore/ui'
+import { ImageElementData } from '@faststore/ui'
 import { useEffect, useState } from 'react'
 
 import { useRouter } from 'next/router'
-import { Image } from 'src/components/ui/Image'
 
-const ImageComponent = ({ url, alternateName }) => (
-  <Image src={url} alt={alternateName} width={68} height={68} />
-)
+import {
+  Components,
+  Props,
+} from 'src/components/sections/ProductDetails/Overrides'
+
+const ImageComponent = ({ url, alternateName }) => {
+  const { __experimentalImageGalleryImage: Image } = Components
+
+  return <Image src={url} alt={alternateName} width={68} height={68} />
+}
 
 export interface ImageGalleryProps {
   images: ImageElementData[]
@@ -23,25 +25,34 @@ 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 (
-    <UIImageGallery
+    <ImageGalleryWrapper
+      {...Props['ImageGallery']}
       images={images}
       ImageComponent={ImageComponent}
       selectedImageIdx={selectedImageIdx}
       setSelectedImageIdx={setSelectedImageIdx}
       {...otherProps}
     >
-      <ImageZoom>
+      <ImageZoom {...Props['ImageZoom']}>
         <Image
-          src={currentImage.url}
-          alt={currentImage.alternateName}
           sizes="(max-width: 360px) 50vw, (max-width: 768px) 90vw, 50vw"
           width={691}
           height={691 * (3 / 4)}
           loading="eager"
+          {...Props['__experimentalImageGalleryImage']}
+          src={currentImage.url}
+          alt={currentImage.alternateName}
         />
       </ImageZoom>
-    </UIImageGallery>
+    </ImageGalleryWrapper>
   )
 }
 

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

@@ -1,11 +1,5 @@
 import type { Dispatch, SetStateAction } from 'react'
 
-import {
-  Icon as UIIcon,
-  Price as UIPrice,
-  QuantitySelector as UIQuantitySelector,
-} from '@faststore/ui'
-
 import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
 
 import { useBuyButton } from 'src/sdk/cart/useBuyButton'
@@ -14,9 +8,12 @@ import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import Selectors from 'src/components/ui/SkuSelector'
 import AddToCartLoadingSkeleton from './AddToCartLoadingSkeleton'
 
-import { Components } from 'src/components/sections/ProductDetails/Overrides'
+import {
+  Components,
+  Props,
+} from 'src/components/sections/ProductDetails/Overrides'
 
-const { BuyButton } = Components
+const { BuyButton, Icon, Price, QuantitySelector } = Components
 
 interface ProductDetailsSettingsProps {
   product: ProductDetailsFragment_ProductFragment
@@ -36,7 +33,10 @@ function ProductDetailsSettings({
   isValidating,
   quantity,
   setQuantity,
-  buyButtonIcon: { icon: buyButtonIconName, alt: buyButtonIconAlt },
+  buyButtonIcon: {
+    icon: buyButtonIconName = Props['Icon'].name,
+    alt: buyButtonIconAlt = Props['Icon']['aria-label'],
+  },
 }: ProductDetailsSettingsProps) {
   const {
     id,
@@ -77,25 +77,34 @@ function ProductDetailsSettings({
     <>
       <section data-fs-product-details-values>
         <div data-fs-product-details-prices>
-          <UIPrice
-            value={listPrice}
+          <Price
             formatter={useFormattedPrice}
             testId="list-price"
-            data-value={listPrice}
             variant="listing"
             SRText="Original price:"
+            {...Props['Price']}
+            value={listPrice}
+            data-value={listPrice}
           />
-          <UIPrice
-            value={lowPrice}
+          <Price
             formatter={useFormattedPrice}
             testId="price"
-            data-value={lowPrice}
             variant="spot"
             className="text__lead"
             SRText="Sale Price:"
+            {...Props['Price']}
+            value={lowPrice}
+            data-value={lowPrice}
           />
         </div>
-        <UIQuantitySelector min={1} max={10} onChange={setQuantity} />
+        <QuantitySelector
+          min={1}
+          max={10}
+          {...Props['QuantitySelector']}
+          // Dynamic props shouldn't be overridable
+          // This decision can be reviewed later if needed
+          onChange={setQuantity}
+        />
       </section>
       {skuVariants && (
         <Selectors
@@ -114,10 +123,15 @@ function ProductDetailsSettings({
           <AddToCartLoadingSkeleton />
         ) : (
           <BuyButton
-            disabled={buyDisabled}
+            {...Props['BuyButton']}
             icon={
-              <UIIcon aria-label={buyButtonIconAlt} name={buyButtonIconName} />
+              <Icon
+                {...Props['Icon']}
+                aria-label={buyButtonIconAlt}
+                name={buyButtonIconName}
+              />
             }
+            disabled={buyDisabled}
             {...buyProps}
           >
             {buyButtonTitle || 'Add to Cart'}

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

@@ -1,14 +1,9 @@
 import { useSearch } from '@faststore/sdk'
-import {
-  Button as UIButton,
-  LinkButton as UILinkButton,
-  Skeleton as UISkeleton,
-} from '@faststore/ui'
 import { NextSeo } from 'next-seo'
 import type { MouseEvent } from 'react'
 import { Suspense, lazy } from 'react'
 
-import { Icon, useUI } from '@faststore/ui'
+import { useUI } from '@faststore/ui'
 import Filter from 'src/components/search/Filter'
 import Sort from 'src/components/search/Sort'
 import FilterSkeleton from 'src/components/skeletons/FilterSkeleton'
@@ -21,10 +16,25 @@ import { SortProps } from 'src/components/search/Sort/Sort'
 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,
+  FilterIcon,
+  PrevIcon,
+  ResultsCountSkeleton,
+  SortSkeleton,
+  FilterButtonSkeleton,
+  LinkButtonPrev,
+  LinkButtonNext,
+} = Components
+
 export interface ProductGalleryProps {
   title?: string
   searchTerm?: string
@@ -98,49 +108,68 @@ function ProductGallery({
           </FilterSkeleton>
         </div>
         <div data-fs-product-listing-results-count data-count={totalCount}>
-          <UISkeleton
+          <ResultsCountSkeleton
             data-fs-product-listing-results-count-skeleton
-            loading={!productGalleryData}
             size={{ width: '100%', height: '1.5rem' }}
+            {...Props['ResultsCountSkeleton']}
+            // Dynamic props shouldn't be overridable
+            // This decision can be reviewed later if needed
+            loading={!productGalleryData}
           >
             <h2 data-testid="total-product-count">
               {totalCount} {totalCountLabel}
             </h2>
-          </UISkeleton>
+          </ResultsCountSkeleton>
         </div>
         <div data-fs-product-listing-sort>
-          <UISkeleton
+          <SortSkeleton
             data-fs-product-listing-sort-skeleton
-            loading={facets?.length === 0}
             size={{ width: 'auto', height: '1.5rem' }}
+            {...Props['SortSkeleton']}
+            // Dynamic props shouldn't be overridable
+            // This decision can be reviewed later if needed
+            loading={facets?.length === 0}
           >
             <Sort
               label={sortBySelector?.label}
               options={sortBySelector?.options}
             />
-          </UISkeleton>
-          <UISkeleton
+          </SortSkeleton>
+          <FilterButtonSkeleton
             data-fs-product-listing-filter-button-skeleton
-            loading={facets?.length === 0}
             size={{ width: '6rem', height: '1.5rem' }}
+            {...Props['FilterButtonSkeleton']}
+            // Dynamic props shouldn't be overridable
+            // This decision can be reviewed later if needed
+            loading={facets?.length === 0}
           >
-            <UIButton
+            <Button
               variant="tertiary"
               data-testid="open-filter-button"
               icon={
-                <Icon
-                  name={filter?.mobileOnly?.filterButton?.icon?.icon}
-                  aria-label={filter?.mobileOnly?.filterButton?.icon?.alt}
+                <FilterIcon
                   width={16}
                   height={16}
+                  {...Props['FilterIcon']}
+                  name={
+                    filter?.mobileOnly?.filterButton?.icon?.icon ??
+                    Props['FilterIcon'].name
+                  }
+                  aria-label={
+                    filter?.mobileOnly?.filterButton?.icon?.alt ??
+                    Props['FilterIcon']['aria-label']
+                  }
                 />
               }
               iconPosition="left"
+              {...Props['Button']}
+              // Dynamic props shouldn't be overridable
+              // This decision can be reviewed later if needed
               onClick={openFilter}
             >
               {filter?.mobileOnly?.filterButton?.label}
-            </UIButton>
-          </UISkeleton>
+            </Button>
+          </FilterButtonSkeleton>
         </div>
         <div data-fs-product-listing-results>
           {/* Add link to previous page. This helps on SEO */}
@@ -149,30 +178,38 @@ function ProductGallery({
               <NextSeo
                 additionalLinkTags={[{ rel: 'prev', href: prev.link }]}
               />
-              <UILinkButton
-                onClick={(e: MouseEvent<HTMLElement>) => {
-                  e.currentTarget.blur()
-                  e.preventDefault()
-                  addPrevPage()
-                }}
-                href={prev.link}
+              <LinkButtonPrev
                 rel="prev"
                 variant="secondary"
                 iconPosition="left"
                 icon={
-                  <Icon
-                    name={previousPageButton?.icon?.icon}
-                    aria-label={
-                      previousPageButton?.icon?.alt ?? previousPageButton?.label
-                    }
+                  <PrevIcon
                     width={16}
                     height={16}
                     weight="bold"
+                    {...Props['PrevIcon']}
+                    name={
+                      previousPageButton?.icon?.icon ?? Props['PrevIcon'].name
+                    }
+                    aria-label={
+                      previousPageButton?.icon?.alt ??
+                      previousPageButton?.label ??
+                      Props['PrevIcon']['aria-label']
+                    }
                   />
                 }
+                {...Props['LinkButtonPrev']}
+                // Dynamic props shouldn't be overridable
+                // This decision can be reviewed later if needed
+                onClick={(e: MouseEvent<HTMLElement>) => {
+                  e.currentTarget.blur()
+                  e.preventDefault()
+                  addPrevPage()
+                }}
+                href={prev.link}
               >
                 {previousPageButton?.label}
-              </UILinkButton>
+              </LinkButtonPrev>
             </div>
           )}
           {/* Render ALL products */}
@@ -196,19 +233,22 @@ function ProductGallery({
               <NextSeo
                 additionalLinkTags={[{ rel: 'next', href: next.link }]}
               />
-              <UILinkButton
+              <LinkButtonNext
                 testId="show-more"
+                rel="next"
+                variant="secondary"
+                {...Props['LinkButtonNext']}
+                // Dynamic props shouldn't be overridable
+                // This decision can be reviewed later if needed
                 onClick={(e: MouseEvent<HTMLElement>) => {
                   e.currentTarget.blur()
                   e.preventDefault()
                   addNextPage()
                 }}
                 href={next.link}
-                rel="next"
-                variant="secondary"
               >
                 {loadMorePageButton?.label}
-              </UILinkButton>
+              </LinkButtonNext>
             </div>
           )}
         </div>

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

@@ -98,7 +98,7 @@ function ProductShelf({
                 {...Props['__experimentalProductCard']}
                 bordered={bordered}
                 showDiscountBadge={showDiscountBadge}
-                // Dynamic props, shouldn't be overridable
+                // Dynamic props shouldn't be overridable
                 // This decision can be reviewed later if needed
                 key={`${product.node.id}`}
                 product={product.node}

package/src/components/ui/ShippingSimulation/ShippingSimulation.tsx

@@ -8,8 +8,6 @@ import { useShippingSimulation } from './useShippingSimulation'
 
 import { Components } from 'src/components/sections/ProductDetails/Overrides'
 
-const { ShippingSimulation: ShippingSimulationWrapper } = Components
-
 type ShippingSimulationOptionalProps =
   | 'title'
   | 'formatter'
@@ -58,6 +56,7 @@ export default function ShippingSimulation({
   ...otherProps
 }: ShippingSimulationProps) {
   const { country, postalCode: sessionPostalCode } = useSession()
+  const { ShippingSimulation: ShippingSimulationWrapper } = Components
 
   const {
     input,

package/src/customizations/components/overrides/ProductDetails.tsx

@@ -6,7 +6,21 @@ const SECTION = 'ProductDetails' as const
 
 const overrides: SectionOverride[typeof SECTION] = {
   name: SECTION,
-  components: {},
+  components: {
+    ProductTitle: { props: {} },
+    DiscountBadge: { props: {} },
+    BuyButton: { props: {} },
+    Icon: { props: {} },
+    Price: { props: {} },
+    QuantitySelector: { props: {} },
+    SkuSelector: { props: {} },
+    ShippingSimulation: { props: {} },
+    ImageGallery: { props: {} },
+    ImageZoom: { props: {} },
+    __experimentalImageGalleryImage: { props: {} },
+    __experimentalImageGallery: { props: {} },
+    __experimentalShippingSimulation: { props: {} },
+  },
 }
 
 export default overrides

package/src/customizations/components/overrides/ProductGallery.tsx

@@ -0,0 +1,24 @@
+// This is an example of how it can be used on the starter.
+
+import { SectionOverride } from 'src/typings/overrides'
+
+const SECTION = 'ProductGallery' as const
+
+const overrides: SectionOverride[typeof SECTION] = {
+  name: SECTION,
+  components: {
+    Button: { props: {} },
+    FilterIcon: { props: {} },
+    PrevIcon: { props: {} },
+    ResultsCountSkeleton: { props: {} },
+    SortSkeleton: { props: {} },
+    FilterButtonSkeleton: { props: {} },
+    LinkButtonPrev: { props: {} },
+    LinkButtonNext: { props: {} },
+    __experimentalFilterDesktop: { props: {} },
+    __experimentalFilterSlider: { props: {} },
+    __experimentalProductCard: { props: {} },
+  },
+}
+
+export default overrides

package/src/typings/overrides.d.ts

@@ -10,8 +10,16 @@ export const SECTIONS = {
       'ProductTitle',
       'DiscountBadge',
       'BuyButton',
+      'Icon',
+      'Price',
+      'QuantitySelector',
       'SkuSelector',
       'ShippingSimulation',
+      'ImageGallery',
+      'ImageZoom',
+      '__experimentalImageGalleryImage',
+      '__experimentalImageGallery',
+      '__experimentalShippingSimulation',
     ],
   },
   ProductShelf: {
@@ -39,6 +47,21 @@ export const SECTIONS = {
   Breadcrumb: {
     components: ['Breadcrumb', 'Icon'],
   },
+  ProductGallery: {
+    components: [
+      'Button',
+      'FilterIcon',
+      'PrevIcon',
+      'ResultsCountSkeleton',
+      'SortSkeleton',
+      'FilterButtonSkeleton',
+      'LinkButtonPrev',
+      'LinkButtonNext',
+      '__experimentalFilterDesktop',
+      '__experimentalFilterSlider',
+      '__experimentalProductCard',
+    ],
+  },
 } as const
 
 // export type ComponentOrProps =