@faststore/core 22.42.6

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

@@ -0,0 +1,97 @@
+@import "src/styles/scaffold";
+
+.fs-product-card-skeleton {
+  // --------------------------------------------------------
+  // Design Tokens for Product Card Skeleton
+  // --------------------------------------------------------
+
+  // 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);
+
+  // Sectioned
+  --fs-product-card-skeleton-sectioned-image-min-width : 13rem;
+  --fs-product-card-skeleton-sectioned-image-height    : 12.188rem;
+
+  // Bordered
+  --fs-product-card-skeleton-bordered-mobile           : none;
+  --fs-product-card-skeleton-bordered-desktop          : var(--fs-border-width) solid var(--fs-border-color-light);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 14vw;
+  height: 100%;
+  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);
+
+      @include media(">=notebook") {
+        min-height: var(--fs-product-card-skeleton-badge-min-height);
+        margin-top: var(--fs-product-card-skeleton-badge-margin-top);
+      }
+
+      @include media(">=tablet") {
+        min-width: var(--fs-product-card-skeleton-badge-min-width-tablet);
+        max-width: var(--fs-product-card-skeleton-badge-max-width);
+      }
+    }
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[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);
+    }
+  }
+
+  &[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);
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+import type { PropsWithChildren } from 'react'
+
+import { ITEMS_PER_PAGE } from 'src/constants'
+import styles from 'src/components/product/ProductGrid/product-grid.module.scss'
+
+import ProductCardSkeleton from '../ProductCardSkeleton'
+
+interface ProductGridSkeletonProps {
+  loading?: boolean
+}
+
+function ProductGridSkeleton({
+  children,
+  loading = true,
+}: PropsWithChildren<ProductGridSkeletonProps>) {
+  return loading ? (
+    <ul className={styles.fsProductGrid}>
+      {Array.from({ length: ITEMS_PER_PAGE }, (_, index) => (
+        <li key={String(index)}>
+          <ProductCardSkeleton bordered />
+        </li>
+      ))}
+    </ul>
+  ) : (
+    <>{children}</>
+  )
+}
+
+export default ProductGridSkeleton

package/src/components/skeletons/ProductGridSkeleton/index.ts

@@ -0,0 +1 @@
+export { default } from './ProductGridSkeleton'

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

@@ -0,0 +1,32 @@
+import type { PropsWithChildren } from 'react'
+
+import { ITEMS_PER_SECTION } from 'src/constants'
+import styles from 'src/components/sections/ProductShelf/product-shelf.module.scss'
+
+import ProductCardSkeleton from '../ProductCardSkeleton'
+
+interface Props {
+  loading?: boolean
+}
+
+function ProductShelfSkeleton({
+  children,
+  loading = true,
+}: PropsWithChildren<Props>) {
+  return loading ? (
+    <ul
+      data-fs-product-shelf-items
+      className={`layout__content ${styles.fsProductShelf}`}
+    >
+      {Array.from({ length: ITEMS_PER_SECTION }, (_, index) => (
+        <li key={String(index)}>
+          <ProductCardSkeleton sectioned />
+        </li>
+      ))}
+    </ul>
+  ) : (
+    <>{children}</>
+  )
+}
+
+export default ProductShelfSkeleton

package/src/components/skeletons/ProductShelfSkeleton/index.ts

@@ -0,0 +1 @@
+export { default } from './ProductShelfSkeleton'

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

@@ -0,0 +1,57 @@
+import Skeleton from 'src/components/skeletons/Skeleton'
+import Shimmer from 'src/components/skeletons/Shimmer'
+
+import styles from './product-tile-skeleton.module.scss'
+
+interface ProductTileSkeletonProps {
+  index: number
+  bordered?: boolean
+  variant?: 'wide' | 'default'
+}
+
+function ProductTileSkeleton({
+  index,
+  bordered,
+  variant = 'default',
+}: 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}
+      >
+        <Skeleton variant="image" />
+      </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-price>
+            <Skeleton variant="text" />
+          </div>
+        </div>
+
+        <div
+          data-fs-product-tile-skeleton-badge
+          data-fs-product-tile-skeleton-index={index}
+        >
+          <Skeleton variant="badge" />
+        </div>
+      </div>
+      <Shimmer />
+    </div>
+  )
+}
+
+export default ProductTileSkeleton

