@faststore/core 2.1.31 → 2.1.35

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

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

@@ -6,7 +6,7 @@ import { useSession } from 'src/sdk/session'
 import { IShippingItem } from '@faststore/api'
 import { useShippingSimulation } from './useShippingSimulation'
 
-import { Components } from 'src/components/sections/ProductDetails/Overrides'
+import { ShippingSimulation as ShippingSimulationWrapper } from 'src/components/sections/ProductDetails/Overrides'
 
 type ShippingSimulationOptionalProps =
   | 'title'
@@ -56,7 +56,6 @@ export default function ShippingSimulation({
   ...otherProps
 }: ShippingSimulationProps) {
   const { country, postalCode: sessionPostalCode } = useSession()
-  const { ShippingSimulation: ShippingSimulationWrapper } = Components
 
   const {
     input,
@@ -76,7 +75,7 @@ export default function ShippingSimulation({
   const { location, options } = shippingSimulation
 
   return (
-    <ShippingSimulationWrapper
+    <ShippingSimulationWrapper.Component
       formatter={formatter}
       onInput={handleOnInput}
       onSubmit={handleSubmit}

package/src/components/ui/SkuSelector/Selectors.tsx

@@ -4,9 +4,7 @@ import { SkuSelectorProps } from '@faststore/ui'
 import NextLink from 'next/link'
 import { Image } from '../Image'
 
-import { Components } from 'src/components/sections/ProductDetails/Overrides'
-
-const { SkuSelector } = Components
+import { SkuSelector } from 'src/components/sections/ProductDetails/Overrides'
 
 export type SkuVariantsByName = Record<
   string,
@@ -44,16 +42,19 @@ function Selectors({
     <section {...otherProps}>
       {availableVariations &&
         Object.keys(availableVariations).map((skuVariant) => (
-          <SkuSelector
+          <SkuSelector.Component
+            ImageComponent={ImageComponent}
+            {...SkuSelector.props}
             key={skuVariant}
             skuPropertyName={skuVariant}
             availableVariations={availableVariations}
-            ImageComponent={ImageComponent}
             activeVariations={activeVariations}
             slugsMap={slugsMap}
             linkProps={{
-              as: NextLink,
-              legacyBehavior: false,
+              ...(SkuSelector.props.linkProps ?? {}),
+              as: SkuSelector.props.linkProps?.as ?? NextLink,
+              legacyBehavior:
+                SkuSelector.props.linkProps?.legacyBehavior ?? false,
             }}
           />
         ))}

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

@@ -4,12 +4,8 @@ import { SectionOverride } from 'src/typings/overrides'
 
 const SECTION = 'Alert' as const
 
-const overrides: SectionOverride[typeof SECTION] = {
-  name: SECTION,
-  components: {
-    Alert: { props: {} },
-    Icon: { props: {} },
-  },
+const override: SectionOverride = {
+  section: SECTION,
 }
 
-export default overrides
+export { override }

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

@@ -4,12 +4,8 @@ import { SectionOverride } from 'src/typings/overrides'
 
 const SECTION = 'BannerText' as const
 
-const overrides: SectionOverride[typeof SECTION] = {
-  name: SECTION,
-  components: {
-    BannerText: { props: {} },
-    BannerTextContent: { props: {} },
-  },
+const override: SectionOverride = {
+  section: SECTION,
 }
 
-export default overrides
+export { override }

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

@@ -4,12 +4,8 @@ import { SectionOverride } from 'src/typings/overrides'
 
 const SECTION = 'Breadcrumb' as const
 
-const overrides: SectionOverride[typeof SECTION] = {
-  name: SECTION,
-  components: {
-    Breadcrumb: { props: {} },
-    Icon: { props: {} },
-  },
+const override: SectionOverride = {
+  section: SECTION,
 }
 
-export default overrides
+export { override }

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

@@ -3,11 +3,8 @@ import { SectionOverride } from 'src/typings/overrides'
 
 const SECTION = 'EmptyState' as const
 
-const overrides: SectionOverride[typeof SECTION] = {
-  name: SECTION,
-  components: {
-    EmptyState: { props: {} },
-  },
+const override: SectionOverride = {
+  section: SECTION,
 }
 
-export default overrides
+export { override }

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

@@ -4,13 +4,8 @@ import { SectionOverride } from 'src/typings/overrides'
 
 const SECTION = 'Hero' as const
 
-const overrides: SectionOverride[typeof SECTION] = {
-  name: SECTION,
-  components: {
-    Hero: { props: {} },
-    HeroImage: { props: {} },
-    HeroHeader: { props: {} },
-  },
+const override: SectionOverride = {
+  section: SECTION,
 }
 
-export default overrides
+export { override }

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

@@ -4,21 +4,8 @@ import { SectionOverride } from 'src/typings/overrides'
 
 const SECTION = 'Navbar' as const
 
-const overrides: SectionOverride[typeof SECTION] = {
-  name: SECTION,
-  components: {
-    Navbar: { props: {} },
-    NavbarLinks: { props: {} },
-    NavbarLinksList: { props: {} },
-    NavbarSlider: { props: {} },
-    NavbarSliderHeader: { props: {} },
-    NavbarSliderContent: { props: {} },
-    NavbarSliderFooter: { props: {} },
-    NavbarHeader: { props: {} },
-    NavbarRow: { props: {} },
-    NavbarButtons: { props: {} },
-    IconButton: { props: {} },
-  },
+const override: SectionOverride = {
+  section: SECTION,
 }
 
-export default overrides
+export { override }

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

@@ -4,16 +4,8 @@ import { SectionOverride } from 'src/typings/overrides'
 
 const SECTION = 'Newsletter' as const
 
-const overrides: SectionOverride[typeof SECTION] = {
-  name: SECTION,
-  components: {
-    ToastIconSuccess: { props: {} },
-    ToastIconError: { props: {} },
-    HeaderIcon: { props: {} },
-    InputFieldName: { props: {} },
-    InputFieldEmail: { props: {} },
-    Button: { props: {} },
-  },
+const override: SectionOverride = {
+  section: SECTION,
 }
 
-export default overrides
+export { override }

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

@@ -4,23 +4,8 @@ import { SectionOverride } from 'src/typings/overrides'
 
 const SECTION = 'ProductDetails' as const
 
-const overrides: SectionOverride[typeof SECTION] = {
-  name: SECTION,
-  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: {} },
-  },
+const override: SectionOverride = {
+  section: SECTION,
 }
 
-export default overrides
+export { override }

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

@@ -4,21 +4,8 @@ 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: {} },
-  },
+const override: SectionOverride = {
+  section: SECTION,
 }
 
-export default overrides
+export { override }

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

@@ -4,13 +4,8 @@ import { SectionOverride } from 'src/typings/overrides'
 
 const SECTION = 'ProductShelf' as const
 
-const overrides: SectionOverride[typeof SECTION] = {
-  name: SECTION,
-  components: {
-    ProductShelf: { props: {} },
-    __experimentalCarousel: { props: {} },
-    __experimentalProductCard: { props: {} },
-  },
+const override: SectionOverride = {
+  section: SECTION,
 }
 
-export default overrides
+export { override }

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

@@ -4,13 +4,8 @@ import { SectionOverride } from 'src/typings/overrides'
 
 const SECTION = 'RegionBar' as const
 
-const overrides: SectionOverride[typeof SECTION] = {
-  name: SECTION,
-  components: {
-    RegionBar: { props: {} },
-    LocationIcon: { props: {} },
-    ButtonIcon: { props: {} },
-  },
+const override: SectionOverride = {
+  section: SECTION,
 }
 
-export default overrides
+export { override }

package/src/typings/overrideDefinitionUtils.ts

@@ -0,0 +1,40 @@
+export type DefaultSectionComponentsDefinitions<
+  T extends SectionOverrideDefinition
+> = Record<keyof T['components'], React.ComponentType>
+
+export type SectionOverrideDefinition<
+  SectionName extends string = string,
+  OC extends Record<string, ComponentOverrideDefinition<any, any>> = Record<
+    string,
+    ComponentOverrideDefinition<any, any>
+  >
+> = {
+  section: SectionName
+  components?: Partial<Prettify<OC>>
+}
+
+export type ComponentOverrideDefinition<ComponentProps, Props> =
+  | {
+      Component?: never
+      props: Partial<Props>
+    }
+  | {
+      Component: React.ComponentType<ComponentProps>
+      props?: never
+    }
+
+/** This type makes complex types (usually generics) easier to read */
+export type Prettify<T> = {
+  [K in keyof T]: T[K]
+} & {}
+
+// Taken from https://dev.to/lucianbc/union-type-merging-in-typescript-9al
+type AllKeys<T> = T extends any ? keyof T : never
+
+type PickType<T, K extends AllKeys<T>> = T extends { [k in K]?: any }
+  ? T[K]
+  : undefined
+
+export type Merge<T> = {
+  [k in AllKeys<T>]: PickType<T, k>
+}