@faststore/core 2.0.120-alpha.0 → 2.0.122-alpha.0

package/src/components/common/RegionBar/RegionBar.tsx

@@ -0,0 +1,17 @@
+import RegionBarComponent from 'src/components/region/RegionBar/RegionBar'
+import Section from 'src/components/sections/Section/Section'
+import styles from './section.module.scss'
+
+type RegionBarProps = {
+  className?: string
+}
+
+function RegionBar({ className = '' }: RegionBarProps) {
+  return (
+    <Section className={`${styles.section} section-region-bar`}>
+      <RegionBarComponent className={className} />
+    </Section>
+  )
+}
+
+export default RegionBar

package/src/components/common/RegionBar/index.ts

@@ -0,0 +1 @@
+export { default } from './RegionBar'

package/src/components/common/RegionBar/section.module.scss

@@ -0,0 +1,8 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@faststore/ui/src/styles/base/utilities.scss";
+
+.section {
+  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+  @import "@faststore/ui/src/components/molecules/RegionBar/styles.scss";
+}

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

@@ -1,26 +1,28 @@
 import { Suspense, useRef, useState } from 'react'
 
 import {
-  useUI,
-  useScrollDirection,
   Icon as UIIcon,
   IconButton as UIIconButton,
   Navbar as UINavbar,
+  NavbarButtons as UINavbarButtons,
   NavbarHeader as UINavbarHeader,
   NavbarRow as UINavbarRow,
-  NavbarButtons as UINavbarButtons,
+  useScrollDirection,
+  useUI,
 } from '@faststore/ui'
 
 import CartToggle from 'src/components/cart/CartToggle'
-import SearchInput from 'src/components/search/SearchInput'
 import type { SearchInputRef } from 'src/components/search/SearchInput'
-import Logo from 'src/components/ui/Logo'
-import Link from 'src/components/ui/Link'
+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 { mark } from 'src/sdk/tests/mark'
 
-import NavbarSlider from '../NavbarSlider'
 import NavbarLinks from '../NavbarLinks'
