@faststore/core 2.1.0 → 2.1.3

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 =