@faststore/core 0.3.14 → 0.3.16

package/src/components/ui/ShippingSimulation/useShippingSimulation.ts

@@ -196,7 +196,7 @@ export const useShippingSimulation = (shippingItem: IShippingItem) => {
         },
       })
     }
-  }, [shippingPostalCode])
+  }, [country, shippingItem, shippingPostalCode])
 
   const handleOnInput = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     const currentValue = e.currentTarget.value

package/src/customizations/components/index.ts

@@ -1 +1,2 @@
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {}

package/src/pages/[...slug].tsx

@@ -1,16 +1,20 @@
 import { isNotFoundError } from '@faststore/api'
+import { gql } from '@faststore/graphql-utils'
+import type { SearchState } from '@faststore/sdk'
 import {
   formatSearchState,
   parseSearchState,
   SearchProvider,
 } from '@faststore/sdk'
-import { gql } from '@faststore/graphql-utils'
+import type { GetStaticPaths, GetStaticProps } from 'next'
 import { BreadcrumbJsonLd, NextSeo } from 'next-seo'
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
-import type { SearchState } from '@faststore/sdk'
-import type { GetStaticPaths, GetStaticProps } from 'next'
 
+import type {
+  ServerCollectionPageQueryQuery,
+  ServerCollectionPageQueryQueryVariables,
+} from '@generated/graphql'
 import Breadcrumb from 'src/components/sections/Breadcrumb'
 import Hero from 'src/components/sections/Hero'
 import ProductGallery from 'src/components/sections/ProductGallery'
@@ -21,10 +25,6 @@ import { ITEMS_PER_PAGE, ITEMS_PER_SECTION } from 'src/constants'
 import { useApplySearchState } from 'src/sdk/search/state'
 import { mark } from 'src/sdk/tests/mark'
 import { execute } from 'src/server'
-import type {
-  ServerCollectionPageQueryQuery,
-  ServerCollectionPageQueryQueryVariables,
-} from '@generated/graphql'
 
 import storeConfig from '../../faststore.config'
 
@@ -105,7 +105,7 @@ function Page(props: Props) {
         subtitle={`All the amazing ${title} from the brands we partner with.`}
         imageSrc="https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg"
         imageAlt="Quest 2 Controller on a table"
-        icon={<Icon name="Headphones" width={48} height={48} weight="thin" />}
+        icon={<Icon name="Headphones" width={48} height={48} />}
       />
 
       <ProductGallery title={title} />

package/src/pages/s.tsx

@@ -3,10 +3,10 @@ import { NextSeo } from 'next-seo'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import type { SearchState } from '@faststore/sdk'
+import { SROnly as UISROnly } from '@faststore/ui'
 
 import Breadcrumb from 'src/components/sections/Breadcrumb'
 import ProductGallery from 'src/components/sections/ProductGallery'
-import SROnly from 'src/components/ui/SROnly'
 import { ITEMS_PER_PAGE } from 'src/constants'
 import { useApplySearchState } from 'src/sdk/search/state'
 import { mark } from 'src/sdk/tests/mark'
@@ -55,7 +55,7 @@ function Page() {
         }}
       />
 
