@faststore/core 0.3.17 → 2.0.65-alpha.0

package/README.md

@@ -63,7 +63,7 @@ As of Sep, 2022, this starter is still far from covering most basic cases found
    Navigate into your new site’s directory and start it up.
 
    ```shell
-   yarn develop
+   yarn dev
    ```
 
 4. **Open the source code and start editing!**
@@ -382,7 +382,7 @@ We use [graphql-codegen](https://www.graphql-code-generator.com/) to pre-process
 This means we can statically analyse your code in search of bugs and secure your graphql server before each deploy. If, however you need to change any GraphQL Fragment, Query or Mutation, you will need to regenerate the whole thing. To do this, open your terminal and type
 
 ```sh
-$ yarn develop
+$ yarn dev
 ```
 
 Now, after the nextjs development server is up and running, open another terminal and run

package/cypress/integration/analytics.test.js

@@ -104,7 +104,7 @@ describe('add_to_cart event', () => {
           testAddToCartEvent({ skuId, numberOfEvents: 1 })
 
           cy.get(
-            '[data-testid=cart-item] [data-testid=fs-quantity-selector-right-button]'
+            '[data-testid=fs-cart-item] [data-testid=fs-quantity-selector-right-button]'
           )
             .click()
             .then(() => {
@@ -209,7 +209,7 @@ describe('remove_from_cart event', () => {
 
               // Remove the added item
               cy.get(
-                '[data-testid=cart-item] [data-testid=fs-quantity-selector-left-button]'
+                '[data-testid=fs-cart-item] [data-testid=fs-quantity-selector-left-button]'
               )
                 .click()
                 .then(() => {
@@ -254,7 +254,7 @@ describe('select_item event', () => {
 
     let skuId
 
-    cy.getById('store-product-card').first().click()
+    cy.getById('fs-product-card').first().click()
     cy.getById('buy-button')
       .should('be.visible')
       .scrollIntoView({ duration: 500 })

package/cypress/integration/cart.test.js

@@ -67,7 +67,7 @@ describe('On product description pages', () => {
             .should('be.visible')
             .should('be.enabled')
 
-          cy.getById('cart-item').should(($item) => {
+          cy.getById('fs-cart-item').should(($item) => {
             expect($item.attr('data-sku')).to.eq(skuId)
             expect($item.attr('data-seller')).to.eq(sellerId)
           })
@@ -93,7 +93,7 @@ describe('On product description pages', () => {
       cy.itemsInCart(1)
 
       cy.getById('remove-from-cart-button').click()
-      cy.getById('cart-item').should('not.exist')
+      cy.getById('fs-cart-item').should('not.exist')
       cy.getById('checkout-button').should('not.exist')
 
       cy.itemsInCart(0)

package/cypress/integration/plp.test.js

@@ -117,7 +117,7 @@ describe('Infinite Scroll pagination', () => {
     cy.waitForHydration()
 
     cy.getById('product-gallery').within(() => {
-      cy.getById('store-product-card')
+      cy.getById('fs-product-card')
         .should('exist')
         .should('have.length.gt', 0)
         .then(($links) => {
@@ -127,7 +127,7 @@ describe('Infinite Scroll pagination', () => {
             .should('exist')
             .click()
             .then(() => {
-              cy.getById('store-product-card')
+              cy.getById('fs-product-card')
                 .should('have.length.gte', before)
                 .then(($products) => {
                   const after = $products.length
@@ -143,7 +143,7 @@ describe('Infinite Scroll pagination', () => {
     cy.visit(pages.collection, options)
     cy.waitForHydration()
 
-    cy.get('[data-testid=product-gallery] [data-testid=store-product-card]')
+    cy.get('[data-testid=product-gallery] [data-testid=fs-product-card]')
       .should('exist')
       .should('have.length.gt', 0)
       .then(($links) => {
@@ -154,12 +154,12 @@ describe('Infinite Scroll pagination', () => {
           .should('exist')
           .click()
           // Go up the page
-          .get('[data-testid=product-gallery] [data-testid=store-product-card]')
+          .get('[data-testid=product-gallery] [data-testid=fs-product-card]')
           .first()
           .scrollIntoView({ duration: 1000 })
 
           // Go down the page
-          .get('[data-testid=product-gallery] [data-testid=store-product-card]')
+          .get('[data-testid=product-gallery] [data-testid=fs-product-card]')
           .last()
           .scrollIntoView({ duration: 1000 })
           .then(() => {
@@ -170,7 +170,7 @@ describe('Infinite Scroll pagination', () => {
             let skuIdBeforeNavigate
 
             cy.get(
-              '[data-testid=product-gallery] [data-testid=store-product-card]'
+              '[data-testid=product-gallery] [data-testid=fs-product-card]'
             )
               // Number of products after showMore is clicked should be higher
               .should('have.length.gte', before)
@@ -188,7 +188,7 @@ describe('Infinite Scroll pagination', () => {
               .then(() => {
                 cy.go('back')
                   .get(
-                    '[data-testid=product-gallery] [data-testid=store-product-card]'
+                    '[data-testid=product-gallery] [data-testid=fs-product-card]'
                   )
                   .last()
                   .then(($card) => {
@@ -215,7 +215,7 @@ describe('Infinite Scroll pagination', () => {
       .location('search')
       .should('match', /page=0$/)
 
-    cy.get('[data-testid=product-gallery] [data-testid=store-product-card]')
+    cy.get('[data-testid=product-gallery] [data-testid=fs-product-card]')
       .last()
       .scrollIntoView({ duration: 1000 })
       .location('search')

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@faststore/core",
-  "version": "0.3.17",
+  "version": "2.0.65-alpha.0",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
     "generate": "graphql-codegen",
     "build": "yarn partytown && next build",
-    "develop": "yarn partytown && next dev",
+    "dev": "yarn partytown && next dev",
     "clean": "rm -r .next",
     "serve": "next start",
     "test": "cypress open",
@@ -18,8 +18,7 @@
     "postinstall": "node postinstall.js && (is-ci || husky install) || echo Skipped postinstall step for @faststore/core",
     "partytown": "partytown copylib ./public/~partytown",
     "storybook": "start-storybook --docs -p 6006",
-    "build-storybook": "build-storybook",
-    "release": "release-it --ci"
+    "build-storybook": "build-storybook"
   },
   "engines": {
     "node": ">=14"
@@ -31,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.54-alpha.0",
+    "@faststore/components": "^2.0.65-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.3-alpha.0",
-    "@faststore/ui": "^2.0.54-alpha.0",
+    "@faststore/ui": "^2.0.65-alpha.0",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
@@ -59,6 +58,7 @@
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.10",
+    "@faststore/eslint-config": "*",
     "@faststore/lighthouse": "^1.12.32",
     "@graphql-codegen/cli": "^2.6.2",
     "@graphql-codegen/typescript": "^2.5.1",
@@ -81,13 +81,11 @@
     "cypress-wait-until": "^1.7.2",
     "dotenv": "^8.2.0",
     "eslint": "^7.32.0",
-    "eslint-config-next": "^13.0.7",
     "husky": "^5.2.0",
     "is-ci": "^3.0.0",
     "lint-staged": "^10.5.4",
     "msw-storybook-addon": "^1.6.3",
     "prettier": "^2.2.0",
-    "release-it": "^15.2.0",
     "stylelint": "^14.6.0",
     "stylelint-config-recess-order": "^3.0.0",
     "stylelint-config-standard": "^24.0.0",
@@ -109,5 +107,6 @@
   },
   "msw": {
     "workerDirectory": "public"
-  }
+  },
+  "gitHead": "05c8f7f46e876406fcae355dbeff243bbf2e1e25"
 }

package/src/Layout.tsx

@@ -6,8 +6,8 @@ import Footer from 'src/components/common/Footer'
 import Navbar from 'src/components/common/Navbar'
 import Toast from 'src/components/common/Toast'
 import RegionalizationBar from 'src/components/regionalization/RegionalizationBar'
-import { useUI } from 'src/sdk/ui/Provider'
 import Icon from 'src/components/ui/Icon'
+import { useUI } from '@faststore/ui'
 
 const CartSidebar = lazy(() => import('src/components/cart/CartSidebar'))
 const RegionModal = lazy(

package/src/components/cart/CartItem/CartItem.tsx

@@ -1,14 +1,8 @@
 import { sendAnalyticsEvent } from '@faststore/sdk'
 import {
   CartItem as UICartItem,
-  CartItemActions as UICartItemActions,
-  CartItemSummary as UICartItemSummary,
-  CartItemTitle as UICartItemTitle,
-  CartItemPrices as UICartItemPrices,
-  CartItemContent as UICartItemContent,
   CartItemImage as UICartItemImage,
-  Button as UIButton,
-  QuantitySelector as UIQuantitySelector,
+  CartItemSummary as UICartItemSummary,
 } from '@faststore/ui'
 import { useCallback, useMemo } from 'react'
 import type {
@@ -17,18 +11,14 @@ import type {
   RemoveFromCartEvent,
 } from '@faststore/sdk'
 
-import Icon from 'src/components/ui/Icon'
 import { Image } from 'src/components/ui/Image'
-import Price from 'src/components/ui/Price'
 import { cartStore } from 'src/sdk/cart'
-import { useRemoveButton } from 'src/sdk/cart/useRemoveButton'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import { useSession } from 'src/sdk/session'
+import { useRemoveButton } from 'src/sdk/cart/useRemoveButton'
 import type { CartItem as ICartItem } from 'src/sdk/cart'
 import type { AnalyticsItem } from 'src/sdk/analytics/types'
 
-import styles from './cart-item.module.scss'
-
 function useCartItemEvent() {
   const {
     currency: { code },
@@ -72,10 +62,9 @@ function useCartItemEvent() {
 
 interface Props {
   item: ICartItem
-  gift?: boolean
 }
 
-function CartItem({ item, gift = false }: Props) {
+function CartItem({ item }: Props) {
   const btnProps = useRemoveButton(item)
 
   const { sendCartItemEvent } = useCartItemEvent()
@@ -89,68 +78,38 @@ function CartItem({ item, gift = false }: Props) {
     [item, sendCartItemEvent]
   )
 
+  const skuActiveVariants =
+    item.itemOffered.isVariantOf.skuVariants.activeVariations
+  const activeVariations = Object.keys(skuActiveVariants).map((key) => ({
+    label: key,
+    option: skuActiveVariants[key],
+  }))
+
   return (
     <UICartItem
-      className={styles.fsCartItem}
-      data-testid="cart-item"
+      price={{
+        value: item.price,
+        listPrice: item.listPrice,
+        formatter: useFormattedPrice,
+      }}
+      quantity={item.quantity}
+      onQuantityChange={onQuantityChange}
+      removeBtnProps={btnProps}
       data-sku={item.itemOffered.sku}
       data-seller={item.seller.identifier}
     >
-      <UICartItemContent>
-        <UICartItemImage>
-          <Image
-            src={item.itemOffered.image[0].url}
-            alt={item.itemOffered.image[0].alternateName}
-            width={72}
-            height={72}
-          />
-        </UICartItemImage>
-        <UICartItemSummary>
-          <UICartItemTitle className="text__body">
-            {item.itemOffered.isVariantOf.name}
-          </UICartItemTitle>
-          {!gift && (
-            <UICartItemPrices>
-              <Price
-                value={item.listPrice}
-                formatter={useFormattedPrice}
-                testId="list-price"
-                data-value={item.listPrice}
-                variant="listing"
-                classes="text__legend"
-                SRText="Original price:"
-              />
-              <Price
-                value={item.price}
-                formatter={useFormattedPrice}
-                testId="price"
-                data-value={item.price}
-                variant="spot"
-                classes="text__title-subsection"
-                SRText="Price:"
-              />
-            </UICartItemPrices>
-          )}
-        </UICartItemSummary>
-      </UICartItemContent>
-
-      {!gift && (
-        <UICartItemActions>
-          <UIButton
-            icon={<Icon name="XCircle" width={18} height={18} />}
-            iconPosition="left"
-            variant="tertiary"
-            {...btnProps}
-          >
-            Remove
-          </UIButton>
-          <UIQuantitySelector
-            min={1}
-            initial={item.quantity}
-            onChange={onQuantityChange}
-          />
-        </UICartItemActions>
-      )}
+      <UICartItemImage>
+        <Image
+          src={item.itemOffered.image[0].url}
+          alt={item.itemOffered.image[0].alternateName}
+          width={56}
+          height={56}
+        />
+      </UICartItemImage>
+      <UICartItemSummary
+        title={item.itemOffered.isVariantOf.name}
+        activeVariations={activeVariations}
+      />
     </UICartItem>
   )
 }

package/src/components/cart/CartSidebar/CartSidebar.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
 
-import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { UIProvider, useUI } from '@faststore/ui'
 import { useCart } from 'src/sdk/cart'
 
 import CartToggle from 'src/components/cart/CartToggle'

package/src/components/cart/CartSidebar/CartSidebar.tsx

@@ -15,10 +15,11 @@ import SlideOver from 'src/components/ui/SlideOver'
 import { useCart } from 'src/sdk/cart'
 import { useCheckoutButton } from 'src/sdk/cart/useCheckoutButton'
 import { useSession } from 'src/sdk/session'
-import { useUI } from 'src/sdk/ui/Provider'
-import { useFadeEffect } from 'src/sdk/ui/useFadeEffect'
+import { useUI } from '@faststore/ui'
+import { useFadeEffect } from '@faststore/ui'
 
 import CartItem from '../CartItem'
+import Gift from '../../ui/Gift'
 import EmptyCart from '../EmptyCart'
 import OrderSummary from '../OrderSummary'
 import styles from './cart-sidebar.module.scss'
@@ -96,20 +97,16 @@ function CartSidebar() {
                 <CartItem item={item} />
               </li>
             ))}
-          </UIList>
-
-          {gifts.length > 0 && (
-            <>
-              <UIAlert icon={<Icon name="Gift" />}>Gifts</UIAlert>
-              <UIList data-fs-cart-sidebar-list>
+            {gifts.length > 0 && (
+              <>
                 {gifts.map((item) => (
                   <li key={item.id}>
-                    <CartItem gift item={item} />
+                    <Gift item={item} />
                   </li>
                 ))}
-              </UIList>
-            </>
-          )}
+              </>
+            )}
+          </UIList>
 
           <footer data-fs-cart-sidebar-footer>
             <OrderSummary

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

@@ -1,7 +1,6 @@
 import {
   List as UIList,
   PaymentMethods as UIPaymentMethods,
-  SROnly as UISROnly,
 } from '@faststore/ui'
 
 import Logo from 'src/components/ui/Logo'
@@ -12,6 +11,7 @@ import { mark } from 'src/sdk/tests/mark'
 
 import styles from './footer.module.scss'
 import FooterLinks from './FooterLinks'
+import FooterFlags from './FooterFlags'
 
 type FooterProps = {
   /**
@@ -107,43 +107,10 @@ export function Footer({
         <Logo />
 
         {sectionPaymentMethods && (
-          <UIPaymentMethods data-fs-footer-payment-methods>
-            <p data-fs-footer-title>Payment Methods</p>
-            <UIList>
-              <li>
-                <Icon width="34px" height="24px" name="Visa" />
-                <UISROnly text="Visa" />
-              </li>
-              <li>
-                <Icon width="34px" height="24px" name="Diners" />
-                <UISROnly text="Diners Club" />
-              </li>
-              <li>
-                <Icon width="34px" height="24px" name="Mastercard" />
-                <UISROnly text="Mastercard" />
-              </li>
-              <li>
-                <Icon width="34px" height="24px" name="EloCard" />
-                <UISROnly text="Elo Card" />
-              </li>
-              <li>
-                <Icon width="34px" height="24px" name="PayPal" />
-                <UISROnly text="PayPal" />
-              </li>
-              <li>
-                <Icon width="34px" height="24px" name="Stripe" />
-                <UISROnly text="Stripe" />
-              </li>
-              <li>
-                <Icon width="34px" height="24px" name="GooglePay" />
-                <UISROnly text="Google Pay" />
-              </li>
-              <li>
-                <Icon width="34px" height="24px" name="ApplePay" />
-                <UISROnly text="Apple Pay" />
-              </li>
-            </UIList>
-          </UIPaymentMethods>
+          <UIPaymentMethods
+            title={<p>Payment Methods</p>}
+            flagList={FooterFlags}
+          />
         )}
 
         <div data-fs-footer-copyright className="text__legend">

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

@@ -0,0 +1,23 @@
+import {
+  Visa,
+  Diners,
+  Mastercard,
+  EloCard,
+  PayPal,
+  Stripe,
+  GooglePay,
+  ApplePay,
+} from '@faststore/components'
+
+const FooterFlags = [
+  { image: <Visa />, text: 'Visa' },
+  { image: <Diners />, text: 'Diners Club' },
+  { image: <Mastercard />, text: 'Mastercard' },
+  { image: <EloCard />, text: 'Elo Card' },
+  { image: <PayPal />, text: 'PayPal' },
+  { image: <Stripe />, text: 'Stripe' },
+  { image: <GooglePay />, text: 'GooglePay' },
+  { image: <ApplePay />, text: 'ApplePay' },
+]
+
+export default FooterFlags

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

@@ -22,11 +22,6 @@
   --fs-footer-title-weight                        : var(--fs-text-weight-bold);
   --fs-footer-title-margin-bottom                 : var(--fs-spacing-1);
 
-  // Payment Methods
-  --fs-footer-payment-methods-flags-border-width  : var(--fs-border-width);
-  --fs-footer-payment-methods-flags-border-color  : var(--fs-color-neutral-3);
-  --fs-footer-payment-methods-flags-border-radius : var(--fs-border-radius-small);
-
   // --------------------------------------------------------
   // Structural Styles
   // --------------------------------------------------------
@@ -108,7 +103,7 @@
   }
 
   [data-fs-footer-social],
-  [data-fs-footer-payment-methods] {
+  [data-fs-payment-methods] {
     @include media(">=notebook") {
       grid-column: 11 / span 2;
       margin-left: calc(-1 * var(--fs-spacing-3));
@@ -142,7 +137,7 @@
     }
   }
 
-  [data-fs-footer-payment-methods] {
+  [data-fs-payment-methods] {
     @include media("<notebook") {
       margin: var(--fs-footer-spacing-vertical-mobile) auto;
     }
@@ -158,27 +153,6 @@
     }
   }
 
-  [data-payment-methods-flags] {
-    svg {
-      border: var(--fs-footer-payment-methods-flags-border-width) solid var(--fs-footer-payment-methods-flags-border-color);
-      border-radius: var(--fs-footer-payment-methods-flags-border-radius);
-    }
-
-    [data-fs-list] {
-      display: grid;
-      grid-template-columns: repeat(4, minmax(0, max-content));
-      row-gap: var(--fs-spacing-1);
-      justify-content: space-between;
-      margin-top: var(--fs-spacing-3);
-
-      li { display: flex; }
-
-      @include media("<notebook") {
-        column-gap: var(--fs-grid-gap-2);
-      }
-    }
-  }
-
   [data-fs-footer-copyright] {
     p + p {
       margin: var(--fs-spacing-2) auto;

package/src/components/common/Footer/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Footer'
 export { default as FooterLinks } from './FooterLinks'
+export { default as FooterFlags } from './FooterFlags'

package/src/components/common/Navbar/NavLinks.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
 
-import UIProvider from 'src/sdk/ui/Provider'
+import { UIProvider } from '@faststore/ui'
 
 import { NavLinks } from '.'
 

package/src/components/common/Navbar/Navbar.stories.mdx

@@ -1,4 +1,4 @@
-import UIProvider from 'src/sdk/ui/Provider'
+import { UIProvider } from '@faststore/ui'
 
 import Navbar, { NavLinks } from '.'
 

package/src/components/common/Navbar/Navbar.tsx

@@ -9,7 +9,7 @@ import Icon from 'src/components/ui/Icon'
 import Link from 'src/components/ui/Link'
 import Logo from 'src/components/ui/Logo'
 import { mark } from 'src/sdk/tests/mark'
-import { useUI } from 'src/sdk/ui/Provider'
+import { useUI } from '@faststore/ui'
 import useScrollDirection from 'src/sdk/ui/useScrollDirection'
 
 import styles from './navbar.module.scss'

package/src/components/common/Navbar/NavbarSlider.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
 
-import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { UIProvider, useUI } from '@faststore/ui'
 
 import { Button } from '@faststore/ui'
 import Icon from 'src/components/ui/Icon'

package/src/components/common/Navbar/NavbarSlider.tsx

@@ -7,8 +7,8 @@ import Link from 'src/components/ui/Link'
 import Logo from 'src/components/ui/Logo'
 import SlideOver from 'src/components/ui/SlideOver'
 import { mark } from 'src/sdk/tests/mark'
-import { useUI } from 'src/sdk/ui/Provider'
-import { useFadeEffect } from 'src/sdk/ui/useFadeEffect'
+import { useUI } from '@faststore/ui'
+import { useFadeEffect } from '@faststore/ui'
 
 import styles from './navbar-slider.module.scss'
 import NavLinks from './NavLinks'

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

@@ -1,7 +1,7 @@
 import { lazy, Suspense, useEffect } from 'react'
 
 import { useCart } from 'src/sdk/cart'
-import { useUI } from 'src/sdk/ui/Provider'
+import { useUI } from '@faststore/ui'
 
 const UIToast = lazy(() => import('src/components/ui/Toast'))