@faststore/core 2.0.115-alpha.0 → 2.0.117-alpha.0

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

@@ -1,179 +0,0 @@
-import { UIProvider } from '@faststore/ui'
-
-import Navbar, { NavLinks } from '.'
-
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-import { SectionList, SectionItem } from 'src/../.storybook/components'
-
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-<Meta component={Navbar} title="Organisms/Navbar/Overview" />
-
-export const Template = () => {
-  return (
-    <UIProvider>
-      <Navbar />
-    </UIProvider>
-  )
-}
-
-<header>
-
-# Navbar
-
-The `Navbar` represents the **Page Header** and groups some features like: `Search`, `Regionalization`, `SignIn`, `CartSidebar`.
-
-</header>
-
-## Overview
-
-Uses [NavLinks](?path=/docs/organisms-navbar-navlinks--overview-default) and [NavbarSlider](?path=/docs/organisms-navbar-navbarslider--overview-default) as compound components.
-
----
-
-## Usage
-
-`import Navbar from 'src/components/common/Navbar'`
-
-<Canvas>
-  <Story name="overview-default">{Template.bind({})}</Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-navbar-height-mobile" value="3.5rem" />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-navbar-bkg-color"
-    value="rgb(255 255 255 / 90%)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-navbar-transition-timing"
-    value="var(--fs-transition-timing)"
-  />
-  <TokenRow
-    token="--fs-navbar-transition-function"
-    value="var(--fs-transition-function)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-navbar-box-shadow"
-    value="0 var(--fs-spacing-0) var(--fs-spacing-3) rgb(0 0 0 / 5%)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-navbar-border-bottom-width"
-    value="var(--fs-border-width)"
-  />
-  <TokenRow
-    token="--fs-navbar-border-bottom-color"
-    value="var(--fs-border-color-light)"
-    isColor
-  />
-</TokenTable>
-
----
-
-## Nested Elements
-
-### Search
-
-<TokenTable>
-  <TokenRow
-    token="--fs-navbar-search-button-icon-width-mobile"
-    value="var(--fs-spacing-5)"
-  />
-  <TokenRow
-    token="--fs-navbar-search-button-icon-height-mobile"
-    value="var(--fs-navbar-search-button-icon-width-mobile)"
-  />
-</TokenTable>
-
-### Search Expanded
-
-<TokenTable>
-  <TokenRow
-    token="--fs-navbar-search-expanded-input-wrapper-margin-right"
-    value="0.625rem"
-  />
-  <TokenRow
-    token="--fs-navbar-search-expanded-input-wrapper-margin-left"
-    value="var(--fs-spacing-9)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-navbar-search-expanded-input-width"
-    value="calc(100% - var(--fs-spacing-7))"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-navbar-search-expanded-button-icon-margin-right"
-    value="-4.063rem"
-  />
-</TokenTable>
-
-### Header
-
-<TokenTable>
-  <TokenRow token="--fs-navbar-header-padding" value="0 var(--fs-spacing-0)" />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-navbar-header-padding-top-notebook"
-    value="var(--fs-spacing-1)"
-  />
-  <TokenRow
-    token="--fs-navbar-header-padding-bottom-notebook"
-    value="var(--fs-navbar-header-padding-top-notebook)"
-  />
-</TokenTable>
-
-### Logo
-
-<TokenTable>
-  <TokenRow
-    token="--fs-navbar-logo-border-left-width"
-    value="var(--fs-border-width)"
-  />
-  <TokenRow
-    token="--fs-navbar-logo-border-left-color"
-    value="var(--fs-border-color-light)"
-    isColor
-  />
-</TokenTable>
-
----
-
-## Compound Components
-
-<SectionList grid="grid">
-  <SectionItem
-    title="Navbar Slider"
-    actionPath="../?path=/docs/organisms-navbar-navbarslider--overview-default"
-    description={
-      <>
-        Displays the <code>NavLinks</code> and some features using{' '}
-        <code>SlideOver</code> component.
-      </>
-    }
-  >
-    <img src="https://vtexhelp.vtexassets.com/assets/docs/src/navlinks___52dff993e0e04dea5d02c1e1a5bbf4e3.png" />
-  </SectionItem>
-  <SectionItem
-    title="NavLinks"
-    actionPath="../?path=/docs/organisms-navbar-navlinks--overview-default"
-    description={
-      <>
-        Displays a set navigation links and self adapts on mobile{' '}
-        <code>NavbarSlider</code> or desktop screens.
-      </>
-    }
-  >
-    <img src="https://vtexhelp.vtexassets.com/assets/docs/src/navlinks___ad2d67dbdbac8ea8ccb4e5a7d453a997.png" />
-  </SectionItem>
-</SectionList>

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

