@faststore/core 2.1.14 → 2.1.17

package/.turbo/turbo-build.log

@@ -33,23 +33,23 @@ Route (pages)                              Size     First Load JS
 ┌ ● /                                      3.21 kB         197 kB
 ├   └ css/0d62ff2d64099b84.css             6.47 kB
 ├   /_app                                  0 B            77.9 kB
-├ ● /[...slug]                             8.8 kB          134 kB
+├ ● /[...slug]                             8.8 kB          135 kB
 ├   └ css/6e41f1b6078c14c1.css             7.9 kB
-├ ● /[slug]/p                              11 kB           204 kB
+├ ● /[slug]/p                              11 kB           205 kB
 ├   └ css/0f8ce5203de8ae6f.css             11.2 kB
-├ ○ /404                                   1.09 kB         113 kB
-├ ● /500                                   1.11 kB         113 kB
-├ ● /account                               668 B           113 kB
+├ ○ /404                                   1.27 kB         114 kB
+├ ● /500                                   1.29 kB         114 kB
+├ ● /account                               669 B           113 kB
 ├ λ /api/graphql                           0 B            77.9 kB
 ├ λ /api/preview                           0 B            77.9 kB
-├ ● /checkout                              657 B           113 kB
-├ ● /login                                 1.01 kB         113 kB
-└ ● /s                                     1.11 kB         126 kB
+├ ● /checkout                              656 B           113 kB
+├ ● /login                                 1.19 kB         114 kB
+└ ● /s                                     1.11 kB         127 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-79d333aa6001a806.js  6.38 kB
-  ├ chunks/webpack-3eefca84f4c29194.js     2.28 kB
+  ├ chunks/webpack-ad7791015d101142.js     2.28 kB
   └ css/104f0f3ce3be32c6.css               2.79 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/lighthouserc.js

@@ -19,5 +19,6 @@ module.exports = lhConfig({
     deprecations: 'warn',
     'resource-summary:stylesheet:count': ['warn', { maxNumericValue: 400 }],
     'resource-summary:script:count': ['warn', { maxNumericValue: 20 }],
+    'resource-summary:script:size': ['error', { maxNumericValue: 210 * 1024 }],
   },
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.1.14",
+  "version": "2.1.17",
   "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.1.9",
-    "@faststore/components": "^2.1.9",
+    "@faststore/components": "^2.1.16",
     "@faststore/graphql-utils": "^2.1.9",
     "@faststore/sdk": "^2.1.9",
-    "@faststore/ui": "^2.1.9",
+    "@faststore/ui": "^2.1.16",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
@@ -110,5 +110,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "51ae4e321b9f68d9ec93d1b59d4b18b7d3f3e53e"
+  "gitHead": "fcb109880652472f2a72cebdb79f550075c23ecb"
 }

package/src/components/common/Alert/Alert.tsx

@@ -7,10 +7,16 @@ import { mark } from 'src/sdk/tests/mark'
 import Section from 'src/components/sections/Section/Section'
 import styles from './section.module.scss'
 
+import { Components, Props } from 'src/components/sections/Alert/Overrides'
+
+const { Alert: AlertWrapper } = Components
+
 export interface AlertProps extends UIAlertProps {
   /**
    * For CMS integration purposes, should be used to pass content through it
    * instead pass through children
+   *
+   * TODO: Remove it? It's not being used
    */
   content?: ReactNode
 }
@@ -32,9 +38,15 @@ function Alert({
 
   return (
     <Section className={`${styles.section} section-alert`}>
-      <UIAlert onClose={onAlertClose} {...otherProps}>
+      <AlertWrapper
+        {...Props['Alert']}
+        // Dynamic props, shouldn't be overridable
+        // This decision can be reviewed later if needed
+        onClose={onAlertClose}
+        {...otherProps}
+      >
         {content ?? children}
-      </UIAlert>
+      </AlertWrapper>
     </Section>
   )
 }

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

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useRef, useState, useCallback } from 'react'
 
 import { useUI, useScrollDirection, Icon as UIIcon } from '@faststore/ui'
 
