@faststore/core 0.3.15 → 0.3.17

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

@@ -1,192 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import PriceRange from '.'
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-  BestPractices,
-  BestPracticesRule,
-} from 'src/../.storybook/components'
-
-<Meta
-  title="Molecules/PriceRange"
-  argTypes={{
-    min: { control: { disable: true } },
-    max: { control: { disable: true } },
-    testId: {
-      table: {
-        disable: true,
-      },
-    },
-    className: {
-      table: {
-        disable: true,
-      },
-    },
-    onChange: {
-      table: {
-        disable: true,
-      },
-    },
-    variant: {
-      table: {
-        disable: true,
-      },
-    },
-    step: {
-      control: 'number',
-      table: { type: 'number', summary: 10 },
-    },
-  }}
-  component={PriceRange}
-/>
-
-export const defaultArgs = {
-  min: {
-    absolute: 0,
-    selected: 0,
-  },
-  max: {
-    absolute: 12400,
-    selected: 12400,
-  },
-}
-
-export const Template = (args) => {
-  return (
-    <PriceRange {...defaultArgs} {...args} />
-  )
-}
-
-<header>
-
-# Price Range
-
-PriceRange allows you to implement filters on PLP so users have a high control over product prices.
-
-</header>
-
-## Overview
-
-The `PriceRange` component uses [FastStore UI Price Range](https://www.faststore.dev/reference/ui/molecules/PriceRange) as base.
-
----
-
-## Usage
-
-`import PriceRange from '../components/ui/PriceRange'`
-
-<Canvas isColumn>
-  <Story name="overview-default" args={defaultArgs}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="overview-default" />
-
-<TokenTable>
-  <TokenRow token="--fs-price-range-height" value="var(--fs-spacing-2)" />
-  <TokenRow
-    token="--fs-price-range-border-radius"
-    value="var(--fs-border-radius-pill)"
-  />
-  <TokenRow
-    token="--fs-price-range-margin-bottom"
-    value="var(--fs-spacing-3)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-price-range-transition-function"
-    value="var(--fs-transition-function)"
-  />
-  <TokenRow
-    token="--fs-price-range-transition-property"
-    value="varvar(--fs-transition-property)"
-  />
-  <TokenRow
-    token="--fs-price-range-transition-timing"
-    value="var(--fs-transition-timing)"
-  />
-</TokenTable>
-
----
-
-## Nested Elements
-
-### Slider
-
-<TokenTable>
-  <TokenRow
-    token="--fs-price-range-slider-bkg-color"
-    value="var(--fs-color-neutral-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-price-range-slider-selection-bkg-color"
-    value="var(--fs-color-primary-bkg-light-active)"
-    isColor
-  />
-</TokenTable>
-
-### Value Label
-
-<TokenTable>
-  <TokenRow
-    token="--fs-price-range-value-label-bottom"
-    value="var(--fs-spacing-3)"
-  />
-  <TokenRow
-    token="--fs-price-range-value-label-bkg-color"
-    value="var(--fs-color-body-bkg)"
-    isColor
-  />
-</TokenTable>
-
-### Absolute Values
-
-<TokenTable>
-  <TokenRow
-    token="--fs-price-range-absolute-values-text-color"
-    value="var(--fs-color-disabled-text)"
-    isColor
-  />
-</TokenTable>
-
-### Thumb
-
-<TokenTable>
-  <TokenRow token="--fs-price-range-thumb-size" value="var(--fs-spacing-4)" />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-price-range-thumb-bkg-color"
-    value="var(--fs-color-primary-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-price-range-thumb-bkg-color-hover"
-    value="var(--fs-color-primary-bkg-hover)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-price-range-thumb-border-radius"
-    value="var(--fs-border-radius-circle)"
-  />
-  <TokenRow
-    token="--fs-price-range-thumb-border-color"
-    value="var(--fs-price-range-thumb-bkg-color)"
-    globalValue="var(--fs-color-primary-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-price-range-thumb-border-color-hover"
-    value="var(--fs-price-range-thumb-bkg-color-hover)"
-    globalValue="var(--fs-color-primary-bkg-hover)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-price-range-thumb-border-width"
-    value="var(--fs-border-width)"
-  />
-</TokenTable>

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