@faststore/core 0.3.17 → 2.0.65-alpha.0

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

@@ -5,37 +5,11 @@
   // 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;
+  // Default properties
+  --fs-product-tile-skeleton-gap                                : var(--fs-spacing-1);
 
   // 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);
@@ -46,173 +20,62 @@
   // --------------------------------------------------------
 
   position: relative;
+  display: flex;
+  flex-direction: column;
   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; }
+  @include media(">=tablet") {
+    display: grid;
+    grid-auto-rows: 62% auto;
+    [data-fs-product-card-image] { height: 100%; }
   }
 
-  [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;
-    }
-  }
+  @include media(">=notebook") { grid-auto-rows: 80% auto; }
 
   [data-fs-product-tile-skeleton-content] {
     display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    height: var(--fs-product-tile-skeleton-content-height-mobile);
+    flex-direction: column;
+    row-gap: var(--fs-product-tile-skeleton-gap);
     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);
-    }
+    background-color: var(--fs-product-tile-skeleton-wide-bkg-color);
 
     @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%; }
+      flex-direction: row;
+      justify-content: space-between;
+      height: 100%;
     }
+  }
 
-    [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-product-tile-skeleton-heading] {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--fs-product-tile-skeleton-gap);
+    width: 100%;
+  }
 
-      [data-fs-skeleton-variant="text"] {
-        margin-bottom: var(--fs-product-tile-skeleton-text-margin-bottom);
-      }
+  [data-fs-product-tile-skeleton-badge] {
+    max-width: 100%;
+  }
 
-      [data-fs-product-tile-skeleton-price] {
-        width: var(--fs-product-tile-skeleton-price-width-mobile);
+  [data-fs-product-tile-skeleton-image] {
+    width: 100%;
+    aspect-ratio: var(--fs-product-tile-skeleton-image-aspect-ratio);
+    overflow: hidden;
 
-        @include media(">=tablet") { width: var(--fs-product-tile-skeleton-price-width-tablet); }
-      }
-    }
+    [data-fs-skeleton-variant="image"] { border-radius: 0; }
 
-    [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);
-        }
-      }
-    }
+    @include media(">=tablet") { height: 100%; }
   }
 
-  // --------------------------------------------------------
-  // 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);
-      }
+  [data-fs-product-tile-skeleton-image],
+  [data-fs-product-tile-skeleton-badge] {
+    [data-fs-skeleton-wrapper],
+    [data-fs-skeleton] {
+      width: 100%;
+      height: 100%;
     }
   }
 }

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

@@ -6,22 +6,37 @@ import { ProductTileSkeleton } from '.'
 
 // TODO: // Replace it when items number become dynamically defined
 const DEFAULT_ITEMS_NUMBER = 3
+const DEFAULT_ITEMS_NUMBER_TWO = 2
+
+const getRatio = (products: number, idx: number) => {
+  const expandsFirstTile = products === DEFAULT_ITEMS_NUMBER && idx === 0
+
+  const expandsFirstTwoTile =
+    products === DEFAULT_ITEMS_NUMBER_TWO && (idx === 0 || idx === 1)
+
+  if (expandsFirstTile || expandsFirstTwoTile) {
+    return 5 / 3
+  }
+
+  return 3 / 4
+}
 
 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} />
+          <ProductTileSkeleton
+            index={index + 1}
+            aspectRatio={getRatio(DEFAULT_ITEMS_NUMBER, index)}
+          />
         </Tile>
       ))}
     </Tiles>

package/src/components/ui/Gift/Gift.tsx

@@ -6,17 +6,17 @@ import {
   GiftImage as UIGiftImage,
 } from '@faststore/ui'
 
-import type { ProductSummary_ProductFragment } from '@generated/graphql'
 import Icon from 'src/components/ui/Icon'
 import { Image } from 'src/components/ui/Image'
 import Price from 'src/components/ui/Price'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
