@faststore/core 0.3.17 → 2.0.65-alpha.0

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);

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

@@ -39,7 +39,7 @@ The loading placeholder for the <code>ProductCard</code> used in several section
 
 ## Overview
 
-The `ProductCardSkeleton` component is part of [Skeletons](?path=/docs/features-skeletons-overview--usage) feature.
+The `ProductCardSkeleton` component is part of Skeletons feature.
 
 ---
 
@@ -68,71 +68,13 @@ The `ProductCardSkeleton` component is part of [Skeletons](?path=/docs/features-
     token="--fs-product-card-skeleton-padding"
     value="var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2)"
   />
-  <TokenRow
-    token="--fs-product-card-skeleton-border-width"
-    value="var(--fs-border-width)"
-  />
-  <TokenRow
-    token="--fs-product-card-skeleton-border-color"
-    value="transparent"
-    isColor
-  />
   <TokenRow
     token="--fs-product-card-skeleton-border-radius"
     value="var(--fs-border-radius)"
   />
-</TokenTable>
-
-### Content
-
-<TokenTable>
-  <TokenRow token="--fs-product-card-skeleton-content-height" value="20%" />
-  <TokenRow
-    token="--fs-product-card-skeleton-content-margin-top"
-    value="var(--fs-spacing-2)"
-  />
-</TokenTable>
-
-### Button
-
-<TokenTable>
-  <TokenRow
-    token="--fs-product-card-skeleton-button-margin-top"
-    value="var(--fs-spacing-4)"
-  />
-</TokenTable>
-
-### Text
-
-<TokenTable>
-  <TokenRow
-    token="--fs-product-card-skeleton-text-margin-bottom"
-    value="var(--fs-product-card-skeleton-content-margin-top)"
-  />
-</TokenTable>
-
-### Badge
-
-<TokenTable>
-  <TokenRow
-    token="--fs-product-card-skeleton-badge-min-height"
-    value="var(--fs-spacing-5)"
-  />
-  <TokenRow
-    token="--fs-product-card-skeleton-badge-margin-top"
-    value="var(--fs-product-card-skeleton-text-margin-top)"
-  />
-  <TokenRow
-    token="--fs-product-card-skeleton-badge-max-width"
-    value="var(--fs-product-card-skeleton-content-height)"
-  />
   <TokenRow
-    token="--fs-product-card-skeleton-badge-min-width-mobile"
-    value="30%"
-  />
-  <TokenRow
-    token="--fs-product-card-skeleton-badge-min-width-tablet"
-    value="var(--fs-product-card-skeleton-content-height)"
+    token="--fs-product-card-skeleton-gap"
+    value="var(--fs-spacing-1)"
   />
 </TokenTable>
 
@@ -150,12 +92,8 @@ The `ProductCardSkeleton` component is part of [Skeletons](?path=/docs/features-
 
 <TokenTable>
   <TokenRow
-    token="--fs-product-card-skeleton-sectioned-image-min-width"
-    value="13rem"
-  />
-  <TokenRow
-    token="--fs-product-card-skeleton-sectioned-image-height"
-    value="var(--fs-product-card-skeleton-image-height-desktop)"
+    token="--fs-product-card-skeleton-sectioned-min-width"
+    value="10rem"
   />
 </TokenTable>
 
@@ -168,9 +106,8 @@ The `ProductCardSkeleton` component is part of [Skeletons](?path=/docs/features-
 </Canvas>
 
 <TokenTable>
-  <TokenRow token="--fs-product-card-skeleton-bordered-mobile" value="none" />
   <TokenRow
-    token="--fs-product-card-skeleton-bordered-desktop"
+    token="--fs-product-card-skeleton-bordered"
     value="var(--fs-border-width) solid var(--fs-border-color-light)"
   />
 </TokenTable>

package/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx

@@ -1,5 +1,5 @@
-import Shimmer from '../Shimmer'
-import Skeleton from '../Skeleton'
+import { Skeleton as UISkeleton } from '@faststore/ui'
+
 import styles from './product-card-skeleton.module.scss'
 
 interface ProductCardSkeletonProps {
@@ -19,12 +19,17 @@ interface ProductCardSkeletonProps {
    * Specifies the component variant.
    */
   variant?: 'default' | 'wide'
+  /**
+   * Specifies the ProductCard image's aspect ratio.
+   */
+  aspectRatio?: number
 }
 
 function ProductCardSkeleton({
   bordered,
   sectioned,
   displayButton,
+  aspectRatio = 1,
   variant = 'default',
 }: ProductCardSkeletonProps) {
   return (
@@ -35,16 +40,38 @@ function ProductCardSkeleton({
       data-fs-product-card-skeleton-bordered={bordered}
       data-fs-product-card-skeleton-sectioned={sectioned}
     >
-      <div data-fs-product-card-skeleton-image>
-        <Skeleton variant="image" />
+      <div
+        data-fs-product-card-skeleton-image
+        style={
+          {
+            '--fs-product-card-skeleton-image-aspect-ratio': aspectRatio,
+          } as React.CSSProperties
+        }
+      >
+        <UISkeleton size={{ width: '100%', height: '100%' }} />
       </div>
       <div data-fs-product-card-skeleton-content>
-        <Skeleton variant="text" />
-        <Skeleton variant="text" />
-        <Skeleton variant="badge" />
-        {displayButton && <Skeleton variant="button" />}
+        <UISkeleton
+          data-fs-product-card-skeleton-text
+          size={{ width: '90%', height: '1.5rem' }}
+        />
+        <UISkeleton
+          data-fs-product-card-skeleton-text
+          size={{ width: '70%', height: '1.5rem' }}
+        />
+        <UISkeleton
+          data-fs-product-card-skeleton-badge
+          size={{ width: '6rem', height: '2rem' }}
+          border="pill"
+        />
+        {displayButton && (
+          <UISkeleton
+            data-fs-product-card-skeleton-button
+            size={{ width: '6rem', height: '2rem' }}
+            style={{ columnGap: '.75rem' }}
+          />
+        )}
       </div>
-      <Shimmer />
     </div>
   )
 }

package/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.module.scss

@@ -7,34 +7,14 @@
 
   // Default properties
   --fs-product-card-skeleton-padding                   : var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2);
-  --fs-product-card-skeleton-border-width              : var(--fs-border-width);
-  --fs-product-card-skeleton-border-color              : transparent;
   --fs-product-card-skeleton-border-radius             : var(--fs-border-radius);
-
-  // Content
-  --fs-product-card-skeleton-content-height            : 20%;
-  --fs-product-card-skeleton-content-margin-top        : var(--fs-spacing-2);
-
-  // Button
-  --fs-product-card-skeleton-button-margin-top         : var(--fs-spacing-4);
-
-  // Text
-  --fs-product-card-skeleton-text-margin-bottom        : var(--fs-product-card-skeleton-content-margin-top);
-
-  // Badge
-  --fs-product-card-skeleton-badge-min-height          : var(--fs-spacing-5);
-  --fs-product-card-skeleton-badge-margin-top          : var(--fs-product-card-skeleton-text-margin-top);
-  --fs-product-card-skeleton-badge-max-width           : var(--fs-product-card-skeleton-content-height);
-  --fs-product-card-skeleton-badge-min-width-mobile    : 30%;
-  --fs-product-card-skeleton-badge-min-width-tablet    : var(--fs-product-card-skeleton-content-height);
+  --fs-product-card-skeleton-gap                       : var(--fs-spacing-1);
 
   // Sectioned
-  --fs-product-card-skeleton-sectioned-image-min-width : 13rem;
-  --fs-product-card-skeleton-sectioned-image-height    : 12.188rem;
+  --fs-product-card-skeleton-sectioned-min-width       : 10rem;
 
   // Bordered
-  --fs-product-card-skeleton-bordered-mobile           : none;
-  --fs-product-card-skeleton-bordered-desktop          : var(--fs-border-width) solid var(--fs-border-color-light);
+  --fs-product-card-skeleton-bordered                  : var(--fs-border-width) solid var(--fs-border-color-light);
 
   // --------------------------------------------------------
   // Structural Styles
@@ -43,36 +23,24 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  min-width: 14vw;
-  height: 100%;
+  row-gap: var(--fs-product-card-skeleton-gap);
   padding: var(--fs-product-card-skeleton-padding);
   overflow: hidden;
-  border: var(--fs-product-card-skeleton-border-width) solid var(--fs-product-card-skeleton-border-color);
   border-radius: var(--fs-product-card-skeleton-border-radius);
 
-  @include media(">=notebook") { min-width: 12rem; }
-
   [data-fs-product-card-skeleton-content] {
-    position: relative;
-    height: var(--fs-product-card-skeleton-content-height);
-    margin-top: var(--fs-product-card-skeleton-content-margin-top);
-
-    [data-fs-skeleton-variant="text"] { margin-bottom: var(--fs-product-card-skeleton-text-margin-bottom); }
-
-    [data-fs-skeleton-variant="button"] { margin-top: var(--fs-product-card-skeleton-button-margin-top); }
-
-    [data-fs-skeleton-variant="badge"] {
-      min-width: var(--fs-product-card-skeleton-badge-min-width-mobile);
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--fs-product-card-skeleton-gap);
+  }
 
-      @include media(">=notebook") {
-        min-height: var(--fs-product-card-skeleton-badge-min-height);
-        margin-top: var(--fs-product-card-skeleton-badge-margin-top);
-      }
+  [data-fs-product-card-skeleton-image] {
+    aspect-ratio: var(--fs-product-card-skeleton-image-aspect-ratio);
 
-      @include media(">=tablet") {
-        min-width: var(--fs-product-card-skeleton-badge-min-width-tablet);
-        max-width: var(--fs-product-card-skeleton-badge-max-width);
-      }
+    [data-fs-skeleton-wrapper],
+    [data-fs-skeleton] {
+      width: 100%;
+      height: 100%;
     }
   }
 
@@ -81,17 +49,10 @@
   // --------------------------------------------------------
 
   &[data-fs-product-card-skeleton-sectioned="true"] {
-    [data-fs-skeleton-variant="image"] {
-      min-width: var(--fs-product-card-skeleton-sectioned-image-min-width);
-      min-height: var(--fs-product-card-skeleton-sectioned-image-height);
-    }
+    min-width: var(--fs-product-card-skeleton-sectioned-min-width);
   }
 
   &[data-fs-product-card-skeleton-bordered="true"] {
-    border: var(--fs-product-card-skeleton-bordered-mobile);
-
-    @include media(">=notebook") {
-      border: var(--fs-product-card-skeleton-bordered-desktop);
-    }
+    border: var(--fs-product-card-skeleton-bordered);
   }
 }

package/src/components/skeletons/ProductGridSkeleton/ProductGridSkeleton.tsx

@@ -7,17 +7,19 @@ import ProductCardSkeleton from '../ProductCardSkeleton'
 
 interface ProductGridSkeletonProps {
   loading?: boolean
+  aspectRatio?: number
 }
 
 function ProductGridSkeleton({
   children,
+  aspectRatio,
   loading = true,
 }: PropsWithChildren<ProductGridSkeletonProps>) {
   return loading ? (
     <ul className={styles.fsProductGrid}>
       {Array.from({ length: ITEMS_PER_PAGE }, (_, index) => (
         <li key={String(index)}>
-          <ProductCardSkeleton bordered />
+          <ProductCardSkeleton aspectRatio={aspectRatio} bordered />
         </li>
       ))}
     </ul>

package/src/components/skeletons/ProductShelfSkeleton/ProductShelfSkeleton.tsx

@@ -7,10 +7,12 @@ import ProductCardSkeleton from '../ProductCardSkeleton'
 
 interface Props {
   loading?: boolean
+  aspectRatio?: number
 }
 
 function ProductShelfSkeleton({
   children,
+  aspectRatio,
   loading = true,
 }: PropsWithChildren<Props>) {
   return loading ? (
@@ -20,7 +22,7 @@ function ProductShelfSkeleton({
     >
       {Array.from({ length: ITEMS_PER_SECTION }, (_, index) => (
         <li key={String(index)}>
-          <ProductCardSkeleton sectioned />
+          <ProductCardSkeleton aspectRatio={aspectRatio} sectioned />
         </li>
       ))}
     </ul>

package/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/ProductTileSkeleton.tsx

@@ -1,44 +1,46 @@
-import Skeleton from 'src/components/skeletons/Skeleton'
-import Shimmer from 'src/components/skeletons/Shimmer'
+import { Skeleton as UISkeleton } from '@faststore/ui'
 
 import styles from './product-tile-skeleton.module.scss'
 
 interface ProductTileSkeletonProps {
   index: number
-  bordered?: boolean
-  variant?: 'wide' | 'default'
+  aspectRatio?: number
 }
 
 function ProductTileSkeleton({
   index,
-  bordered,
-  variant = 'default',
+  aspectRatio = 1,
 }: ProductTileSkeletonProps) {
   return (
     <div
       data-fs-product-tile-skeleton
       className={styles.fsProductTileSkeleton}
       data-fs-product-tile-skeleton-index={index}
-      data-fs-product-tile-skeleton-variant={variant}
-      data-fs-product-tile-skeleton-bordered={bordered}
     >
       <div
         data-fs-product-tile-skeleton-image
         data-fs-product-tile-skeleton-index={index}
+        style={
+          {
+            '--fs-product-tile-skeleton-image-aspect-ratio': aspectRatio,
+          } as React.CSSProperties
+        }
       >
-        <Skeleton variant="image" />
+        <UISkeleton size={{ width: 'auto', height: '100%' }} loading={true} />
       </div>
       <div
         data-fs-product-tile-skeleton-content
         data-fs-product-tile-skeleton-index={index}
       >
-        <div
-          data-fs-product-tile-skeleton-text
-          data-fs-product-tile-skeleton-index={index}
-        >
-          <Skeleton variant="text" />
+        <div data-fs-product-tile-skeleton-heading>
+          <div
+            data-fs-product-tile-skeleton-text
+            data-fs-product-tile-skeleton-index={index}
+          >
+            <UISkeleton size={{ width: '70%', height: '1.5rem' }} />
+          </div>
           <div data-fs-product-tile-skeleton-price>
-            <Skeleton variant="text" />
+            <UISkeleton size={{ width: '60%', height: '1.5rem' }} />
           </div>
         </div>
 
@@ -46,10 +48,9 @@ function ProductTileSkeleton({
           data-fs-product-tile-skeleton-badge
           data-fs-product-tile-skeleton-index={index}
         >
-          <Skeleton variant="badge" />
+          <UISkeleton size={{ width: '6rem', height: '2rem' }} border="pill" />
         </div>
       </div>
-      <Shimmer />
     </div>
   )
 }