@faststore/core 0.3.5 → 0.3.7

package/src/components/ui/Badge/DiscountBadge.tsx

@@ -1,57 +0,0 @@
-import { memo } from 'react'
-
-import { useDiscountPercent } from 'src/sdk/product/useDiscountPercent'
-
-import Badge from './Badge'
-
-export type DiscountBadgeProps = {
-  /**
-   * Specifies price without discount applied.
-   */
-  listPrice: number
-  /**
-   * Specifies current price with discount applied.
-   */
-  spotPrice: number
-  /**
-   * Sets the component size as big.
-   */
-  big?: boolean
-  /**
-   * Sets the limit percentage value to consider a low discount.
-   */
-  thresholdLow?: number
-  /**
-   * Sets the limit percentage value to consider a high discount.
-   */
-  thresholdHigh?: number
-}
-
-const DiscountBadge = ({
-  listPrice,
-  spotPrice,
-  big = false,
-  thresholdLow = 15,
-  thresholdHigh = 40,
-}: DiscountBadgeProps) => {
-  const discountPercent = useDiscountPercent(listPrice, spotPrice)
-
-  if (discountPercent === 0) {
-    return <></>
-  }
-
-  const discountVariant =
-    discountPercent <= thresholdLow
-      ? 'low'
-      : discountPercent <= thresholdHigh
-      ? 'medium'
-      : 'high'
-
-  return (
-    <Badge big={big} data-fs-discount-badge-variant={discountVariant}>
-      {discountPercent}% off
-    </Badge>
-  )
-}
-
-export default memo(DiscountBadge)

package/src/components/ui/Badge/badge.module.scss