+import NavbarSlider from '../NavbarSlider'
+
+import styles from './section.module.scss'
 
 function Navbar() {
   const scrollDirection = useScrollDirection()
@@ -34,67 +36,66 @@ function Navbar() {
   }
 
   return (
-    <UINavbar
-      className="layout__content-full"
-      scrollDirection={scrollDirection}
-    >
-      <UINavbarHeader>
-        <UINavbarRow className="layout__content">
-          {!searchExpanded && (
-            <>
-              <UIIconButton
-                data-fs-navbar-button-menu
-                aria-label="Open Menu"
-                icon={<UIIcon name="List" width={32} height={32} />}
-                onClick={openNavbar}
-              />
-              <Link
-                href="/"
-                aria-label="Go to Faststore home"
-                title="Go to Faststore home"
-                data-fs-navbar-logo
-              >
-                <Logo />
-              </Link>
-            </>
-          )}
+    <header className={`section ${styles.section} section-navbar`}>
+      <UINavbar scrollDirection={scrollDirection}>
+        <UINavbarHeader>
+          <UINavbarRow className="layout__content">
+            {!searchExpanded && (
+              <>
+                <UIIconButton
+                  data-fs-navbar-button-menu
+                  aria-label="Open Menu"
+                  icon={<UIIcon name="List" width={32} height={32} />}
+                  onClick={openNavbar}
+                />
+                <Link
+                  href="/"
+                  aria-label="Go to Faststore home"
+                  title="Go to Faststore home"
+                  data-fs-navbar-logo
+                >
+                  <Logo />
+                </Link>
+              </>
+            )}
 
-          <SearchInput />
+            <SearchInput />
 
-          <UINavbarButtons searchExpanded={searchExpanded}>
-            {searchExpanded && (
-              <UIIconButton
-                data-fs-button-collapse
-                aria-label="Collapse search bar"
-                icon={<UIIcon name="CaretLeft" width={32} height={32} />}
-                onClick={() => {
-                  setSearchExpanded(false)
-                  searchMobileRef.current?.resetSearchInput()
-                }}
-              />
-            )}
+            <UINavbarButtons searchExpanded={searchExpanded}>
+              {searchExpanded && (
+                <UIIconButton
+                  data-fs-button-collapse
+                  aria-label="Collapse search bar"
+                  icon={<UIIcon name="CaretLeft" width={32} height={32} />}
+                  onClick={() => {
+                    setSearchExpanded(false)
+                    searchMobileRef.current?.resetSearchInput()
+                  }}
+                />
+              )}
 
-            <SearchInput
-              placeholder=""
-              ref={searchMobileRef}
-              testId="store-input-mobile"
-              buttonTestId="store-input-mobile-button"
-              onSearchClick={handlerExpandSearch}
-            />
+              <SearchInput
+                placeholder=""
+                ref={searchMobileRef}
+                testId="store-input-mobile"
+                buttonTestId="store-input-mobile-button"
+                onSearchClick={handlerExpandSearch}
+              />
 
-            <Suspense fallback={<ButtonSignInFallback />}>
-              <ButtonSignIn />
-            </Suspense>
+              <Suspense fallback={<ButtonSignInFallback />}>
+                <ButtonSignIn />
+              </Suspense>
 
-            <CartToggle />
-          </UINavbarButtons>
-        </UINavbarRow>
-      </UINavbarHeader>
+              <CartToggle />
+            </UINavbarButtons>
+          </UINavbarRow>
+        </UINavbarHeader>
 
-      <NavbarLinks className="hidden-mobile" />
+        <NavbarLinks className="hidden-mobile" />
 
-      {displayNavbar && <NavbarSlider />}
-    </UINavbar>
+        {displayNavbar && <NavbarSlider />}
+      </UINavbar>
+    </header>
   )
 }
 

package/src/components/navigation/Navbar/section.module.scss

@@ -0,0 +1,26 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@faststore/ui/src/styles/base/utilities.scss";
+
+.section {
+  @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Input/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
+  @import "@faststore/ui/src/components/atoms/List/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Logo/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Price/styles.scss";
+  @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
+  @import "@faststore/ui/src/components/molecules/NavbarLinks/styles.scss";
+  @import "@faststore/ui/src/components/molecules/SearchAutoComplete/styles.scss";
+  @import "@faststore/ui/src/components/molecules/SearchDropdown/styles.scss";
+  @import "@faststore/ui/src/components/molecules/SearchHistory/styles.scss";
+  @import "@faststore/ui/src/components/molecules/SearchInputField/styles.scss";
+  @import "@faststore/ui/src/components/molecules/SearchProducts/styles.scss";
+  @import "@faststore/ui/src/components/molecules/SearchTop/styles.scss";
+  @import "@faststore/ui/src/components/organisms/SearchInput/styles.scss";
+  @import "@faststore/ui/src/components/organisms/Navbar/styles.scss";
+  @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
+  @import "@faststore/ui/src/components/organisms/NavbarSlider/styles.scss";
+}

package/src/components/navigation/NavbarLinks/NavbarLinks.tsx

