@faststore/core 0.3.16 → 2.0.65-alpha.0

package/src/components/ui/Dropdown/DropdownMenu.stories.mdx

@@ -1,115 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import Dropdown, { DropdownButton, DropdownMenu, DropdownItem } from '.'
-import Icon from '../Icon'
-
-import style from 'src/components/ui/Button/button.module.scss'
-
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-<Meta title="Molecules/Dropdown/DropdownMenu" component={DropdownMenu} />
-
-export const Template = (args) => (
-  <Dropdown>
-    <DropdownButton
-      className={style.fsButton}
-      data-fs-button-variant="tertiary"
-    >
-      <Icon name="CaretDown" width="18" height="18" weight="bold" />
-      <span>Dropdown Menu</span>
-    </DropdownButton>
-    <DropdownMenu {...args}>
-      <DropdownItem>Dropdown Item 1</DropdownItem>
-      <DropdownItem>Dropdown Item 2</DropdownItem>
-      <DropdownItem>Dropdown Item 3</DropdownItem>
-    </DropdownMenu>
-  </Dropdown>
-)
-
-export const TemplateSmall = (args) => (
-  <Dropdown>
-    <DropdownButton
-      className={style.fsButton}
-      data-fs-button-variant="tertiary"
-    >
-      <Icon name="CaretDown" width="18" height="18" weight="bold" />
-      <span>Dropdown Menu Small</span>
-    </DropdownButton>
-    <DropdownMenu size="small">
-      <DropdownItem>Dropdown Item 1</DropdownItem>
-      <DropdownItem>Dropdown Item 2</DropdownItem>
-      <DropdownItem>Dropdown Item 3</DropdownItem>
-    </DropdownMenu>
-  </Dropdown>
-)
-
-<header>
-
-# Dropdown Menu
-
-Displays a set of actions/items to the user, usually used to show a menu of options.
-
-</header>
-
-## Overview
-
-The `DropdownMenu` is part of [Dropdown](?path=/docs/molecules-dropdown-default--default-story) component.
-
-<Canvas>
-  <Story name="overview-default">{Template.bind({})}</Story>
-  <Story name="overview-small">{TemplateSmall.bind({})}</Story>
-</Canvas>
-
----
-
-## Usage
-
-`import Dropdown, { DropdownButton, DropdownMenu, DropdownItem } from '../components/ui/Dropdown'`
-
-<Canvas>
-  <Story name="default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="default" />
-
-<TokenTable>
-  <TokenRow
-    token="--fs-dropdown-menu-bkg-color"
-    value="var(--fs-color-tertiary-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-dropdown-menu-border-radius"
-    value="var(--fs-border-radius)"
-  />
-  <TokenRow
-    token="--fs-dropdown-menu-box-shadow"
-    value="var(--fs-shadow-hover)"
-  />
-</TokenTable>
-
----
-
-## Variants
-
-### Small
-
-<Canvas>
-  <Story name="dropdown-menu-small">{TemplateSmall.bind({})}</Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-dropdown-item-small-min-height" value="1.75rem" />
-  <TokenRow
-    token="--fs-dropdown-item-small-padding"
-    value="var(--fs-spacing-0) var(--fs-spacing-2) var(--fs-spacing-0) var(--fs-spacing-1)"
-  />
-  <TokenRow
-    token="--fs-dropdown-item-small-text-size"
-    value="var(--fs-text-size-1)"
-  />
-</TokenTable>

package/src/components/ui/Dropdown/DropdownMenu.tsx

@@ -1,34 +0,0 @@
-import { DropdownMenu as UIDropdownMenu } from '@faststore/ui'
-import type { DropdownMenuProps } from '@faststore/ui'
-
-import styles from './dropdown.module.scss'
-
-export type Size = 'small' | 'regular'
-
-export type Props = DropdownMenuProps & {
-  /**
-   * Specifies the size variant
-   */
-  size?: Size
-}
-
-function DropdownMenu({
-  children,
-  size = 'regular',
-  testId = 'store-dropdown-menu',
-  ...otherProps
-}: Props) {
-  return (
-    <UIDropdownMenu
-      data-fs-dropdown-menu
-      data-fs-dropdown-menu-size={size}
-      className={styles.fsDropdownMenu}
-      data-testid={testId}
-      {...otherProps}
-    >
-      {children}
-    </UIDropdownMenu>
-  )
-}
-
-export default DropdownMenu

