@faststore/core 2.2.51 → 2.2.53

package/.turbo/turbo-build.log

@@ -1,7 +1,7 @@
 $ yarn partytown & yarn generate && next build
 $ partytown copylib ./public/~partytown
-$ faststore generate-graphql -c
 Partytown lib copied to: /home/runner/work/faststore/faststore/packages/core/public/~partytown
+$ faststore generate-graphql -c
 success - GraphQL schema, types, and optimizations successfully generated 🎉
 warn  - You have enabled experimental feature (scrollRestoration) in next.config.js.
 warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
@@ -38,27 +38,28 @@ info  - Generating static pages (7/7)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      3.2 kB          128 kB
+┌ ● /                                      2.42 kB         128 kB
+├   └ css/d456bfc64bc489a2.css             5.47 kB
 ├   /_app                                  0 B            83.8 kB
-├ ● /[...slug]                             4.32 kB         140 kB
-├   └ css/527e334fa69cf40a.css             1.85 kB
+├ ● /[...slug]                             3.56 kB         140 kB
+├   └ css/4e42cc999ad62b57.css             5.9 kB
 ├ ● /[slug]/p                              10.9 kB         136 kB
 ├   └ css/d7bbfbd552f407e9.css             11.3 kB
-├ ○ /404                                   1.19 kB         112 kB
-├ ● /500                                   1.21 kB         112 kB
-├ ● /account                               676 B           111 kB
+├ ○ /404                                   1.19 kB         113 kB
+├ ● /500                                   1.21 kB         113 kB
+├ ● /account                               677 B           112 kB
 ├ λ /api/graphql                           0 B            83.8 kB
 ├ λ /api/health/live                       0 B            83.8 kB
 ├ λ /api/health/ready                      0 B            83.8 kB
 ├ λ /api/preview                           0 B            83.8 kB
-├ ● /checkout                              661 B           111 kB
-├ ● /login                                 1.14 kB         112 kB
-└ ● /s                                     4.57 kB         126 kB
+├ ● /checkout                              661 B           112 kB
+├ ● /login                                 1.14 kB         113 kB
+└ ● /s                                     4.57 kB         127 kB
 + First Load JS shared by all              86.8 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-e4e873ee741162eb.js        24.2 kB
   ├ chunks/pages/_app-30b9666307e4b3b1.js  12.1 kB
-  ├ chunks/webpack-86d49ac4b093b8cf.js     2.27 kB
+  ├ chunks/webpack-ba86ae9a63f61805.js     2.25 kB
   └ css/5d1f64b61ea581f4.css               3.05 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-test.log

@@ -1,23 +1,23 @@
 $ jest
-PASS test/server/index.test.ts (20.951 s)
+PASS test/server/index.test.ts (21.683 s)
   FastStore GraphQL Layer
     @faststore/api
