@faststore/core 2.0.152-alpha.0 → 2.0.154-alpha.0

package/.turbo/turbo-build.log

@@ -16,18 +16,16 @@ info  - Collecting page data...
 info  - Generating static pages (0/7)
 info  - Generating static pages (1/7)
 info  - Generating static pages (3/7)
-warn - CallToAction not found. Add a new component for this section or remove it from the CMS
-warn - IncentivesHeader not found. Add a new component for this section or remove it from the CMS
 info  - Generating static pages (5/7)
 info  - Generating static pages (7/7)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      2.97 kB         126 kB
+┌ ● /                                      3.09 kB         126 kB
 ├   └ css/13a4da555ff5e3be.css             7.19 kB
 ├   /_app                                  0 B            77.9 kB
-├ ● /[...slug]                             9.91 kB         133 kB
-├   └ css/1323734429a8aa40.css             7.9 kB
+├ ● /[...slug]                             10.1 kB         133 kB
+├   └ css/6e41f1b6078c14c1.css             7.9 kB
 ├ ● /[slug]/p                              11.7 kB         135 kB
 ├   └ css/d462d9478ce00021.css             10.9 kB
 ├ ○ /404                                   1.09 kB         113 kB
@@ -37,13 +35,13 @@ Route (pages)                              Size     First Load JS
 ├ λ /api/preview                           0 B            77.9 kB
 ├ ● /checkout                              659 B           113 kB
 ├ ● /login                                 1.01 kB         113 kB
-└ ● /s                                     995 B           124 kB
+└ ● /s                                     1.11 kB         124 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-3e4e7e579cb0681a.js  6.43 kB
-  ├ chunks/webpack-976c8f7df8e3dea3.js     2.27 kB
-  └ css/bde408cc006e64f8.css               2.82 kB
+  ├ chunks/webpack-90918babbeee4949.js     2.26 kB
+  └ css/47d82dcec9a7dbc2.css               2.78 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,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.154-alpha.0](https://github.com/vtex/faststore/compare/v2.0.153-alpha.0...v2.0.154-alpha.0) (2023-05-23)
+
+### Features
+
+- Adjust `ProductShelf` for CMS ([#1766](https://github.com/vtex/faststore/issues/1766)) ([1798536](https://github.com/vtex/faststore/commit/1798536f60a508997616350f0b4ac6c11878dc04))
+
+## [2.0.153-alpha.0](https://github.com/vtex/faststore/compare/v2.0.152-alpha.0...v2.0.153-alpha.0) (2023-05-23)
+
+### Features
+
+- Adds `ProductGallery` Sections + `Filter` component from CMS ([#1770](https://github.com/vtex/faststore/issues/1770)) ([3b80811](https://github.com/vtex/faststore/commit/3b808119904d68e6c848eaa4c30be050650ad2bb))
+
 ## [2.0.152-alpha.0](https://github.com/vtex/faststore/compare/v2.0.151-alpha.0...v2.0.152-alpha.0) (2023-05-23)
 
 ### Features

package/cms/faststore/content-types.json

@@ -58,11 +58,105 @@
   {
     "id": "plp",
     "name": "Product List Page",
-    "configurationSchemaSets": []
+    "configurationSchemaSets": [
+      {
+        "name": "Settings",
+        "configurations": [
+          {
+            "name": "productGallery",
+            "schema": {
+              "title": "Product Gallery",
+              "description": "ProductGallery options",
+              "type": "object",
+              "required": ["itemsPerPage", "sortBySelection"],
+              "properties": {
+                "itemsPerPage": {
+                  "title": "Number of ProductCards per page",
+                  "type": "integer",
+                  "default": 12
+                },
+                "sortBySelection": {
+                  "title": "Default sort by value",
+                  "type": "string",
+                  "default": "score_desc",
+                  "enumNames": [
+                    "Price, descending",
+                    "Price, ascending",
+                    "Top sales",
+                    "Name, A-Z",
+                    "Name, Z-A",
+                    "Release date",
+                    "Discount",
+                    "Relevance"
+                  ],
+                  "enum": [
+                    "price_desc",
+                    "price_asc",
+                    "orders_desc",
+                    "name_asc",
+                    "name_desc",
+                    "release_desc",
+                    "discount_desc",
+                    "score_desc"
+                  ]
+                }
+              }
+            }
+          }
+        ]
+      }
+    ]
   },
   {
     "id": "search",
     "name": "Search Page",
-    "configurationSchemaSets": []
+    "configurationSchemaSets": [
+      {
+        "name": "Settings",
+        "configurations": [
+          {
+            "name": "productGallery",
+            "schema": {
+              "title": "Product Gallery",
+              "description": "ProductGallery options",
+              "type": "object",
+              "required": ["itemsPerPage", "sortBySelection"],
+              "properties": {
+                "itemsPerPage": {
+                  "title": "Number of ProductCards per page",
+                  "type": "integer",
+                  "default": 12
+                },
+                "sortBySelection": {
+                  "title": "Default sort by value",
+                  "type": "string",
+                  "default": "score_desc",
+                  "enumNames": [
+                    "Price, descending",
+                    "Price, ascending",
+                    "Top sales",
+                    "Name, A-Z",
+                    "Name, Z-A",
+                    "Release date",
+                    "Discount",
+                    "Relevance"
+                  ],
+                  "enum": [
+                    "price_desc",
+                    "price_asc",
+                    "orders_desc",
+                    "name_asc",
+                    "name_desc",
+                    "release_desc",
+                    "discount_desc",
+                    "score_desc"
+                  ]
+                }
+              }
+            }
+          }
+        ]
+      }
+    ]
   }
 ]

package/cms/faststore/sections.json

@@ -169,6 +169,39 @@
             }
           }
         },
+        "searchInput": {
+          "title": "Search Input",
+          "description": "Search Input configurations",
+          "type": "object",
+          "required": ["sort"],
+          "properties": {
+            "sort": {
+              "title": "Results default sort value",
+              "type": "string",
+              "default": "score_desc",
+              "enumNames": [
+                "Price, descending",
+                "Price, ascending",
+                "Top sales",
+                "Name, A-Z",
+                "Name, Z-A",
+                "Release date",
+                "Discount",
+                "Relevance"
+              ],
+              "enum": [
+                "price_desc",
+                "price_asc",
+                "orders_desc",
+                "name_asc",
+                "name_desc",
+                "release_desc",
+                "discount_desc",
+                "score_desc"
+              ]
+            }
+          }
+        },
         "signInButton": {
           "title": "Sign In Button",
           "type": "object",
@@ -801,8 +834,8 @@
           ],
           "enumNames": [
             "Discount: higher to lower",
-            "Name: Z-A",
             "Name: A-Z",
+            "Name: Z-A",
             "Orders: higher to lower",
             "Price: lower to higher",
             "Price: higher to lower",
@@ -846,15 +879,10 @@
               "type": "boolean",
               "default": true
             },
-            "showBuyButton": {
-              "title": "Show buy button?",
+            "bordered": {
+              "title": "Cards should be bordered?",
               "type": "boolean",
               "default": true
-            },
-            "buyButtonTitle": {
-              "title": "Buy Button Text",
-              "type": "string",
-              "default": "Buy"
             }
           }
         }
