@faststore/core 2.1.33 → 2.1.36

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>
+}

package/src/typings/overrides.ts

@@ -0,0 +1,267 @@
+import type { PropsWithChildren } from 'react'
+import type {
+  AlertProps,
+  BannerTextContentProps,
+  BannerTextProps,
+  BreadcrumbProps,
+  ButtonProps,
+  DiscountBadgeProps,
+  EmptyStateProps,
+  HeroHeaderProps,
+  HeroImageProps,
+  HeroProps,
+  IconButtonProps,
+  IconProps,
+  ImageGalleryProps,
+  ImageZoomProps,
+  InputFieldProps,
+  LinkButtonProps,
+  NavbarButtonsProps,
+  NavbarHeaderProps,
+  NavbarLinksListProps,
+  NavbarLinksProps,
+  NavbarProps,
+  NavbarRowProps,
+  NavbarSliderContentProps,
+  NavbarSliderFooterProps,
+  NavbarSliderHeaderProps,
+  NavbarSliderProps,
+  PriceProps,
+  ProductShelfProps,
+  ProductTitleProps,
+  QuantitySelectorProps,
+  RegionBarProps,
+  ShippingSimulationProps,
+  SkeletonProps,
+  SkuSelectorProps,
+} from '@faststore/ui'
+
+import type {
+  ComponentOverrideDefinition,
+  SectionOverrideDefinition,
+} from './overrideDefinitionUtils'
+
+export type SectionOverride =
+  | AlertOverrideDefinition
+  | BannerTextOverrideDefinition
+  | BreadcrumbOverrideDefinition
+  | EmptyStateOverrideDefinition
+  | HeroOverrideDefinition
+  | NavbarOverrideDefinition
+  | NewsletterOverrideDefinition
+  | ProductDetailsOverrideDefinition
+  | ProductGalleryOverrideDefinition
+  | ProductShelfOverrideDefinition
+  | RegionBarOverrideDefinition
+
+/**
+ * Originally, these types were defined in their respective Overrides file
+ * For some reason, typescript wouldn't interpret SectionOverride correctly when
+ * defining it by importing each of the SectionOverrideDefinitions and would set it as 'any'
+ *
+ * For some reason, defining them in the same file as SectionOverride seems to fix the issue.
+ * Consider that before moving them elsewhere and test it on the starter as well.
+ */
+export type AlertOverrideDefinition = SectionOverrideDefinition<
+  'Alert',
+  {
+    Alert: ComponentOverrideDefinition<AlertProps, Omit<AlertProps, 'onClose'>>
+    Icon: ComponentOverrideDefinition<IconProps, IconProps>
+  }
+>
+
+export type BannerTextOverrideDefinition = SectionOverrideDefinition<
+  'BannerText',
+  {
+    BannerText: ComponentOverrideDefinition<BannerTextProps, BannerTextProps>
+    BannerTextContent: ComponentOverrideDefinition<
+      BannerTextContentProps,
+      BannerTextContentProps
+    >
+  }
+>
+
+export type BreadcrumbOverrideDefinition = SectionOverrideDefinition<
+  'Breadcrumb',
+  {
+    Breadcrumb: ComponentOverrideDefinition<BreadcrumbProps, BreadcrumbProps>
+    Icon: ComponentOverrideDefinition<IconProps, IconProps>
+  }
+>
+
+export type EmptyStateOverrideDefinition = SectionOverrideDefinition<
+  'EmptyState',
+  {
+    EmptyState: ComponentOverrideDefinition<
+      PropsWithChildren<EmptyStateProps>,
+      EmptyStateProps
+    >
+  }
+>
+
+export type HeroOverrideDefinition = SectionOverrideDefinition<
+  'Hero',
+  {
+    Hero: ComponentOverrideDefinition<HeroProps, HeroProps>
+    HeroImage: ComponentOverrideDefinition<HeroImageProps, HeroImageProps>
+    HeroHeader: ComponentOverrideDefinition<HeroHeaderProps, HeroHeaderProps>
+  }
+>
+
+export type NavbarOverrideDefinition = SectionOverrideDefinition<
+  'Navbar',
+  {
+    Navbar: ComponentOverrideDefinition<NavbarProps, NavbarProps>
+    NavbarLinks: ComponentOverrideDefinition<NavbarLinksProps, NavbarLinksProps>
+    NavbarLinksList: ComponentOverrideDefinition<
+      NavbarLinksListProps,
+      NavbarLinksListProps
+    >
+    NavbarSlider: ComponentOverrideDefinition<
+      NavbarSliderProps,
+      NavbarSliderProps
+    >
+    NavbarSliderHeader: ComponentOverrideDefinition<
+      NavbarSliderHeaderProps,
+      NavbarSliderHeaderProps
+    >
+    NavbarSliderContent: ComponentOverrideDefinition<
+      NavbarSliderContentProps,
+      NavbarSliderContentProps
+    >
+    NavbarSliderFooter: ComponentOverrideDefinition<
+      NavbarSliderFooterProps,
+      NavbarSliderFooterProps
+    >
+    NavbarHeader: ComponentOverrideDefinition<
+      NavbarHeaderProps,
+      NavbarHeaderProps
+    >
+    NavbarRow: ComponentOverrideDefinition<NavbarRowProps, NavbarRowProps>
+    NavbarButtons: ComponentOverrideDefinition<
+      NavbarButtonsProps,
+      NavbarButtonsProps
+    >
+    IconButton: ComponentOverrideDefinition<
+      IconButtonProps,
+      Omit<IconButtonProps, 'onClick'>
+    >
+  }
+>
+
+export type NewsletterOverrideDefinition = SectionOverrideDefinition<
+  'Newsletter',
+  {
+    ToastIconSuccess: ComponentOverrideDefinition<IconProps, IconProps>
+    ToastIconError: ComponentOverrideDefinition<IconProps, IconProps>
+    HeaderIcon: ComponentOverrideDefinition<IconProps, IconProps>
+    InputFieldName: ComponentOverrideDefinition<
+      InputFieldProps,
+      Omit<InputFieldProps, 'inputRef'>
+    >
+    InputFieldEmail: ComponentOverrideDefinition<
+      InputFieldProps,
+      Omit<InputFieldProps, 'inputRef'>
+    >
+    Button: ComponentOverrideDefinition<ButtonProps, ButtonProps>
+  }
+>
+
+export type ProductDetailsOverrideDefinition = SectionOverrideDefinition<
+  'ProductDetails',
+  {
+    ProductTitle: ComponentOverrideDefinition<
+      ProductTitleProps,
+      ProductTitleProps
+    >
+    DiscountBadge: ComponentOverrideDefinition<
+      DiscountBadgeProps,
+      Omit<DiscountBadgeProps, 'listPrice' | 'spotPrice'>
+    >
+    BuyButton: ComponentOverrideDefinition<ButtonProps, ButtonProps>
+    Icon: ComponentOverrideDefinition<IconProps, IconProps>
+    Price: ComponentOverrideDefinition<
+      PriceProps,
+      Omit<PriceProps, 'value' | 'data-value'>
+    >
+    QuantitySelector: ComponentOverrideDefinition<
+      QuantitySelectorProps,
+      Omit<QuantitySelectorProps, 'onChange'>
+    >
+    SkuSelector: ComponentOverrideDefinition<SkuSelectorProps, SkuSelectorProps>
+    ShippingSimulation: ComponentOverrideDefinition<
+      ShippingSimulationProps,
+      ShippingSimulationProps
+    >
+    ImageGallery: ComponentOverrideDefinition<
+      ImageGalleryProps,
+      ImageGalleryProps
+    >
+    ImageZoom: ComponentOverrideDefinition<ImageZoomProps, ImageZoomProps>
+    __experimentalImageGalleryImage: ComponentOverrideDefinition<any, any>
+    __experimentalImageGallery: ComponentOverrideDefinition<any, any>
+    __experimentalShippingSimulation: ComponentOverrideDefinition<any, any>
+  }
+>
+
+export type ProductGalleryOverrideDefinition = SectionOverrideDefinition<
+  'ProductGallery',
+  {
+    MobileFilterButton: ComponentOverrideDefinition<
+      ButtonProps,
+      Omit<ButtonProps, 'onClick'>
+    >
+    FilterIcon: ComponentOverrideDefinition<IconProps, IconProps>
+    PrevIcon: ComponentOverrideDefinition<IconProps, IconProps>
+    ResultsCountSkeleton: ComponentOverrideDefinition<
+      SkeletonProps,
+      Omit<SkeletonProps, 'loading'>
+    >
+    SortSkeleton: ComponentOverrideDefinition<
+      SkeletonProps,
+      Omit<SkeletonProps, 'loading'>
+    >
+    FilterButtonSkeleton: ComponentOverrideDefinition<
+      SkeletonProps,
+      Omit<SkeletonProps, 'loading'>
+    >
+    LinkButtonPrev: ComponentOverrideDefinition<
+      LinkButtonProps,
+      Omit<LinkButtonProps, 'onClick' | 'href'>
+    >
+    LinkButtonNext: ComponentOverrideDefinition<
+      LinkButtonProps,
+      Omit<LinkButtonProps, 'onClick' | 'href'>
+    >
+    __experimentalFilterDesktop: ComponentOverrideDefinition<any, any>
+    __experimentalFilterSlider: ComponentOverrideDefinition<any, any>
+    __experimentalProductCard: ComponentOverrideDefinition<any, any>
+  }
+>
+
+export type ProductShelfOverrideDefinition = SectionOverrideDefinition<
+  'ProductShelf',
+  {
+    ProductShelf: ComponentOverrideDefinition<
+      ProductShelfProps,
+      ProductShelfProps
+    >
+    __experimentalCarousel: ComponentOverrideDefinition<any, any>
+    __experimentalProductCard: ComponentOverrideDefinition<
+      any,
+      Omit<any, 'key' | 'product' | 'index'>
+    >
+  }
+>
+
+export type RegionBarOverrideDefinition = SectionOverrideDefinition<
+  'RegionBar',
+  {
+    RegionBar: ComponentOverrideDefinition<
+      RegionBarProps,
+      Omit<RegionBarProps, 'onButtonClick' | 'postalCode'>
+    >
+    LocationIcon: ComponentOverrideDefinition<IconProps, IconProps>
+    ButtonIcon: ComponentOverrideDefinition<IconProps, IconProps>
+  }
+>