@@ -1,252 +0,0 @@
-.fs-badge {
-  // --------------------------------------------------------
-  // Design Tokens for Badges
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-badge-padding                      : var(--fs-spacing-0) var(--fs-spacing-2);
-
-  --fs-badge-border-radius                : var(--fs-border-radius-pill);
-  --fs-badge-border-width                 : var(--fs-border-width);
-  --fs-badge-border-color                 : transparent;
-
-  --fs-badge-bkg-color                    : var(--fs-color-neutral-bkg);
-
-  --fs-badge-text-color                   : var(--fs-color-text);
-  --fs-badge-text-size                    : var(--fs-text-size-tiny);
-  --fs-badge-text-weight                  : var(--fs-text-weight-bold);
-
-  --fs-badge-transition-function          : var(--fs-transition-function);
-  --fs-badge-transition-property          : var(--fs-transition-property);
-  --fs-badge-transition-timing            : var(--fs-transition-timing);
-
-  // Neutral
-  --fs-badge-neutral-bkg-color            : var(--fs-color-neutral-bkg);
-  --fs-badge-neutral-text-color           : var(--fs-badge-text-color);
-  --fs-badge-neutral-border-color         : var(--fs-color-neutral-bkg);
-
-  // Success
-  --fs-badge-success-bkg-color            : var(--fs-color-success-bkg);
-  --fs-badge-success-text-color           : var(--fs-badge-text-color);
-  --fs-badge-success-border-color         : var(--fs-color-success-bkg);
-
-  // Highlighted
-  --fs-badge-highlighted-bkg-color        : var(--fs-color-highlighted-bkg);
-  --fs-badge-highlighted-text-color       : var(--fs-color-highlighted-text);
-  --fs-badge-highlighted-border-color     : var(--fs-color-highlighted-bkg);
-
-  // Info
-  --fs-badge-info-bkg-color               : var(--fs-color-info-bkg);
-  --fs-badge-info-text-color              : var(--fs-color-info-text);
-  --fs-badge-info-border-color            : var(--fs-color-info-bkg);
-
-  // Warning
-  --fs-badge-warning-bkg-color            : var(--fs-color-warning-bkg);
-  --fs-badge-warning-text-color           : var(--fs-color-warning-text);
-  --fs-badge-warning-border-color         : var(--fs-color-warning-bkg);
-
-  // Danger
-  --fs-badge-danger-bkg-color             : var(--fs-color-danger-bkg);
-  --fs-badge-danger-text-color            : var(--fs-badge-text-color);
-  --fs-badge-danger-border-color          : var(--fs-color-danger-bkg);
-
-  // Discount
-  --fs-badge-discount-low-bkg-color       : var(--fs-badge-success-bkg-color);
-  --fs-badge-discount-low-text-color      : var(--fs-badge-success-text-color);
-  --fs-badge-discount-low-border-color    : var(--fs-badge-success-border-color);
-
-  --fs-badge-discount-medium-bkg-color    : var(--fs-badge-warning-bkg-color);
-  --fs-badge-discount-medium-text-color   : var(--fs-badge-warning-text-color);
-  --fs-badge-discount-medium-border-color : var(--fs-badge-warning-border-color);
-
-  --fs-badge-discount-high-bkg-color      : var(--fs-badge-danger-bkg-color);
-  --fs-badge-discount-high-text-color     : var(--fs-badge-danger-text-color);
-  --fs-badge-discount-high-border-color   : var(--fs-badge-danger-border-color);
-
-  // Big
-  --fs-badge-big-text-size              : var(--fs-text-size-legend);
-  --fs-badge-big-padding                : var(--fs-spacing-1) var(--fs-spacing-2);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  width: fit-content;
-  height: fit-content;
-  font-size: var(--fs-badge-text-size);
-  font-weight: var(--fs-badge-text-weight);
-  line-height: 1;
-  color: var(--fs-badge-text-color);
-  text-transform: uppercase;
-  white-space: nowrap;
-  border-radius: var(--fs-badge-border-radius);
-
-  [data-fs-badge-wrapper] {
-    padding: var(--fs-badge-padding);
-    overflow: hidden;
-    border-radius: var(--fs-badge-border-radius);
-
-    span {
-      display: block;
-    }
-  }
-
-  [data-fs-badge-button] {
-    position: absolute;
-    right: 0;
-    z-index: 1;
-    background-color: transparent;
-    &:hover + [data-fs-badge-wrapper]::after { filter: brightness(0.95); }
-    > span { display: flex; }
-  }
-
-  // --------------------------------------------------------
-  // Variants Styles
-  // --------------------------------------------------------
-
-  &[data-fs-badge="big"] {
-    font-size: var(--fs-badge-big-text-size);
-
-    [data-fs-badge-wrapper] {
-      padding: var(--fs-badge-big-padding);
-    }
-  }
-
-  &[data-fs-badge-actionable="true"] {
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: var(--fs-control-tap-size);
-    padding-right: var(--fs-spacing-1);
-
-    [data-fs-badge-wrapper] {
-      position: relative;
-      padding-right: var(--fs-spacing-6);
-
-      &::after {
-        --button-hover-size: var(--fs-spacing-5);
-
-        position: absolute;
-        top: 50%;
-        right: 0;
-        width: var(--button-hover-size);
-        height: 100%;
-        content: "";
-        border-radius: 0 var(--fs-badge-border-radius) var(--fs-badge-border-radius) 0;
-        transition: var(--fs-badge-transition-property) var(--fs-badge-transition-timing) var(--fs-badge-transition-function);
-        transform: translateY(-50%);
-      }
-    }
-  }
-
-  &[data-fs-badge-variant="neutral"] {
-    color: var(--fs-badge-neutral-text-color);
-
-    [data-fs-badge-wrapper] {
-      background-color: var(--fs-badge-neutral-bkg-color);
-      border-color: var(--fs-badge-neutral-border-color);
-
-      &::after {
-        background-color: var(--fs-badge-neutral-bkg-color);
-      }
-    }
-  }
-
-  &[data-fs-badge-variant="success"] {
-    color: var(--fs-badge-success-text-color);
-
-    [data-fs-badge-wrapper] {
-      background-color: var(--fs-badge-success-bkg-color);
-      border-color: var(--fs-badge-success-border-color);
-
-      &::after {
-        background-color: var(--fs-badge-success-bkg-color);
-      }
-    }
-  }
-
-  &[data-fs-badge-variant="highlighted"] {
-    color: var(--fs-badge-highlighted-text-color);
-
-    [data-fs-badge-wrapper] {
-      background-color: var(--fs-badge-highlighted-bkg-color);
-      border-color: var(--fs-badge-highlighted-border-color);
-
-      &::after {
-        background-color: var(--fs-badge-highlighted-bkg-color);
-      }
-    }
-  }
-
-  &[data-fs-badge-variant="info"] {
-    color: var(--fs-badge-info-text-color);
-
-    [data-fs-badge-wrapper] {
-      background-color: var(--fs-badge-info-bkg-color);
-      border-color: var(--fs-badge-info-border-color);
-
-      &::after {
-        background-color: var(--fs-badge-info-bkg-color);
-      }
-    }
-  }
-
-  &[data-fs-badge-variant="warning"] {
-    color: var(--fs-badge-warning-text-color);
-
-    [data-fs-badge-wrapper] {
-      background-color: var(--fs-badge-warning-bkg-color);
-      border-color: var(--fs-badge-warning-border-color);
-
-      &::after {
-        background-color: var(--fs-badge-warning-bkg-color);
-      }
-    }
-  }
-
-  &[data-fs-badge-variant="danger"] {
-    color: var(--fs-badge-danger-text-color);
-
-    [data-fs-badge-wrapper] {
-      background-color: var(--fs-badge-danger-bkg-color);
-      border-color: var(--fs-badge-danger-border-color);
-
-      &::after {
-        background-color: var(--fs-badge-danger-bkg-color);
-      }
-    }
-  }
-
-  &[data-fs-discount-badge-variant="low"] {
-    color: var(--fs-badge-discount-low-text-color);
-
-    [data-fs-badge-wrapper] {
-      background-color: var(--fs-badge-discount-low-bkg-color);
-      border-color: var(--fs-badge-discount-low-border-color);
-
-      &::after {
-        background-color: var(--fs-badge-discount-low-bkg-color);
-      }
-    }
-  }
-
-  &[data-fs-discount-badge-variant="medium"] {
-    color: var(--fs-badge-discount-medium-text-color);
-
-    [data-fs-badge-wrapper] {
-      background-color: var(--fs-badge-discount-medium-bkg-color);
-      border-color: var(--fs-badge-discount-medium-border-color);
-      &::after { background-color: var(--fs-badge-discount-medium-bkg-color); }
-    }
-  }
-
-  &[data-fs-discount-badge-variant="high"] {
-    color: var(--fs-badge-discount-high-text-color);
-
-    [data-fs-badge-wrapper] {
-      background-color: var(--fs-badge-discount-high-bkg-color);
-      border-color: var(--fs-badge-discount-high-border-color);
-      &::after { background-color: var(--fs-badge-discount-high-bkg-color); }
-    }
-  }
-}

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

