@faststore/core 2.0.173-alpha.0 → 2.0.175-alpha.0

package/.turbo/turbo-build.log

@@ -21,27 +21,27 @@ info  - Generating static pages (7/7)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      3.1 kB          125 kB
-├   └ css/13a4da555ff5e3be.css             7.19 kB
+┌ ● /                                      3.47 kB         126 kB
+├   └ css/c7fc1f563fa33060.css             7.18 kB
 ├   /_app                                  0 B            77.8 kB
-├ ● /[...slug]                             10.1 kB         133 kB
+├ ● /[...slug]                             10.4 kB         134 kB
 ├   └ css/6e41f1b6078c14c1.css             7.9 kB
-├ ● /[slug]/p                              11.7 kB         134 kB
-├   └ css/c6f97f692b2efad9.css             11 kB
+├ ● /[slug]/p                              11.9 kB         135 kB
+├   └ css/8988ac07eb0af0ca.css             11 kB
 ├ ○ /404                                   1.09 kB         113 kB
 ├ ● /500                                   1.11 kB         113 kB
-├ ● /account                               669 B           112 kB
+├ ● /account                               668 B           113 kB
 ├ λ /api/graphql                           0 B            77.8 kB
 ├ λ /api/preview                           0 B            77.8 kB
-├ ● /checkout                              657 B           112 kB
+├ ● /checkout                              658 B           113 kB
 ├ ● /login                                 1.01 kB         113 kB
 └ ● /s                                     1.11 kB         124 kB
 + First Load JS shared by all              80.6 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-fd466221927468fd.js        23.9 kB
   ├ chunks/pages/_app-79d333aa6001a806.js  6.38 kB
-  ├ chunks/webpack-d62f6560695a4b1b.js     2.21 kB
-  └ css/e2dad288b79896b9.css               2.78 kB
+  ├ chunks/webpack-9ba6546d294eb768.js     2.21 kB
+  └ css/104f0f3ce3be32c6.css               2.79 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
 ○  (Static)  automatically rendered as static HTML (uses no initial props)

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.175-alpha.0](https://github.com/vtex/faststore/compare/v2.0.174-alpha.0...v2.0.175-alpha.0) (2023-06-02)
+
+### Features
+
+- Allows some section's component to be overridable ([#1768](https://github.com/vtex/faststore/issues/1768)) ([e19cba2](https://github.com/vtex/faststore/commit/e19cba222351510ffc91ba130ed61e857e9e6bb5))
+
 ## 2.0.173-alpha.0 (2023-06-01)
 
 ### Chores

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.173-alpha.0",
+  "version": "2.0.175-alpha.0",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -30,10 +30,10 @@
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
     "@faststore/api": "^2.0.173-alpha.0",
-    "@faststore/components": "^2.0.173-alpha.0",
+    "@faststore/components": "^2.0.175-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.173-alpha.0",
-    "@faststore/ui": "^2.0.173-alpha.0",
+    "@faststore/ui": "^2.0.175-alpha.0",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
@@ -108,5 +108,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "0f3272fc1c6c0b1c21933b8a06401baded4c3c57"
+  "gitHead": "49cd929bd62bf068a51337335d97142703f1c813"
 }

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

@@ -1,29 +1,29 @@
-import { Suspense, useRef, useState } from 'react'
-
-import {
-  Icon as UIIcon,
-  IconButton as UIIconButton,
-  Navbar as UINavbar,
-  NavbarButtons as UINavbarButtons,
-  NavbarHeader as UINavbarHeader,
-  NavbarRow as UINavbarRow,
-  useScrollDirection,
-  useUI,
-} from '@faststore/ui'
+import { useRef, useState } from 'react'
+
+import { useUI, useScrollDirection, Icon as UIIcon } from '@faststore/ui'
 
 import { mark } from 'src/sdk/tests/mark'
 
-import CartToggle from 'src/components/cart/CartToggle'
 import type { SearchInputRef } from 'src/components/search/SearchInput'
 import SearchInput from 'src/components/search/SearchInput'
