@faststore/core 2.0.85-alpha.0 → 2.0.87-alpha.0

package/.turbo/turbo-build.log

@@ -17,7 +17,6 @@ info  - Generating static pages (0/13)
 info  - Generating static pages (3/13)
 info  - Generating static pages (6/13)
 info  - Generating static pages (9/13)
-warn - CallToAction not found. Add a new component for this section or remove it from the CMS
 info  - Generating static pages (13/13)
 info  - Finalizing page optimization...
 
@@ -27,8 +26,8 @@ Route (pages)                              Size     First Load JS
 ├   /_app                                  0 B             100 kB
 ├ ● /[...slug]                             6.82 kB         131 kB
 ├   └ css/430b8cafbf7c23c1.css             2.53 kB
-├ ● /[slug]/p                              11.7 kB         136 kB
-├   └ css/9e7c9877b9f78c63.css             3.87 kB
+├ ● /[slug]/p                              11.5 kB         135 kB
+├   └ css/a3aac8b785a9dfe2.css             3.22 kB
 ├ ○ /404                                   431 B           106 kB
 ├ ○ /500                                   439 B           106 kB
 ├ ○ /account                               369 B           106 kB
@@ -42,8 +41,8 @@ Route (pages)                              Size     First Load JS
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-9746772201fe3ac1.js        23.9 kB
   ├ chunks/pages/_app-0effc9759a3900cf.js  29.1 kB