@@ -2,7 +2,6 @@ import type { AnchorHTMLAttributes } from 'react'
 
 import type { NavbarLinksProps as UINavbarLinksProps } from '@faststore/ui'
 import {
-  List as UIList,
   NavbarLinks as UINavbarLinks,
   NavbarLinksList as UINavbarLinksList,
   NavbarLinksListItem as UINavbarLinksListItem,

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

@@ -1,20 +1,21 @@
-import { Suspense } from 'react'
 import {
-  useUI,
-  useFadeEffect,
   NavbarSlider as UINavbarSlider,
-  NavbarSliderHeader as UINavbarSliderHeader,
   NavbarSliderContent as UINavbarSliderContent,
   NavbarSliderFooter as UINavbarSliderFooter,
+  NavbarSliderHeader as UINavbarSliderHeader,
+  useFadeEffect,
+  useUI,
 } from '@faststore/ui'
+import { Suspense } from 'react'
 
-import { mark } from 'src/sdk/tests/mark'
+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 { mark } from 'src/sdk/tests/mark'
 import NavbarLinks from '../NavbarLinks'
 
+import styles from './section.module.scss'
+
 function NavbarSlider() {
   const { closeNavbar } = useUI()
   const { fade, fadeOut } = useFadeEffect()
@@ -23,6 +24,9 @@ function NavbarSlider() {
     <UINavbarSlider
       fade={fade}
       onDismiss={fadeOut}
+      overlayProps={{
+        className: `section ${styles.section} section-navbar-slider`,
+      }}
       onTransitionEnd={() => fade === 'out' && closeNavbar()}
     >
       <UINavbarSliderHeader onClose={fadeOut}>

package/src/components/navigation/NavbarSlider/section.module.scss

@@ -0,0 +1,26 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@faststore/ui/src/styles/base/utilities.scss";
+
+.section {
+  @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Input/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
+  @import "@faststore/ui/src/components/atoms/List/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Logo/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Price/styles.scss";
+  @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
+  @import "@faststore/ui/src/components/molecules/NavbarLinks/styles.scss";
+  @import "@faststore/ui/src/components/molecules/SearchAutoComplete/styles.scss";
+  @import "@faststore/ui/src/components/molecules/SearchDropdown/styles.scss";
+  @import "@faststore/ui/src/components/molecules/SearchHistory/styles.scss";
+  @import "@faststore/ui/src/components/molecules/SearchInputField/styles.scss";
+  @import "@faststore/ui/src/components/molecules/SearchProducts/styles.scss";
+  @import "@faststore/ui/src/components/molecules/SearchTop/styles.scss";
+  @import "@faststore/ui/src/components/organisms/SearchInput/styles.scss";
+  @import "@faststore/ui/src/components/organisms/Navbar/styles.scss";
+  @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
+  @import "@faststore/ui/src/components/organisms/NavbarSlider/styles.scss";
+}

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

@@ -1,9 +1,9 @@
-import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
-import type { ProductSummary_ProductFragment } from '@generated/graphql'
 import {
   ProductGrid as UIProductGrid,
   ProductGridItem as UIProductGridItem,
 } from '@faststore/ui'
+import type { ProductSummary_ProductFragment } from '@generated/graphql'
+import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
 
 import ProductCard from '../ProductCard'
 
@@ -22,8 +22,6 @@ interface Props {
 function ProductGrid({ products, page, pageSize }: Props) {
   const aspectRatio = 1
 
-  console.log(products)
-
   return (
     <ProductGridSkeleton
       aspectRatio={aspectRatio}

package/src/components/region/RegionModal/RegionModal.tsx

@@ -1,8 +1,10 @@
-import { useRef, useState } from 'react'
 import { RegionModal as UIRegionModal } from '@faststore/ui'
+import { useRef, useState } from 'react'
 
 import { sessionStore, useSession, validateSession } from 'src/sdk/session'
 
+import styles from './section.module.scss'
+
 function RegionModal() {
   const inputRef = useRef<HTMLInputElement>(null)
   const { isValidating, ...session } = useSession()
@@ -34,6 +36,9 @@ function RegionModal() {
 
   return (
     <UIRegionModal
+      overlayProps={{
+        className: `section ${styles.section} section-region-modal`,
+      }}
       inputRef={inputRef}
       inputValue={input}
       errorMessage={errorMessage}

package/src/components/region/RegionModal/section.module.scss

@@ -0,0 +1,13 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@faststore/ui/src/styles/base/utilities.scss";
+
+.section {
+  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Input/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Overlay/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
+  @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
+  @import "@faststore/ui/src/components/organisms/RegionModal/styles.scss";
+}

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

@@ -1,11 +1,12 @@
 import { gql } from '@faststore/graphql-utils'
-
 import { useUI } from '@faststore/ui'
 import type { Filter_FacetsFragment } from '@generated/graphql'
+import { lazy, Suspense } from 'react'
 import FilterDesktop from './FilterDesktop'
-import FilterSlider from './FilterSlider'
 import { useFilter } from './useFilter'
 
+const FilterSlider = lazy(() => import('./FilterSlider'))
+
 interface Props {
   /**
    * The array that represents the details of every facet.
@@ -29,7 +30,9 @@ function Filter({ facets: allFacets, testId = 'fs-filter' }: Props) {
       </div>
 
       {displayFilter && (
-        <FilterSlider {...filter} testId={testId} title="Filters" />
+        <Suspense fallback={null}>
+          <FilterSlider {...filter} testId={testId} title="Filters" />
+        </Suspense>
       )}
     </>
   )

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

@@ -13,6 +13,8 @@ import type { Filter_FacetsFragment } from '@generated/graphql'
 
 import type { useFilter } from './useFilter'
 
+import styles from './section.module.scss'
+
 interface Props {
   /**
    * ID to find this component in testing tools (e.g.: cypress,
@@ -41,6 +43,9 @@ function FilterSlider({
 
   return (
     <UIFilterSlider
+      overlayProps={{
+        className: `section ${styles.section} section-filter-slider`,
+      }}
       title={title}
       size="partial"
       direction="rightSide"

package/src/components/search/Filter/section.module.scss

@@ -0,0 +1,22 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@faststore/ui/src/styles/base/utilities.scss";
+
+.section {
+  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Input/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
+  @import "@faststore/ui/src/components/atoms/List/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Slider/styles.scss";
+  @import "@faststore/ui/src/components/molecules/DiscountBadge/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
+  @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
+  @import "@faststore/ui/src/components/molecules/SelectField/styles.scss";
+  @import "@faststore/ui/src/components/organisms/Filter/styles.scss";
+  @import "@faststore/ui/src/components/organisms/FilterSlider/styles.scss";
+  @import "@faststore/ui/src/components/organisms/PriceRange/styles.scss";
+  @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
+}

package/src/components/sections/BannerNewsletter/BannerNewsletter.tsx

@@ -1,12 +1,14 @@
 import BannerText from 'src/components/ui/BannerText'
 import Newsletter from '../Newsletter'
 import Section from '../Section'
-import styles from './banner-newsletter.module.scss'
+import styles from './section.module.scss'
 
 function BannerNewsletter() {
   return (
-    <Section className="layout__content">
-      <div className={styles.fsBannerNewsletter}>
+    <Section
+      className={`${styles.section} section-banner-newsletter layout__content`}
+    >
+      <div data-fs-banner-newsletter>
         <BannerText
           title="Get to Know Our Next Release"
           caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elit nisi, vehicula in turpis sit amet, posuere aliquam nisl. "

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

@@ -0,0 +1,8 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@faststore/ui/src/styles/base/utilities.scss";
+
+.section {
+  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Banner/styles.scss";
+  @import "@faststore/ui/src/components/organisms/BannerNewsletter/styles.scss";
+}

package/src/components/sections/BannerText/BannerText.tsx

@@ -1,7 +1,9 @@
-import Section from '../Section'
 import UIBannerText, {
   BannerTextProps as UIBannerTextProps,
 } from 'src/components/ui/BannerText'
+import Section from '../Section'
+
+import styles from './section.module.scss'
 
 export interface BannerTextProps {
   title: string
@@ -23,7 +25,7 @@ function BannerText({
   colorVariant = 'main',
 }: BannerTextProps) {
   return (
-    <Section className="layout__section">
+    <Section className={`${styles.section} section-banner layout__section`}>
       <UIBannerText
         variant={variant}
         title={title}

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

@@ -0,0 +1,8 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@faststore/ui/src/styles/base/utilities.scss";
+
+.section {
+  @import "@faststore/ui/src/components/atoms/Button/styles";
+  @import "@faststore/ui/src/components/molecules/LinkButton/styles";
+  @import "@faststore/ui/src/components/molecules/Banner/styles";
+}

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

@@ -1,10 +1,12 @@
 import { memo } from 'react'
 
-import UIBreadcrumb from 'src/components/ui/Breadcrumb'
 import type { BreadcrumbProps } from 'src/components/ui/Breadcrumb'
+import UIBreadcrumb from 'src/components/ui/Breadcrumb'
 
 import Section from '../Section'
 
+import styles from './section.module.scss'
+
 interface BreadcrumbWrapperProps
   extends Partial<Pick<BreadcrumbProps, 'breadcrumbList'>> {
   name: string
@@ -15,7 +17,7 @@ function Breadcrumb({ breadcrumbList, name }: BreadcrumbWrapperProps) {
   const list = breadcrumbList ?? fallback
 
   return (
-    <Section className="layout__content">
+    <Section className={`${styles.section} section-breadcrumb layout__content`}>
       <UIBreadcrumb breadcrumbList={list} />
     </Section>
   )

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

@@ -0,0 +1,9 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@faststore/ui/src/styles/base/utilities.scss";
+
+.section {
+  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
+  @import "@faststore/ui/src/components/atoms/List/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Breadcrumb/styles.scss";
+}

package/src/components/sections/Hero/Hero.tsx

@@ -1,18 +1,14 @@
-import type {
-  HeroHeaderProps as UIHeroHeaderProps,
-  HeroImageProps as UIHeroImageProps,
-  HeroProps as UIHeroProps,
-} from '@faststore/ui'
+import type { HeroProps as UIHeroProps } from '@faststore/ui'
 import {
   Hero as UIHero,
   HeroHeader as UIHeroHeader,
   HeroImage as UIHeroImage,
 } from '@faststore/ui'
-
+import { ReactNode } from 'react'
 import { Image } from 'src/components/ui/Image'
-
 import Section from '../Section'
-import { ReactNode } from 'react'
+
+import styles from './section.module.scss'
 
 export type HeroProps = {
   title: string
@@ -40,7 +36,7 @@ const Hero = ({
   icon,
 }: HeroProps) => {
   return (
-    <Section>
+    <Section className={`${styles.section} section-hero`}>
       <UIHero colorVariant={colorVariant} variant={variant}>
         <UIHeroImage data-fs-hero-image>
           <Image

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

@@ -0,0 +1,9 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@faststore/ui/src/styles/base/utilities.scss";
+
+.section {
+  @import "@faststore/ui/src/components/organisms/Hero/styles.scss";
+  @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+}

package/src/components/sections/{Incentives → IncentivesHeader}/IncentivesHeader.tsx

@@ -1,5 +1,6 @@
-import Incentives from './Incentives'
+import Incentives from 'src/components/ui/Incentives/Incentives'
 import Section from '../Section'
+import styles from './section.module.scss'
 
 interface Incentive {
   icon: string
@@ -14,7 +15,7 @@ interface Props {
 
 function IncentivesHeader({ incentives }: Props) {
   return (
-    <Section>
+    <Section className={`${styles.section} section-incentives-header`}>
       <Incentives incentives={incentives} colored />
     </Section>
   )

package/src/components/sections/IncentivesHeader/index.ts

@@ -0,0 +1 @@
+export { default } from './IncentivesHeader'

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

@@ -0,0 +1,8 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@faststore/ui/src/styles/base/utilities.scss";
+
+.section {
+  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+  @import "@faststore/ui/src/components/atoms/List/styles.scss";
+  @import "@faststore/ui/src/components/organisms/Incentives/styles.scss";
+}