@@ -1251,5 +1279,148 @@
         }
       }
     }
+  },
+  {
+    "name": "ProductGallery",
+    "schema": {
+      "title": "Product Gallery",
+      "type": "object",
+      "description": "Product Gallery configuration",
+      "required": ["filter"],
+      "properties": {
+        "searchTermLabel": {
+          "title": "Search page term label",
+          "type": "string",
+          "default": "Showing results for:"
+        },
+        "totalCountLabel": {
+          "title": "Total count label",
+          "type": "string",
+          "default": "Results"
+        },
+        "previousPageButton": {
+          "title": "Previous page button",
+          "type": "object",
+          "required": ["icon", "label"],
+          "properties": {
+            "icon": {
+              "title": "Icon",
+              "type": "object",
+              "properties": {
+                "icon": {
+                  "title": "Icon",
+                  "type": "string",
+                  "enumNames": ["ArrowLeft"],
+                  "enum": ["ArrowLeft"],
+                  "default": "ArrowLeft"
+                },
+                "alt": {
+                  "title": "Alternative label",
+                  "type": "string",
+                  "default": "Arrow Left icon"
+                }
+              }
+            },
+            "label": {
+              "title": "Previous page button",
+              "type": "string",
+              "default": "Previous Page"
+            }
+          }
+        },
+        "loadMorePageButton": {
+          "title": "Load more products Button",
+          "type": "object",
+          "required": ["label"],
+          "properties": {
+            "label": {
+              "title": "Load more products label",
+              "type": "string",
+              "default": "Load more products"
+            }
+          }
+        },
+        "filter": {
+          "title": "Filter",
+          "type": "object",
+          "required": ["title", "mobileOnly"],
+          "properties": {
+            "title": {
+              "title": "Filter title",
+              "type": "string",
+              "default": "Filters"
+            },
+            "mobileOnly": {
+              "title": "Mobile Only",
+              "type": "object",
+              "required": [
+                "filterButton",
+                "clearButtonLabel",
+                "applyButtonLabel"
+              ],
+              "properties": {
+                "filterButton": {
+                  "title": "Show filter button",
+                  "type": "object",
+                  "required": ["label", "icon"],
+                  "properties": {
+                    "label": {
+                      "title": "Label",
+                      "type": "string",
+                      "default": "Filters"
+                    },
+                    "icon": {
+                      "title": "Icon",
+                      "type": "object",
+                      "required": ["icon", "alt"],
+                      "properties": {
+                        "icon": {
+                          "title": "Icon",
+                          "type": "string",
+                          "enumNames": ["FadersHorizontal"],
+                          "enum": ["FadersHorizontal"],
+                          "default": "FadersHorizontal"
+                        },
+                        "alt": {
+                          "title": "Alternative label",
+                          "type": "string",
+                          "default": "Open Filters"
+                        }
+                      }
+                    }
+                  }
+                },
+                "clearButtonLabel": {
+                  "title": "Clear button label",
+                  "type": "string",
+                  "default": "Clear All"
+                },
+                "applyButtonLabel": {
+                  "title": "Apply button label",
+                  "type": "string",
+                  "default": "Apply"
+                }
+              }
+            }
+          }
+        },
+        "productCard": {
+          "title": "Product Card Configuration",
+          "type": "object",
+          "properties": {
+            "showDiscountBadge": {
+              "title": "Show discount badge?",
+              "type": "boolean",
+              "default": true
+            },
+            "bordered": {
+              "title": "Cards should be bordered?",
+              "type": "boolean",
+              "default": true
+            }
+          }
+        }
+      }
+    }
   }
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.152-alpha.0",
+  "version": "2.0.154-alpha.0",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -29,11 +29,11 @@
     "@envelop/graphql-jit": "^1.1.1",
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
-    "@faststore/api": "^2.0.140-alpha.0",
+    "@faststore/api": "^2.0.154-alpha.0",
     "@faststore/components": "^2.0.152-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.118-alpha.0",
