@faststore/core 2.0.110-alpha.0 → 2.0.113-alpha.0

package/src/components/product/ProductGrid/ProductGrid.stories.mdx

@@ -1,96 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-import { SearchProvider } from '@faststore/sdk'
-import Sentinel from 'src/sdk/search/Sentinel'
-import { productGridItems } from 'src/../.storybook/mocks'
-
-import { useProducts } from '../../sections/ProductGallery/usePageProducts'
-
-import ProductGrid from '.'
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-  BestPractices,
-  BestPracticesRule,
-} from 'src/../.storybook/components'
-
-<Meta
-  title="Organisms/ProductGrid"
-  component={ProductGrid}
-  argTypes={{
-    /* TODO: Enable these after items per page is fixed */
-    page: {
-      table: {
-        disable: true,
-      },
-    },
-    pageSize: {
-      table: {
-        disable: true,
-      },
-    },
-  }}
-/>
-
-export const Template = (args) => {
-  return (
-    <ProductGrid {...args} />
-  )
-}
-
-<header>
-
-# ProductGrid
-
-It's a section generally used on PLP pages to list the products available in the store.
-
-</header>
-
-## Usage
-
-`import ProductGrid from '../components/product/ProductGrid'`
-
-<Canvas isColumn>
-  <Story
-    name="default"
-    args={{
-      products: productGridItems,
-      page: 0,
-      pageSize: 4,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="default" />
-
-<TokenTable>
-  <TokenRow token="--fs-product-grid-gap-mobile" value="var(--fs-grid-gap-0)" />
-  <TokenRow
-    token="--fs-product-grid-gap-desktop"
-    value="var(--fs-grid-gap-2)"
-  />
-  <TokenDivider />
-  <TokenRow token="--fs-product-grid-columns-mobile" value="2" />
-  <TokenRow token="--fs-product-grid-columns-desktop" value="4" />
-</TokenTable>
-
----
-
-<BestPractices>
-  <BestPracticesRule
-    recommendedDescription={
-      <>
-        Respect <code>ProductCard</code> content's width considering the space
-        available on the page.
-      </>
-    }
-    discouragedDescription={
-      <>
-        Avoid using a lot of <code>ProductCards</code> on the same row, this
-        could lead to unwanted horizontal scroll.
-      </>
-    }
-  />
-</BestPractices>

package/src/components/product/ProductGrid/product-grid.module.scss

@@ -1,39 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-product-grid {
-  // --------------------------------------------------------
-  // Design Tokens for ProductGrid
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-product-grid-gap-mobile        : var(--fs-grid-gap-0);
-  --fs-product-grid-gap-tablet        : var(--fs-product-grid-gap-mobile);
-  --fs-product-grid-gap-desktop       : var(--fs-grid-gap-2);
-
-  --fs-product-grid-columns-mobile    : 2;
-  --fs-product-grid-columns-tablet    : 4;
-  --fs-product-grid-columns-desktop   : var(--fs-product-grid-columns-tablet);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  display: grid;
-  grid-template-columns: repeat(var(--fs-product-grid-columns-mobile), 1fr);
-  grid-gap: var(--fs-product-grid-gap-mobile);
-
-  @include media(">=tablet") {
-    $pagination-start-index: 2;
-
-    grid-template-columns: repeat(var(--fs-product-grid-columns-desktop), 1fr);
-    grid-gap: var(--fs-product-grid-gap-tablet);
-
-    &:nth-of-type(n + #{$pagination-start-index}) {
-      margin-top: var(--fs-product-grid-gap-desktop);
-    }
-  }
-
-  @include media(">=notebook") {
-    grid-gap: var(--fs-product-grid-gap-desktop);
-  }
-}

package/src/sdk/ui/useScrollDirection.ts

@@ -1,31 +0,0 @@
-import { useEffect, useState, useTransition } from 'react'
-
-export default function useScrollDirection() {
-  const [scrollDirection, setScrollDirection] = useState<string>('')
-  const [isPending, startTransition] = useTransition()
-
-  useEffect(() => {
-    let lastScrollY = window.scrollY
-
-    const updateScrollDirection = () => {
-      const { scrollY } = window
-      const direction = scrollY > lastScrollY ? 'down' : 'up'
-
-      if (
-        !isPending &&
-        direction !== scrollDirection &&
-        (scrollY - lastScrollY > 10 || scrollY - lastScrollY < -10)
-      ) {
-        startTransition(() => setScrollDirection(direction))
-      }
-
-      lastScrollY = scrollY > 0 ? scrollY : 0
-    }
-
-    window.addEventListener('scroll', updateScrollDirection)
-
-    return () => window.removeEventListener('scroll', updateScrollDirection)
-  }, [isPending, scrollDirection])
-
-  return scrollDirection
-}