@faststore/core 2.0.166-alpha.0 → 2.0.169-alpha.0

package/.turbo/turbo-build.log

@@ -24,7 +24,7 @@ info  - Finalizing page optimization...
 Route (pages)                              Size     First Load JS
 ┌ ● /                                      3.1 kB          125 kB
 ├   └ css/13a4da555ff5e3be.css             7.19 kB
-├   /_app                                  0 B            77.9 kB
+├   /_app                                  0 B            77.8 kB
 ├ ● /[...slug]                             10.1 kB         133 kB
 ├   └ css/6e41f1b6078c14c1.css             7.9 kB
 ├ ● /[slug]/p                              11.7 kB         134 kB
@@ -32,17 +32,17 @@ Route (pages)                              Size     First Load JS
 ├ ○ /404                                   1.09 kB         113 kB
 ├ ● /500                                   1.11 kB         113 kB
 ├ ● /account                               669 B           112 kB
-├ λ /api/graphql                           0 B            77.9 kB
-├ λ /api/preview                           0 B            77.9 kB
+├ λ /api/graphql                           0 B            77.8 kB
+├ λ /api/preview                           0 B            77.8 kB
 ├ ● /checkout                              657 B           112 kB
 ├ ● /login                                 1.01 kB         113 kB
 └ ● /s                                     1.11 kB         124 kB
