@faststore/core 0.3.16 → 2.0.65-alpha.0

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/Breadcrumb/Breadcrumb.tsx

@@ -1,13 +1,14 @@
 import type { BreadcrumbProps as UIBreadcrumbProps } from '@faststore/ui'
-import { Breadcrumb as UIBreadcrumb } from '@faststore/ui'
+import {
+  Breadcrumb as UIBreadcrumb,
+  Dropdown as UIDropdown,
+  DropdownButton as UIDropdownButton,
+  DropdownMenu as UIDropdownMenu,
+  DropdownItem as UIDropdownItem,
+} from '@faststore/ui'
 import { useRouter } from 'next/router'
 import { memo } from 'react'
 
-import Dropdown, {
-  DropdownButton,
-  DropdownItem,
-  DropdownMenu,
-} from 'src/components/ui/Dropdown'
 import Icon from 'src/components/ui/Icon'
 import Link from 'src/components/ui/Link'
 
@@ -77,25 +78,25 @@ function BaseBreadcrumb({
       )}
 
       {collapseBreadcrumb && (
-        <Dropdown>
-          <DropdownButton data-fs-breadcrumb-dropdown-button>
+        <UIDropdown>
+          <UIDropdownButton data-fs-breadcrumb-dropdown-button size="small">
             <Icon name="DotsThree" width={24} height={24} />
-          </DropdownButton>
-          <DropdownMenu data-fs-breadcrumb-dropdown-menu>
+          </UIDropdownButton>
+          <UIDropdownMenu data-fs-breadcrumb-dropdown-menu>
             {mediumItems.map(({ item, name }, index) => (
-              <DropdownItem
+              <UIDropdownItem
                 data-fs-breadcrumb-dropdown-item
+                onClick={() => router.push(item)}
+                key={String(index)}
                 icon={
                   <Icon name="ArrowElbowDownRight" width={24} height={24} />
                 }
-                onClick={() => router.push(item)}
-                key={String(index)}
               >
                 {name}
-              </DropdownItem>
+              </UIDropdownItem>
             ))}
-          </DropdownMenu>
-        </Dropdown>
+          </UIDropdownMenu>
+        </UIDropdown>
       )}
 
       {collapseBreadcrumb &&

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

@@ -1,24 +1,22 @@
+import type { GiftProps } from '@faststore/ui'
 import {
+  Badge as UIBadge,
   Gift as UIGift,
-  GiftImage as UIGiftImage,
   GiftContent as UIGiftContent,
-  Badge as UIBadge,
+  GiftImage as UIGiftImage,
 } from '@faststore/ui'
-import type { GiftProps } from '@faststore/ui'
 
-import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import Icon from 'src/components/ui/Icon'
-import Price from 'src/components/ui/Price'
 import { Image } from 'src/components/ui/Image'
-import type { ProductSummary_ProductFragment } from '@generated/graphql'
-
-import styles from './gift.module.scss'
+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
    */
@@ -30,38 +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
-      className={styles.fsGift}
-      icon={<Icon name="Tag" width={18} height={18} />}
-      {...otherProps}
-    >
+    <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/SkuSelector/sku-selector.module.scss

@@ -80,7 +80,7 @@
     margin-bottom: var(--fs-sku-selector-title-margin-bottom);
   }
 
-  [data-fs-radio-option] {
+  [data-fs-radio-group-option] {
     position: relative;
     width: var(--fs-sku-selector-option-width);
     height: var(--fs-sku-selector-option-height);

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,15 +15,12 @@
       "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"]
+  "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/)."
-    }
-  }
-}

package/src/components/cart/CartItem/cart-item.module.scss

@@ -1,68 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-cart-item {
-  // --------------------------------------------------------
-  // Design Tokens for CartItem
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-cart-item-padding               : var(--fs-spacing-3);
-  --fs-cart-item-bkg-color             : var(--fs-control-bkg);
-
-  --fs-cart-item-border-width          : var(--fs-border-width);
-  --fs-cart-item-border-color          : var(--fs-border-color-light);
-  --fs-cart-item-border-radius         : var(--fs-border-radius);
-
-  // Image
-  --fs-cart-item-image-border-radius   : var(--fs-cart-item-border-radius);
-
-  // Title
-  --fs-cart-item-title-margin-bottom   : var(--fs-spacing-0);
-  --fs-cart-item-title-line-height     : 1.2;
-  --fs-cart-item-title-color           : var(--fs-color-text);
-
-  // Actions
-  --fs-cart-item-actions-margin-top    : var(--fs-spacing-3);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  padding: var(--fs-cart-item-padding);
-  background-color: var(--fs-cart-item-bkg-color);
-  border: var(--fs-cart-item-border-width) solid var(--fs-cart-item-border-color);
-  border-radius: var(--fs-cart-item-border-radius);
-
-  [data-fs-cart-item-content] {
-    display: grid;
-    grid-template-columns: rem(72px) repeat(4, 1fr);
-    column-gap: var(--fs-grid-gap-2);
-    align-items: center;
-  }
-
-  [data-fs-cart-item-summary] {
-    flex-direction: column;
-    grid-column: 2 / span 4;
-  }
-
-  [data-fs-cart-item-title] {
-    margin-bottom: var(--fs-cart-item-title-margin-bottom);
-    line-height: var(--fs-cart-item-title-line-height);
-    color: var(--fs-cart-item-title-color);
-    text-decoration: none;
-    outline: none;
-
-    @include truncate-title;
-  }
-
-  [data-fs-cart-item-prices] {
-    display: flex;
-    align-items: baseline;
-  }
-
-  [data-fs-cart-item-actions] {
-    display: flex;
-    justify-content: space-between;
-    margin-top: var(--fs-cart-item-actions-margin-top);
-  }
-}