@faststore/core 2.2.50 → 2.2.52

package/.turbo/turbo-build.log

@@ -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.43 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.57 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
+├ ● /checkout                              661 B           112 kB
 ├ ● /login                                 1.14 kB         112 kB
-└ ● /s                                     4.57 kB         126 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-590d458bd6727c5b.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 (21.286 s)
+PASS test/server/index.test.ts (21.475 s)
   FastStore GraphQL Layer
     @faststore/api
-      ✓ should return a valid GraphQL schema (9 ms)
-      ✓ should return a valid GraphQL schema contain all expected types (13 ms)
+      ✓ should return a valid GraphQL schema (5 ms)
+      ✓ should return a valid GraphQL schema contain all expected types (5 ms)
       ✓ should return a valid GraphQL schema contain all expected queries (1 ms)
-      ✓ should return a valid GraphQL schema contain all expected mutations (1 ms)
+      ✓ should return a valid GraphQL schema contain all expected mutations
     VTEX API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (10 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (5 ms)
     Third Party API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (18 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (9 ms)
     Final Schema after merging
-      ✓ should return a valid merged GraphQL schema (45 ms)
+      ✓ should return a valid merged GraphQL schema (34 ms)
     Envelop
-      ✓ should exist with its plugins (44 ms)
-      ✓ should handle options and execute (530 ms)
+      ✓ should exist with its plugins (41 ms)
+      ✓ should handle options and execute (567 ms)
 
 Test Suites: 1 passed, 1 total
 Tests:       9 passed, 9 total
 Snapshots:   0 total
-Time:        21.468 s
+Time:        21.585 s
 Ran all test suites.

package/cms/faststore/sections.json

@@ -1607,6 +1607,59 @@
               "default": true
             }
           }
+        },
+        "emptyGallery": {
+          "title": "Empty Gallery",
+          "type": "object",
+          "properties": {
+            "title": {
+              "title": "Title",
+              "type": "string",
+              "default": "Nothing matches with your search"
+            },
+            "firstButton": {
+              "title": "First Button",
+              "type": "object",
+              "properties": {
+                "label": {
+                  "type": "string",
+                  "title": "Label",
+                  "default": "Browse Offers"
+                },
+                "url": {
+                  "type": "string",
+                  "title": "URL",
+                  "default": "/office"
+                },
+                "icon": {
+                  "title": "Icon",
+                  "type": "string",
+                  "default": "CircleWavyWarning"
+                }
+              }
+            },
+            "secondButton": {
+              "title": "Second Button",
+              "type": "object",
+              "properties": {
+                "label": {
+                  "type": "string",
+                  "title": "Label",
+                  "default": "Just Arrived"
+                },
+                "url": {
+                  "type": "string",
+                  "title": "URL",
+                  "default": "/technology"
+                },
+                "icon": {
+                  "title": "Icon",
+                  "type": "string",
+                  "default": "RocketLaunch"
+                }
+              }
+            }
+          }
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.2.50",
+  "version": "2.2.52",
   "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": "d89ce02086b19706719b595fcb6efd68cbc430ca"
+  "gitHead": "ac3400c44c5088f570681217c224a596b0db3e39"
 }

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/sections/ProductGallery/EmptyGallery.tsx

@@ -4,21 +4,35 @@ import {
   EmptyState as UIEmptyState,
 } from '@faststore/ui'
 
-function EmptyGallery() {
+export interface EmptyGalleryProps {
+  title?: string
+  firstButton?: {
+    label: string
+    url: string
+    icon: string
+  }
+  secondButton?: {
+    label: string
+    url: string
+    icon: string
+  }
+}
+
+function EmptyGallery({ title, firstButton, secondButton }: EmptyGalleryProps) {
   return (
     <UIEmptyState
       variant="rounded"
-      title="Nothing matches with your search"
+      title={title ?? 'Nothing matches with your search'}
       titleIcon={
         <UIIcon name="CircleWavyWarning" width={56} height={56} weight="thin" />
       }
     >
       <UILinkButton
-        href="/office"
+        href={firstButton?.url ?? '/office'}
         variant="secondary"
         icon={
           <UIIcon
-            name="CircleWavyWarning"
+            name={firstButton?.icon ?? 'CircleWavyWarning'}
             width={18}
             height={18}
             weight="bold"
@@ -26,17 +40,22 @@ function EmptyGallery() {
         }
         iconPosition="left"
       >
-        Browse Offers
+        {firstButton?.label ?? 'Browse Offers'}
       </UILinkButton>
       <UILinkButton
-        href="/technology"
+        href={secondButton?.url ?? '/technology'}
         variant="secondary"
         icon={
-          <UIIcon name="RocketLaunch" width={18} height={18} weight="bold" />
+          <UIIcon
+            name={secondButton?.icon ?? 'RocketLaunch'}
+            width={18}
+            height={18}
+            weight="bold"
+          />
         }
         iconPosition="left"
       >
-        Just Arrived
+        {secondButton?.label ?? 'Just Arrived'}
       </UILinkButton>
     </UIEmptyState>
   )

package/src/components/sections/ProductGallery/ProductGallery.tsx

@@ -4,6 +4,7 @@ import ProductGallery, {
   ProductGalleryProps,
 } from 'src/components/ui/ProductGallery/ProductGallery'
 import Section from '../Section'
+import type { EmptyGalleryProps } from './EmptyGallery'
 
 import { __experimentalEmptyGallery as EmptyGallery } from 'src/components/sections/ProductGallery/Overrides'
 
@@ -25,9 +26,13 @@ export interface ProductGallerySectionProps {
   loadMorePageButton?: ProductGalleryProps['loadMorePageButton']
   sortBySelector?: ProductGalleryProps['sortBySelector']
   productCard?: ProductGalleryProps['productCard']
+  emptyGallery?: EmptyGalleryProps
 }
 
-function ProductGallerySection({ ...otherProps }: ProductGallerySectionProps) {
+function ProductGallerySection({
+  emptyGallery,
+  ...otherProps
+}: ProductGallerySectionProps) {
   const context = usePage<SearchPageContext | PLPContext>()
   const [title, searchTerm] = isSearchPage(context)
     ? [context?.data?.title, context?.data?.searchTerm]
@@ -41,7 +46,7 @@ function ProductGallerySection({ ...otherProps }: ProductGallerySectionProps) {
     return (
       <Section className={`${styles.section} section-product-gallery`}>
         <section data-testid="product-gallery" data-fs-product-listing>
-          <EmptyGallery.Component />
+          <EmptyGallery.Component {...emptyGallery} />
         </section>
       </Section>
     )

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

@@ -4,7 +4,7 @@ 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'

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/index.tsx

@@ -5,7 +5,7 @@ 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 { 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,14 @@
 import Alert from '../../components/sections/Alert'
+import Hero from '../../components/sections/Hero'
 
 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'
 
 export const Sections = {
   Alert,
+  Hero,
 }
 
 export const DefaultComponents: Partial<
@@ -15,4 +18,5 @@ export const DefaultComponents: Partial<
   >
 > = {
   Alert: AlertDefaultComponents,
+  Hero: HeroDefaultComponents,
 }

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'>
 
 /**
  * Originally, these types were defined in their respective Overrides file