@faststore/core 3.0.89 → 3.0.93

package/.turbo/turbo-build.log

@@ -75,7 +75,7 @@ Route (pages)                              Size     First Load JS
   ├ chunks/framework-8e279965036b6169.js   45.4 kB
   ├ chunks/main-6f63f6746cc029db.js        33.1 kB
   ├ chunks/pages/_app-c25fabc2435c8961.js  12.6 kB
-  ├ chunks/webpack-63df43b7e99450a0.js     2.45 kB
+  ├ chunks/webpack-91a2417668848fcd.js     2.45 kB
   └ css/ee0556daedda6306.css               3.07 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-test.log

@@ -1,10 +1,10 @@
 $ jest
-PASS test/utils/multipleTemplates.test.ts (31.543 s)
-PASS test/server/cms/index.test.ts (32.238 s)
-PASS test/server/index.test.ts (35.345 s)
+PASS test/utils/multipleTemplates.test.ts (31.495 s)
+PASS test/server/cms/index.test.ts (31.977 s)
+PASS test/server/index.test.ts (33.746 s)
 
 Test Suites: 3 passed, 3 total
 Tests:       19 passed, 19 total
 Snapshots:   0 total
-Time:        36.379 s
+Time:        34.811 s
 Ran all test suites.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.0.89",
+  "version": "3.0.93",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -130,5 +130,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "ade8691a5faef6c3a490ddc4e624d6742e311d6b"
+  "gitHead": "32c36b739087214e8abb6a78da4623033143ec97"
 }

package/src/components/cms/SectionBoundary.tsx

@@ -1,11 +1,24 @@
 import { Component } from 'react'
 import type { ErrorInfo, ReactNode } from 'react'
 
