@faststore/core 2.1.83 → 2.2.0-alpha.0

package/api/index.ts

@@ -0,0 +1,15 @@
+export { gql } from '@faststore/graphql-utils'
+export type {
+  StoreAggregateOfferRoot,
+  StorePropertyValueRoot,
+  StoreCollectionRoot,
+  StoreFacetRoot,
+  StoreSearchResultRoot,
+  StoreSeoRoot,
+  StoreShippingSLARoot,
+  StoreOfferRoot,
+  StoreSkuVariationsRoot,
+  StoreProductGroupRoot,
+  StoreProductRoot,
+  StoreOrganizationRoot,
+} from '@faststore/api'

package/codegen.yml

@@ -1,5 +1,6 @@
 overwrite: true
-schema: http://localhost:3000/api/graphql
+errorsOnly: true
+schema: ./@generated/graphql/schema.graphql
 documents:
   - ./src/**/*.{ts,tsx}
 config:

package/generate.sh

@@ -0,0 +1,71 @@
+#!/bin/sh
+
+# ANSI color codes
+RED='\033[0;31m'
+YELLOW='\033[1;33m'
+PURPLE='\033[0;35m'
+GREEN='\033[0;32m'
+NC='\033[0m' # No Color
+
+# Initialize debug flag to false
+DEBUG_FLAG=false
+
+# Check for --debug flag
+if [ "$1" = "--debug" ]; then
+    DEBUG_FLAG=true
+fi
+
+# Function to display errors with readable messages
+show_error() {
+    local cmd="$3"
+
+    echo "${RED}error${NC} $1"
+    if [ "$DEBUG_FLAG" = "true" ]; then
+        echo "${PURPLE}DEBUG - \$ $cmd ${RED}error root ↓${NC}\n$2"
+    fi
+    exit 1
+}
+
+# Function to display warnings
+show_warning() {
+    local cmd="$3"
+
+    echo "${YELLOW}warn${NC} $1"
+    if [ "$DEBUG_FLAG" = "true" ]; then
+        echo "${PURPLE}DEBUG - \$ $cmd ${YELLOW}warn root ↓${NC}\n$2"
+    fi
+}
+
+# Function to run a command and handle errors and warnings
+run_command() {
+    local cmd="$1"
+    local error_message="$2"
+    local warn="$3"
+    local output
+
+    if [ "$DEBUG_FLAG" = "true" ]; then
+        output="$($cmd --debug --verbose 2>&1)"
+    else
+        output="$($cmd 2>&1)"
+    fi
+
+    local exit_code="$?"
+    if [ "$warn" = "true" ]; then
+        if [ "$exit_code" -ne 0 ]; then
+            show_warning "$error_message" "$output" "$cmd"
+        fi
+    elif [ "$exit_code" -ne 0 ]; then
+        show_error "$error_message" "$output" "$cmd"
+    fi
+}
+
+# Run "yarn generate:schema" without outputting logs and errors
+run_command "yarn generate:schema" "Failed to run 'yarn generate:schema'. Please check your setup." "false"
+
+# Run graphql-codegen and capture the output
+run_command "graphql-codegen" "GraphQL was not optimized and TS files were not updated. Changes in the GraphQL layer did not take effect" "false"
+
+# Run "yarn format:generated" and display a warning if it produces output
+run_command "yarn format:generated" "Failed to format generated files. 'yarn format:generated' thrown errors" "true"
+
+echo "${GREEN}GraphQL schema, types, and optimizations successfully generated 🎉${NC}"

package/index.ts

@@ -0,0 +1,15 @@
+export {
+  usePage,
+  usePDP,
+  usePLP,
+  useSearchPage,
+  isPDP,
+  isPLP,
+  isSearchPage,
+} from './src/sdk/overrides/PageProvider'
+
+export type {
+  PDPContext,
+  PLPContext,
+  SearchPageContext,
+} from './src/sdk/overrides/PageProvider'

package/jest.config.js