@@ -1,4 +0,0 @@
-export { default as DiscountBadge } from './DiscountBadge'
-export { default as Badge } from './Badge'
-export type { BadgeProps } from './Badge'
-export type { DiscountBadgeProps } from './DiscountBadge'

package/src/components/ui/Button/Button.tsx

@@ -1,85 +0,0 @@
-import { Button as UIButton, Icon as UIIcon } from '@faststore/ui'
-import type { ReactNode, AriaAttributes } from 'react'
-import type { ButtonProps as UIButtonProps } from '@faststore/ui'
-
-import styles from './button.module.scss'
-
-export type Variant = 'primary' | 'secondary' | 'tertiary'
-export type Size = 'small' | 'regular'
-export type IconPosition = 'left' | 'right'
-
-export interface ButtonProps
-  extends Omit<UIButtonProps, 'aria-label' | 'disabled'> {
-  /**
-   * Specifies the component variant
-   */
-  variant?: Variant
-  /**
-   * Specifies the size variant
-   */
-  size?: Size
-  /**
-   * Defines use of inverted colors
-   */
-  inverse?: boolean
-  /**
-   * Icon component
-   */
-  icon?: ReactNode
-  /**
-   * Specifies where the icon should be positioned
-   */
-  iconPosition?: IconPosition
-  /**
-   * Specifies counter badge. Only for button icons
-   */
-  counter?: number
-  /**
-   * For accessibility purposes, defines an ARIA label to the element when no label is provided
-   */
-  'aria-label'?: AriaAttributes['aria-label']
-  /**
-   * Specifies that this button should be disabled
-   */
-  disabled?: boolean
-}
-
-function Button({
-  variant,
-  size = 'regular',
-  inverse,
-  icon,
-  iconPosition,
-  children,
-  counter = 0,
-  'aria-label': ariaLabel,
-  disabled,
-  ...props
-}: ButtonProps) {
-  const isButtonIcon = icon && !iconPosition && !children
-
-  return (
-    <UIButton
-      aria-label={ariaLabel}
-      className={styles.fsButton}
-      data-fs-button
-      data-fs-button-inverse={inverse}
-      data-fs-button-size={size}
-      data-fs-button-icon={isButtonIcon}
-      data-fs-button-variant={isButtonIcon ? 'tertiary' : variant}
-      disabled={disabled}
-      {...props}
-    >
-      {(isButtonIcon || iconPosition === 'left') && (
-        <>
-          {counter > 0 && <span data-fs-button-counter>{counter}</span>}
-          <UIIcon component={icon} />
-        </>
-      )}
-      {children}
-      {iconPosition === 'right' && <UIIcon component={icon} />}
-    </UIButton>
-  )
-}
-
-export default Button

