@faststore/core 2.1.16 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.1.16",
+  "version": "2.1.17",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -110,5 +110,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "a1b180b75407f3e4064b4637e8595e8aab130a2e"
+  "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/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,11 +1,21 @@
-import { Button as UIButton, InputField as UIInputField } from '@faststore/ui'
 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 ''
@@ -135,14 +145,26 @@ 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} />
+            <ToastIconError
+              width={30}
+              height={30}
+              {...Props['ToastIconError']}
+              name={toastSubscribe.icon ?? Props['ToastIconError'].name}
+            />
           ),
         })
       }
@@ -162,65 +184,55 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
         >
           <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>}
           </header>
 
           <div data-fs-newsletter-controls>
-            {displayNameInput ? (
-              <>
-                <UIInputField
-                  required
+            <>
+              {displayNameInput ? (
+                <InputFieldName
                   id="newsletter-name"
-                  label={nameInputLabel}
-                  inputRef={nameInputRef}
-                />
-                <UIInputField
-                  required
-                  type="email"
-                  id="newsletter-email"
-                  label={emailInputLabel}
-                  inputRef={emailInputRef}
-                />
-                <span
-                  data-fs-newsletter-addendum
-                  dangerouslySetInnerHTML={{
-                    __html: cmsToHtml(privacyPolicy),
-                  }}
-                />
-                <UIButton
-                  variant="secondary"
-                  inverse
-                  type="submit"
-                  aria-label={subscriptionButtonLabel}
-                >
-                  {subscriptionButtonLabel}
-                </UIButton>
-              </>
-            ) : (
-              <>
-                <UIInputField
                   required
-                  actionable
-                  type="email"
-                  id="newsletter-email"
-                  label={emailInputLabel}
-                  inputRef={emailInputRef}
-                  onClear={() => null}
-                  onSubmit={() => null}
-                  displayClearButton={false}
-                  buttonActionText={subscriptionButtonLabel}
-                />
-                <span
-                  data-fs-newsletter-addendum
-                  dangerouslySetInnerHTML={{
-                    __html: cmsToHtml(privacyPolicy),
-                  }}
+                  {...Props['InputFieldName']}
+                  label={nameInputLabel ?? Props['InputFieldName'].label}
+                  // Dynamic props shouldn't be overridable
+                  // This decision can be reviewed later if needed
+                  inputRef={nameInputRef}
                 />
-              </>
-            )}
+              ) : null}
+              <InputFieldEmail
+                id="newsletter-email"
+                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
+                dangerouslySetInnerHTML={{
+                  __html: cmsToHtml(privacyPolicy),
+                }}
+              ></span>
+              <Button
+                variant="secondary"
+                inverse
+                type="submit"
+                {...Props['Button']}
+              >
+                {loading ? subscribeButtonLoadingLabel : subscribeButtonLabel}
+              </Button>
+            </>
           </div>
         </form>
       </div>

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 =