feat: Add useScreenResize hook (SFS-1509) (#2487)

## What's the purpose of this pull request?

This PR intends to add a hook to resize depending on the current screen
size.

It's related to the performance POC #2404.

## How it works?

It checks the user's screen size (or manual browser resizing) and
returns the value corresponding if is mobile or not.

### Starters Deploy Preview

vtex-sites/starter.store#562

packages/core/src/components/common/Footer/FooterLinks.tsx

@@ -8,6 +8,7 @@ import {
 import { useState } from 'react'
 
 import Link from 'src/components/ui/Link'
+import useScreenResize from 'src/sdk/ui/useScreenResize'
 
 type Item = {
   url: string
@@ -38,6 +39,7 @@ export interface FooterLinksProps {
 }
 
 function FooterLinks({ links }: FooterLinksProps) {
+  const { isDesktop } = useScreenResize()
   const [indicesExpanded, setIndicesExpanded] = useState<Set<number>>(
     new Set([])
   )
@@ -53,7 +55,7 @@ function FooterLinks({ links }: FooterLinksProps) {
 
   return (
     <section data-fs-footer data-fs-footer-links>
-      <div className="display-mobile">
+      {!isDesktop && (
         <UIAccordion indices={indicesExpanded} onChange={onChange}>
           {links.map(({ sectionTitle, items }) => (
             <UIAccordionItem key={sectionTitle}>
@@ -64,9 +66,9 @@ function FooterLinks({ links }: FooterLinksProps) {
             </UIAccordionItem>
           ))}
         </UIAccordion>
-      </div>
+      )}
 
-      <div className="hidden-mobile">
+      {isDesktop && (
         <nav data-fs-footer-links-columns aria-label="Footer Links Navigation">
           {links.map(({ sectionTitle, items }) => (
             <div key={sectionTitle}>
@@ -75,7 +77,7 @@ function FooterLinks({ links }: FooterLinksProps) {
             </div>
           ))}
         </nav>
-      </div>
+      )}
     </section>
   )
 }

packages/core/src/components/navigation/Navbar/Navbar.tsx

@@ -12,6 +12,7 @@ import Link from 'src/components/ui/Link'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
 import type { NavbarProps as SectionNavbarProps } from '../../sections/Navbar'
+import useScreenResize from 'src/sdk/ui/useScreenResize'
 
 export interface NavbarProps {
   /**
@@ -78,6 +79,8 @@ function Navbar({
   } = useOverrideComponents<'Navbar'>()
   const scrollDirection = useScrollDirection()
   const { openNavbar, navbar: displayNavbar } = useUI()
+  const { isDesktop } = useScreenResize()
+
   const searchMobileRef = useRef<SearchInputRef>(null)
   const [searchExpanded, setSearchExpanded] = useState(false)
 
@@ -157,7 +160,7 @@ function Navbar({
         </NavbarRow.Component>
       </NavbarHeader.Component>
 
-      <NavbarLinks links={links} region={region} className="hidden-mobile" />
+      {isDesktop && <NavbarLinks links={links} region={region} />}
 
       {displayNavbar && (
         <NavbarSlider

packages/core/src/components/search/Filter/Filter.tsx

@@ -6,6 +6,7 @@ import { gql } from '@generated'
 import { ProductGalleryProps } from 'src/components/ui/ProductGallery/ProductGallery'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 import { useFilter } from 'src/sdk/search/useFilter'
+import useScreenResize from 'src/sdk/ui/useScreenResize'
 
 interface Props {
   /**
@@ -35,17 +36,18 @@ function Filter({
 
   const filter = useFilter(allFacets)
   const { filter: displayFilter } = useUI()
+  const { isDesktop } = useScreenResize()
 
   return (
     <>
-      <div className="hidden-mobile">
+      {isDesktop && (
         <FilterDesktop.Component
           {...FilterDesktop.props}
           {...filter}
           testId={testId}
           title={filterCmsData?.title}
         />
-      </div>
+      )}
 
       {displayFilter && (
         <Suspense fallback={null}>

packages/core/src/components/sections/RegionBar/RegionBar.tsx

@@ -3,6 +3,7 @@ import Section from '../Section/Section'
 import styles from './section.module.scss'
 import { RegionBarDefaultComponents } from './DefaultComponents'
 import { getOverridableSection } from '../../..//sdk/overrides/getOverriddenSection'
+import useScreenResize from 'src/sdk/ui/useScreenResize'
 
 type RegionBarSectionProps = {
   /**
@@ -27,14 +28,15 @@ type RegionBarSectionProps = {
   buttonIcon?: RegionBarProps['buttonIcon']
 }
 
-function RegionBarSection({
-  className = 'display-mobile',
-  ...otherProps
-}: RegionBarSectionProps) {
+function RegionBarSection({ ...otherProps }: RegionBarSectionProps) {
+  const { isMobile } = useScreenResize()
+
   return (
-    <Section className={`${styles.section} section-region-bar ${className}`}>
-      <RegionBar {...otherProps} />
-    </Section>
+    isMobile && (
+      <Section className={`${styles.section} section-region-bar`}>
+        <RegionBar {...otherProps} />
+      </Section>
+    )
   )
 }
 

packages/core/src/components/ui/Carousel/Carousel.tsx

@@ -2,6 +2,8 @@ import type { PropsWithChildren } from 'react'
 import { Carousel as UICarousel } from '@faststore/ui'
 import type { CarouselProps as UICarouselProps } from '@faststore/ui'
 
+import useScreenResize from 'src/sdk/ui/useScreenResize'
+
 export type CarouselProps = {
   id?: string
   testId?: string
@@ -21,15 +23,17 @@ function Carousel({
   variant = 'scroll',
   infiniteMode = false,
 }: PropsWithChildren<CarouselProps>) {
-  const isMobile = window.innerWidth <= 768
+  const { loading, isTablet, isMobile } = useScreenResize()
+
+  if (loading) return null
 
   return (
     <UICarousel
       id={id}
       testId={testId}
       variant={variant}
       infiniteMode={infiniteMode}
-      itemsPerPage={isMobile ? 1.6 : itemsPerPage}
+      itemsPerPage={isTablet || isMobile ? 1.6 : itemsPerPage}
     >
       {children}
     </UICarousel>

packages/core/src/sdk/ui/useScreenResize.ts

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react'
+
+// We are using the Moto G Power device measurement as a reference (mobile), as used by PageSpeed Insights.
+const MAX_MOBILE_WIDTH = 420
+const MAX_TABLET_WIDTH = 768
+const MIN_NOTEBOOK_WIDTH = 1280
+
+function useScreenResize() {
+  const [isMobile, setIsMobile] = useState(undefined)
+  const [isTablet, setIsTablet] = useState(undefined)
+  const [isDesktop, setIsDesktop] = useState(undefined)
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= MAX_MOBILE_WIDTH)
+      setIsTablet(
+        window.innerWidth > MAX_MOBILE_WIDTH &&
+          window.innerWidth <= MAX_TABLET_WIDTH
+      )
+      setIsDesktop(window.innerWidth >= MIN_NOTEBOOK_WIDTH)
+    }
+
+    handleResize()
+
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  return {
+    isMobile,
+    isTablet,
+    isDesktop,
+    loading:
+      isMobile === undefined ||
+      isTablet === undefined ||
+      isDesktop === undefined,
+  }
+}
+
+export default useScreenResize