-    "@faststore/ui": "^2.0.152-alpha.0",
+    "@faststore/ui": "^2.0.154-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": "29b026410bf27e71d70f9ced483e494c273d07ad"
+  "gitHead": "f2f4fe80c11a4523ef1dd6827e6c1cf998908c24"
 }

package/src/components/cms/GlobalSections.tsx

@@ -27,41 +27,19 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
   ...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,
+  ...otherProps
 }: PropsWithChildren<GlobalSectionsData>) {
-  const { hasChildren, firstSections, lastSections } =
-    useDividedSections(sections)
-
   return (
-    <>
-      <RenderSections sections={firstSections} components={COMPONENTS} />
-
+    <RenderSections components={COMPONENTS} {...otherProps}>
       <Toast />
 
       <main>
         <RegionBar className="display-mobile" />
         {children}
       </main>
-
-      {hasChildren && (
-        <RenderSections sections={lastSections} components={COMPONENTS} />
-      )}
-    </>
+    </RenderSections>
   )
 }
 

package/src/components/cms/RenderSections.tsx

@@ -1,7 +1,8 @@
 import chalk from 'chalk'
-import { ComponentType } from 'react'
+import { ComponentType, PropsWithChildren, useMemo } from 'react'
 
 import SectionBoundary from './SectionBoundary'
