@faststore/core 2.0.117-alpha.0 → 2.0.120-alpha.0

package/.turbo/turbo-build.log

@@ -13,39 +13,51 @@ info  - Disabled SWC as replacement for Babel because of custom Babel configurat
 info  - Using external babel configuration from /home/runner/work/faststore/faststore/packages/core/.babelrc
 info  - Compiled successfully
 info  - Collecting page data...
-info  - Generating static pages (0/13)
-info  - Generating static pages (3/13)
-info  - Generating static pages (6/13)
-info  - Generating static pages (9/13)
+info  - Generating static pages (0/7)
+warn - Children not found. Add a new component for this section or remove it from the CMS
+warn - Children not found. Add a new component for this section or remove it from the CMS
+info  - Generating static pages (1/7)
+warn - Children not found. Add a new component for this section or remove it from the CMS
+warn - Children not found. Add a new component for this section or remove it from the CMS
+warn - Children not found. Add a new component for this section or remove it from the CMS
+warn - Children not found. Add a new component for this section or remove it from the CMS
+info  - Generating static pages (3/7)
+warn - Children not found. Add a new component for this section or remove it from the CMS
+warn - Children not found. Add a new component for this section or remove it from the CMS
 warn - CallToAction not found. Add a new component for this section or remove it from the CMS
 warn - CallToAction not found. Add a new component for this section or remove it from the CMS
 warn - CallToAction not found. Add a new component for this section or remove it from the CMS
-info  - Generating static pages (13/13)
+warn - Children not found. Add a new component for this section or remove it from the CMS
+warn - Children not found. Add a new component for this section or remove it from the CMS
+info  - Generating static pages (5/7)
+warn - Children not found. Add a new component for this section or remove it from the CMS
+warn - Children not found. Add a new component for this section or remove it from the CMS
+info  - Generating static pages (7/7)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      8.65 kB         117 kB
-├   └ css/3a57acf6e411f24d.css             1.69 kB
-├   /_app                                  0 B            96.8 kB
-├ ● /[...slug]                             9.46 kB         122 kB
-├   └ css/1f987650dd4e39d0.css             1.33 kB
-├ ● /[slug]/p                              16.8 kB         125 kB
-├   └ css/4abccf9803c3c356.css             1.82 kB
-├ ○ /404                                   665 B           103 kB
-├ ○ /500                                   439 B           102 kB
-├ ○ /account                               383 B           102 kB
-├ λ /api/graphql                           0 B            96.8 kB
-├ λ /api/preview                           0 B            96.8 kB
-├ ○ /checkout                              371 B           102 kB
-├ ○ /login                                 577 B           103 kB
-└ ○ /s                                     895 B           113 kB
-    └ css/6f4d3e91f1d161a8.css             1.29 kB
-+ First Load JS shared by all              120 kB
+┌ ● /                                      4.05 kB         122 kB
+├   └ css/777fb0b5b1c2fa32.css             2.87 kB
+├   /_app                                  0 B            77.8 kB
+├ ● /[...slug]                             2.29 kB         130 kB
+├   └ css/c302d203b46499ff.css             2.52 kB
+├ ● /[slug]/p                              12.3 kB         130 kB
+├   └ css/384a7a015bca80d6.css             3.01 kB
+├ ○ /404                                   950 B           110 kB
+├ ● /500                                   718 B           109 kB
+├ ● /account                               670 B           109 kB
+├ λ /api/graphql                           0 B            77.8 kB
+├ λ /api/preview                           0 B            77.8 kB
+├ ● /checkout                              659 B           109 kB
+├ ● /login                                 870 B           110 kB
+└ ● /s                                     2.77 kB         121 kB
+    └ css/57c1885d16efdc73.css             2.48 kB
++ First Load JS shared by all              100 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
-  ├ chunks/main-9746772201fe3ac1.js        23.9 kB
-  ├ chunks/pages/_app-4aeb21d72aeea9b7.js  25.5 kB
-  ├ chunks/webpack-f725b61675603493.js     2.15 kB
-  └ css/502746c995f64cce.css               23.6 kB
+  ├ chunks/main-bf297268d707456d.js        23.9 kB
+  ├ chunks/pages/_app-3cf84159cce4c8ef.js  6.41 kB
+  ├ chunks/webpack-e105e23dccb05796.js     2.2 kB
+  └ css/4e34a56a38b0d9d5.css               22.5 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,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.120-alpha.0](https://github.com/vtex/faststore/compare/v2.0.119-alpha.0...v2.0.120-alpha.0) (2023-04-27)
+
+### Features
+
+- Integrates Global Sections, with Alert component ([#1722](https://github.com/vtex/faststore/issues/1722)) ([da38b2a](https://github.com/vtex/faststore/commit/da38b2af3db5bd6abd57707d11d67d7463d5fa12))
+
+## [2.0.118-alpha.0](https://github.com/vtex/faststore/compare/v2.0.117-alpha.0...v2.0.118-alpha.0) (2023-04-26)
+
+**Note:** Version bump only for package @faststore/core
+
 ## [2.0.117-alpha.0](https://github.com/vtex/faststore/compare/v2.0.116-alpha.0...v2.0.117-alpha.0) (2023-04-26)
 
 ### Features

package/cms/faststore/content-types.json

@@ -4,6 +4,12 @@
     "name": "Global Alert Page",
     "configurationSchemaSets": []
   },
+  {
+    "id": "globalSections",
+    "name": "Global Sections",
+    "configurationSchemaSets": [],
+    "isSingleton": true
+  },
   {
     "id": "page",
     "name": "Page",

package/cms/faststore/sections.json

@@ -990,6 +990,14 @@
       }
     }
   },