-  ├ chunks/webpack-dbb0d4f8be2c2abe.js     2.2 kB
-  └ css/2caa85943bafc7b1.css               20.4 kB
+  ├ chunks/webpack-97e00fea9c2bafa8.js     2.19 kB
+  └ css/eb3e5d97ea879fee.css               21 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,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.87-alpha.0](https://github.com/vtex/faststore/compare/v2.0.86-alpha.0...v2.0.87-alpha.0) (2023-03-24)
+
+### Features
+
+- Adds `SkuSelector` component ([#1677](https://github.com/vtex/faststore/issues/1677)) ([696a14e](https://github.com/vtex/faststore/commit/696a14e6d9633ececcd2818e4a32b32ce8ad2e2b))
+
 ## [2.0.85-alpha.0](https://github.com/vtex/faststore/compare/v2.0.84-alpha.0...v2.0.85-alpha.0) (2023-03-22)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.85-alpha.0",
+  "version": "2.0.87-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.3-alpha.0",
-    "@faststore/components": "^2.0.85-alpha.0",
+    "@faststore/components": "^2.0.87-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.3-alpha.0",
-    "@faststore/ui": "^2.0.85-alpha.0",
+    "@faststore/ui": "^2.0.87-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": "24590eae428eae6be0b7c43cbec9fe236270794e"
+  "gitHead": "b3bf59d620318b0bd4511eb4731eb716006c0fb4"
 }

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

@@ -170,10 +170,12 @@ function ProductDetails({ context: staleProduct }: Props) {
             </section>
             {skuVariants && (
               <Selectors
-                slugsMap={skuVariants.slugsMap}
-                availableVariations={skuVariants.availableVariations}
-                activeVariations={skuVariants.activeVariations}
                 data-fs-product-details-selectors
+                slugsMap={isVariantOf.skuVariants.slugsMap}
+                activeVariations={isVariantOf.skuVariants.activeVariations}
+                availableVariations={
+                  isVariantOf.skuVariants.availableVariations
+                }
               />
             )}
             {/* NOTE: A loading skeleton had to be used to avoid a Lighthouse's
@@ -284,8 +286,8 @@ export const fragment = gql`
       productGroupID
       skuVariants {
         activeVariations
-        slugsMap(dominantVariantName: "Color")
-        availableVariations(dominantVariantName: "Color")
+        slugsMap
+        availableVariations
       }
     }
 

package/src/components/sections/ProductDetails/product-details.module.scss

@@ -38,11 +38,6 @@
   [data-fs-product-details-section] {
     height: fit-content;
 
-    [data-fs-sku-selector] {
-      margin-bottom: var(--fs-product-details-vertical-spacing);
-      &:last-of-type { margin-bottom: var(--fs-spacing-7); }
-    }
-
     [data-fs-buy-button] {
       width: 100%;
       margin-top: var(--fs-spacing-3);

package/src/components/ui/SkuSelector/Selectors.stories.mdx

@@ -39,12 +39,16 @@ The code snippet below is an example of what `Selectors` props should look like,
     ]}
   >
     <Selectors
-      activeVariations={{ Size: '41', Color: 'White' }}
+      activeVariations={{
+        Color: 'White',
+        Size: '42',
+      }}
       slugsMap={{
         'Color-Pink-Size-42': 'classic-shoes-37',
         'Color-White-Size-42': 'classic-shoes-36',
         'Color-White-Size-41': 'classic-shoes-310124175',
       }}
+      dominantVariation: 'Color'
       availableVariations={{
         Size: [
           {

package/src/components/ui/SkuSelector/Selectors.tsx

@@ -1,9 +1,17 @@
-import { useRouter } from 'next/router'
-import type { ChangeEvent, HTMLAttributes } from 'react'
+import { HTMLAttributes, useCallback, useMemo } from 'react'
 
-import SkuSelector from './SkuSelector'
-import { navigateToSku } from './skuVariants'
-import type { SkuVariantsByName } from './skuVariants'
+import { Image } from '../Image'
+import {
+  SkuSelector as UISkuSelector,
+  SkuSelectorProps,
+  SkuOption,
+} from '@faststore/ui'
+import NextLink from 'next/link'
+
+export type SkuVariantsByName = Record<
+  string,
+  Array<{ alt: string; label: string; value: string; src?: string }>
+>
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -20,64 +28,42 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
   activeVariations: Record<string, string>
 }
 
-/**
- * Name of the property that's considered **dominant**. Which means that all
- * other varying properties will be filtered according to the current value
- * of this property.
- *
- * Ex: If `Red` is the current value for the 'Color' variation, we'll only
- * render possible values for 'Size' that are available in `Red`.
- */
-const DOMINANT_SKU_SELECTOR_PROPERTY = 'Color'
+const ImageComponent: SkuSelectorProps['ImageComponent'] = ({
+  src,
+  alt,
+  ...otherProps
+}) => (
+  <Image
+    src={src}
+    alt={alt}
+    width={20}
+    height={20}
+    loading="lazy"
+    {...otherProps}
+  />
+)
 
 function Selectors({
   slugsMap,
-  availableVariations,
   activeVariations,
+  availableVariations,
   ...otherProps
 }: Props) {
-  const router = useRouter()
-
-  // 'Color' variants are singled-out here because they will always be rendered
-  // as 'image' variants. And they're also the 'dominant' variants in our store.
-  const { Color: colorOptions, ...otherSkuVariants } = availableVariations
-
-  function handleOnChange(
-    e: ChangeEvent<HTMLInputElement>,
-    updatedVariationName: string
-  ) {
-    const newVariationValue = e.currentTarget.value
-
-    navigateToSku({
-      router,
-      slugsMap,
-      updatedVariationName,
-      selectorsState: activeVariations,
-      updatedVariationValue: newVariationValue,
-      dominantSku: DOMINANT_SKU_SELECTOR_PROPERTY,
-    })
-  }
-
   return (
     <section {...otherProps}>
-      {colorOptions && (
-        <SkuSelector
-          label="Color"
-          variant="image"
-          options={colorOptions}
-          activeValue={activeVariations.Color}
-          onChange={(e) => handleOnChange(e, 'Color')}
-        />
-      )}
-      {otherSkuVariants &&
-        Object.keys(otherSkuVariants).map((skuVariant) => (
-          <SkuSelector
-            variant="label"
+      {availableVariations &&
+        Object.keys(availableVariations).map((skuVariant) => (
+          <UISkuSelector
             key={skuVariant}
-            label={skuVariant}
-            options={otherSkuVariants[skuVariant]}
-            activeValue={activeVariations[skuVariant]}
-            onChange={(e) => handleOnChange(e, skuVariant)}
+            skuPropertyName={skuVariant}
+            availableVariations={availableVariations}
+            ImageComponent={ImageComponent}
+            activeVariations={activeVariations}
+            slugsMap={slugsMap}
+            linkProps={{
+              as: NextLink,
+              legacyBehavior: false,
+            }}
           />
         ))}
     </section>

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

@@ -1,3 +1 @@
-export { default as SkuSelector } from './SkuSelector'
-
 export { default } from './Selectors'

package/src/sdk/cart/index.ts

@@ -68,8 +68,8 @@ export const ValidateCartMutation = gql`
       name
       skuVariants {
         activeVariations
-        slugsMap(dominantVariantName: "Color")
-        availableVariations(dominantVariantName: "Color")
+        slugsMap
+        availableVariations
       }
     }
     gtin

package/.next/BUILD_ID

@@ -1 +0,0 @@
-U30CqXXD1GphxOr478qYE

package/.next/build-manifest.json

@@ -1,103 +0,0 @@
-{
-  "polyfillFiles": [
-    "static/chunks/polyfills-c67a75d1b6f99dc8.js"
-  ],
-  "devFiles": [],
-  "ampDevFiles": [],
-  "lowPriorityFiles": [
-    "static/U30CqXXD1GphxOr478qYE/_buildManifest.js",
-    "static/U30CqXXD1GphxOr478qYE/_ssgManifest.js"
-  ],
-  "rootMainFiles": [],
-  "pages": {
-    "/": [
-      "static/chunks/webpack-dbb0d4f8be2c2abe.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/380-efd3541ef85300d5.js",
-      "static/chunks/817-58eb9d4b3ee3be23.js",
-      "static/css/43d61b402f41569b.css",
-      "static/chunks/pages/index-912d65fde37706bb.js"
-    ],
-    "/404": [
-      "static/chunks/webpack-dbb0d4f8be2c2abe.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-dbb0d4f8be2c2abe.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-dbb0d4f8be2c2abe.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/380-efd3541ef85300d5.js",
-      "static/chunks/337-cf283e91e431869b.js",
-      "static/css/430b8cafbf7c23c1.css",
-      "static/chunks/pages/[...slug]-51896262f6760bf1.js"
-    ],
-    "/[slug]/p": [
-      "static/chunks/webpack-dbb0d4f8be2c2abe.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/380-efd3541ef85300d5.js",
-      "static/chunks/817-58eb9d4b3ee3be23.js",
-      "static/css/9e7c9877b9f78c63.css",
-      "static/chunks/pages/[slug]/p-08c1f443f7d84d0d.js"
-    ],
-    "/_app": [
-      "static/chunks/webpack-dbb0d4f8be2c2abe.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/css/2caa85943bafc7b1.css",
-      "static/chunks/pages/_app-0effc9759a3900cf.js"
-    ],
-    "/_error": [
-      "static/chunks/webpack-dbb0d4f8be2c2abe.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/pages/_error-a7a0c1d9bfbb4f38.js"
-    ],
-    "/account": [
-      "static/chunks/webpack-dbb0d4f8be2c2abe.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/account-f19102933e6fd84c.js"
-    ],
-    "/checkout": [
-      "static/chunks/webpack-dbb0d4f8be2c2abe.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-dbb0d4f8be2c2abe.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/login-0b9ea80d9fa0f91b.js"
-    ],
-    "/s": [
-      "static/chunks/webpack-dbb0d4f8be2c2abe.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/153-a20e3f2da180607e.js",
-      "static/chunks/337-cf283e91e431869b.js",
-      "static/css/9dd1d1084d254c66.css",
-      "static/chunks/pages/s-86fe1e3303388123.js"
-    ]
-  },
-  "ampFirstPages": []
-}