package/src/components/ui/Dropdown/dropdown.module.scss

@@ -1,101 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-dropdown-menu {
-  // --------------------------------------------------------
-  // Design Tokens for Dropdown Menu
-  // --------------------------------------------------------
-
-  // Default properties
-
-  --fs-dropdown-menu-bkg-color             : var(--fs-color-tertiary-bkg);
-  --fs-dropdown-menu-border-radius         : var(--fs-border-radius);
-  --fs-dropdown-menu-box-shadow            : var(--fs-shadow-hover);
-
-  // Item
-  --fs-dropdown-item-min-height            : 2.375rem;
-  --fs-dropdown-item-padding               : var(--fs-spacing-1) var(--fs-spacing-2) var(--fs-spacing-1) var(--fs-spacing-1);
-
-  --fs-dropdown-item-text-size             : var(--fs-text-size-base);
-  --fs-dropdown-item-text-weight           : var(--fs-text-weight-regular);
-
-  --fs-dropdown-item-color                 : var(--fs-color-link);
-  --fs-dropdown-item-bkg-color             : var(--fs-color-tertiary-bkg-light);
-  --fs-dropdown-item-bkg-color-hover       : var(--fs-color-primary-bkg-light);
-
-  --fs-dropdown-item-border-bottom-color   : var(--fs-border-color-light);
-
-  // Icon
-  --fs-dropdown-item-icon-min-width         : 1.125rem;
-  --fs-dropdown-item-icon-margin-right      : var(--fs-spacing-0);
-  --fs-dropdown-item-icon-margin-top        : calc(-1 * var(--fs-spacing-1));
-
-  // Small
-  --fs-dropdown-item-small-min-height       : 1.75rem;
-  --fs-dropdown-item-small-padding          : var(--fs-spacing-0) var(--fs-spacing-2) var(--fs-spacing-0) var(--fs-spacing-1);
-  --fs-dropdown-item-small-text-size        : var(--fs-text-size-1);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-top: var(--fs-spacing-0);
-  overflow: hidden;
-  background: var(--fs-dropdown-menu-bkg-color);
-  border-radius: var(--fs-dropdown-menu-border-radius);
-  box-shadow: var(--fs-dropdown-menu-box-shadow);
-
-  [data-fs-dropdown-item] {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    min-height: var(--fs-dropdown-item-min-height);
-    padding: var(--fs-dropdown-item-padding);
-    overflow: hidden;
-    font-size: var(--fs-dropdown-item-text-size);
-    font-weight: var(--fs-dropdown-item-text-weight);
-    color: var(--fs-dropdown-item-color);
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    cursor: pointer;
-    background-color: var(--fs-dropdown-item-bkg-color);
-    border-width: 0;
-
-    &:not(:last-child) {
-      border-bottom: 1px solid var(--fs-dropdown-item-border-bottom-color);
-    }
-
-    @include media(">=notebook") {
-      &:focus, &:hover {
-        text-decoration: underline;
-        background-color: var(--fs-dropdown-item-bkg-color-hover);
-        outline: none;
-      }
-    }
-
-    [data-fs-dropdown-item-icon] {
-      display: flex;
-      min-width: var(--fs-dropdown-item-icon-min-width);
-      margin-right: var(--fs-dropdown-item-icon-margin-right);
-    }
-  }
-
-  // --------------------------------------------------------
-  // Variants Styles
-  // --------------------------------------------------------
-
-  &[data-fs-dropdown-menu-size="small"] {
-    [data-fs-dropdown-item] {
-      min-height: var(--fs-dropdown-item-small-min-height);
-      padding: var(--fs-dropdown-item-small-padding);
-      font-size: var(--fs-dropdown-item-small-text-size);
-    }
-  }
-
-  [data-fs-breadcrumb-dropdown-item] [data-fs-dropdown-item-icon] {
-    margin-top: var(--fs-dropdown-item-icon-margin-top);
-  }
-}

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

@@ -1,4 +0,0 @@
-export { default } from './Dropdown'
-export { default as DropdownButton } from './DropdownButton'
-export { default as DropdownMenu } from './DropdownMenu'
-export { default as DropdownItem } from './DropdownItem'

package/src/components/ui/Gift/Gift.stories.mdx