@@ -1,108 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import { UIProvider, useUI } from '@faststore/ui'
-
-import { Button } from '@faststore/ui'
-import Icon from 'src/components/ui/Icon'
-
-import { NavbarSlider } from '.'
-
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-<Meta component={NavbarSlider} title="Organisms/Navbar/NavbarSlider" />
-
-export const TemplateNavbarSlider = () => {
-  const { openNavbar, navbar: displayNavbar } = useUI()
-  return (
-    <div style={{ display: 'flex', alignItems: 'center' }}>
-      <Button
-        aria-label="Open Menu"
-        icon={<Icon name="List" width={32} height={32} />}
-        onClick={openNavbar}
-      />
-      <p style={{ marginLeft: '12px' }}>Open Menu</p>
-      {displayNavbar && <NavbarSlider />}
-    </div>
-  )
-}
-
-export const TemplateProvider = () => {
-  return (
-    <UIProvider>
-      <TemplateNavbarSlider />
-    </UIProvider>
-  )
-}
-
-<header>
-
-# Navbar Slider
-
-As part of the [Navbar](?path=/docs/organisms-navbar-overview--overview-default), NavbarSlider is its mobile version to list the `NavLinks`.
-
-</header>
-
-## Overview
-
-Uses [SlideOver](?path=/docs/organisms-slideover--default-story) as base to show [Navlinks](?path=/docs/organisms-navbar-navlinks--overview-default) on mobile devices.
-
----
-
-## Usage
-
-`import { NavbarSlider } from 'src/components/common/Navbar'`
-
-<Canvas>
-  <Story name="overview-default">{TemplateProvider.bind({})}</Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-navbar-slider-padding" value="var(--fs-spacing-3)" />
-</TokenTable>
-
----
-
-## Nested Elements
-
-### Header
-
-<TokenTable>
-  <TokenRow
-    token="--fs-navbar-slider-header-padding-bottom"
-    value="var(--fs-spacing-2)"
-  />
-  <TokenRow
-    token="--fs-navbar-slider-header-button-margin-right"
-    value="calc(-1 * var(--fs-spacing-1))"
-  />
-</TokenTable>
-
-### Logo
-
-<TokenTable>
-  <TokenRow token="--fs-navbar-slider-logo-height" value="2.375rem" />
-  <TokenDivider />
-  <TokenRow token="--fs-navbar-slider-logo-padding" value="0" />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-navbar-slider-logo-margin-right"
-    value="var(--fs-spacing-5)"
-  />
-</TokenTable>
-
-### Footer
-
-<TokenTable>
-  <TokenRow
-    token="--fs-navbar-slider-footer-padding-top"
-    value="var(--fs-spacing-2)"
-  />
-  <TokenRow
-    token="--fs-navbar-slider-footer-margin-top"
-    value="var(--fs-spacing-2)"
-  />
-</TokenTable>

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

@@ -1,3 +0,0 @@
-export { default } from './Navbar'
-export { default as NavbarSlider } from './NavbarSlider'
-export { default as NavLinks } from './NavLinks'

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

