@faststore/core 0.3.6 → 0.3.8

package/.storybook/preview.js

@@ -1,8 +1,4 @@
-import '!style-loader!css-loader!sass-loader!../src/styles/global/layout.scss'
-import '!style-loader!css-loader!sass-loader!../src/styles/global/resets.scss'
 import '!style-loader!css-loader!sass-loader!../src/styles/global/storybook-components.scss'
-import '!style-loader!css-loader!sass-loader!../src/styles/global/tokens.scss'
-import '!style-loader!css-loader!sass-loader!../src/styles/global/typography.scss'
 import { initialize, mswDecorator } from 'msw-storybook-addon'
 
 // Initialize MSW

package/CHANGELOG.md

@@ -5,6 +5,15 @@ 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.8](https://github.com/vtex-sites/nextjs.store/compare/0.3.7...0.3.8) (2022-12-16)
+
+
+### Bug Fixes
+
+* Integration tests ([#323](https://github.com/vtex-sites/nextjs.store/issues/323)) ([6e927e5](https://github.com/vtex-sites/nextjs.store/commit/6e927e563cd355ae7af82b5de42abda909965009))
+
+### [0.3.7](https://github.com/vtex-sites/nextjs.store/compare/0.3.6...0.3.7) (2022-12-15)
+
 ### [0.3.6](https://github.com/vtex-sites/nextjs.store/compare/0.3.5...0.3.6) (2022-12-15)
 
 

package/README.md

@@ -70,7 +70,7 @@ As of Sep, 2022, this starter is still far from covering most basic cases found
 
    Your site is now running at `http://localhost:3000`!
 
-    Open the `awesome.store` directory in your code editor of choice and edit `src/pages/index.tsx`. Save your changes and the browser will update in real-time!
+   Open the `awesome.store` directory in your code editor of choice and edit `src/pages/index.tsx`. Save your changes and the browser will update in real-time!
 
 ## :technologist: Contributing
 
@@ -120,9 +120,9 @@ A quick look at the top-level files and directories you'll see in a NextJS proje
 
 7.  **`yarn.lock`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
 
-8. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
+8.  **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
 
-9. **`tsconfig.json`**: The configuration file for the typescript compiler. This will statically analyze your code for errors and bugs before releasing them into production
+9.  **`tsconfig.json`**: The configuration file for the typescript compiler. This will statically analyze your code for errors and bugs before releasing them into production
 
 10. **`store.config.js`**: Configure your e-commerce platform, default sales channel etc.
 
@@ -219,20 +219,20 @@ touch src/components/ui/Button/button.scss
 Now, on `button.scss`:
 
 ```css
-[data-store-button] {
+[data-fs-button] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 ```
 
-This `data-store-button` is a CSS data attribute selector. To know which selectors are available, check [FastStore UI docs](https://faststoreui.netlify.app/).
+This `data-fs-button` is a CSS data attribute selector. To know which selectors are available, check [FastStore UI docs](https://faststoreui.netlify.app/).
 
 Now, include the component's CSS into the Store's CSS. Open `src/styles/global/components.scss` and import this CSS with:
 
 ```scss
 // ...
-@import "src/components/ui/Button/button.scss";
+@import 'src/components/ui/Button/button.scss';
 // ...
 ```
 
@@ -256,11 +256,11 @@ export default Button
 and then, on `button.scss`:
 
 ```css
-[data-store-button][data-button-variant='primary'] {
+[data-fs-button][data-button-variant='primary'] {
   background: blue;
 }
 
-[data-store-button][data-button-variant='secondary'] {
+[data-fs-button][data-button-variant='secondary'] {
   background: pink;
 }
 ```
@@ -274,11 +274,11 @@ function Button({ variant, ...props }: Props) {
 ```
 
 ```css
-.primary[data-store-button] {
+.primary[data-fs-button] {
   background: blue;
 }
 
-.secondary[data-store-button] {
+.secondary[data-fs-button] {
   background: pink;
 }
 ```
@@ -286,6 +286,7 @@ function Button({ variant, ...props }: Props) {
 Now we have a styled Button component that accepts different variants!! 🎉
 
 ### Managing SVG Icons
+
 Icons help build web pages by illustrating concepts and improving website navigation. However, using icons can decrease the page's performance. One option to avoid the decrease of the page's performance is to use SVGs from a single SVG file, located in `/static/icons.svg`, and load them with the `ui/Icon` component.
 
 In the following steps, learn how to add and use a new SVG icon and avoid decreasing page performance while using an icon.
@@ -295,6 +296,7 @@ In the following steps, learn how to add and use a new SVG icon and avoid decrea
 > This is a recommendation while using icons on a web page. Evaluate if this fits in your project.
 
 #### Adding an SVG icon
+
 1. In the SVG file, change the `svg` tag to `symbol`.
 2. Add an `id` to the symbol. Remember to use an unique `id` and do not replicate it.
 3. Remove unnecessary HTML/SVG properties to allow you to style and decrease the final file size, such as `fill`, `stroke-width`, `width`, `height`, and `color`.
@@ -395,7 +397,7 @@ That's it! you have just regenerated all graphql queries/fragments for your appl
 
 ## CMS Integration
 
-This store is integrated with [VTEX headless CMS](https://www.faststore.dev/tutorials/cms/0). 
+This store is integrated with [VTEX headless CMS](https://www.faststore.dev/tutorials/cms/0).
 
 The page rendered with CMS is:
 

package/cypress/integration/analytics.test.js

@@ -331,7 +331,7 @@ describe('search event', () => {
       .click()
       .type('shirt')
       .within(() => {
-        cy.getById('store-button')
+        cy.getById('fs-button')
           .click()
           .then(() => {
             dataLayerHasEvent('search')

package/cypress/integration/search.test.js

@@ -27,7 +27,7 @@ describe('Search input', () => {
         .click()
         .type(term)
         .within(() => {
-          cy.getById('store-button').click()
+          cy.getById('fs-button').click()
         })
 
       cy.location('search').should((loc) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -30,38 +30,39 @@
     "@envelop/graphql-jit": "^1.1.1",
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
-    "@faststore/api": "^1.12.29",
-    "@faststore/graphql-utils": "^1.11.8",
-    "@faststore/sdk": "^1.11.8",
-    "@faststore/ui": "^1.12.23",
+    "@faststore/api": "^2.0.3-alpha.0",
+    "@faststore/components": "^2.0.18-alpha.0",
+    "@faststore/graphql-utils": "^2.0.3-alpha.0",
+    "@faststore/sdk": "^2.0.3-alpha.0",
+    "@faststore/ui": "^2.0.17-alpha.0",
+    "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
+    "@vtex/tsconfig": "0.6.0",
+    "autoprefixer": "^10.4.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",
     "next": "^12.3.1",
     "next-seo": "^5.4.0",
     "nextjs-progressbar": "^0.0.14",
+    "postcss": "^8.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^8.32.5",
     "sass": "^1.44.0",
-    "swr": "^1.3.0",
-    "@types/react": "^18.0.14",
-    "@vtex/tsconfig": "0.6.0",
-    "autoprefixer": "^10.4.0",
-    "css-loader": "^6.7.1",
-    "eslint": "^7.22.0",
-    "eslint-config-next": "12.1.5",
-    "eslint-config-vtex-react": "^9.0.0",
-    "msw": "^0.43.1",
-    "postcss": "^8.4.4",
     "sass-loader": "^12.6.0",
     "style-loader": "^3.3.1",
+    "swr": "^1.3.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "4.7.3"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.10",
-    "@faststore/lighthouse": "^1.11.8",
+    "@faststore/lighthouse": "^1.12.32",
     "@graphql-codegen/cli": "^2.6.2",
     "@graphql-codegen/typescript": "^2.5.1",
     "@graphql-codegen/typescript-operations": "^2.4.2",

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

@@ -7,6 +7,7 @@ import {
   CartItemPrices as UICartItemPrices,
   CartItemContent as UICartItemContent,
   CartItemImage as UICartItemImage,
+  Button as UIButton,
 } from '@faststore/ui'
 import { useCallback, useMemo } from 'react'
 import type {
@@ -15,7 +16,6 @@ import type {
   RemoveFromCartEvent,
 } from '@faststore/sdk'
 
-import Button from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import { Image } from 'src/components/ui/Image'
 import Price from 'src/components/ui/Price'
@@ -136,14 +136,14 @@ function CartItem({ item, gift = false }: Props) {
 
       {!gift && (
         <UICartItemActions>
-          <Button
-            variant="tertiary"
+          <UIButton
             icon={<Icon name="XCircle" width={18} height={18} />}
             iconPosition="left"
+            variant="tertiary"
             {...btnProps}
           >
             Remove
-          </Button>
+          </UIButton>
           <QuantitySelector
             min={1}
             initial={item.quantity}

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

@@ -7,7 +7,7 @@ import CartToggle from 'src/components/cart/CartToggle'
 import CartSidebar from '.'
 
 import { cartItem } from 'src/../.storybook/mocks/cart-sidebar'
-import { ButtonBuy } from 'src/components/ui/Button'
+import { BuyButton } from '@faststore/ui'
 
 import {
   TokenTable,
@@ -23,12 +23,12 @@ export const Template = () => {
   return (
     <div style={{ display: 'flex', alignItems: 'center' }}>
       <CartToggle />
-      <ButtonBuy
+      <BuyButton
         style={{ marginLeft: '12px' }}
         onClick={() => addItem(cartItem)}
       >
         Add item to Cart
-      </ButtonBuy>
+      </BuyButton>
       {displayCart && <CartSidebar />}
     </div>
   )

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

@@ -1,11 +1,14 @@
 import { sendAnalyticsEvent } from '@faststore/sdk'
-import { List } from '@faststore/ui'
+import {
+  List as UIList,
+  IconButton as UIIconButton,
+  Button as UIButton,
+  Badge as UIBadge,
+} from '@faststore/ui'
 import { useEffect } from 'react'
 import type { ViewCartEvent, CurrencyCode } from '@faststore/sdk'
 
 import Alert from 'src/components/ui/Alert'
-import { Badge } from 'src/components/ui/Badge'
-import Button from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import SlideOver from 'src/components/ui/SlideOver'
 import { useCart } from 'src/sdk/cart'
@@ -68,9 +71,9 @@ function CartSidebar() {
           <p data-fs-cart-sidebar-title-text className="text__lead">
             Your Cart
           </p>
-          <Badge variant="info">{totalItems}</Badge>
+          <UIBadge variant="info">{totalItems}</UIBadge>
         </div>
-        <Button
+        <UIIconButton
           data-fs-cart-sidebar-close-button
           data-testid="cart-sidebar-button-close"
           aria-label="Close Cart"
@@ -86,26 +89,26 @@ function CartSidebar() {
         <EmptyCart onDismiss={fadeOut} />
       ) : (
         <>
-          <List data-fs-cart-sidebar-list>
+          <UIList data-fs-cart-sidebar-list>
             {items.map((item) => (
               <li key={item.id}>
                 <CartItem item={item} />
               </li>
             ))}
-          </List>
+          </UIList>
 
           {gifts.length > 0 && (
             <>
               <Alert icon={<Icon name="Gift" width={24} height={24} />}>
                 Gifts
               </Alert>
-              <List data-fs-cart-sidebar-list>
+              <UIList data-fs-cart-sidebar-list>
                 {gifts.map((item) => (
                   <li key={item.id}>
                     <CartItem gift item={item} />
                   </li>
                 ))}
-              </List>
+              </UIList>
             </>
           )}
 
@@ -115,7 +118,7 @@ function CartSidebar() {
               total={total}
               numberOfItems={totalItems}
               checkoutButton={
-                <Button
+                <UIButton
                   data-fs-cart-sidebar-checkout-button
                   variant="primary"
                   icon={
@@ -127,7 +130,7 @@ function CartSidebar() {
                   {...btnProps}
                 >
                   {isValidating ? 'Loading...' : 'Checkout'}
-                </Button>
+                </UIButton>
               }
             />
           </footer>

package/src/components/cart/CartToggle/CartToggle.tsx

@@ -1,4 +1,5 @@
-import Button from 'src/components/ui/Button'
+import { IconButton as UIIconButton, Badge as UIBadge } from '@faststore/ui'
+
 import Icon from 'src/components/ui/Icon'
 import { useCartToggleButton } from 'src/sdk/cart/useCartToggleButton'
 
@@ -7,13 +8,14 @@ function CartToggle() {
   const totalItems = btnProps['data-items']
 
   return (
-    <Button
+    <UIIconButton
       data-fs-cart-toggle
-      counter={totalItems}
       aria-label={`Cart with ${totalItems} items`}
       icon={<Icon name="ShoppingCart" width={32} height={32} />}
       {...btnProps}
-    />
+    >
+      <UIBadge counter>{totalItems}</UIBadge>
+    </UIIconButton>
   )
 }
 

package/src/components/cart/EmptyCart/EmptyCart.tsx

@@ -1,4 +1,5 @@
-import Button from 'src/components/ui/Button'
+import { Button as UIButton } from '@faststore/ui'
+
 import EmptyState from 'src/components/ui/EmptyState'
 import Icon from 'src/components/ui/Icon'
 
@@ -16,9 +17,9 @@ function EmptyCart({ onDismiss }: Props) {
         <Icon name="ShoppingCart" width={56} height={56} weight="thin" />
         <p>Your Cart is empty</p>
       </header>
-      <Button onClick={onDismiss} variant="secondary">
+      <UIButton onClick={onDismiss} variant="secondary">
         Start Shopping
-      </Button>
+      </UIButton>
     </EmptyState>
   )
 }

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

@@ -49,10 +49,11 @@ export function Footer({
         {sectionSocial && (
           <section data-fs-footer-social>
             <p data-fs-footer-title>Follow us</p>
-            <UIList variant="unordered">
+            <UIList>
               <li>
                 <Link
-                  variant="footer"
+                  variant="display"
+                  size="small"
                   href="https://www.facebook.com/"
                   title="Facebook"
                   target="_blank"
@@ -63,7 +64,8 @@ export function Footer({
               </li>
               <li>
                 <Link
-                  variant="footer"
+                  variant="display"
+                  size="small"
                   href="https://www.instagram.com/"
                   title="Instagram"
                   target="_blank"
@@ -74,7 +76,8 @@ export function Footer({
               </li>
               <li>
                 <Link
-                  variant="footer"
+                  variant="display"
+                  size="small"
                   href="https://www.pinterest.com/"
                   title="Pinterest"
                   target="_blank"
@@ -85,7 +88,8 @@ export function Footer({
               </li>
               <li>
                 <Link
-                  variant="footer"
+                  variant="display"
+                  size="small"
                   href="https://twitter.com/"
                   title="Twitter"
                   target="_blank"

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

@@ -99,7 +99,7 @@ function LinksList({ items }: LinksListProps) {
     <UIList>
       {items.map((item) => (
         <li key={item.name}>
-          <Link variant="footer" href={item.href}>
+          <Link variant="display" size="small" href={item.href}>
             {item.name}
           </Link>
         </li>

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

@@ -1,12 +1,10 @@
 import { Suspense, useRef, useState } from 'react'
+import { IconButton as UIIconButton } from '@faststore/ui'
 
 import CartToggle from 'src/components/cart/CartToggle'
 import SearchInput from 'src/components/search/SearchInput'
 import type { SearchInputRef } from 'src/components/search/SearchInput'
-import Button, {
-  ButtonSignIn,
-  ButtonSignInFallback,
-} from 'src/components/ui/Button'
+import { ButtonSignIn, ButtonSignInFallback } from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import Link from 'src/components/ui/Link'
 import Logo from 'src/components/ui/Logo'
@@ -39,7 +37,7 @@ function Navbar() {
         <div className="layout__content" data-fs-navbar-row>
           {!searchExpanded && (
             <>
-              <Button
+              <UIIconButton
                 data-fs-navbar-button-menu
                 aria-label="Open Menu"
                 icon={<Icon name="List" width={32} height={32} />}
@@ -61,7 +59,7 @@ function Navbar() {
             data-fs-navbar-search-expanded={searchExpanded}
           >
             {searchExpanded && (
-              <Button
+              <UIIconButton
                 data-fs-button-collapse
                 aria-label="Collapse search bar"
                 icon={<Icon name="CaretLeft" width={32} height={32} />}

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

@@ -1,9 +1,7 @@
 import { Suspense } from 'react'
+import { IconButton as UIIconButton } from '@faststore/ui'
 
-import Button, {
-  ButtonSignIn,
-  ButtonSignInFallback,
-} from 'src/components/ui/Button'
+import { ButtonSignIn, ButtonSignInFallback } from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import Link from 'src/components/ui/Link'
 import Logo from 'src/components/ui/Logo'
@@ -40,7 +38,7 @@ function NavbarSlider() {
           <Logo />
         </Link>
 
-        <Button
+        <UIIconButton
           data-fs-navbar-slider-button
           aria-label="Close Menu"
           icon={<Icon name="X" width={32} height={32} />}

package/src/components/common/Navbar/navbar.module.scss

@@ -177,7 +177,7 @@
         }
       }
 
-      [data-fs-button-icon="true"] {
+      [data-fs-icon-button="true"] {
         margin-right: var(--fs-navbar-search-expanded-button-icon-margin-right);
         transition: margin var(--fs-navbar-transition-timing) var(--fs-navbar-transition-function);
       }

package/src/components/product/OutOfStock/OutOfStock.tsx

@@ -2,13 +2,13 @@ import {
   OutOfStock as UIOutOfStock,
   OutOfStockTitle as UIOutOfStockTitle,
   OutOfStockMessage as UIOutOfStockMessage,
+  Button as UIButton,
+  InputField as UIInputField,
 } from '@faststore/ui'
 import { useState } from 'react'
 import type { ReactElement, FormEvent } from 'react'
 
-import Button from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
-import InputText from 'src/components/ui/InputText'
 import styles from 'src/components/product/OutOfStock/out-of-stock.module.scss'
 import { useSession } from 'src/sdk/session'
 
@@ -106,7 +106,7 @@ function OutOfStock(props: OutOfStockProps) {
       <UIOutOfStockMessage data-fs-out-of-stock-message>
         {notificationMsgIcon} {notificationMsg}
       </UIOutOfStockMessage>
-      <InputText
+      <UIInputField
         id="out-of-stock-email"
         value={email}
         label="Email"
@@ -117,7 +117,7 @@ function OutOfStock(props: OutOfStockProps) {
           setEmail(e.target.value)
         }}
       />
-      <Button
+      <UIButton
         data-fs-out-of-stock-button
         type="submit"
         disabled={disabled}
@@ -126,7 +126,7 @@ function OutOfStock(props: OutOfStockProps) {
         iconPosition="left"
       >
         {buttonText}
-      </Button>
+      </UIButton>
     </UIOutOfStock>
   )
 }

package/src/components/product/ProductCard/ProductCard.stories.mdx

@@ -25,7 +25,7 @@ import {
       control: { type: 'radio' },
       table: { defaultValue: '1' },
     },
-    ButtonBuy: {
+    BuyButton: {
       control: 'boolean',
       table: { defaultValue: false },
     },
@@ -63,8 +63,8 @@ export const product = {
   },
 }
 
-export const Template = ({ ButtonBuy, ...args }) => {
-  const button = ButtonBuy ? (
+export const Template = ({ BuyButton, ...args }) => {
+  const button = BuyButton ? (
     <Button
       variant="primary"
       data-fs-button-size="small"
@@ -76,13 +76,13 @@ export const Template = ({ ButtonBuy, ...args }) => {
   ) : null
   return (
     <div style={{ width: 300 }}>
-      <ProductCard ButtonBuy={button} {...args} />
+      <ProductCard BuyButton={button} {...args} />
     </div>
   )
 }
 
-export const TemplateWide = ({ ButtonBuy, ...args }) => {
-  const button = ButtonBuy ? (
+export const TemplateWide = ({ BuyButton, ...args }) => {
+  const button = BuyButton ? (
     <Button
       variant="primary"
       data-fs-button-size="small"
@@ -94,7 +94,7 @@ export const TemplateWide = ({ ButtonBuy, ...args }) => {
   ) : null
   return (
     <div style={{ width: 400 }}>
-      <ProductCard ButtonBuy={button} {...args} />
+      <ProductCard BuyButton={button} {...args} />
     </div>
   )
 }
@@ -120,7 +120,7 @@ The `ProductCard` component uses [FastStore UI ProductCard](https://www.faststor
       variant: 'default',
       bordered: false,
       aspectRatio: 1,
-      ButtonBuy: false,
+      BuyButton: false,
     }}
   >
     {Template.bind({})}
@@ -133,7 +133,7 @@ The `ProductCard` component uses [FastStore UI ProductCard](https://www.faststor
       variant: 'default',
       bordered: true,
       aspectRatio: 1,
-      ButtonBuy: false,
+      BuyButton: false,
     }}
   >
     {Template.bind({})}
@@ -146,7 +146,7 @@ The `ProductCard` component uses [FastStore UI ProductCard](https://www.faststor
       variant: 'wide',
       bordered: false,
       aspectRatio: 1.5,
-      ButtonBuy: false,
+      BuyButton: false,
     }}
   >
     {TemplateWide.bind({})}
@@ -166,7 +166,7 @@ The `ProductCard` component uses [FastStore UI ProductCard](https://www.faststor
       variant: 'default',
       bordered: false,
       aspectRatio: 1,
-      ButtonBuy: false,
+      BuyButton: false,
     }}
   >
     {Template.bind({})}
@@ -342,7 +342,7 @@ The `ProductCard` component uses [FastStore UI ProductCard](https://www.faststor
       variant: 'default',
       bordered: false,
       aspectRatio: 1,
-      ButtonBuy: false,
+      BuyButton: false,
     }}
   >
     {Template.bind({})}
@@ -360,7 +360,7 @@ The `ProductCard` component uses [FastStore UI ProductCard](https://www.faststor
       variant: 'default',
       bordered: true,
       aspectRatio: 1,
-      ButtonBuy: false,
+      BuyButton: false,
     }}
   >
     {Template.bind({})}
@@ -390,7 +390,7 @@ The `ProductCard` component uses [FastStore UI ProductCard](https://www.faststor
       variant: 'wide',
       bordered: false,
       aspectRatio: 1.5,
-      ButtonBuy: false,
+      BuyButton: false,
     }}
   >
     {TemplateWide.bind({})}