-      <SROnly as="h1" text={title} />
+      <UISROnly as="h1" text={title} />
 
       {/*
         WARNING: Do not import or render components from any

package/src/sdk/error/ErrorBoundary/ErrorBoundary.tsx

@@ -27,7 +27,6 @@ class ErrorBoundary extends Component<{ children: ReactNode }> {
 
   // We can't accurately type the error here, since it could vary depending on
   // what caused it. This is not standardized.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public componentDidCatch(error: any, errorInfo: ErrorInfo) {
     console.error(`React Error: ${error.message} ${errorInfo.componentStack}`)
 

package/src/sdk/ui/useOnClickOutside.ts

@@ -1,7 +1,6 @@
 import type { RefObject } from 'react'
 import { useEffect } from 'react'
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Handler = (event: any) => void
 
 export default function useOnClickOutside<T extends HTMLElement = HTMLElement>(

package/src/server/cms.ts

@@ -15,7 +15,6 @@ type Options =
       filters?: Record<string, string>
     }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const isLocator = (x: any): x is Locator =>
   typeof x.contentType === 'string' &&
   (typeof x.releaseId === 'string' || typeof x.documentId === 'string')

package/vtex.env

@@ -5,10 +5,10 @@ NEXT_TELEMETRY_DISABLED=true
 ## Enable re-using node_modules from previous runs for faster builds
 USE_BUILD_CACHE=true
 
-## Enable Incremental Static Builds (ISB): 
+## Enable Incremental Static Builds (ISB):
 ## https://www.faststore.dev/releases/2022/05/19/webops
 USE_STALE_CACHE=true
 
-## Production site host your users will 
+## Production site host your users will
 ## access your website
 SITE_HOST=demo.faststore.dev

package/.eslintignore

@@ -1,8 +0,0 @@
-package.json
-node_modules/
-public/
-coverage/
-.vscode/
-.cache/
-@generated
-src/typings/

package/.eslintrc

@@ -1,21 +0,0 @@
-{
-  "extends": [
-    "vtex-react/gatsby",
-    "next/core-web-vitals"
-  ],
-  "root": true,
-  "rules": {
-    "react/prop-types": "off",
-    "react/react-in-jsx-scope": "off",
-    "jsx-a11y/anchor-is-valid": "off"
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "ignorePatterns": [
-    "public/~partytown/*",
-    "next-env.d.ts"
-  ]
-}

package/renovate.json

@@ -1,5 +0,0 @@
-{
-  "extends": [
-    "@vtex"
-  ]
-}

package/src/components/sections/Hero/Hero.stories.mdx

@@ -1,277 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
-import { TokenTable, TokenRow } from 'src/../.storybook/components'
-
-import Hero from '.'
-import Icon from 'src/components/ui/Icon'
-
-<Meta
-  title="Organisms/Hero"
-  component={Hero}
-  argTypes={{
-    imageAlt: {
-      control: {
-        disable: true,
-      },
-    },
-    imageSrc: {
-      control: {
-        disable: true,
-      },
-    },
-    variant: {
-      defaultValue: 'primary',
-    },
-    colorVariant: {
-      defaultValue: 'main',
-    },
-    icon: {
-      control: { disable: true },
-    },
-  }}
-/>
-
-export const Template = (args) => <Hero {...args} />
-
-<header>
-
-# Hero
-
-The `Hero` component is a full-width banner presented on the above-the-fold section of a web page with the intent to show the brand's identity and messaging.
-
-</header>
-
-## Overview
-
-The `Hero` component uses [FastStore UI Hero](https://www.faststore.dev/reference/ui/organisms/Hero) as base.
-
----
-
-## Usage
-
-`import Hero from 'src/components/sections/Hero'`
-
-<Canvas>
-  <Story
-    name="usage"
-    args={{
-      title: 'Explore more about our amazing products',
-      subtitle: 'All the amazing products from the brands we partner with.',
-      imageSrc:
-        'https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg',
-      imageAlt: 'Quest 2 Controller on a table',
-      link: '/',
-      linkText: 'See more',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="usage" />
-
-<TokenTable>
-  <TokenRow token="--fs-hero-text-size" value="var(--fs-text-size-lead)" />
-  <TokenRow token="--fs-hero-text-line-height" value="1.33" />
-</TokenTable>
-
----
-
-## Nested Elements
-
-### Image
-
-<TokenTable>
-  <TokenRow token="--fs-hero-image-border-radius" value="0" />
-</TokenTable>
-
-### Title
-
-<TokenTable>
-  <TokenRow
-    token="--fs-hero-title-padding"
-    value="var(--fs-spacing-5) 0 var(--fs-spacing-6)"
-  />
-  <TokenRow
-    token="--fs-hero-title-weight"
-    value="var(--fs-text-weight-black)"
-  />
-  <TokenRow token="--fs-hero-title-line-height" value="1.1" />
-</TokenTable>
-
-### Subtitle
-
-<TokenTable>
-  <TokenRow
-    token="--fs-hero-subtitle-margin-top-mobile"
-    value="var(--fs-spacing-2)"
-  />
-  <TokenRow
-    token="--fs-hero-subtitle-margin-top-tablet"
-    value="var(--fs-spacing-4)"
-  />
-  <TokenRow token="--fs-hero-subtitle-size" value="var(--fs-hero-text-size)" />
-  <TokenRow
-    token="--fs-hero-subtitle-line-height"
-    value="var(--fs-hero-text-line-height)"
-  />
-</TokenTable>
-
----
-
-## Hierarchy
-
-### Primary
-
-<Canvas>
-  <Story
-    name="primary"
-    args={{
-      variant: 'primary',
-      title: 'Explore more about our amazing products',
-      subtitle: 'All the amazing products from the brands we partner with.',
-      imageSrc:
-        'https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg',
-      imageAlt: 'Quest 2 Controller on a table',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-hero-primary-image-height-mobile" value="15rem" />
-  <TokenRow token="--fs-hero-primary-image-height-desktop" value="29rem" />
-  <TokenRow
-    token="--fs-hero-primary-title-size"
-    value="var(--fs-text-size-title-huge)"
-  />
-</TokenTable>
-
-### Secondary
-
-<Canvas>
-  <Story
-    name="secondary"
-    args={{
-      variant: 'secondary',
-      title: 'Explore more about our amazing products',
-      subtitle: 'All the amazing products from the brands we partner with.',
-      imageSrc:
-        'https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg',
-      imageAlt: 'Quest 2 Controller on a table',
-      icon: <Icon name="House" width="40" height="40" />,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-hero-secondary-image-height-mobile" value="11.25rem" />
-  <TokenRow
-    token="--fs-hero-secondary-image-height-desktop"
-    value="14.188rem"
-  />
-  <TokenRow
-    token="--fs-hero-secondary-title-size"
-    value="var(--fs-text-size-title-page)"
-  />
-</TokenTable>
-
----
-
-## Variants
-
-### Main
-
-<Canvas>
-  <Story
-    name="main"
-    args={{
-      colorVariant: 'main',
-      title: 'Explore more about our amazing products',
-      subtitle: 'All the amazing products from the brands we partner with.',
-      imageSrc:
-        'https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg',
-      imageAlt: 'Quest 2 Controller on a table',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-hero-main-bkg-color"
-    value="var(--fs-color-primary-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-hero-main-text-color"
-    value="var(--fs-color-primary-text)"
-    isColor
-  />
-</TokenTable>
-
-### Light
-
-<Canvas>
-  <Story
-    name="light"
-    args={{
-      colorVariant: 'light',
-      title: 'Explore more about our amazing products',
-      subtitle: 'All the amazing products from the brands we partner with.',
-      imageSrc:
-        'https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg',
-      imageAlt: 'Quest 2 Controller on a table',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-hero-light-bkg-color"
-    value="var(--fs-color-secondary-bkg-light)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-hero-light-text-color"
-    value="var(--fs-color-text-display)"
-    isColor
-  />
-</TokenTable>
-
-### Accent
-
-<Canvas>
-  <Story
-    name="accent"
-    args={{
-      colorVariant: 'accent',
-      title: 'Explore more about our amazing products',
-      subtitle: 'All the amazing products from the brands we partner with.',
-      imageSrc:
-        'https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg',
-      imageAlt: 'Quest 2 Controller on a table',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-hero-accent-bkg-color"
-    value="var(--fs-color-highlighted-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-hero-accent-text-color"
-    value="var(--fs-hero-light-text-color)"
-    globalValue="var(--fs-color-text-display)"
-    isColor
-  />
-</TokenTable>

package/src/components/sections/Hero/hero.module.scss

@@ -1,180 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-hero {
-  // --------------------------------------------------------
-  // Design Tokens for Hero Section
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-hero-text-size                      : var(--fs-text-size-lead);
-  --fs-hero-text-line-height               : 1.33;
-
-  // Image
-  --fs-hero-image-border-radius            : 0;
-
-  // Title
-  --fs-hero-title-padding                  : var(--fs-spacing-5) 0 var(--fs-spacing-6);
-  --fs-hero-title-weight                   : var(--fs-text-weight-black);
-  --fs-hero-title-line-height              : 1.1;
-
-  // Subtitle
-  --fs-hero-subtitle-margin-top-mobile     : var(--fs-spacing-2);
-  --fs-hero-subtitle-margin-top-tablet     : var(--fs-spacing-4);
-  --fs-hero-subtitle-size                  : var(--fs-hero-text-size);
-  --fs-hero-subtitle-line-height           : var(--fs-hero-text-line-height);
-
-  // Primary
-  --fs-hero-primary-image-height-mobile    : 15rem; // 240px
-  --fs-hero-primary-image-height-desktop   : 29rem; // 464px
-  --fs-hero-primary-title-size             : var(--fs-text-size-title-huge);
-
-  // Secondary
-  --fs-hero-secondary-image-height-mobile  : 11.25rem;  // 180px
-  --fs-hero-secondary-image-height-desktop : 14.188rem; // 227px
-  --fs-hero-secondary-title-size           : var(--fs-text-size-title-page);
-
-  // Main
-  --fs-hero-main-bkg-color                 : var(--fs-color-primary-bkg);
-  --fs-hero-main-text-color                : var(--fs-color-primary-text);
-
-  // Light
-  --fs-hero-light-bkg-color                : var(--fs-color-secondary-bkg-light);
-  --fs-hero-light-text-color               : var(--fs-color-text-display);
-
-  // Accent
-  --fs-hero-accent-bkg-color               : var(--fs-color-highlighted-bkg);
-  --fs-hero-accent-text-color              : var(--fs-hero-light-text-color);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  @include media(">=tablet") {
-    position: relative;
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-  }
-
-  [data-fs-hero-image] {
-    border-radius: var(--fs-hero-image-border-radius);
-
-    @include media(">=tablet") {
-      position: absolute;
-      right: 0;
-      width: 50%;
-      height: 100%;
-      overflow: hidden;
-    }
-  }
-
-  [data-fs-hero-heading] {
-    width: 100%;
-    padding: var(--fs-hero-title-padding);
-  }
-
-  [data-fs-hero-wrapper] {
-    display: flex;
-    gap: var(--fs-spacing-3);
-    justify-content: space-between;
-
-    @include media(">=tablet") {
-      gap: var(--fs-spacing-1);
-      justify-content: flex-start;
-    }
-  }
-
-  [data-fs-hero-title] {
-    font-weight: var(--fs-hero-title-weight);
-    line-height: var(--fs-hero-title-line-height);
-  }
-
-  [data-fs-hero-subtitle] {
-    margin-top: var(--fs-hero-subtitle-margin-top-mobile);
-    font-size: var(--fs-hero-subtitle-size);
-    line-height: var(--fs-hero-subtitle-line-height);
-
-    @include media(">=tablet") { margin-top: var(--fs-hero-subtitle-margin-top-tablet); }
-  }
-
-  [data-fs-button] {
-    justify-content: space-between;
-    min-width: 11.25rem;
-    margin-top: var(--fs-spacing-6);
-  }
-
-  [data-fs-hero-icon] { color: var(--fs-hero-text-color); }
-
-  // --------------------------------------------------------
-  // Variants Styles
-  // --------------------------------------------------------
-
-  &[data-fs-hero-variant="primary"] {
-    @include media(">=tablet") { min-height: var(--fs-hero-primary-image-height-desktop); }
-
-    [data-fs-hero-title] { font-size: var(--fs-hero-primary-title-size); }
-
-    [data-fs-hero-heading] {
-      @include media(">=tablet") {
-        display: flex;
-        align-items: center;
-        padding: var(--fs-spacing-9) 0;
-      }
-    }
-
-    [data-fs-button] {
-      @include media(">=tablet") { margin-top: var(--fs-spacing-8); }
-    }
-
-    [data-fs-hero-image] {
-      @include media("<tablet") { height: var(--fs-hero-primary-image-height-mobile); }
-    }
-
-    [data-fs-hero-info] {
-      @include media(">=tablet") {
-        width: 46%;
-        padding-right: var(--fs-spacing-9);
-      }
-    }
-  }
-
-  &[data-fs-hero-variant="secondary"] {
-    @include media(">=tablet") { min-height: var(--fs-hero-secondary-image-height-desktop); }
-
-    [data-fs-hero-title] { font-size: var(--fs-hero-secondary-title-size); }
-
-    [data-fs-hero-info] {
-      @include media(">=tablet") {
-        width: 42%;
-      }
-    }
-
-    [data-fs-hero-heading] {
-      padding: var(--fs-spacing-4) 0 var(--fs-spacing-5);
-
-      @include media(">=tablet") { padding: var(--fs-spacing-5) 0; }
-    }
-
-    [data-fs-hero-image] {
-      @include media("<tablet") { height: var(--fs-hero-secondary-image-height-mobile); }
-    }
-  }
-
-  &[data-fs-hero-color-variant="main"] {
-    color: var(--fs-hero-main-text-color);
-    background-color: var(--fs-hero-main-bkg-color);
-  }
-
-  &[data-fs-hero-color-variant="light"] {
-    color: var(--fs-hero-light-text-color);
-    background-color: var(--fs-hero-light-bkg-color);
-  }
-
-  &[data-fs-hero-color-variant="accent"] {
-    color: var(--fs-hero-accent-text-color);
-    background-color: var(--fs-hero-accent-bkg-color);
-  }
-}

package/src/components/sections/ProducDetailsContent/product-details-content.module.scss

@@ -1,41 +0,0 @@
-.fs-product-details-content {
-  // -----------------------------
-  // Table
-  // -----------------------------
-
-  [data-fs-product-details-about] [data-fs-table] {
-    width: 100%;
-
-    [data-fs-accordion-item-button-icon] {
-      height: 18px;
-    }
-
-    [data-fs-icon] {
-      margin-right: var(--fs-spacing-2);
-    }
-
-    tr:nth-child(even) td {
-      background-color: var(--fs-color-neutral-1);
-      border-top-right-radius: var(--fs-border-radius);
-      border-bottom-right-radius: var(--fs-border-radius);
-    }
-
-    tr:nth-child(even) th {
-      background-color: var(--fs-color-neutral-1);
-      border-top-left-radius: var(--fs-border-radius);
-      border-bottom-left-radius: var(--fs-border-radius);
-    }
-
-    td {
-      padding: var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-2) 0;
-      text-align: right;
-    }
-
-    th {
-      display: flex;
-      padding: var(--fs-spacing-2) 0 var(--fs-spacing-2) var(--fs-spacing-3);
-      font-weight: normal;
-      text-align: left;
-    }
-  }
-}

package/src/components/ui/SROnly/SROnly.tsx

@@ -1,20 +0,0 @@
-import type { ElementType } from 'react'
-
-import styles from './sr-only.module.scss'
-
-interface Props {
-  text: string
-  as?: ElementType
-}
-
-function SROnly({ text, as }: Props) {
-  const Component = as ?? 'span'
-
-  return (
-    <Component className={styles.fsSrOnly} data-fs-sr-only>
-      {text}
-    </Component>
-  )
-}
-
-export default SROnly

package/src/components/ui/SROnly/index.ts

@@ -1 +0,0 @@
-export { default } from './SROnly'