+  {
+    "name": "Children",
+    "schema": {
+      "title": "Children",
+      "type": "object",
+      "properties": {}
+    }
+  },
   {
     "name": "BannerNewsletter",
     "schema": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.117-alpha.0",
+  "version": "2.0.120-alpha.0",
   "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.0.105-alpha.0",
+    "@faststore/api": "^2.0.118-alpha.0",
     "@faststore/components": "^2.0.117-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.3-alpha.0",
@@ -108,5 +108,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "0d97039ebb2acb1c000ca9a4c914c2388a4cd49e"
+  "gitHead": "7c7da070b4a307b9c158fef70b22234831a97756"
 }

package/src/Layout.tsx

@@ -1,12 +1,7 @@
 import type { PropsWithChildren } from 'react'
 import { lazy, Suspense } from 'react'
 
-import { Icon, useUI } from '@faststore/ui'
-import Alert from 'src/components/common/Alert'
-import Footer from 'src/components/common/Footer'
-import Navbar from 'src/components/navigation/Navbar'
-import Toast from 'src/components/common/Toast'
-import RegionBar from 'src/components/region/RegionBar'
+import { useUI } from '@faststore/ui'
 
 const CartSidebar = lazy(() => import('src/components/cart/CartSidebar'))
 const RegionModal = lazy(() => import('src/components/region/RegionModal'))