package/src/utils/overrides.ts

@@ -0,0 +1,53 @@
+import type {
+  DefaultSectionComponentsDefinitions,
+  ComponentOverrideDefinition,
+  Merge,
+} from 'src/typings/overrideDefinitionUtils'
+
+import type { SectionOverride } from 'src/typings/overrides'
+
+export type GetSectionOverridesReturn<SO extends SectionOverride> = {
+  [Key in keyof SO['components']]: Merge<SO['components'][Key]>
+}
+
+export function getSectionOverrides<SO extends SectionOverride>(
+  defaultComponents: DefaultSectionComponentsDefinitions<SO>,
+  override: SO
+): GetSectionOverridesReturn<SO> {
+  const overriddenComponents = {} as GetSectionOverridesReturn<SO>
+
+  Object.entries(defaultComponents).forEach(([key, value]) => {
+    const componentOverride:
+      | ComponentOverrideDefinition<unknown, unknown>
+      | undefined = override.components?.[key]
+
+    if (!componentOverride) {
+      overriddenComponents[key] = {
+        Component: value,
+        props: {},
+      }
+
+      return
+    }
+
+    if (componentOverride.Component && componentOverride.props) {
+      console.warn(
+        `Mixed use of Component and props overrides detected. Defaulting to Component override: component ${key} in the ${override.section} section.`
+      )
+    }
+
+    if (componentOverride.Component) {
+      overriddenComponents[key] = {
+        Component: componentOverride.Component,
+        props: {},
+      }
+    } else {
+      overriddenComponents[key] = {
+        Component: value,
+        props: componentOverride.props ?? {},
+      }
+    }
+  })
+
+  return overriddenComponents
+}