@faststore/core 2.1.33 → 2.1.35

package/src/components/search/Filter/Filter.tsx

@@ -6,15 +6,10 @@ import { ProductGalleryProps } from 'src/components/ui/ProductGallery/ProductGal
 import { useFilter } from './useFilter'
 
 import {
-  Components,
-  Props,
+  __experimentalFilterDesktop as FilterDesktop,
+  __experimentalFilterSlider as FilterSlider,
 } from 'src/components/sections/ProductGallery/Overrides'
 
-const {
-  __experimentalFilterDesktop: FilterDesktop,
-  __experimentalFilterSlider: FilterSlider,
-} = Components
-
 interface Props {
   /**
    * CMS defined data to be used in filter component.
@@ -42,8 +37,8 @@ function Filter({
   return (
     <>
       <div className="hidden-mobile">
-        <FilterDesktop
-          {...Props['__experimentalFilterDesktop']}
+        <FilterDesktop.Component
+          {...FilterDesktop.props}
           {...filter}
           testId={testId}
           title={filterCmsData?.title}
@@ -52,8 +47,8 @@ function Filter({
 
       {displayFilter && (
         <Suspense fallback={null}>
-          <FilterSlider
-            {...Props['__experimentalFilterSlider']}
+          <FilterSlider.Component
+            {...FilterSlider.props}
             {...filter}
             testId={testId}
             title={filterCmsData?.title}

package/src/components/sections/Alert/Alert.tsx

@@ -1,14 +1,17 @@
-import CommonAlert from 'src/components/common/Alert'
-
-import { Components, Props } from 'src/components/sections/Alert/Overrides'
+import { ReactNode } from 'react'
 
-const { Icon } = Components
+import CommonAlert from 'src/components/common/Alert'
+import {
+  Alert as AlertWrapper,
+  Icon,
+} from 'src/components/sections/Alert/Overrides'
 
 export interface AlertProps {
   icon: string
   content: string
   link: {
-    text: string
+    // It is only ReactNode when overridden as such
+    text: string | ReactNode
     to: string
   }
   dismissible: boolean
@@ -16,22 +19,23 @@ export interface AlertProps {
 
 // TODO: Change actionPath and actionLabel with Link
 function Alert({
-  icon = Props['Icon'].name,
+  icon = Icon.props.name,
   content,
   link: {
-    text = Props['Alert'].link?.text,
-    to = Props['Alert'].link?.to,
-  } = Props['Alert'].link,
-  dismissible = Props['Alert'].dismissible,
+    text = AlertWrapper.props.link?.children,
+    to = AlertWrapper.props.link?.href,
+  },
+  dismissible = AlertWrapper.props.dismissible,
 }: AlertProps) {
   return (
     <CommonAlert
-      icon={<Icon {...Props['Icon']} name={icon} />}
+      icon={<Icon.Component {...Icon.props} name={icon} />}
+      {...AlertWrapper.props}
       link={{
-        ...(Props['Alert'].link ?? {}),
+        ...(AlertWrapper.props.link ?? {}),
         children: text,
         href: to,
-        target: Props['Alert'].link?.target ?? '_self',
+        target: AlertWrapper.props.link?.target ?? '_self',
       }}
       dismissible={dismissible}
     >

package/src/components/sections/Alert/Overrides.tsx

@@ -1,27 +1,15 @@
 import { Alert as UIAlert, Icon as UIIcon } from '@faststore/ui'
 
-import AlertCustomizations from 'src/customizations/components/overrides/Alert'
-
-const alertComponentsCustomization = {}
-
-const alertPropsCustomization = {} as any
-
-Object.entries(AlertCustomizations.components).forEach(([key, value]) => {
-  if (value.Component) {
-    alertComponentsCustomization[key] = value.Component
-  }
-})
-
-Object.entries(AlertCustomizations.components).forEach(([key, value]) => {
-  if (value.props) {
-    alertPropsCustomization[key] = value.props
-  }
-})
-
-const Components = {
-  Alert: UIAlert,
-  Icon: UIIcon,
-  ...alertComponentsCustomization,
-}
-
-export { Components, alertPropsCustomization as Props }
+import { getSectionOverrides } from 'src/utils/overrides'
+import { override } from 'src/customizations/components/overrides/Alert'
+import type { AlertOverrideDefinition } from 'src/typings/overrides'
+
+const { Alert, Icon } = getSectionOverrides(
+  {
+    Alert: UIAlert,
+    Icon: UIIcon,
+  },
+  override as AlertOverrideDefinition
+)
+
+export { Alert, Icon }

package/src/components/sections/BannerText/BannerText.tsx

@@ -2,9 +2,13 @@ import {
   BannerTextProps as UIBannerTextProps,
   BannerTextContentProps as UIBannerTextContentProps,
 } from '@faststore/ui'
-import { Components, Props } from './Overrides'
 
+import {
+  BannerText as BannerTextWrapper,
+  BannerTextContent,
+} from 'src/components/sections/BannerText/Overrides'
 import Section from '../Section'
+
 import styles from './section.module.scss'
 
 export interface BannerTextProps {
@@ -18,34 +22,34 @@ export interface BannerTextProps {
   variant?: UIBannerTextProps['variant']
 }
 
-const { BannerText: BannerTextWrapper, BannerTextContent } = Components
-
 // TODO: Change actionPath and actionLabel with Link
 function BannerText({
   title,
   caption,
   link: {
-    url: linkUrl = Props['BannerTextContent'].link,
-    text: linkText = Props['BannerTextContent'].linkText,
+    url: linkUrl = BannerTextContent.props.link,
+    text: linkText = BannerTextContent.props.linkText,
   },
-  variant = Props['BannerText'].variant ?? 'primary',
-  colorVariant = Props['BannerText'].colorVariant ?? 'main',
+  variant = BannerTextWrapper.props.variant ?? 'primary',
+  colorVariant = BannerTextWrapper.props.colorVariant ?? 'main',
 }: BannerTextProps) {
   return (
     <Section className={`${styles.section} section-banner layout__section`}>
-      <BannerTextWrapper
-        {...Props['BannerText']}
-        variant={variant}
-        colorVariant={colorVariant}
-      >
-        <BannerTextContent
-          {...Props['BannerTextContent']}
-          title={title}
-          caption={caption}
-          link={linkUrl}
-          linkText={linkText}
-        />
-      </BannerTextWrapper>
+      <div className="layout__content">
+        <BannerTextWrapper.Component
+          {...BannerTextWrapper.props}
+          variant={variant}
+          colorVariant={colorVariant}
+        >
+          <BannerTextContent.Component
+            {...BannerTextContent.props}
+            title={title}
+            caption={caption}
+            link={linkUrl}
+            linkText={linkText}
+          />
+        </BannerTextWrapper.Component>
+      </div>
     </Section>
   )
 }

package/src/components/sections/BannerText/Overrides.tsx

@@ -3,28 +3,16 @@ import {
   BannerTextContent as UIBannerTextContent,
 } from '@faststore/ui'
 
-import BannerTextCustomizations from 'src/customizations/components/overrides/BannerText'
+import { getSectionOverrides } from 'src/utils/overrides'
+import { override } from 'src/customizations/components/overrides/BannerText'
+import type { BannerTextOverrideDefinition } from 'src/typings/overrides'
 
-const bannerTextComponentsCustomization = {}
+const { BannerText, BannerTextContent } = getSectionOverrides(
+  {
+    BannerText: UIBannerText,
+    BannerTextContent: UIBannerTextContent,
+  },
+  override as BannerTextOverrideDefinition
+)
 
-const bannerTextPropsCustomization = {} as any
-
-Object.entries(BannerTextCustomizations.components).forEach(([key, value]) => {
-  if (value.Component) {
-    bannerTextComponentsCustomization[key] = value.Component
-  }
-})
-
-Object.entries(BannerTextCustomizations.components).forEach(([key, value]) => {
-  if (value.props) {
-    bannerTextPropsCustomization[key] = value.props
-  }
-})
-
-const Components = {
-  BannerText: UIBannerText,
-  BannerTextContent: UIBannerTextContent,
-  ...bannerTextComponentsCustomization,
-}
-
-export { Components, bannerTextPropsCustomization as Props }
+export { BannerText, BannerTextContent }

package/src/components/sections/Breadcrumb/Overrides.tsx

@@ -1,27 +1,15 @@
 import { Breadcrumb as UIBreadcrumb, Icon as UIIcon } from '@faststore/ui'
 
-import BreadcrumbCustomizations from 'src/customizations/components/overrides/Breadcrumb'
-
-const breadcrumbComponentsCustomization = {}
-
-const breadcrumbPropsCustomization = {} as any
-
-Object.entries(BreadcrumbCustomizations.components).forEach(([key, value]) => {
-  if (value.Component) {
-    breadcrumbComponentsCustomization[key] = value.Component
-  }
-})
-
-Object.entries(BreadcrumbCustomizations.components).forEach(([key, value]) => {
-  if (value.props) {
-    breadcrumbPropsCustomization[key] = value.props
-  }
-})
-
-const Components = {
-  Breadcrumb: UIBreadcrumb,
-  Icon: UIIcon,
-  ...breadcrumbComponentsCustomization,
-}
-
-export { Components, breadcrumbPropsCustomization as Props }
+import { getSectionOverrides } from 'src/utils/overrides'
+import { override } from 'src/customizations/components/overrides/Breadcrumb'
+import type { BreadcrumbOverrideDefinition } from 'src/typings/overrides'
+
+const { Breadcrumb, Icon } = getSectionOverrides(
+  {
+    Breadcrumb: UIBreadcrumb,
+    Icon: UIIcon,
+  },
+  override as BreadcrumbOverrideDefinition
+)
+
+export { Breadcrumb, Icon }

package/src/components/sections/EmptyState/EmptyState.tsx

@@ -4,9 +4,7 @@ import type { PropsWithChildren } from 'react'
 import Section from '../Section'
 import styles from './section.module.scss'
 
-import { Components, Props } from 'src/components/sections/EmptyState/Overrides'
-
-const { EmptyState: EmptyStateWrapper } = Components
+import { EmptyState as EmptyStateWrapper } from 'src/components/sections/EmptyState/Overrides'
 
 export interface EmptyStateProps {
   title: string
@@ -14,20 +12,20 @@ export interface EmptyStateProps {
 }
 
 function EmptyState({
-  title = Props['EmptyState'].title,
-  titleIcon = Props['EmptyState'].titleIcon,
+  title = EmptyStateWrapper.props.title,
+  titleIcon = EmptyStateWrapper.props.titleIcon,
   children,
 }: PropsWithChildren<EmptyStateProps>) {
   return (
     <Section className={`${styles.section} section-empty-state`}>
-      <EmptyStateWrapper
+      <EmptyStateWrapper.Component
         bkgColor="light"
-        {...Props['EmptyState']}
+        {...EmptyStateWrapper.props}
         title={title}
         titleIcon={titleIcon}
       >
         {children}
-      </EmptyStateWrapper>
+      </EmptyStateWrapper.Component>
     </Section>
   )
 }

package/src/components/sections/EmptyState/Overrides.tsx

@@ -1,26 +1,14 @@
 import { EmptyState as UIEmptyState } from '@faststore/ui'
 
-import EmptyStateCustomizations from 'src/customizations/components/overrides/EmptyState'
-
-const emptyStateComponentsCustomization = {}
-
-const emptyStatePropsCustomization = {} as any
-
-Object.entries(EmptyStateCustomizations.components).forEach(([key, value]) => {
-  if (value.Component) {
-    emptyStateComponentsCustomization[key] = value.Component
-  }
-})
-
-Object.entries(EmptyStateCustomizations.components).forEach(([key, value]) => {
-  if (value.props) {
-    emptyStatePropsCustomization[key] = value.props
-  }
-})
-
-const Components = {
-  EmptyState: UIEmptyState,
-  ...emptyStateComponentsCustomization,
-}
-
-export { Components, emptyStatePropsCustomization as Props }
+import { getSectionOverrides } from 'src/utils/overrides'
+import { override } from 'src/customizations/components/overrides/EmptyState'
+import type { EmptyStateOverrideDefinition } from 'src/typings/overrides'
+
+const { EmptyState } = getSectionOverrides(
+  {
+    EmptyState: UIEmptyState,
+  },
+  override as EmptyStateOverrideDefinition
+)
+
+export { EmptyState }

package/src/components/sections/Hero/Hero.tsx

@@ -2,9 +2,14 @@ import {
   HeroProps as UIHeroProps,
   HeroHeaderProps as UIHeroHeaderProps,
 } from '@faststore/ui'
-import { Components, Props } from './Overrides'
 import { ReactNode } from 'react'
 import { Image } from 'src/components/ui/Image'
+import {
+  Hero as HeroWrapper,
+  HeroImage,
+  HeroHeader,
+} from 'src/components/sections/Hero/Overrides'
+
 import Section from '../Section'
 
 import styles from './section.module.scss'
@@ -25,25 +30,23 @@ export type HeroProps = {
   icon?: ReactNode
 }
 
-const { Hero: HeroWrapper, HeroImage, HeroHeader } = Components
-
 const Hero = ({
   link,
   title,
   subtitle,
   image,
-  variant = Props['Hero'].variant ?? 'primary',
-  colorVariant = Props['Hero'].colorVariant ?? 'main',
+  variant = HeroWrapper.props.variant ?? 'primary',
+  colorVariant = HeroWrapper.props.colorVariant ?? 'main',
   icon,
 }: HeroProps) => {
   return (
     <Section className={`${styles.section} section-hero`}>
-      <HeroWrapper
-        {...Props['Hero']}
+      <HeroWrapper.Component
+        {...HeroWrapper.props}
         variant={variant}
         colorVariant={colorVariant}
       >
-        <HeroImage {...Props['HeroImage']}>
+        <HeroImage.Component {...HeroImage.props}>
           <Image
             loading="eager"
             src={image.src}
@@ -52,16 +55,16 @@ const Hero = ({
             height={240}
             sizes="(max-width: 360px) 50vw, (max-width: 768px) 90vw, 50vw"
           />
-        </HeroImage>
-        <HeroHeader
+        </HeroImage.Component>
+        <HeroHeader.Component
           title={title}
           subtitle={subtitle}
           link={link?.url}
           linkText={link?.text}
           icon={icon}
-          {...Props['HeroHeader']}
+          {...HeroHeader.props}
         />
-      </HeroWrapper>
+      </HeroWrapper.Component>
     </Section>
   )
 }

package/src/components/sections/Hero/Overrides.tsx

@@ -4,29 +4,17 @@ import {
   HeroHeader as UIHeroHeader,
 } from '@faststore/ui'
 
-import HeroCustomizations from 'src/customizations/components/overrides/Hero'
+import { getSectionOverrides } from 'src/utils/overrides'
+import { override } from 'src/customizations/components/overrides/Hero'
+import type { HeroOverrideDefinition } from 'src/typings/overrides'
 
-const heroComponentsCustomization = {}
+const { Hero, HeroImage, HeroHeader } = getSectionOverrides(
+  {
+    Hero: UIHero,
+    HeroImage: UIHeroImage,
+    HeroHeader: UIHeroHeader,
+  },
+  override as HeroOverrideDefinition
+)
 
-const heroPropsCustomization = {} as any
-
-Object.entries(HeroCustomizations.components).forEach(([key, value]) => {
-  if (value.Component) {
-    heroComponentsCustomization[key] = value.Component
-  }
-})
-
-Object.entries(HeroCustomizations.components).forEach(([key, value]) => {
-  if (value.props) {
-    heroPropsCustomization[key] = value.props
-  }
-})
-
-const Components = {
-  Hero: UIHero,
-  HeroImage: UIHeroImage,
-  HeroHeader: UIHeroHeader,
-  ...heroComponentsCustomization,
-}
-
-export { Components, heroPropsCustomization as Props }
+export { Hero, HeroImage, HeroHeader }

package/src/components/sections/Navbar/Overrides.tsx

@@ -12,37 +12,49 @@ import {
   IconButton as UIIconButton,
 } from '@faststore/ui'
 
-import NavbarCustomizations from 'src/customizations/components/overrides/Navbar'
+import { getSectionOverrides } from 'src/utils/overrides'
+import { override } from 'src/customizations/components/overrides/Navbar'
+import type { NavbarOverrideDefinition } from 'src/typings/overrides'
 
-const navbarComponentsCustomization = {}
+const {
+  Navbar,
+  NavbarLinks,
+  NavbarLinksList,
+  NavbarSlider,
+  NavbarSliderHeader,
+  NavbarSliderContent,
+  NavbarSliderFooter,
+  NavbarHeader,
+  NavbarRow,
+  NavbarButtons,
+  IconButton,
+} = getSectionOverrides(
+  {
+    Navbar: UINavbar,
+    NavbarLinks: UINavbarLinks,
+    NavbarLinksList: UINavbarLinksList,
+    NavbarSlider: UINavbarSlider,
+    NavbarSliderHeader: UINavbarSliderHeader,
+    NavbarSliderContent: UINavbarSliderContent,
+    NavbarSliderFooter: UINavbarSliderFooter,
+    NavbarHeader: UINavbarHeader,
+    NavbarRow: UINavbarRow,
+    NavbarButtons: UINavbarButtons,
+    IconButton: UIIconButton,
+  },
+  override as NavbarOverrideDefinition
+)
 
-const navbarPropsCustomization = {} as any
-
-Object.entries(NavbarCustomizations.components).forEach(([key, value]) => {
-  if (value.Component) {
-    navbarComponentsCustomization[key] = value.Component
-  }
-})
-
-Object.entries(NavbarCustomizations.components).forEach(([key, value]) => {
-  if (value.props) {
-    navbarPropsCustomization[key] = value.props
-  }
-})
-
-const Components = {
-  Navbar: UINavbar,
-  NavbarLinks: UINavbarLinks,
-  NavbarLinksList: UINavbarLinksList,
-  NavbarSlider: UINavbarSlider,
-  NavbarSliderHeader: UINavbarSliderHeader,
-  NavbarSliderContent: UINavbarSliderContent,
-  NavbarSliderFooter: UINavbarSliderFooter,
-  NavbarHeader: UINavbarHeader,
-  NavbarRow: UINavbarRow,
-  NavbarButtons: UINavbarButtons,
-  IconButton: UIIconButton,
-  ...navbarComponentsCustomization,
+export {
+  Navbar,
+  NavbarLinks,
+  NavbarLinksList,
+  NavbarSlider,
+  NavbarSliderHeader,
+  NavbarSliderContent,
+  NavbarSliderFooter,
+  NavbarHeader,
+  NavbarRow,
+  NavbarButtons,
+  IconButton,
 }
-
-export { Components, navbarPropsCustomization as Props }

package/src/components/sections/Newsletter/Overrides.tsx

@@ -4,32 +4,34 @@ import {
   Icon as UIIcon,
 } from '@faststore/ui'
 
-import NewsletterCustomizations from 'src/customizations/components/overrides/Newsletter'
+import { getSectionOverrides } from 'src/utils/overrides'
+import { override } from 'src/customizations/components/overrides/Newsletter'
+import type { NewsletterOverrideDefinition } from 'src/typings/overrides'
 
-const newsletterComponentsCustomization = {}
+const {
+  ToastIconSuccess,
+  ToastIconError,
+  HeaderIcon,
+  InputFieldName,
+  InputFieldEmail,
+  Button,
+} = getSectionOverrides(
+  {
+    ToastIconSuccess: UIIcon,
+    ToastIconError: UIIcon,
+    HeaderIcon: UIIcon,
+    InputFieldName: UIInputField,
+    InputFieldEmail: UIInputField,
+    Button: UIButton,
+  },
+  override as NewsletterOverrideDefinition
+)
 
-const newsletterPropsCustomization = {} as any
-
-Object.entries(NewsletterCustomizations.components).forEach(([key, value]) => {
-  if (value.Component) {
-    newsletterComponentsCustomization[key] = value.Component
-  }
-})
-
-Object.entries(NewsletterCustomizations.components).forEach(([key, value]) => {
-  if (value.props) {
-    newsletterPropsCustomization[key] = value.props
-  }
-})
-
-const Components = {
-  ToastIconSuccess: UIIcon,
-  ToastIconError: UIIcon,
-  HeaderIcon: UIIcon,
-  InputFieldName: UIInputField,
-  InputFieldEmail: UIInputField,
-  Button: UIButton,
-  ...newsletterComponentsCustomization,
+export {
+  ToastIconSuccess,
+  ToastIconError,
+  HeaderIcon,
+  InputFieldName,
+  InputFieldEmail,
+  Button,
 }
-
-export { Components, newsletterPropsCustomization as Props }