@faststore/core 2.1.91 → 2.1.93

package/.turbo/turbo-build.log

@@ -25,8 +25,8 @@ Route (pages)                              Size     First Load JS
 ├   /_app                                  0 B            77.9 kB
 ├ ● /[...slug]                             4.06 kB         208 kB
 ├   └ css/527e334fa69cf40a.css             1.85 kB
-├ ● /[slug]/p                              10.4 kB         204 kB
-├   └ css/4b7138899cd07c63.css             11.3 kB
+├ ● /[slug]/p                              10.5 kB         204 kB
+├   └ css/3f6300dff11030c5.css             11.3 kB
 ├ ○ /404                                   1.19 kB         114 kB
 ├ ● /500                                   1.21 kB         114 kB
 ├ ● /account                               670 B           113 kB
@@ -41,7 +41,7 @@ Route (pages)                              Size     First Load JS
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-fd466221927468fd.js        23.9 kB
   ├ chunks/pages/_app-6d0e6ab9a4dd8106.js  6.45 kB
-  ├ chunks/webpack-352e624909554726.js     2.29 kB
+  ├ chunks/webpack-8e4905e5f03f2234.js     2.29 kB
   └ css/9e76fef1c9ca89af.css               3.06 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/cms/faststore/sections.json

@@ -1430,6 +1430,18 @@
               "default": "Description"
             }
           }
+        },
+        "imageGallery": {
+          "title": "Image Gallery",
+          "type": "object",
+          "properties": {
+            "imagePosition": {
+              "type": "string",
+              "title": "Image Position",
+              "enumNames": ["Center", "Top", "Bottom"],
+              "enum": ["center", "top", "bottom"]
+            }
+          }
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.1.91",
+  "version": "2.1.93",
   "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.1.90",
-    "@faststore/components": "^2.1.82",
+    "@faststore/components": "^2.1.93",
     "@faststore/graphql-utils": "^2.1.82",
     "@faststore/sdk": "^2.1.82",
-    "@faststore/ui": "^2.1.82",
+    "@faststore/ui": "^2.1.93",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
@@ -110,5 +110,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "1cd662c7de939daf29ff6a820d73ea4d61dfd3d9"
+  "gitHead": "6975c41cbaa09ca866e023c0c4ea68c0dc11c6c3"
 }

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

@@ -7,7 +7,7 @@ import {
   Icon as UIIcon,
   Price as UIPrice,
   QuantitySelector as UIQuantitySelector,
-  ImageZoom as UIImageZoom,
+  ImageGalleryViewer as UIImageGalleryViewer,
   ImageGallery as UIImageGallery,
 } from '@faststore/ui'
 
