@faststore/core 0.3.14 → 0.3.15

package/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

package/CHANGELOG.md

@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Conventional Changelog](https://github.com/conventional-changelog/conventional-changelog),
 and this project adheres to [Calendar Versioning](https://calver.org/).
 
+### 0.3.15 (2023-01-03)
+
+
+### Features
+
+* Replaces SROnly & Toggle & ToggleField FSUI ([#335](https://github.com/vtex-sites/nextjs.store/issues/335)) ([b096874](https://github.com/vtex-sites/nextjs.store/commit/b096874cae5e24fb4bfbdfd612f6bcc1f2f6bb25))
+
+
+### Chores
+
+* Replaces `Hero` FSUI ([#324](https://github.com/vtex-sites/nextjs.store/issues/324)) ([ff40590](https://github.com/vtex-sites/nextjs.store/commit/ff40590e07716ab5d1a2b2020d9b668f73b24c90))
+
 ### [0.3.14](https://github.com/vtex-sites/nextjs.store/compare/0.3.13...0.3.14) (2022-12-19)
 
 

package/README.md

@@ -1,4 +1,4 @@
-<p align="center">
+<p align="center">    
   <a href="https://github.com/vtex/faststore">
     <img alt="Store Framework" src="https://emoji.slack-edge.com/T02BCPD0X/store-framework/7547b127e929c376.png" width="75" />
   </a>

package/cypress/integration/analytics.test.js

@@ -73,6 +73,8 @@ describe('add_to_cart event', () => {
 
       // Add to cart
       cy.getById('buy-button')
+        .should('be.visible')
+        .scrollIntoView({ duration: 500 })
         .click()
         .then(($btn) => {
           cy.itemsInCart(1)
@@ -92,6 +94,8 @@ describe('add_to_cart event', () => {
 
       // Add to cart
       cy.getById('buy-button')
+        .should('be.visible')
+        .scrollIntoView({ duration: 500 })
         .click()
         .then(($btn) => {
           cy.itemsInCart(1)
@@ -143,7 +147,7 @@ describe('remove_from_cart event', () => {
 
   context('when removing a product from cart', () => {
     beforeEach(() => {
-      cy.getById('remove-from-cart-button').click()
+      cy.getById('remove-from-cart-button').should('be.visible').click()
     })
 
     it('adds remove_from_cart event in the data layer', () => {
@@ -154,10 +158,14 @@ describe('remove_from_cart event', () => {
 
       // Add item to cart
       cy.getById('buy-button')
+        .should('be.visible')
+        .scrollIntoView({ duration: 500 })
         .click()
         .then(() => {
           cy.itemsInCart(1)
-          cy.getById('checkout-button').should('be.enabled')
+          cy.getById('checkout-button')
+            .should('be.visible')
+            .should('be.enabled')
           cy.itemsInCart(1)
 
           // Remove the added item
@@ -189,10 +197,14 @@ describe('remove_from_cart event', () => {
         .click()
         .then(() => {
           cy.getById('buy-button')
+            .should('be.visible')
+            .scrollIntoView({ duration: 500 })
             .click()
             .then(($btn) => {
               cy.itemsInCart(2)
-              cy.getById('checkout-button').should('be.enabled')
+              cy.getById('checkout-button')
+                .should('be.visible')
+                .should('be.enabled')
               cy.itemsInCart(2)
 
               // Remove the added item
@@ -202,7 +214,9 @@ describe('remove_from_cart event', () => {
                 .click()
                 .then(() => {
                   cy.itemsInCart(1)
-                  cy.getById('checkout-button').should('be.enabled')
+                  cy.getById('checkout-button')
+                    .should('be.visible')
+                    .should('be.enabled')
                   cy.itemsInCart(1)
                   const skuId = $btn.attr('data-sku')
 
@@ -242,6 +256,8 @@ describe('select_item event', () => {
 
     cy.getById('store-product-card').first().click()
     cy.getById('buy-button')
+      .should('be.visible')
+      .scrollIntoView({ duration: 500 })
       .then(($btn) => {
         skuId = $btn.attr('data-sku')
       })
@@ -364,7 +380,10 @@ describe('view_cart event', () => {
     cy.visit(pages.pdp, options)
     cy.waitForHydration()
 
-    cy.getById('buy-button').click()
+    cy.getById('buy-button')
+      .should('be.visible')
+      .scrollIntoView({ duration: 500 })
+      .click()
     cy.getById('cart-sidebar').should('be.visible')
 
     dataLayerHasEvent('view_cart')

package/cypress/integration/cart.test.js

@@ -63,7 +63,9 @@ describe('On product description pages', () => {
           const sellerId = $btn.attr('data-seller')
 
           // Wait for optimistic cart to kick in
-          cy.getById('checkout-button').should('be.enabled')
+          cy.getById('checkout-button')
+            .should('be.visible')
+            .should('be.enabled')
 
           cy.getById('cart-item').should(($item) => {
             expect($item.attr('data-sku')).to.eq(skuId)
@@ -86,7 +88,7 @@ describe('On product description pages', () => {
 
       cy.itemsInCart(1)
 
-      cy.getById('checkout-button').should('be.enabled')
+      cy.getById('checkout-button').should('be.visible').should('be.enabled')
 
       cy.itemsInCart(1)
 

package/cypress/integration/plp.test.js

@@ -211,7 +211,7 @@ describe('Infinite Scroll pagination', () => {
 
     cy.getById('show-more').should('exist').click()
 
-    cy.scrollTo('top')
+    cy.scrollTo('top', { duration: 500 })
       .location('search')
       .should('match', /page=0$/)
 

package/cypress/integration/search.test.js

@@ -21,9 +21,14 @@ describe('Search input', () => {
       cy.visit(pages.home, options)
       cy.waitForHydration()
 
-      cy.getById('store-input-mobile-button').click({ force: true })
+      cy.getById('store-input-mobile-button')
+        .should('exist')
+        .scrollIntoView({ duration: 500 })
+        .click({ force: true })
 
       cy.getById('store-input-mobile')
+        .should('exist')
+        .scrollIntoView({ duration: 500 })
         .click()
         .type(term)
         .within(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "0.3.14",
+  "version": "0.3.15",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -12,7 +12,7 @@
     "test": "cypress open",
     "lhci": "lhci autorun",
     "format": "prettier --write \"**/*.{ts,js,tsx,jsx,json}\"",
-    "lint": "eslint --ext js,ts,jsx,tsx .",
+    "lint": "next lint",
     "stylelint": "stylelint \"**/*.scss\"",
     "stylelint:fix": "stylelint \"**/*.scss\" --fix",
     "postinstall": "node postinstall.js && (is-ci || husky install) || echo Skipped postinstall step for @faststore/core",
@@ -31,18 +31,15 @@
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
     "@faststore/api": "^2.0.3-alpha.0",
-    "@faststore/components": "^2.0.18-alpha.0",
+    "@faststore/components": "2.0.30-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.3-alpha.0",
-    "@faststore/ui": "^2.0.17-alpha.0",
+    "@faststore/ui": "2.0.30-alpha.0",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
     "chalk": "^5.2.0",
     "css-loader": "^6.7.1",
-    "eslint": "^7.22.0",
-    "eslint-config-next": "12.1.5",
-    "eslint-config-vtex-react": "^9.0.0",
     "graphql": "^15.0.0",
     "include-media": "^1.4.10",
     "msw": "^0.43.1",
@@ -83,6 +80,8 @@
     "cypress-axe": "^0.13.0",
     "cypress-wait-until": "^1.7.2",
     "dotenv": "^8.2.0",
+    "eslint": "^8.30.0",
+    "eslint-config-next": "^13.0.7",
     "husky": "^5.2.0",
     "is-ci": "^3.0.0",
     "lint-staged": "^10.5.4",

package/src/components/cms/RenderPageSections.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import chalk from 'chalk'
 import type { ComponentType } from 'react'
 

package/src/components/common/Footer/Footer.tsx

@@ -1,13 +1,13 @@
 import {
   List as UIList,
   PaymentMethods as UIPaymentMethods,
+  SROnly as UISROnly,
 } from '@faststore/ui'
 
 import Logo from 'src/components/ui/Logo'
 import IncentivesFooter from 'src/components/sections/Incentives/IncentivesFooter'
 import Icon from 'src/components/ui/Icon'
 import Link from 'src/components/ui/Link'
-import SROnly from 'src/components/ui/SROnly'
 import { mark } from 'src/sdk/tests/mark'
 
 import styles from './footer.module.scss'
@@ -112,35 +112,35 @@ export function Footer({
             <UIList>
               <li>
                 <Icon width="34px" height="24px" name="Visa" />
-                <SROnly text="Visa" />
+                <UISROnly text="Visa" />
               </li>
               <li>
                 <Icon width="34px" height="24px" name="Diners" />
-                <SROnly text="Diners Club" />
+                <UISROnly text="Diners Club" />
               </li>
               <li>
                 <Icon width="34px" height="24px" name="Mastercard" />
-                <SROnly text="Mastercard" />
+                <UISROnly text="Mastercard" />
               </li>
               <li>
                 <Icon width="34px" height="24px" name="EloCard" />
-                <SROnly text="Elo Card" />
+                <UISROnly text="Elo Card" />
               </li>
               <li>
                 <Icon width="34px" height="24px" name="PayPal" />
-                <SROnly text="PayPal" />
+                <UISROnly text="PayPal" />
               </li>
               <li>
                 <Icon width="34px" height="24px" name="Stripe" />
-                <SROnly text="Stripe" />
+                <UISROnly text="Stripe" />
               </li>
               <li>
                 <Icon width="34px" height="24px" name="GooglePay" />
-                <SROnly text="Google Pay" />
+                <UISROnly text="Google Pay" />
               </li>
               <li>
                 <Icon width="34px" height="24px" name="ApplePay" />
-                <SROnly text="Apple Pay" />
+                <UISROnly text="Apple Pay" />
               </li>
             </UIList>
           </UIPaymentMethods>

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

@@ -1,78 +1,43 @@
-import type { ReactNode } from 'react'
+import type {
+  HeroHeadingProps as UIHeroHeadingProps,
+  HeroImageProps as UIHeroImageProps,
+  HeroProps as UIHeroProps,
+} from '@faststore/ui'
 import {
   Hero as UIHero,
   HeroHeading as UIHeroHeading,
   HeroImage as UIHeroImage,
-  LinkButton as UILinkButton,
 } from '@faststore/ui'
 
-import Icon from 'src/components/ui/Icon'
-import Image from 'src/components/ui/Image/Image'
+import { Image } from 'src/components/ui/Image'
 
 import Section from '../Section'
-import styles from './hero.module.scss'
-
-type Variant = 'primary' | 'secondary'
-type ColorVariant = 'main' | 'light' | 'accent'
 
-export interface HeroProps {
-  /**
-   * Content for the h1 tag.
-   */
-  title: string
-  /**
-   * Content for the p tag.
-   */
-  subtitle: string
-  /**
-   * Specifies the component variant.
-   */
-  variant?: Variant
-  /**
-   * Specifies the component's color variant combination.
-   */
-  colorVariant?: ColorVariant
-  /**
-   * Specifies the URL the action button goes to.
-   */
-  link?: string
-  /**
-   * Specifies the action button's content.
-   */
-  linkText?: string
-  /**
-   * Icon component for additional customization.
-   */
-  icon?: ReactNode
-  /**
-   * Specifies the image URL.
-   */
-  imageSrc: string
-  /**
-   * Alternative description of the image.
-   */
-  imageAlt: string
-}
+export type HeroProps = UIHeroProps &
+  UIHeroHeadingProps &
+  UIHeroImageProps & {
+    /**
+     * Specifies the image URL.
+     */
+    imageSrc: string
+    /**
+     * Alternative description of the image.
+     */
+    imageAlt: string
+  }
 
 const Hero = ({
+  icon,
+  link,
   title,
   subtitle,
-  variant = 'primary',
-  colorVariant = 'main',
   linkText,
-  link,
-  icon,
   imageAlt,
   imageSrc,
 }: HeroProps) => {
   return (
     <Section>
-      <UIHero
-        className={styles.fsHero}
-        data-fs-hero
-        data-fs-hero-variant={variant}
-        data-fs-hero-color-variant={colorVariant}
-      >
+      <UIHero>
         <UIHeroImage data-fs-hero-image>
           <Image
             preload
@@ -85,27 +50,13 @@ const Hero = ({
             sizes="(max-width: 768px) 70vw, 50vw"
           />
         </UIHeroImage>
-        <UIHeroHeading data-fs-hero-heading aria-labelledby="hero-heading">
-          <div data-fs-hero-wrapper className="layout__content">
-            <div data-fs-hero-info>
-              <h1 data-fs-hero-title>{title}</h1>
-              <p data-fs-hero-subtitle>{subtitle}</p>
-              {!!link && (
-                <UILinkButton
-                  href={link}
-                  inverse={colorVariant === 'main'}
-                  icon={<Icon name="ArrowRight" width={24} height={24} />}
-                  iconPosition="right"
-                >
-                  {linkText}
-                </UILinkButton>
-              )}
-            </div>
-            {icon && variant === 'secondary' && (
-              <div data-fs-hero-icon>{icon}</div>
-            )}
-          </div>
-        </UIHeroHeading>
+        <UIHeroHeading
+          title={title}
+          subtitle={subtitle}
+          link={link}
+          linkText={linkText}
+          icon={icon}
+        />
       </UIHero>
     </Section>
   )

package/src/components/ui/Price/Price.tsx

@@ -1,8 +1,7 @@
-import { Price as UIPrice } from '@faststore/ui'
+import { Price as UIPrice, SROnly as UISROnly } from '@faststore/ui'
 import { memo } from 'react'
 import type { PriceProps } from '@faststore/ui'
 
-import SROnly from '../SROnly'
 import styles from './price.module.scss'
 
 type Props = PriceProps & {
@@ -19,7 +18,7 @@ type Props = PriceProps & {
 function Price({ classes = '', SRText, ...props }: Props) {
   return (
     <>
-      <SROnly text={SRText} />
+      <UISROnly text={SRText} />
       <UIPrice
         data-fs-price
         className={`${styles.fsPrice} ${classes}`}

package/src/components/ui/ShippingSimulation/useShippingSimulation.ts

@@ -196,7 +196,7 @@ export const useShippingSimulation = (shippingItem: IShippingItem) => {
         },
       })
     }
-  }, [shippingPostalCode])
+  }, [country, shippingItem, shippingPostalCode])
 
   const handleOnInput = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     const currentValue = e.currentTarget.value

package/src/customizations/components/index.ts

@@ -1 +1,2 @@
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {}

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

@@ -1,16 +1,20 @@
 import { isNotFoundError } from '@faststore/api'
+import { gql } from '@faststore/graphql-utils'
+import type { SearchState } from '@faststore/sdk'
 import {
   formatSearchState,
   parseSearchState,
   SearchProvider,
 } from '@faststore/sdk'
-import { gql } from '@faststore/graphql-utils'
+import type { GetStaticPaths, GetStaticProps } from 'next'
 import { BreadcrumbJsonLd, NextSeo } from 'next-seo'
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
-import type { SearchState } from '@faststore/sdk'
-import type { GetStaticPaths, GetStaticProps } from 'next'
 
+import type {
+  ServerCollectionPageQueryQuery,
+  ServerCollectionPageQueryQueryVariables,
+} from '@generated/graphql'
 import Breadcrumb from 'src/components/sections/Breadcrumb'
 import Hero from 'src/components/sections/Hero'
 import ProductGallery from 'src/components/sections/ProductGallery'
@@ -21,10 +25,6 @@ import { ITEMS_PER_PAGE, ITEMS_PER_SECTION } from 'src/constants'
 import { useApplySearchState } from 'src/sdk/search/state'
 import { mark } from 'src/sdk/tests/mark'
 import { execute } from 'src/server'
-import type {
-  ServerCollectionPageQueryQuery,
-  ServerCollectionPageQueryQueryVariables,
-} from '@generated/graphql'
 
 import storeConfig from '../../faststore.config'
 
@@ -105,7 +105,7 @@ function Page(props: Props) {
         subtitle={`All the amazing ${title} from the brands we partner with.`}
         imageSrc="https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg"
         imageAlt="Quest 2 Controller on a table"
-        icon={<Icon name="Headphones" width={48} height={48} weight="thin" />}
+        icon={<Icon name="Headphones" width={48} height={48} />}
       />
 
       <ProductGallery title={title} />

package/src/pages/s.tsx

@@ -3,10 +3,10 @@ import { NextSeo } from 'next-seo'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import type { SearchState } from '@faststore/sdk'
+import { SROnly as UISROnly } from '@faststore/ui'
 
 import Breadcrumb from 'src/components/sections/Breadcrumb'
 import ProductGallery from 'src/components/sections/ProductGallery'
-import SROnly from 'src/components/ui/SROnly'
 import { ITEMS_PER_PAGE } from 'src/constants'
 import { useApplySearchState } from 'src/sdk/search/state'
 import { mark } from 'src/sdk/tests/mark'
@@ -55,7 +55,7 @@ function Page() {
         }}
       />
 
-      <SROnly as="h1" text={title} />
+      <UISROnly as="h1" text={title} />
 
       {/*
         WARNING: Do not import or render components from any

package/src/sdk/error/ErrorBoundary/ErrorBoundary.tsx

@@ -27,7 +27,6 @@ class ErrorBoundary extends Component<{ children: ReactNode }> {
 
   // We can't accurately type the error here, since it could vary depending on
   // what caused it. This is not standardized.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public componentDidCatch(error: any, errorInfo: ErrorInfo) {
     console.error(`React Error: ${error.message} ${errorInfo.componentStack}`)
 

package/src/sdk/ui/useOnClickOutside.ts

@@ -1,7 +1,6 @@
 import type { RefObject } from 'react'
 import { useEffect } from 'react'
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Handler = (event: any) => void
 
 export default function useOnClickOutside<T extends HTMLElement = HTMLElement>(

package/src/server/cms.ts

@@ -15,7 +15,6 @@ type Options =
       filters?: Record<string, string>
     }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const isLocator = (x: any): x is Locator =>
   typeof x.contentType === 'string' &&
   (typeof x.releaseId === 'string' || typeof x.documentId === 'string')

package/vtex.env

@@ -5,10 +5,10 @@ NEXT_TELEMETRY_DISABLED=true
 ## Enable re-using node_modules from previous runs for faster builds
 USE_BUILD_CACHE=true
 
-## Enable Incremental Static Builds (ISB): 
+## Enable Incremental Static Builds (ISB):
 ## https://www.faststore.dev/releases/2022/05/19/webops
 USE_STALE_CACHE=true
 
-## Production site host your users will 
+## Production site host your users will
 ## access your website
 SITE_HOST=demo.faststore.dev

package/.eslintignore

@@ -1,8 +0,0 @@
-package.json
-node_modules/
-public/
-coverage/
-.vscode/
-.cache/
-@generated
-src/typings/

package/.eslintrc

@@ -1,21 +0,0 @@
-{
-  "extends": [
-    "vtex-react/gatsby",
-    "next/core-web-vitals"
-  ],
-  "root": true,
-  "rules": {
-    "react/prop-types": "off",
-    "react/react-in-jsx-scope": "off",
-    "jsx-a11y/anchor-is-valid": "off"
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "ignorePatterns": [
-    "public/~partytown/*",
-    "next-env.d.ts"
-  ]
-}

package/renovate.json

@@ -1,5 +0,0 @@
-{
-  "extends": [
-    "@vtex"
-  ]
-}