package/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/index.ts

@@ -0,0 +1 @@
+export { default } from './ProductTileSkeleton'

package/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.module.scss

@@ -0,0 +1,218 @@
+@import "src/styles/scaffold";
+
+.fs-product-tile-skeleton {
+  // --------------------------------------------------------
+  // Design Tokens for Product Tile Skeleton
+  // --------------------------------------------------------
+
+  // Image
+  --fs-product-tile-skeleton-image-height-mobile                : 60%;
+  --fs-product-tile-skeleton-image-min-height-mobile            : var(--fs-product-tile-skeleton-image-height-mobile);
+  --fs-product-tile-skeleton-image-height-tablet                : 70%;
+  --fs-product-tile-skeleton-image-min-height-tablet            : var(--fs-product-tile-skeleton-image-height-tablet);
+  --fs-product-tile-skeleton-image-height-desktop               : 80%;
+  --fs-product-tile-skeleton-image-min-height-desktop           : var(--fs-product-tile-skeleton-image-height-desktop);
+  --fs-product-tile-skeleton-image-border-radius                : var(--fs-border-radius) var(--fs-border-radius) 0 0;
+
+  // Content
+  --fs-product-tile-skeleton-content-height-mobile              : 40%;
+  --fs-product-tile-skeleton-content-height-tablet              : 30%;
+  --fs-product-tile-skeleton-content-height-desktop             : 20%;
+  --fs-product-tile-skeleton-content-padding                    : var(--fs-spacing-3);
+  --fs-product-tile-skeleton-content-border-bottom-left-radius  : var(--fs-border-radius);
+  --fs-product-tile-skeleton-content-border-bottom-right-radius : var(--fs-product-tile-skeleton-content-border-bottom-left-radius);
+
+  // Text
+  --fs-product-tile-skeleton-text-width-mobile                  : 70%;
+  --fs-product-tile-skeleton-text-width-tablet                  : 50%;
+  --fs-product-tile-skeleton-text-width-desktop                 : 60%;
+  --fs-product-tile-skeleton-text-margin-bottom                 : var(--fs-spacing-1);
+
+  // Price
+  --fs-product-tile-skeleton-price-width-mobile                 : 60%;
+  --fs-product-tile-skeleton-price-width-tablet                 : 100%;
+
+  // Badge
+  --fs-product-tile-skeleton-badge-width-mobile                 : 20%;
+  --fs-product-tile-skeleton-badge-width-tablet                 : var(--fs-product-tile-skeleton-badge-width-mobile);
+  --fs-product-tile-skeleton-badge-position-right               : var(--fs-product-tile-skeleton-text-margin-bottom);
+
+  // Wide
+  --fs-product-tile-skeleton-wide-padding                       : var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-3);
+  --fs-product-tile-skeleton-wide-bkg-color                     : var(--fs-color-neutral-bkg);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  overflow: hidden;
+
+  &[data-fs-product-tile-skeleton-index="1"] {
+    min-width: 9rem;
+    height: 24rem;
+
+    @include media(">=tablet") { height: 28rem; }
+  }
+
+  [data-fs-product-tile-skeleton-image] {
+    height: var(--fs-product-tile-skeleton-image-height-mobile);
+    min-height: var(--fs-product-tile-skeleton-image-min-height-mobile);
+    border-radius: var(--fs-product-tile-skeleton-image-border-radius);
+
+    @include media(">=tablet") {
+      height: var(--fs-product-tile-skeleton-image-height-tablet);
+      min-height: var(--fs-product-tile-skeleton-image-min-height-tablet);
+    }
+
+    @include media(">=notebook") {
+      height: var(--fs-product-tile-skeleton-image-height-desktop);
+      min-height: var(--fs-product-tile-skeleton-image-min-height-desktop);
+    }
+
+    &[data-fs-product-tile-skeleton-index="1"] {
+      height: 80%;
+
+      @include media(">=tablet") {
+        height: 70%;
+        min-height: 70%;
+      }
+
+      @include media(">=notebook") {
+        height: 80%;
+        min-height: 80%;
+      }
+    }
+
+    [data-fs-skeleton-wrapper] { height: 100%; }
+
+    [data-fs-skeleton-variant="image"] {
+      width: 100%;
+      height: 100%;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  [data-fs-product-tile-skeleton-content] {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    height: var(--fs-product-tile-skeleton-content-height-mobile);
+    padding: var(--fs-product-tile-skeleton-content-padding);
+    border-bottom-right-radius: var(--fs-product-tile-skeleton-content-border-bottom-right-radius);
+    border-bottom-left-radius: var(--fs-product-tile-skeleton-content-border-bottom-left-radius);
+
+    @include media(">=tablet") {
+      flex-flow: row wrap;
+      height: var(--fs-product-tile-skeleton-content-height-tablet);
+    }
+
+    @include media(">=notebook") {
+      flex-flow: row wrap;
+      height: var(--fs-product-tile-skeleton-content-height-desktop);
+    }
+
+    &[data-fs-product-tile-skeleton-index="1"] {
+      height: 20%;
+      padding: var(--fs-spacing-2) var(--fs-spacing-3);
+
+      @include media(">=tablet") {
+        flex-flow: row wrap;
+        height: 30%;
+      }
+
+      @include media(">=notebook") { height: 20%; }
+    }
+
+    [data-fs-product-tile-skeleton-text] {
+      width: var(--fs-product-tile-skeleton-text-width-mobile);
+
+      @include media(">=tablet") {
+        width: var(--fs-product-tile-skeleton-text-width-tablet);
+
+        &[data-fs-product-tile-skeleton-index="2"],
+        &[data-fs-product-tile-skeleton-index="3"] { width: 100%; }
+      }
+
+      @include media(">=notebook") {
+        width: var(--fs-product-tile-skeleton-text-width-desktop);
+
+        &[data-fs-product-tile-skeleton-index="2"],
+        &[data-fs-product-tile-skeleton-index="3"] { width: 60%; }
+      }
+
+      [data-fs-skeleton-variant="text"] {
+        margin-bottom: var(--fs-product-tile-skeleton-text-margin-bottom);
+      }
+
+      [data-fs-product-tile-skeleton-price] {
+        width: var(--fs-product-tile-skeleton-price-width-mobile);
+
+        @include media(">=tablet") { width: var(--fs-product-tile-skeleton-price-width-tablet); }
+      }
+    }
+
+    [data-fs-product-tile-skeleton-badge] {
+      position: absolute;
+      right: var(--fs-product-tile-skeleton-badge-position-right);
+      width: var(--fs-product-tile-skeleton-badge-width-mobile);
+
+      @include media(">=tablet") { width: var(--fs-product-tile-skeleton-badge-width-tablet); }
+
+      &[data-fs-product-tile-skeleton-index="2"],
+      &[data-fs-product-tile-skeleton-index="3"] {
+        bottom: var(--fs-spacing-2);
+        left: var(--fs-spacing-3);
+        width: 30%;
+
+        @include media(">=tablet") {
+          position: relative;
+          bottom: 0;
+          left: var(--fs-spacing-2);
+          width: 50%;
+        }
+
+        @include media(">=notebook") {
+          position: absolute;
+          right: var(--fs-spacing-1);
+          bottom: unset;
+          left: unset;
+          width: 30%;
+        }
+      }
+
+      [data-fs-skeleton-variant="badge"] {
+        width: 100%;
+        height: var(--fs-spacing-4);
+
+        @include media(">=tablet") {
+          position: absolute;
+          right: var(--fs-spacing-1);
+        }
+
+        @include media(">=notebook") {
+          position: relative;
+          right: var(--fs-spacing-0);
+        }
+      }
+    }
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-product-tile-skeleton-variant="wide"] {
+    [data-fs-product-tile-skeleton-content] {
+      background-color: var(--fs-product-tile-skeleton-wide-bkg-color);
+
+      @include media(">=tablet") {
+        padding: var(--fs-product-tile-skeleton-wide-padding);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+import type { PropsWithChildren } from 'react'
+
+import Tiles, { Tile } from 'src/components/ui/Tiles'
+
+import { ProductTileSkeleton } from '.'
+
+// TODO: // Replace it when items number become dynamically defined
+const DEFAULT_ITEMS_NUMBER = 3
+
+interface ProductTilesSkeletonProps {
+  loading?: boolean
+  variant?: 'wide' | 'default'
+}
+
+function ProductTilesSkeleton({
+  children,
+  loading = true,
+  variant = 'default',
+}: PropsWithChildren<ProductTilesSkeletonProps>) {
+  return loading ? (
+    <Tiles>
+      {Array.from({ length: DEFAULT_ITEMS_NUMBER }, (_, index) => (
+        <Tile key={String(index)}>
+          <ProductTileSkeleton index={index + 1} variant={variant} />
+        </Tile>
+      ))}
+    </Tiles>
+  ) : (
+    <>{children}</>
+  )
+}
+
+export default ProductTilesSkeleton

package/src/components/skeletons/ProductTilesSkeleton/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ProductTilesSkeleton'
+export { default as ProductTileSkeleton } from './ProductTileSkeleton'

package/src/components/skeletons/Shimmer/Shimmer.tsx

@@ -0,0 +1,11 @@
+import styles from './shimmer.module.scss'
+
+function Shimmer() {
+  return (
+    <div className={styles.fsShimmer} data-fs-shimmer-wrapper>
+      <div data-fs-shimmer />
+    </div>
+  )
+}
+
+export default Shimmer

package/src/components/skeletons/Shimmer/index.ts

@@ -0,0 +1 @@
+export { default } from './Shimmer'

package/src/components/skeletons/Shimmer/shimmer.module.scss

@@ -0,0 +1,43 @@
+.fs-shimmer {
+  // --------------------------------------------------------
+  // Design Tokens for Shimmer
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-shimmer-wrapper-transition-timing    : 850ms;
+  --fs-shimmer-wrapper-transition-function  : linear;
+  --fs-shimmer-wrapper-transition-iteration : infinite;
+
+  // Shimmer
+  --fs-shimmer-width                        : 50%;
+  --fs-shimmer-height                       : 100%;
+  --fs-shimmer-bkg-color                    : rgb(255 255 255 / 20%);
+  --fs-shimmer-box-shadow                   : 0 0 var(--fs-spacing-5) var(--fs-spacing-5) rgb(255 255 255 / 20%);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  /*
+   * Parent must have `position: relative` and `overflow: hidden`
+   * in order to the effect to work properly.
+   */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100%;
+  animation: loading var(--fs-shimmer-wrapper-transition-timing) var(--fs-shimmer-wrapper-transition-iteration) var(--fs-shimmer-wrapper-transition-function);
+
+  [data-fs-shimmer] {
+    width: var(--fs-shimmer-width);
+    height: var(--fs-shimmer-height);
+    background: var(--fs-shimmer-bkg-color);
+    box-shadow: var(--fs-shimmer-box-shadow);
+  }
+}
+
+@keyframes loading {
+  0% { transform: translate3d(-50vw, 0, 0); }
+  100% { transform: translate3d(0, 0, 0); }
+}

package/src/components/skeletons/Skeleton/Skeleton.tsx

@@ -0,0 +1,49 @@
+import type { PropsWithChildren } from 'react'
+import { Skeleton as UISkeleton } from '@faststore/ui'
+
+import Shimmer from '../Shimmer'
+import styles from './skeleton.module.scss'
+
+type Variant = 'text' | 'button' | 'image' | 'badge'
+
+interface SkeletonProps {
+  /**
+   * Control whether skeleton should be visible or not.
+   */
+  loading?: boolean
+  /**
+   * Control whether the shimmer effect should be displayed or not.
+   */
+  shimmer?: boolean
+  /**
+   * Specifies the skeleton element variant.
+   */
+  variant: Variant
+}
+
+function Skeleton({
+  variant,
+  children,
+  loading = true,
+  shimmer = false,
+  ...otherProps
+}: PropsWithChildren<SkeletonProps>) {
+  return loading ? (
+    <div
+      data-fs-skeleton-wrapper
+      className={styles.fsSkeleton}
+      data-fs-skeleton-shimmer={shimmer}
+    >
+      <UISkeleton
+        data-fs-skeleton
+        data-fs-skeleton-variant={variant}
+        {...otherProps}
+      />
+      {shimmer && <Shimmer />}
+    </div>
+  ) : (
+    <>{children}</>
+  )
+}
+
+export default Skeleton

package/src/components/skeletons/Skeleton/index.ts

@@ -0,0 +1 @@
+export { default } from './Skeleton'

package/src/components/skeletons/Skeleton/skeleton.module.scss

@@ -0,0 +1,77 @@
+@import "src/styles/scaffold";
+
+.fs-skeleton {
+  // --------------------------------------------------------
+  // Design Tokens for Skeleton
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-skeleton-bkg-color            : var(--fs-color-disabled-bkg);
+  --fs-skeleton-border-radius        : var(--fs-border-radius);
+
+  // Text
+  --fs-skeleton-text-width           : 100%;
+  --fs-skeleton-text-height          : var(--fs-spacing-4);
+
+  // Button
+  --fs-skeleton-button-width         : var(--fs-spacing-13);
+  --fs-skeleton-button-height        : var(--fs-spacing-5);
+  --fs-skeleton-button-gap           : var(--fs-spacing-2);
+  --fs-skeleton-button-border-radius : var(--fs-skeleton-border-radius);
+
+  // Image
+  --fs-skeleton-image-height-mobile  : 45vw;
+  --fs-skeleton-image-height-desktop : 12.188rem;
+  --fs-skeleton-image-border-radius  : var(--fs-skeleton-border-radius);
+
+  // Badge
+  --fs-skeleton-badge-width          : 40%;
+  --fs-skeleton-badge-height         : var(--fs-spacing-5);
+  --fs-skeleton-badge-border-radius  : var(--fs-border-radius-pill);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  &[data-fs-skeleton-shimmer="true"] {
+    position: relative;
+    overflow: hidden;
+  }
+
+  [data-fs-skeleton] {
+    overflow: hidden;
+    background: var(--fs-skeleton-bkg-color);
+    border-radius: var(--fs-skeleton-border-radius);
+
+    // --------------------------------------------------------
+    // Variants Styles
+    // --------------------------------------------------------
+
+    &[data-fs-skeleton-variant="text"] {
+      width: var(--fs-skeleton-text-width);
+      height: var(--fs-skeleton-text-height);
+    }
+
+    &[data-fs-skeleton-variant="button"] {
+      column-gap: var(--fs-skeleton-button-gap);
+      width: var(--fs-skeleton-button-width);
+      height: var(--fs-skeleton-button-height);
+      border-radius: var(--fs-skeleton-button-border-radius);
+    }
+
+    &[data-fs-skeleton-variant="image"] {
+      height: var(--fs-skeleton-image-height-mobile);
+      border-radius: var(--fs-skeleton-image-border-radius);
+
+      @include media(">=notebook") {
+        height: var(--fs-skeleton-image-height-desktop);
+      }
+    }
+
+    &[data-fs-skeleton-variant="badge"] {
+      width: var(--fs-skeleton-badge-width);
+      height: var(--fs-skeleton-badge-height);
+      border-radius: var(--fs-skeleton-badge-border-radius);
+    }
+  }
+}