+import { Section } from '@vtex/client-cms'
 
 interface Props {
   components: Record<string, ComponentType<any>>
@@ -9,7 +10,20 @@ interface Props {
   context?: unknown
 }
 
-const RenderSections = ({ sections = [], context, components }: Props) => {
+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])
+}
+
+const RenderSectionsBase = ({ sections = [], context, components }: Props) => {
   return (
     <>
       {sections.map(({ name, data }, index) => {
@@ -36,4 +50,25 @@ const RenderSections = ({ sections = [], context, components }: Props) => {
   )
 }
 
+function RenderSections({
+  children,
+  sections,
+  ...otherProps
+}: PropsWithChildren<Props>) {
+  const { hasChildren, firstSections, lastSections } =
+    useDividedSections(sections)
+
+  return (
+    <>
+      <RenderSectionsBase sections={firstSections} {...otherProps} />
+
+      {children}
+
+      {hasChildren && (
+        <RenderSectionsBase sections={lastSections} {...otherProps} />
+      )}
+    </>
+  )
+}
+
 export default RenderSections

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

@@ -1,35 +1,39 @@
 import { Suspense, useRef, useState } from 'react'
 
 import {
-  useUI,
-  useScrollDirection,
   Icon as UIIcon,
-  Navbar as UINavbar,
-  NavbarRow as UINavbarRow,
   IconButton as UIIconButton,
+  Navbar as UINavbar,
   NavbarButtons as UINavbarButtons,
   NavbarHeader as UINavbarHeader,
+  NavbarRow as UINavbarRow,
+  useScrollDirection,
+  useUI,
 } from '@faststore/ui'
 
 import { mark } from 'src/sdk/tests/mark'
 
 import CartToggle from 'src/components/cart/CartToggle'
-import SearchInput from 'src/components/search/SearchInput'
 import type { SearchInputRef } from 'src/components/search/SearchInput'
+import SearchInput from 'src/components/search/SearchInput'
 
+import { ButtonSignIn, ButtonSignInFallback } from 'src/components/ui/Button'
 import Link from 'src/components/ui/Link'
 import Logo from 'src/components/ui/Logo'
-import { ButtonSignIn, ButtonSignInFallback } from 'src/components/ui/Button'
 
+import type { NavbarProps as SectionNavbarProps } from '../../sections/Navbar'
 import NavbarLinks from '../NavbarLinks'
 import NavbarSlider from '../NavbarSlider'
-import type { NavbarProps as SectionNavbarProps } from '../../sections/Navbar'
 
 export interface NavbarProps {
   /**
    * Logo props.
    */
   logo: SectionNavbarProps['logo']
+  /**
+   * Search Input props.
+   */
+  searchInput: SectionNavbarProps['searchInput']
   /**
    * Cart props.
    */
@@ -65,6 +69,7 @@ export interface NavbarProps {
 function Navbar({
   cart,
   logo,
+  searchInput,
   home,
   links,
   signIn,
@@ -109,7 +114,7 @@ function Navbar({
             </>
           )}
 
-          <SearchInput />
+          <SearchInput sort={searchInput?.sort} />
 
           <UINavbarButtons searchExpanded={searchExpanded}>
             {searchExpanded && (
@@ -130,6 +135,7 @@ function Navbar({
               testId="store-input-mobile"
               buttonTestId="store-input-mobile-button"
               onSearchClick={handlerExpandSearch}
+              sort={searchInput?.sort}
             />
 
             <Suspense fallback={<ButtonSignInFallback />}>

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

@@ -5,7 +5,7 @@ import {
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
 import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
 
-import ProductCard from '../ProductCard'
+import ProductCard, { ProductCardProps } from '../ProductCard'
 
 interface Props {
   /**
@@ -17,9 +17,13 @@ interface Props {
    * Quantity of products listed.
    */
   pageSize: number
+  /**
+   * CMS defined data to be used in ProductCard component.
+   */
+  productCard?: Pick<ProductCardProps, 'showDiscountBadge' | 'bordered'>
 }
 
-function ProductGrid({ products, page, pageSize }: Props) {
+function ProductGrid({ products, page, pageSize, productCard }: Props) {
   const aspectRatio = 1
 
   return (
@@ -33,7 +37,8 @@ function ProductGrid({ products, page, pageSize }: Props) {
             <ProductCard
               product={product}
               index={pageSize * page + idx + 1}
-              bordered
+              bordered={productCard?.bordered}
+              showDiscountBadge={productCard?.showDiscountBadge}
               aspectRatio={aspectRatio}
               imgProps={{
                 width: 150,

package/src/components/search/Filter/Filter.tsx

@@ -2,12 +2,17 @@ import { gql } from '@faststore/graphql-utils'
 import { useUI } from '@faststore/ui'
 import type { Filter_FacetsFragment } from '@generated/graphql'
 import { lazy, Suspense } from 'react'
+import { ProductGalleryProps } from 'src/components/ui/ProductGallery/ProductGallery'
 import FilterDesktop from './FilterDesktop'
 import { useFilter } from './useFilter'
 
 const FilterSlider = lazy(() => import('./FilterSlider'))
 
 interface Props {
+  /**
+   * CMS defined data to be used in filter component.
+   */
+  filter: ProductGalleryProps['filter']
   /**
    * The array that represents the details of every facet.
    */
@@ -19,19 +24,33 @@ interface Props {
   testId?: string
 }
 
-function Filter({ facets: allFacets, testId = 'fs-filter' }: Props) {
+function Filter({
+  facets: allFacets,
+  testId = 'fs-filter',
+  filter: filterCmsData,
+}: Props) {
   const filter = useFilter(allFacets)
   const { filter: displayFilter } = useUI()
 
   return (
     <>
       <div className="hidden-mobile">
-        <FilterDesktop {...filter} testId={testId} title="Filters" />
+        <FilterDesktop
+          {...filter}
+          testId={testId}
+          title={filterCmsData?.title}
+        />
       </div>
 
       {displayFilter && (
         <Suspense fallback={null}>
-          <FilterSlider {...filter} testId={testId} title="Filters" />
+          <FilterSlider
+            {...filter}
+            testId={testId}
+            title={filterCmsData?.title}
+            clearButtonLabel={filterCmsData?.mobileOnly?.clearButtonLabel}
+            applyButtonLabel={filterCmsData?.mobileOnly?.applyButtonLabel}
+          />
         </Suspense>
       )}
     </>