@@ -88,10 +88,15 @@ function Navbar({
   const searchMobileRef = useRef<SearchInputRef>(null)
   const [searchExpanded, setSearchExpanded] = useState(false)
 
-  const handlerExpandSearch = () => {
+  const handlerExpandSearch = useCallback(() => {
     setSearchExpanded(true)
     searchMobileRef.current?.inputRef?.focus()
-  }
+  }, [])
+
+  const handleCollapseSearch = useCallback(() => {
+    setSearchExpanded(false)
+    searchMobileRef.current?.resetSearchInput()
+  }, [])
 
   return (
     <NavbarWrapper scrollDirection={scrollDirection} {...Props['Navbar']}>
@@ -129,10 +134,7 @@ function Navbar({
                 data-fs-button-collapse
                 aria-label="Collapse search bar"
                 icon={<UIIcon name="CaretLeft" width={32} height={32} />}
-                onClick={() => {
-                  setSearchExpanded(false)
-                  searchMobileRef.current?.resetSearchInput()
-                }}
+                onClick={handleCollapseSearch}
                 {...Props['IconButton']}
               />
             )}

package/src/components/product/ProductCard/ProductCard.tsx

@@ -4,7 +4,7 @@ import {
   ProductCardContent as UIProductCardContent,
   ProductCardImage as UIProductCardImage,
 } from '@faststore/ui'
-import { memo } from 'react'
+import { memo, useMemo } from 'react'
 
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
 import { ImageProps } from 'next/future/image'
@@ -83,7 +83,10 @@ function ProductCard({
     prefetch: false,
   }
 
-  const outOfStock = availability !== 'https://schema.org/InStock'
+  const outOfStock = useMemo(
+    () => availability !== 'https://schema.org/InStock',
+    [availability]
+  )
 
   return (
     <UIProductCard

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

@@ -1,9 +1,12 @@
 import type { RegionBarProps as UIRegionBarProps } from '@faststore/ui'
-import { Icon, RegionBar as UIRegionBar } from '@faststore/ui'
 
 import { useUI } from '@faststore/ui'
 import { useSession } from 'src/sdk/session'
 
+import { Components, Props } from 'src/components/sections/RegionBar/Overrides'
+
+const { RegionBar: RegionBarWrapper, LocationIcon, ButtonIcon } = Components
+
 export interface RegionBarProps {
   /**
    * A React component that will be rendered as an icon.
@@ -30,19 +33,32 @@ export interface RegionBarProps {
 }
 
 function RegionBar({
-  icon: { icon: locationIcon, alt: locationIconAlt },
-  buttonIcon: { icon: buttonIcon, alt: buttonIconAlt },
+  icon: {
+    icon: locationIcon = Props['LocationIcon'].name,
+    alt: locationIconAlt = Props['LocationIcon']['aria-label'],
+  },
+  buttonIcon: {
+    icon: buttonIcon = Props['ButtonIcon'].name,
+    alt: buttonIconAlt = Props['ButtonIcon']['aria-label'],
+  },
+  label = Props['RegionBar'].label,
+  editLabel = Props['RegionBar'].editLabel,
   ...otherProps
 }: RegionBarProps) {
   const { openModal } = useUI()
   const { postalCode } = useSession()
 
   return (
-    <UIRegionBar
+    <RegionBarWrapper
+      icon={<LocationIcon name={locationIcon} aria-label={locationIconAlt} />}
+      buttonIcon={<ButtonIcon name={buttonIcon} aria-label={buttonIconAlt} />}
+      {...Props['RegionBar']}
+      label={label}
+      editLabel={editLabel}
+      // Dynamic props shouldn't be overridable
+      // This decision can be reviewed later if needed
       onButtonClick={openModal}
       postalCode={postalCode}
-      icon={<Icon name={locationIcon} aria-label={locationIconAlt} />}
-      buttonIcon={<Icon name={buttonIcon} aria-label={buttonIconAlt} />}
       {...otherProps}
     />
   )

package/src/components/sections/Alert/Alert.tsx

@@ -1,5 +1,8 @@
-import { Icon as UIIcon } from '@faststore/ui'
-import UIAlert from 'src/components/common/Alert'
+import CommonAlert from 'src/components/common/Alert'
+
+import { Components, Props } from 'src/components/sections/Alert/Overrides'
+
+const { Icon } = Components
 
 export interface AlertProps {
   icon: string
@@ -12,15 +15,28 @@ export interface AlertProps {
 }
 
 // TODO: Change actionPath and actionLabel with Link
-function Alert({ icon, content, link, dismissible }: AlertProps) {
+function Alert({
+  icon = Props['Icon'].name,
+  content,
+  link: {
+    text = Props['Alert'].link?.text,
+    to = Props['Alert'].link?.to,
+  } = Props['Alert'].link,
+  dismissible = Props['Alert'].dismissible,
+}: AlertProps) {
   return (
-    <UIAlert
-      icon={<UIIcon name={icon} />}
-      link={{ children: link?.text, href: link?.to, target: '_self' }}
+    <CommonAlert
+      icon={<Icon {...Props['Icon']} name={icon} />}
+      link={{
+        ...(Props['Alert'].link ?? {}),
+        children: text,
+        href: to,
+        target: Props['Alert'].link?.target ?? '_self',
+      }}
       dismissible={dismissible}
     >
       {content}
-    </UIAlert>
+    </CommonAlert>
   )
 }
 

package/src/components/sections/Alert/Overrides.tsx

@@ -0,0 +1,27 @@
+import { Alert as UIAlert, Icon as UIIcon } from '@faststore/ui'
+
+import AlertCustomizations from 'src/customizations/components/overrides/Alert'
+
+const alertComponentsCustomization = {}
+
+const alertPropsCustomization = {} as any
+
+Object.entries(AlertCustomizations.components).forEach(([key, value]) => {
+  if (value.Component) {
+    alertComponentsCustomization[key] = value.Component
+  }
+})
+
+Object.entries(AlertCustomizations.components).forEach(([key, value]) => {
+  if (value.props) {
+    alertPropsCustomization[key] = value.props
+  }
+})
+
+const Components = {
+  Alert: UIAlert,
+  Icon: UIIcon,
+  ...alertComponentsCustomization,
+}
+
+export { Components, alertPropsCustomization as Props }

package/src/components/sections/EmptyState/EmptyState.tsx

@@ -4,7 +4,9 @@ import type { PropsWithChildren } from 'react'
 import Section from '../Section'
 import styles from './section.module.scss'
 
-import { EmptyState as UIEmptyState } from '@faststore/ui'
+import { Components, Props } from 'src/components/sections/EmptyState/Overrides'
+
+const { EmptyState: EmptyStateWrapper } = Components
 
 export interface EmptyStateProps {
   title: string
@@ -12,15 +14,20 @@ export interface EmptyStateProps {
 }
 
 function EmptyState({
-  title,
-  titleIcon,
+  title = Props['EmptyState'].title,
+  titleIcon = Props['EmptyState'].titleIcon,
   children,
 }: PropsWithChildren<EmptyStateProps>) {
   return (
     <Section className={`${styles.section} section-empty-state`}>
-      <UIEmptyState title={title} titleIcon={titleIcon} bkgColor="light">
+      <EmptyStateWrapper
+        bkgColor="light"
+        {...Props['EmptyState']}
+        title={title}
+        titleIcon={titleIcon}
+      >
         {children}
-      </UIEmptyState>
+      </EmptyStateWrapper>
     </Section>
   )
 }

package/src/components/sections/EmptyState/Overrides.tsx

@@ -0,0 +1,26 @@
+import { EmptyState as UIEmptyState } from '@faststore/ui'
+
+import EmptyStateCustomizations from 'src/customizations/components/overrides/EmptyState'
+
+const emptyStateComponentsCustomization = {}
+
+const emptyStatePropsCustomization = {} as any
+
+Object.entries(EmptyStateCustomizations.components).forEach(([key, value]) => {
+  if (value.Component) {
+    emptyStateComponentsCustomization[key] = value.Component
+  }
+})
+
+Object.entries(EmptyStateCustomizations.components).forEach(([key, value]) => {
+  if (value.props) {
+    emptyStatePropsCustomization[key] = value.props
+  }
+})
+
+const Components = {
+  EmptyState: UIEmptyState,
+  ...emptyStateComponentsCustomization,
+}
+
+export { Components, emptyStatePropsCustomization as Props }

package/src/components/sections/Newsletter/Overrides.tsx

@@ -0,0 +1,35 @@
+import {
+  Button as UIButton,
+  InputField as UIInputField,
+  Icon as UIIcon,
+} from '@faststore/ui'
+
+import NewsletterCustomizations from 'src/customizations/components/overrides/Newsletter'
+
+const newsletterComponentsCustomization = {}
+
+const newsletterPropsCustomization = {} as any
+
+Object.entries(NewsletterCustomizations.components).forEach(([key, value]) => {
+  if (value.Component) {
+    newsletterComponentsCustomization[key] = value.Component
+  }
+})
+
+Object.entries(NewsletterCustomizations.components).forEach(([key, value]) => {
+  if (value.props) {
+    newsletterPropsCustomization[key] = value.props
+  }
+})
+
+const Components = {
+  ToastIconSuccess: UIIcon,
+  ToastIconError: UIIcon,
+  HeaderIcon: UIIcon,
+  InputFieldName: UIInputField,
+  InputFieldEmail: UIInputField,
+  Button: UIButton,
+  ...newsletterComponentsCustomization,
+}
+
+export { Components, newsletterPropsCustomization as Props }

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

@@ -0,0 +1,28 @@
+import { RegionBar as UIRegionBar, Icon as UIIcon } from '@faststore/ui'
+
+import RegionBarCustomizations from 'src/customizations/components/overrides/RegionBar'
+
+const regionBarComponentsCustomization = {}
+
+const regionBarPropsCustomization = {} as any
+
+Object.entries(RegionBarCustomizations.components).forEach(([key, value]) => {
+  if (value.Component) {
+    regionBarComponentsCustomization[key] = value.Component
+  }
+})
+
+Object.entries(RegionBarCustomizations.components).forEach(([key, value]) => {
+  if (value.props) {
+    regionBarPropsCustomization[key] = value.props
+  }
+})
+
+const Components = {
+  RegionBar: UIRegionBar,
+  LocationIcon: UIIcon,
+  ButtonIcon: UIIcon,
+  ...regionBarComponentsCustomization,
+}
+
+export { Components, regionBarPropsCustomization as Props }

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

@@ -1,21 +1,34 @@
-import { Button as UIButton, InputField as UIInputField } from '@faststore/ui'
-import { ComponentPropsWithRef, FormEvent } from 'react'
+import { ComponentPropsWithRef, FormEvent, useMemo } from 'react'
 import { forwardRef, useRef } from 'react'
 import { convertFromRaw } from 'draft-js'
 import { stateToHTML } from 'draft-js-export-html'
-import { Icon, useUI } from '@faststore/ui'
+import { useUI } from '@faststore/ui'
 import { useNewsletter } from 'src/sdk/newsletter/useNewsletter'
 
+import { Components, Props } from 'src/components/sections/Newsletter/Overrides'
+
+const {
+  ToastIconSuccess,
+  ToastIconError,
+  HeaderIcon,
+  InputFieldEmail,
+  InputFieldName,
+  Button,
+} = Components
+
 const cmsToHtml = (content) => {
   if (!content) {
     return ''
   }
+
   const rawDraftContentState = JSON.parse(content)
   const html = stateToHTML(convertFromRaw(rawDraftContentState), {
     entityStyleFn: (entity) => {
       const entityType = entity.get('type').toLowerCase()
+
       if (entityType === 'link') {
         const data = entity.getData()
+
         return {
           element: 'a',
           attributes: {
@@ -106,13 +119,16 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
       card,
       toastSubscribe,
       toastSubscribeError,
-      ...otherProps
     },
     ref
   ) {
     const { subscribeUser, loading, data } = useNewsletter()
     const nameInputRef = useRef<HTMLInputElement>(null)
     const emailInputRef = useRef<HTMLInputElement>(null)
+    const subscriptionButtonLabel = useMemo(
+      () => (loading ? subscribeButtonLoadingLabel : subscribeButtonLabel),
+      [loading, subscribeButtonLabel, subscribeButtonLoadingLabel]
+    )
 
     const { pushToast } = useUI()
 
@@ -129,13 +145,27 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
         pushToast({
           ...toastSubscribe,
           status: 'INFO',
-          icon: <Icon name={toastSubscribe.icon} width={30} height={30} />,
+          icon: (
+            <ToastIconSuccess
+              width={30}
+              height={30}
+              {...Props['ToastIconSuccess']}
+              name={toastSubscribe.icon ?? Props['ToastIconSuccess'].name}
+            />
+          ),
         })
       } else {
         pushToast({
           ...toastSubscribeError,
           status: 'ERROR',
-          icon: <Icon name={toastSubscribeError.icon} width={30} height={30} />,
+          icon: (
+            <ToastIconError
+              width={30}
+              height={30}
+              {...Props['ToastIconError']}
+              name={toastSubscribe.icon ?? Props['ToastIconError'].name}
+            />
+          ),
         })
       }
 
@@ -147,15 +177,19 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
     return (
       <div data-fs-newsletter={card ? 'card' : ''}>
         <form
-          data-fs-newsletter-form
           ref={ref}
+          data-fs-newsletter-form
           onSubmit={handleSubmit}
-          {...otherProps}
           className="layout__content"
         >
           <header data-fs-newsletter-header>
             <h3>
-              <Icon name={icon?.icon} width={32} height={32} />
+              <HeaderIcon
+                width={32}
+                height={32}
+                {...Props['HeaderIcon']}
+                name={icon?.icon ?? Props['HeaderIcon'].name}
+              />
               {title}
             </h3>
             {description && <span> {description}</span>}
@@ -164,19 +198,25 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
           <div data-fs-newsletter-controls>
             <>
               {displayNameInput ? (
-                <UIInputField
-                  inputRef={nameInputRef}
+                <InputFieldName
                   id="newsletter-name"
-                  label={nameInputLabel}
                   required
+                  {...Props['InputFieldName']}
+                  label={nameInputLabel ?? Props['InputFieldName'].label}
+                  // Dynamic props shouldn't be overridable
+                  // This decision can be reviewed later if needed
+                  inputRef={nameInputRef}
                 />
               ) : null}
-              <UIInputField
-                inputRef={emailInputRef}
+              <InputFieldEmail
                 id="newsletter-email"
-                label={emailInputLabel}
                 type="email"
                 required
+                {...Props['InputFieldEmail']}
+                label={emailInputLabel ?? Props['InputFieldEmail'].label}
+                // Dynamic props shouldn't be overridable
+                // This decision can be reviewed later if needed
+                inputRef={emailInputRef}
               />
               <span
                 data-fs-newsletter-addendum
@@ -184,9 +224,14 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
                   __html: cmsToHtml(privacyPolicy),
                 }}
               ></span>
-              <UIButton variant="secondary" inverse type="submit">
+              <Button
+                variant="secondary"
+                inverse
+                type="submit"
+                {...Props['Button']}
+              >
                 {loading ? subscribeButtonLoadingLabel : subscribeButtonLabel}
-              </UIButton>
+              </Button>
             </>
           </div>
         </form>

package/src/customizations/components/overrides/Alert.tsx

@@ -0,0 +1,15 @@
+// This is an example of how it can be used on the starter.
+
+import { SectionOverride } from 'src/typings/overrides'
+
+const SECTION = 'Alert' as const
+
+const overrides: SectionOverride[typeof SECTION] = {
+  name: SECTION,
+  components: {
+    Alert: { props: {} },
+    Icon: { props: {} },
+  },
+}
+
+export default overrides

package/src/customizations/components/overrides/EmptyState.tsx

@@ -0,0 +1,13 @@
+// This is an example of how it can be used on the starter.
+import { SectionOverride } from 'src/typings/overrides'
+
+const SECTION = 'EmptyState' as const
+
+const overrides: SectionOverride[typeof SECTION] = {
+  name: SECTION,
+  components: {
+    EmptyState: { props: {} },
+  },
+}
+
+export default overrides

package/src/customizations/components/overrides/Newsletter.tsx

@@ -0,0 +1,19 @@
+// This is an example of how it can be used on the starter.
+
+import { SectionOverride } from 'src/typings/overrides'
+
+const SECTION = 'Newsletter' as const
+
+const overrides: SectionOverride[typeof SECTION] = {
+  name: SECTION,
+  components: {
+    ToastIconSuccess: { props: {} },
+    ToastIconError: { props: {} },
+    HeaderIcon: { props: {} },
+    InputFieldName: { props: {} },
+    InputFieldEmail: { props: {} },
+    Button: { props: {} },
+  },
+}
+
+export default overrides

package/src/customizations/components/overrides/RegionBar.tsx

@@ -0,0 +1,16 @@
+// This is an example of how it can be used on the starter.
+
+import { SectionOverride } from 'src/typings/overrides'
+
+const SECTION = 'RegionBar' as const
+
+const overrides: SectionOverride[typeof SECTION] = {
+  name: SECTION,
+  components: {
+    RegionBar: { props: {} },
+    LocationIcon: { props: {} },
+    ButtonIcon: { props: {} },
+  },
+}
+
+export default overrides

package/src/typings/overrides.d.ts

@@ -62,6 +62,25 @@ export const SECTIONS = {
       '__experimentalProductCard',
     ],
   },
+  Alert: {
+    components: ['Alert', 'Icon'],
+  },
+  EmptyState: {
+    components: ['EmptyState'],
+  },
+  RegionBar: {
+    components: ['RegionBar', 'LocationIcon', 'ButtonIcon'],
+  },
+  Newsletter: {
+    components: [
+      'ToastIconSuccess',
+      'ToastIconError',
+      'HeaderIcon',
+      'InputFieldName',
+      'InputFieldEmail',
+      'Button',
+    ],
+  },
 } as const
 
 // export type ComponentOrProps =

package/.next/BUILD_ID

@@ -1 +0,0 @@
-pDkGOqwrvVbN2os-F1GC4