@faststore/core 0.3.16 → 2.0.65-alpha.0

package/src/components/sections/ProducDetailsContent/ProductDetailsContent.tsx

@@ -6,9 +6,12 @@ import {
   TableCell as UITableCell,
   TableRow as UITableRow,
   Icon as UIIcon,
+  Accordion as UIAccordion,
+  AccordionItem as UIAccordionItem,
+  AccordionButton as UIAccordionButton,
+  AccordionPanel as UIAccordionPanel,
 } from '@faststore/ui'
 
-import Accordion, { AccordionItem } from 'src/components/ui/Accordion'
 import Icon from 'src/components/ui/Icon'
 
 import Section from '../Section'
@@ -100,175 +103,172 @@ function ProductDetailsContent({
 
   return (
     <Section data-fs-product-details-content>
-      <Accordion
-        expandedIndices={indices}
+      <UIAccordion
+        indices={indices}
         onChange={onChange}
         aria-label="Product Details Content"
       >
-        <AccordionItem
+        <UIAccordionItem
           as="article"
           index={0}
-          isExpanded={indices.has(0)}
-          buttonLabel={
-            <h2 className="text__title-subsection">{labels.description}</h2>
-          }
           data-fs-product-details-description
           prefixId="product-details-content"
         >
-          <p className="text__body">
-            Sony WH-1000XM4 Wireless Industry Leading Noise Canceling Overhead
-            Headphones with Mic for Phone-Call and Alexa Voice Control, Black.
-          </p>
-        </AccordionItem>
-        <AccordionItem
+          <UIAccordionButton>{labels.description}</UIAccordionButton>
+          <UIAccordionPanel>
+            <p className="text__body">
+              Sony WH-1000XM4 Wireless Industry Leading Noise Canceling Overhead
+              Headphones with Mic for Phone-Call and Alexa Voice Control, Black.
+            </p>
+          </UIAccordionPanel>
+        </UIAccordionItem>
+        <UIAccordionItem
           as="article"
           index={1}
-          isExpanded={indices.has(1)}
-          buttonLabel={
-            <h2 className="text__title-subsection">{labels.about}</h2>
-          }
           data-fs-product-details-about
           prefixId="product-details-content"
         >
-          <UITable
-            cellPadding={0}
-            cellSpacing={0}
-            className="text__title-mini-alt"
-          >
-            <UITableBody>
-              <UITableRow>
-                <UITableCell variant="header" align="left">
-                  <UIIcon
-                    data-fs-accordion-item-button-icon
-                    component={<Icon name="Ruler" width={18} height={18} />}
-                  />
-                  <span>Width</span>
-                </UITableCell>
-                <UITableCell align="right">1.50m</UITableCell>
-              </UITableRow>
-              <UITableRow>
-                <UITableCell variant="header" align="left">
-                  <UIIcon
-                    data-fs-accordion-item-button-icon
-                    component={<Icon name="Ruler" width={18} height={18} />}
-                  />
-                  Height
-                </UITableCell>
-                <UITableCell align="right">1.50m</UITableCell>
-              </UITableRow>
-              <UITableRow>
-                <UITableCell variant="header" align="left">
-                  <UIIcon
-                    data-fs-accordion-item-button-icon
-                    component={<Icon name="Ruler" width={18} height={18} />}
-                  />
-                  Dimensions
-                </UITableCell>
-                <UITableCell align="right">
-                  7.27 x 3.03 x 9.94 inches
-                </UITableCell>
-              </UITableRow>
-              <UITableRow>
-                <UITableCell variant="header" align="left">
-                  <UIIcon
-                    data-fs-accordion-item-button-icon
-                    component={<Icon name="Bag" width={18} height={18} />}
-                  />
-                  Weight
-                </UITableCell>
-                <UITableCell align="right">12oz</UITableCell>
-              </UITableRow>
-              <UITableRow>
-                <UITableCell variant="header" align="left">
-                  <UIIcon
-                    data-fs-accordion-item-button-icon
-                    component={
-                      <Icon name="RocketLaunch" width={18} height={18} />
-                    }
-                  />
-                  Days to ship
-                </UITableCell>
-                <UITableCell align="right">11 Days</UITableCell>
-              </UITableRow>
-              <UITableRow>
-                <UITableCell variant="header" align="left">
-                  <UIIcon
-                    data-fs-accordion-item-button-icon
-                    component={
-                      <Icon name="CircleWavyCheck" width={18} height={18} />
-                    }
-                  />
-                  Estimated
-                </UITableCell>
-                <UITableCell align="right">Nov 10th</UITableCell>
-              </UITableRow>
-            </UITableBody>
-          </UITable>
-        </AccordionItem>
-        <AccordionItem
+          <UIAccordionButton>{labels.about}</UIAccordionButton>
+          <UIAccordionPanel>
+            <UITable
+              cellPadding={0}
+              cellSpacing={0}
+              className="text__title-mini-alt"
+            >
+              <UITableBody>
+                <UITableRow>
+                  <UITableCell variant="header" align="left">
+                    <UIIcon
+                      data-fs-accordion-item-button-icon
+                      component={<Icon name="Ruler" width={18} height={18} />}
+                    />
+                    <span>Width</span>
+                  </UITableCell>
+                  <UITableCell align="right">1.50m</UITableCell>
+                </UITableRow>
+                <UITableRow>
+                  <UITableCell variant="header" align="left">
+                    <UIIcon
+                      data-fs-accordion-item-button-icon
+                      component={<Icon name="Ruler" width={18} height={18} />}
+                    />
+                    Height
+                  </UITableCell>
+                  <UITableCell align="right">1.50m</UITableCell>
+                </UITableRow>
+                <UITableRow>
+                  <UITableCell variant="header" align="left">
+                    <UIIcon
+                      data-fs-accordion-item-button-icon
+                      component={<Icon name="Ruler" width={18} height={18} />}
+                    />
+                    Dimensions
+                  </UITableCell>
+                  <UITableCell align="right">
+                    7.27 x 3.03 x 9.94 inches
+                  </UITableCell>
+                </UITableRow>
+                <UITableRow>
+                  <UITableCell variant="header" align="left">
+                    <UIIcon
+                      data-fs-accordion-item-button-icon
+                      component={<Icon name="Bag" width={18} height={18} />}
+                    />
+                    Weight
+                  </UITableCell>
+                  <UITableCell align="right">12oz</UITableCell>
+                </UITableRow>
+                <UITableRow>
+                  <UITableCell variant="header" align="left">
+                    <UIIcon
+                      data-fs-accordion-item-button-icon
+                      component={
+                        <Icon name="RocketLaunch" width={18} height={18} />
+                      }
+                    />
+                    Days to ship
+                  </UITableCell>
+                  <UITableCell align="right">11 Days</UITableCell>
+                </UITableRow>
+                <UITableRow>
+                  <UITableCell variant="header" align="left">
+                    <UIIcon
+                      data-fs-accordion-item-button-icon
+                      component={
+                        <Icon name="CircleWavyCheck" width={18} height={18} />
+                      }
+                    />
+                    Estimated
+                  </UITableCell>
+                  <UITableCell align="right">Nov 10th</UITableCell>
+                </UITableRow>
+              </UITableBody>
+            </UITable>
+          </UIAccordionPanel>
+        </UIAccordionItem>
+        <UIAccordionItem
           as="article"
           className="text__body"
           index={2}
-          isExpanded={indices.has(2)}
-          buttonLabel={
-            <h2 className="text__title-subsection">{labels.highlights}</h2>
-          }
           data-fs-product-details-highlights
           prefixId="product-details-content"
         >
-          <UIList marker>
-            <li>
-              Industry-leading noise canceling with Dual Noise Sensor technology
-            </li>
-            <li>
-              Next-level music with Edge-AI, co-developed with Sony Music
-              Studios Tokyo
-            </li>
-            <li>
-              Up to 30-hour battery life with quick charging (10 min charge for
-              5 hours of playback)
-            </li>
-            <li>
-              Touch Sensor controls to pause play skip tracks, control volume,
-              activate your voice assistant, and answer phone calls
-            </li>
-            <li>
-              Speak-to-chat technology automatically reduces volume during
-              conversations
-            </li>
-            <li>Superior call quality with precise voice pickup</li>
-            <li>
-              Wearing detection pauses playback when headphones are removed
-            </li>
-            <li>Seamless multiple-device pairing</li>
-            <li>
-              Adaptive Sound Control provides a personalized listening
-              experience
-            </li>
-            <li>Updated design relieves pressure for long-lasting comfort</li>
-          </UIList>
-        </AccordionItem>
-        <AccordionItem
+          <UIAccordionButton>{labels.highlights}</UIAccordionButton>
+          <UIAccordionPanel>
+            <UIList marker>
+              <li>
+                Industry-leading noise canceling with Dual Noise Sensor
+                technology
+              </li>
+              <li>
+                Next-level music with Edge-AI, co-developed with Sony Music
+                Studios Tokyo
+              </li>
+              <li>
+                Up to 30-hour battery life with quick charging (10 min charge
+                for 5 hours of playback)
+              </li>
+              <li>
+                Touch Sensor controls to pause play skip tracks, control volume,
+                activate your voice assistant, and answer phone calls
+              </li>
+              <li>
+                Speak-to-chat technology automatically reduces volume during
+                conversations
+              </li>
+              <li>Superior call quality with precise voice pickup</li>
+              <li>
+                Wearing detection pauses playback when headphones are removed
+              </li>
+              <li>Seamless multiple-device pairing</li>
+              <li>
+                Adaptive Sound Control provides a personalized listening
+                experience
+              </li>
+              <li>Updated design relieves pressure for long-lasting comfort</li>
+            </UIList>
+          </UIAccordionPanel>
+        </UIAccordionItem>
+        <UIAccordionItem
           as="article"
           index={3}
-          isExpanded={indices.has(3)}
-          buttonLabel={
-            <h2 className="text__title-subsection">{labels.learnMore}</h2>
-          }
           data-fs-product-details-learn-more
           prefixId="product-details-content"
         >
-          <p className="text__body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laboru.
-          </p>
-        </AccordionItem>
-      </Accordion>
+          <UIAccordionButton>{labels.learnMore}</UIAccordionButton>
+          <UIAccordionPanel>
+            <p className="text__body">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laboru.
+            </p>
+          </UIAccordionPanel>
+        </UIAccordionItem>
+      </UIAccordion>
     </Section>
   )
 }

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

@@ -5,6 +5,8 @@ import { useEffect, useState } from 'react'
 import {
   BuyButton as UIBuyButton,
   DiscountBadge as UIDiscountBadge,
+  QuantitySelector as UIQuantitySelector,
+  ProductTitle as UIProductTitle,
 } from '@faststore/ui'
 
 import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
@@ -12,8 +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 QuantitySelector from 'src/components/ui/QuantitySelector'
 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
@@ -167,7 +167,7 @@ function ProductDetails({ context: staleProduct }: Props) {
                 <p className="price__old text__legend">{formattedListPrice}</p>
                 <p className="price__new">{isValidating ? '' : formattedPrice}</p>
               </div> */}
-              <QuantitySelector min={1} max={10} onChange={setAddQuantity} />
+              <UIQuantitySelector min={1} max={10} onChange={setAddQuantity} />
             </section>
             {skuVariants && (
               <Selectors

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.
 
 ---
 

package/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx

@@ -1,9 +1,7 @@
 import type { PropsWithChildren } from 'react'
 
-import Shimmer from '../Shimmer'
-import Skeleton from '../Skeleton'
+import { Skeleton as UISkeleton } from '@faststore/ui'
 import styles from './filter-skeleton.module.scss'
-
 interface FilterSkeletonProps {
   /**
    * Control whether skeleton should be visible or not.
@@ -17,13 +15,27 @@ function FilterSkeleton({
 }: PropsWithChildren<FilterSkeletonProps>) {
   return loading ? (
     <div className={styles.fsFilterSkeleton} data-fs-filter-skeleton>
-      <Skeleton shimmer variant="text" />
+      <UISkeleton
+        data-fs-filter-skeleton-text
+        size={{ width: '100%', height: '1.5rem' }}
+      />
 
       <div data-fs-filter-skeleton-content>
-        <Skeleton variant="text" />
-        <Skeleton variant="text" />
-        <Skeleton variant="text" />
-        <Shimmer />
+        <UISkeleton
+          data-fs-filter-skeleton-text
+          size={{ width: '100%', height: '1.5rem' }}
+          shimmer={false}
+        />
+        <UISkeleton
+          data-fs-filter-skeleton-text
+          size={{ width: '100%', height: '1.5rem' }}
+          shimmer={false}
+        />
+        <UISkeleton
+          data-fs-filter-skeleton-text
+          size={{ width: '100%', height: '1.5rem' }}
+          shimmer={false}
+        />
       </div>
     </div>
   ) : (

package/src/components/skeletons/FilterSkeleton/filter-skeleton.module.scss

@@ -28,7 +28,7 @@
 
   @include media("<notebook") { display: none; }
 
-  [data-fs-skeleton-variant="text"] {
+  [data-fs-filter-skeleton-text] {
     max-width: var(--fs-filter-skeleton-title-max-width);
     margin-bottom: var(--fs-filter-skeleton-title-margin-bottom);
   }
@@ -42,7 +42,7 @@
     border: var(--fs-filter-skeleton-content-border-width) solid var(--fs-filter-skeleton-content-border-color);
     border-radius: var(--fs-filter-skeleton-content-border-radius);
 
-    [data-fs-skeleton-variant="text"] {
+    [data-fs-skeleton] {
       min-width: 100%;
       min-height: var(--fs-filter-skeleton-content-min-height);
       margin-bottom: var(--fs-filter-skeleton-content-margin-bottom);