@faststore/core 0.3.17 → 2.0.65-alpha.0

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

@@ -1,22 +1,16 @@
 import {
   ProductCard as UIProductCard,
-  ProductCardActions as UIProductCardActions,
   ProductCardContent as UIProductCardContent,
   ProductCardImage as UIProductCardImage,
-  Badge as UIBadge,
-  DiscountBadge as UIDiscountBadge,
 } from '@faststore/ui'
 import { gql } from '@faststore/graphql-utils'
 import { memo } from 'react'
-import type { ReactNode } from 'react'
 
-import Link from 'src/components/ui/Link'
 import { Image } from 'src/components/ui/Image'
-import Price from 'src/components/ui/Price'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import { useProductLink } from 'src/sdk/product/useProductLink'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
-import styles from 'src/components/product/ProductCard/product-card.module.scss'
+import NextLink from 'next/link'
 
 type Variant = 'wide' | 'default'
 
@@ -36,18 +30,33 @@ export interface ProductCardProps {
    */
   aspectRatio?: number
   /**
-   * Enables a BuyButton to the component.
+   * Specifies Rating Value of the product.
    */
-  BuyButton?: ReactNode
+  ratingValue?: number
+  /**
+   * Callback function when button is clicked.
+   */
+  onButtonClick?: () => void
+  /**
+   * Specifies the button's label.
+   */
+  buttonLabel?: string
+  /**
+   * Enables a DiscountBadge to the component.
+   */
+  showDiscountBadge?: boolean
 }
 
 function ProductCard({
   product,
   index,
-  variant = 'default',
   bordered = false,
+  variant = 'default',
   aspectRatio = 1,
-  BuyButton,
+  ratingValue,
+  buttonLabel = 'Add',
+  onButtonClick,
+  showDiscountBadge = true,
   ...otherProps
 }: ProductCardProps) {
   const {
@@ -60,20 +69,24 @@ function ProductCard({
     },
   } = product
 
-  const linkProps = useProductLink({ product, selectedOffer: 0, index })
+  const linkProps = {
+    ...useProductLink({ product, selectedOffer: 0, index }),
+    as: NextLink,
+    passHref: true,
+    legacyBehavior: false,
+  }
+
   const outOfStock = availability !== 'https://schema.org/InStock'
 
   return (
     <UIProductCard
-      data-fs-product-card
-      data-fs-product-card-variant={variant}
-      data-fs-product-card-bordered={bordered}
-      data-fs-product-card-actionable={!!BuyButton}
+      outOfStock={outOfStock}
+      bordered={bordered}
+      variant={variant}
       data-fs-product-card-sku={sku}
-      className={styles.fsProductCard}
       {...otherProps}
     >
-      <UIProductCardImage data-fs-product-card-image>
+      <UIProductCardImage aspectRatio={aspectRatio}>
         <Image
           src={img.url}
           alt={img.alternateName}
@@ -83,47 +96,19 @@ function ProductCard({
           loading="lazy"
         />
       </UIProductCardImage>
-
-      <UIProductCardContent data-fs-product-card-content>
-        <div data-fs-product-card-heading>
-          <h3 data-fs-product-card-title>
-            <Link {...linkProps} title={name}>
-              {name}
-            </Link>
-          </h3>
-          <div data-fs-product-card-prices>
-            <Price
-              value={listPrice}
-              formatter={useFormattedPrice}
-              testId="list-price"
-              data-value={listPrice}
-              variant="listing"
-              classes="text__legend"
-              SRText="Original price:"
-            />
-            <Price
-              value={spotPrice}
-              formatter={useFormattedPrice}
-              testId="price"
-              data-value={spotPrice}
-              variant="spot"
-              classes="text__body"
-              SRText="Sale Price:"
-            />
-          </div>
-        </div>
-
-        {outOfStock ? (
-          <UIBadge>Out of stock</UIBadge>
-        ) : (
-          <UIDiscountBadge listPrice={listPrice} spotPrice={spotPrice} />
-        )}
-        {!!BuyButton && (
-          <UIProductCardActions data-fs-product-card-actions>
-            {BuyButton}
-          </UIProductCardActions>
-        )}
-      </UIProductCardContent>
+      <UIProductCardContent
+        title={name}
+        price={{
+          value: spotPrice,
+          listPrice: listPrice,
+          formatter: useFormattedPrice,
+        }}
+        ratingValue={ratingValue}
+        outOfStock={outOfStock}
+        onButtonClick={onButtonClick}
+        linkProps={linkProps}
+        showDiscountBadge={showDiscountBadge}
+      />
     </UIProductCard>
   )
 }

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

@@ -17,8 +17,13 @@ interface Props {
 }
 
 function ProductGrid({ products, page, pageSize }: Props) {
+  const aspectRatio = 1
+
   return (
-    <ProductGridSkeleton loading={products.length === 0}>
+    <ProductGridSkeleton
+      aspectRatio={aspectRatio}
+      loading={products.length === 0}
+    >
       <ul data-fs-product-grid className={styles.fsProductGrid}>
         {products.map(({ node: product }, idx) => (
           <li key={`${product.id}`}>
@@ -26,6 +31,7 @@ function ProductGrid({ products, page, pageSize }: Props) {
               product={product}
               index={pageSize * page + idx + 1}
               bordered
+              aspectRatio={aspectRatio}
             />
           </li>
         ))}

package/src/components/regionalization/Regionalization.stories.mdx

@@ -1,4 +1,4 @@
-import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { UIProvider, useUI, Button } from '@faststore/ui'
 
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
 
@@ -15,7 +15,7 @@ import Icon from '../ui/Icon'
 <Meta title="Features/Regionalization/Overview" />
 
 export const TemplateRegionalizationModal = () => {
-  const { modal, openModal } = useUI()
+  const { modal } = useUI()
   return <>{modal && <RegionalizationModal />}</>
 }
 
@@ -31,6 +31,26 @@ export const TemplateButtonWithProvider = () => {
   )
 }
 
+export const RegionalizationModalContentTemplate = () => {
+  const { modal, openModal } = useUI()
+  return (
+    <div>
+      <Button variant="primary" onClick={() => openModal()}>
+        Open Regionalization Modal
+      </Button>
+      {modal && <RegionalizationModal />}
+    </div>
+  )
+}
+
+export const TemplateOverview = (args) => {
+  return (
+    <UIProvider>
+      <RegionalizationModalContentTemplate onClose={() => {}} />
+    </UIProvider>
+  )
+}
+
 <header>
 
 # Regionalization
@@ -120,9 +140,7 @@ With the Regionalization feature enabled, if a customer enters their Postal Code
     </li>
     <li>
       <div>
-        <UIProvider>
-          <RegionalizationModalContent onClose={() => {}} />
-        </UIProvider>
+        <TemplateOverview />
       </div>
       <article className="sbdocs-list-text">
         <h3>RegionalizationModal</h3>
@@ -153,7 +171,7 @@ On your `Layout.tsx` file:
 
 ```jsx
 import RegionalizationModal from '../components/regionalization/RegionalizationModal'
-import { useUI } from 'src/sdk/ui/Provider'
+import { useUI } from '@faststore/ui'
 ```
 
 and inside your `Layout` component:

package/src/components/regionalization/RegionalizationBar/RegionalizationBar.stories.mdx

@@ -1,4 +1,4 @@
-import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { UIProvider, useUI } from '@faststore/ui'
 
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
 

package/src/components/regionalization/RegionalizationBar/RegionalizationBar.tsx

@@ -3,7 +3,7 @@ import { Button as UIButton } from '@faststore/ui'
 
 import Icon from 'src/components/ui/Icon'
 import { useSession } from 'src/sdk/session'
-import { useUI } from 'src/sdk/ui/Provider'
+import { useUI } from '@faststore/ui'
 
 import styles from './regionalization-bar.module.scss'
 

package/src/components/regionalization/RegionalizationButton/RegionalizationButton.tsx

@@ -2,7 +2,7 @@ import { Button as UIButton } from '@faststore/ui'
 
 import Icon from 'src/components/ui/Icon'
 import { useSession } from 'src/sdk/session'
-import { useUI } from 'src/sdk/ui/Provider'
+import { useUI } from '@faststore/ui'
 
 function RegionButton() {
   const { openModal } = useUI()

package/src/components/regionalization/RegionalizationModal/RegionalizationModal.stories.mdx

@@ -1,5 +1,6 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+
+import { UIProvider, useUI, Modal, Button } from '@faststore/ui'
 
 import RegionalizationModal, { RegionalizationModalContent } from '.'
 import RegionalizationButton from 'src/components/regionalization/RegionalizationButton'
@@ -35,10 +36,22 @@ export const Template = (args) => {
   )
 }
 
-export const RegionalizationModalContentTemplate = (args) => {
+export const RegionalizationModalContentTemplate = () => {
+  const { modal, openModal } = useUI()
+  return (
+    <div>
+      <Button variant="primary" onClick={() => openModal()}>
+        Open Regionalization Modal
+      </Button>
+      {modal && <RegionalizationModal />}
+    </div>
+  )
+}
+
+export const TemplateOverview = (args) => {
   return (
     <UIProvider>
-      <RegionalizationModalContent onClose={() => {}} />
+      <RegionalizationModalContentTemplate onClose={() => {}} />
     </UIProvider>
   )
 }
@@ -56,7 +69,7 @@ This component calls a modal with some regionalization configurations.
 The `RegionalizationModal` is part of [Regionalization](?path=/docs/features-regionalization-overview--default-button) feature and uses [Modal](/docs/molecules-modal--overview) as a base.
 
 <Canvas style={{ backgroundColor: 'var(--fs-color-neutral-1)' }}>
-  <Story name="Overview">{RegionalizationModalContentTemplate.bind({})}</Story>
+  <Story name="Overview">{TemplateOverview.bind({})}</Story>
 </Canvas>
 
 ---

package/src/components/regionalization/RegionalizationModal/RegionalizationModal.tsx

@@ -1,12 +1,11 @@
-import Modal from 'src/components/ui/Modal'
-
-import { RegionalizationModalContent } from '.'
+import { Modal as UIModal } from '@faststore/ui'
+import RegionalizationModalContent from './RegionalizationModalContent'
 
 function RegionalizationModal() {
   return (
-    <Modal>
+    <UIModal>
       {({ fadeOut }) => <RegionalizationModalContent onClose={fadeOut} />}
-    </Modal>
+    </UIModal>
   )
 }
 

package/src/components/regionalization/RegionalizationModal/RegionalizationModalContent.tsx

@@ -1,12 +1,15 @@
-import { IconButton as UIIconButton } from '@faststore/ui'
+import {
+  ModalBody as UIModalBody,
+  ModalHeader as UIModalHeader,
+} from '@faststore/ui'
 
 import RegionalizationInput from 'src/components/regionalization/RegionalizationInput'
 import Icon from 'src/components/ui/Icon'
 import Link from 'src/components/ui/Link'
 
-import styles from './regionalization-modal-content.module.scss'
+import styles from './regionalization-modal-body.module.scss'
 
-export type RegionalizationModalContentProps = {
+export interface RegionalizationModalContentProps {
   onClose?: () => void
 }
 
@@ -14,35 +17,25 @@ function RegionalizationModalContent({
   onClose,
 }: RegionalizationModalContentProps) {
   return (
-    <div
-      data-fs-regionalization-modal-content
-      className={styles.fsRegionalizationModalContent}
-    >
-      <header data-fs-regionalization-modal-header>
-        {onClose && (
-          <UIIconButton
-            onClick={() => onClose?.()}
-            data-fs-regionalization-modal-button
-            aria-label="Close Regionalization Modal"
-            data-testid="regionalization-modal-button-close"
-            icon={<Icon name="X" width={30} height={30} />}
-          />
-        )}
-        <p data-fs-regionalization-modal-title>Set your location</p>
-        <p data-fs-regionalization-modal-description>
-          Prices, offers and availability may vary according to your location.
-        </p>
-      </header>
-      <div data-fs-regionalization-modal-body>
+    <>
+      <UIModalHeader
+        onClose={() => onClose()}
+        title="Set your location"
+        description="Prices, offers and availability may vary according to your location."
+        closeButtonProps={{
+          'aria-label': 'Close Regionalization Modal',
+        }}
+      />
+      <UIModalBody className={styles.fsRegionalizationModalBody}>
         <div data-fs-regionalization-modal-input>
-          <RegionalizationInput closeModal={() => onClose?.()} />
+          <RegionalizationInput closeModal={() => onClose()} />
         </div>
         <Link href="/" data-fs-regionalization-modal-link>
           {"I don't know my Postal Code"}
           <Icon name="ArrowSquareOut" width={18} height={18} />
         </Link>
-      </div>
-    </div>
+      </UIModalBody>
+    </>
   )
 }
 

package/src/components/regionalization/RegionalizationModal/regionalization-modal-body.module.scss

@@ -0,0 +1,25 @@
+.fs-regionalization-modal-body {
+  // --------------------------------------------------------
+  // Design Tokens for Regionalization Modal
+  // --------------------------------------------------------
+
+  // Link
+  --fs-regionalization-modal-link-padding: 0;
+  --fs-regionalization-modal-link-color: var(--fs-color-link);
+  --fs-regionalization-modal-link-margin-right: var(--fs-spacing-0);
+
+  [data-fs-regionalization-modal-input] {
+    margin-bottom: var(--fs-spacing-6);
+  }
+
+  [data-fs-regionalization-modal-link] {
+    display: flex;
+    flex-direction: row;
+    align-content: flex-start;
+    align-items: center;
+    justify-content: flex-start;
+    padding: var(--fs-regionalization-modal-link-padding);
+    margin-right: var(--fs-regionalization-modal-link-margin-right);
+    color: var(--fs-regionalization-modal-link-color);
+  }
+}

package/src/components/search/Filter/Facets.stories.mdx

@@ -1,7 +1,7 @@
 import { SearchProvider } from '@faststore/sdk'
 import { useSearch } from '@faststore/sdk'
 
-import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { UIProvider, useUI } from '@faststore/ui'
 import { validateSession } from 'src/sdk/session'
 import { useFilter } from './useFilter'
 

package/src/components/search/Filter/Filter.stories.mdx

@@ -1,7 +1,7 @@
 import { SearchProvider } from '@faststore/sdk'
 import { useSearch } from '@faststore/sdk'
 
-import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { UIProvider, useUI } from '@faststore/ui'
 import { validateSession } from 'src/sdk/session'
 import { useFilter } from './useFilter'
 

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

@@ -2,7 +2,7 @@ import { gql } from '@faststore/graphql-utils'
 import { setFacet, toggleFacet, useSearch } from '@faststore/sdk'
 
 import type { Filter_FacetsFragment } from '@generated/graphql'
-import { useUI } from 'src/sdk/ui/Provider'
+import { useUI } from '@faststore/ui'
 
 import Facets from './Facets'
 import FilterSlider from './FilterSlider'

package/src/components/search/Filter/FilterSlider.stories.mdx

@@ -1,7 +1,7 @@
 import { SearchProvider } from '@faststore/sdk'
 import { useSearch } from '@faststore/sdk'
 
-import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { UIProvider, useUI } from '@faststore/ui'
 import { validateSession } from 'src/sdk/session'
 import { useFilter } from './useFilter'
 

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

@@ -4,8 +4,8 @@ import { Button as UIButton, IconButton as UIIconButton } from '@faststore/ui'
 import type { Filter_FacetsFragment } from '@generated/graphql'
 import Icon from 'src/components/ui/Icon'
 import SlideOver from 'src/components/ui/SlideOver'
-import { useUI } from 'src/sdk/ui/Provider'
-import { useFadeEffect } from 'src/sdk/ui/useFadeEffect'
+import { useUI } from '@faststore/ui'
+import { useFadeEffect } from '@faststore/ui'
 
 import Facets from './Facets'
 import styles from './filter-slider.module.scss'

package/src/components/sections/Newsletter/Newsletter.stories.mdx

@@ -1,7 +1,7 @@
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
 import { TokenTable, TokenRow } from 'src/../.storybook/components'
 
-import UIProvider from 'src/sdk/ui/Provider'
+import { UIProvider } from '@faststore/ui'
 
 import Newsletter from '.'
 

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

@@ -6,7 +6,7 @@ import {
   InputField as UIInputField,
 } from '@faststore/ui'
 
-import { useUI } from 'src/sdk/ui/Provider'
+import { useUI } from '@faststore/ui'
 import Icon from 'src/components/ui/Icon'
 import Link from 'src/components/ui/Link'
 import { useNewsletter } from 'src/sdk/newsletter/useNewsletter'

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

@@ -6,6 +6,7 @@ import {
   BuyButton as UIBuyButton,
   DiscountBadge as UIDiscountBadge,
   QuantitySelector as UIQuantitySelector,
+  ProductTitle as UIProductTitle,
 } from '@faststore/ui'
 
 import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
@@ -13,7 +14,6 @@ import OutOfStock from 'src/components/product/OutOfStock'
 import Breadcrumb from 'src/components/ui/Breadcrumb'
 import { ImageGallery } from 'src/components/ui/ImageGallery'
 import Price from 'src/components/ui/Price'
-import ProductTitle from 'src/components/ui/ProductTitle'
 import ShippingSimulation from 'src/components/ui/ShippingSimulation'
 import Selectors from 'src/components/ui/SkuSelector'
 import type { AnalyticsItem } from 'src/sdk/analytics/types'
@@ -122,7 +122,7 @@ function ProductDetails({ context: staleProduct }: Props) {
 
       <section data-fs-product-details-body>
         <header data-fs-product-details-title data-fs-product-details-section>
-          <ProductTitle
+          <UIProductTitle
             title={<h1>{name}</h1>}
             label={
               <UIDiscountBadge

package/src/components/sections/ProductGallery/ProductGallery.tsx

@@ -2,16 +2,19 @@ import { useSearch } from '@faststore/sdk'
 import { NextSeo } from 'next-seo'
 import { lazy, Suspense } from 'react'
 import type { MouseEvent } from 'react'
-import { Button as UIButton, LinkButton as UILinkButton } from '@faststore/ui'
+import {
+  Button as UIButton,
+  LinkButton as UILinkButton,
+  Skeleton as UISkeleton,
+} from '@faststore/ui'
 
 import Filter from 'src/components/search/Filter'
 import Sort from 'src/components/search/Sort'
 import FilterSkeleton from 'src/components/skeletons/FilterSkeleton'
 import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
-import Skeleton from 'src/components/skeletons/Skeleton'
 import Icon from 'src/components/ui/Icon'
 import { mark } from 'src/sdk/tests/mark'
-import { useUI } from 'src/sdk/ui/Provider'
+import { useUI } from '@faststore/ui'
 
 import Section from '../Section'
 import EmptyGallery from './EmptyGallery'
@@ -74,31 +77,28 @@ function ProductGallery({ title, searchTerm }: Props) {
         </div>
 
         <div data-fs-product-listing-results-count data-count={totalCount}>
-          <Skeleton
-            shimmer
-            variant="text"
-            loading={!data}
+          <UISkeleton
             data-fs-product-listing-results-count-skeleton
+            loading={!data}
+            size={{ width: '100%', height: '1.5rem' }}
           >
             <h2 data-testid="total-product-count">{totalCount} Results</h2>
-          </Skeleton>
+          </UISkeleton>
         </div>
 
         <div data-fs-product-listing-sort>
-          <Skeleton
-            shimmer
-            variant="text"
-            loading={facets?.length === 0}
+          <UISkeleton
             data-fs-product-listing-sort-skeleton
+            loading={facets?.length === 0}
+            size={{ width: 'auto', height: '1.5rem' }}
           >
             <Sort />
-          </Skeleton>
+          </UISkeleton>
 
-          <Skeleton
-            shimmer
-            variant="button"
-            loading={facets?.length === 0}
+          <UISkeleton
             data-fs-product-listing-filter-button-skeleton
+            loading={facets?.length === 0}
+            size={{ width: '6rem', height: '1.5rem' }}
           >
             <UIButton
               variant="tertiary"
@@ -110,7 +110,7 @@ function ProductGallery({ title, searchTerm }: Props) {
             >
               Filters
             </UIButton>
-          </Skeleton>
+          </UISkeleton>
         </div>
 
         <div data-fs-product-listing-results>

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

@@ -24,6 +24,7 @@ function ProductShelf({
   const { ref, inView } = useInView()
   const products = useProductsQuery(variables)
   const productEdges = products?.edges ?? []
+  const aspectRatio = 1
 
   const { sendViewItemListEvent } = useViewItemListEvent({
     products: productEdges,
@@ -51,11 +52,18 @@ function ProductShelf({
     >
       <h2 className="text__title-section layout__content">{title}</h2>
       <div className={styles.fsProductShelf} data-fs-product-shelf>
-        <ProductShelfSkeleton loading={products === undefined}>
+        <ProductShelfSkeleton
+          aspectRatio={aspectRatio}
+          loading={products === undefined}
+        >
           <ul data-fs-product-shelf-items className="layout__content">
             {productEdges.map((product, idx) => (
               <li key={`${product.node.id}`}>
-                <ProductCard product={product.node} index={idx + 1} />
+                <ProductCard
+                  product={product.node}
+                  index={idx + 1}
+                  aspectRatio={aspectRatio}
+                />
               </li>
             ))}
           </ul>

package/src/components/sections/ProductTiles/ProductTiles.tsx

@@ -25,7 +25,7 @@ const getRatio = (products: number, idx: number) => {
     products === NUMBER_ITEMS_TO_EXPAND_FIRST_TWO && (idx === 0 || idx === 1)
 
   if (expandsFirstTile || expandsFirstTwoTile) {
-    return 4 / 3
+    return 5 / 3
   }
 
   return 3 / 4
@@ -60,7 +60,7 @@ const ProductTiles = ({ title, ...variables }: ProductTilesProps) => {
     <Section className="layout__section layout__content" ref={ref}>
       <h2 className="text__title-section">{title}</h2>
       <div>
-        <ProductTilesSkeleton variant="wide" loading={!products}>
+        <ProductTilesSkeleton loading={!products}>
           <Tiles>
             {productEdges.map((product, idx) => (
               <Tile key={product.node.id}>

package/src/components/skeletons/FilterSkeleton/FilterSkeleton.stories.mdx

@@ -31,7 +31,7 @@ The loading placeholder for the <code>Filter</code> component used in PLP.
 
 ## Overview
 
-The `FilterSkeleton` component is part of [Skeletons](?path=/docs/features-skeletons-overview--usage) feature.
+The `FilterSkeleton` component is part of Skeletons feature.
 
 ---