@faststore/core 0.3.14 → 0.3.16

package/.eslintrc.json

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

package/CHANGELOG.md

@@ -5,6 +5,25 @@ 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.16](https://github.com/vtex-sites/nextjs.store/compare/0.3.15...0.3.16) (2023-01-09)
+
+
+### Chores
+
+* Replace `Table` using FSUI ([#341](https://github.com/vtex-sites/nextjs.store/issues/341)) ([cccf3d5](https://github.com/vtex-sites/nextjs.store/commit/cccf3d5cb1fccc1440b2b019ebc06ddc474fb25f))
+
+### 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.16",
   "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.37-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/sections/ProducDetailsContent/ProductDetailsContent.tsx

@@ -11,7 +11,6 @@ import {
 import Accordion, { AccordionItem } from 'src/components/ui/Accordion'
 import Icon from 'src/components/ui/Icon'
 
-import styles from './product-details-content.module.scss'
 import Section from '../Section'
 
 interface ArticleLabels {
@@ -100,10 +99,7 @@ function ProductDetailsContent({
   const labels = { ...DEFAULT_LABELS, ...propLabels }
 
   return (
-    <Section
-      className={styles.fsProductDetailsContent}
-      data-fs-product-details-content
-    >
+    <Section data-fs-product-details-content>
       <Accordion
         expandedIndices={indices}
         onChange={onChange}
@@ -141,47 +137,49 @@ function ProductDetailsContent({
           >
             <UITableBody>
               <UITableRow>
-                <UITableCell variant="header">
+                <UITableCell variant="header" align="left">
                   <UIIcon
                     data-fs-accordion-item-button-icon
                     component={<Icon name="Ruler" width={18} height={18} />}
                   />
                   <span>Width</span>
                 </UITableCell>
-                <UITableCell>1.50m</UITableCell>
+                <UITableCell align="right">1.50m</UITableCell>
               </UITableRow>
               <UITableRow>
-                <UITableCell variant="header">
+                <UITableCell variant="header" align="left">
                   <UIIcon
                     data-fs-accordion-item-button-icon
                     component={<Icon name="Ruler" width={18} height={18} />}
                   />
                   Height
                 </UITableCell>
-                <UITableCell>1.50m</UITableCell>
+                <UITableCell align="right">1.50m</UITableCell>
               </UITableRow>
               <UITableRow>
-                <UITableCell variant="header">
+                <UITableCell variant="header" align="left">
                   <UIIcon
                     data-fs-accordion-item-button-icon
                     component={<Icon name="Ruler" width={18} height={18} />}
                   />
                   Dimensions
                 </UITableCell>
-                <UITableCell>7.27 x 3.03 x 9.94 inches</UITableCell>
+                <UITableCell align="right">
+                  7.27 x 3.03 x 9.94 inches
+                </UITableCell>
               </UITableRow>
               <UITableRow>
-                <UITableCell variant="header">
+                <UITableCell variant="header" align="left">
                   <UIIcon
                     data-fs-accordion-item-button-icon
                     component={<Icon name="Bag" width={18} height={18} />}
                   />
                   Weight
                 </UITableCell>
-                <UITableCell>12oz</UITableCell>
+                <UITableCell align="right">12oz</UITableCell>
               </UITableRow>
               <UITableRow>
-                <UITableCell variant="header">
+                <UITableCell variant="header" align="left">
                   <UIIcon
                     data-fs-accordion-item-button-icon
                     component={
@@ -190,10 +188,10 @@ function ProductDetailsContent({
                   />
                   Days to ship
                 </UITableCell>
-                <UITableCell>11 Days</UITableCell>
+                <UITableCell align="right">11 Days</UITableCell>
               </UITableRow>
               <UITableRow>
-                <UITableCell variant="header">
+                <UITableCell variant="header" align="left">
                   <UIIcon
                     data-fs-accordion-item-button-icon
                     component={
@@ -202,7 +200,7 @@ function ProductDetailsContent({
                   />
                   Estimated
                 </UITableCell>
-                <UITableCell>Nov 10th</UITableCell>
+                <UITableCell align="right">Nov 10th</UITableCell>
               </UITableRow>
             </UITableBody>
           </UITable>

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/ShippingSimulation.stories.mdx

@@ -111,30 +111,3 @@ The `ShippingSimulation` component uses [FastStore UI Table](https://www.faststo
     value="var(--fs-spacing-2)"
   />
 </TokenTable>
-
-### Table
-
-<TokenTable>
-  <TokenRow
-    token="--fs-shipping-simulation-table-row-bkg-color"
-    value="var(--fs-color-main-0)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-shipping-simulation-table-row-even-bkg-color"
-    value="transparent"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-shipping-simulation-table-cell-padding"
-    value="var(--fs-spacing-2)"
-  />
-  <TokenRow
-    token="--fs-shipping-simulation-table-cell-text-size"
-    value="var(--fs-text-size-2)"
-  />
-  <TokenRow
-    token="--fs-shipping-simulation-table-cell-border-radius"
-    value="var(--fs-border-radius)"
-  />
-</TokenTable>

package/src/components/ui/ShippingSimulation/ShippingSimulation.tsx

@@ -73,7 +73,7 @@ function ShippingSimulation({
         displayClearButton={displayClearButton}
       />
 
-      <Link href="/" data-fs-shipping-simulation-link>
+      <Link href="/" data-fs-shipping-simulation-link size="small">
         {"I don't know my Postal Code"}
         <Icon name="ArrowSquareOut" width={18} height={18} />
       </Link>
@@ -87,20 +87,13 @@ function ShippingSimulation({
             </p>
           </header>
 
-          <Table data-fs-shipping-simulation-table>
+          <Table>
             <TableBody>
               {shippingOptions.map((option) => (
-                <TableRow
-                  key={option.carrier}
-                  data-fs-shipping-simulation-table-row
-                >
-                  <TableCell data-fs-shipping-simulation-table-cell>
-                    {option.carrier}
-                  </TableCell>
-                  <TableCell data-fs-shipping-simulation-table-cell>
-                    {option.localizedEstimates}
-                  </TableCell>
-                  <TableCell data-fs-shipping-simulation-table-cell>
+                <TableRow key={option.carrier}>
+                  <TableCell align="left">{option.carrier}</TableCell>
+                  <TableCell>{option.localizedEstimates}</TableCell>
+                  <TableCell align="right">
                     {option.price && (
                       <Price
                         formatter={formatter}

package/src/components/ui/ShippingSimulation/shipping-simulation.module.scss

@@ -23,20 +23,10 @@
   // Location
   --fs-shipping-simulation-location-padding-bottom  : var(--fs-spacing-2);
 
-  // Table
-  --fs-shipping-simulation-table-row-bkg-color      : var(--fs-color-main-0);
-  --fs-shipping-simulation-table-row-even-bkg-color : transparent;
-
-  --fs-shipping-simulation-table-cell-padding       : var(--fs-spacing-2);
-  --fs-shipping-simulation-table-cell-text-size     : var(--fs-text-size-2);
-  --fs-shipping-simulation-table-cell-border-radius : var(--fs-border-radius);
-
   // --------------------------------------------------------
   // Structural Styles
   // --------------------------------------------------------
 
-  font-size: var(--fs-shipping-simulation-text-size);
-
   [data-fs-shipping-simulation-title] {
     padding-bottom: var(--fs-shipping-simulation-title-padding-bottom);
   }
@@ -64,33 +54,4 @@
   [data-fs-shipping-simulation-location] {
     padding-bottom: var(--fs-shipping-simulation-location-padding-bottom);
   }
-
-  [data-fs-shipping-simulation-table] {
-    width: 100%;
-    border-collapse: collapse;
-  }
-
-  [data-fs-shipping-simulation-table-row] {
-    background-color: var(--fs-shipping-simulation-table-row-bkg-color);
-
-    &:nth-child(even) {
-      background-color: var(--fs-shipping-simulation-table-row-even-bkg-color);
-    }
-  }
-
-  [data-fs-shipping-simulation-table-cell] {
-    padding: var(--fs-shipping-simulation-table-cell-padding);
-    font-size: var(--fs-shipping-simulation-table-cell-text-size);
-
-    &:first-child {
-      border-top-left-radius: var(--fs-shipping-simulation-table-cell-border-radius);
-      border-bottom-left-radius: var(--fs-shipping-simulation-table-cell-border-radius);
-    }
-
-    &:last-child {
-      text-align: right;
-      border-top-right-radius: var(--fs-shipping-simulation-table-cell-border-radius);
-      border-bottom-right-radius: var(--fs-shipping-simulation-table-cell-border-radius);
-    }
-  }
 }