@@ -0,0 +1,6 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testPathIgnorePatterns: ['/node_modules/', 'cypress/'],
+  modulePaths: ['<rootDir>/test'],
+}

package/package.json

@@ -1,17 +1,23 @@
 {
   "name": "@faststore/core",
-  "version": "2.1.83",
+  "version": "2.2.0-alpha.0",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
+  "exports": {
+    ".": "./index.ts"
+  },
   "scripts": {
-    "generate": "graphql-codegen",
-    "build": "yarn partytown && next build",
-    "dev": "yarn partytown && next dev",
+    "generate:schema": "tsx src/server/generator/generateGraphQLSchemaFile.ts",
+    "generate": "./generate.sh",
+    "build": "yarn partytown & yarn generate && next build",
+    "dev": "yarn partytown & yarn generate && next dev",
     "clean": "rm -r .next",
     "serve": "next start",
-    "test": "cypress open",
+    "test:e2e": "cypress open",
+    "test": "tsdx test",
     "lhci": "lhci autorun",
     "format": "prettier --write \"**/*.{ts,js,tsx,jsx,json}\"",
+    "format:generated": "prettier --write \"@generated/**/*.{ts,js,tsx,jsx,json}\" --loglevel error",
     "lint": "next lint",
     "stylelint": "stylelint \"**/*.scss\"",
     "stylelint:fix": "stylelint \"**/*.scss\" --fix",
@@ -29,16 +35,24 @@
     "@envelop/graphql-jit": "^1.1.1",
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
-    "@faststore/api": "^2.1.83",
-    "@faststore/components": "^2.1.82",
-    "@faststore/graphql-utils": "^2.1.82",
-    "@faststore/sdk": "^2.1.82",
-    "@faststore/ui": "^2.1.82",
+    "@faststore/api": "^2.2.0-alpha.0",
+    "@faststore/components": "^2.2.0-alpha.0",
+    "@faststore/graphql-utils": "^2.2.0-alpha.0",
+    "@faststore/sdk": "^2.2.0-alpha.0",
+    "@faststore/ui": "^2.2.0-alpha.0",
+    "@graphql-codegen/cli": "^3.3.1",
+    "@graphql-codegen/typescript": "^3.0.4",
+    "@graphql-codegen/typescript-operations": "^3.0.4",
+    "@graphql-tools/load-files": "^7.0.0",
+    "@graphql-tools/merge": "^9.0.0",
+    "@graphql-tools/utils": "^9.2.1",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
+    "@vtex/prettier-config": "1.0.0",
     "autoprefixer": "^10.4.0",
     "chalk": "^5.2.0",
     "css-loader": "^6.7.1",
+    "deepmerge": "^4.3.1",
     "draft-js": "^0.11.7",
     "draft-js-export-html": "^1.4.1",
     "graphql": "^15.0.0",
@@ -48,6 +62,7 @@
     "next-seo": "^5.4.0",
     "nextjs-progressbar": "^0.0.14",
     "postcss": "^8.4.4",
+    "prettier": "^2.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^8.32.5",
@@ -57,15 +72,14 @@
     "style-loader": "^3.3.1",
     "swr": "^1.3.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "tsx": "^3.12.7",
     "typescript": "4.7.3"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.10",
-    "@faststore/eslint-config": "^2.1.82",
+    "@envelop/testing": "^6.0.0",
+    "@faststore/eslint-config": "^2.2.0-alpha.0",
     "@faststore/lighthouse": "^1.12.32",
-    "@graphql-codegen/cli": "^2.6.2",
-    "@graphql-codegen/typescript": "^2.5.1",
-    "@graphql-codegen/typescript-operations": "^2.4.2",
     "@lhci/cli": "^0.9.0",
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-actions": "^6.5.9",
@@ -76,7 +90,7 @@
     "@storybook/react": "^6.5.9",
     "@testing-library/cypress": "^8.0.0",
     "@types/cypress": "^1.1.3",
-    "@vtex/prettier-config": "1.0.0",
+    "@types/jest": "29.1.0",
     "axe-core": "^4.3.3",
     "cypress": "9.6.0",
     "cypress-axe": "^0.13.0",
@@ -85,15 +99,16 @@
     "eslint": "^7.32.0",
     "husky": "^5.2.0",
     "is-ci": "^3.0.0",
+    "jest": "29.1.0",
     "lint-staged": "^10.5.4",
     "msw-storybook-addon": "^1.6.3",
-    "prettier": "^2.2.0",
     "stylelint": "^14.6.0",
     "stylelint-config-recess-order": "^3.0.0",
     "stylelint-config-standard": "^24.0.0",
     "stylelint-config-standard-scss": "^3.0.0",
     "stylelint-order": "^5.0.0",
-    "stylelint-scss": "^4.0.1"
+    "stylelint-scss": "^4.0.1",
+    "ts-jest": "29.1.0"
   },
   "lint-staged": {
     "*.{ts,js,tsx,jsx}": [
@@ -110,5 +125,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "a55301974a0ab1894b32414d372091d956fbc17b"
+  "gitHead": "356e52b6eae13cc4000c6915985009d45e7ae0c6"
 }

package/src/components/ThirdPartyScripts/ThirdPartyScripts.tsx

@@ -1,5 +1,5 @@
 import { Partytown } from '@builder.io/partytown/react'
-import OverrideComponents from 'src/customizations/GlobalOverrides'
+
 import storeConfig from '../../../faststore.config'
 import GoogleTagManager from './GoogleTagManager'
 import VTEX from './vtex'
@@ -26,7 +26,6 @@ function ThirdPartyScripts() {
     <>
       {includeGTM && <GoogleTagManager containerId={gtmContainerId} />}
       {includeVTEX && <VTEX />}
-      <OverrideComponents.ThirdPartyScripts />
       <Partytown
         key="partytown"
         // Variables to forward to from main to worker

package/src/components/cms/RenderSections.tsx

@@ -1,5 +1,5 @@
 import chalk from 'chalk'
-import { ComponentType, PropsWithChildren, useMemo } from 'react'
+import { ComponentType, PropsWithChildren, memo, useMemo } from 'react'
 
 import SectionBoundary from './SectionBoundary'
 import { Section } from '@vtex/client-cms'
@@ -7,7 +7,6 @@ import { Section } from '@vtex/client-cms'
 interface Props {
   components: Record<string, ComponentType<any>>
   sections: Array<{ name: string; data: any }>
-  context?: unknown
 }
 
 const useDividedSections = (sections: Section[]) => {
@@ -23,7 +22,7 @@ const useDividedSections = (sections: Section[]) => {
   }, [sections])
 }
 
-const RenderSectionsBase = ({ sections = [], context, components }: Props) => {
+const RenderSectionsBase = ({ sections = [], components }: Props) => {
   return (
     <>
       {sections.map(({ name, data }, index) => {
@@ -42,7 +41,7 @@ const RenderSectionsBase = ({ sections = [], context, components }: Props) => {
 
         return (
           <SectionBoundary key={`cms-section-${index}`} name={name}>
-            <Component {...data} context={context} />
+            <Component {...data} />
           </SectionBoundary>
         )
       })}
@@ -71,4 +70,4 @@ function RenderSections({
   )
 }
 
-export default RenderSections
+export default memo(RenderSections)

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

@@ -2,18 +2,19 @@ import {
   ProductGrid as UIProductGrid,
   ProductGridItem as UIProductGridItem,
 } from '@faststore/ui'
-import type { ProductSummary_ProductFragment } from '@generated/graphql'
+import type { ClientProductsQueryQuery } from '@generated/graphql'
 import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
 
 import { ProductCardProps } from '../ProductCard'
 
 import { __experimentalProductCard as ProductCard } from 'src/components/sections/ProductGallery/Overrides'
+import { memo } from 'react'
 
 interface Props {
   /**
    * Products listed on the grid.
    */
-  products: Array<{ node: ProductSummary_ProductFragment }>
+  products: ClientProductsQueryQuery['search']['products']['edges']
   page: number
   /**
    * Quantity of products listed.
@@ -64,4 +65,4 @@ function ProductGrid({
   )
 }
 
-export default ProductGrid
+export default memo(ProductGrid)

package/src/components/sections/Breadcrumb/Breadcrumb.tsx

@@ -4,36 +4,31 @@ import Breadcrumb from 'src/components/ui/Breadcrumb'
 
 import Section from '../Section'
 
-import {
-  ServerCollectionPageQueryQuery,
-  ServerProductPageQueryQuery,
-} from '@generated/graphql'
 import styles from './section.module.scss'
-
-type BreadcrumbContext =
-  | ServerProductPageQueryQuery['product']
-  | ServerCollectionPageQueryQuery['collection']
+import {
+  PDPContext,
+  PLPContext,
+  isPDP,
+  isPLP,
+  usePage,
+} from 'src/sdk/overrides/PageProvider'
 
 interface BreadcrumbSectionProps {
-  context?: BreadcrumbContext
   icon: string
   alt: string
 }
 
-const isProduct = (x: any): x is ServerProductPageQueryQuery['product'] =>
-  x?.sku != undefined && x?.sku != null
-const isCollection = (
-  x: any
-): x is ServerCollectionPageQueryQuery['collection'] =>
-  x?.seo != undefined && x?.seo != null && x?.sku == undefined
-
-function BreadcrumbSection({ context, ...otherProps }: BreadcrumbSectionProps) {
-  const title = isCollection(context) ? context?.seo?.title : 'All Products'
+function BreadcrumbSection({ ...otherProps }: BreadcrumbSectionProps) {
+  const context = usePage<PDPContext | PLPContext>()
+  const title = isPLP(context)
+    ? context?.data?.collection?.seo?.title
+    : 'All Products'
   const fallback = [{ item: '/', name: title, position: 1 }]
-  const breadcrumbList = isProduct(context)
-    ? context?.breadcrumbList?.itemListElement
-    : isCollection(context)
-    ? context?.breadcrumbList?.itemListElement
+
+  const breadcrumbList = isPDP(context)
+    ? context?.data?.product?.breadcrumbList?.itemListElement
+    : isPLP(context)
+    ? context?.data?.collection?.breadcrumbList?.itemListElement
     : fallback
 
   return (

package/src/components/sections/CrossSellingShelf/CrossSellingShelf.tsx

@@ -1,24 +1,26 @@
 import { useMemo } from 'react'
 
-import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
 import UIProductShelf from 'src/components/ui/ProductShelf'
 import { useInView } from 'react-intersection-observer'
+import { useProductsQuery } from 'src/sdk/product/useProductsQuery'
+import { usePDP } from 'src/sdk/overrides/PageProvider'
 import styles from '../ProductShelf/section.module.scss'
 import Section from '../Section'
 
 interface Props {
   items: number
   title: string
-  context: ProductDetailsFragment_ProductFragment
   kind: 'buy' | 'view'
 }
 
-const CrossSellingShelf = ({ items, title, context, kind }: Props) => {
+const CrossSellingShelf = ({ items: first, title, kind }: Props) => {
   const { ref, inView } = useInView()
+  const context = usePDP()
+  const productGroupID = context?.data?.product?.isVariantOf?.productGroupID
 
   const selectedFacets = useMemo(
-    () => [{ key: kind, value: context.isVariantOf.productGroupID }],
-    [kind, context.isVariantOf.productGroupID]
+    () => [{ key: kind, value: productGroupID }],
+    [kind, productGroupID]
   )
 
   return (
@@ -28,7 +30,7 @@ const CrossSellingShelf = ({ items, title, context, kind }: Props) => {
     >
       <UIProductShelf
         inView={inView}
-        first={items}
+        first={first}
         title={title}
         selectedFacets={selectedFacets}
       />

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

@@ -1,14 +1,12 @@
 import { useEffect, useState } from 'react'
 
 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 { sendAnalyticsEvent } from '@faststore/sdk'
 
-import { useSession } from 'src/sdk/session'
-import { useProduct } from 'src/sdk/product/useProduct'
-import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import type { AnalyticsItem } from 'src/sdk/analytics/types'
+import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
+import { useSession } from 'src/sdk/session'
 
 import Section from '../Section'
 import ProductDescription from 'src/components/ui/ProductDescription'
@@ -17,15 +15,13 @@ import { ProductDetailsSettings } from 'src/components/ui/ProductDetails'
 import styles from './section.module.scss'
 
 import {
-  ProductTitle,
   DiscountBadge,
+  ProductTitle,
   __experimentalImageGallery as ImageGallery,
   __experimentalShippingSimulation as ShippingSimulation,
 } from 'src/components/sections/ProductDetails/Overrides'
 
-interface ProductDetailsContextProps {
-  context: ProductDetailsFragment_ProductFragment
-}
+import { usePDP } from 'src/sdk/overrides/PageProvider'
 
 export interface ProductDetailsProps {
   productTitle: {
@@ -59,7 +55,6 @@ export interface ProductDetailsProps {
 }
 
 function ProductDetails({
-  context: staleProduct,
   productTitle: {
     refNumber: showRefNumber,
     discountBadge: {
@@ -87,36 +82,31 @@ function ProductDetails({
     initiallyExpanded: productDescriptionInitiallyExpanded,
     displayDescription: shouldDisplayProductDescription,
   },
-}: ProductDetailsProps & ProductDetailsContextProps) {
+}: ProductDetailsProps) {
   const { currency } = useSession()
   const [quantity, setQuantity] = useState(1)
+  const context = usePDP()
+  const { product, isValidating } = context?.data
 
-  // Stale while revalidate the product for fetching the new price etc
-  const { data, isValidating } = useProduct(staleProduct.id, {
-    product: staleProduct,
-  })
-
-  if (!data) {
+  if (!product) {
     throw new Error('NotFound')
   }
 
   const {
-    product: {
-      id,
-      sku,
-      gtin,
-      name: variantName,
-      brand,
-      isVariantOf,
-      description,
-      isVariantOf: { name, productGroupID: productId },
-      image: productImages,
-      offers: {
-        offers: [{ availability, price, listPrice, seller }],
-        lowPrice,
-      },
+    id,
+    sku,
+    gtin,
+    name: variantName,
+    brand,
+    isVariantOf,
+    description,
+    isVariantOf: { name, productGroupID: productId },
+    image: productImages,
+    offers: {
+      offers: [{ availability, price, listPrice, seller }],
+      lowPrice,
     },
-  } = data
+  } = product
 
   useEffect(() => {
     sendAnalyticsEvent<ViewItemEvent<AnalyticsItem>>({
@@ -191,7 +181,7 @@ function ProductDetails({
             >
               {!outOfStock ? (
                 <ProductDetailsSettings
-                  product={data.product}
+                  product={product}
                   isValidating={isValidating}
                   buyButtonTitle={buyButtonTitle}
                   quantity={quantity}

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

@@ -1,19 +1,20 @@
 import { mark } from 'src/sdk/tests/mark'
 
-import { ServerCollectionPageQueryQuery } from '@generated/graphql'
 import ProductGallery, {
   ProductGalleryProps,
 } from 'src/components/ui/ProductGallery/ProductGallery'
-import { SearchPageContextType } from 'src/pages/s'
 import Section from '../Section'
 import EmptyGallery from './EmptyGallery'
 import styles from './section.module.scss'
-import { useGalleryQuery } from './useGalleryQuery'
-
-type ProductGalleryContext = ServerCollectionPageQueryQuery['collection']
+import {
+  PLPContext,
+  SearchPageContext,
+  isPLP,
+  isSearchPage,
+  usePage,
+} from 'src/sdk/overrides/PageProvider'
 
 export interface ProductGallerySectionProps {
-  context?: ProductGalleryContext
   searchTermLabel?: ProductGalleryProps['searchTermLabel']
   totalCountLabel?: ProductGalleryProps['totalCountLabel']
   filter: ProductGalleryProps['filter']
@@ -24,28 +25,17 @@ export interface ProductGallerySectionProps {
   productCard?: ProductGalleryProps['productCard']
 }
 
-const isSearch = (x: any): x is SearchPageContextType =>
-  x === undefined || x?.title != undefined || x?.searchTerm != undefined
-const isCollection = (
-  x: any
-): x is ServerCollectionPageQueryQuery['collection'] =>
-  x?.seo != undefined && x?.seo != null && x?.sku == undefined
-
-function ProductGallerySection({
-  context,
-  ...otherProps
-}: ProductGallerySectionProps) {
-  const [title, searchTerm] = isSearch(context)
-    ? [context?.title, context?.searchTerm]
-    : isCollection(context)
-    ? [context?.seo?.title]
+function ProductGallerySection({ ...otherProps }: ProductGallerySectionProps) {
+  const context = usePage<SearchPageContext | PLPContext>()
+  const [title, searchTerm] = isSearchPage(context)
+    ? [context?.data?.title, context?.data?.searchTerm]
+    : isPLP(context)
+    ? [context?.data?.collection?.seo?.title]
     : ['']
 
-  const { data: productGalleryData } = useGalleryQuery()
-  const totalCount =
-    productGalleryData?.search.products.pageInfo.totalCount ?? 0
+  const totalCount = context?.data?.search?.products?.pageInfo?.totalCount ?? 0
 
-  if (productGalleryData && totalCount === 0) {
+  if (context?.data?.search?.products && totalCount === 0) {
     return (
       <Section className={`${styles.section} section-product-gallery`}>
         <section data-testid="product-gallery" data-fs-product-listing>
@@ -62,7 +52,6 @@ function ProductGallerySection({
       <ProductGallery
         title={title}
         searchTerm={searchTerm}
-        productGalleryData={productGalleryData}
         totalCount={totalCount}
         {...otherProps}
       />

package/src/components/sections/ProductShelf/ProductShelf.tsx

@@ -1,8 +1,8 @@
 import { useInView } from 'react-intersection-observer'
 import Section from '../Section'
 
-import styles from './section.module.scss'
 import ProductShelf, { ProductShelfProps } from 'src/components/ui/ProductShelf'
+import styles from './section.module.scss'
 
 function ProductShelfSection({
   ...otherProps

package/src/components/sections/ProductTiles/ProductTiles.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { useInView } from 'react-intersection-observer'
 
-import type { ProductsQueryQueryVariables } from '@generated/graphql'
+import type { ClientProductsQueryQueryVariables } from '@generated/graphql'
 import ProductCard from 'src/components/product/ProductCard'
 import ProductTilesSkeleton from 'src/components/skeletons/ProductTilesSkeleton'
 import Tiles, { Tile } from 'src/components/ui/Tiles'
@@ -12,7 +12,7 @@ import Section from '../Section'
 
 import styles from './section.module.scss'
 
-interface ProductTilesProps extends Partial<ProductsQueryQueryVariables> {
+interface ProductTilesProps extends Partial<ClientProductsQueryQueryVariables> {
   title: string
 }
 
@@ -56,7 +56,8 @@ const getSizes = (products: number, idx: number) => {
 const ProductTiles = ({ title, ...variables }: ProductTilesProps) => {
   const viewedOnce = useRef(false)
   const { ref, inView } = useInView()
-  const products = useProductsQuery(variables)
+  const data = useProductsQuery(variables)
+  const products = data?.search?.products
   const productEdges = products?.edges ?? []
 
   const { sendViewItemListEvent } = useViewItemListEvent({