@faststore/core 2.1.33 → 2.1.36

package/.turbo/turbo-build.log

@@ -21,25 +21,25 @@ info  - Generating static pages (7/7)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      3.23 kB         197 kB
+┌ ● /                                      3.16 kB         197 kB
 ├   /_app                                  0 B            77.9 kB
-├ ● /[...slug]                             4.14 kB         209 kB
+├ ● /[...slug]                             4.06 kB         208 kB
 ├   └ css/d67fbe2a613293c1.css             1.84 kB
-├ ● /[slug]/p                              11 kB           205 kB
+├ ● /[slug]/p                              10.9 kB         205 kB
 ├   └ css/5972921daee792bb.css             11.3 kB
-├ ○ /404                                   1.28 kB         114 kB
-├ ● /500                                   1.3 kB          114 kB
+├ ○ /404                                   1.19 kB         114 kB
+├ ● /500                                   1.21 kB         114 kB
 ├ ● /account                               670 B           113 kB
 ├ λ /api/graphql                           0 B            77.9 kB
 ├ λ /api/preview                           0 B            77.9 kB
 ├ ● /checkout                              657 B           113 kB
-├ ● /login                                 1.2 kB          114 kB
+├ ● /login                                 1.08 kB         113 kB
 └ ● /s                                     4.55 kB         127 kB
 + First Load JS shared by all              80.7 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-fd466221927468fd.js        23.9 kB
   ├ chunks/pages/_app-babcc4d7b80d8f4a.js  6.38 kB
-  ├ chunks/webpack-e665ad2f80471d73.js     2.29 kB
+  ├ chunks/webpack-73cade94715ad9e1.js     2.3 kB
   └ css/208b7dd52a0981bd.css               2.8 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.1.33",
+  "version": "2.1.36",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -29,7 +29,7 @@
     "@envelop/graphql-jit": "^1.1.1",
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
-    "@faststore/api": "^2.1.33",
+    "@faststore/api": "^2.1.36",
     "@faststore/components": "^2.1.33",
     "@faststore/graphql-utils": "^2.1.33",
     "@faststore/sdk": "^2.1.33",
@@ -110,5 +110,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "0fae375451465b5d4cc7581d6656c61518bf9e10"
+  "gitHead": "2bb75febbcbdc8c114d3f0912db8502840851440"
 }

package/src/components/common/Alert/Alert.tsx

@@ -1,15 +1,13 @@
 import type { PropsWithChildren, ReactNode } from 'react'
 import { useCallback, useState } from 'react'
 
-import { Alert as UIAlert, AlertProps as UIAlertProps } from '@faststore/ui'
+import { AlertProps as UIAlertProps } from '@faststore/ui'
 import { mark } from 'src/sdk/tests/mark'
 
 import Section from 'src/components/sections/Section/Section'
 import styles from './section.module.scss'
 