@@ -1,53 +0,0 @@
-.fs-navbar-slider {
-  // --------------------------------------------------------
-  // Design Tokens for Navbar Slider
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-navbar-slider-padding                    : var(--fs-spacing-3);
-
-  // Header
-  --fs-navbar-slider-header-padding-bottom      : var(--fs-spacing-2);
-  --fs-navbar-slider-header-button-margin-right : calc(-1 * var(--fs-spacing-1));
-
-  // Logo
-  --fs-navbar-slider-logo-height                : 2.375rem;
-  --fs-navbar-slider-logo-padding               : 0;
-  --fs-navbar-slider-logo-margin-right          : var(--fs-spacing-5);
-
-  // Footer
-  --fs-navbar-slider-footer-padding-top         : var(--fs-spacing-2);
-  --fs-navbar-slider-footer-margin-top          : var(--fs-spacing-2);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  padding: var(--fs-navbar-slider-padding);
-
-  [data-fs-slide-over-header] {
-    padding: 0;
-    padding-bottom: var(--fs-navbar-slider-header-padding-bottom);
-  }
-
-  [data-fs-navbar-slider-logo] {
-    height: var(--fs-navbar-slider-logo-height);
-    padding: var(--fs-navbar-slider-logo-padding);
-    margin-right: var(--fs-navbar-slider-logo-margin-right);
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  [data-fs-navbar-slider-footer] {
-    padding-top: var(--fs-navbar-slider-footer-padding-top);
-    margin-top: var(--fs-navbar-slider-footer-margin-top);
-
-    [data-fs-button-signin-link] {
-      width: fit-content;
-      padding-left: 0;
-    }
-  }
-}

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

@@ -1,204 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-navbar {
-  // --------------------------------------------------------
-  // Design Tokens for Navbar
-  // --------------------------------------------------------
-
-  // Default properties
-
-  --fs-navbar-height-mobile                              : 3.5rem;
-
-  --fs-navbar-bkg-color                                  : rgb(255 255 255 / 90%);
-
-  --fs-navbar-transition-timing                          : var(--fs-transition-timing);
-  --fs-navbar-transition-function                        : var(--fs-transition-function);
-
-  --fs-navbar-box-shadow                                 : 0 var(--fs-spacing-0) var(--fs-spacing-3) rgb(0 0 0 / 5%);
-
-  // Search
-  --fs-navbar-search-button-icon-width-mobile            : var(--fs-spacing-5);
-  --fs-navbar-search-button-icon-height-mobile           : var(--fs-navbar-search-button-icon-width-mobile);
-
-  // Search Expanded
-  --fs-navbar-search-expanded-input-wrapper-margin-right : 0.625rem;
-  --fs-navbar-search-expanded-input-wrapper-margin-left  : var(--fs-spacing-9);
-
-  --fs-navbar-search-expanded-input-width                : calc(100% - var(--fs-spacing-7));
-
-  --fs-navbar-search-expanded-button-icon-margin-right   : -4.063rem;
-
-  // Header
-  --fs-navbar-header-padding                              : 0 var(--fs-spacing-0);
-
-  --fs-navbar-header-padding-top-notebook                : var(--fs-spacing-1);
-  --fs-navbar-header-padding-bottom-notebook             : var(--fs-navbar-header-padding-top-notebook);
-
-  // Logo
-  --fs-navbar-logo-border-left-width                     : var(--fs-border-width);
-  --fs-navbar-logo-border-left-color                     : var(--fs-border-color-light);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  position: sticky;
-  top: 0;
-  z-index: var(--fs-z-index-high);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 0;
-  box-shadow: var(--fs-navbar-box-shadow);
-  transition: top var(--fs-navbar-transition-timing) var(--fs-navbar-transition-function);
-
-  @include media("<notebook") {
-    height: var(--fs-navbar-height-mobile);
-  }
-
-  &[data-fs-navbar-scroll="down"] {
-    > nav {
-      top: calc(-1 * var(--fs-spacing-3));
-      height: 0;
-      padding: 0;
-      opacity: 0;
-    }
-  }
-
-  &[data-fs-navbar-scroll="up"] {
-    > nav {
-      top: 0;
-      opacity: 1;
-    }
-  }
-
-  [data-fs-search-input] {
-    flex: 1 0 100%;
-    order: 2;
-
-    @include media("<notebook") {
-      display: none;
-    }
-  }
-
-  [data-fs-navbar-row] {
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-
-    @include media("<notebook") {
-      padding: 0;
-    }
-
-    @include media(">=notebook") {
-      display: grid;
-      grid-template-columns: 1fr minmax(auto, 37.5rem) 1fr;
-    }
-
-    [data-fs-navbar-button-menu] {
-      @include media(">=notebook") { display: none; }
-    }
-  }
-
-  [data-fs-navbar-buttons] {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-
-    [data-fs-button-signin-link] + [data-fs-cart-toggle] {
-      @include media(">=notebook") {
-        margin-left: var(--fs-spacing-3);
-      }
-    }
-
-    [data-fs-button-signin-link] {
-      display: none;
-    }
-
-    @include media(">=notebook") {
-      order: 2;
-
-      [data-fs-button-signin-link] {
-        display: inline-flex;
-      }
-    }
-
-    [data-fs-search-input] {
-      display: none;
-      transition: flex var(--fs-navbar-transition-timing) var(--fs-navbar-transition-function);
-
-      @include media("<notebook") {
-        display: flex;
-        flex: 0;
-        flex-direction: column;
-        order: 0;
-        width: min-content;
-
-        &[data-fs-search-input-dropdown-visible="false"] [data-fs-search-input-field-input] {
-          width: 0;
-          padding: 0;
-          border-width: 0;
-
-          &:hover, &:focus, &:focus-visible &:hover:focus-visible {
-            border-width: 0;
-            box-shadow: 0 0;
-          }
-        }
-
-        [data-fs-icon] {
-          margin-right: 0;
-          line-height: 0;
-
-          svg {
-            width: var(--fs-navbar-search-button-icon-width-mobile);
-            height: var(--fs-navbar-search-button-icon-height-mobile);
-          }
-        }
-      }
-    }
-
-    &[data-fs-navbar-search-expanded="true"] {
-      width: 100%;
-
-      [data-fs-search-input] {
-        flex: 1 1;
-        margin-right: var(--fs-navbar-search-expanded-input-wrapper-margin-right);
-        margin-left: var(--fs-navbar-search-expanded-input-wrapper-margin-left);
-
-        [data-fs-search-input-field] [data-fs-search-input-field-input] {
-          width: var(--fs-navbar-search-expanded-input-width);
-          padding: var(--fs-spacing-2);
-        }
-
-        [data-fs-icon] {
-          margin-right: 0;
-        }
-      }
-
-      [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);
-      }
-    }
-  }
-
-  [data-fs-navbar-header] {
-    padding: var(--fs-navbar-header-padding);
-    overflow-x: clip;
-    background-color: var(--fs-navbar-bkg-color);
-    backdrop-filter: blur(10px);
-  }
-
-  [data-fs-navbar-logo] {
-    align-self: stretch;
-
-    @include media("<notebook") {
-      padding: var(--fs-spacing-1) 0 var(--fs-spacing-1) var(--fs-spacing-3);
-      margin-right: auto;
-      margin-left: var(--fs-spacing-0);
-      border-left: var(--fs-navbar-logo-border-left-width) solid var(--fs-navbar-logo-border-left-color);
-    }
-  }
-}

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