@@ -1,99 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import Gift from '.'
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-import { product } from 'src/../.storybook/mocks'
-
-<Meta
-  title="Molecules/Gift"
-  argTypes={{
-    icon: { control: { disable: true } },
-  }}
-  component={Gift}
-/>
-
-export const Template = (args) => <Gift product={product} {...args} />
-
-<header>
-
-# Gift
-
-It displays an additional item to purchase as a gift.
-
-</header>
-
-## Overview
-
-The `Gift` component uses [FastStore UI Gift](https://www.faststore.dev/reference/ui/molecules) as base.
-
----
-
-## Usage
-
-`import Gift from '../components/ui/Gift'`
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />
-
-<TokenTable>
-  <TokenRow token="--fs-gift-height" value="var(--fs-spacing-12)" />
-  <TokenDivider />
-  <TokenRow token="--fs-gift-border-width" value="var(--fs-border-width)" />
-  <TokenRow
-    token="--fs-gift-border-color"
-    value="var(--fs-border-color-light)"
-    isColor
-  />
-  <TokenRow token="--fs-gift-border-radius" value="var(--fs-border-radius)" />
-</TokenTable>
-
----
-
-## Nested Elements
-
-### Content
-
-<TokenTable>
-  <TokenRow
-    token="--fs-gift-content-padding"
-    value="var(--fs-gift-gap) var(--fs-gift-gap) var(--fs-gift-gap) 0"
-  />
-  <TokenRow token="--fs-gift-content-row-gap" value="var(--fs-spacing-0)" />
-</TokenTable>
-
-### Title
-
-<TokenTable>
-  <TokenRow token="--fs-gift-title-line-height" value="1.25" />
-  <TokenRow token="--fs-gift-title-size" value="var(--fs-text-size-body)" />
-  <TokenRow
-    token="--fs-gift-title-color"
-    value="var(--fs-color-text)"
-    isColor
-  />
-</TokenTable>
-
-### Icon
-
-<TokenTable>
-  <TokenRow token="--fs-gift-icon-size" value="1.75rem" />
-  <TokenRow token="--fs-gift-icon-padding" value="var(--fs-spacing-0)" />
-  <TokenRow
-    token="--fs-gift-icon-color"
-    value="var(--fs-gift-title-color)"
-    globalValue="var(--fs-color-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-gift-icon-bkg-color"
-    value="var(--fs-color-body-bkg)"
-    isColor
-  />
-</TokenTable>

package/src/components/ui/Gift/gift.module.scss

@@ -1,94 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-gift {
-  // --------------------------------------------------------
-  // Design Tokens for Gift
-  // --------------------------------------------------------
-
-  // Default properties
-
-  --fs-gift-height                         : var(--fs-spacing-12);
-
-  --fs-gift-border-width                   : var(--fs-border-width);
-  --fs-gift-border-color                   : var(--fs-border-color-light);
-  --fs-gift-border-radius                  : var(--fs-border-radius);
-
-  // Content
-  --fs-gift-content-padding                : var(--fs-spacing-1) var(--fs-spacing-2);
-  --fs-gift-content-row-gap                : var(--fs-spacing-0);
-
-  // Title
-  --fs-gift-title-line-height              : 1.25;
-  --fs-gift-title-size                     : var(--fs-text-size-body);
-  --fs-gift-title-color                    : var(--fs-color-text);
-
-  // Icon
-  --fs-gift-icon-size                      : 1.75rem; // 28px
-  --fs-gift-icon-padding                   : var(--fs-spacing-0);
-  --fs-gift-icon-color                     : var(--fs-gift-title-color);
-  --fs-gift-icon-bkg-color                 : var(--fs-color-body-bkg);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  position: relative;
-
-  [data-fs-gift-wrapper] {
-    display: grid;
-    grid-template-columns: var(--fs-gift-height) repeat(4, 1fr);
-    align-items: flex-start;
-    height: var(--fs-gift-height);
-    overflow: hidden;
-    border: var(--fs-gift-border-width) solid var(--fs-gift-border-color);
-    border-radius: var(--fs-gift-border-radius);
-  }
-
-  [data-fs-gift-image] {
-    height: 100%;
-    overflow: hidden;
-
-    img {
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  [data-fs-gift-content] {
-    display: grid;
-    grid-column: 2 / span 4;
-    row-gap: var(--fs-gift-content-row-gap);
-    padding: var(--fs-gift-content-padding);
-  }
-
-  [data-fs-gift-product-title] {
-    font-size: var(--fs-gift-title-size);
-    line-height: var(--fs-gift-title-line-height);
-    color: var(--fs-gift-title-color);
-
-    @include truncate-title;
-  }
-
-  [data-fs-gift-product-summary] {
-    display: flex;
-    align-items: center;
-
-    [data-fs-badge] {
-      margin-left: var(--fs-spacing-1);
-    }
-  }
-
-  [data-fs-gift-icon] {
-    position: absolute;
-    top: calc(-1 * var(--fs-gift-icon-size) / 2);
-    left: calc(-1 * var(--fs-gift-icon-size) / 2);
-    width: var(--fs-gift-icon-size);
-    height: var(--fs-gift-icon-size);
-    padding: var(--fs-gift-icon-padding);
-    color: var(--fs-gift-icon-color);
-    background-color: var(--fs-gift-icon-bkg-color);
-    border: var(--fs-gift-border-width) solid var(--fs-gift-border-color);
-    border-radius: var(--fs-border-radius-circle);
-  }
-}

package/src/components/ui/Modal/Modal.stories.mdx

@@ -1,144 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import { Button, LinkButton } from '@faststore/ui'
-
-import UIProvider, { useUI } from 'src/sdk/ui/Provider'
-import { RegionalizationModalContent } from 'src/components/regionalization/RegionalizationModal'
-
-import Modal from '.'
-import Icon from '../Icon'
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-<Meta title="Molecules/Modal" component={Modal} />
-
-export const ModalTemplate = (args) => {
-  const { modal, openModal } = useUI()
-  return (
-    <div>
-      <Button variant="primary" onClick={() => openModal()}>
-        Open Modal
-      </Button>
-      {modal && (
-        <Modal>
-          {({ fadeOut }) => (
-            <div
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                flexDirection: 'column',
-                padding: '3rem',
-                backgroundColor: 'white',
-              }}
-            >
-              <h1
-                style={{
-                  fontSize: '2rem',
-                  paddingBottom: '1rem',
-                }}
-              >
-                Hello, i'm a Modal!
-              </h1>
-              <Button onClick={fadeOut}>Close Modal</Button>
-            </div>
-          )}
-        </Modal>
-      )}
-    </div>
-  )
-}
-
-export const Template = (args) => {
-  return (
-    <UIProvider>
-      <ModalTemplate />
-    </UIProvider>
-  )
-}
-
-<header>
-
-# Modal
-
-Modals are dialog windows that sit on top of an application's main view. Once a Modal is open, interactions with the content behind it are blocked.
-
-</header>
-
-## Overview
-
-The `Modal` component uses [FastStore UI Modal](https://www.faststore.dev/reference/ui/molecules/Modal) as base.
-
----
-
-## Usage
-
-`import Modal from 'src/components/ui/Modal'`
-
-<Canvas>
-  <Story name="Overview">{Template.bind({})}</Story>
-</Canvas>
-
----
-
-<TokenTable>
-  <TokenRow token="--fs-modal-position-top" value="30vh" />
-  <TokenRow token="--fs-modal-position-right" value="var(--fs-spacing-4)" />
-  <TokenRow token="--fs-modal-position-left" value="var(--fs-spacing-4)" />
-  <TokenRow
-    token="--fs-modal-max-width"
-    value="calc(var(--fs-grid-breakpoint-desktop) / 3)"
-  />
-  <TokenRow token="--fs-modal-min-height" value="var(--fs-spacing-5)" />
-  <TokenRow token="--fs-modal-margin" value="auto" />
-  <TokenRow token="--fs-modal-border-radius" value="var(--fs-spacing-0)" />
-  <TokenDivider />
-  <TokenRow token="--fs-modal-width-tablet" value="calc(100vw / 3)" />
-  <TokenRow
-    token="--fs-modal-min-width-tablet"
-    value="calc(var(--fs-grid-breakpoint-desktop) / 3)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-modal-transition-timing"
-    value="var(--fs-transition-timing)"
-  />
-  <TokenRow token="--fs-modal-transition-property" value="transform" />
-  <TokenRow token="--fs-modal-transition-in-function" value="ease-in" />
-  <TokenRow token="--fs-modal-transition-out-function" value="ease-out" />
-</TokenTable>
-
----
-
-## Use Cases
-
-<section className="sbdocs-list">
-  <ul className="sbdocs-ul-row">
-    <li>
-      <div>
-        <UIProvider>
-          <RegionalizationModalContent onClose={() => {}} />
-        </UIProvider>
-      </div>
-      <article className="sbdocs-list-text">
-        <h3>RegionalizationModal</h3>
-        <p>
-          It's the modal that, trigged by <code>RegionalizationButton</code> or{' '}
-          <code>RegionalizationBar</code>, shows the user the{' '}
-          <code>RegionalizationInput</code> search.
-        </p>
-        <LinkButton
-          size="small"
-          variant="tertiary"
-          href="../?path=/docs/features-regionalization-regionalizationmodal--overview"
-          icon={<Icon name="ArrowRight" width="18" height="18" weight="bold" />}
-          iconPosition="right"
-        >
-          See more
-        </LinkButton>
-      </article>
-    </li>
-  </ul>
-</section>

package/src/components/ui/Modal/Modal.tsx

@@ -1,43 +0,0 @@
-import type { ModalProps as UIModalProps } from '@faststore/ui'
-import { Modal as UIModal } from '@faststore/ui'
-import type { ReactNode } from 'react'
-
-import { useUI } from 'src/sdk/ui/Provider'
-import { useFadeEffect } from 'src/sdk/ui/useFadeEffect'
-
-import styles from './modal.module.scss'
-
-export type ModalChildrenProps = {
-  fade: 'in' | 'out'
-  fadeOut: () => void
-  fadeIn: () => void
-}
-
-type ModalChildrenFunction = (props: ModalChildrenProps) => ReactNode
-
-export type ModalProps = Omit<UIModalProps, 'isOpen' | 'children'> & {
-  children: ModalChildrenFunction | ReactNode
-}
-
-function Modal({ className, children, ...props }: ModalProps) {
-  const { closeModal } = useUI()
-  const { fade, fadeOut, fadeIn } = useFadeEffect()
-
-  return (
-    <UIModal
-      onDismiss={fadeOut}
-      onTransitionEnd={() => fade === 'out' && closeModal()}
-      data-fs-modal
-      data-fs-modal-state={fade}
-      className={`${styles.fsModal} ${className}`}
-      {...props}
-      isOpen
-    >
-      {typeof children === 'function'
-        ? children({ fade, fadeOut, fadeIn })
-        : children}
-    </UIModal>
-  )
-}
-
-export default Modal

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

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

package/src/components/ui/Modal/modal.module.scss

@@ -1,46 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-modal {
-  // --------------------------------------------------------
-  // Design Tokens for Modal
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-modal-position-top                          : 30vh;
-  --fs-modal-position-right                        : var(--fs-spacing-4);
-  --fs-modal-position-left                         : var(--fs-spacing-4);
-  --fs-modal-max-width                             : calc(var(--fs-grid-breakpoint-desktop) / 3);
-  --fs-modal-min-height                            : var(--fs-spacing-5);
-  --fs-modal-margin                                : auto;
-
-  --fs-modal-width-tablet                          : calc(100vw / 3);
-  --fs-modal-min-width-tablet                      : calc(var(--fs-grid-breakpoint-desktop) / 3);
-
-  --fs-modal-transition-timing                     : var(--fs-transition-timing);
-  --fs-modal-transition-property                   : transform;
-  --fs-modal-transition-in-function                : ease-in;
-  --fs-modal-transition-out-function               : ease-in;
-
-  position: fixed;
-  top: var(--fs-modal-position-top);
-  right: var(--fs-modal-position-right);
-  left: var(--fs-modal-position-left);
-  max-width: var(--fs-modal-max-width);
-  min-height: var(--fs-modal-min-height);
-  margin: var(--fs-modal-margin);
-
-  @include media(">=tablet") {
-    width: var(--fs-modal-width-tablet);
-    min-width: var(--fs-modal-min-width-tablet);
-  }
-
-  &[data-fs-modal-state="in"] {
-    transition: var(--fs-modal-transition-property) var(--fs-modal-transition-timing) var(--fs-modal-transition-in-function);
-    transform: translate3d(0, 0, 0);
-  }
-
-  &[data-fs-modal-state="out"] {
-    transition: var(--fs-modal-transition-property) var(--fs-modal-transition-timing) var(--fs-modal-transition-in-function);
-    transform: translate3d(0, 50%, 0);
-  }
-}