@faststore/core 2.0.129-alpha.0 → 2.0.132-alpha.0

package/.turbo/turbo-build.log

@@ -17,33 +17,31 @@ info  - Generating static pages (0/7)
 info  - Generating static pages (1/7)
 info  - Generating static pages (3/7)
 warn - CallToAction not found. Add a new component for this section or remove it from the CMS
-warn - CallToAction not found. Add a new component for this section or remove it from the CMS
-warn - CallToAction not found. Add a new component for this section or remove it from the CMS
 info  - Generating static pages (5/7)
 info  - Generating static pages (7/7)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      2.85 kB         126 kB
-├   └ css/7a8417de90d11c60.css             7.06 kB
+┌ ● /                                      2.88 kB         126 kB
+├   └ css/d730f6a28e01cf84.css             7.22 kB
 ├   /_app                                  0 B            77.9 kB
-├ ● /[...slug]                             7.74 kB         133 kB
-├   └ css/326e215d7b09f642.css             7.72 kB
+├ ● /[...slug]                             7.49 kB         133 kB
+├   └ css/408ab64ab5c04787.css             7.95 kB
 ├ ● /[slug]/p                              11.2 kB         135 kB
-├   └ css/4b7b7b64ae6afe67.css             9.14 kB
-├ ○ /404                                   951 B           110 kB
-├ ● /500                                   718 B           110 kB
+├   └ css/bc39c02d387d74b8.css             9.34 kB
+├ ○ /404                                   1.11 kB         110 kB
+├ ● /500                                   1.12 kB         110 kB
 ├ ● /account                               669 B           110 kB
 ├ λ /api/graphql                           0 B            77.9 kB
 ├ λ /api/preview                           0 B            77.9 kB
 ├ ● /checkout                              657 B           110 kB
-├ ● /login                                 868 B           110 kB
+├ ● /login                                 1.02 kB         110 kB
 └ ● /s                                     961 B           121 kB
 + First Load JS shared by all              80.7 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
-  ├ chunks/main-9746772201fe3ac1.js        23.9 kB
+  ├ chunks/main-fd466221927468fd.js        23.9 kB
   ├ chunks/pages/_app-b601536188b9a919.js  6.43 kB
