@faststore/core 0.3.16 → 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=store-quantity-selector-right]'
+            '[data-testid=fs-cart-item] [data-testid=fs-quantity-selector-right-button]'
           )
             .click()
             .then(() => {
@@ -193,7 +193,7 @@ describe('remove_from_cart event', () => {
       cy.itemsInCart(0)
 
       // Add item to cart
-      cy.get('[data-testid=store-quantity-selector-right]')
+      cy.get('[data-testid=fs-quantity-selector-right-button]')
         .click()
         .then(() => {
           cy.getById('buy-button')
@@ -209,7 +209,7 @@ describe('remove_from_cart event', () => {
 
               // Remove the added item
               cy.get(
-                '[data-testid=cart-item] [data-testid=store-quantity-selector-left]'
+                '[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

@@ -23,7 +23,7 @@ describe('Search page Filters and Sorting options', () => {
     cy.getById('open-filter-button')
       .click()
       .get(
-        `[data-testid=mobile-store-filter-accordion-item][data-type=StoreFacetBoolean]>[data-testid=mobile-store-filter-accordion-button]`
+        `[data-testid=mobile-store-filter-accordion][data-type=StoreFacetBoolean]>[data-testid=mobile-store-filter-accordion-button]`
       )
       .first()
       .click()
@@ -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.16",
+  "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.30-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.37-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",
@@ -80,14 +80,12 @@
     "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",
+    "eslint": "^7.32.0",
     "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,7 +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(
@@ -18,7 +19,11 @@ function Layout({ children }: PropsWithChildren) {
 
   return (
     <>
-      <Alert icon="Bell" link={{ text: 'Buy now', to: '/office' }} dismissible>
+      <Alert
+        icon={<Icon name="Bell" />}
+        link={{ children: 'Buy now', href: '/office', target: '_self' }}
+        dismissible
+      >
         Get 10% off today:&nbsp;<span>NEW10</span>
       </Alert>
 

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

@@ -1,13 +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,
+  CartItemSummary as UICartItemSummary,
 } from '@faststore/ui'
 import { useCallback, useMemo } from 'react'
 import type {
@@ -16,19 +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 QuantitySelector from 'src/components/ui/QuantitySelector'
 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>
-          <QuantitySelector
-            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

@@ -4,20 +4,22 @@ import {
   IconButton as UIIconButton,
   Button as UIButton,
   Badge as UIBadge,
+  Alert as UIAlert,
 } from '@faststore/ui'
+
 import { useEffect } from 'react'
 import type { ViewCartEvent, CurrencyCode } from '@faststore/sdk'
 
-import Alert from 'src/components/ui/Alert'
 import Icon from 'src/components/ui/Icon'
 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'
@@ -81,9 +83,9 @@ function CartSidebar() {
           onClick={fadeOut}
         />
       </header>
-      <Alert icon={<Icon name="Truck" width={24} height={24} />}>
+      <UIAlert icon={<Icon name="Truck" />}>
         Free shipping starts at $300
-      </Alert>
+      </UIAlert>
 
       {isEmpty ? (
         <EmptyCart onDismiss={fadeOut} />
@@ -95,22 +97,16 @@ function CartSidebar() {
                 <CartItem item={item} />
               </li>
             ))}
-          </UIList>
-
-          {gifts.length > 0 && (
-            <>
-              <Alert icon={<Icon name="Gift" width={24} height={24} />}>
-                Gifts
-              </Alert>
-              <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/cart/CartSidebar/cart-sidebar.module.scss

@@ -28,6 +28,8 @@
   overflow: auto;
   background-color: var(--fs-cart-sidebar-bkg-color);
 
+  > * { flex-shrink: 0; }
+
   [data-fs-cart-sidebar-header] {
     display: flex;
     align-items: center;

package/src/components/common/Alert/Alert.tsx

@@ -1,30 +1,17 @@
 import { useCallback, useState } from 'react'
 import type { ReactNode, PropsWithChildren } from 'react'
 
-import UIAlert from 'src/components/ui/Alert'
+import { Alert as UIAlert, AlertProps } from '@faststore/ui'
 import { mark } from 'src/sdk/tests/mark'
-import Icon from 'src/components/ui/Icon'
 
-interface Props {
-  icon: string
+interface Props extends AlertProps {
   /**
    * For CMS integration purposes, should be used to pass content through it
    * instead pass through children
    */
   content?: ReactNode
-  link?: {
-    to: string
-    text: string
-  }
-  dismissible: boolean
 }
-function Alert({
-  icon,
-  content,
-  link,
-  dismissible = false,
-  children,
-}: PropsWithChildren<Props>) {
+function Alert(args: PropsWithChildren<Props>) {
   const [displayAlert, setDisplayAlert] = useState(true)
 
   const onAlertClose = useCallback(
@@ -36,13 +23,10 @@ function Alert({
     return null
   }
 
+  const { content, children, ...otherProps } = args
+
   return (
-    <UIAlert
-      icon={<Icon name={icon} width={24} height={24} />}
-      dismissible={dismissible}
-      onClose={onAlertClose}
-      link={link}
-    >
+    <UIAlert onClose={onAlertClose} {...otherProps}>
       {content ?? children}
     </UIAlert>
   )

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

@@ -35,7 +35,7 @@ The `Footer` is the final section of every page and has all the meaningful links
 
 ## Overview
 
-Footer section is made with `FooterLinks`, [Incentives](?path=/docs/organisms-incentives--incentives), [Links](?path=/docs/atoms-link--default), [Accordion](?path=/docs/molecules-accordion-overview--default-story), and [PaymentMethods](https://www.faststore.dev/reference/ui/molecules/PaymentMethods) (from FastStore UI).
+Footer section is made with `FooterLinks`, [Incentives](?path=/docs/organisms-incentives--incentives), [Links](?path=/docs/atoms-link--default), Accordion, and [PaymentMethods](https://www.faststore.dev/reference/ui/molecules/PaymentMethods) (from FastStore UI).
 
 ---
 

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/FooterLinks.tsx

@@ -1,8 +1,13 @@
 import { useState } from 'react'
-import { List as UIList } from '@faststore/ui'
+import {
+  List as UIList,
+  Accordion as UIAccordion,
+  AccordionItem as UIAccordionItem,
+  AccordionButton as UIAccordionButton,
+  AccordionPanel as UIAccordionPanel,
+} from '@faststore/ui'
 
 import Link from 'src/components/ui/Link'
-import Accordion, { AccordionItem } from 'src/components/ui/Accordion'
 
 import styles from './footer.module.scss'
 
@@ -125,17 +130,16 @@ function FooterLinks() {
   return (
     <section className={styles.fsFooter} data-fs-footer-links>
       <div className="display-mobile">
-        <Accordion expandedIndices={indicesExpanded} onChange={onChange}>
-          {links.map((section, index) => (
-            <AccordionItem
-              key={section.title}
-              isExpanded={indicesExpanded.has(index)}
-              buttonLabel={section.title}
-            >
-              <LinksList items={section.items} />
-            </AccordionItem>
+        <UIAccordion indices={indicesExpanded} onChange={onChange}>
+          {links.map((section) => (
+            <UIAccordionItem key={section.title}>
+              <UIAccordionButton>{section.title}</UIAccordionButton>
+              <UIAccordionPanel>
+                <LinksList items={section.items} />
+              </UIAccordionPanel>
+            </UIAccordionItem>
           ))}
-        </Accordion>
+        </UIAccordion>
       </div>
 
       <div className="hidden-mobile">