-class SectionBoundary extends Component<{
+interface ErrorBoundaryProps {
   children: ReactNode
   name: string
-}> {
-  public state = { hasError: false, error: null }
+}
+
+interface ErrorBoundaryState {
+  hasError: Boolean
+  error: Error | null
+}
+
+class SectionBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  public state: ErrorBoundaryState = {
+    hasError: false,
+    error: null,
+  }
 
   public static getDerivedStateFromError(error: Error) {
     return {

package/src/components/common/Footer/Footer.tsx

@@ -1,14 +1,19 @@
+import { ReactNode } from 'react'
 import { mark } from 'src/sdk/tests/mark'
 
-export function FooterInfo({ children }) {
+interface FooterProps {
+  children: ReactNode
+}
+
+export function FooterInfo({ children }: FooterProps) {
   return <div data-fs-footer-info>{children}</div>
 }
 
-export function FooterNavigation({ children }) {
+export function FooterNavigation({ children }: FooterProps) {
   return <div data-fs-footer-navigation>{children}</div>
 }
 
-export function Footer({ children }) {
+export function Footer({ children }: FooterProps) {
   return (
     <footer
       data-fs-footer

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

@@ -11,7 +11,6 @@ import NavbarSlider from 'src/components/navigation/NavbarSlider'
 import CartToggle from 'src/components/cart/CartToggle'
 import Logo from 'src/components/ui/Logo'
 import Link from 'src/components/ui/Link'
-import { ButtonSignIn } from 'src/components/ui/Button'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
 import type { NavbarProps as SectionNavbarProps } from '../../sections/Navbar'
@@ -77,6 +76,7 @@ function Navbar({
     NavbarRow,
     NavbarButtons,
     IconButton,
+    _experimentalButtonSignIn: ButtonSignIn,
   } = useOverrideComponents<'Navbar'>()
   const scrollDirection = useScrollDirection()
   const { openNavbar, navbar: displayNavbar } = useUI()
@@ -152,7 +152,7 @@ function Navbar({
               aria-hidden={!searchExpanded}
             />
 
-            <ButtonSignIn {...signInButton} />
+            <ButtonSignIn.Component {...signInButton} />
 
             <CartToggle {...cart} />
           </NavbarButtons.Component>

package/src/components/navigation/NavbarSlider/NavbarSlider.tsx

@@ -1,7 +1,7 @@
 import { useFadeEffect, useUI } from '@faststore/ui'
 import { Suspense } from 'react'
 
-import { ButtonSignIn, ButtonSignInFallback } from 'src/components/ui/Button'
+import { ButtonSignInFallback } from 'src/components/ui/Button'
 import Link from 'src/components/ui/Link'
 import NavbarLinks from 'src/components/navigation/NavbarLinks'
 import Logo from 'src/components/ui/Logo'
@@ -32,6 +32,7 @@ function NavbarSlider({
     NavbarSliderHeader,
     NavbarSliderContent,
     NavbarSliderFooter,
+    _experimentalButtonSignIn: ButtonSignIn,
   } = useOverrideComponents<'Navbar'>()
 
   const { closeNavbar } = useUI()
@@ -65,7 +66,7 @@ function NavbarSlider({
       </NavbarSliderContent.Component>
       <NavbarSliderFooter.Component {...NavbarSliderFooter.props}>
         <Suspense fallback={<ButtonSignInFallback />}>
-          <ButtonSignIn {...signInButton} />
+          <ButtonSignIn.Component {...signInButton} />
         </Suspense>
       </NavbarSliderFooter.Component>
     </NavbarSliderWrapper.Component>

package/src/components/search/SearchDropdown/SearchDropdown.tsx

@@ -14,7 +14,12 @@ import { ProductSummary_ProductFragment } from '@generated/graphql'
 import SearchProductItem from 'src/components/search/SearchProductItem'
 import { formatSearchPath } from 'src/sdk/search/formatSearchPath'
 
-function SearchDropdown({ sort, ...otherProps }) {
+interface SearchDropdownProps {
+  sort: SearchState['sort']
+  [key: string]: any
+}
+
+function SearchDropdown({ sort, ...otherProps }: SearchDropdownProps) {
   const {
     values: { onSearchSelection, products, term, terms },
   } = useSearch()
@@ -32,14 +37,14 @@ function SearchDropdown({ sort, ...otherProps }) {
             linkProps={{
               href: formatSearchPath({
                 term: suggestion,
-                sort: sort as SearchState['sort'],
+                sort,
               }),
               onClick: () =>
                 onSearchSelection?.(
                   suggestion,
                   formatSearchPath({
                     term: suggestion,
-                    sort: sort as SearchState['sort'],
+                    sort,
                   })
                 ),
             }}

package/src/components/search/SearchInput/SearchInput.tsx

@@ -1,5 +1,6 @@
 import type { SearchEvent, SearchState } from '@faststore/sdk'
 import { sendAnalyticsEvent } from '@faststore/sdk'
+
 import type {
   SearchInputFieldProps as UISearchInputFieldProps,
   SearchInputFieldRef as UISearchInputFieldRef,
@@ -133,7 +134,7 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
 
         {searchDropdownVisible && (
           <Suspense fallback={null}>
-            <SearchDropdown sort={sort} />
+            <SearchDropdown sort={sort as SearchState['sort']} />
           </Suspense>
         )}
       </UISearchInput>

package/src/components/search/Sort/Sort.tsx

@@ -27,13 +27,18 @@ export interface SortProps {
   }
 }
 
+type SortOptionKeys = keyof SortProps['options']
+
 function Sort({ label = 'Sort by', options = OptionsMap }: SortProps) {
   const { state, setState } = useSearch()
 
-  const optionsMap = Object.keys(options).reduce((acc, currentKey) => {
-    acc[currentKey] = options[currentKey] ?? OptionsMap[currentKey]
-    return acc
-  }, {})
+  const optionsMap = Object.keys(options).reduce(
+    (acc, currentKey: SortOptionKeys) => {
+      acc[currentKey] = options[currentKey] ?? OptionsMap[currentKey]
+      return acc
+    },
+    {} as Record<SortOptionKeys, string>
+  )
 
   return (
     <SelectField

package/src/components/sections/Navbar/DefaultComponents.ts

@@ -12,6 +12,8 @@ import {
   IconButton as UIIconButton,
 } from '@faststore/ui'
 
+import { ButtonSignIn } from 'src/components/ui/Button'
+
 export const NavbarDefaultComponents = {
   Navbar: UINavbar,
   NavbarLinks: UINavbarLinks,
@@ -24,4 +26,5 @@ export const NavbarDefaultComponents = {
   NavbarRow: UINavbarRow,
   NavbarButtons: UINavbarButtons,
   IconButton: UIIconButton,
+  _experimentalButtonSignIn: ButtonSignIn,
 } as const

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

@@ -100,7 +100,7 @@ export const getLandingPageBySlug = async (
   try {
     if (storeConfig.cms.data) {
       const cmsData = JSON.parse(storeConfig.cms.data)
-      const pageBySlug = cmsData['landingPage'].find((page) => {
+      const pageBySlug = cmsData['landingPage'].find((page: any) => {
         slug === page.settings?.seo?.slug
       })
 

package/src/components/templates/ProductListingPage/ProductListing.tsx

@@ -47,7 +47,7 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
 
 // Array merging strategy from deepmerge that makes client arrays overwrite server array
 // https://www.npmjs.com/package/deepmerge
-const overwriteMerge = (_, sourceArray) => sourceArray
+const overwriteMerge = (_: any[], sourceArray: any[]) => sourceArray
 
 export default function ProductListing({
   page: { sections, settings },

package/src/components/ui/Image/loader.ts

@@ -1,7 +1,12 @@
 import storeConfig from 'faststore.config'
+import { ImageLoaderProps } from 'next/image'
 const THUMBOR_SERVER = `https://${storeConfig.api.storeId}.vtexassets.com`
 
-export default function customImageLoader({ src, width, quality }) {
+export default function customImageLoader({
+  src,
+  width,
+  quality,
+}: ImageLoaderProps) {
   const preSizeComponents = [THUMBOR_SERVER, 'unsafe']
 
   // proportional to the width, enter a height of 0,

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

@@ -5,7 +5,13 @@ import { useRouter } from 'next/router'
 import type { ImageGalleryProps as UIImageGalleryProps } from '@faststore/ui'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
-const ImageComponent = ({ url, alternateName }) => {
+const ImageComponent = ({
+  url,
+  alternateName,
+}: {
+  url: string
+  alternateName?: string
+}) => {
   const { __experimentalImageGalleryImage: Image } =
     useOverrideComponents<'ProductDetails'>()
 

package/src/components/ui/Newsletter/NewsletterAddendum.tsx

@@ -13,6 +13,8 @@
  *
  * This is a limitation not only for this component, but for every native & custom component that makes use of Rich Text.
  */
+
+// @ts-ignore motivation: cannot find the draftjs-to-html package types.
 import draftToHtml from 'draftjs-to-html'
 import { NewsletterAddendum as UINewsletterAddendum } from '@faststore/ui'
 import type { NewsletterAddendumProps as UINewsletterAddendumProps } from '@faststore/ui'

package/src/customizations/src/dynamicContent/index.ts

@@ -11,6 +11,6 @@
 
 // export default dynamicContent;
 
-const dynamicContent = {}
+const dynamicContent: Record<string, any> = {}
 
 export default dynamicContent

package/src/experimental/index.ts

@@ -38,3 +38,4 @@ export { useShippingSimulation as useShippingSimulation_unstable } from '../../s
 export { Image as Image_unstable } from '../../src/components/ui/Image'
 export { ProfileChallenge as ProfileChallenge_unstable } from '../../src/components/auth/ProfileChallenge'
 export { default as Selectors_unstable } from '../../src/components/ui/SkuSelector'
+export { ButtonSignIn as ButtonSignIn_unstable } from '../../src/components/ui/Button'

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

@@ -63,7 +63,7 @@ type Props = PDPContentType & {
 
 // Array merging strategy from deepmerge that makes client arrays overwrite server array
 // https://www.npmjs.com/package/deepmerge
-const overwriteMerge = (_, sourceArray) => sourceArray
+const overwriteMerge = (_: any[], sourceArray: any[]) => sourceArray
 
 function Page({ data: server, sections, globalSections, offers, meta }: Props) {
   const { product } = server

package/src/sdk/analytics/index.tsx

@@ -11,7 +11,7 @@ if (typeof window !== 'undefined') {
   }
 }
 
-const AnalyticsHandler = () => {
+const AnalyticsHandler = (): null => {
   useAnalyticsEvent((event: AnalyticsEvent) => {
     // Cleans the ecommerce object before pushing a new one
     // This prevents the new data from getting merged with the previous one

package/src/sdk/error/ErrorBoundary/ErrorBoundary.tsx

@@ -15,8 +15,20 @@ if (typeof window !== 'undefined') {
   window.setInterval(() => setReloads(0), 30e3)
 }
 
-class ErrorBoundary extends Component<{ children: ReactNode }> {
-  public state = { hasError: false, error: null }
+interface ErrorBoundaryProps {
+  children: ReactNode
+}
+
+interface ErrorBoundaryState {
+  hasError: Boolean
+  error: Error | null
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  public state: ErrorBoundaryState = {
+    hasError: false,
+    error: null,
+  }
 
   public static getDerivedStateFromError(error: Error) {
     return {

package/src/sdk/overrides/overrides.ts

@@ -7,6 +7,9 @@ import type {
 
 import type { SectionsOverrides } from '../../typings/overrides'
 
+/* TODO: Fix typescript errors. It is necessary to further investigate the typing 
+issues of this file. Error lines have been marked with the @ts-ignore comment*/
+
 export function getSectionOverrides<
   SectionName extends keyof SectionsOverrides
 >(
@@ -15,38 +18,45 @@ export function getSectionOverrides<
 ): OverriddenComponents<SectionName> {
   const overriddenComponents = {} as OverriddenComponents<SectionName>
 
-  Object.entries(defaultComponents).forEach(([key, value]) => {
-    const componentOverride:
-      | ComponentOverrideDefinition<unknown, unknown>
-      | undefined = override.components?.[key]
-
-    if (!componentOverride) {
-      overriddenComponents[key] = {
-        Component: value,
-        props: {},
+  Object.entries<React.ComponentType>(defaultComponents).forEach(
+    ([key, value]) => {
+      const componentOverride:
+        | ComponentOverrideDefinition<React.ComponentType, unknown>
+        | undefined =
+        // @ts-ignore
+        override.components?.[key]
+
+      if (!componentOverride) {
+        // @ts-ignore
+        overriddenComponents[key] = {
+          Component: value,
+          props: {},
+        }
+
+        return
       }
 
-      return
-    }
-
-    if (componentOverride.Component && componentOverride.props) {
-      console.warn(
-        `Mixed use of Component and props overrides detected. Defaulting to Component override: component ${key} in the ${override.section} section.`
-      )
-    }
-
-    if (componentOverride.Component) {
-      overriddenComponents[key] = {
-        Component: componentOverride.Component,
-        props: {},
+      if (componentOverride.Component && componentOverride.props) {
+        console.warn(
+          `Mixed use of Component and props overrides detected. Defaulting to Component override: component ${key} in the ${override.section} section.`
+        )
       }
-    } else {
-      overriddenComponents[key] = {
-        Component: value,
-        props: componentOverride.props ?? {},
+
+      if (componentOverride.Component) {
+        // @ts-ignore
+        overriddenComponents[key] = {
+          Component: componentOverride.Component,
+          props: {},
+        }
+      } else {
+        // @ts-ignore
+        overriddenComponents[key] = {
+          Component: value,
+          props: componentOverride.props ?? {},
+        }
       }
     }
-  })
+  )
 
   return overriddenComponents
 }

package/src/sdk/product/useProductGalleryQuery.ts

@@ -7,6 +7,7 @@ import { useLocalizedVariables } from './useLocalizedVariables'
 import { useSession } from 'src/sdk/session'
 
 import type {
+  ClientManyProductsQueryQueryVariables,
   ClientProductGalleryQueryQuery as Query,
   ClientProductGalleryQueryQueryVariables as Variables,
 } from '@generated/graphql'
@@ -61,12 +62,19 @@ export const fragment = gql(`
   }
 `)
 
+type ProductGalleryQueryOptions = {
+  itemsPerPage: number
+  selectedFacets: Facet[]
+  sort: ClientManyProductsQueryQueryVariables['sort']
+  term: ClientManyProductsQueryQueryVariables['term']
+}
+
 export const useProductGalleryQuery = ({
   term,
   sort,
   selectedFacets,
   itemsPerPage,
-}) => {
+}: ProductGalleryQueryOptions) => {
   const { locale } = useSession()
   const { state, setState } = useSearch()
 

package/src/typings/overrides.ts

@@ -81,19 +81,19 @@ export type SectionOverride = {
 export type OverrideComponentsForSection<
   Section extends SectionsOverrides[keyof SectionsOverrides]['Section']
 > = {
-  // The first 'extends' condition is used to filter out sections that don't have overrides (typed 'never')
-  [K in keyof SectionsOverrides as SectionsOverrides[K] extends {
-    Section: never
-  }
+    // The first 'extends' condition is used to filter out sections that don't have overrides (typed 'never')
+    [K in keyof SectionsOverrides as SectionsOverrides[K] extends {
+      Section: never
+    }
     ? never
     : // In the second 'extends' condition, we check if the section matches the one we're looking for
     SectionsOverrides[K] extends {
-        Section: Section
-      }
+      Section: Section
+    }
     ? // If it does, we return the components. Otherwise, we return 'never', which is filtered out
-      K
+    K
     : never]: SectionsOverrides[K]['components']
-}
+  }
 
 // This type is used to extract only the list of components from the section override
 export type ComponentsFromSection<
@@ -195,6 +195,7 @@ export type SectionsOverrides = {
         IconButtonProps,
         Omit<IconButtonProps, 'onClick'>
       >
+      _experimentalButtonSignIn: ComponentOverrideDefinition<any, any>
     }
   }
   Newsletter: {

package/test/utils/multipleTemplates.test.ts

@@ -61,7 +61,7 @@ describe('Multiple page templates', () => {
     })
 
     it('should return false when the rewrites is empty array', () => {
-      const rewritesArr = []
+      const rewritesArr: Rewrite[] = []
       const result = hasRewritesConfigForSlug({
         rewrites: rewritesArr,
         templateValue: '/test/my-office',

package/tsconfig.json

@@ -22,13 +22,14 @@
       ]
     },
     "forceConsistentCasingInFileNames": true,
-    "strict": false,
+    "noImplicitAny": true,
     "incremental": true,
     "isolatedModules": true,
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "skipLibCheck": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "strict": false
   },
   "include": ["*.d.ts", "src/**/*.ts", "src/**/*.tsx", "@generated/**/*.ts"],
   "exclude": ["node_modules", "public"]