@faststore/core 2.0.173-alpha.0 → 2.0.175-alpha.0

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

@@ -0,0 +1,48 @@
+import {
+  Navbar as UINavbar,
+  NavbarLinks as UINavbarLinks,
+  NavbarLinksList as UINavbarLinksList,
+  NavbarSlider as UINavbarSlider,
+  NavbarSliderHeader as UINavbarSliderHeader,
+  NavbarSliderContent as UINavbarSliderContent,
+  NavbarSliderFooter as UINavbarSliderFooter,
+  NavbarHeader as UINavbarHeader,
+  NavbarRow as UINavbarRow,
+  NavbarButtons as UINavbarButtons,
+  IconButton as UIIconButton,
+} from '@faststore/ui'
+
+import NavbarCustomizations from 'src/customizations/components/overrides/Navbar'
+
+const navbarComponentsCustomization = {}
+
+const navbarPropsCustomization = {} as any
+
+Object.entries(NavbarCustomizations.components).forEach(([key, value]) => {
+  if (value.Component) {
+    navbarComponentsCustomization[key] = value.Component
+  }
+})
+
+Object.entries(NavbarCustomizations.components).forEach(([key, value]) => {
+  if (value.props) {
+    navbarPropsCustomization[key] = value.props
+  }
+})
+
+const Components = {
+  Navbar: UINavbar,
+  NavbarLinks: UINavbarLinks,
+  NavbarLinksList: UINavbarLinksList,
+  NavbarSlider: UINavbarSlider,
+  NavbarSliderHeader: UINavbarSliderHeader,
+  NavbarSliderContent: UINavbarSliderContent,
+  NavbarSliderFooter: UINavbarSliderFooter,
+  NavbarHeader: UINavbarHeader,
+  NavbarRow: UINavbarRow,
+  NavbarButtons: UINavbarButtons,
+  IconButton: UIIconButton,
+  ...navbarComponentsCustomization,
+}
+
+export { Components, navbarPropsCustomization as Props }

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

@@ -1,11 +1,20 @@
-import { Price, DiscountBadge } from '@faststore/ui'
+import {
+  ProductTitle as UIProductTitle,
+  DiscountBadge as UIDiscountBadge,
+  BuyButton as UIBuyButton,
+  SkuSelector as UISkuSelector,
+  ShippingSimulation as UIShippingSimulation,
+} from '@faststore/ui'
 
 import ProductDetailsCustomizations from 'src/customizations/components/overrides/ProductDetails'
 
 const Components = {
-    Price,
-    DiscountBadge,
-    ...ProductDetailsCustomizations.components
+  ProductTitle: UIProductTitle,
+  DiscountBadge: UIDiscountBadge,
+  BuyButton: UIBuyButton,
+  SkuSelector: UISkuSelector,
+  ShippingSimulation: UIShippingSimulation,
+  ...ProductDetailsCustomizations.components,
 }
 
 export { Components }

package/src/components/sections/ProductDetails/ProductDetails.tsx

@@ -4,11 +4,7 @@ import { gql } from '@faststore/graphql-utils'
 import { sendAnalyticsEvent } from '@faststore/sdk'
 import type { CurrencyCode, ViewItemEvent } from '@faststore/sdk'
 import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
-import {
-  Link as UILink,
-  ProductTitle as UIProductTitle,
-  DiscountBadge as UIDiscountBadge,
-} from '@faststore/ui'
+import { Link as UILink } from '@faststore/ui'
 
 import { useSession } from 'src/sdk/session'
 import { useProduct } from 'src/sdk/product/useProduct'
@@ -24,6 +20,10 @@ import { ProductDetailsSettings } from 'src/components/ui/ProductDetails'
 
 import styles from './section.module.scss'
 
+import { Components } from 'src/components/sections/ProductDetails/Overrides'
+
+const { ProductTitle, DiscountBadge } = Components
+
 interface ProductDetailsContextProps {
   context: ProductDetailsFragment_ProductFragment
 }
