@faststore/core 0.3.15 → 0.3.17

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; }
-  }
-}