-      ✓ should return a valid GraphQL schema (6 ms)
-      ✓ should return a valid GraphQL schema contain all expected types (9 ms)
+      ✓ should return a valid GraphQL schema (38 ms)
+      ✓ should return a valid GraphQL schema contain all expected types (13 ms)
       ✓ should return a valid GraphQL schema contain all expected queries (1 ms)
       ✓ should return a valid GraphQL schema contain all expected mutations
     VTEX API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (5 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (20 ms)
     Third Party API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (4 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (7 ms)
     Final Schema after merging
-      ✓ should return a valid merged GraphQL schema (36 ms)
+      ✓ should return a valid merged GraphQL schema (84 ms)
     Envelop
-      ✓ should exist with its plugins (43 ms)
-      ✓ should handle options and execute (545 ms)
+      ✓ should exist with its plugins (74 ms)
+      ✓ should handle options and execute (333 ms)
 
 Test Suites: 1 passed, 1 total
 Tests:       9 passed, 9 total
 Snapshots:   0 total
-Time:        21.022 s
+Time:        21.826 s
 Ran all test suites.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.2.51",
+  "version": "2.2.53",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -37,11 +37,11 @@
     "@envelop/graphql-jit": "^1.1.1",
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
-    "@faststore/api": "^2.2.50",
-    "@faststore/components": "^2.2.45",
-    "@faststore/graphql-utils": "^2.2.45",
-    "@faststore/sdk": "^2.2.45",
-    "@faststore/ui": "^2.2.45",
+    "@faststore/api": "^2.2.52",
+    "@faststore/components": "^2.2.52",
+    "@faststore/graphql-utils": "^2.2.52",
+    "@faststore/sdk": "^2.2.52",
+    "@faststore/ui": "^2.2.52",
     "@graphql-codegen/cli": "^3.3.1",
     "@graphql-codegen/typescript": "^3.0.4",
     "@graphql-codegen/typescript-operations": "^3.0.4",
@@ -78,8 +78,8 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.12.1",
     "@envelop/testing": "^6.0.0",
-    "@faststore/cli": "^2.2.45",
-    "@faststore/eslint-config": "^2.2.45",
+    "@faststore/cli": "^2.2.52",
+    "@faststore/eslint-config": "^2.2.52",
     "@faststore/lighthouse": "^1.12.32",
     "@lhci/cli": "^0.9.0",
     "@testing-library/cypress": "^10.0.1",
@@ -123,5 +123,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "bda804eedeae69d9ab0929eb160a730548ba0f45"
+  "gitHead": "03d9d8f9a33f655c137c03f3a6991a94c713bd47"
 }

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

@@ -1,4 +1,5 @@
-import BannerText, { BannerTextProps } from 'src/components/sections/BannerText'
+import { BannerTextProps } from 'src/components/sections/BannerText'
+import { OverriddenDefaultBannerText as BannerText } from 'src/components/sections/BannerText/OverriddenDefaultBannerText'
 import Newsletter, { NewsletterProps } from 'src/components/sections/Newsletter'
 import Section from '../Section'
 import styles from './section.module.scss'

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

@@ -3,10 +3,7 @@ import {
   BannerTextContentProps as UIBannerTextContentProps,
 } from '@faststore/ui'
 
-import {
-  BannerText as BannerTextWrapper,
-  BannerTextContent,
-} from 'src/components/sections/BannerText/Overrides'
+import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 import Section from '../Section'
 
 import styles from './section.module.scss'
@@ -27,29 +24,32 @@ export interface BannerTextProps {
 function BannerText({
   title,
   caption,
-  link: {
-    url: linkUrl = BannerTextContent.props.link,
-    text: linkText = BannerTextContent.props.linkText,
-    linkTargetBlank: linkTargetBlank = BannerTextContent.props.linkTargetBlank,
-  },
-  variant = BannerTextWrapper.props.variant ?? 'primary',
-  colorVariant = BannerTextWrapper.props.colorVariant ?? 'main',
+  link: { url: linkUrl, text: linkText, linkTargetBlank },
+  variant,
+  colorVariant,
 }: BannerTextProps) {
+  const { BannerText: BannerTextWrapper, BannerTextContent } =
+    useOverrideComponents<'BannerText'>()
+
   return (
     <Section className={`${styles.section} section-banner layout__section`}>
       <div className="layout__content">
         <BannerTextWrapper.Component
           {...BannerTextWrapper.props}
-          variant={variant}
-          colorVariant={colorVariant}
+          variant={variant ?? BannerTextWrapper.props.variant ?? 'primary'}
+          colorVariant={
+            colorVariant ?? BannerTextWrapper.props.colorVariant ?? 'main'
+          }
         >
           <BannerTextContent.Component
             {...BannerTextContent.props}
             title={title}
             caption={caption}
-            link={linkUrl}
-            linkText={linkText}
-            linkTargetBlank={linkTargetBlank}
+            link={linkUrl ?? BannerTextContent.props.link}
+            linkText={linkText ?? BannerTextContent.props.linkText}
+            linkTargetBlank={
+              linkTargetBlank ?? BannerTextContent.props.linkTargetBlank
+            }
           />
         </BannerTextWrapper.Component>
       </div>

package/src/components/sections/BannerText/DefaultComponents.ts

@@ -0,0 +1,9 @@
+import {
+  BannerText as UIBannerText,
+  BannerTextContent as UIBannerTextContent,
+} from '@faststore/ui'
+
+export const BannerTextDefaultComponents = {
+  BannerText: UIBannerText,
+  BannerTextContent: UIBannerTextContent,
+} as const

package/src/components/sections/BannerText/OverriddenDefaultBannerText.ts

@@ -0,0 +1,12 @@
+import { override } from 'src/customizations/src/components/overrides/BannerText'
+import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
+import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
+
+/**
+ * This component exists to support overrides 1.0
+ *
+ * This allows users to override the default BannerText section present in the Headless CMS
+ */
+export const OverriddenDefaultBannerText = getOverriddenSection(
+  override as SectionOverrideDefinition<'BannerText'>
+)

package/src/components/sections/Hero/DefaultComponents.ts

@@ -0,0 +1,11 @@
+import {
+  Hero as UIHero,
+  HeroImage as UIHeroImage,
+  HeroHeader as UIHeroHeader,
+} from '@faststore/ui'
+
+export const HeroDefaultComponents = {
+  Hero: UIHero,
+  HeroImage: UIHeroImage,
+  HeroHeader: UIHeroHeader,
+}

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

@@ -4,11 +4,8 @@ import {
 } from '@faststore/ui'
 import { ReactNode } from 'react'
 import { Image } from 'src/components/ui/Image'
-import {
-  Hero as HeroWrapper,
-  HeroImage,
-  HeroHeader,
-} from 'src/components/sections/Hero/Overrides'
+
+import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
 import Section from '../Section'
 
@@ -36,16 +33,22 @@ const Hero = ({
   title,
   subtitle,
   image,
-  variant = HeroWrapper.props.variant ?? 'primary',
-  colorVariant = HeroWrapper.props.colorVariant ?? 'main',
+  variant,
+  colorVariant,
   icon,
 }: HeroProps) => {
+  const {
+    Hero: HeroWrapper,
+    HeroImage,
+    HeroHeader,
+  } = useOverrideComponents<'Hero'>()
+
   return (
     <Section className={`${styles.section} section-hero`}>
       <HeroWrapper.Component
         {...HeroWrapper.props}
-        variant={variant}
-        colorVariant={colorVariant}
+        variant={variant ?? HeroWrapper.props.variant ?? 'primary'}
+        colorVariant={colorVariant ?? HeroWrapper.props.colorVariant ?? 'main'}
       >
         <HeroImage.Component {...HeroImage.props}>
           <Image

package/src/components/sections/Hero/OverriddenDefaultHero.ts

@@ -0,0 +1,12 @@
+import { override } from 'src/customizations/src/components/overrides/Hero'
+import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
+import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
+
+/**
+ * This component exists to support overrides 1.0
+ *
+ * This allows users to override the default Hero section present in the Headless CMS
+ */
+export const OverriddenDefaultHero = getOverriddenSection(
+  override as SectionOverrideDefinition<'Hero'>
+)

package/src/components/templates/LandingPage/LandingPage.tsx

@@ -4,11 +4,11 @@ import type { Locator } from '@vtex/client-cms'
 
 import MissingContentError from 'src/sdk/error/MissingContentError/MissingContentError'
 import RenderSections from 'src/components/cms/RenderSections'
-import Hero from 'src/components/sections/Hero'
+import { OverriddenDefaultHero as Hero } from 'src/components/sections/Hero/OverriddenDefaultHero'
 import Incentives from 'src/components/sections/Incentives'
 import ProductShelf from 'src/components/sections/ProductShelf'
 import ProductTiles from 'src/components/sections/ProductTiles'
-import BannerText from 'src/components/sections/BannerText'
+import { OverriddenDefaultBannerText as BannerText } from 'src/components/sections/BannerText/OverriddenDefaultBannerText'
 import Newsletter from 'src/components/sections/Newsletter'
 import { getPage } from 'src/server/cms'
 import type { PageContentType } from 'src/server/cms'

package/src/components/templates/ProductListingPage/ProductListing.tsx

@@ -1,6 +1,6 @@
 import type { ServerCollectionPageQueryQuery } from '@generated/graphql'
 import Breadcrumb from 'src/components/sections/Breadcrumb'
-import Hero from 'src/components/sections/Hero'
+import { OverriddenDefaultHero as Hero } from 'src/components/sections/Hero/OverriddenDefaultHero'
 import ProductGallery from 'src/components/sections/ProductGallery'
 import ProductShelf from 'src/components/sections/ProductShelf'
 import ScrollToTopButton from 'src/components/sections/ScrollToTopButton'

package/src/pages/[slug]/p.tsx

@@ -12,7 +12,7 @@ import type {
 } from '@generated/graphql'
 import RenderSections from 'src/components/cms/RenderSections'
 import BannerNewsletter from 'src/components/sections/BannerNewsletter/BannerNewsletter'
-import BannerText from 'src/components/sections/BannerText'
+import { OverriddenDefaultBannerText as BannerText } from 'src/components/sections/BannerText/OverriddenDefaultBannerText'
 import Breadcrumb from 'src/components/sections/Breadcrumb'
 import CrossSellingShelf from 'src/components/sections/CrossSellingShelf'
 import ProductDetails from 'src/components/sections/ProductDetails'

package/src/pages/index.tsx

@@ -4,8 +4,8 @@ import { NextSeo, SiteLinksSearchBoxJsonLd } from 'next-seo'
 import type { ComponentType } from 'react'
 
 import RenderSections from 'src/components/cms/RenderSections'
-import BannerText from 'src/components/sections/BannerText'
-import Hero from 'src/components/sections/Hero'
+import { OverriddenDefaultBannerText as BannerText } from 'src/components/sections/BannerText/OverriddenDefaultBannerText'
+import { OverriddenDefaultHero as Hero } from 'src/components/sections/Hero/OverriddenDefaultHero'
 import Incentives from 'src/components/sections/Incentives'
 import Newsletter from 'src/components/sections/Newsletter'
 import ProductShelf from 'src/components/sections/ProductShelf'

package/src/sdk/overrides/getOverriddenSection.tsx

@@ -21,8 +21,7 @@ function createOverriddenSection<
   sectionOverrides,
   className,
 }: {
-  /** This type wizardry is here because the props won't behave correctly if done directly: (typeof Sections)[SectionName] */
-  Section: ComponentType<ComponentProps<(typeof Sections)[SectionName]>>
+  Section: (typeof Sections)[SectionName]
   sectionOverrides: OverriddenComponents<SectionName>
   className?: string
 }) {
@@ -31,9 +30,12 @@ function createOverriddenSection<
   return function OverriddenSection(
     props: React.ComponentProps<typeof Section>
   ) {
+    /** This type wizardry is here because the props won't behave correctly if nothing is done */
+    const SectionComponent = Section as ComponentType<typeof props>
+
     return (
       <OverrideProvider value={overrideContextValue}>
-        <Section {...props} />
+        <SectionComponent {...props} />
       </OverrideProvider>
     )
   }

package/src/sdk/overrides/sections.tsx

@@ -1,11 +1,17 @@
 import Alert from '../../components/sections/Alert'
+import Hero from '../../components/sections/Hero'
+import BannerText from '../../components/sections/BannerText'
 
 import type { DefaultSectionComponentsDefinitions } from '../../typings/overridesDefinition'
 import type { SectionsOverrides } from '../../typings/overrides'
 import { AlertDefaultComponents } from '../../components/sections/Alert/DefaultComponents'
+import { HeroDefaultComponents } from '../../components/sections/Hero/DefaultComponents'
+import { BannerTextDefaultComponents } from '../../components/sections/BannerText/DefaultComponents'
 
 export const Sections = {
   Alert,
+  Hero,
+  BannerText,
 }
 
 export const DefaultComponents: Partial<
@@ -15,4 +21,6 @@ export const DefaultComponents: Partial<
   >
 > = {
   Alert: AlertDefaultComponents,
+  Hero: HeroDefaultComponents,
+  BannerText: BannerTextDefaultComponents,
 }

package/src/typings/overrides.ts

@@ -47,7 +47,7 @@ export type SectionOverride = {
 }[keyof SectionsOverrides]
 
 /** TODO: every use of this type should be replaced by SectionsOverrides after all sections are supported */
-export type SupportedSectionsOverridesV2 = Pick<SectionsOverrides, 'Alert'>
+export type SupportedSectionsOverridesV2 = Pick<SectionsOverrides, 'Alert' | 'Hero' | 'BannerText'>
 
 /**
  * Originally, these types were defined in their respective Overrides file