@@ -29,7 +29,7 @@ const {
   SkuSelector,
   ShippingSimulation,
   ImageGallery,
-  ImageZoom,
+  ImageGalleryViewer,
   __experimentalImageGalleryImage,
   __experimentalImageGallery,
   __experimentalShippingSimulation,
@@ -44,7 +44,7 @@ const {
     SkuSelector: UISkuSelector,
     ShippingSimulation: UIShippingSimulation,
     ImageGallery: UIImageGallery,
-    ImageZoom: UIImageZoom,
+    ImageGalleryViewer: UIImageGalleryViewer,
     __experimentalImageGalleryImage: Image,
     __experimentalImageGallery: LocalImageGallery,
     __experimentalShippingSimulation: LocalShippingSimulation,
@@ -62,7 +62,7 @@ export {
   SkuSelector,
   ShippingSimulation,
   ImageGallery,
-  ImageZoom,
+  ImageGalleryViewer,
   __experimentalImageGalleryImage,
   __experimentalImageGallery,
   __experimentalShippingSimulation,

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

@@ -56,6 +56,9 @@ export interface ProductDetailsProps {
     displayDescription: boolean
     initiallyExpanded: 'first' | 'all' | 'none'
   }
+  imageGallery: {
+    imagePosition: 'top' | 'center' | 'bottom'
+  }
 }
 
 function ProductDetails({
@@ -87,6 +90,7 @@ function ProductDetails({
     initiallyExpanded: productDescriptionInitiallyExpanded,
     displayDescription: shouldDisplayProductDescription,
   },
+  imageGallery: { imagePosition = ImageGallery.props.imagePosition },
 }: ProductDetailsProps & ProductDetailsContextProps) {
   const { currency } = useSession()
   const [quantity, setQuantity] = useState(1)
@@ -182,6 +186,7 @@ function ProductDetails({
           <ImageGallery.Component
             data-fs-product-details-gallery
             {...ImageGallery.props}
+            imagePosition={imagePosition}
             images={productImages}
           />
           <section data-fs-product-details-info>

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

@@ -1,14 +1,15 @@
-import { ImageElementData } from '@faststore/ui'
 import { useEffect, useState } from 'react'
 
 import { useRouter } from 'next/router'
 
 import {
   ImageGallery as ImageGalleryWrapper,
-  ImageZoom,
+  ImageGalleryViewer,
   __experimentalImageGalleryImage as Image,
 } from 'src/components/sections/ProductDetails/Overrides'
 
+import type { ImageGalleryProps as UIImageGalleryProps } from '@faststore/ui'
+
 const ImageComponent = ({ url, alternateName }) => {
   return (
     <Image.Component src={url} alt={alternateName} width={68} height={68} />
@@ -16,10 +17,15 @@ const ImageComponent = ({ url, alternateName }) => {
 }
 
 export interface ImageGalleryProps {
-  images: ImageElementData[]
+  images: UIImageGalleryProps['images']
+  imagePosition?: UIImageGalleryProps['imagePosition']
 }
 
-const ImageGallery = ({ images, ...otherProps }: ImageGalleryProps) => {
+const ImageGallery = ({
+  images,
+  imagePosition,
+  ...otherProps
+}: ImageGalleryProps) => {
   const [selectedImageIdx, setSelectedImageIdx] = useState(0)
   const currentImage = images[selectedImageIdx] ?? images[0]
   const dynamicRoute = useRouter().asPath
@@ -33,9 +39,10 @@ const ImageGallery = ({ images, ...otherProps }: ImageGalleryProps) => {
       ImageComponent={ImageComponent}
       selectedImageIdx={selectedImageIdx}
       setSelectedImageIdx={setSelectedImageIdx}
+      imagePosition={imagePosition ?? ImageGalleryWrapper.props.imagePosition}
       {...otherProps}
     >
-      <ImageZoom.Component {...ImageZoom.props}>
+      <ImageGalleryViewer.Component {...ImageGalleryViewer.props}>
         <Image.Component
           sizes="(max-width: 360px) 50vw, (max-width: 768px) 90vw, 50vw"
           width={691}
@@ -45,7 +52,7 @@ const ImageGallery = ({ images, ...otherProps }: ImageGalleryProps) => {
           src={currentImage.url}
           alt={currentImage.alternateName}
         />
-      </ImageZoom.Component>
+      </ImageGalleryViewer.Component>
     </ImageGalleryWrapper.Component>
   )
 }

package/src/typings/overrides.ts

@@ -13,7 +13,7 @@ import type {
   IconButtonProps,
   IconProps,
   ImageGalleryProps,
-  ImageZoomProps,
+  ImageGalleryViewerProps,
   InputFieldProps,
   LinkButtonProps,
   NavbarButtonsProps,
@@ -197,7 +197,10 @@ export type ProductDetailsOverrideDefinition = SectionOverrideDefinition<
       ImageGalleryProps,
       ImageGalleryProps
     >
-    ImageZoom: ComponentOverrideDefinition<ImageZoomProps, ImageZoomProps>
+    ImageGalleryViewer: ComponentOverrideDefinition<
+      ImageGalleryViewerProps,
+      ImageGalleryViewerProps
+    >
     __experimentalImageGalleryImage: ComponentOverrideDefinition<any, any>
     __experimentalImageGallery: ComponentOverrideDefinition<any, any>
     __experimentalShippingSimulation: ComponentOverrideDefinition<any, any>