@faststore/core 2.1.0 → 2.1.3

package/.turbo/turbo-build.log

@@ -1,10 +1,16 @@
 $ yarn partytown && next build
 $ partytown copylib ./public/~partytown
-Partytown lib copied to: /Users/emersonlaurentino/develop/vtex/faststore/packages/core/public/~partytown
+Partytown lib copied to: /home/runner/work/faststore/faststore/packages/core/public/~partytown
+warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
+Attention: Next.js now collects completely anonymous telemetry regarding usage.
+This information is used to shape Next.js' roadmap and prioritize features.
+You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
+https://nextjs.org/telemetry
+
 info  - Linting and checking validity of types...
 info  - Creating an optimized production build...
 info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
-info  - Using external babel configuration from /Users/emersonlaurentino/develop/vtex/faststore/packages/core/.babelrc
+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/7)
@@ -18,23 +24,23 @@ Route (pages)                              Size     First Load JS
 ┌ ● /                                      3.47 kB         126 kB
 ├   └ css/c7fc1f563fa33060.css             7.18 kB
 ├   /_app                                  0 B            77.8 kB
-├ ● /[...slug]                             10.4 kB         134 kB
+├ ● /[...slug]                             8.79 kB         134 kB
 ├   └ css/6e41f1b6078c14c1.css             7.9 kB
-├ ● /[slug]/p                              10.8 kB         134 kB
-├   └ css/8988ac07eb0af0ca.css             11 kB
+├ ● /[slug]/p                              11.1 kB         134 kB
+├   └ css/0f8ce5203de8ae6f.css             11.2 kB
 ├ ○ /404                                   1.09 kB         113 kB
 ├ ● /500                                   1.11 kB         113 kB
 ├ ● /account                               668 B           113 kB
 ├ λ /api/graphql                           0 B            77.8 kB
 ├ λ /api/preview                           0 B            77.8 kB
-├ ● /checkout                              658 B           113 kB
+├ ● /checkout                              657 B           113 kB
 ├ ● /login                                 1.01 kB         113 kB
-└ ● /s                                     1.11 kB         124 kB
+└ ● /s                                     1.11 kB         126 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-9ba6546d294eb768.js     2.21 kB
+  ├ chunks/webpack-c5cf5350bcb7f6f4.js     2.21 kB
   └ css/104f0f3ce3be32c6.css               2.79 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-lint.log

@@ -0,0 +1,2 @@
+$ next lint
+✔ No ESLint warnings or errors

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.1.0",
+  "version": "2.1.3",
   "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.1.0",
-    "@faststore/components": "^2.1.0",
-    "@faststore/graphql-utils": "^2.0.3-alpha.0",
-    "@faststore/sdk": "^2.1.0",
-    "@faststore/ui": "^2.1.0",
+    "@faststore/api": "^2.1.1",
+    "@faststore/components": "^2.1.1",
+    "@faststore/graphql-utils": "^2.1.1",
+    "@faststore/sdk": "^2.1.1",
+    "@faststore/ui": "^2.1.1",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
@@ -59,7 +59,7 @@
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.10",
-    "@faststore/eslint-config": "*",
+    "@faststore/eslint-config": "^2.1.1",
     "@faststore/lighthouse": "^1.12.32",
     "@graphql-codegen/cli": "^2.6.2",
     "@graphql-codegen/typescript": "^2.5.1",
@@ -108,5 +108,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "74ae411fa1f628ae68c2cdcacfb63b1383a86490"
+  "gitHead": "4c32807ee7a90ca5ee882dc9f97ee726132c9ec4"
 }

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

