@faststore/core 0.3.15 → 0.3.17

package/CHANGELOG.md

@@ -5,6 +5,35 @@ 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.17](https://github.com/vtex-sites/nextjs.store/compare/0.3.16...0.3.17) (2023-01-23)
+
+
+### Features
+
+* Replace `Accordion` FSUI ([#336](https://github.com/vtex-sites/nextjs.store/issues/336)) ([1ebe103](https://github.com/vtex-sites/nextjs.store/commit/1ebe1039a92ab977ba5de1b91f112342973706eb))
+* Replace `Dropdown` FSUI ([#339](https://github.com/vtex-sites/nextjs.store/issues/339)) ([3a541a4](https://github.com/vtex-sites/nextjs.store/commit/3a541a4aab72a1e289a6716ba9c742771905fa7a))
+* Replace `RadioGroup` FSUI ([#345](https://github.com/vtex-sites/nextjs.store/issues/345)) ([2af5559](https://github.com/vtex-sites/nextjs.store/commit/2af5559a8e4b005b78075edecf9c40da1e7e1a2b))
+* Replaces `PriceRange` FSUI ([#348](https://github.com/vtex-sites/nextjs.store/issues/348)) ([546ee17](https://github.com/vtex-sites/nextjs.store/commit/546ee17c0a00e3094f82d8e05c3e38b84114488f))
+* Replaces `QuantitySelector` FSUI  ([#344](https://github.com/vtex-sites/nextjs.store/issues/344)) ([6b896fc](https://github.com/vtex-sites/nextjs.store/commit/6b896fcff3e5fdb4841194b05b2a310518eb3857))
+
+
+### Bug Fixes
+
+* Evergreen `starter.store` build errors. ([#349](https://github.com/vtex-sites/nextjs.store/issues/349)) ([0eedd76](https://github.com/vtex-sites/nextjs.store/commit/0eedd76c65edae710971e3a985065dc30f4de19d))
+
+
+### Chores
+
+* Replaces `Alert` FSUI ([#343](https://github.com/vtex-sites/nextjs.store/issues/343)) ([8b3d6b2](https://github.com/vtex-sites/nextjs.store/commit/8b3d6b268da572614334554400ea03129445f787))
+* Replaces `Gift` FSUI ([#347](https://github.com/vtex-sites/nextjs.store/issues/347)) ([7fa049e](https://github.com/vtex-sites/nextjs.store/commit/7fa049e890b0bc6c9e4c3a4911c376014b239321))
+
+### [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)
 
 

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=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=cart-item] [data-testid=fs-quantity-selector-left-button]'
               )
                 .click()
                 .then(() => {

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()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "0.3.15",
+  "version": "0.3.17",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -31,10 +31,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.54-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.3-alpha.0",
-    "@faststore/ui": "2.0.30-alpha.0",
+    "@faststore/ui": "^2.0.54-alpha.0",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
@@ -80,7 +80,7 @@
     "cypress-axe": "^0.13.0",
     "cypress-wait-until": "^1.7.2",
     "dotenv": "^8.2.0",
-    "eslint": "^8.30.0",
+    "eslint": "^7.32.0",
     "eslint-config-next": "^13.0.7",
     "husky": "^5.2.0",
     "is-ci": "^3.0.0",

package/src/Layout.tsx

@@ -7,6 +7,7 @@ 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'
 
 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

@@ -8,6 +8,7 @@ import {
   CartItemContent as UICartItemContent,
   CartItemImage as UICartItemImage,
   Button as UIButton,
+  QuantitySelector as UIQuantitySelector,
 } from '@faststore/ui'
 import { useCallback, useMemo } from 'react'
 import type {
@@ -19,7 +20,6 @@ import type {
 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'
@@ -144,7 +144,7 @@ function CartItem({ item, gift = false }: Props) {
           >
             Remove
           </UIButton>
-          <QuantitySelector
+          <UIQuantitySelector
             min={1}
             initial={item.quantity}
             onChange={onQuantityChange}

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

@@ -4,11 +4,12 @@ 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'
@@ -81,9 +82,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} />
@@ -99,9 +100,7 @@ function CartSidebar() {
 
           {gifts.length > 0 && (
             <>
-              <Alert icon={<Icon name="Gift" width={24} height={24} />}>
-                Gifts
-              </Alert>
+              <UIAlert icon={<Icon name="Gift" />}>Gifts</UIAlert>
               <UIList data-fs-cart-sidebar-list>
                 {gifts.map((item) => (
                   <li key={item.id}>

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/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">

package/src/components/search/Filter/Facets.stories.mdx

@@ -134,7 +134,7 @@ Facets represent the <code>Filter</code> details and allow users to refine their
 
 ## Overview
 
-The `Facets` component uses the [Accordion](?path=/docs/molecules-accordion-overview--default-story), [Checkbox](?path=/docs/atoms-checkbox--overview-default), [PriceRange](?path=/docs/molecules-pricerange--overview-default), and [Badge](?path=/docs/molecules-badge--default) components.
+The `Facets` component uses the Accordion, [Checkbox](?path=/docs/atoms-checkbox--overview-default), PriceRange, and [Badge](?path=/docs/molecules-badge--default) components.
 
 ---
 
@@ -194,30 +194,30 @@ The `Facets` component uses the [Accordion](?path=/docs/molecules-accordion-over
 
 <TokenTable>
   <TokenRow
-    token="--fs-facets-accordion-item-button-text-size"
+    token="--fs-facets-accordion-button-text-size"
     value="var(--fs-text-size-lead)"
   />
   <TokenRow
-    token="--fs-facets-accordion-item-button-text-weight"
+    token="--fs-facets-accordion-button-text-weight"
     value="var(--fs-text-weight-regular)"
   />
-  <TokenRow token="--fs-facets-accordion-item-button-line-height" value="1.5" />
+  <TokenRow token="--fs-facets-accordion-button-line-height" value="1.5" />
   <TokenDivider />
   <TokenRow
-    token="--fs-facets-accordion-item-button-text-weight-notebook"
+    token="--fs-facets-accordion-button-text-weight-notebook"
     value="var(--fs-text-size-2)"
   />
   <TokenRow
-    token="--fs-facets-accordion-item-button-line-height-notebook"
+    token="--fs-facets-accordion-button-line-height-notebook"
     value="1.25"
   />
   <TokenRow
-    token="--fs-facets-accordion-item-button-padding-right-notebook"
+    token="--fs-facets-accordion-button-padding-right-notebook"
     value="var(--fs-spacing-4)"
   />
   <TokenRow
-    token="--fs-facets-accordion-item-button-padding-left-notebook"
-    value="var(--fs-facets-accordion-item-button-padding-right-notebook)"
+    token="--fs-facets-accordion-button-padding-left-notebook"
+    value="var(--fs-facets-accordion-button-padding-right-notebook)"
   />
 </TokenTable>
 

package/src/components/search/Filter/Facets.tsx

@@ -3,14 +3,19 @@ import {
   Label as UILabel,
   List as UIList,
   Badge as UIBadge,
+  Accordion as UIAccordion,
+  AccordionItem as UIAccordionItem,
+  AccordionButton as UIAccordionButton,
+  AccordionPanel as UIAccordionPanel,
+  PriceRange as UIPriceRange,
 } from '@faststore/ui'
 
+import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
+
 import type {
   Filter_FacetsFragment,
   IStoreSelectedFacet,
 } from '@generated/graphql'
-import Accordion, { AccordionItem } from 'src/components/ui/Accordion'
-import PriceRange from 'src/components/ui/PriceRange'
 
 import styles from './facets.module.scss'
 
@@ -58,80 +63,83 @@ function Facets({
       <h2 className="text__title-mini-alt" data-fs-facets-title>
         Filters
       </h2>
-      <Accordion
-        expandedIndices={indicesExpanded}
+      <UIAccordion
+        indices={indicesExpanded}
         onChange={onAccordionChange}
         data-fs-facets-accordion
       >
         {facets.map((facet, index) => {
           const isExpanded = indicesExpanded.has(index)
           const { __typename: type, label } = facet
-
           return (
-            <AccordionItem
+            <UIAccordionItem
               key={`${label}-${index}`}
               prefixId={testId}
               testId={`${testId}-accordion`}
-              isExpanded={isExpanded}
-              buttonLabel={label}
               data-type={type}
               data-fs-facets-accordion-item
             >
-              {type === 'StoreFacetBoolean' && isExpanded && (
-                <UIList data-fs-facets-list>
-                  {facet.values.map((item) => {
-                    const id = `${testId}-${facet.label}-${item.label}`
-
-                    return (
-                      <li key={id} data-fs-facets-list-item>
-                        <UICheckbox
-                          id={id}
-                          checked={item.selected}
-                          onChange={() =>
-                            onFacetChange(
-                              { key: facet.key, value: item.value },
-                              'BOOLEAN'
-                            )
-                          }
-                          data-fs-facets-list-item-checkbox
-                          data-testid={`${testId}-accordion-panel-checkbox`}
-                          data-value={item.value}
-                          data-quantity={item.quantity}
-                        />
-                        <UILabel
-                          htmlFor={id}
-                          className="text__title-mini-alt"
-                          data-fs-facets-list-item-label
-                        >
-                          {item.label}{' '}
-                          <UIBadge data-fs-facets-list-item-badge>
-                            {item.quantity}
-                          </UIBadge>
-                        </UILabel>
-                      </li>
-                    )
-                  })}
-                </UIList>
-              )}
-              {type === 'StoreFacetRange' && isExpanded && (
-                <PriceRange
-                  min={facet.min}
-                  max={facet.max}
-                  onEnd={(v) =>
-                    onFacetChange(
-                      {
-                        key: facet.key,
-                        value: formatRange(v.min, v.max),
-                      },
-                      'RANGE'
-                    )
-                  }
-                />
-              )}
-            </AccordionItem>
+              <UIAccordionButton testId={`${testId}-accordion-button`}>
+                {label}
+              </UIAccordionButton>
+              <UIAccordionPanel>
+                {type === 'StoreFacetBoolean' && isExpanded && (
+                  <UIList data-fs-facets-list>
+                    {facet.values.map((item) => {
+                      const id = `${testId}-${facet.label}-${item.label}`
+                      return (
+                        <li key={id} data-fs-facets-list-item>
+                          <UICheckbox
+                            id={id}
+                            checked={item.selected}
+                            onChange={() =>
+                              onFacetChange(
+                                { key: facet.key, value: item.value },
+                                'BOOLEAN'
+                              )
+                            }
+                            data-fs-facets-list-item-checkbox
+                            data-testid={`${testId}-accordion-panel-checkbox`}
+                            data-value={item.value}
+                            data-quantity={item.quantity}
+                          />
+                          <UILabel
+                            htmlFor={id}
+                            className="text__title-mini-alt"
+                            data-fs-facets-list-item-label
+                          >
+                            {item.label}{' '}
+                            <UIBadge data-fs-facets-list-item-badge>
+                              {item.quantity}
+                            </UIBadge>
+                          </UILabel>
+                        </li>
+                      )
+                    })}
+                  </UIList>
+                )}
+                {type === 'StoreFacetRange' && isExpanded && (
+                  <UIPriceRange
+                    min={facet.min}
+                    max={facet.max}
+                    formatter={useFormattedPrice}
+                    step={1}
+                    onEnd={(v) =>
+                      onFacetChange(
+                        {
+                          key: facet.key,
+                          value: formatRange(v.min, v.max),
+                        },
+                        'RANGE'
+                      )
+                    }
+                  />
+                )}
+              </UIAccordionPanel>
+            </UIAccordionItem>
           )
         })}
-      </Accordion>
+      </UIAccordion>
     </div>
   )
 }

package/src/components/search/Filter/facets.module.scss

@@ -15,14 +15,14 @@
   --fs-facets-accordion-border-radius-notebook             : var(--fs-border-radius);
 
   // Accordion Item Button
-  --fs-facets-accordion-item-button-text-size              : var(--fs-text-size-lead);
-  --fs-facets-accordion-item-button-text-weight            : var(--fs-text-weight-regular);
-  --fs-facets-accordion-item-button-line-height            : 1.5;
-  --fs-facets-accordion-item-button-padding-right-notebook : var(--fs-spacing-4);
-  --fs-facets-accordion-item-button-padding-left-notebook  : var(--fs-facets-accordion-item-button-padding-right-notebook);
+  --fs-facets-accordion-button-text-size              : var(--fs-text-size-lead);
+  --fs-facets-accordion-button-text-weight            : var(--fs-text-weight-regular);
+  --fs-facets-accordion-button-line-height            : 1.5;
+  --fs-facets-accordion-button-padding-right-notebook : var(--fs-spacing-4);
+  --fs-facets-accordion-button-padding-left-notebook  : var(--fs-facets-accordion-button-padding-right-notebook);
 
-  --fs-facets-accordion-item-button-text-weight-notebook   : var(--fs-text-size-2);
-  --fs-facets-accordion-item-button-line-height-notebook   : 1.25;
+  --fs-facets-accordion-button-text-weight-notebook   : var(--fs-text-size-2);
+  --fs-facets-accordion-button-line-height-notebook   : 1.25;
 
   // Accordion Item Panel
   --fs-facets-accordion-item-panel-padding-right-notebook  : var(--fs-spacing-4);
@@ -64,20 +64,20 @@
   }
 
   [data-fs-facets-accordion-item] {
-    [data-fs-accordion-item-button] {
-      font-size: var(--fs-facets-accordion-item-button-text-size);
-      font-weight: var(--fs-facets-accordion-item-button-text-weight);
-      line-height: var(--fs-facets-accordion-item-button-line-height);
+    [data-fs-accordion-button] {
+      font-size: var(--fs-facets-accordion-button-text-size);
+      font-weight: var(--fs-facets-accordion-button-text-weight);
+      line-height: var(--fs-facets-accordion-button-line-height);
 
       @include media(">=notebook") {
-        padding-right: var(--fs-facets-accordion-item-button-padding-right-notebook);
-        padding-left: var(--fs-facets-accordion-item-button-padding-left-notebook);
-        font-size: var(--fs-facets-accordion-item-button-text-weight-notebook);
-        line-height: var(--fs-facets-accordion-item-button-line-height-notebook);
+        padding-right: var(--fs-facets-accordion-button-padding-right-notebook);
+        padding-left: var(--fs-facets-accordion-button-padding-left-notebook);
+        font-size: var(--fs-facets-accordion-button-text-weight-notebook);
+        line-height: var(--fs-facets-accordion-button-line-height-notebook);
       }
     }
 
-    [data-fs-accordion-item-panel] {
+    [data-fs-accordion-panel] {
       @include media(">=notebook") {
         padding-right: var(--fs-facets-accordion-item-panel-padding-right-notebook);
         padding-left: var(--fs-facets-accordion-item-panel-padding-left-notebook);