@faststore/ui 2.0.33-alpha.0 → 2.0.35-alpha.0

package/src/components/molecules/PriceRange/stories/PriceRange.stories.tsx

@@ -1,45 +0,0 @@
-import type { Meta, Story } from '@storybook/react'
-import React from 'react'
-
-import type { ComponentArgTypes } from '../../../../typings/utils'
-import type { PriceRangeProps } from '../PriceRange'
-import Component from '../PriceRange'
-import mdx from './PriceRange.mdx'
-
-const PriceRangeTemplate: Story<PriceRangeProps> = (props) => (
-  <Component {...props} />
-)
-
-export const PriceRange = PriceRangeTemplate.bind({})
-PriceRange.storyName = 'PriceRange'
-
-function formatter(price: number) {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-  }).format(price)
-}
-
-const argTypes: ComponentArgTypes<PriceRangeProps> = {
-  min: {
-    control: { type: 'object' },
-    defaultValue: { selected: 10, absolute: 0 },
-  },
-  max: {
-    control: { type: 'object' },
-    defaultValue: { selected: 90, absolute: 100 },
-  },
-  formatter: {
-    defaultValue: formatter,
-  },
-}
-
-export default {
-  title: 'Molecules/PriceRange',
-  argTypes,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

package/src/components/molecules/ProductCard/stories/ProductCard.mdx

@@ -1,55 +0,0 @@
-import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
-
-import ProductCard from '../ProductCard'
-import ProductCardImage from '../ProductCardImage'
-import ProductCardContent from '../ProductCardContent'
-import ProductCardActions from '../ProductCardActions'
-
-# ProductCard
-
-<Canvas>
-  <Story id="molecules-productcard--product-card" />
-</Canvas>
-
-The `ProductCard` uses the [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) pattern, its components are:
-
-- `ProductCard`: the wrapper of the product card component;
-- `ProductCardImage`: the wrapper component for the content's image;
-- `ProductCardContent`: the wrapper component for the content's details;
-- `ProductCardActions`: the wrapper component for the content's CTAs (call-to-action);
-
-## Props
-
-All Product Card related components support all attributes also supported by the `<div>` tag.
-
-### `ProductCard`
-
-<ArgsTable of={ProductCard} />
-
-### `ProductCardImage`
-
-<ArgsTable of={ProductCardImage} />
-
-### `ProductCardContent`
-
-<ArgsTable of={ProductCardContent} />
-
-### `ProductCardActions`
-
-<ArgsTable of={ProductCardActions} />
-
-## CSS Selectors
-
-```css
-[data-fs-product-card] {
-}
-
-[data-product-card-image] {
-}
-
-[data-product-card-content] {
-}
-
-[data-product-card-actions] {
-}
-```

package/src/components/molecules/ProductCard/stories/ProductCard.stories.tsx

@@ -1,60 +0,0 @@
-import type { Story, Meta } from '@storybook/react'
-import React from 'react'
-
-// Atoms
-import { Badge, Button, Price } from '@faststore/components'
-// Card components
-import ProductCardComponent from '../ProductCard'
-import ProductCardImage from '../ProductCardImage'
-import ProductCardContent from '../ProductCardContent'
-import ProductCardActions from '../ProductCardActions'
-import type { ProductCardProps } from '../ProductCard'
-import mdx from './ProductCard.mdx'
-
-const ProductCardTemplate: Story<ProductCardProps> = ({ testId }) => {
-  return (
-    <ProductCardComponent testId={testId}>
-      <ProductCardImage>
-        <img
-          alt="A vintage camera"
-          src="https://storecomponents.vtex.app/assets/fit-in/480x480/center/middle/https%3A%2F%2Fstorecomponents.vtexassets.com%2Farquivos%2Fids%2F155481%2FFrame-3.jpg%3Fv%3D636793814536230000"
-        />
-      </ProductCardImage>
-      <ProductCardContent>
-        <h3>Vintage Top Camera</h3>
-        <div>
-          <Price
-            value={89.9}
-            variant="selling"
-            formatter={formatter}
-            style={{ textDecoration: 'line-through' }}
-          />
-          <Price value={68.9} variant="selling" formatter={formatter} />
-        </div>
-        <Badge>15% OFF</Badge>
-      </ProductCardContent>
-      <ProductCardActions>
-        <Button onClick={() => null}>Add to Cart</Button>
-      </ProductCardActions>
-    </ProductCardComponent>
-  )
-}
-
-function formatter(price: number) {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-  }).format(price)
-}
-
-export const ProductCard = ProductCardTemplate.bind({})
-ProductCard.storyName = 'ProductCard'
-
-export default {
-  title: 'Molecules/ProductCard',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

package/src/components/molecules/ProductTitle/stories/ProductTitle.mdx

@@ -1,26 +0,0 @@
-import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
-
-import ProductTitle from '../ProductTitle'
-
-# ProductTitle
-
-<Canvas>
-  <Story id="molecules-producttitle--product-title" />
-</Canvas>
-
-## Props
-
-<ArgsTable of={ ProductTitle } />
-
-## CSS Selectors
-
-```css
-[data-fs-product-title] {
-}
-
-[data-fs-product-title-header] {
-}
-
-[data-fs-product-title-addendum] {
-}
-```

package/src/components/molecules/ProductTitle/stories/ProductTitle.stories.tsx

@@ -1,27 +0,0 @@
-import type { Story, Meta } from '@storybook/react'
-import React from 'react'
-
-import type { ProductTitleProps } from '../ProductTitle'
-import Component from '../ProductTitle'
-import mdx from './ProductTitle.mdx'
-import Badge from '@faststore/components'
-
-const ProductTitleTemplate: Story<ProductTitleProps> = () => (
-  <Component
-    title={<h1>Apple Magic Mouse</h1>}
-    refNumber="99995945"
-    label={<Badge>90%</Badge>}
-  />
-)
-
-export const ProductTitle = ProductTitleTemplate.bind({})
-ProductTitle.storyName = 'ProductTitle'
-
-export default {
-  title: 'Molecules/ProductTitle',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

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

@@ -1,26 +0,0 @@
-import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-
-import QuantitySelector from '../QuantitySelector'
-
-# QuantitySelector
-
-## Default Style
-
-<Canvas>
-  <Story id="molecules-quantityselector--quantity-selector" />
-</Canvas>
-
-# Props
-
-<ArgsTable of={QuantitySelector} />
-
-# CSS Selectors
-
-```css
-[data-fs-quantity-selector] {
-}
-[data-quantity-selector-input] {
-}
-[data-quantity-selector-button='(left|right)'] {
-}
-```

package/src/components/molecules/QuantitySelector/stories/QuantitySelector.stories.tsx

@@ -1,77 +0,0 @@
-import type { Meta, Story } from '@storybook/react'
-import React, { useState } from 'react'
-
-import type { QuantitySelectorProps } from '../QuantitySelector'
-import Component from '../QuantitySelector'
-import { PlusIcon, MinusIcon } from './assets/Icons'
-import mdx from './QuantitySelector.mdx'
-
-const MAX_QUANTITY = 10
-const MIN_QUANTITY = 1
-
-export const QuantitySelector: Story<QuantitySelectorProps> = () => {
-  const [quantity, setQuantity] = useState(MIN_QUANTITY)
-
-  function increase() {
-    setQuantity((currentQuantity) =>
-      validateQuantityBounds(currentQuantity + 1)
-    )
-  }
-
-  function decrease() {
-    setQuantity((currentQuantity) =>
-      validateQuantityBounds(currentQuantity - 1)
-    )
-  }
-
-  function isLeftDisabled(): boolean {
-    return quantity === MIN_QUANTITY
-  }
-
-  function isRightDisabled(): boolean {
-    return quantity === MAX_QUANTITY
-  }
-
-  function validateQuantityBounds(n: number): number {
-    return Math.min(Math.max(n, MIN_QUANTITY), MAX_QUANTITY)
-  }
-
-  function validateInput(e: React.FormEvent<HTMLInputElement>) {
-    const val = e.currentTarget.value
-
-    if (!Number.isNaN(Number(val))) {
-      setQuantity(validateQuantityBounds(Number(val)))
-    }
-  }
-
-  return (
-    <Component
-      quantity={quantity}
-      leftButtonProps={{
-        onClick: decrease,
-        disabled: isLeftDisabled(),
-        icon: <MinusIcon color={isLeftDisabled() ? '#898F9E' : '#2953B2'} />,
-      }}
-      rightButtonProps={{
-        onClick: increase,
-        disabled: isRightDisabled(),
-        icon: <PlusIcon color={isRightDisabled() ? '#898F9E' : '#2953B2'} />,
-      }}
-      inputProps={{
-        onChange: validateInput,
-        readOnly: false,
-      }}
-    />
-  )
-}
-
-QuantitySelector.storyName = 'QuantitySelector'
-
-export default {
-  title: 'Molecules/QuantitySelector',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

package/src/components/molecules/QuantitySelector/stories/assets/Icons.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-
-type QuantitySelectorIconProps = {
-  color: string
-}
-
-export function PlusIcon(props: QuantitySelectorIconProps) {
-  return (
-    <svg
-      width="32"
-      height="32"
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M11 16H21"
-        stroke={props.color}
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M16 11V21"
-        stroke={props.color}
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-export function MinusIcon(props: QuantitySelectorIconProps) {
-  return (
-    <svg
-      width="32"
-      height="32"
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M11 16H21"
-        stroke={props.color}
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}

package/src/components/molecules/RadioField/RadioField.stories.mdx

@@ -1,38 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import { RadioField } from '@faststore/components'
-
-<Meta title="Molecules/RadioField" component={RadioField} argTypes={{}} />
-
-export const Template = (args) => (
-  <RadioField id="radio-field" label="RadioField" />
-)
-
-<header>
-
-# RadioField
-
-RadioField is composed of a Checkbox input and its corresponding Label. It allows users to select one option from a set.
-
-</header>
-
-## Usage
-
-```jsx
-import RadioField from '@faststore/ui'
-// Styles
-import '@faststore/ui/src/components/molecules/RadioField/styles.scss'
-```
-
-<Canvas>
-  <Story
-    name="default"
-    args={{
-      id: 'radio-default',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="default" />

package/src/components/molecules/RadioGroup/stories/RadioGroup.mdx

@@ -1,39 +0,0 @@
-import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
-
-import RadioGroup from '../RadioGroup.tsx'
-import RadioOption from '../RadioOption.tsx'
-
-# Simple RadioGroup
-
-<Canvas>
-  <Story id="molecules-radiogroup--radio-group-simple" />
-</Canvas>
-
-# RadioOption With Children
-
-<Canvas>
-  <Story id="molecules-radiogroup--radio-option-with-children" />
-</Canvas>
-
-# Controlled RadioGroup
-
-<Canvas>
-  <Story id="molecules-radiogroup--radio-group-controlled" />
-</Canvas>
-
-## Props
-
-#### RadioGroup Props
-
-<ArgsTable of={RadioGroup} />
-
-#### RadioOption Props
-
-<ArgsTable of={RadioOption} />
-
-## CSS Selectors
-
-```css
-[data-fs-radio-option] {}
-[data-fs-radio-option-item] {}
-```

package/src/components/molecules/RadioGroup/stories/RadioGroup.stories.tsx

@@ -1,108 +0,0 @@
-import React, { useState } from 'react'
-import type { Story } from '@storybook/react'
-
-import type { RadioGroupProps, RadioOptionProps } from '..'
-import RadioGroup from '../RadioGroup'
-import RadioOption from '../RadioOption'
-import mdx from './RadioGroup.mdx'
-
-export const RadioGroupSimple: Story<RadioGroupProps & RadioOptionProps> = (
-  args
-) => {
-  const [option, setOption] = useState<string | number>('')
-
-  return (
-    <>
-      <RadioGroup
-        {...args}
-        name="radio-group"
-        onChange={(v) => {
-          setOption(v.currentTarget.value)
-        }}
-        selectedValue={option}
-      >
-        <RadioOption value="radio-1" label="Radio 1">
-          <span>Radio 1</span>
-        </RadioOption>
-        <RadioOption value="radio-2" label="Radio 2">
-          <span>Radio 2</span>
-        </RadioOption>
-      </RadioGroup>
-    </>
-  )
-}
-
-export const RadioOptionWithChildren: Story<
-  RadioGroupProps & RadioOptionProps
-> = (args) => {
-  const [option, setOption] = useState<string | number>('')
-
-  return (
-    <>
-      <RadioGroup
-        {...args}
-        name="radio-group-with-children"
-        onChange={(v) => {
-          setOption(v.currentTarget.value)
-        }}
-        selectedValue={option}
-      >
-        <RadioOption value="radio-1" label="Radio 1">
-          <div>Radio 1</div>
-        </RadioOption>
-        <RadioOption value="radio-2" label="Radio 2">
-          <div>Radio 2</div>
-        </RadioOption>
-        <RadioOption value="radio-3" label="Radio 3">
-          <div>Radio 3</div>
-        </RadioOption>
-      </RadioGroup>
-    </>
-  )
-}
-
-export const RadioGroupControlled: Story<RadioGroupProps & RadioOptionProps> = (
-  args
-) => {
-  const [option, setOption] = useState<string | number>('')
-
-  return (
-    <>
-      <RadioGroup
-        {...args}
-        name="radio-group-controlled"
-        onChange={(v) => {
-          setOption(v.currentTarget.value)
-        }}
-        selectedValue={option}
-      >
-        <RadioOption value="radio-1" label="Radio 1">
-          <span>Radio 1</span>
-        </RadioOption>
-        <RadioOption value="radio-2" label="Radio 2">
-          <span>Radio 2</span>
-        </RadioOption>
-        <RadioOption value="radio-3" label="Radio 3">
-          <span>Radio 3</span>
-        </RadioOption>
-      </RadioGroup>
-      <br />
-      <button
-        onClick={() => {
-          setOption('radio-3')
-        }}
-      >
-        Check Radio 3
-      </button>
-    </>
-  )
-}
-
-export default {
-  title: 'Molecules/RadioGroup',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-}

package/src/components/molecules/SearchInput/stories/SearchInput.mdx

@@ -1,28 +0,0 @@
-import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import SearchInput from '../SearchInput'
-import CustomIcon from './assets/CustomIcon'
-
-# Search Input
-
-## Default
-
-<Canvas>
-  <Story id="molecules-searchinput--default" />
-</Canvas>
-
-## With custom icon
-
-<Canvas>
-  <Story id="molecules-searchinput--custom-icon" />
-</Canvas>
-
-## Props
-
-<ArgsTable of={SearchInput} />
-
-## CSS Selectors
-```css
-[data-fs-search-input-form] {}
-```
-
-This component inherits [Input](?path=/docs/atoms-input--input#css-selectors), [Button](?path=/docs/atoms-button--button#css-selectors), [Icon](?path=/docs/atoms-icon--icon#css-selectors) css selectors.

package/src/components/molecules/SearchInput/stories/SearchInput.stories.tsx

@@ -1,45 +0,0 @@
-import type { Story } from '@storybook/react'
-import React from 'react'
-
-import type { SearchInputProps } from '../SearchInput'
-import Component from '../SearchInput'
-import mdx from './SearchInput.mdx'
-import Icon from './assets/CustomIcon'
-import type { ComponentArgTypes } from '../../../../typings/utils'
-
-const DefaultTemplate: Story<SearchInputProps> = ({
-  onSubmit,
-  placeholder,
-}) => <Component onSubmit={onSubmit} placeholder={placeholder} />
-
-export const Default = DefaultTemplate.bind({})
-
-const CustomIconTemplate: Story<SearchInputProps> = ({
-  onSubmit,
-  placeholder,
-}) => (
-  <Component icon={<Icon />} onSubmit={onSubmit} placeholder={placeholder} />
-)
-
-export const CustomIcon = CustomIconTemplate.bind({})
-
-const argTypes: ComponentArgTypes<SearchInputProps> = {
-  placeholder: {
-    control: { type: 'text' },
-    defaultValue: 'Search',
-  },
-  onSubmit: {
-    action: 'SearchInput submitted!',
-    table: { disable: true },
-  },
-}
-
-export default {
-  title: 'Molecules/SearchInput',
-  argTypes,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-}

package/src/components/molecules/SearchInput/stories/assets/CustomIcon.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import type { FC } from 'react'
-
-const CustomIcon: FC = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <circle cx="12" cy="12" r="10" />
-    <line x1="15" y1="9" x2="9" y2="15" />
-    <line x1="9" y1="9" x2="15" y2="15" />
-  </svg>
-)
-
-export default CustomIcon

package/src/components/molecules/SkuSelector/stories/SkuSelector.mdx

@@ -1,24 +0,0 @@
-import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
-
-import SkuSelector from '../SkuSelector'
-
-# SkuSelector
-
-<Canvas>
-  <Story id="molecules-skuselector--sku-selector" />
-</Canvas>
-
-## Props
-
-<ArgsTable of={ SkuSelector } />
-
-## CSS Selectors
-
-```css
-[data-fs-sku-selector] {
-}
-[data-fs-sku-selector-variant='(label|image)'] {
-}
-[data-fs-sku-selector-title] {
-}
-```