@faststore/core 2.0.101-alpha.0 → 2.0.103-alpha.0

package/.turbo/turbo-build.log

@@ -27,8 +27,8 @@ Route (pages)                              Size     First Load JS
 ├   /_app                                  0 B            96.7 kB
 ├ ● /[...slug]                             9.48 kB         122 kB
 ├   └ css/8ea129ea90e49e98.css             1.83 kB
-├ ● /[slug]/p                              16.8 kB         125 kB
-├   └ css/4899c3cc356704f9.css             2.82 kB
+├ ● /[slug]/p                              16.9 kB         125 kB
+├   └ css/8d4cc2151b8e3693.css             1.99 kB
 ├ ○ /404                                   431 B           102 kB
 ├ ○ /500                                   439 B           102 kB
 ├ ○ /account                               383 B           102 kB
@@ -38,12 +38,12 @@ Route (pages)                              Size     First Load JS
 ├ ○ /login                                 385 B           102 kB
 └ ○ /s                                     895 B           113 kB
     └ css/db63ea05e98cb7e8.css             1.63 kB
-+ First Load JS shared by all              119 kB
++ First Load JS shared by all              120 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-9746772201fe3ac1.js        23.9 kB
-  ├ chunks/pages/_app-6dc7b0c168e15d5c.js  25.3 kB
-  ├ chunks/webpack-65b155971f3eac57.js     2.18 kB
-  └ css/ea60a7e6c07ee644.css               22 kB
+  ├ chunks/pages/_app-97338478d9610735.js  25.3 kB
+  ├ chunks/webpack-83d8a1e4ecde9dde.js     2.19 kB
+  └ css/3802630cd2375b43.css               23.1 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
 ○  (Static)  automatically rendered as static HTML (uses no initial props)

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.103-alpha.0](https://github.com/vtex/faststore/compare/v2.0.102-alpha.0...v2.0.103-alpha.0) (2023-04-06)
+
+### Features
+
+- Add `ImageGallery` components ([#1681](https://github.com/vtex/faststore/issues/1681)) ([b44101c](https://github.com/vtex/faststore/commit/b44101c932b0758f9c1b09ee001d3221c338cf93)), closes [starter.store#37](https://github.com/vtex/starter.store/issues/37)
+
+## [2.0.102-alpha.0](https://github.com/vtex/faststore/compare/v2.0.101-alpha.0...v2.0.102-alpha.0) (2023-04-06)
+
+### Features
+
+- Adds `CartSidebar` and `OrderSummary` ([#1704](https://github.com/vtex/faststore/issues/1704)) ([a16e168](https://github.com/vtex/faststore/commit/a16e1683816ef84866de4cd7f8d8a64f951b98c6))
+
 ## [2.0.101-alpha.0](https://github.com/vtex/faststore/compare/v2.0.100-alpha.0...v2.0.101-alpha.0) (2023-04-05)
 
 ### Bug Fixes

package/cypress/integration/analytics.test.js

@@ -375,7 +375,7 @@ describe('view_cart event', () => {
     cy.waitForHydration()
 
     cy.getById('cart-toggle').click()
-    cy.getById('cart-sidebar').should('be.visible')
+    cy.getById('fs-cart-sidebar').should('be.visible')
 
     dataLayerHasEvent('view_cart')
 
@@ -398,7 +398,7 @@ describe('view_cart event', () => {
       .scrollIntoView({ duration: 500 })
       .then(() => {
         cy.getById('buy-button').click({ force: true })
-        cy.getById('cart-sidebar').should('be.visible')
+        cy.getById('fs-cart-sidebar').should('be.visible')
 
         dataLayerHasEvent('view_cart')
 

package/cypress/integration/cart.test.js

@@ -19,9 +19,9 @@ describe('Cart Sidebar', () => {
     cy.waitForHydration()
 
     cy.getById('cart-toggle').first().click()
-    cy.getById('cart-sidebar').should('exist')
-    cy.getById('cart-sidebar-button-close').first().click()
-    cy.getById('cart-sidebar').should('not.exist')
+    cy.getById('fs-cart-sidebar').should('exist')
+    cy.getById('fs-cart-sidebar-button-close').first().click()
+    cy.getById('fs-cart-sidebar').should('not.exist')
   })
 
   context('when opening the cart sidebar', () => {
@@ -31,7 +31,7 @@ describe('Cart Sidebar', () => {
 
       // window scrolls to keep cart-toggle on the screen initially
       cy.getById('cart-toggle').click()
-      cy.getById('cart-sidebar').should('exist')
+      cy.getById('fs-cart-sidebar').should('exist')
 
       // simulate touch scroll. Do not use window.scrollTo
       cy.get('[data-fs-empty-state]')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.101-alpha.0",
+  "version": "2.0.103-alpha.0",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -30,10 +30,10 @@
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
     "@faststore/api": "^2.0.97-alpha.0",
-    "@faststore/components": "^2.0.101-alpha.0",
+    "@faststore/components": "^2.0.103-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.3-alpha.0",
-    "@faststore/ui": "^2.0.99-alpha.0",
+    "@faststore/ui": "^2.0.103-alpha.0",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
@@ -108,5 +108,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "b7378bff2215b1edab942092e8c4faffbe9b1572"
+  "gitHead": "cac804588d1f91794f39bf7b7ce8e18234a7286a"
 }

package/src/components/cart/CartSidebar/CartSidebar.tsx

@@ -1,11 +1,9 @@
 import { sendAnalyticsEvent } from '@faststore/sdk'
 import {
-  Alert as UIAlert,
-  Badge as UIBadge,
+  CartSidebar as UICartSidebar,
+  CartSidebarList as UICartSidebarList,
+  CartSidebarFooter as UICartSidebarFooter,
   Button as UIButton,
-  List as UIList,
-  SlideOver as UISlideOver,
-  SlideOverHeader as UISlideOverHeader,
 } from '@faststore/ui'
 
 import type { CurrencyCode, ViewCartEvent } from '@faststore/sdk'
@@ -20,14 +18,13 @@ import Gift from '../../ui/Gift'
 import CartItem from '../CartItem'
 import EmptyCart from '../EmptyCart'
 import OrderSummary from '../OrderSummary'
-import styles from './cart-sidebar.module.scss'
 
 function CartSidebar() {
   const { currency } = useSession()
   const btnProps = useCheckoutButton()
   const cart = useCart()
-  const { cart: displayCart, closeCart } = useUI()
-  const { fade, fadeOut } = useFadeEffect()
+  const { closeCart } = useUI()
+  const { fadeOut } = useFadeEffect()
 
   const { items, gifts, totalItems, isValidating, subTotal, total } = cart
 
@@ -56,38 +53,18 @@ function CartSidebar() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  const closeBtnProps = {
-    testId: 'cart-sidebar-button-close',
-  }
-
   return (
-    <UISlideOver
-      fade={fade}
-      isOpen={displayCart}
-      onDismiss={() => fadeOut()}
-      size="partial"
-      direction="rightSide"
-      className={styles.fsCartSidebar}
-      onTransitionEnd={() => fade === 'out' && closeCart()}
-      data-testid="cart-sidebar"
+    <UICartSidebar
+      totalItems={totalItems}
+      alertIcon={<Icon name="Truck" />}
+      alertText="Free shipping starts at $300"
+      onClose={fadeOut}
     >
-      <UISlideOverHeader closeBtnProps={closeBtnProps} onClose={fadeOut}>
-        <div data-fs-cart-sidebar-title>
-          <p data-fs-cart-sidebar-title-text className="text__lead">
-            Your Cart
-          </p>
-          <UIBadge variant="info">{totalItems}</UIBadge>
-        </div>
-      </UISlideOverHeader>
-      <UIAlert icon={<Icon name="Truck" />}>
-        Free shipping starts at $300
-      </UIAlert>
-
       {isEmpty ? (
-        <EmptyCart onDismiss={fadeOut} />
+        <EmptyCart onDismiss={closeCart} />
       ) : (
         <>
-          <UIList data-fs-cart-sidebar-list>
+          <UICartSidebarList>
             {items.map((item) => (
               <li key={item.id}>
                 <CartItem item={item} />
@@ -102,16 +79,15 @@ function CartSidebar() {
                 ))}
               </>
             )}
-          </UIList>
+          </UICartSidebarList>
 
-          <footer data-fs-cart-sidebar-footer>
+          <UICartSidebarFooter>
             <OrderSummary
               subTotal={subTotal}
               total={total}
               numberOfItems={totalItems}
               checkoutButton={
                 <UIButton
-                  data-fs-cart-sidebar-checkout-button
                   variant="primary"
                   icon={
                     !isValidating && (
@@ -125,10 +101,10 @@ function CartSidebar() {
                 </UIButton>
               }
             />
-          </footer>
+          </UICartSidebarFooter>
         </>
       )}
-    </UISlideOver>
+    </UICartSidebar>
   )
 }
 

package/src/components/cart/OrderSummary/OrderSummary.tsx

@@ -3,8 +3,6 @@ import type { ReactNode } from 'react'
 
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 
-import styles from './order-summary.module.scss'
-
 interface OrderSummaryProps {
   subTotal: number
   total: number
@@ -22,17 +20,15 @@ function OrderSummary({
   const formattedDiscount = useFormattedPrice(discount)
 
   return (
-    <div className={styles.fsOrderSummary}>
+    <>
       <UIOrderSummary
         subtotalLabel={`Subtotal (${numberOfItems} products)`}
         subtotalValue={useFormattedPrice(subTotal)}
-        discountLabel="Discount"
         discountValue={discount > 0 ? `-${formattedDiscount}` : undefined}
-        totalLabel="Total"
         totalValue={useFormattedPrice(total)}
       />
       {checkoutButton}
-    </div>
+    </>
   )
 }
 

package/src/components/sections/ProductDetails/ProductDetails.tsx

@@ -13,7 +13,7 @@ import {
 import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
 import OutOfStock from 'src/components/product/OutOfStock'
 import Breadcrumb from 'src/components/ui/Breadcrumb'
-import { ImageGallery } from 'src/components/ui/ImageGallery'
+import ImageGallery from 'src/components/ui/ImageGallery'
 import ShippingSimulation from 'src/components/ui/ShippingSimulation'
 import Selectors from 'src/components/ui/SkuSelector'
 import type { AnalyticsItem } from 'src/sdk/analytics/types'

package/src/components/ui/ImageGallery/ImageGallery.tsx

@@ -1,29 +1,40 @@
-import type { HTMLAttributes } from 'react'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import {
+  ImageGallery as UIImageGallery,
+  ImageElementData,
+  ImageZoom,
+} from '@faststore/ui'
 
 import { Image } from 'src/components/ui/Image'
-import styles from 'src/components/ui/ImageGallery/image-gallery.module.scss'
+import { useRouter } from 'next/router'
 
-import { ImageGallerySelector, ImageZoom } from '.'
+const ImageComponent = ({ url, alternateName }) => (
+  <Image
+    src={url}
+    alt={alternateName}
+    sizes="(max-width: 72px) 25vw, 30vw"
+    width={72}
+    height={72}
+  />
+)
 
-export interface ImageElementData {
-  url: string
-  alternateName: string
-}
-
-interface ImageGalleryProps extends HTMLAttributes<HTMLDivElement> {
+export interface ImageGalleryProps {
   images: ImageElementData[]
 }
 
-function ImageGallery({ images, ...otherProps }: ImageGalleryProps) {
+const ImageGallery = ({ images, ...otherProps }: ImageGalleryProps) => {
   const [selectedImageIdx, setSelectedImageIdx] = useState(0)
-  const currentImage = images[selectedImageIdx]
-  const hasSelector = images.length > 1
+  const currentImage = images[selectedImageIdx] ?? images[0]
+  const dynamicRoute = useRouter().asPath
+
+  useEffect(() => setSelectedImageIdx(0), [dynamicRoute])
 
   return (
-    <section
-      data-fs-image-gallery={hasSelector ? 'with-selector' : 'without-selector'}
-      className={styles.fsImageGallery}
+    <UIImageGallery
+      images={images}
+      ImageComponent={ImageComponent}
+      selectedImageIdx={selectedImageIdx}
+      setSelectedImageIdx={setSelectedImageIdx}
       {...otherProps}
     >
       <ImageZoom>
@@ -37,14 +48,7 @@ function ImageGallery({ images, ...otherProps }: ImageGalleryProps) {
           priority
         />
       </ImageZoom>
-      {hasSelector && (
-        <ImageGallerySelector
-          images={images}
-          currentImageIdx={selectedImageIdx}
-          onSelect={setSelectedImageIdx}
-        />
-      )}
-    </section>
+    </UIImageGallery>
   )
 }
 

package/src/components/ui/ImageGallery/index.ts

@@ -1,4 +1,2 @@
-export { default as ImageGallerySelector } from './ImageGallerySelector'
-export { default as ImageGallery } from './ImageGallery'
-export { default as ImageZoom } from './ImageZoom'
-export type { ImageElementData } from './ImageGallery'
+export { default } from './ImageGallery'
+export type { ImageGalleryProps } from './ImageGallery'

package/.next/BUILD_ID

@@ -1 +0,0 @@
-V0z729OIqsX7azqcAGJ5Q

package/.next/build-manifest.json

@@ -1,99 +0,0 @@
-{
-  "polyfillFiles": [
-    "static/chunks/polyfills-c67a75d1b6f99dc8.js"
-  ],
-  "devFiles": [],
-  "ampDevFiles": [],
-  "lowPriorityFiles": [
-    "static/V0z729OIqsX7azqcAGJ5Q/_buildManifest.js",
-    "static/V0z729OIqsX7azqcAGJ5Q/_ssgManifest.js"
-  ],
-  "rootMainFiles": [],
-  "pages": {
-    "/": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/781-7df372b5b56e3f96.js",
-      "static/css/43d61b402f41569b.css",
-      "static/chunks/pages/index-9ea3f7868f5ed138.js"
-    ],
-    "/404": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/404-ba608a2a9f0c420a.js"
-    ],
-    "/500": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/500-910883c20541d9ce.js"
-    ],
-    "/[...slug]": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/264-6dc2258a751b3d74.js",
-      "static/css/8ea129ea90e49e98.css",
-      "static/chunks/pages/[...slug]-417e3b51bda1f5f3.js"
-    ],
-    "/[slug]/p": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/781-7df372b5b56e3f96.js",
-      "static/css/4899c3cc356704f9.css",
-      "static/chunks/pages/[slug]/p-cbb4ca8d57bafa9f.js"
-    ],
-    "/_app": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/css/ea60a7e6c07ee644.css",
-      "static/chunks/pages/_app-6dc7b0c168e15d5c.js"
-    ],
-    "/_error": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/pages/_error-a7a0c1d9bfbb4f38.js"
-    ],
-    "/account": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/account-b8fc5222ffe89b60.js"
-    ],
-    "/checkout": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/checkout-f8cb7cb22225ef9d.js"
-    ],
-    "/login": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/login-33954810b200eca8.js"
-    ],
-    "/s": [
-      "static/chunks/webpack-65b155971f3eac57.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/264-6dc2258a751b3d74.js",
-      "static/css/db63ea05e98cb7e8.css",
-      "static/chunks/pages/s-ba2868e14fedb65b.js"
-    ]
-  },
-  "ampFirstPages": []
-}