package/src/components/ui/Button/ButtonBuy/ButtonBuy.tsx

@@ -1,24 +0,0 @@
-import Icon from 'src/components/ui/Icon'
-
-import Button from '../Button'
-import type { ButtonProps } from '../Button'
-import styles from '../button.module.scss'
-
-type Props = ButtonProps
-
-function ButtonBuy({ children, ...otherProps }: Props) {
-  return (
-    <Button
-      className={styles.fsButton}
-      data-fs-button
-      data-fs-button-buy
-      data-fs-button-variant="buy"
-      {...otherProps}
-    >
-      <Icon name="ShoppingCart" width={18} height={18} weight="bold" />
-      {children}
-    </Button>
-  )
-}
-
-export default ButtonBuy

package/src/components/ui/Button/ButtonBuy/index.ts

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

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

@@ -1,268 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import Checkbox from '.'
-
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-<Meta
-  title="Atoms/Checkbox"
-  component={Checkbox}
-  argTypes={{
-    disabled: {
-      type: {
-        name: 'boolean',
-      },
-      description: '`boolean`',
-      defaultValue: false,
-    },
-    partial: {
-      type: {
-        name: 'boolean',
-      },
-      defaultValue: false,
-    },
-  }}
-/>
-
-export const Template = ({ id, ...args }) => (
-  <div style={{ display: 'flex' }}>
-    <Checkbox id={id} {...args} onChange={() => {}} />
-    <label htmlFor={id} style={{ paddingLeft: '1rem' }}>
-      label
-    </label>
-  </div>
-)
-
-<header>
-
-# Checkbox
-
-An input Checkbox that is commonly used on Filter component.
-
-</header>
-
-## Overview
-
-The `Checkbox` component uses [FastStore UI Checkbox](https://www.faststore.dev/reference/ui/atoms/Checkbox) as base.
-
-<Canvas>
-  <Story
-    name="overview-default"
-    args={{
-      id: 'overview-checkbox-default',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-checked"
-    args={{
-      id: 'overview-checkbox-checked',
-      checked: true,
-      disabled: false,
-      partial: false,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-partial"
-    args={{
-      id: 'overview-checkbox-partial',
-      partial: true,
-      disabled: false,
-      checked: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-disabled"
-    args={{
-      id: 'overview-checkbox-disabled',
-      disabled: true,
-      checked: false,
-      partial: false,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
----
-
-## Usage
-
-`import Checkbox from '../components/ui/Checkbox'`
-
-<Canvas>
-  <Story
-    name="default"
-    args={{
-      id: 'checkbox-default',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="default" />
-
-<TokenTable>
-  <TokenRow token="--fs-checkbox-width" value="1.25rem" />
-  <TokenRow token="--fs-checkbox-height" value="var(--fs-checkbox-width)" />
-  <TokenDivider />
-  <TokenRow token="--fs-checkbox-border-width" value="var(--fs-border-width)" />
-  <TokenRow
-    token="--fs-checkbox-border-radius"
-    value="var(--fs-border-radius)"
-  />
-  <TokenRow
-    token="--fs-checkbox-border-color"
-    value="var(--fs-border-color)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-checkbox-border-color-hover"
-    value="var(--fs-border-color-active)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-checkbox-transition"
-    value="border var(--fs-transition-timing) var(--fs-transition-function), background-color var(--fs-transition-timing) var(--fs-transition-function), box-shadow var(--fs-transition-timing) var(--fs-transition-function)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-checkbox-bkg-color-hover"
-    value="var(--fs-color-primary-bkg-light)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-checkbox-shadow-hover"
-    value="0 0 0 var(--fs-checkbox-border-width) var(--fs-border-color-active)"
-  />
-</TokenTable>
-
----
-
-## Variants
-
-### Checked
-
-<Canvas>
-  <Story
-    name="checked"
-    args={{
-      id: 'checkbox-checked',
-      checked: true,
-      disabled: false,
-      partial: false,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-checkbox-checked-bkg-color"
-    value="var(--fs-color-primary-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-checkbox-checked-bkg-color-hover"
-    value="var(--fs-color-primary-bkg-hover)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-checkbox-checked-border-color-hover"
-    value="var((--fs-border-color-hover)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-checkbox-checked-shadow-hover"
-    value="0 0 0 var(--fs-checkbox-border-width)
-          var(--fs-checkbox-checked-border-color-hover)"
-  />
-</TokenTable>
-
-### Disabled
-
-<Canvas>
-  <Story
-    name="disabled"
-    args={{
-      id: 'checkbox-disabled',
-      disabled: true,
-      checked: false,
-      partial: false,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-checkbox-disabled-bkg-color"
-    value="var(--fs-color-disabled-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-checkbox-disabled-border-width"
-    value="var(--fs-checkbox-border-width)"
-  />
-  <TokenRow
-    token="--fs-checkbox-disabled-border-color"
-    value="var(--fs-border-color-disabled)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-checkbox-disabled-text-color"
-    value="var(--fs-color-disabled-text)"
-    isColor
-  />
-</TokenTable>
-
-### Partial
-
-<Canvas>
-  <Story
-    name="partial"
-    args={{
-      id: 'checkbox-partial',
-      partial: true,
-      disabled: false,
-      checked: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-checkbox-partial-bkg-color"
-    value="var(--fs-color-body-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-checkbox-partial-border-width"
-    value="var(--fs-checkbox-border-width)"
-  />
-  <TokenRow
-    token="--fs-checkbox-partial-border-color"
-    value="var(--fs-color-primary-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-checkbox-partial-bkg-color-hover"
-    value="var(--fs-color-primary-bkg-light)"
-    isColor
-  />
-</TokenTable>