-+ First Load JS shared by all              80.7 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-ed042290aee646cb.js  6.46 kB
-  ├ chunks/webpack-c22f5b0626028f1b.js     2.22 kB
-  └ css/47d82dcec9a7dbc2.css               2.78 kB
+  ├ chunks/pages/_app-79d333aa6001a806.js  6.38 kB
+  ├ chunks/webpack-d62f6560695a4b1b.js     2.21 kB
+  └ css/e2dad288b79896b9.css               2.78 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
 ○  (Static)  automatically rendered as static HTML (uses no initial props)

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.169-alpha.0](https://github.com/vtex/faststore/compare/v2.0.168-alpha.0...v2.0.169-alpha.0) (2023-05-29)
+
+### Chores
+
+- Removes imports utilities styles from core package + enable system fonts ([#1792](https://github.com/vtex/faststore/issues/1792)) ([19de095](https://github.com/vtex/faststore/commit/19de095e0e47548386afb06ef057798ca54f6294))
+
+## [2.0.168-alpha.0](https://github.com/vtex/faststore/compare/v2.0.167-alpha.0...v2.0.168-alpha.0) (2023-05-29)
+
+### Features
+
+- Adds `RegionBar` and `RegionModal` Sections ([#1798](https://github.com/vtex/faststore/issues/1798)) ([627fa25](https://github.com/vtex/faststore/commit/627fa25832a7a41a1feebe07bef43b67e5edf13a))
+
 ## [2.0.166-alpha.0](https://github.com/vtex/faststore/compare/v2.0.165-alpha.0...v2.0.166-alpha.0) (2023-05-29)
 
 ### Features

package/cms/faststore/sections.json

@@ -1517,5 +1517,136 @@
         }
       }
     }
+  },
+  {
+    "name": "RegionBar",
+    "schema": {
+      "title": "Region Bar",
+      "type": "object",
+      "description": "Region Bar configuration",
+      "required": ["label"],
+      "properties": {
+        "icon": {
+          "title": "Location Icon",
+          "type": "object",
+          "properties": {
+            "icon": {
+              "title": "Icon",
+              "type": "string",
+              "enumNames": ["Map Pin"],
+              "enum": ["MapPin"],
+              "default": "MapPin"
+            },
+            "alt": {
+              "title": "Alternative Label",
+              "type": "string",
+              "default": "Map Pin icon"
+            }
+          }
+        },
+        "label": {
+          "title": "Location label",
+          "type": "string",
+          "default": "Set your location"
+        },
+        "editLabel": {
+          "title": "Location edit label",
+          "type": "string",
+          "default": "Edit"
+        },
+        "buttonIcon": {
+          "title": "Button Icon",
+          "type": "object",
+          "properties": {
+            "icon": {
+              "title": "Icon",
+              "type": "string",
+              "enumNames": ["Caret Right"],
+              "enum": ["CaretRight"],
+              "default": "CaretRight"
+            },
+            "alt": {
+              "title": "Alternative Label",
+              "type": "string",
+              "default": "Caret Right icon"
+            }
+          }
+        }
+      }
+    }
+  },
+  {
+    "name": "RegionModal",
+    "schema": {
+      "title": "Region Modal",
+      "type": "object",
+      "description": "Region Modal configuration",
+      "properties": {
+        "title": {
+          "title": "Title",
+          "type": "string",
+          "default": "Set your location"
+        },
+        "description": {
+          "title": "Description",
+          "type": "string",
+          "default": "Prices, offers and availability may vary according to your location."
+        },
+        "closeButtonAriaLabel": {
+          "title": "Close modal aria-label",
+          "type": "string",
+          "default": "Close Region Modal"
+        },
+        "inputField": {
+          "title": "Input Field",
+          "type": "object",
+          "properties": {
+            "label": {
+              "title": "Input field label",
+              "type": "string",
+              "default": "Postal Code"
+            },
+            "errorMessage": {
+              "title": "Input field error message",
+              "type": "string",
+              "default": "You entered an invalid Postal Code"
+            }
+          }
+        },
+        "idkPostalCodeLink": {
+          "title": "I don't know my postal code link",
+          "type": "object",
+          "properties": {
+            "text": {
+              "type": "string",
+              "title": "Link Text",
+              "default": "I don't know my Postal Code"
+            },
+            "to": {
+              "type": "string",
+              "title": "Action link"
+            },
+            "icon": {
+              "title": "Icon",
+              "type": "object",
+              "properties": {
+                "icon": {
+                  "title": "Icon",
+                  "type": "string",
+                  "enumNames": ["Arrow Square Out"],
+                  "enum": ["ArrowSquareOut"],
+                  "default": "ArrowSquareOut"
+                },
+                "alt": {
+                  "title": "Alternative Label",
+                  "type": "string",
+                  "default": "Arrow Square Out icon"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
   }
 ]

package/next.config.js

@@ -15,6 +15,9 @@ const nextConfig = {
     locales: ['en-US'],
     defaultLocale: 'en-US',
   },
+  sassOptions: {
+    additionalData: `@import "@faststore/ui/src/styles/base/utilities.scss";`,
+  },
   webpack: (config, { isServer, dev }) => {
     // https://github.com/vercel/next.js/discussions/11267#discussioncomment-2479112
     // camel-case style names from css modules

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.166-alpha.0",
+  "version": "2.0.169-alpha.0",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -30,10 +30,10 @@
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
     "@faststore/api": "^2.0.165-alpha.0",
-    "@faststore/components": "^2.0.160-alpha.0",
+    "@faststore/components": "^2.0.168-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.162-alpha.0",
-    "@faststore/ui": "^2.0.160-alpha.0",
+    "@faststore/ui": "^2.0.169-alpha.0",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
@@ -108,5 +108,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "54464ea6828b2ff30b96e80c32ef0f1df66b995d"
+  "gitHead": "243d208d99b39628236e7e86491b22621d54127e"
 }

package/src/Layout.tsx

@@ -1,24 +1,7 @@
 import type { PropsWithChildren } from 'react'
-import { lazy, Suspense } from 'react'
-
-import { useUI } from '@faststore/ui'
-
-const RegionModal = lazy(() => import('src/components/region/RegionModal'))
 
 function Layout({ children }: PropsWithChildren) {
-  const { modal: displayModal } = useUI()
-
-  return (
-    <>
-      {children}
-
-      {displayModal && (
-        <Suspense fallback={null}>
-          <RegionModal />
-        </Suspense>
-      )}
-    </>
-  )
+  return <>{children}</>
 }
 
 export default Layout

package/src/components/cart/CartSidebar/section.module.scss

@@ -1,6 +1,3 @@
-/* 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/Overlay/styles.scss";

package/src/components/cms/GlobalSections.tsx

@@ -4,13 +4,15 @@ import { PropsWithChildren, lazy } from 'react'
 import CUSTOM_COMPONENTS from 'src/customizations/components'
 import { PageContentType, getPage } from 'src/server/cms'
 
-import RegionBar from 'src/components/common/RegionBar'
 import Toast from 'src/components/common/Toast'
 import RenderSections from './RenderSections'
 
 import Alert from 'src/components/sections/Alert'
 import Footer from 'src/components/sections/Footer'
 import Navbar from 'src/components/sections/Navbar'
+import RegionBar from 'src/components/sections/RegionBar'
+
+const RegionModal = lazy(() => import('src/components/region/RegionModal'))
 const CartSidebar = lazy(() => import('src/components/cart/CartSidebar'))
 
 export const GLOBAL_SECTIONS_CONTENT_TYPE = 'globalSections'
@@ -23,6 +25,8 @@ export type GlobalSectionsData = {
 const COMPONENTS: Record<string, ComponentType<any>> = {
   Alert,
   Navbar,
+  RegionBar,
+  RegionModal,
   CartSidebar,
   Footer,
   ...CUSTOM_COMPONENTS,
@@ -36,10 +40,7 @@ function GlobalSections({
     <RenderSections components={COMPONENTS} {...otherProps}>
       <Toast />
 
-      <main>
-        <RegionBar className="display-mobile" />
-        {children}
-      </main>
+      <main>{children}</main>
     </RenderSections>
   )
 }

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

@@ -1,6 +1,3 @@
-/* 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";

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

@@ -1,6 +1,3 @@
-/* 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/molecules/Toast/styles.scss";

package/src/components/region/RegionBar/RegionBar.tsx

@@ -1,9 +1,39 @@
-import { RegionBar as UIRegionBar } from '@faststore/ui'
+import type { RegionBarProps as UIRegionBarProps } from '@faststore/ui'
+import { Icon, RegionBar as UIRegionBar } from '@faststore/ui'
 
-import { useSession } from 'src/sdk/session'
 import { useUI } from '@faststore/ui'
+import { useSession } from 'src/sdk/session'
+
+export interface RegionBarProps {
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  icon?: {
+    icon: string
+    alt: string
+  }
+  /**
+   * Specifies a label for the location text.
+   */
+  label: UIRegionBarProps['label']
+  /**
+   * Specifies a label for the edit text.
+   */
+  editLabel?: UIRegionBarProps['editLabel']
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  buttonIcon?: {
+    icon: string
+    alt: string
+  }
+}
 
-function RegionBar({ ...otherProps }) {
+function RegionBar({
+  icon: { icon: locationIcon, alt: locationIconAlt },
+  buttonIcon: { icon: buttonIcon, alt: buttonIconAlt },
+  ...otherProps
+}: RegionBarProps) {
   const { openModal } = useUI()
   const { postalCode } = useSession()
 
@@ -11,6 +41,8 @@ function RegionBar({ ...otherProps }) {
     <UIRegionBar
       onButtonClick={openModal}
       postalCode={postalCode}
+      icon={<Icon name={locationIcon} aria-label={locationIconAlt} />}
+      buttonIcon={<Icon name={buttonIcon} aria-label={buttonIconAlt} />}
       {...otherProps}
     />
   )

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

@@ -1,15 +1,49 @@
-import { RegionModal as UIRegionModal } from '@faststore/ui'
-import { useRef, useState } from 'react'
+import {
+  Icon,
+  RegionModal as UIRegionModal,
+  RegionModalProps as UIRegionModalProps,
+  useUI,
+} from '@faststore/ui'
+import { Suspense, useRef, useState } from 'react'
 
 import { sessionStore, useSession, validateSession } from 'src/sdk/session'
 
 import styles from './section.module.scss'
 
-function RegionModal() {
+interface RegionModalProps {
+  title?: UIRegionModalProps['title']
+  description?: UIRegionModalProps['description']
+  closeButtonAriaLabel?: UIRegionModalProps['closeButtonAriaLabel']
+  inputField?: {
+    label?: UIRegionModalProps['inputLabel']
+    errorMessage?: UIRegionModalProps['errorMessage']
+  }
+  idkPostalCodeLink?: {
+    text?: string
+    to?: string
+    icon?: {
+      icon: string
+      alt: string
+    }
+  }
+}
+
+function RegionModal({
+  title,
+  description,
+  closeButtonAriaLabel,
+  inputField: { label: inputFieldLabel, errorMessage: inputFieldErrorMessage },
+  idkPostalCodeLink: {
+    text: idkPostalCodeLinkText,
+    to: idkPostalCodeLinkTo,
+    icon: { icon: idkPostalCodeLinkIcon, alt: idkPostalCodeLinkIconAlt },
+  },
+}: RegionModalProps) {
   const inputRef = useRef<HTMLInputElement>(null)
   const { isValidating, ...session } = useSession()
   const [errorMessage, setErrorMessage] = useState<string>('')
   const [input, setInput] = useState<string>('')
+  const { modal: displayModal } = useUI()
 
   const handleSubmit = async () => {
     const postalCode = inputRef.current?.value
@@ -30,26 +64,54 @@ function RegionModal() {
 
       sessionStore.set(validatedSession ?? newSession)
     } catch (error) {
-      setErrorMessage('You entered an invalid Postal Code')
+      setErrorMessage(inputFieldErrorMessage)
     }
   }
 
+  const idkPostalCodeLinkProps: UIRegionModalProps['idkPostalCodeLinkProps'] = {
+    href: idkPostalCodeLinkTo ?? '#',
+    children: (
+      <>
+        {idkPostalCodeLinkText}
+        {!!idkPostalCodeLinkIcon ?? (
+          <Icon
+            name={idkPostalCodeLinkIcon}
+            aria-label={idkPostalCodeLinkIconAlt}
+            width={20}
+            height={20}
+          />
+        )}
+      </>
+    ),
+  }
+
   return (
-    <UIRegionModal
-      overlayProps={{
-        className: `section ${styles.section} section-region-modal`,
-      }}
-      inputRef={inputRef}
-      inputValue={input}
-      errorMessage={errorMessage}
-      onInput={(e) => {
-        errorMessage !== '' && setErrorMessage('')
-        setInput(e.currentTarget.value)
-      }}
-      onSubmit={handleSubmit}
-      fadeOutOnSubmit={true}
-      onClear={() => setInput('')}
-    />
+    <>
+      {displayModal && (
+        <Suspense fallback={null}>
+          <UIRegionModal
+            title={title}
+            description={description}
+            overlayProps={{
+              className: `section ${styles.section} section-region-modal`,
+            }}
+            closeButtonAriaLabel={closeButtonAriaLabel}
+            inputRef={inputRef}
+            inputValue={input}
+            inputLabel={inputFieldLabel}
+            errorMessage={errorMessage}
+            idkPostalCodeLinkProps={idkPostalCodeLinkProps}
+            onInput={(e) => {
+              errorMessage !== '' && setErrorMessage('')
+              setInput(e.currentTarget.value)
+            }}
+            onSubmit={handleSubmit}
+            fadeOutOnSubmit={true}
+            onClear={() => setInput('')}
+          />
+        </Suspense>
+      )}
+    </>
   )
 }
 

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

@@ -1,6 +1,3 @@
-/* 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";

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

@@ -1,6 +1,3 @@
-/* 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";

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

@@ -1,6 +1,3 @@
-/* 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/LinkButton/styles.scss";

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

@@ -1,6 +1,3 @@
-/* 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";

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

@@ -1,6 +1,3 @@
-/* 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";

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

@@ -1,6 +1,3 @@
-/* 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/Loader/styles.scss";

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

@@ -1,6 +1,3 @@
-/* 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/Link/styles.scss";

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

@@ -1,6 +1,3 @@
-/* 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";

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

@@ -1,6 +1,3 @@
-/* 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";

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

@@ -1,6 +1,3 @@
-/* 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";

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

@@ -1,6 +1,3 @@
-/* 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/Icon/styles.scss";

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

@@ -1,6 +1,3 @@
-/* stylelint-disable no-invalid-position-at-import-rule */
-@import "@faststore/ui/src/styles/base/utilities.scss";
-
 .section {
   margin-top: 0;
 

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

@@ -1,6 +1,3 @@
-/* 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";

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

@@ -1,6 +1,3 @@
-/* stylelint-disable no-invalid-position-at-import-rule */
-@import "@faststore/ui/src/styles/base/utilities.scss";
-
 .section {
   [data-fs-product-shelf-skeleton] {
     --fs-carousel-item-width-tablet    : 14.2rem;

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

@@ -1,6 +1,3 @@
-/* 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";
   @import "@faststore/ui/src/components/atoms/Button/styles";

package/src/components/sections/RegionBar/RegionBar.tsx

@@ -0,0 +1,41 @@
+import RegionBar, {
+  RegionBarProps,
+} from 'src/components/region/RegionBar/RegionBar'
+import Section from 'src/components/sections/Section/Section'
+import styles from './section.module.scss'
+
+type RegionBarSectionProps = {
+  /**
+   * className forwarded to the section.
+   */
+  className?: string
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  icon: RegionBarProps['icon']
+  /**
+   * Specifies a label for the location text.
+   */
+  label: RegionBarProps['label']
+  /**
+   * Specifies a label for the edit text.
+   */
+  editLabel?: RegionBarProps['editLabel']
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  buttonIcon?: RegionBarProps['buttonIcon']
+}
+
+function RegionBarSection({
+  className = 'display-mobile',
+  ...otherProps
+}: RegionBarSectionProps) {
+  return (
+    <Section className={`${styles.section} section-region-bar ${className}`}>
+      <RegionBar {...otherProps} />
+    </Section>
+  )
+}
+
+export default RegionBarSection