@@ -1,96 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-navlinks {
-  // --------------------------------------------------------
-  // Design Tokens for Navlinks
-  // --------------------------------------------------------
-
-  --fs-navlinks-padding-top-notebook             : var(--fs-spacing-1);
-  --fs-navlinks-padding-bottom-notebook          : var(--fs-navlinks-padding-top-notebook);
-
-  --fs-navlinks-bkg-color                        : var(--fs-color-body-bkg);
-
-  --fs-navlinks-transition-property              : var(--fs-transition-property);
-  --fs-navlinks-transition-timing                : var(--fs-transition-timing);
-  --fs-navlinks-transition-function              : var(--fs-transition-function);
-
-  --fs-navlinks-border-top-width-mobile          : var(--fs-border-width);
-  --fs-navlinks-border-top-color-mobile          : var(--fs-border-color-light);
-  --fs-navlinks-border-bottom-width-mobile       : var(--fs-navlinks-border-top-width-mobile);
-  --fs-navlinks-border-bottom-color-mobile       : var(--fs-navlinks-border-top-color-mobile);
-
-  // Link
-  --fs-navlinks-link-width-notebook              : auto;
-  --fs-navlinks-link-padding-notebook            : 0 var(--fs-spacing-0);
-
-  // List
-  --fs-navlinks-list-padding-left-notebook       : var(--fs-spacing-3);
-  --fs-navlinks-list-margin-left-notebook        : var(--fs-spacing-2);
-  --fs-navlinks-list-border-left-width-notebook  : var(--fs-border-width);
-  --fs-navlinks-list-border-left-color-notebook  : var(--fs-border-color-light);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  position: relative;
-  background-color: var(--fs-navlinks-bkg-color);
-  transition: var(--fs-navlinks-transition-property) var(--fs-navlinks-transition-timing) var(--fs-navlinks-transition-function);
-
-  @include media("<notebook") { padding: 0; }
-
-  @include media(">=notebook") {
-    z-index: var(--fs-z-index-below);
-
-    > div {
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  [data-fs-navlinks-list-item] {
-    display: flex;
-    align-items: center;
-  }
-
-  [data-fs-button] {
-    margin-left: calc(-1 * var(--fs-spacing-1));
-
-    // TODO: remove this after navbar 2.0 is implemented
-    &[data-fs-button-variant="tertiary"] {
-      color: var(--fs-color-text-display);
-    }
-
-    @include media("<notebook") {
-      display: none;
-    }
-  }
-
-  [data-fs-navlinks-link] {
-    display: block;
-    width: 100%;
-  }
-
-  @include media(">=notebook") {
-    padding-top: var(--fs-navlinks-padding-top-notebook);
-    padding-bottom: var(--fs-navlinks-padding-bottom-notebook);
-
-    [data-fs-navlinks-list] {
-      display: flex;
-      column-gap: var(--fs-spacing-3);
-      padding-left: var(--fs-navlinks-list-padding-left-notebook);
-      margin-left: var(--fs-navlinks-list-margin-left-notebook);
-      border-left: var(--fs-navlinks-list-border-left-width-notebook) solid var(--fs-navlinks-list-border-left-color-notebook);
-    }
-
-    [data-fs-navlinks-link] {
-      width: var(--fs-navlinks-link-width-notebook);
-      padding: var(--fs-navlinks-link-padding-notebook);
-    }
-  }
-
-  @include media("<notebook") {
-    border-top: var(--fs-navlinks-border-top-width-mobile) solid var(--fs-navlinks-border-top-color-mobile);
-    border-bottom: var(--fs-navlinks-border-bottom-width-mobile) solid var(--fs-navlinks-border-bottom-color-mobile);
-  }
-}

package/src/sdk/ui/useScrollDirection.ts

@@ -1,31 +0,0 @@
-import { useEffect, useState, useTransition } from 'react'
-
-export default function useScrollDirection() {
-  const [scrollDirection, setScrollDirection] = useState<string>('')
-  const [isPending, startTransition] = useTransition()
-
-  useEffect(() => {
-    let lastScrollY = window.scrollY
-
-    const updateScrollDirection = () => {
-      const { scrollY } = window
-      const direction = scrollY > lastScrollY ? 'down' : 'up'
-
-      if (
-        !isPending &&
-        direction !== scrollDirection &&
-        (scrollY - lastScrollY > 10 || scrollY - lastScrollY < -10)
-      ) {
-        startTransition(() => setScrollDirection(direction))
-      }
-
-      lastScrollY = scrollY > 0 ? scrollY : 0
-    }
-
-    window.addEventListener('scroll', updateScrollDirection)
-
-    return () => window.removeEventListener('scroll', updateScrollDirection)
-  }, [isPending, scrollDirection])
-
-  return scrollDirection
-}