+import type { CartItem as ICartItem } from 'src/sdk/cart'
 
 export type Props = GiftProps & {
   /**
    * Product to be showed as `Gift`.
    */
-  product: ProductSummary_ProductFragment
+  item: ICartItem
   /**
    * Additional message in the title
    */
@@ -28,34 +28,31 @@ export type Props = GiftProps & {
 }
 
 function Gift({
-  product,
+  item,
   titleMessage = 'Get a',
   badgeLabel = 'Free',
   ...otherProps
 }: Props) {
-  const {
-    isVariantOf,
-    image: [img],
-    offers: {
-      offers: [{ listPrice }],
-    },
-  } = product
-
   return (
     <UIGift icon={<Icon name="Tag" width={18} height={18} />} {...otherProps}>
       <UIGiftImage>
-        <Image src={img.url} alt={img.alternateName} width={89} height={89} />
+        <Image
+          src={item.itemOffered.image[0].url}
+          alt={item.itemOffered.image[0].alternateName}
+          width={89}
+          height={89}
+        />
       </UIGiftImage>
       <UIGiftContent>
         <h3 data-fs-gift-product-title>
-          {titleMessage} {isVariantOf.name}
+          {titleMessage} {item.itemOffered.isVariantOf.name}
         </h3>
         <span data-fs-gift-product-summary>
           <Price
-            value={listPrice}
+            value={item.price}
             formatter={useFormattedPrice}
             testId="list-price"
-            data-value={listPrice}
+            data-value={item.price}
             variant="listing"
             classes="text__legend"
             SRText="Original price:"

package/src/components/ui/SlideOver/SlideOver.stories.mdx

@@ -1,8 +1,8 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
 
 import { SearchProvider, useSearch } from '@faststore/sdk'
-import UIProvider, { useUI } from 'src/sdk/ui/Provider'
-import { useFadeEffect } from 'src/sdk/ui/useFadeEffect'
+import { UIProvider, useUI } from '@faststore/ui'
+import { useFadeEffect } from '@faststore/ui'
 import { useCart } from 'src/sdk/cart'
 
 import { NavbarSlider } from 'src/components/common/Navbar'

package/src/components/ui/SlideOver/SlideOver.tsx

@@ -44,6 +44,7 @@ function SlideOver({
     <UIModal
       className={`${styles.fsSlideOver} ${className}`}
       isOpen={isOpen}
+      data-fs-modal={null}
       data-fs-slide-over
       data-fs-slide-over-direction={direction}
       data-fs-slide-over-size={size}

package/src/components/ui/Tiles/Tiles.stories.mdx

@@ -132,7 +132,7 @@ of items to be displayed, the tiles will be arranged differently.
 
 <TokenTable>
   <TokenRow token="--fs-tiles-gap-mobile" value="var(--fs-grid-gap-2)" />
-  <TokenRow token="--fs-tiles-gap-tablet" value="var(--fs-grid-gap-3)" />
+  <TokenRow token="--fs-tiles-gap-notebook" value="var(--fs-grid-gap-3)" />
 </TokenTable>
 
 ---
@@ -143,8 +143,6 @@ of items to be displayed, the tiles will be arranged differently.
 
 <TokenTable>
   <TokenRow token="--fs-tiles-tile-min-width" value="9rem" />
-  <TokenRow token="--fs-tiles-tile-height-mobile" value="24rem" />
-  <TokenRow token="--fs-tiles-tile-height-tablet" value="28rem" />
   <TokenDivider />
   <TokenRow
     token="--fs-tiles-tile-border-radius"

package/src/components/ui/Tiles/tiles.module.scss

@@ -7,12 +7,10 @@
 
   // Default properties
   --fs-tiles-gap-mobile         : var(--fs-grid-gap-2);
-  --fs-tiles-gap-tablet         : var(--fs-grid-gap-3);
+  --fs-tiles-gap-notebook       : var(--fs-grid-gap-3);
 
   // Tile
   --fs-tiles-tile-min-width     : 9rem;
-  --fs-tiles-tile-height-mobile : 24rem;
-  --fs-tiles-tile-height-tablet : 28rem;
   --fs-tiles-tile-border-radius : var(--fs-border-radius);
 
   // --------------------------------------------------------
@@ -20,37 +18,37 @@
   // --------------------------------------------------------
 
   display: grid;
-  grid-template-rows: repeat(2, 1fr);
   grid-template-columns: repeat(2, 1fr);
   row-gap: var(--fs-tiles-gap-mobile);
   column-gap: var(--fs-tiles-gap-mobile);
 
   @include media(">=tablet") {
-    grid-template-rows: repeat(1, 1fr);
     grid-template-columns: repeat(4, 1fr);
-    column-gap: var(--fs-tiles-gap-tablet);
   }
 
+  @include media(">=notebook") { column-gap: var(--fs-tiles-gap-notebook); }
+
   [data-fs-tile] {
     min-width: var(--fs-tiles-tile-min-width);
-    height: var(--fs-tiles-tile-height-mobile);
 
     > * {
       overflow: hidden;
       border-radius: var(--fs-tiles-tile-border-radius);
-    }
 
-    @include media(">=tablet") { height: var(--fs-tiles-tile-height-tablet); }
+      @include media(">=tablet") {
+        display: grid;
+        grid-auto-rows: 62% auto;
+        [data-fs-product-card-image] { height: 100%; }
+      }
+
+      @include media(">=notebook") { grid-auto-rows: 80% auto; }
+    }
   }
 
   // --------------------------------------------------------
   // Variants Styles
   // --------------------------------------------------------
 
-  &[data-fs-tiles-variant="expanded-first"], &[data-fs-tiles-variant="expanded-first-two"] {
-    grid-template-rows: auto 1fr;
-  }
-
   &[data-fs-tiles-variant="expanded-first"] > [data-fs-tile]:first-child,
   &[data-fs-tiles-variant="expanded-first-two"] > [data-fs-tile]:first-child,
   &[data-fs-tiles-variant="expanded-first-two"] > [data-fs-tile]:nth-child(2) {

package/src/components/ui/Toast/Toast.stories.mdx

@@ -5,7 +5,7 @@ import {
   TokenDivider,
 } from 'src/../.storybook/components'
 
-import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { UIProvider, useUI } from '@faststore/ui'
 
 import Toast from '.'
 import { Button } from '@faststore/ui'

package/src/components/ui/Toast/Toast.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 
 import Icon from 'src/components/ui/Icon'
-import { useUI } from 'src/sdk/ui/Provider'
+import { useUI } from '@faststore/ui'
 
 import styles from './toast.module.scss'
 

package/src/pages/_app.tsx

@@ -11,7 +11,7 @@ import type { AppProps } from 'next/app'
 import Layout from 'src/Layout'
 import AnalyticsHandler from 'src/sdk/analytics'
 import ErrorBoundary from 'src/sdk/error/ErrorBoundary'
-import UIProvider from 'src/sdk/ui/Provider'
+import { UIProvider } from '@faststore/ui'
 
 function App({ Component, pageProps }: AppProps) {
   return (

package/src/sdk/cart/index.ts

@@ -66,6 +66,11 @@ export const ValidateCartMutation = gql`
     isVariantOf {
       productGroupID
       name
+      skuVariants {
+        activeVariations
+        slugsMap(dominantVariantName: "Color")
+        availableVariations(dominantVariantName: "Color")
+      }
     }
     gtin
     additionalProperty {

package/src/sdk/cart/useBuyButton.ts

@@ -6,7 +6,7 @@ import type { AnalyticsItem } from 'src/sdk/analytics/types'
 import type { CartItem } from 'src/sdk/cart'
 
 import { useSession } from '../session'
-import { useUI } from '../ui/Provider'
+import { useUI } from '@faststore/ui'
 import { cartStore } from './index'
 
 export const useBuyButton = (item: CartItem | null) => {

package/src/sdk/cart/useCartToggleButton.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import { useUI } from '../ui/Provider'
+import { useUI } from '@faststore/ui'
 import { useCart } from './index'
 
 export const useCartToggleButton = () => {

package/src/styles/vendors/include-media.scss

@@ -1,4 +1,4 @@
 // Include Media //////////////////////////
 
-@import "../../../node_modules/include-media/dist/include-media";
+@import "~include-media/dist/include-media";
 @import "include-media_overwrite";

package/tsconfig.json

@@ -1,6 +1,7 @@
 {
+  "extends": "@faststore/shared/tsconfig.json",
   "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
+    "declaration": false,
     "moduleResolution": "node",
     "jsx": "preserve",
     "jsxImportSource": "react",
@@ -14,14 +15,11 @@
       "src/*": ["src/*"],
       "@generated/*": ["@generated/*"]
     },
-    "forceConsistentCasingInFileNames": true,
     "strict": false,
     "incremental": true,
     "isolatedModules": true,
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "skipLibCheck": true,
-    "esModuleInterop": true
+    "lib": ["dom", "dom.iterable", "esnext"]
   },
   "include": ["*.d.ts", "src/**/*.ts", "src/**/*.tsx", "@generated/**/*.ts"],
   "exclude": ["node_modules", "public", "src/components/search/searchMock.ts"]

package/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}

package/.github/CODEOWNERS

@@ -1,2 +0,0 @@
-# Make @vtex-sites/cms-schema default reviewer for all schema changes for CMS
-src/@vtex/gatsby-plugin-cms/ @vtex-sites/cms-schema

package/.github/workflows/release.yml

@@ -1,42 +0,0 @@
-# This Action should run on main branch and verify lint, test, and then publish the version on npm
-name: CD
-
-on:
-  push:
-    branches:
-      - evergreen
-
-jobs:
-  release:
-    name: Release
-    timeout-minutes: 5
-    runs-on: ubuntu-latest
-    if: github.repository == 'vtex-sites/nextjs.store' && !startsWith(github.event.head_commit.message, 'chore(release):')
-
-
-    steps:
-      - name: Check out code
-        uses: actions/checkout@v2
-        with:
-          token: ${{ secrets.VTEX_GITHUB_BOT_TOKEN }}
-          fetch-depth: 2
-
-      - name: Setup Node.js environment
-        uses: actions/setup-node@v2
-        with:
-          node-version: 16
-          cache: 'yarn'
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Configure CI Git User
-        run: |
-          git config user.name vtexgithubbot
-          git config user.email vtexgithubbot@github.com
-
-      - name: Install dependencies
-        run: yarn install --verbose
-
-      - name: Release
-        run: npm run release
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

package/.release-it.json

@@ -1,32 +0,0 @@
-{
-  "git": {
-    "commitMessage": "chore(release): ${version}"
-  },
-  "npm": {
-    "publish": true,
-    "skipChecks": true
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "registry.npmjs.org"
-  },
-  "plugins": {
-    "@release-it/conventional-changelog": {
-      "preset": {
-        "name": "conventionalcommits",
-        "types": [
-          { "type": "feat", "section": "Features" },
-          { "type": "fix", "section": "Bug Fixes" },
-          { "type": "chore", "section": "Chores" },
-          { "type": "docs", "section": "Documentation" },
-          { "type": "style", "section": "Style changes" },
-          { "type": "refactor", "section": "Refactoring" },
-          { "type": "perf", "section": "Performance" },
-          { "type": "test", "section": "Tests" }
-        ]
-      },
-      "infile": "CHANGELOG.md",
-      "header": "# Changelog\n\nAll notable changes to this project will be documented in this file.\n\nThe format is based on [Conventional Changelog](https://github.com/conventional-changelog/conventional-changelog),\nand this project adheres to [Calendar Versioning](https://calver.org/)."
-    }
-  }
-}