@@ -147,11 +147,11 @@ function ProductDetails({
       <section data-fs-product-details>
         <section data-fs-product-details-body>
           <header data-fs-product-details-title data-fs-product-details-section>
-            <UIProductTitle
+            <ProductTitle
               title={<h1>{name}</h1>}
               label={
                 showDiscountBadge && (
-                  <UIDiscountBadge
+                  <DiscountBadge
                     listPrice={listPrice}
                     spotPrice={lowPrice}
                     size={discountBadgeSize}

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

@@ -0,0 +1,34 @@
+import { ProductShelf as UIProductShelf } from '@faststore/ui'
+import ProductCard from 'src/components/product/ProductCard'
+import Carousel from 'src/components/ui/Carousel'
+
+import ProductShelfCustomizations from 'src/customizations/components/overrides/ProductShelf'
+
+const productShelfComponentsCustomization = {}
+
+const productShelfPropsCustomization = {} as any
+
+Object.entries(ProductShelfCustomizations.components).forEach(
+  ([key, value]) => {
+    if (value.Component) {
+      productShelfComponentsCustomization[key] = value.Component
+    }
+  }
+)
+
+Object.entries(ProductShelfCustomizations.components).forEach(
+  ([key, value]) => {
+    if (value.props) {
+      productShelfPropsCustomization[key] = value.props
+    }
+  }
+)
+
+const Components = {
+  ProductShelf: UIProductShelf,
+  __experimentalCarousel: Carousel,
+  __experimentalProductCard: ProductCard,
+  ...productShelfComponentsCustomization,
+}
+
+export { Components, productShelfPropsCustomization as Props }

package/src/components/ui/Breadcrumb/Breadcrumb.tsx

@@ -1,20 +1,22 @@
 import type { BreadcrumbProps as UIBreadcrumbProps } from '@faststore/ui'
-import { Icon, Breadcrumb as UIBreadcrumb } from '@faststore/ui'
 import { memo } from 'react'
 
 import Link from 'src/components/ui/Link'
 
+import { Components, Props } from 'src/components/sections/Breadcrumb/Overrides'
+const { Breadcrumb: BreadcrumbWrapper, Icon } = Components
+
 export interface BreadcrumbProps extends UIBreadcrumbProps {
   icon: string
   alt: string
 }
 
 const Breadcrumb = ({
-  icon = 'Home',
+  icon = Props['Icon'].name ?? 'Home',
   alt = 'Go to homepage',
   ...otherProps
 }: BreadcrumbProps) => (
-  <UIBreadcrumb
+  <BreadcrumbWrapper
     homeLink={
       <Link
         data-fs-breadcrumb-link
@@ -23,7 +25,13 @@ const Breadcrumb = ({
         href="/"
         prefetch={false}
       >
-        <Icon name={icon} width={18} height={18} weight="bold" />
+        <Icon
+          width={18}
+          height={18}
+          weight="bold"
+          {...Props['Icon']}
+          name={icon}
+        />
       </Link>
     }
     renderLink={({ itemProps: { item: link, name } }) => (
@@ -31,8 +39,9 @@ const Breadcrumb = ({
         {name}
       </Link>
     )}
+    {...Props['Breadcrumb']}
     {...otherProps}
-  ></UIBreadcrumb>
+  />
 )
 
 export default memo(Breadcrumb)

package/src/components/ui/ProductDetails/ProductDetailsSettings.tsx

@@ -2,7 +2,7 @@ import type { Dispatch, SetStateAction } from 'react'
 
 import {
   Icon as UIIcon,
-  BuyButton as UIBuyButton,
+  Price as UIPrice,
   QuantitySelector as UIQuantitySelector,
 } from '@faststore/ui'
 
@@ -14,8 +14,9 @@ import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import Selectors from 'src/components/ui/SkuSelector'
 import AddToCartLoadingSkeleton from './AddToCartLoadingSkeleton'
 
-import { Components } from '../../sections/ProductDetails/Overrides'
-const { Price } = Components
+import { Components } from 'src/components/sections/ProductDetails/Overrides'
+
+const { BuyButton } = Components
 
 interface ProductDetailsSettingsProps {
   product: ProductDetailsFragment_ProductFragment
@@ -76,7 +77,7 @@ function ProductDetailsSettings({
     <>
       <section data-fs-product-details-values>
         <div data-fs-product-details-prices>
-          <Price
+          <UIPrice
             value={listPrice}
             formatter={useFormattedPrice}
             testId="list-price"
@@ -84,7 +85,7 @@ function ProductDetailsSettings({
             variant="listing"
             SRText="Original price:"
           />
-          <Price
+          <UIPrice
             value={lowPrice}
             formatter={useFormattedPrice}
             testId="price"
@@ -112,15 +113,15 @@ function ProductDetailsSettings({
         isValidating ? (
           <AddToCartLoadingSkeleton />
         ) : (
-          <UIBuyButton
+          <BuyButton
             disabled={buyDisabled}
             icon={
               <UIIcon aria-label={buyButtonIconAlt} name={buyButtonIconName} />
             }
             {...buyProps}
           >
-            {buyButtonTitle}
-          </UIBuyButton>
+            {buyButtonTitle || 'Add to Cart'}
+          </BuyButton>
         )
       }
     </>

package/src/components/ui/ProductShelf/ProductShelf.tsx

@@ -1,17 +1,20 @@
 import { useEffect, useId, useRef } from 'react'
 
-import { ProductShelf as UIProductShelf } from '@faststore/ui'
-
 import ProductShelfSkeleton from 'src/components/skeletons/ProductShelfSkeleton'
 import { useViewItemListEvent } from 'src/sdk/analytics/hooks/useViewItemListEvent'
 import { useProductsQuery } from 'src/sdk/product/useProductsQuery'
 import { textToKebabCase } from 'src/utils/utilities'
 
-import Carousel from '../../ui/Carousel'
-
-import { Components } from 'src/components/ui/ProductShelf/Overrides'
+import {
+  Components,
+  Props,
+} from 'src/components/sections/ProductShelf/Overrides'
 
-const { ProductCard } = Components
+const {
+  ProductShelf: ProductShelfWrapper,
+  __experimentalCarousel: Carousel,
+  __experimentalProductCard: ProductCard,
+} = Components
 
 type Sort =
   | 'discount_desc'
@@ -34,8 +37,8 @@ export type ProductShelfProps = {
     value: string
   }[]
   productCardConfiguration?: {
-    showDiscountBadge: boolean
-    bordered: boolean
+    showDiscountBadge?: boolean
+    bordered?: boolean
   }
   inView: boolean
 }
@@ -43,7 +46,10 @@ export type ProductShelfProps = {
 function ProductShelf({
   title,
   inView,
-  productCardConfiguration,
+  productCardConfiguration: {
+    bordered = Props['__experimentalProductCard'].bordered,
+    showDiscountBadge = Props['__experimentalProductCard'].showDiscountBadge,
+  } = {},
   ...variables
 }: ProductShelfProps) {
   const titleId = textToKebabCase(title)
@@ -79,25 +85,28 @@ function ProductShelf({
         aspectRatio={aspectRatio}
         loading={products === undefined}
       >
-        <UIProductShelf>
-          <Carousel id={titleId || id}>
+        <ProductShelfWrapper {...Props['ProductShelfWrapper']}>
+          <Carousel id={titleId || id} {...Props['__experimentalCarousel']}>
             {productEdges.map((product, idx) => (
               <ProductCard
-                bordered={productCardConfiguration?.bordered}
-                showDiscountBadge={productCardConfiguration?.showDiscountBadge}
-                key={`${product.node.id}`}
-                product={product.node}
-                index={idx + 1}
                 aspectRatio={aspectRatio}
                 imgProps={{
                   width: 216,
                   height: 216,
                   sizes: '(max-width: 768px) 42vw, 30vw',
                 }}
+                {...Props['__experimentalProductCard']}
+                bordered={bordered}
+                showDiscountBadge={showDiscountBadge}
+                // Dynamic props, shouldn't be overridable
+                // This decision can be reviewed later if needed
+                key={`${product.node.id}`}
+                product={product.node}
+                index={idx + 1}
               />
             ))}
           </Carousel>
-        </UIProductShelf>
+        </ProductShelfWrapper>
       </ProductShelfSkeleton>
     </>
   )

package/src/components/ui/ShippingSimulation/ShippingSimulation.tsx

@@ -1,7 +1,4 @@
-import {
-  ShippingSimulation as UIShippingSimulation,
-  ShippingSimulationProps as UIShippingSimulationProps,
-} from '@faststore/ui'
+import { ShippingSimulationProps as UIShippingSimulationProps } from '@faststore/ui'
 
 import { getShippingSimulation } from 'src/sdk/shipping'
 import { ShippingSla } from '@generated/graphql'
@@ -9,6 +6,10 @@ import { useSession } from 'src/sdk/session'
 import { IShippingItem } from '@faststore/api'
 import { useShippingSimulation } from './useShippingSimulation'
 
+import { Components } from 'src/components/sections/ProductDetails/Overrides'
+
+const { ShippingSimulation: ShippingSimulationWrapper } = Components
+
 type ShippingSimulationOptionalProps =
   | 'title'
   | 'formatter'
@@ -76,7 +77,7 @@ export default function ShippingSimulation({
   const { location, options } = shippingSimulation
 
   return (
-    <UIShippingSimulation
+    <ShippingSimulationWrapper
       formatter={formatter}
       onInput={handleOnInput}
       onSubmit={handleSubmit}

package/src/components/ui/SkuSelector/Selectors.tsx

@@ -1,9 +1,13 @@
 import { HTMLAttributes } from 'react'
 
-import { SkuSelectorProps, SkuSelector as UISkuSelector } from '@faststore/ui'
+import { SkuSelectorProps } from '@faststore/ui'
 import NextLink from 'next/link'
 import { Image } from '../Image'
 
+import { Components } from 'src/components/sections/ProductDetails/Overrides'
+
+const { SkuSelector } = Components
+
 export type SkuVariantsByName = Record<
   string,
   Array<{ alt: string; label: string; value: string; src?: string }>
@@ -40,7 +44,7 @@ function Selectors({
     <section {...otherProps}>
       {availableVariations &&
         Object.keys(availableVariations).map((skuVariant) => (
-          <UISkuSelector
+          <SkuSelector
             key={skuVariant}
             skuPropertyName={skuVariant}
             availableVariations={availableVariations}

package/src/customizations/components/CustomComponent.tsx

@@ -0,0 +1,9 @@
+import { ProductTitle as UIProductTitle } from '@faststore/ui'
+
+export interface CustomComponentProps {
+  name: string
+}
+
+export default function ProductTitle({ name = 'Component' }) {
+  return <UIProductTitle title={<h1>Overriding {name}</h1>} />
+}

package/src/customizations/components/overrides/BannerText.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 = 'BannerText' as const
+
+const overrides: SectionOverride[typeof SECTION] = {
+  name: SECTION,
+  components: {
+    Banner: { props: {} },
+    BannerContent: { props: {} },
+  },
+}
+
+export default overrides

package/src/customizations/components/overrides/Breadcrumb.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 = 'Breadcrumb' as const
+
+const overrides: SectionOverride[typeof SECTION] = {
+  name: SECTION,
+  components: {
+    Breadcrumb: { props: {} },
+    Icon: { props: {} },
+  },
+}
+
+export default overrides

package/src/customizations/components/overrides/Hero.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 = 'Hero' as const
+
+const overrides: SectionOverride[typeof SECTION] = {
+  name: SECTION,
+  components: {
+    Hero: { props: {} },
+    HeroImage: { props: {} },
+    HeroHeader: { props: {} },
+  },
+}
+
+export default overrides

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

@@ -0,0 +1,24 @@
+// This is an example of how it can be used on the starter.
+
+import { SectionOverride } from 'src/typings/overrides'
+
+const SECTION = 'Navbar' as const
+
+const overrides: SectionOverride[typeof SECTION] = {
+  name: SECTION,
+  components: {
+    Navbar: { props: {} },
+    NavbarLinks: { props: {} },
+    NavbarLinksList: { props: {} },
+    NavbarSlider: { props: {} },
+    NavbarSliderHeader: { props: {} },
+    NavbarSliderContent: { props: {} },
+    NavbarSliderFooter: { props: {} },
+    NavbarHeader: { props: {} },
+    NavbarRow: { props: {} },
+    NavbarButtons: { props: {} },
+    IconButton: { props: {} },
+  },
+}
+
+export default overrides

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

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

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

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

package/src/typings/overrides.d.ts

@@ -1,18 +1,55 @@
 export const SECTIONS = {
-    ProductDetails: { components: ["Price"] },
-    ProductShelf: { components: ["ProductCard"] }
-  } as const;
-  
-  // export type ComponentOrProps =
-  //   | { Component: React.ElementType }
-  //   | { props: Record<string, unknown> };
-  
-  export type SectionOverride = {
-    [K in keyof typeof SECTIONS]: {
-      name: K;
-      components: {
-        [ComponentKey in typeof SECTIONS[K]["components"][number]]?: React.ElementType;
-      };
-    };
-  };
-  
+  Hero: {
+    components: ['Hero', 'HeroImage', 'HeroHeader'],
+  },
+  BannerText: {
+    components: ['Banner', 'BannerContent'],
+  },
+  ProductDetails: {
+    components: [
+      'ProductTitle',
+      'DiscountBadge',
+      'BuyButton',
+      'SkuSelector',
+      'ShippingSimulation',
+    ],
+  },
+  ProductShelf: {
+    components: [
+      'ProductShelf',
+      '__experimentalCarousel',
+      '__experimentalProductCard',
+    ],
+  },
+  Navbar: {
+    components: [
+      'Navbar',
+      'NavbarLinks',
+      'NavbarLinksList',
+      'NavbarSlider',
+      'NavbarSliderHeader',
+      'NavbarSliderContent',
+      'NavbarSliderFooter',
+      'NavbarHeader',
+      'NavbarRow',
+      'NavbarButtons',
+      'IconButton',
+    ],
+  },
+  Breadcrumb: {
+    components: ['Breadcrumb', 'Icon'],
+  },
+} as const
+
+// export type ComponentOrProps =
+//   | { Component: React.ElementType }
+//   | { props: Record<string, unknown> };
+
+export type SectionOverride = {
+  [K in keyof typeof SECTIONS]: {
+    name: K
+    components: {
+      [ComponentKey in (typeof SECTIONS)[K]['components'][number]]?: any
+    }
+  }
+}

package/.next/BUILD_ID

@@ -1 +0,0 @@
-PhpKjbrX2m-wtpeOa39bI