@faststore/core 0.3.16 → 2.0.65-alpha.0

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

@@ -1,246 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
-
-import QuantitySelector from '.'
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-<Meta
-  title="Molecules/QuantitySelector"
-  component={QuantitySelector}
-  argTypes={{
-    max: {
-      type: {
-        name: 'number',
-      },
-      defaultValue: 10,
-    },
-    min: {
-      type: {
-        name: 'number',
-      },
-      defaultValue: 1,
-    },
-    initial: {
-      type: {
-        name: 'number',
-      },
-      defaultValue: 5,
-    },
-    disabled: {
-      type: {
-        name: 'boolean',
-      },
-      defaultValue: false,
-    },
-  }}
-/>
-
-export const Template = (args) => <QuantitySelector {...args} />
-
-<header>
-
-# Quantity Selector
-
-It's a component that shows a quantity selector, commonly used to add a product to the shopping cart.
-
-</header>
-
-## Overview
-
-The `QuantitySelector` component uses [FastStore UI QuantitySelector](https://www.faststore.dev/reference/ui/molecules/QuantitySelector) as base.
-
-<Canvas>
-  <Story name="Overview-QuantitySelector">{Template.bind({})}</Story>
-  <Story
-    name="Overview-Disabled"
-    args={{
-      disabled: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
----
-
-## Usage
-
-`import QuantitySelector from '../components/sections/QuantitySelector'`
-
-<Canvas>
-  <Story name="QuantitySelector">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="QuantitySelector" />
-
-<TokenTable>
-  <TokenRow
-    token="--fs-qty-selector-width"
-    value="calc(var(--fs-control-tap-size) * 2.7)"
-  />
-  <TokenRow
-    token="--fs-qty-selector-height"
-    value="calc(var(--fs-control-tap-size) + (var(--fs-qty-selector-border-width) * 2))"
-  />
-  <TokenDivider />
-  <TokenRow token="--fs-qty-selector-shadow" value="none" />
-  <TokenRow
-    token="--fs-qty-selector-shadow-hover"
-    value="0 0 0 var(--fs-border-width) var(--fs-border-color-active)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-qty-selector-bkg-color"
-    value="var(--fs-color-body-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-qty-selector-bkg-color-hover"
-    value="var(--fs-qty-selector-bkg-color)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-qty-selector-border-radius"
-    value="var(--fs-border-radius)"
-  />
-  <TokenRow
-    token="--fs-qty-selector-border-width"
-    value="var(--fs-border-width)"
-  />
-  <TokenRow
-    token="--fs-qty-selector-border-width-hover"
-    value="var(--fs-border-width)"
-  />
-  <TokenRow
-    token="--fs-qty-selector-border-color"
-    value="var(--fs-border-color)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-qty-selector-border-color-hover"
-    value="var(--fs-border-color-active)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-qty-selector-transition-function"
-    value="var(--fs-transition-function)"
-  />
-  <TokenRow
-    token="--fs-qty-selector-transition-property"
-    value="var(--fs-transition-property)"
-  />
-  <TokenRow
-    token="--fs-qty-selector-transition-timing  "
-    value="var(--fs-transition-timing)"
-  />
-</TokenTable>
-
----
-
-## Nested Elements
-
-### Text
-
-<TokenTable>
-  <TokenRow
-    token="--fs-qty-selector-text-size"
-    value="var(--fs-text-size-base)"
-  />
-  <TokenRow
-    token="--fs-qty-selector-text-color"
-    value="var(--fs-color-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-qty-selector-text-color-hover"
-    value="var(--fs-qty-selector-text-color)"
-    isColor
-  />
-</TokenTable>
-
-### Icon
-
-<TokenTable>
-  <TokenRow
-    token="--fs-qty-selector-icon-color"
-    value="var(--fs-color-link)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-qty-selector-icon-color-hover"
-    value="var(--fs-border-color-active)"
-    isColor
-  />
-</TokenTable>
-
-### Button
-
-<TokenTable>
-  <TokenRow token="--fs-qty-selector-button-shadow" value="none" />
-  <TokenRow token="--fs-qty-selector-button-shadow-hover" value="none" />
-  <TokenRow token="--fs-qty-selector-button-bkg-color" value="transparent" />
-  <TokenRow
-    token="--fs-qty-selector-button-bkg-color-hover"
-    value="var(--fs-color-primary-bkg-light)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-qty-selector-button-bkg-color-focus"
-    value="var(--fs-qty-selector-button-bkg-color-hover)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-qty-selector-button-border-radius"
-    value="var(--fs-qty-selector-border-radius)"
-  />
-</TokenTable>
-
----
-
-## Variants
-
-### Disabled
-
-<Canvas>
-  <Story
-    name="Disabled"
-    args={{
-      disabled: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-qty-selector-disabled-bkg-color"
-    value="var(--fs-color-disabled-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-qty-selector-disabled-text-color"
-    value="var(--fs-color-disabled-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-qty-selector-disabled-icon-color"
-    value="var(--fs-border-color-light-disabled)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-qty-selector-disabled-border-color"
-    value="var(--fs-qty-selector-disabled-bkg-color)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-qty-selector-disabled-button-bkg-color"
-    value="var(--fs-qty-selector-button-bkg-color-hover)"
-    isColor
-  />
-</TokenTable>

package/src/components/ui/QuantitySelector/QuantitySelector.tsx

@@ -1,103 +0,0 @@
-import { QuantitySelector as UIQuantitySelector } from '@faststore/ui'
-import { memo, useEffect, useState } from 'react'
-
-import Icon from 'src/components/ui/Icon'
-
-import styles from './quantity-selector.module.scss'
-
-interface QuantitySelectorProps {
-  /**
-   * The maximum value the quantity selector can receive
-   */
-  max?: number
-  /**
-   * The minimum value the quantity selector can receive
-   */
-  min?: number
-  /**
-   * The initial value for quantity selector
-   */
-  initial?: number
-  /**
-   * Specifies that the whole quantity selector component should be disabled.
-   */
-  disabled?: boolean
-  /**
-   * Event emitted when value is changed
-   */
-  onChange?: (value: number) => void
-}
-
-export function QuantitySelector({
-  max,
-  min = 1,
-  initial,
-  disabled = false,
-  onChange,
-}: QuantitySelectorProps) {
-  const [quantity, setQuantity] = useState<number>(initial ?? min)
-  const isLeftDisabled = quantity === min
-  const isRightDisabled = quantity === max
-
-  const changeQuantity = (increaseValue: number) => {
-    const quantityValue = validateQuantityBounds(quantity + increaseValue)
-
-    onChange?.(quantityValue)
-    setQuantity(quantityValue)
-  }
-
-  const increase = () => changeQuantity(1)
-
-  const decrease = () => changeQuantity(-1)
-
-  function validateQuantityBounds(n: number): number {
-    const maxValue = min ? Math.max(n, min) : n
-
-    return max ? Math.min(maxValue, max) : maxValue
-  }
-
-  function validateInput(e: React.FormEvent<HTMLInputElement>) {
-    const val = e.currentTarget.value
-
-    if (!Number.isNaN(Number(val))) {
-      setQuantity(() => {
-        const quantityValue = validateQuantityBounds(Number(val))
-
-        onChange?.(quantityValue)
-
-        return quantityValue
-      })
-    }
-  }
-
-  useEffect(() => {
-    initial && setQuantity(initial)
-  }, [initial])
-
-  return (
-    <UIQuantitySelector
-      data-fs-quantity-selector={disabled ? 'disabled' : 'true'}
-      className={styles.fsQuantitySelector}
-      quantity={quantity}
-      leftButtonProps={{
-        onClick: decrease,
-        disabled: isLeftDisabled || disabled,
-        icon: <Icon name="Minus" width={16} height={16} weight="bold" />,
-        testId: 'store-quantity-selector-left',
-      }}
-      rightButtonProps={{
-        onClick: increase,
-        disabled: isRightDisabled || disabled,
-        icon: <Icon name="Plus" width={16} height={16} weight="bold" />,
-        testId: 'store-quantity-selector-right',
-      }}
-      inputProps={{
-        onChange: validateInput,
-        readOnly: false,
-        disabled,
-      }}
-    />
-  )
-}
-
-export default memo(QuantitySelector)

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

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

package/src/components/ui/QuantitySelector/quantity-selector.module.scss

@@ -1,155 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-quantity-selector {
-  // --------------------------------------------------------
-  // Design Tokens for Quantity Selector
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-qty-selector-width                     : calc(var(--fs-control-tap-size) * 2.7);
-  --fs-qty-selector-height                    : calc(var(--fs-control-tap-size) + (var(--fs-qty-selector-border-width) * 2));
-
-  --fs-qty-selector-shadow                    : none;
-  --fs-qty-selector-shadow-hover              : 0 0 0 var(--fs-border-width) var(--fs-border-color-active);
-
-  --fs-qty-selector-bkg-color                 : var(--fs-color-body-bkg);
-  --fs-qty-selector-bkg-color-hover           : var(--fs-qty-selector-bkg-color);
-
-  --fs-qty-selector-text-size                 : var(--fs-text-size-base);
-  --fs-qty-selector-text-color                : var(--fs-color-text);
-  --fs-qty-selector-text-color-hover          : var(--fs-qty-selector-text-color);
-
-  --fs-qty-selector-icon-color                : var(--fs-color-link);
-  --fs-qty-selector-icon-color-hover          : var(--fs-border-color-active);
-
-  --fs-qty-selector-border-radius             : var(--fs-border-radius);
-  --fs-qty-selector-border-width              : var(--fs-border-width);
-  --fs-qty-selector-border-width-hover        : var(--fs-border-width);
-  --fs-qty-selector-border-color              : var(--fs-border-color);
-  --fs-qty-selector-border-color-hover        : var(--fs-border-color-active);
-
-  --fs-qty-selector-button-shadow             : none;
-  --fs-qty-selector-button-shadow-hover       : none;
-  --fs-qty-selector-button-bkg-color          : transparent;
-  --fs-qty-selector-button-bkg-color-hover    : var(--fs-color-primary-bkg-light);
-  --fs-qty-selector-button-bkg-color-focus    : var(--fs-qty-selector-button-bkg-color-hover);
-  --fs-qty-selector-button-border-radius      : var(--fs-qty-selector-border-radius);
-
-  // Disabled properties
-  --fs-qty-selector-disabled-bkg-color        : var(--fs-color-disabled-bkg);
-  --fs-qty-selector-disabled-text-color       : var(--fs-color-disabled-text);
-  --fs-qty-selector-disabled-icon-color       : var(--fs-border-color-light-disabled);
-  --fs-qty-selector-disabled-border-color     : var(--fs-qty-selector-disabled-bkg-color);
-  --fs-qty-selector-disabled-button-bkg-color : var(--fs-qty-selector-button-bkg-color-hover);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: var(--fs-qty-selector-width);
-  height: var(--fs-qty-selector-height);
-  border-radius: var(--fs-qty-selector-border-radius);
-  box-shadow: var(--fs-qty-selector-shadow);
-
-  [data-fs-icon] {
-    margin: 0;
-    line-height: 0;
-    color: var(--fs-qty-selector-icon-color);
-  }
-
-  [data-quantity-selector-input] {
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    font-size: var(--fs-qty-selector-text-size);
-    color: var(--fs-qty-selector-text-color);
-    text-align: center;
-  }
-
-  [data-quantity-selector-button] {
-    position: absolute;
-    background-color: var(--fs-qty-selector-button-bkg-color);
-
-    [data-fs-icon] {
-      width: 100%;
-      height: 100%;
-      border-radius: var(--fs-qty-selector-button-border-radius);
-      box-shadow: var(--fs-qty-selector-button-shadow);
-      transition:
-        var(--fs-qty-selector-transition-property)
-        var(--fs-qty-selector-transition-timing)
-        var(--fs-qty-selector-transition-function);
-    }
-
-    &[data-fs-icon-button] {
-      padding: var(--fs-spacing-1);
-    }
-
-    &:first-of-type { left: 0; }
-
-    &:last-of-type { right: 0; }
-
-    &:hover:not(:disabled) [data-fs-icon] {
-      background-color: var(--fs-qty-selector-button-bkg-color-hover);
-      box-shadow: var(--fs-qty-selector-button-shadow-hover);
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      background-color: var(--fs-qty-selector-button-bkg-color);
-
-      &:hover, &:focus-visible {
-        background-color: var(--fs-qty-selector-button-bkg-color);
-      }
-
-      [data-fs-icon] {
-        color: var(--fs-qty-selector-disabled-icon-color);
-      }
-    }
-
-    &:hover:not(:disabled) {
-      background-color: transparent;
-      box-shadow: none;
-    }
-
-    &:focus:not(:disabled) {
-      background-color: transparent;
-      box-shadow: none;
-    }
-
-    &:focus-visible {
-      background-color: var(--fs-qty-selector-button-bkg-color);
-      outline: none;
-      box-shadow: none;
-
-      [data-fs-icon] {
-        @include focus-ring;
-
-        background-color: var(--fs-qty-selector-button-bkg-color-focus);
-      }
-    }
-  }
-
-  &:hover {
-    [data-quantity-selector-input]:not(:disabled):not(:focus) {
-      color: var(--fs-qty-selector-text-color-hover);
-      background-color: var(--fs-qty-selector-bkg-color-hover);
-      border-color: var(--fs-qty-selector-border-color-hover);
-      border-width: var(--fs-qty-selector-border-width-hover);
-      box-shadow: var(--fs-qty-selector-shadow-hover);
-    }
-  }
-
-  // --------------------------------------------------------
-  // Variants Styles
-  // --------------------------------------------------------
-
-  &[data-fs-quantity-selector="disabled"] {
-    [data-quantity-selector-button]:hover [data-fs-icon] { background-color: transparent; }
-  }
-}

package/src/sdk/ui/Provider.tsx

@@ -1,151 +0,0 @@
-import { createContext, useContext, useMemo, useReducer } from 'react'
-import type { PropsWithChildren } from 'react'
-
-interface Toast {
-  message: string
-  status: 'ERROR' | 'WARNING' | 'INFO'
-  title?: string
-  icon?: string
-}
-
-interface State {
-  /** Cart sidebar */
-  cart: boolean
-  /** Region modal */
-  modal: boolean
-  /** Menu slider */
-  navbar: boolean
-  /** Search page filter slider */
-  filter: boolean
-  toasts: Toast[]
-}
-
-type UIElement = 'navbar' | 'cart' | 'modal' | 'filter'
-
-type Action =
-  | {
-      type: 'open'
-      payload: UIElement
-    }
-  | {
-      type: 'close'
-      payload: UIElement
-    }
-  | {
-      type: 'pushToast'
-      payload: Toast
-    }
-  | {
-      type: 'popToast'
-    }
-
-const reducer = (state: State, action: Action): State => {
-  const { type } = action
-
-  switch (type) {
-    case 'open': {
-      const { payload } = action
-
-      document.body.classList.add('no-scroll')
-
-      return {
-        ...state,
-        [payload]: true,
-      }
-    }
-
-    case 'close': {
-      const { payload } = action
-
-      document.body.classList.remove('no-scroll')
-
-      return {
-        ...state,
-        [payload]: false,
-      }
-    }
-
-    case 'pushToast': {
-      return {
-        ...state,
-        toasts: [...state.toasts, action.payload],
-      }
-    }
-
-    case 'popToast': {
-      return {
-        ...state,
-        toasts: state.toasts.slice(1),
-      }
-    }
-
-    default:
-      throw new Error(`Action ${type} not implemented`)
-  }
-}
-
-const initializer = (): State => ({
-  cart: false,
-  modal: false,
-  navbar: false,
-  filter: false,
-  toasts: [],
-})
-
-interface Context extends State {
-  closeNavbar: () => void
-  openNavbar: () => void
-  closeFilter: () => void
-  openFilter: () => void
-  openCart: () => void
-  closeCart: () => void
-  openModal: () => void
-  closeModal: () => void
-  pushToast: (data: Toast) => void
-  popToast: () => void
-}
-
-const UIContext = createContext<Context | undefined>(undefined)
-
-function UIProvider({ children }: PropsWithChildren) {
-  const [ui, dispatch] = useReducer(reducer, undefined, initializer)
-
-  const callbacks = useMemo(
-    () => ({
-      openFilter: () => dispatch({ type: 'open', payload: 'filter' }),
-      closeFilter: () => dispatch({ type: 'close', payload: 'filter' }),
-      openNavbar: () => dispatch({ type: 'open', payload: 'navbar' }),
-      closeNavbar: () => dispatch({ type: 'close', payload: 'navbar' }),
-      openCart: () => dispatch({ type: 'open', payload: 'cart' }),
-      closeCart: () => dispatch({ type: 'close', payload: 'cart' }),
-      openModal: () => dispatch({ type: 'open', payload: 'modal' }),
-      closeModal: () => dispatch({ type: 'close', payload: 'modal' }),
-      pushToast: (toast: Toast) =>
-        dispatch({ type: 'pushToast', payload: toast }),
-      popToast: () => dispatch({ type: 'popToast' }),
-    }),
-    []
-  )
-
-  const value = useMemo(
-    () => ({
-      ...ui,
-      ...callbacks,
-    }),
-    [callbacks, ui]
-  )
-
-  return <UIContext.Provider value={value}>{children}</UIContext.Provider>
-}
-
-export function useUI() {
-  const context = useContext(UIContext)
-
-  if (context === undefined) {
-    throw new Error('Missing UI context on React tree')
-  }
-
-  return context
-}
-
-export default UIProvider

package/src/sdk/ui/useFadeEffect.ts

@@ -1,21 +0,0 @@
-import { useState, useCallback, useEffect } from 'react'
-
-export const useFadeEffect = () => {
-  const [fade, setFade] = useState<'in' | 'out'>('out')
-  const fadeOut = useCallback(() => setFade('out'), [])
-  const fadeIn = useCallback(() => setFade('in'), [])
-
-  useEffect(() => {
-    fadeIn()
-
-    return () => {
-      fadeOut()
-    }
-  }, [fadeIn, fadeOut])
-
-  return {
-    fade,
-    fadeIn,
-    fadeOut,
-  }
-}