@@ -16,24 +11,7 @@ function Layout({ children }: PropsWithChildren) {
 
   return (
     <>
-      <Alert
-        icon={<Icon name="Bell" />}
-        link={{ children: 'Buy now', href: '/office', target: '_self' }}
-        dismissible
-      >
-        Get 10% off today:&nbsp;<span>NEW10</span>
-      </Alert>
-
-      <Navbar />
-
-      <Toast />
-
-      <main>
-        <RegionBar className="display-mobile" />
-        {children}
-      </main>
-
-      <Footer />
+      {children}
 
       {displayCart && (
         <Suspense fallback={null}>

package/src/components/cms/GlobalSections.tsx

@@ -0,0 +1,81 @@
+import { PropsWithChildren, useMemo } from 'react'
+
+import { Locator, Section } from '@vtex/client-cms'
+import { PageContentType, getPage } from 'src/server/cms'
+import CUSTOM_COMPONENTS from 'src/customizations/components'
+import type { ComponentType } from 'react'
+
+import RenderSections from './RenderSections'
+import { RegionBar } from '@faststore/components'
+import Alert from 'src/components/sections/Alert/Alert'
+import Navbar from 'src/components/navigation/Navbar'
+import Footer from 'src/components/common/Footer'
+import Toast from 'src/components/common/Toast'
+
+// TODO: When the CMS is finished, switch to using 'globalSections'.
+export const GLOBAL_SECTIONS_CONTENT_TYPE = 'globalAlert'
+
+export type GlobalSectionsData = {
+  sections: Section[]
+}
+
+/* A list of components that can be used in the CMS. */
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  Alert,
+  ...CUSTOM_COMPONENTS,
+}
+
+const useDividedSections = (sections: Section[]) => {
+  return useMemo(() => {
+    const indexChildren = sections.findIndex(({ name }) => name === 'Children')
+    const hasChildren = indexChildren > -1
+
+    return {
+      hasChildren,
+      firstSections: hasChildren ? sections.slice(0, indexChildren) : sections,
+      ...(hasChildren && { lastSections: sections.slice(indexChildren + 1) }),
+    }
+  }, [sections])
+}
+
+function GlobalSections({
+  children,
+  sections,
+}: PropsWithChildren<GlobalSectionsData>) {
+  const { hasChildren, firstSections, lastSections } =
+    useDividedSections(sections)
+
+  return (
+    <>
+      <RenderSections sections={firstSections} components={COMPONENTS} />
+      <Navbar />
+
+      <Toast />
+
+      <main>
+        <RegionBar className="display-mobile" />
+        {children}
+      </main>
+
+      <Footer />
+      {hasChildren && (
+        <RenderSections sections={lastSections} components={COMPONENTS} />
+      )}
+    </>
+  )
+}
+
+export default GlobalSections
+
+export const getGlobalSectionsData = async (
+  previewData: Locator
+): Promise<GlobalSectionsData> => {
+  const { sections } = await getPage<PageContentType>({
+    ...(previewData?.contentType === GLOBAL_SECTIONS_CONTENT_TYPE
+      ? previewData
+      : { filters: { 'settings.seo.slug': '/' } }),
+    contentType: GLOBAL_SECTIONS_CONTENT_TYPE,
+  })
+
+  return { sections }
+}

package/src/components/cms/RenderSections.tsx

@@ -0,0 +1,39 @@
+import chalk from 'chalk'
+import { ComponentType, PropsWithChildren, ReactNode, useMemo } from 'react'
+
+import SectionBoundary from './SectionBoundary'
+
+interface Props {
+  components: Record<string, ComponentType<any>>
+  sections: Array<{ name: string; data: any }>
+  context?: unknown
+}
+
+const RenderSections = ({ sections = [], context, components }: Props) => {
+  return (
+    <>
+      {sections.map(({ name, data }, index) => {
+        const Component = components[name]
+
+        if (!Component) {
+          // TODO: add a documentation link to help to do this
+          console.info(
+            `${chalk.yellow(
+              'warn'
+            )} - ${name} not found. Add a new component for this section or remove it from the CMS`
+          )
+
+          return null
+        }
+
+        return (
+          <SectionBoundary key={`cms-section-${index}`} name={name}>
+            <Component {...data} context={context} />
+          </SectionBoundary>
+        )
+      })}
+    </>
+  )
+}
+
+export default RenderSections

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

@@ -1,17 +1,21 @@
 import type { PropsWithChildren, ReactNode } from 'react'
 import { useCallback, useState } from 'react'
 
-import { Alert as UIAlert, AlertProps } from '@faststore/ui'
+import { Alert as UIAlert, AlertProps as UIAlertProps } from '@faststore/ui'
 import { mark } from 'src/sdk/tests/mark'
 
-interface Props extends AlertProps {
+export interface AlertProps extends UIAlertProps {
   /**
    * For CMS integration purposes, should be used to pass content through it
    * instead pass through children
    */
   content?: ReactNode
 }
-function Alert(args: PropsWithChildren<Props>) {
+function Alert({
+  content,
+  children,
+  ...otherProps
+}: PropsWithChildren<AlertProps>) {
   const [displayAlert, setDisplayAlert] = useState(true)
 
   const onAlertClose = useCallback(
@@ -23,8 +27,6 @@ function Alert(args: PropsWithChildren<Props>) {
     return null
   }
 
-  const { content, children, ...otherProps } = args
-
   return (
     <UIAlert onClose={onAlertClose} {...otherProps}>
       {content ?? children}

package/src/components/common/Alert/index.ts

@@ -1 +1,2 @@
 export { default } from './Alert'
+export type { AlertProps } from './Alert'

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

@@ -0,0 +1,28 @@
+import { Icon as UIIcon } from '@faststore/ui'
+import Section from '../Section'
+import UIAlert from 'src/components/common/Alert'
+
+export interface AlertProps {
+  icon: string
+  content: string
+  link: {
+    text: string
+    to: string
+  }
+  dismissible: boolean
+}
+
+// TODO: Change actionPath and actionLabel with Link
+function Alert({ icon, content, link, dismissible }: AlertProps) {
+  return (
+    <UIAlert
+      icon={<UIIcon name={icon} />}
+      link={{ children: link?.text, href: link?.to, target: '_self' }}
+      dismissible={dismissible}
+    >
+      {content}
+    </UIAlert>
+  )
+}
+
+export default Alert

package/src/pages/404.tsx

@@ -1,6 +1,12 @@
 import { NextSeo } from 'next-seo'
 import { useRouter } from 'next/router'
 import { EmptyState as UIEmptyState, Icon as UIIcon } from '@faststore/ui'
+import GlobalSections, {
+  GlobalSectionsData,
+  getGlobalSectionsData,
+} from 'src/components/cms/GlobalSections'
+import { GetStaticProps } from 'next'
+import { Locator } from '@vtex/client-cms'
 
 const useErrorState = () => {
   const router = useRouter()
@@ -12,11 +18,15 @@ const useErrorState = () => {
   }
 }
 
-function Page() {
+type Props = {
+  globalSections: GlobalSectionsData
+}
+
+function Page({ globalSections }: Props) {
   const { fromUrl } = useErrorState()
 
   return (
-    <>
+    <GlobalSections {...globalSections}>
       <NextSeo noindex nofollow />
 
       <UIEmptyState
@@ -33,8 +43,20 @@ function Page() {
       >
         <p>This app could not find url {fromUrl}</p>
       </UIEmptyState>
-    </>
+    </GlobalSections>
   )
 }
 
+export const getStaticProps: GetStaticProps<
+  Props,
+  Record<string, string>,
+  Locator
+> = async ({ previewData }) => {
+  const globalSections = await getGlobalSectionsData(previewData)
+
+  return {
+    props: { globalSections },
+  }
+}
+
 export default Page

package/src/pages/500.tsx

@@ -1,5 +1,15 @@
+import { Locator } from '@vtex/client-cms'
+import { GetStaticProps } from 'next'
 import { NextSeo } from 'next-seo'
 import { useRouter } from 'next/router'
+import GlobalSections, {
+  GlobalSectionsData,
+  getGlobalSectionsData,
+} from 'src/components/cms/GlobalSections'
+
+type Props = {
+  globalSections: GlobalSectionsData
+}
 
 const useErrorState = () => {
   const router = useRouter()
@@ -11,11 +21,11 @@ const useErrorState = () => {
   }
 }
 
-function Page() {
+function Page({ globalSections }: Props) {
   const { errorId, fromUrl } = useErrorState()
 
   return (
-    <>
+    <GlobalSections {...globalSections}>
       <NextSeo noindex nofollow />
 
       <h1>500</h1>
@@ -24,8 +34,20 @@ function Page() {
       <div>
         The server errored with id {errorId} when visiting page {fromUrl}
       </div>
-    </>
+    </GlobalSections>
   )
 }
 
+export const getStaticProps: GetStaticProps<
+  Props,
+  Record<string, string>,
+  Locator
+> = async ({ previewData }) => {
+  const globalSections = await getGlobalSectionsData(previewData)
+
+  return {
+    props: { globalSections },
+  }
+}
+
 export default Page

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

@@ -27,10 +27,19 @@ import { mark } from 'src/sdk/tests/mark'
 import { execute } from 'src/server'
 
 import storeConfig from '../../faststore.config'
+import GlobalSections, {
+  getGlobalSectionsData,
+  GlobalSectionsData,
+} from 'src/components/cms/GlobalSections'
+import { Locator } from '@vtex/client-cms'
+
+type Props = ServerCollectionPageQueryQuery & {
+  globalSections: GlobalSectionsData
+}
 
-type Props = ServerCollectionPageQueryQuery
-
-const useSearchParams = ({ collection }: Props): SearchState => {
+const useSearchParams = ({
+  collection,
+}: ServerCollectionPageQueryQuery): SearchState => {
   const selectedFacets = collection?.meta.selectedFacets
   const { asPath } = useRouter()
 
@@ -48,7 +57,7 @@ const useSearchParams = ({ collection }: Props): SearchState => {
   return useMemo(() => parseSearchState(new URL(hrefState)), [hrefState])
 }
 
-function Page(props: Props) {
+function Page({ globalSections, ...props }: Props) {
   const { collection } = props
   const router = useRouter()
   const applySearchState = useApplySearchState()
@@ -62,64 +71,66 @@ function Page(props: Props) {
   const canonical = `${storeConfig.storeUrl}${pathname}${pageQuery}`
 
   return (
-    <SearchProvider
-      onChange={applySearchState}
-      itemsPerPage={ITEMS_PER_PAGE}
-      {...searchParams}
-    >
-      {/* SEO */}
-      <NextSeo
-        title={title}
-        description={description}
-        titleTemplate={storeConfig.seo.titleTemplate}
-        canonical={canonical}
-        openGraph={{
-          type: 'website',
-          title,
-          description,
-        }}
-      />
-      <BreadcrumbJsonLd
-        itemListElements={collection?.breadcrumbList.itemListElement ?? []}
-      />
-
-      {/*
-        WARNING: Do not import or render components from any
-        other folder than '../components/sections' in here.
-
-        This is necessary to keep the integration with the CMS
-        easy and consistent, enabling the change and reorder
-        of elements on this page.
-
-        If needed, wrap your component in a <Section /> component
-        (not the HTML tag) before rendering it here.
-      */}
-      <Breadcrumb
-        breadcrumbList={collection?.breadcrumbList.itemListElement}
-        name={title}
-      />
-
-      <Hero
-        variant="secondary"
-        title={title}
-        subtitle={`All the amazing ${title} from the brands we partner with.`}
-        image={{
-          src: 'https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg',
-          alt: 'Quest 2 Controller on a table',
-        }}
-      />
-
-      <ProductGallery title={title} />
-
-      <ProductShelf
-        first={ITEMS_PER_SECTION}
-        sort="score_desc"
-        title="You might also like"
-        withDivisor
-      />
-
-      <ScrollToTopButton />
-    </SearchProvider>
+    <GlobalSections {...globalSections}>
+      <SearchProvider
+        onChange={applySearchState}
+        itemsPerPage={ITEMS_PER_PAGE}
+        {...searchParams}
+      >
+        {/* SEO */}
+        <NextSeo
+          title={title}
+          description={description}
+          titleTemplate={storeConfig.seo.titleTemplate}
+          canonical={canonical}
+          openGraph={{
+            type: 'website',
+            title,
+            description,
+          }}
+        />
+        <BreadcrumbJsonLd
+          itemListElements={collection?.breadcrumbList.itemListElement ?? []}
+        />
+
+        {/*
+          WARNING: Do not import or render components from any
+          other folder than '../components/sections' in here.
+
+          This is necessary to keep the integration with the CMS
+          easy and consistent, enabling the change and reorder
+          of elements on this page.
+
+          If needed, wrap your component in a <Section /> component
+          (not the HTML tag) before rendering it here.
+        */}
+        <Breadcrumb
+          breadcrumbList={collection?.breadcrumbList.itemListElement}
+          name={title}
+        />
+
+        <Hero
+          variant="secondary"
+          title={title}
+          subtitle={`All the amazing ${title} from the brands we partner with.`}
+          image={{
+            src: 'https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg',
+            alt: 'Quest 2 Controller on a table',
+          }}
+        />
+
+        <ProductGallery title={title} />
+
+        <ProductShelf
+          first={ITEMS_PER_SECTION}
+          sort="score_desc"
+          title="You might also like"
+          withDivisor
+        />
+
+        <ScrollToTopButton />
+      </SearchProvider>
+    </GlobalSections>
   )
 }
 
@@ -148,9 +159,12 @@ const query = gql`
 `
 
 export const getStaticProps: GetStaticProps<
-  ServerCollectionPageQueryQuery,
-  { slug: string[] }
-> = async ({ params }) => {
+  Props,
+  { slug: string[] },
+  Locator
+> = async (context) => {
+  const { params } = context
+
   const { data, errors = [] } = await execute<
     ServerCollectionPageQueryQueryVariables,
     ServerCollectionPageQueryQuery
@@ -171,8 +185,13 @@ export const getStaticProps: GetStaticProps<
     throw errors[0]
   }
 
+  const globalSections = await getGlobalSectionsData(context.previewData)
+
   return {
-    props: data,
+    props: {
+      ...data,
+      globalSections,
+    },
   }
 }