-
-import Link from 'src/components/ui/Link'
+import NavbarLinks from 'src/components/navigation/NavbarLinks'
+import NavbarSlider from 'src/components/navigation/NavbarSlider'
+import CartToggle from 'src/components/cart/CartToggle'
 import Logo from 'src/components/ui/Logo'
+import Link from 'src/components/ui/Link'
 import { ButtonSignIn } from 'src/components/ui/Button'
 
 import type { NavbarProps as SectionNavbarProps } from '../../sections/Navbar'
-import NavbarLinks from '../NavbarLinks'
-import NavbarSlider from '../NavbarSlider'
+
+import { Components, Props } from 'src/components/sections/Navbar/Overrides'
+
+const {
+  Navbar: NavbarWrapper,
+  NavbarHeader,
+  NavbarRow,
+  NavbarButtons,
+  IconButton,
+} = Components
 
 export interface NavbarProps {
   /**
@@ -77,7 +77,10 @@ function Navbar({
   home: { label: homeLabel },
   signIn: { button: signInButton },
   menu: {
-    icon: { icon: menuIcon, alt: menuIconAlt },
+    icon: {
+      icon: menuIcon,
+      alt: menuIconAlt = Props['IconButton']['aria-label'],
+    },
   },
 }: NavbarProps) {
   const scrollDirection = useScrollDirection()
@@ -91,16 +94,17 @@ function Navbar({
   }
 
   return (
-    <UINavbar scrollDirection={scrollDirection}>
-      <UINavbarHeader>
-        <UINavbarRow className="layout__content">
+    <NavbarWrapper scrollDirection={scrollDirection} {...Props['Navbar']}>
+      <NavbarHeader {...Props['NavbarHeader']}>
+        <NavbarRow className="layout__content" {...Props['NavbarRow']}>
           {!searchExpanded && (
             <>
-              <UIIconButton
+              <IconButton
                 data-fs-navbar-button-menu
                 onClick={openNavbar}
-                aria-label={menuIconAlt}
                 icon={<UIIcon name={menuIcon} width={32} height={32} />}
+                {...Props['IconButton']}
+                aria-label={menuIconAlt}
               />
               <Link
                 href="/"
@@ -116,9 +120,12 @@ function Navbar({
 
           <SearchInput sort={searchInput?.sort} />
 
-          <UINavbarButtons searchExpanded={searchExpanded}>
+          <NavbarButtons
+            searchExpanded={searchExpanded}
+            {...Props['NavbarButtons']}
+          >
             {searchExpanded && (
-              <UIIconButton
+              <IconButton
                 data-fs-button-collapse
                 aria-label="Collapse search bar"
                 icon={<UIIcon name="CaretLeft" width={32} height={32} />}
@@ -126,6 +133,7 @@ function Navbar({
                   setSearchExpanded(false)
                   searchMobileRef.current?.resetSearchInput()
                 }}
+                {...Props['IconButton']}
               />
             )}
 
@@ -143,9 +151,9 @@ function Navbar({
             <ButtonSignIn {...signInButton} />
 
             <CartToggle {...cart} />
-          </UINavbarButtons>
-        </UINavbarRow>
-      </UINavbarHeader>
+          </NavbarButtons>
+        </NavbarRow>
+      </NavbarHeader>
 
       <NavbarLinks links={links} region={region} className="hidden-mobile" />
 
@@ -158,7 +166,7 @@ function Navbar({
           region={region}
         />
       )}
-    </UINavbar>
+    </NavbarWrapper>
   )
 }
 

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

@@ -1,10 +1,6 @@
 import type { AnchorHTMLAttributes } from 'react'
 
-import {
-  NavbarLinks as UINavbarLinks,
-  NavbarLinksList as UINavbarLinksList,
-  NavbarLinksListItem as UINavbarLinksListItem,
-} from '@faststore/ui'
+import { NavbarLinksListItem as UINavbarLinksListItem } from '@faststore/ui'
 import type { NavbarLinksProps as UINavbarLinksProps } from '@faststore/ui'
 
 import Link from 'src/components/ui/Link'
@@ -13,6 +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
+
 interface NavbarLinksProps extends UINavbarLinksProps {
   links: NavbarProps['links']
   region: NavbarProps['region']
@@ -29,12 +29,12 @@ function NavbarLinks({
   ...otherProps
 }: NavbarLinksProps) {
   return (
-    <UINavbarLinks {...otherProps}>
+    <NavbarLinksWrapper {...otherProps} {...Props['NavbarLinks']}>
       <div className="layout__content">
         {shouldDisplayRegion && (
           <RegionButton icon={regionIcon} label={regionLabel} />
         )}
-        <UINavbarLinksList>
+        <NavbarLinksList {...Props['NavbarLinksList']}>
           {links.map(({ url, text }) => (
             <UINavbarLinksListItem key={text}>
               <Link variant="display" href={url} onClick={onClickLink}>
@@ -42,9 +42,9 @@ function NavbarLinks({
               </Link>
             </UINavbarLinksListItem>
           ))}
-        </UINavbarLinksList>
+        </NavbarLinksList>
       </div>
-    </UINavbarLinks>
+    </NavbarLinksWrapper>
   )
 }
 

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

@@ -1,23 +1,25 @@
-import {
-  NavbarSlider as UINavbarSlider,
-  NavbarSliderContent as UINavbarSliderContent,
-  NavbarSliderFooter as UINavbarSliderFooter,
-  NavbarSliderHeader as UINavbarSliderHeader,
-  useFadeEffect,
-  useUI,
-} from '@faststore/ui'
+import { useFadeEffect, useUI } from '@faststore/ui'
 import { Suspense } from 'react'
 
 import { ButtonSignIn, ButtonSignInFallback } from 'src/components/ui/Button'
 import Link from 'src/components/ui/Link'
+import NavbarLinks from 'src/components/navigation/NavbarLinks'
 import Logo from 'src/components/ui/Logo'
 import { mark } from 'src/sdk/tests/mark'
 
-import NavbarLinks from '../NavbarLinks'
 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,
+  NavbarSliderHeader,
+  NavbarSliderContent,
+  NavbarSliderFooter,
+} = Components
+
 interface NavbarSliderProps {
   logo: NavbarProps['logo']
   home: NavbarProps['home']
@@ -37,15 +39,16 @@ function NavbarSlider({
   const { fade, fadeOut } = useFadeEffect()
 
   return (
-    <UINavbarSlider
+    <NavbarSliderWrapper
       fade={fade}
       onDismiss={fadeOut}
       overlayProps={{
         className: `section ${styles.section} section-navbar-slider`,
       }}
       onTransitionEnd={() => fade === 'out' && closeNavbar()}
+      {...Props['NavbarSlider']}
     >
-      <UINavbarSliderHeader onClose={fadeOut}>
+      <NavbarSliderHeader onClose={fadeOut} {...Props['NavbarSliderHeader']}>
         <Link
           href="/"
           onClick={fadeOut}
@@ -55,14 +58,16 @@ function NavbarSlider({
         >
           <Logo {...logo} />
         </Link>
-      </UINavbarSliderHeader>
-      <UINavbarSliderContent>
+      </NavbarSliderHeader>
+      <NavbarSliderContent {...Props['NavbarSliderContent']}>
         <NavbarLinks onClickLink={fadeOut} links={links} region={region} />
-      </UINavbarSliderContent>
-      <UINavbarSliderFooter>
-        <ButtonSignIn {...signInButton} />
-      </UINavbarSliderFooter>
-    </UINavbarSlider>
+      </NavbarSliderContent>
+      <NavbarSliderFooter {...Props['NavbarSliderFooter']}>
+        <Suspense fallback={<ButtonSignInFallback />}>
+          <ButtonSignIn {...signInButton} />
+        </Suspense>
+      </NavbarSliderFooter>
+    </NavbarSliderWrapper>
   )
 }
 

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

@@ -1,5 +1,4 @@
 import { Icon as UIIcon } from '@faststore/ui'
-import Section from '../Section'
 import UIAlert from 'src/components/common/Alert'
 
 export interface AlertProps {

package/src/components/sections/BannerNewsletter/BannerNewsletter.tsx

@@ -1,4 +1,7 @@
-import BannerText from 'src/components/ui/BannerText'
+import {
+  Banner as UIBanner,
+  BannerContent as UIBannerContent,
+} from '@faststore/ui'
 import Newsletter from '../Newsletter'
 import Section from '../Section'
 import styles from './section.module.scss'
@@ -9,14 +12,15 @@ function BannerNewsletter() {
       className={`${styles.section} section-banner-newsletter layout__content`}
     >
       <div data-fs-banner-newsletter>
-        <BannerText
-          title="Get to Know Our Next Release"
-          caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elit nisi, vehicula in turpis sit amet, posuere aliquam nisl. "
-          actionLabel="Shop Now"
-          actionPath="/"
-          variant="secondary"
-          colorVariant="light"
-        />
+        <UIBanner variant="secondary" colorVariant="light">
+          <UIBannerContent
+            title="Get to Know Our Next Release"
+            caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elit nisi, vehicula in turpis sit amet, posuere aliquam nisl. "
+            link="/"
+            linkText="Shop Now"
+          />
+        </UIBanner>
+
         <Newsletter
           title="Get News and Special Offers!"
           description="Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here."

package/src/components/sections/BannerNewsletter/section.module.scss

@@ -1,6 +1,6 @@
 .section {
   @import "@faststore/ui/src/components/atoms/Button/styles.scss";
   @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Banner/styles.scss";
+  @import "@faststore/ui/src/components/organisms/Banner/styles.scss";
   @import "@faststore/ui/src/components/organisms/BannerNewsletter/styles.scss";
 }

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

@@ -1,39 +1,50 @@
-import UIBannerText, {
-  BannerTextProps as UIBannerTextProps,
-} from 'src/components/ui/BannerText'
-import Section from '../Section'
+import {
+  BannerProps as UIBannerProps,
+  BannerContentProps as UIBannerContentProps,
+} from '@faststore/ui'
+import { Components, Props } from './Overrides'
 
+import Section from '../Section'
 import styles from './section.module.scss'
 
 export interface BannerTextProps {
-  title: string
-  caption: string
+  title: UIBannerContentProps['title']
+  caption: UIBannerContentProps['caption']
   link?: {
-    text: string
-    url: string
+    text?: string
+    url?: string
   }
-  colorVariant?: UIBannerTextProps['colorVariant']
-  variant?: UIBannerTextProps['variant']
+  colorVariant?: UIBannerProps['colorVariant']
+  variant?: UIBannerProps['variant']
 }
 
+const { Banner, BannerContent } = Components
+
 // TODO: Change actionPath and actionLabel with Link
 function BannerText({
   title,
   caption,
   link,
-  variant,
-  colorVariant = 'main',
+  variant = Props['BannerText'].variant ?? 'primary',
+  colorVariant = Props['BannerText'].colorVariant ?? 'main',
 }: BannerTextProps) {
   return (
     <Section className={`${styles.section} section-banner layout__section`}>
-      <UIBannerText
-        variant={variant}
-        title={title}
-        caption={caption}
-        actionPath={link?.url}
-        actionLabel={link?.text}
-        colorVariant={colorVariant}
-      />
+      <div className="layout__content">
+        <Banner
+          variant={variant}
+          colorVariant={colorVariant}
+          {...Props['Banner']}
+        >
+          <BannerContent
+            title={title}
+            caption={caption}
+            link={link?.url}
+            linkText={link?.text}
+            {...Props['BannerContent']}
+          />
+        </Banner>
+      </div>
     </Section>
   )
 }

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

@@ -0,0 +1,30 @@
+import {
+  Banner as UIBanner,
+  BannerContent as UIBannerContent,
+} from '@faststore/ui'
+
+import BannerTextCustomizations from 'src/customizations/components/overrides/BannerText'
+
+const bannerTextComponentsCustomization = {}
+
+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 = {
+  Banner: UIBanner,
+  BannerContent: UIBannerContent,
+  ...bannerTextComponentsCustomization,
+}
+
+export { Components, bannerTextPropsCustomization as Props }

package/src/components/sections/BannerText/section.module.scss

@@ -1,5 +1,5 @@
 .section {
   @import "@faststore/ui/src/components/atoms/Button/styles";
   @import "@faststore/ui/src/components/molecules/LinkButton/styles";
-  @import "@faststore/ui/src/components/molecules/Banner/styles";
+  @import "@faststore/ui/src/components/organisms/Banner/styles";
 }

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

@@ -0,0 +1,27 @@
+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 }

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

@@ -1,9 +1,8 @@
-import type { HeroProps as UIHeroProps } from '@faststore/ui'
 import {
-  Hero as UIHero,
-  HeroHeader as UIHeroHeader,
-  HeroImage as UIHeroImage,
+  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 Section from '../Section'
@@ -11,8 +10,8 @@ import Section from '../Section'
 import styles from './section.module.scss'
 
 export type HeroProps = {
-  title: string
-  subtitle: string
+  title: UIHeroHeaderProps['title']
+  subtitle: UIHeroHeaderProps['subtitle']
   link?: {
     text: string
     url: string
@@ -26,19 +25,25 @@ export type HeroProps = {
   icon?: ReactNode
 }
 
+const { Hero: HeroWrapper, HeroImage, HeroHeader } = Components
+
 const Hero = ({
   link,
   title,
   subtitle,
   image,
-  variant = 'primary',
-  colorVariant = 'main',
+  variant = Props['Hero'].variant ?? 'primary',
+  colorVariant = Props['Hero'].colorVariant ?? 'main',
   icon,
 }: HeroProps) => {
   return (
     <Section className={`${styles.section} section-hero`}>
-      <UIHero colorVariant={colorVariant} variant={variant}>
-        <UIHeroImage data-fs-hero-image>
+      <HeroWrapper
+        {...Props['Hero']}
+        variant={variant}
+        colorVariant={colorVariant}
+      >
+        <HeroImage {...Props['HeroImage']}>
           <Image
             loading="eager"
             src={image.src}
@@ -47,15 +52,16 @@ const Hero = ({
             height={240}
             sizes="(max-width: 360px) 50vw, (max-width: 768px) 90vw, 50vw"
           />
-        </UIHeroImage>
-        <UIHeroHeader
+        </HeroImage>
+        <HeroHeader
           title={title}
           subtitle={subtitle}
           link={link?.url}
           linkText={link?.text}
           icon={icon}
+          {...Props['HeroHeader']}
         />
-      </UIHero>
+      </HeroWrapper>
     </Section>
   )
 }

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

@@ -0,0 +1,32 @@
+import {
+  Hero as UIHero,
+  HeroImage as UIHeroImage,
+  HeroHeader as UIHeroHeader,
+} from '@faststore/ui'
+
+import HeroCustomizations from 'src/customizations/components/overrides/Hero'
+
+const heroComponentsCustomization = {}
+
+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 }

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

@@ -1,9 +1,9 @@
-import UINavbar from '../../navigation/Navbar'
-
 import Section from '../Section'
 
 import styles from './section.module.scss'
 
+import Navbar from 'src/components/navigation/Navbar'
+
 type PageLinks = {
   url: string
   text: string
@@ -51,7 +51,7 @@ export interface NavbarProps {
   }
 }
 
-function Navbar({
+function NavbarSection({
   logo,
   searchInput,
   cartIcon,
@@ -68,8 +68,8 @@ function Navbar({
   },
 }: NavbarProps) {
   return (
-    <Section className={`${styles.section} section-navbar`}>
-      <UINavbar
+    <Section as="header" className={`${styles.section} section-navbar`}>
+      <Navbar
         home={home}
         menu={menu}
         logo={logo}
@@ -87,4 +87,4 @@ function Navbar({
   )
 }
 
-export default Navbar
+export default NavbarSection