-  ├ chunks/webpack-02fe78a6d63f52e6.js     2.25 kB
+  ├ chunks/webpack-9f89bcf71cec5fbe.js     2.27 kB
   └ css/587c27bbda64e700.css               2.8 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

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.132-alpha.0](https://github.com/vtex/faststore/compare/v2.0.131-alpha.0...v2.0.132-alpha.0) (2023-05-09)
+
+### Bug Fixes
+
+- Lighthouse Checks 🟢 ([#1737](https://github.com/vtex/faststore/issues/1737)) ([b862703](https://github.com/vtex/faststore/commit/b862703ce991065f92765f4cecc88c9946b3d702)), closes [/github.com/GoogleChrome/lighthouse-ci/blob/main/packages/utils/src/presets/all.js#L25](https://github.com/vtex//github.com/GoogleChrome/lighthouse-ci/blob/main/packages/utils/src/presets/all.js/issues/L25)
+
+## [2.0.130-alpha.0](https://github.com/vtex/faststore/compare/v2.0.129-alpha.0...v2.0.130-alpha.0) (2023-05-04)
+
+### Features
+
+- Add PLP Content-type e refacts sections to use CamelCase ([#1745](https://github.com/vtex/faststore/issues/1745)) ([00e17d5](https://github.com/vtex/faststore/commit/00e17d500c070137e7704a35adf4949dcc06f7c6))
+
 ## [2.0.129-alpha.0](https://github.com/vtex/faststore/compare/v2.0.128-alpha.0...v2.0.129-alpha.0) (2023-05-04)
 
 ### Features

package/cms/faststore/content-types.json

@@ -59,5 +59,10 @@
     "id": "pdp",
     "name": "Product Page",
     "configurationSchemaSets": []
+  },
+  {
+    "id": "plp",
+    "name": "Product List Page",
+    "configurationSchemaSets": []
   }
 ]

package/cms/faststore/sections.json

@@ -6,13 +6,13 @@
       "type": "object",
       "description": "Search Bar Configuration",
       "required": [
-        "search-input",
-        "search-history",
-        "search-top",
-        "search-autocomplete"
+        "searchInput",
+        "searchHistory",
+        "searchTop",
+        "searchAutocomplete"
       ],
       "properties": {
-        "search-input": {
+        "searchInput": {
           "title": "Input Field",
           "type": "object",
           "properties": {
@@ -41,7 +41,7 @@
             }
           }
         },
-        "search-history": {
+        "searchHistory": {
           "title": "Search History",
           "type": "object",
           "properties": {
@@ -50,7 +50,7 @@
               "type": "string",
               "default": "History"
             },
-            "clear-button-label": {
+            "clearButtonLabel": {
               "type": "string",
               "title": "Clear Button Label",
               "default": "Clear History"
@@ -73,14 +73,14 @@
                 }
               }
             },
-            "max-items": {
+            "maxItems": {
               "title": "Maximum Number of History Items",
               "type": "integer",
               "default": 5
             }
           }
         },
-        "search-top": {
+        "searchTop": {
           "title": "Top Search",
           "type": "object",
           "properties": {
@@ -89,14 +89,14 @@
               "type": "string",
               "default": "Top Search"
             },
-            "max-items": {
+            "maxItems": {
               "title": "Maximum Number of Top Search Items",
               "type": "integer",
               "default": 5
             }
           }
         },
-        "search-autocomplete": {
+        "searchAutocomplete": {
           "title": "Autocomplete",
           "type": "object",
           "properties": {
@@ -117,14 +117,14 @@
                 }
               }
             },
-            "max-items": {
+            "maxItems": {
               "title": "Maximum Number of Autocomplete Items",
               "type": "integer",
               "default": 5
             }
           }
         },
-        "search-products": {
+        "searchProducts": {
           "title": "Suggested Products",
           "type": "object",
           "properties": {
@@ -133,7 +133,7 @@
               "type": "string",
               "default": "Suggested Products"
             },
-            "max-items": {
+            "maxItems": {
               "title": "Maximum Number of Suggested Products",
               "type": "integer",
               "default": 5
@@ -168,7 +168,7 @@
             }
           }
         },
-        "sign-in-button": {
+        "signInButton": {
           "title": "Sign In Button",
           "type": "object",
           "properties": {
@@ -197,7 +197,7 @@
             }
           }
         },
-        "cart-icon": {
+        "cartIcon": {
           "title": "Cart Icon",
           "type": "object",
           "properties": {
@@ -253,7 +253,7 @@
                 }
               }
             },
-            "page-links": {
+            "pageLinks": {
               "title": "Links",
               "type": "array",
               "maxItems": 8,
@@ -379,7 +379,7 @@
             }
           }
         },
-        "footer-links": {
+        "footerLinks": {
           "title": "Footer Links Sections",
           "type": "array",
           "maxItems": 4,
@@ -387,7 +387,7 @@
             "title": "Footer Links Section",
             "type": "object",
             "properties": {
-              "section-title": {
+              "sectionTitle": {
                 "title": "Section Title",
                 "type": "string"
               },
@@ -416,7 +416,7 @@
             }
           }
         },
-        "footer-social": {
+        "footerSocial": {
           "title": "Social Media Links",
           "type": "object",
           "properties": {
@@ -425,7 +425,7 @@
               "type": "string",
               "default": "Follow Us"
             },
-            "social-links": {
+            "socialLinks": {
               "title": "Social Media",
               "type": "array",
               "minItems": 0,
@@ -487,16 +487,16 @@
             }
           }
         },
-        "copyright-info": {
+        "copyrightInfo": {
           "title": "Copyright Message",
           "type": "string"
         },
-        "accepted-payment-methods": {
+        "acceptedPaymentMethods": {
           "title": "Payment Methods Sections",
           "type": "object",
-          "required": ["show-payment-methods"],
+          "required": ["showPaymentMethods"],
           "properties": {
-            "show-payment-methods": {
+            "showPaymentMethods": {
               "title": "Display Payment Methods",
               "type": "boolean",
               "default": true
@@ -506,7 +506,7 @@
               "type": "string",
               "default": "Payment Methods"
             },
-            "payment-methods": {
+            "paymentMethods": {
               "title": "Payment Methods",
               "type": "array",
               "items": {
@@ -797,21 +797,21 @@
             }
           }
         },
-        "product-card-configuration": {
+        "productCardConfiguration": {
           "title": "Product Card Configuration",
           "type": "object",
           "properties": {
-            "show-discount-badge": {
+            "showDiscountBadge": {
               "title": "Show discount badge?",
               "type": "boolean",
               "default": true
             },
-            "show-buy-button": {
+            "showBuyButton": {
               "title": "Show buy button?",
               "type": "boolean",
               "default": true
             },
-            "buy-button-title": {
+            "buyButtonTitle": {
               "title": "Buy Button Text",
               "type": "string",
               "default": "Buy"
@@ -963,26 +963,26 @@
           "type": "string",
           "default": "Receive our news and promotions in advance"
         },
-        "privacy-policy": {
+        "privacyPolicy": {
           "title": "Privacy Policy Disclaimer",
           "type": "string"
         },
-        "email-input-label": {
+        "emailInputLabel": {
           "title": "Email input label",
           "type": "string",
           "default": "Your Email"
         },
-        "display-name-input": {
+        "displayNameInput": {
           "title": "Request name?",
           "type": "boolean",
           "default": true
         },
-        "name-input-label": {
+        "nameInputLabel": {
           "title": "Name input label",
           "type": "string",
           "default": "Your Name"
         },
-        "subscribe-button-label": {
+        "subscribeButtonLabel": {
           "title": "Subscribe button label",
           "type": "string",
           "default": "Subscribe"
@@ -1096,23 +1096,23 @@
       "type": "object",
       "description": "Display Product Details Section",
       "properties": {
-        "product-title": {
+        "productTitle": {
           "title": "Product Title",
           "type": "object",
           "properties": {
-            "discount-badge": {
+            "discountBadge": {
               "title": "Show Discount Badge?",
               "type": "boolean",
               "default": false
             },
-            "ref-number": {
+            "refNumber": {
               "title": "Show Reference Number?",
               "type": "boolean",
               "default": false
             }
           }
         },
-        "buy-button": {
+        "buyButton": {
           "title": "Buy Button",
           "type": "object",
           "properties": {
@@ -1140,7 +1140,7 @@
             }
           }
         },
-        "shipping-simulator": {
+        "shippingSimulator": {
           "title": "Shipping Simulation",
           "type": "object",
           "properties": {
@@ -1149,7 +1149,7 @@
               "type": "string",
               "default": "Shipping"
             },
-            "input-label": {
+            "inputLabel": {
               "title": "Input Label",
               "type": "string",
               "default": "Postal Code"
@@ -1169,17 +1169,17 @@
                 }
               }
             },
-            "shipping-options-table-title": {
+            "shippingOptionsTableTitle": {
               "title": "Shipping Options Table Header",
               "type": "string"
             }
           }
         },
-        "product-details-content": {
+        "productDetailsContent": {
           "title": "Product Details Content",
           "type": "object",
           "properties": {
-            "initially-expanded": {
+            "initiallyExpanded": {
               "type": "string",
               "title": "Initially Expanded?",
               "enumNames": ["First", "All", "None"],
@@ -1188,7 +1188,7 @@
             "details": {
               "type": "object",
               "properties": {
-                "display-description": {
+                "displayDescription": {
                   "title": "Should display description?",
                   "type": "boolean",
                   "default": true

package/lighthouserc.js

@@ -18,5 +18,6 @@ module.exports = lhConfig({
     ],
     deprecations: 'warn',
     'resource-summary:stylesheet:count': ['warn', { maxNumericValue: 400 }],
+    'resource-summary:script:count': ['warn', { maxNumericValue: 20 }],
   },
 })

package/next.config.js

@@ -8,6 +8,8 @@ const nextConfig = {
   /* config options here */
   images: {
     domains: [`${storeConfig.api.storeId}.vtexassets.com`],
+    deviceSizes: [360, 540, 768, 1280, 1440],
+    imageSizes: [34, 68, 154, 320],
   },
   i18n: {
     locales: ['en-US'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.129-alpha.0",
+  "version": "2.0.132-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.118-alpha.0",
-    "@faststore/components": "^2.0.128-alpha.0",
+    "@faststore/components": "^2.0.132-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.118-alpha.0",
-    "@faststore/ui": "^2.0.128-alpha.0",
+    "@faststore/ui": "^2.0.132-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": "a169adddff8684854585cc6fcad7733a896d464a"
+  "gitHead": "e6d7561f0783b20ba4966d9e7c971146300ff129"
 }

package/src/components/common/Footer/section.module.scss

@@ -2,6 +2,7 @@
 @import "@faststore/ui/src/styles/base/utilities.scss";
 
 .section {
+  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
   @import "@faststore/ui/src/components/atoms/Link/styles.scss";
   @import "@faststore/ui/src/components/atoms/List/styles.scss";
   @import "@faststore/ui/src/components/atoms/Logo/styles.scss";

package/src/components/common/Toast/Toast.tsx

@@ -1,7 +1,9 @@
-import { Suspense, useEffect } from 'react'
+import { useEffect } from 'react'
 
 import { Toast as UIToast, useUI } from '@faststore/ui'
+import Section from 'src/components/sections/Section/Section'
 import { useCart } from 'src/sdk/cart'
+import styles from './section.module.scss'
 
 function Toast() {
   const { toasts, pushToast } = useUI()
@@ -27,9 +29,9 @@ function Toast() {
   return (
     <>
       {toasts.length > 0 && (
-        <Suspense fallback={null}>
+        <Section className={`${styles.section} section-toast`}>
           <UIToast />
-        </Suspense>
+        </Section>
       )}
     </>
   )

package/src/components/common/Toast/section.module.scss

@@ -0,0 +1,7 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@faststore/ui/src/styles/base/utilities.scss";
+
+.section {
+  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Toast/styles.scss";
+}

package/src/components/product/ProductCard/ProductCard.tsx

@@ -1,16 +1,17 @@
+import { gql } from '@faststore/graphql-utils'
 import {
   ProductCard as UIProductCard,
   ProductCardContent as UIProductCardContent,
   ProductCardImage as UIProductCardImage,
 } from '@faststore/ui'
-import { gql } from '@faststore/graphql-utils'
 import { memo } from 'react'
 
+import type { ProductSummary_ProductFragment } from '@generated/graphql'
+import { ImageProps } from 'next/future/image'
+import NextLink from 'next/link'
 import { Image } from 'src/components/ui/Image'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import { useProductLink } from 'src/sdk/product/useProductLink'
-import type { ProductSummary_ProductFragment } from '@generated/graphql'
-import NextLink from 'next/link'
 
 type Variant = 'wide' | 'default'
 
@@ -29,6 +30,10 @@ export interface ProductCardProps {
    * Specifies the ProductCard image's aspect ratio.
    */
   aspectRatio?: number
+  /**
+   * Specifies the ProductCard image's props.
+   */
+  imgProps?: Partial<ImageProps>
   /**
    * Specifies Rating Value of the product.
    */
@@ -53,6 +58,7 @@ function ProductCard({
   bordered = false,
   variant = 'default',
   aspectRatio = 1,
+  imgProps,
   ratingValue,
   buttonLabel = 'Add',
   onButtonClick,
@@ -90,10 +96,10 @@ function ProductCard({
         <Image
           src={img.url}
           alt={img.alternateName}
-          width={360}
-          height={360 / aspectRatio}
-          sizes="(max-width: 768px) 25vw, 30vw"
-          loading="lazy"
+          sizes={`${imgProps?.sizes ?? '(max-width: 768px) 40vw, 30vw'}`}
+          width={imgProps?.width ?? 360}
+          height={Math.round((Number(imgProps?.height) || 360) / aspectRatio)}
+          loading={imgProps?.loading}
         />
       </UIProductCardImage>
       <UIProductCardContent

package/src/components/product/ProductGrid/ProductGrid.tsx

@@ -35,6 +35,11 @@ function ProductGrid({ products, page, pageSize }: Props) {
               index={pageSize * page + idx + 1}
               bordered
               aspectRatio={aspectRatio}
+              imgProps={{
+                width: 150,
+                height: 150,
+                sizes: '30vw',
+              }}
             />
           </UIProductGridItem>
         ))}

package/src/components/region/RegionButton/RegionButton.tsx

@@ -11,11 +11,11 @@ function RegionButton() {
     <UIButton
       variant="tertiary"
       size="small"
-      icon={<Icon name="MapPin" width={24} height={24} />}
+      icon={<Icon name="MapPin" width={18} height={18} weight="bold" />}
       iconPosition="left"
       onClick={openModal}
     >
-      <span>{postalCode ?? 'Set your location'}</span>
+      {postalCode ?? 'Set your location'}
     </UIButton>
   )
 }

package/src/components/sections/BannerNewsletter/BannerNewsletter.tsx

@@ -21,6 +21,7 @@ function BannerNewsletter() {
           title="Get News and Special Offers!"
           description="Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here."
           card
+          lite
         />
       </div>
     </Section>

package/src/components/sections/BannerNewsletter/section.module.scss

@@ -3,6 +3,7 @@
 
 .section {
   @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+  @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
   @import "@faststore/ui/src/components/molecules/Banner/styles.scss";
   @import "@faststore/ui/src/components/organisms/BannerNewsletter/styles.scss";
 }

package/src/components/sections/EmptyState/EmptyState.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react'
+import type { PropsWithChildren } from 'react'
+
+import Section from '../Section'
+import styles from './section.module.scss'
+
+import { EmptyState as UIEmptyState } from '@faststore/ui'
+
+export interface EmptyStateProps {
+  title: string
+  titleIcon?: ReactNode
+}
+
+function EmptyState({
+  title,
+  titleIcon,
+  children,
+}: PropsWithChildren<EmptyStateProps>) {
+  return (
+    <Section className={`${styles.section} section-empty-state`}>
+      <UIEmptyState title={title} titleIcon={titleIcon} bkgColor="light">
+        {children}
+      </UIEmptyState>
+    </Section>
+  )
+}
+
+export default EmptyState

package/src/components/sections/EmptyState/index.ts

@@ -0,0 +1,2 @@
+export { default } from './EmptyState'
+export type { EmptyStateProps } from './EmptyState'

package/src/components/sections/EmptyState/section.module.scss

@@ -0,0 +1,8 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@faststore/ui/src/styles/base/utilities.scss";
+
+.section {
+  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Loader/styles.scss";
+  @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
+}

package/src/components/sections/Hero/Hero.tsx

@@ -41,7 +41,6 @@ const Hero = ({
         <UIHeroImage data-fs-hero-image>
           <Image
             loading="eager"
-            priority
             src={image.src}
             alt={image.alt}
             width={360}

package/src/components/sections/ProductDetails/section.module.scss

@@ -10,6 +10,7 @@
   @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
   @import "@faststore/ui/src/components/atoms/Button/styles.scss";
   @import "@faststore/ui/src/components/atoms/Input/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Price/styles.scss";
   @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
   @import "@faststore/ui/src/components/molecules/Breadcrumb/styles.scss";
   @import "@faststore/ui/src/components/molecules/BuyButton/styles.scss";

package/src/components/sections/ProductGallery/section.module.scss

@@ -16,6 +16,7 @@
   @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
   @import "@faststore/ui/src/components/molecules/DiscountBadge/styles.scss";
   @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
+  @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
   @import "@faststore/ui/src/components/molecules/ProductCard/styles.scss";
   @import "@faststore/ui/src/components/molecules/ProductCardSkeleton/styles";
   @import "@faststore/ui/src/components/molecules/SelectField/styles.scss";

package/src/components/sections/ProductShelf/ProductShelf.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useId, useRef } from 'react'
 import { useInView } from 'react-intersection-observer'
 
 import { ProductShelf as UIProductShelf } from '@faststore/ui'
@@ -7,11 +7,12 @@ import type { ProductsQueryQueryVariables } from '@generated/graphql'
 import ProductShelfSkeleton from 'src/components/skeletons/ProductShelfSkeleton'
 import { useViewItemListEvent } from 'src/sdk/analytics/hooks/useViewItemListEvent'
 import { useProductsQuery } from 'src/sdk/product/useProductsQuery'
+import { textToKebabCase } from 'src/utils/utilities'
 
+import Carousel from '../../ui/Carousel'
+import Section from '../Section'
 import { Components } from './Overrides'
 const { ProductCard } = Components
-import Section from '../Section'
-import Carousel from '../../ui/Carousel'
 
 import styles from './section.module.scss'
 
@@ -25,6 +26,8 @@ function ProductShelf({
   withDivisor = false,
   ...variables
 }: ProductShelfProps) {
+  const titleId = textToKebabCase(title)
+  const id = useId()
   const viewedOnce = useRef(false)
   const { ref, inView } = useInView()
   const products = useProductsQuery(variables)
@@ -63,7 +66,7 @@ function ProductShelf({
         loading={products === undefined}
       >
         <UIProductShelf>
-          <Carousel>
+          <Carousel id={titleId || id}>
             {productEdges.map((product, idx) => (
               <ProductCard
                 bordered
@@ -71,6 +74,11 @@ function ProductShelf({
                 product={product.node}
                 index={idx + 1}
                 aspectRatio={aspectRatio}
+                imgProps={{
+                  width: 216,
+                  height: 216,
+                  sizes: '(max-width: 768px) 42vw, 30vw',
+                }}
               />
             ))}
           </Carousel>

package/src/components/sections/ProductTiles/ProductTiles.tsx

@@ -33,6 +33,26 @@ const getRatio = (products: number, idx: number) => {
   return 3 / 4
 }
 
+const getSizes = (products: number, idx: number) => {
+  const expandsFirstTile =
+    products === NUMBER_ITEMS_TO_EXPAND_FIRST && idx === 0
+
+  const expandsFirstTwoTile =
+    products === NUMBER_ITEMS_TO_EXPAND_FIRST_TWO && (idx === 0 || idx === 1)
+
+  if (expandsFirstTile || expandsFirstTwoTile) {
+    return {
+      width: 594,
+      height: 364,
+    }
+  }
+
+  return {
+    width: 284,
+    height: 364,
+  }
+}
+
 const ProductTiles = ({ title, ...variables }: ProductTilesProps) => {
   const viewedOnce = useRef(false)
   const { ref, inView } = useInView()
@@ -75,6 +95,7 @@ const ProductTiles = ({ title, ...variables }: ProductTilesProps) => {
                   index={idx + 1}
                   variant="wide"
                   aspectRatio={getRatio(productEdges.length, idx)}
+                  imgProps={getSizes(productEdges.length, idx)}
                 />
               </Tile>
             ))}

package/src/components/ui/Button/ButtonSignIn/ButtonSignIn.tsx

@@ -18,7 +18,7 @@ const ButtonSignIn = () => {
       icon={<Icon name="User" width={18} height={18} weight="bold" />}
       iconPosition="left"
     >
-      <span>{person?.id ? 'My Account' : 'Sign In'}</span>
+      {person?.id ? 'My Account' : 'Sign In'}
     </LinkButton>
   )
 }

package/src/components/ui/Image/Image.tsx

@@ -1,29 +1,18 @@
 import { memo } from 'react'
 
 import NextImage, { ImageProps } from 'next/future/image'
-import { ThumborOptions } from './thumborUrlBuilder'
-import { useImage } from './useImage'
+import loader from './loader'
 
-// Next loader function does not handle all props as height and options,
-// so we use the useImage hook to handle the custom thumbor loader (VTEX CDN) along with unoptimized prop
+// Next loader function does not handle all props as height and options
+// so we use a custom loader to handle images using thumbor server with VTEX CDN
 // https://nextjs.org/docs/api-reference/next/image#loader
-function Image({ src, width, height, quality, ...otherProps }: ImageProps) {
-  const { src: thumborSrc, alt } = useImage({
-    src: String(src),
-    width: Number(width),
-    height: Number(height),
-    options: quality ? ({ filters: { quality } } as ThumborOptions) : undefined,
-    ...otherProps,
-  })
-
+function Image({ loading = 'lazy', ...otherProps }: ImageProps) {
   return (
     <NextImage
       data-fs-image
-      unoptimized
-      src={thumborSrc}
-      width={width}
-      height={height}
-      alt={alt}
+      loader={loader}
+      loading={loading}
+      priority={loading === 'eager'}
       {...otherProps}
     />
   )

package/src/components/ui/Image/loader.ts

@@ -0,0 +1,16 @@
+import storeConfig from 'faststore.config'
+const THUMBOR_SERVER = `https://${storeConfig.api.storeId}.vtexassets.com`
+
+export default function customImageLoader({ src, width, quality }) {
+  const preSizeComponents = [THUMBOR_SERVER, 'unsafe']
+
+  // proportional to the width, enter a height of 0,
+  const height = 0
+  const finalSize = `${width}x${height}`
+
+  const postSizeComponents: string[] = ['center', 'middle']
+  quality && postSizeComponents.push(`filters:quality(${quality || 80})`)
+  postSizeComponents.push(encodeURIComponent(src))
+
+  return [...preSizeComponents, finalSize, ...postSizeComponents].join('/')
+}

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

@@ -1,21 +1,15 @@
-import { useEffect, useState } from 'react'
 import {
-  ImageGallery as UIImageGallery,
   ImageElementData,
   ImageZoom,
+  ImageGallery as UIImageGallery,
 } from '@faststore/ui'
+import { useEffect, useState } from 'react'
 
-import { Image } from 'src/components/ui/Image'
 import { useRouter } from 'next/router'
+import { Image } from 'src/components/ui/Image'
 
 const ImageComponent = ({ url, alternateName }) => (
-  <Image
-    src={url}
-    alt={alternateName}
-    sizes="(max-width: 72px) 25vw, 30vw"
-    width={72}
-    height={72}
-  />
+  <Image src={url} alt={alternateName} width={68} height={68} />
 )
 
 export interface ImageGalleryProps {
@@ -41,11 +35,10 @@ const ImageGallery = ({ images, ...otherProps }: ImageGalleryProps) => {
         <Image
           src={currentImage.url}
           alt={currentImage.alternateName}
-          sizes="(max-width: 804px) 25vw, 30vw"
-          width={804}
-          height={804 * (3 / 4)}
+          sizes="(max-width: 768px) 25vw, 30vw"
+          width={691}
+          height={691 * (3 / 4)}
           loading="eager"
-          priority
         />
       </ImageZoom>
     </UIImageGallery>

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

@@ -1,12 +1,8 @@
-import { HTMLAttributes, useCallback, useMemo } from 'react'
+import { HTMLAttributes } from 'react'
 
-import { Image } from '../Image'
-import {
-  SkuSelector as UISkuSelector,
-  SkuSelectorProps,
-  SkuOption,
-} from '@faststore/ui'
+import { SkuSelectorProps, SkuSelector as UISkuSelector } from '@faststore/ui'
 import NextLink from 'next/link'
+import { Image } from '../Image'
 
 export type SkuVariantsByName = Record<
   string,
@@ -32,16 +28,7 @@ const ImageComponent: SkuSelectorProps['ImageComponent'] = ({
   src,
   alt,
   ...otherProps
-}) => (
-  <Image
-    src={src}
-    alt={alt}
-    width={20}
-    height={20}
-    loading="lazy"
-    {...otherProps}
-  />
-)
+}) => <Image src={src} alt={alt} width={34} height={34} {...otherProps} />
 
 function Selectors({
   slugsMap,

package/src/pages/404.tsx

@@ -1,6 +1,5 @@
 import { NextSeo } from 'next-seo'
 import { useRouter } from 'next/router'
-import { EmptyState as UIEmptyState, Icon as UIIcon } from '@faststore/ui'
 import GlobalSections, {
   GlobalSectionsData,
   getGlobalSectionsData,
@@ -8,6 +7,9 @@ import GlobalSections, {
 import { GetStaticProps } from 'next'
 import { Locator } from '@vtex/client-cms'
 
+import { Icon as UIIcon } from '@faststore/ui'
+import EmptyState from 'src/components/sections/EmptyState'
+
 const useErrorState = () => {
   const router = useRouter()
   const { from } = router.query
@@ -29,7 +31,7 @@ function Page({ globalSections }: Props) {
     <GlobalSections {...globalSections}>
       <NextSeo noindex nofollow />
 
-      <UIEmptyState
+      <EmptyState
         title="Not Found: 404"
         titleIcon={
           <UIIcon
@@ -39,10 +41,9 @@ function Page({ globalSections }: Props) {
             weight="thin"
           />
         }
-        bkgColor="light"
       >
         <p>This app could not find url {fromUrl}</p>
-      </UIEmptyState>
+      </EmptyState>
     </GlobalSections>
   )
 }

package/src/pages/500.tsx

@@ -7,6 +7,9 @@ import GlobalSections, {
   getGlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
 
+import { Icon as UIIcon } from '@faststore/ui'
+import EmptyState from 'src/components/sections/EmptyState'
+
 type Props = {
   globalSections: GlobalSectionsData
 }
@@ -28,12 +31,23 @@ function Page({ globalSections }: Props) {
     <GlobalSections {...globalSections}>
       <NextSeo noindex nofollow />
 
-      <h1>500</h1>
-      <h2>Internal Server Error</h2>
+      <EmptyState
+        title="500"
+        titleIcon={
+          <UIIcon
+            name="CircleWavyWarning"
+            width={56}
+            height={56}
+            weight="thin"
+          />
+        }
+      >
+        <h2>Internal Server Error</h2>
 
-      <div>
-        The server errored with id {errorId} when visiting page {fromUrl}
-      </div>
+        <div>
+          The server errored with id {errorId} when visiting page {fromUrl}
+        </div>
+      </EmptyState>
     </GlobalSections>
   )
 }

package/src/pages/[...slug].tsx

@@ -11,7 +11,6 @@ import { BreadcrumbJsonLd, NextSeo } from 'next-seo'
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
 
-import { Icon } from '@faststore/ui'
 import type {
   ServerCollectionPageQueryQuery,
   ServerCollectionPageQueryQueryVariables,

package/src/pages/login.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from 'react'
 import { NextSeo } from 'next-seo'
-import { EmptyState as UIEmptyState, Loader as UILoader } from '@faststore/ui'
 
 import storeConfig from '../../faststore.config'
 import GlobalSections, {
@@ -10,6 +9,9 @@ import GlobalSections, {
 import { GetStaticProps } from 'next'
 import { Locator } from '@vtex/client-cms'
 
+import { Loader as UILoader } from '@faststore/ui'
+import EmptyState from 'src/components/sections/EmptyState'
+
 type Props = {
   globalSections: GlobalSectionsData
 }
@@ -23,9 +25,9 @@ function Page({ globalSections }: Props) {
     <GlobalSections {...globalSections}>
       <NextSeo noindex nofollow />
 
-      <UIEmptyState title="Loading" bkgColor="light">
+      <EmptyState title="Loading">
         <UILoader />
-      </UIEmptyState>
+      </EmptyState>
     </GlobalSections>
   )
 }

package/src/utils/utilities.ts

@@ -0,0 +1,13 @@
+//Input "Example Text!". Output: example-text
+export function textToKebabCase(text: string): string {
+  // Replace spaces and special characters with hyphens
+  let kebabCase = text.replace(/[^\w\s]/gi, '-')
+
+  // Remove whitespace
+  kebabCase = kebabCase.replace(/\s+/g, '-')
+
+  // Convert to lowercase
+  kebabCase = kebabCase.toLowerCase()
+
+  return kebabCase ?? ''
+}

package/src/components/ui/Image/thumborUrlBuilder.ts

@@ -1,103 +0,0 @@
-import storeConfig from 'faststore.config'
-
-export type FilterValue = boolean | string | string[] | number[]
-
-export interface Box {
-  top: number
-  bottom: number
-  left: number
-  right: number
-}
-
-export interface ThumborOptions {
-  flipHorizontal?: boolean
-  flipVertical?: boolean
-  trim?: boolean
-  fitIn?: boolean
-  horizontalAlign?: 'left' | 'center' | 'right'
-  verticalAlign?: 'top' | 'middle' | 'bottom'
-  smart?: boolean
-  filters?: Record<string, FilterValue>
-  manualCrop?: Box | false
-}
-
-const THUMBOR_SERVER = `https://${storeConfig.api.storeId}.vtexassets.com`
-
-const cropSection = ({ left, top, right, bottom }: Box) =>
-  `${left}x${top}:${right}x${bottom}`
-
-function filtersURIComponent(filters: Record<string, FilterValue>) {
-  const elements = ['filters']
-
-  Object.keys(filters).forEach((name) => {
-    const parameters = filters[name]
-    let stringParameters
-
-    // If we have several parameters, they were passed as an array
-    // and now they need to be comma separated, otherwise there is just one to convert to a string
-    if (Array.isArray(parameters)) {
-      stringParameters = parameters.join(',')
-    }
-    // If true, we don't even need to do anything, we just have an empty string and insert ()
-    // Ex: {grayscale: true} => grayscale()
-    else if (parameters === true) {
-      stringParameters = ''
-    } else {
-      stringParameters = String(parameters)
-    }
-
-    elements.push(`${name}(${stringParameters})`)
-  })
-
-  return elements.join(':')
-}
-
-export const urlBuilder = (baseUrl: string, options: ThumborOptions) => {
-  const preSizeComponents = [THUMBOR_SERVER, 'unsafe']
-  const postSizeComponents: string[] = []
-
-  // Add the trim parameter after unsafe if appliable
-  options.trim && preSizeComponents.push('trim')
-
-  // Add the crop parameter if any
-  options.manualCrop && preSizeComponents.push(cropSection(options.manualCrop))
-
-  // Add the fit-in parameter after crop if appliable
-  options.fitIn && preSizeComponents.push('fit-in')
-
-  // Adds the horizontal alignement after the size
-  postSizeComponents.push(options.horizontalAlign ?? 'center')
-
-  // Adds the vertical alignement after the size
-  postSizeComponents.push(options.verticalAlign ?? 'middle')
-
-  // Adds the smart parameter if appliable
-  options.smart && postSizeComponents.push('smart')
-
-  // Compile the filters and add them right before the URI
-  const { filters } = options
-
-  filters && postSizeComponents.push(filtersURIComponent(filters))
-
-  // Finally, adds the real image uri
-  postSizeComponents.push(encodeURIComponent(baseUrl))
-
-  return (width: number, height: number) => {
-    // Adds the final size parameter
-    let finalSize = ''
-
-    if (options.flipHorizontal) {
-      finalSize += '-'
-    }
-
-    finalSize += `${width}x`
-
-    if (options.flipVertical) {
-      finalSize += '-'
-    }
-
-    finalSize += `${height}`
-
-    return [...preSizeComponents, finalSize, ...postSizeComponents].join('/')
-  }
-}

package/src/components/ui/Image/useImage.ts

@@ -1,46 +0,0 @@
-import { useMemo } from 'react'
-import type { ImgHTMLAttributes } from 'react'
-
-import { urlBuilder } from './thumborUrlBuilder'
-import type { ThumborOptions } from './thumborUrlBuilder'
-
-export interface ImageOptions extends ImgHTMLAttributes<HTMLImageElement> {
-  src: string
-  width: number
-  height: number
-  options?: ThumborOptions
-}
-
-const FACTORS = [1, 2, 3]
-const LARGE_FACTOR = FACTORS[FACTORS.length - 1]
-
-export const useImage = ({
-  src: baseUrl,
-  width,
-  height,
-  options = {},
-  ...rest
-}: ImageOptions): ImgHTMLAttributes<HTMLImageElement> => {
-  const { srcSet, src } = useMemo(() => {
-    const builder = urlBuilder(baseUrl, options)
-
-    const srcs = FACTORS.map((factor) => {
-      const rescaledWidth = width * factor
-
-      return `${builder(rescaledWidth, height * factor)} ${rescaledWidth}w`
-    })
-
-    return {
-      src: builder(width * LARGE_FACTOR, height * LARGE_FACTOR),
-      srcSet: srcs.join(', '),
-    }
-  }, [height, options, baseUrl, width])
-
-  return {
-    src,
-    srcSet,
-    width: `${width}px`,
-    height: `${height}px`,
-    ...rest,
-  }
-}