@faststore/core 0.3.16 → 0.3.17

package/src/components/ui/PriceRange/PriceRange.tsx

@@ -1,140 +0,0 @@
-import { useState, useRef } from 'react'
-import {
-  PriceRange as UIPriceRange,
-  InputField as UIInputField,
-} from '@faststore/ui'
-import type { PriceRangeProps } from '@faststore/ui'
-
-import {
-  usePriceFormatter,
-  useFormattedPrice,
-} from 'src/sdk/product/useFormattedPrice'
-
-import styles from './price-range.module.scss'
-
-type Props = Omit<
-  PriceRangeProps,
-  'formatter' | 'minValueLabelComponent' | 'maxValueLabelComponent'
->
-
-function PriceRange({ min, max, onEnd, step = 10, ...otherProps }: Props) {
-  const formatter = usePriceFormatter({ decimals: false })
-  const minAbsoluteFormatted = useFormattedPrice(Math.round(min.absolute))
-  const maxAbsoluteFormatted = useFormattedPrice(Math.ceil(max.absolute))
-
-  const inputMinRef = useRef<HTMLInputElement>(null)
-  const inputMaxRef = useRef<HTMLInputElement>(null)
-  const priceRangeRef = useRef<{
-    setPriceRangeValues: (values: { min: number; max: number }) => void
-  }>()
-
-  const [inputMinError, setInputMinError] = useState<string>()
-  const [inputMaxError, setInputMaxError] = useState<string>()
-  const [priceRange, setPriceRange] = useState<{ min: number; max: number }>({
-    min: Math.round(min.selected),
-    max: Math.ceil(max.selected),
-  })
-
-  function onChangePriceRange(value: { min: number; max: number }) {
-    setInputMinError(undefined)
-    setInputMaxError(undefined)
-    setPriceRange({ min: value.min, max: value.max })
-
-    if (inputMinRef.current?.value) {
-      inputMinRef.current.value = String(value.min)
-    }
-
-    if (inputMaxRef.current?.value) {
-      inputMaxRef.current.value = String(value.max)
-    }
-  }
-
-  function onChangeInputMin(value: string) {
-    setInputMinError(undefined)
-
-    if (Number(value) < min.absolute) {
-      return
-    }
-
-    if (Number(value) > priceRange.max) {
-      setInputMinError(`Min price can't be greater than max`)
-    }
-
-    setPriceRange({ ...priceRange, min: Number(value) })
-    priceRangeRef.current?.setPriceRangeValues({
-      ...priceRange,
-      min: Number(value),
-    })
-  }
-
-  function onChangeInputMax(value: string) {
-    setInputMaxError(undefined)
-
-    if (Number(value) > max.absolute) {
-      return
-    }
-
-    if (Number(value) < priceRange.min) {
-      setInputMaxError(`Max price can't be smaller than min`)
-    }
-
-    setPriceRange({ ...priceRange, max: Number(value) })
-    priceRangeRef.current?.setPriceRangeValues({
-      ...priceRange,
-      max: Number(value),
-    })
-  }
-
-  return (
-    <div className={styles.fsPriceRange} data-fs-price-range>
-      <div data-fs-price-range-absolute-values>
-        <span>{minAbsoluteFormatted}</span>
-        <span>{maxAbsoluteFormatted}</span>
-      </div>
-      <UIPriceRange
-        ref={priceRangeRef}
-        min={min}
-        max={max}
-        formatter={formatter}
-        className={styles.fsPriceRange}
-        onEnd={(value) => {
-          onEnd?.(value)
-          onChangePriceRange(value)
-        }}
-        {...otherProps}
-      />
-      <div data-fs-price-range-inputs>
-        <UIInputField
-          id="price-range-min"
-          step={step}
-          label="Min"
-          type="number"
-          inputMode="numeric"
-          error={inputMinError}
-          inputRef={inputMinRef}
-          min={Math.round(min.absolute)}
-          max={Math.ceil(priceRange.max)}
-          value={Math.round(priceRange.min)}
-          onChange={(e) => onChangeInputMin(e.target.value)}
-          onBlur={() => !inputMinError && onEnd?.(priceRange)}
-        />
-        <UIInputField
-          id="price-range-max"
-          label="Max"
-          step={step}
-          type="number"
-          inputMode="numeric"
-          error={inputMaxError}
-          inputRef={inputMaxRef}
-          max={Math.ceil(max.absolute)}
-          min={Math.round(priceRange.min)}
-          value={Math.ceil(priceRange.max)}
-          onChange={(e) => onChangeInputMax(e.target.value)}
-          onBlur={() => !inputMaxError && onEnd?.(priceRange)}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default PriceRange

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

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

package/src/components/ui/PriceRange/price-range.module.scss

@@ -1,176 +0,0 @@
-.fs-price-range {
-  // --------------------------------------------------------
-  // Design Tokens for Price Range
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-price-range-height                     : var(--fs-spacing-2);
-  --fs-price-range-border-radius              : var(--fs-border-radius-pill);
-  --fs-price-range-margin-bottom              : var(--fs-spacing-3);
-
-  --fs-price-range-transition-function        : var(--fs-transition-function);
-  --fs-price-range-transition-property        : var(--fs-transition-property);
-  --fs-price-range-transition-timing          : var(--fs-transition-timing);
-
-  // Slider
-  --fs-price-range-slider-bkg-color           : var(--fs-color-neutral-bkg);
-  --fs-price-range-slider-selection-bkg-color : var(--fs-color-primary-bkg-light-active);
-
-  // Value Label
-  --fs-price-range-value-label-bottom         : var(--fs-spacing-3);
-  --fs-price-range-value-label-bkg-color      : var(--fs-color-body-bkg);
-
-  // Absolute Values
-  --fs-price-range-absolute-values-text-color : var(--fs-color-disabled-text);
-
-  // Thumb
-  --fs-price-range-thumb-size                 : var(--fs-spacing-4);
-  --fs-price-range-thumb-bkg-color            : var(--fs-color-primary-bkg);
-  --fs-price-range-thumb-bkg-color-hover      : var(--fs-color-primary-bkg-hover);
-  --fs-price-range-thumb-border-radius        : var(--fs-border-radius-circle);
-  --fs-price-range-thumb-border-color         : var(--fs-price-range-thumb-bkg-color);
-  --fs-price-range-thumb-border-color-hover   : var(--fs-price-range-thumb-bkg-color-hover);
-  --fs-price-range-thumb-border-width         : var(--fs-border-width);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  [data-fs-slider] {
-    position: relative;
-    width: 100%;
-    height: var(--fs-price-range-height);
-    margin-bottom: var(--fs-price-range-margin-bottom);
-    background-color: var(--fs-price-range-slider-bkg-color);
-    border-radius: var(--fs-price-range-border-radius);
-  }
-
-  [data-slider-range] {
-    position: absolute;
-    height: var(--fs-price-range-height);
-    background-color: var(--fs-price-range-slider-selection-bkg-color);
-    border-radius: var(--fs-price-range-border-radius);
-  }
-
-  [data-price-range-value-label="min"],
-  [data-price-range-value-label="max"] {
-    bottom: var(--fs-price-range-value-label-bottom);
-    padding: var(--fs-spacing-1);
-    background-color: var(--fs-price-range-value-label-bkg-color);
-    opacity: 0;
-    transition: opacity var(--fs-price-range-transition-timing) var(--fs-price-range-transition-function);
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  [data-price-range-value-label="min"] {
-    text-align: left;
-    transform: translateX(-1rem);
-  }
-
-  [data-price-range-value-label="max"] {
-    text-align: right;
-    transform: translateX(calc(-100% + 1.25rem));
-  }
-
-  // Thumb styles for Webkit based browsers (Chrome, Edge)
-  [data-slider-thumb],
-  [data-slider-thumb]::-webkit-slider-thumb {
-    width: var(--fs-price-range-thumb-size);
-    height: var(--fs-price-range-thumb-size);
-    pointer-events: auto;
-    cursor: col-resize;
-    background-color: var(--fs-price-range-thumb-bkg-color);
-    border: var(--fs-price-range-thumb-border-width) solid var(--fs-price-range-thumb-border-color);
-    border-radius: var(--fs-price-range-thumb-border-radius);
-    -webkit-tap-highlight-color: transparent;
-    appearance: none;
-    transition: var(--fs-price-range-transition-property) var(--fs-price-range-transition-timing) var(--fs-price-range-transition-function);
-
-    &:hover {
-      background-color: var(--fs-price-range-thumb-bkg-color-hover);
-      border-color: var(--fs-price-range-thumb-border-color-hover);
-    }
-  }
-
-  // Thumb styles for Mozilla
-  [data-slider-thumb]::-moz-range-thumb {
-    width: var(--fs-price-range-thumb-size);
-    height: var(--fs-price-range-thumb-size);
-    pointer-events: auto;
-    cursor: col-resize;
-    background-color: var(--fs-price-range-thumb-bkg-color);
-    border: var(--fs-price-range-thumb-border-width) solid var(--fs-price-range-thumb-border-color);
-    border-radius: var(--fs-price-range-thumb-radius);
-  }
-
-  [data-slider-thumb] {
-    position: absolute;
-    width: inherit;
-    height: 0;
-    margin: calc(var(--fs-price-range-height) / 2) 0;
-    pointer-events: none;
-    border: none;
-  }
-
-  [data-slider-thumb="left"] {
-    z-index: 1;
-
-    &:hover + [data-price-range-value-label="min"] {
-      opacity: 1;
-    }
-  }
-
-  [data-slider-thumb="right"] {
-    z-index: 2;
-
-    &:hover + [data-price-range-value-label="max"] {
-      opacity: 1;
-    }
-  }
-
-  [data-price-range-values] {
-    display: flex;
-    justify-content: space-between;
-    margin-top: var(--fs-spacing-3);
-    margin-bottom: var(--fs-spacing-3);
-  }
-
-  [data-fs-price-range-inputs] {
-    display: flex;
-
-    [data-fs-input-field] {
-      width: 50%;
-
-      input:hover,
-      input:focus-visible,
-      input:focus {
-        z-index: 1;
-        + label { z-index: 1; }
-      }
-
-      &:first-of-type {
-        margin-right: -1px;
-
-        input {
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-        }
-      }
-
-      &:last-of-type input {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-  }
-
-  [data-fs-price-range-absolute-values] {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: var(--fs-spacing-2);
-    color: var(--fs-price-range-absolute-values-text-color);
-  }
-}

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'