-import { Components, Props } from 'src/components/sections/Alert/Overrides'
-
-const { Alert: AlertWrapper } = Components
+import { Alert as AlertWrapper } from 'src/components/sections/Alert/Overrides'
 
 export interface AlertProps extends UIAlertProps {
   /**
@@ -38,15 +36,14 @@ function Alert({
 
   return (
     <Section className={`${styles.section} section-alert`}>
-      <AlertWrapper
-        {...Props['Alert']}
+      <AlertWrapper.Component
+        {...otherProps}
         // Dynamic props, shouldn't be overridable
         // This decision can be reviewed later if needed
         onClose={onAlertClose}
-        {...otherProps}
       >
         {content ?? children}
-      </AlertWrapper>
+      </AlertWrapper.Component>
     </Section>
   )
 }

package/src/components/navigation/Navbar/Navbar.tsx

@@ -15,15 +15,13 @@ import { ButtonSignIn } from 'src/components/ui/Button'
 
 import type { NavbarProps as SectionNavbarProps } from '../../sections/Navbar'
 
-import { Components, Props } from 'src/components/sections/Navbar/Overrides'
-
-const {
-  Navbar: NavbarWrapper,
+import {
+  Navbar as NavbarWrapper,
   NavbarHeader,
   NavbarRow,
   NavbarButtons,
   IconButton,
-} = Components
+} from 'src/components/sections/Navbar/Overrides'
 
 export interface NavbarProps {
   /**
@@ -77,10 +75,7 @@ function Navbar({
   home: { label: homeLabel },
   signIn: { button: signInButton },
   menu: {
-    icon: {
-      icon: menuIcon,
-      alt: menuIconAlt = Props['IconButton']['aria-label'],
-    },
+    icon: { icon: menuIcon, alt: menuIconAlt = IconButton.props['aria-label'] },
   },
 }: NavbarProps) {
   const scrollDirection = useScrollDirection()
@@ -99,16 +94,19 @@ function Navbar({
   }, [])
 
   return (
-    <NavbarWrapper scrollDirection={scrollDirection} {...Props['Navbar']}>
-      <NavbarHeader {...Props['NavbarHeader']}>
-        <NavbarRow {...Props['NavbarRow']}>
+    <NavbarWrapper.Component
+      scrollDirection={scrollDirection}
+      {...NavbarWrapper.props}
+    >
+      <NavbarHeader.Component {...NavbarHeader.props}>
+        <NavbarRow.Component {...NavbarRow.props}>
           {!searchExpanded && (
             <>
-              <IconButton
+              <IconButton.Component
                 data-fs-navbar-button-menu
                 onClick={openNavbar}
                 icon={<UIIcon name={menuIcon} width={32} height={32} />}
-                {...Props['IconButton']}
+                {...IconButton.props}
                 aria-label={menuIconAlt}
               />
               <Link
@@ -125,17 +123,19 @@ function Navbar({
 
           <SearchInput sort={searchInput?.sort} />
 
-          <NavbarButtons
+          <NavbarButtons.Component
             searchExpanded={searchExpanded}
-            {...Props['NavbarButtons']}
+            {...NavbarButtons.props}
           >
             {searchExpanded && (
-              <IconButton
+              <IconButton.Component
                 data-fs-button-collapse
                 aria-label="Collapse search bar"
                 icon={<UIIcon name="CaretLeft" width={32} height={32} />}
+                {...IconButton.props}
+                // Dynamic props, shouldn't be overridable
+                // This decision can be reviewed later if needed
                 onClick={handleCollapseSearch}
-                {...Props['IconButton']}
               />
             )}
 
@@ -153,9 +153,9 @@ function Navbar({
             <ButtonSignIn {...signInButton} />
 
             <CartToggle {...cart} />
-          </NavbarButtons>
-        </NavbarRow>
-      </NavbarHeader>
+          </NavbarButtons.Component>
+        </NavbarRow.Component>
+      </NavbarHeader.Component>
 
       <NavbarLinks links={links} region={region} className="hidden-mobile" />
 
@@ -168,7 +168,7 @@ function Navbar({
           region={region}
         />
       )}
-    </NavbarWrapper>
+    </NavbarWrapper.Component>
   )
 }
 

package/src/components/navigation/NavbarLinks/NavbarLinks.tsx

@@ -9,9 +9,10 @@ import type { NavbarProps } from 'src/components/navigation/Navbar'
 
 import { mark } from 'src/sdk/tests/mark'
 
-import { Components, Props } from 'src/components/sections/Navbar/Overrides'
-
-const { NavbarLinks: NavbarLinksWrapper, NavbarLinksList } = Components
+import {
+  NavbarLinks as NavbarLinksWrapper,
+  NavbarLinksList,
+} from 'src/components/sections/Navbar/Overrides'
 
 interface NavbarLinksProps extends UINavbarLinksProps {
   links: NavbarProps['links']
@@ -29,12 +30,12 @@ function NavbarLinks({
   ...otherProps
 }: NavbarLinksProps) {
   return (
-    <NavbarLinksWrapper {...otherProps} {...Props['NavbarLinks']}>
+    <NavbarLinksWrapper.Component {...otherProps} {...NavbarLinksWrapper.props}>
       <div data-fs-navbar-links-wrapper data-fs-content="navbar">
         {shouldDisplayRegion && (
           <RegionButton icon={regionIcon} label={regionLabel} />
         )}
-        <NavbarLinksList {...Props['NavbarLinksList']}>
+        <NavbarLinksList.Component {...NavbarLinksList.props}>
           {links.map(({ url, text }) => (
             <UINavbarLinksListItem key={text}>
               <Link variant="display" href={url} onClick={onClickLink}>
@@ -42,9 +43,9 @@ function NavbarLinks({
               </Link>
             </UINavbarLinksListItem>
           ))}
-        </NavbarLinksList>
+        </NavbarLinksList.Component>
       </div>
-    </NavbarLinksWrapper>
+    </NavbarLinksWrapper.Component>
   )
 }
 

package/src/components/navigation/NavbarSlider/NavbarSlider.tsx

@@ -11,14 +11,12 @@ import type { NavbarProps } from '../Navbar'
 
 import styles from '../../sections/Navbar/section.module.scss'
 
-import { Components, Props } from 'src/components/sections/Navbar/Overrides'
-
-const {
-  NavbarSlider: NavbarSliderWrapper,
+import {
+  NavbarSlider as NavbarSliderWrapper,
   NavbarSliderHeader,
   NavbarSliderContent,
   NavbarSliderFooter,
-} = Components
+} from 'src/components/sections/Navbar/Overrides'
 
 interface NavbarSliderProps {
   logo: NavbarProps['logo']
@@ -39,16 +37,19 @@ function NavbarSlider({
   const { fade, fadeOut } = useFadeEffect()
 
   return (
-    <NavbarSliderWrapper
+    <NavbarSliderWrapper.Component
       fade={fade}
       onDismiss={fadeOut}
       overlayProps={{
         className: `section ${styles.section} section-navbar-slider`,
       }}
       onTransitionEnd={() => fade === 'out' && closeNavbar()}
-      {...Props['NavbarSlider']}
+      {...NavbarSliderWrapper.props}
     >
-      <NavbarSliderHeader onClose={fadeOut} {...Props['NavbarSliderHeader']}>
+      <NavbarSliderHeader.Component
+        onClose={fadeOut}
+        {...NavbarSliderWrapper.props}
+      >
         <Link
           href="/"
           onClick={fadeOut}
@@ -58,16 +59,16 @@ function NavbarSlider({
         >
           <Logo {...logo} />
         </Link>
-      </NavbarSliderHeader>
-      <NavbarSliderContent {...Props['NavbarSliderContent']}>
+      </NavbarSliderHeader.Component>
+      <NavbarSliderContent.Component {...NavbarSliderContent.props}>
         <NavbarLinks onClickLink={fadeOut} links={links} region={region} />
-      </NavbarSliderContent>
-      <NavbarSliderFooter {...Props['NavbarSliderFooter']}>
+      </NavbarSliderContent.Component>
+      <NavbarSliderFooter.Component {...NavbarSliderFooter.props}>
         <Suspense fallback={<ButtonSignInFallback />}>
           <ButtonSignIn {...signInButton} />
         </Suspense>
-      </NavbarSliderFooter>
-    </NavbarSliderWrapper>
+      </NavbarSliderFooter.Component>
+    </NavbarSliderWrapper.Component>
   )
 }
 

package/src/components/product/ProductGrid/ProductGrid.tsx

@@ -7,12 +7,7 @@ import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
 
 import { ProductCardProps } from '../ProductCard'
 
-import {
-  Components,
-  Props,
-} from 'src/components/sections/ProductGallery/Overrides'
-
-const { __experimentalProductCard: ProductCard } = Components
+import { __experimentalProductCard as ProductCard } from 'src/components/sections/ProductGallery/Overrides'
 
 interface Props {
   /**
@@ -35,8 +30,8 @@ function ProductGrid({
   page,
   pageSize,
   productCard: {
-    showDiscountBadge = Props['ProductCard'].showDiscountBadge,
-    bordered = Props['ProductCard'].bordered,
+    showDiscountBadge = ProductCard.props.showDiscountBadge,
+    bordered = ProductCard.props.bordered,
   } = {},
 }: Props) {
   const aspectRatio = 1
@@ -49,14 +44,14 @@ function ProductGrid({
       <UIProductGrid>
         {products.map(({ node: product }, idx) => (
           <UIProductGridItem key={`${product.id}`}>
-            <ProductCard
+            <ProductCard.Component
               aspectRatio={aspectRatio}
               imgProps={{
                 width: 150,
                 height: 150,
                 sizes: '30vw',
               }}
-              {...Props['__experimentalProductCard']}
+              {...ProductCard.props}
               bordered={showDiscountBadge}
               showDiscountBadge={bordered}
               product={product}

package/src/components/region/RegionBar/RegionBar.tsx

@@ -3,9 +3,11 @@ import type { RegionBarProps as UIRegionBarProps } from '@faststore/ui'
 import { useUI } from '@faststore/ui'
 import { useSession } from 'src/sdk/session'
 
-import { Components, Props } from 'src/components/sections/RegionBar/Overrides'
-
-const { RegionBar: RegionBarWrapper, LocationIcon, ButtonIcon } = Components
+import {
+  RegionBar as RegionBarWrapper,
+  LocationIcon,
+  ButtonIcon,
+} from 'src/components/sections/RegionBar/Overrides'
 
 export interface RegionBarProps {
   /**
@@ -34,25 +36,37 @@ export interface RegionBarProps {
 
 function RegionBar({
   icon: {
-    icon: locationIcon = Props['LocationIcon'].name,
-    alt: locationIconAlt = Props['LocationIcon']['aria-label'],
+    icon: locationIcon = LocationIcon.props.name,
+    alt: locationIconAlt = LocationIcon.props['aria-label'],
   },
   buttonIcon: {
-    icon: buttonIcon = Props['ButtonIcon'].name,
-    alt: buttonIconAlt = Props['ButtonIcon']['aria-label'],
+    icon: buttonIcon = ButtonIcon.props.name,
+    alt: buttonIconAlt = ButtonIcon.props['aria-label'],
   },
-  label = Props['RegionBar'].label,
-  editLabel = Props['RegionBar'].editLabel,
+  label = RegionBarWrapper.props.label,
+  editLabel = RegionBarWrapper.props.editLabel,
   ...otherProps
 }: RegionBarProps) {
   const { openModal } = useUI()
   const { postalCode } = useSession()
 
   return (
-    <RegionBarWrapper
-      icon={<LocationIcon name={locationIcon} aria-label={locationIconAlt} />}
-      buttonIcon={<ButtonIcon name={buttonIcon} aria-label={buttonIconAlt} />}
-      {...Props['RegionBar']}
+    <RegionBarWrapper.Component
+      icon={
+        <LocationIcon.Component
+          {...LocationIcon.props}
+          name={locationIcon}
+          aria-label={locationIconAlt}
+        />
+      }
+      buttonIcon={
+        <ButtonIcon.Component
+          {...ButtonIcon.props}
+          name={buttonIcon}
+          aria-label={buttonIconAlt}
+        />
+      }
+      {...RegionBarWrapper.props}
       label={label}
       editLabel={editLabel}
       // Dynamic props shouldn't be overridable

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 }