@@ -5,7 +5,14 @@ import {
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
 import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
 
-import ProductCard, { ProductCardProps } from '../ProductCard'
+import { ProductCardProps } from '../ProductCard'
+
+import {
+  Components,
+  Props,
+} from 'src/components/sections/ProductGallery/Overrides'
+
+const { __experimentalProductCard: ProductCard } = Components
 
 interface Props {
   /**
@@ -23,7 +30,15 @@ interface Props {
   productCard?: Pick<ProductCardProps, 'showDiscountBadge' | 'bordered'>
 }
 
-function ProductGrid({ products, page, pageSize, productCard }: Props) {
+function ProductGrid({
+  products,
+  page,
+  pageSize,
+  productCard: {
+    showDiscountBadge = Props['ProductCard'].showDiscountBadge,
+    bordered = Props['ProductCard'].bordered,
+  } = {},
+}: Props) {
   const aspectRatio = 1
 
   return (
@@ -35,16 +50,17 @@ function ProductGrid({ products, page, pageSize, productCard }: Props) {
         {products.map(({ node: product }, idx) => (
           <UIProductGridItem key={`${product.id}`}>
             <ProductCard
-              product={product}
-              index={pageSize * page + idx + 1}
-              bordered={productCard?.bordered}
-              showDiscountBadge={productCard?.showDiscountBadge}
               aspectRatio={aspectRatio}
               imgProps={{
                 width: 150,
                 height: 150,
                 sizes: '30vw',
               }}
+              {...Props['__experimentalProductCard']}
+              bordered={showDiscountBadge}
+              showDiscountBadge={bordered}
+              product={product}
+              index={pageSize * page + idx + 1}
             />
           </UIProductGridItem>
         ))}

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

@@ -1,12 +1,19 @@
 import { gql } from '@faststore/graphql-utils'
 import { useUI } from '@faststore/ui'
 import type { Filter_FacetsFragment } from '@generated/graphql'
-import { lazy, Suspense } from 'react'
+import { Suspense } from 'react'
 import { ProductGalleryProps } from 'src/components/ui/ProductGallery/ProductGallery'
-import FilterDesktop from './FilterDesktop'
 import { useFilter } from './useFilter'
 
-const FilterSlider = lazy(() => import('./FilterSlider'))
+import {
+  Components,
+  Props,
+} from 'src/components/sections/ProductGallery/Overrides'
+
+const {
+  __experimentalFilterDesktop: FilterDesktop,
+  __experimentalFilterSlider: FilterSlider,
+} = Components
 
 interface Props {
   /**
@@ -36,6 +43,7 @@ function Filter({
     <>
       <div className="hidden-mobile">
         <FilterDesktop
+          {...Props['__experimentalFilterDesktop']}
           {...filter}
           testId={testId}
           title={filterCmsData?.title}
@@ -45,6 +53,7 @@ function Filter({
       {displayFilter && (
         <Suspense fallback={null}>
           <FilterSlider
+            {...Props['__experimentalFilterSlider']}
             {...filter}
             testId={testId}
             title={filterCmsData?.title}

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

@@ -4,17 +4,53 @@ import {
   BuyButton as UIBuyButton,
   SkuSelector as UISkuSelector,
   ShippingSimulation as UIShippingSimulation,
+  Icon as UIIcon,
+  Price as UIPrice,
+  QuantitySelector as UIQuantitySelector,
+  ImageZoom as UIImageZoom,
+  ImageGallery as UIImageGallery,
 } from '@faststore/ui'
+import ImageGallery from 'src/components/ui/ImageGallery'
+import ShippingSimulation from 'src/components/ui/ShippingSimulation/ShippingSimulation'
+import { Image } from 'src/components/ui/Image'
 
 import ProductDetailsCustomizations from 'src/customizations/components/overrides/ProductDetails'
 
+const productDetailsComponentsCustomization = {}
+
+const productDetailsPropsCustomization = {} as any
+
+Object.entries(ProductDetailsCustomizations.components).forEach(
+  ([key, value]) => {
+    if (value.Component) {
+      productDetailsComponentsCustomization[key] = value.Component
+    }
+  }
+)
+
+Object.entries(ProductDetailsCustomizations.components).forEach(
+  ([key, value]) => {
+    if (value.props) {
+      productDetailsPropsCustomization[key] = value.props
+    }
+  }
+)
+
 const Components = {
   ProductTitle: UIProductTitle,
   DiscountBadge: UIDiscountBadge,
   BuyButton: UIBuyButton,
+  Icon: UIIcon,
+  Price: UIPrice,
+  QuantitySelector: UIQuantitySelector,
   SkuSelector: UISkuSelector,
   ShippingSimulation: UIShippingSimulation,
-  ...ProductDetailsCustomizations.components,
+  ImageGallery: UIImageGallery,
+  ImageZoom: UIImageZoom,
+  __experimentalImageGalleryImage: Image,
+  __experimentalImageGallery: ImageGallery,
+  __experimentalShippingSimulation: ShippingSimulation,
+  ...productDetailsComponentsCustomization,
 }
 
-export { Components }
+export { Components, productDetailsPropsCustomization as Props }

package/src/components/sections/ProductDetails/ProductDetails.tsx

@@ -4,7 +4,6 @@ import { gql } from '@faststore/graphql-utils'
 import { sendAnalyticsEvent } from '@faststore/sdk'
 import type { CurrencyCode, ViewItemEvent } from '@faststore/sdk'
 import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
-import { Link as UILink } from '@faststore/ui'
 
 import { useSession } from 'src/sdk/session'
 import { useProduct } from 'src/sdk/product/useProduct'
@@ -13,16 +12,22 @@ import type { AnalyticsItem } from 'src/sdk/analytics/types'
 
 import Section from '../Section'
 import OutOfStock from 'src/components/product/OutOfStock'
-import ImageGallery from 'src/components/ui/ImageGallery'
-import ShippingSimulation from 'src/components/ui/ShippingSimulation'
 import ProductDescription from 'src/components/ui/ProductDescription'
 import { ProductDetailsSettings } from 'src/components/ui/ProductDetails'
 
 import styles from './section.module.scss'
 
-import { Components } from 'src/components/sections/ProductDetails/Overrides'
+import {
+  Components,
+  Props,
+} from 'src/components/sections/ProductDetails/Overrides'
 
-const { ProductTitle, DiscountBadge } = Components
+const {
+  ProductTitle,
+  DiscountBadge,
+  __experimentalImageGallery: ImageGallery,
+  __experimentalShippingSimulation: ShippingSimulation,
+} = Components
 
 interface ProductDetailsContextProps {
   context: ProductDetailsFragment_ProductFragment
@@ -63,14 +68,28 @@ function ProductDetails({
   context: staleProduct,
   productTitle: {
     refNumber: showRefNumber,
-    discountBadge: { showDiscountBadge, size: discountBadgeSize },
+    discountBadge: {
+      showDiscountBadge,
+      size: discountBadgeSize = Props['DiscountBadge'].size,
+    },
   },
   buyButton: { icon: buyButtonIcon, title: buyButtonTitle },
   shippingSimulator: {
-    title: shippingSimulatorTitle,
-    inputLabel: shippingSimulatorInputLabel,
-    shippingOptionsTableTitle: shippingSimulatorOptionsTableTitle,
-    link: { to: shippingSimulatorLinkUrl, text: shippingSimulatorLinkText },
+    title: shippingSimulatorTitle = Props['__experimentalShippingSimulation']
+      .title,
+    inputLabel: shippingSimulatorInputLabel = Props[
+      '__experimentalShippingSimulation'
+    ].inputLabel,
+    shippingOptionsTableTitle: shippingSimulatorOptionsTableTitle = Props[
+      '__experimentalShippingSimulation'
+    ].optionsLabel,
+    link: {
+      to: shippingSimulatorLinkUrl = Props['__experimentalShippingSimulation']
+        .idkPostalCodeLinkProps?.href,
+      text: shippingSimulatorLinkText = Props[
+        '__experimentalShippingSimulation'
+      ].idkPostalCodeLinkProps?.children,
+    },
   },
   productDescription: {
     title: productDescriptionDetailsTitle,
@@ -149,13 +168,20 @@ function ProductDetails({
         <section data-fs-product-details-body>
           <header data-fs-product-details-title data-fs-product-details-section>
             <ProductTitle
+              // TODO: We should review this prop. There's now way to override the title and use the dynamic name value.
+              // Maybe passing a ProductTitleHeader component as a prop would be better, as it would be overridable.
+              // Maybe now it's worth to make title always a h1 and receive only the name, as it would be easier for users to override.
               title={<h1>{name}</h1>}
+              {...Props['ProductTitle']}
               label={
                 showDiscountBadge && (
                   <DiscountBadge
+                    {...Props['DiscountBadge']}
+                    size={discountBadgeSize}
+                    // Dynamic props shouldn't be overridable
+                    // This decision can be reviewed later if needed
                     listPrice={listPrice}
                     spotPrice={lowPrice}
-                    size={discountBadgeSize}
                   />
                 )
               }
@@ -164,6 +190,7 @@ function ProductDetails({
           </header>
           <ImageGallery
             data-fs-product-details-gallery
+            {...Props['__experimentalImageGallery']}
             images={productImages}
           />
           <section data-fs-product-details-info>
@@ -189,18 +216,20 @@ function ProductDetails({
               <ShippingSimulation
                 data-fs-product-details-section
                 data-fs-product-details-shipping
+                formatter={useFormattedPrice}
+                {...Props['__experimentalShippingSimulation']}
+                idkPostalCodeLinkProps={{
+                  ...Props['idkPostalCodeLinkProps'],
+                  href: shippingSimulatorLinkUrl,
+                  children: shippingSimulatorLinkText,
+                }}
                 productShippingInfo={{
                   id,
                   quantity,
                   seller: seller.identifier,
                 }}
-                formatter={useFormattedPrice}
                 title={shippingSimulatorTitle}
                 inputLabel={shippingSimulatorInputLabel}
-                idkPostalCodeLinkProps={{
-                  href: shippingSimulatorLinkUrl,
-                  children: shippingSimulatorLinkText,
-                }}
                 optionsLabel={shippingSimulatorOptionsTableTitle}
               />
             )}

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

@@ -15,6 +15,7 @@
   @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
   @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
   @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Rating/styles.scss";
   @import "@faststore/ui/src/components/molecules/ProductTitle/styles.scss";
   @import "@faststore/ui/src/components/molecules/QuantitySelector/styles.scss";
   @import "@faststore/ui/src/components/molecules/SkuSelector/styles.scss";

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

@@ -0,0 +1,52 @@
+import { lazy } from 'react'
+import {
+  Button as UIButton,
+  LinkButton as UILinkButton,
+  Skeleton as UISkeleton,
+  Icon as UIIcon,
+} from '@faststore/ui'
+import ProductCard from 'src/components/product/ProductCard'
+import FilterDesktop from 'src/components/search/Filter/FilterDesktop'
+
+const FilterSlider = lazy(
+  () => import('src/components/search/Filter/FilterSlider')
+)
+
+import ProductGalleryCustomizations from 'src/customizations/components/overrides/ProductGallery'
+
+const productGalleryComponentsCustomization = {}
+
+const productGalleryPropsCustomization = {} as any
+
+Object.entries(ProductGalleryCustomizations.components).forEach(
+  ([key, value]) => {
+    if (value.Component) {
+      productGalleryComponentsCustomization[key] = value.Component
+    }
+  }
+)
+
+Object.entries(ProductGalleryCustomizations.components).forEach(
+  ([key, value]) => {
+    if (value.props) {
+      productGalleryPropsCustomization[key] = value.props
+    }
+  }
+)
+
+const Components = {
+  Button: UIButton,
+  FilterIcon: UIIcon,
+  PrevIcon: UIIcon,
+  ResultsCountSkeleton: UISkeleton,
+  SortSkeleton: UISkeleton,
+  FilterButtonSkeleton: UISkeleton,
+  LinkButtonPrev: UILinkButton,
+  LinkButtonNext: UILinkButton,
+  __experimentalFilterDesktop: FilterDesktop,
+  __experimentalFilterSlider: FilterSlider,
+  __experimentalProductCard: ProductCard,
+  ...productGalleryComponentsCustomization,
+}
+
+export { Components, productGalleryPropsCustomization as Props }

package/src/components/ui/ImageGallery/ImageGallery.tsx

@@ -1,16 +1,18 @@
-import {
-  ImageElementData,
-  ImageZoom,
-  ImageGallery as UIImageGallery,
-} from '@faststore/ui'
+import { ImageElementData } from '@faststore/ui'
 import { useEffect, useState } from 'react'
 
 import { useRouter } from 'next/router'
-import { Image } from 'src/components/ui/Image'
 
-const ImageComponent = ({ url, alternateName }) => (
-  <Image src={url} alt={alternateName} width={68} height={68} />
-)
+import {
+  Components,
+  Props,
+} from 'src/components/sections/ProductDetails/Overrides'
+
+const ImageComponent = ({ url, alternateName }) => {
+  const { __experimentalImageGalleryImage: Image } = Components
+
+  return <Image src={url} alt={alternateName} width={68} height={68} />
+}
 
 export interface ImageGalleryProps {
   images: ImageElementData[]
@@ -23,25 +25,34 @@ const ImageGallery = ({ images, ...otherProps }: ImageGalleryProps) => {
 
   useEffect(() => setSelectedImageIdx(0), [dynamicRoute])
 
+  // Deconstructing the object to avoid circular dependency errors
+  const {
+    ImageGallery: ImageGalleryWrapper,
+    ImageZoom,
+    __experimentalImageGalleryImage: Image,
+  } = Components
+
   return (
-    <UIImageGallery
+    <ImageGalleryWrapper
+      {...Props['ImageGallery']}
       images={images}
       ImageComponent={ImageComponent}
       selectedImageIdx={selectedImageIdx}
       setSelectedImageIdx={setSelectedImageIdx}
       {...otherProps}
     >
-      <ImageZoom>
+      <ImageZoom {...Props['ImageZoom']}>
         <Image
-          src={currentImage.url}
-          alt={currentImage.alternateName}
           sizes="(max-width: 360px) 50vw, (max-width: 768px) 90vw, 50vw"
           width={691}
           height={691 * (3 / 4)}
           loading="eager"
+          {...Props['__experimentalImageGalleryImage']}
+          src={currentImage.url}
+          alt={currentImage.alternateName}
         />
       </ImageZoom>
-    </UIImageGallery>
+    </ImageGalleryWrapper>
   )
 }
 

package/src/components/ui/ProductDetails/ProductDetailsSettings.tsx

@@ -1,11 +1,5 @@
 import type { Dispatch, SetStateAction } from 'react'
 
-import {
-  Icon as UIIcon,
-  Price as UIPrice,
-  QuantitySelector as UIQuantitySelector,
-} from '@faststore/ui'
-
 import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
 
 import { useBuyButton } from 'src/sdk/cart/useBuyButton'
@@ -14,9 +8,12 @@ import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import Selectors from 'src/components/ui/SkuSelector'
 import AddToCartLoadingSkeleton from './AddToCartLoadingSkeleton'
 
-import { Components } from 'src/components/sections/ProductDetails/Overrides'
+import {
+  Components,
+  Props,
+} from 'src/components/sections/ProductDetails/Overrides'
 
-const { BuyButton } = Components
+const { BuyButton, Icon, Price, QuantitySelector } = Components
 
 interface ProductDetailsSettingsProps {
   product: ProductDetailsFragment_ProductFragment
@@ -36,7 +33,10 @@ function ProductDetailsSettings({
   isValidating,
   quantity,
   setQuantity,
-  buyButtonIcon: { icon: buyButtonIconName, alt: buyButtonIconAlt },
+  buyButtonIcon: {
+    icon: buyButtonIconName = Props['Icon'].name,
+    alt: buyButtonIconAlt = Props['Icon']['aria-label'],
+  },
 }: ProductDetailsSettingsProps) {
   const {
     id,
@@ -77,25 +77,34 @@ function ProductDetailsSettings({
     <>
       <section data-fs-product-details-values>
         <div data-fs-product-details-prices>
-          <UIPrice
-            value={listPrice}
+          <Price
             formatter={useFormattedPrice}
             testId="list-price"
-            data-value={listPrice}
             variant="listing"
             SRText="Original price:"
+            {...Props['Price']}
+            value={listPrice}
+            data-value={listPrice}
           />
-          <UIPrice
-            value={lowPrice}
+          <Price
             formatter={useFormattedPrice}
             testId="price"
-            data-value={lowPrice}
             variant="spot"
             className="text__lead"
             SRText="Sale Price:"
+            {...Props['Price']}
+            value={lowPrice}
+            data-value={lowPrice}
           />
         </div>
-        <UIQuantitySelector min={1} max={10} onChange={setQuantity} />
+        <QuantitySelector
+          min={1}
+          max={10}
+          {...Props['QuantitySelector']}
+          // Dynamic props shouldn't be overridable
+          // This decision can be reviewed later if needed
+          onChange={setQuantity}
+        />
       </section>
       {skuVariants && (
         <Selectors
@@ -114,10 +123,15 @@ function ProductDetailsSettings({
           <AddToCartLoadingSkeleton />
         ) : (
           <BuyButton
-            disabled={buyDisabled}
+            {...Props['BuyButton']}
             icon={
-              <UIIcon aria-label={buyButtonIconAlt} name={buyButtonIconName} />
+              <Icon
+                {...Props['Icon']}
+                aria-label={buyButtonIconAlt}
+                name={buyButtonIconName}
+              />
             }
+            disabled={buyDisabled}
             {...buyProps}
           >
             {buyButtonTitle || 'Add to Cart'}