@faststore/ui 2.0.32-alpha.0 → 2.0.34-alpha.0

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

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

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

@@ -1,63 +0,0 @@
-import type { Meta, Story } from '@storybook/react'
-import React from 'react'
-
-// Atoms
-import { Icon } from '@faststore/components'
-// Card components
-import type { CardProps } from '../Card'
-import CardComponent from '../Card'
-import CardActions from '../CardActions'
-import CardContent from '../CardContent'
-import CardImage from '../CardImage'
-import mdx from './Card.mdx'
-
-const RightArrow = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-  >
-    <path
-      d="M10.6553 3.40717C10.3624 3.11428 9.88756 3.11428 9.59467 3.40717C9.30178 3.70006 9.30178 4.17494 9.59467 4.46783L13.3768 8.25H2.8125C2.39829 8.25 2.0625 8.58579 2.0625 9C2.0625 9.41421 2.39829 9.75 2.8125 9.75H13.3768L9.59467 13.5322C9.30178 13.8251 9.30178 14.2999 9.59467 14.5928C9.88756 14.8857 10.3624 14.8857 10.6553 14.5928L15.7178 9.53033C15.8643 9.38388 15.9375 9.19194 15.9375 9C15.9375 8.89831 15.9173 8.80134 15.8806 8.71291C15.844 8.62445 15.7897 8.54158 15.7178 8.46967L10.6553 3.40717Z"
-      fill="currentColor"
-    />
-  </svg>
-)
-
-const CardTemplate: Story<CardProps> = ({ testId }) => {
-  return (
-    <CardComponent testId={testId}>
-      <CardImage>
-        <img
-          alt="A person with hands on the pocket, carrying a round straw bag"
-          src="https://storecomponents.vtex.app/assets/fit-in/1280x613/center/middle/https%3A%2F%2Fstorecomponents.vtexassets.com%2Fassets%2Fvtex.file-manager-graphql%2Fimages%2Fedce348c-068c-4fb9-91f2-7d235d596e0f___b2822f893b14f87337d08f07f0e520ab.jpg"
-        />
-      </CardImage>
-      <CardContent>
-        <h3>Get to know our next release</h3>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Evehicula in
-          turpis sit ametl.{' '}
-        </p>
-      </CardContent>
-      <CardActions>
-        <a href="/">
-          Check new releases <Icon component={<RightArrow />} />
-        </a>
-      </CardActions>
-    </CardComponent>
-  )
-}
-
-export const Card = CardTemplate.bind({})
-Card.storyName = 'Card'
-
-export default {
-  title: 'Molecules/Card',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

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

@@ -1,35 +0,0 @@
-import { Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import Carousel from '../Carousel'
-
-# Carousel
-
-<Canvas>
-  <Story id="molecules-carousel--carousel" />
-</Canvas>
-
-## Props
-
-<ArgsTable of={Carousel} />
-
-## CSS Selectors
-
-```css
-[data-fs-carousel] {}
-
-[data-fs-carousel-track-container] {}
-
-[data-fs-carousel-track] {}
-
-[data-fs-carousel-item] {}
-
-[data-fs-carousel-controls] {}
-
-[data-fs-carousel-control="left|right"] {}
-
-[data-fs-carousel-bullets] {}
-
-[data-fs-carousel-bullets] [data-fs-bullets] {}
-```
-
-This components inherits [IconButton](?path=/docs/molecules-iconbutton--default#css-selectors), [Bullets](?path=/docs/molecules-bullets--bullets#css-selectors) css selectors.

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

@@ -1,56 +0,0 @@
-import React from 'react'
-import type { Story } from '@storybook/react'
-
-import type { ComponentArgTypes } from '../../../../typings/utils'
-import Component from '../Carousel'
-import type { CarouselProps } from '../Carousel'
-import mdx from './Carousel.mdx'
-
-const CarouselTemplate: Story<
-  CarouselProps & { transitionDuration: number }
-> = ({ infiniteMode, controls, transitionDuration }) => (
-  <Component
-    infiniteMode={infiniteMode}
-    controls={controls}
-    transition={{ property: 'transform', duration: transitionDuration }}
-  >
-    <img
-      height={480}
-      width="100%"
-      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"
-    />
-    <img
-      height={480}
-      width="100%"
-      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"
-    />
-  </Component>
-)
-
-export const Carousel = CarouselTemplate.bind({})
-
-const argTypes: ComponentArgTypes<
-  CarouselProps & { transitionDuration: number }
-> = {
-  controls: {
-    type: 'select',
-    options: ['complete', 'paginationBullets', 'navigationArrows'],
-    defaultValue: 'complete',
-  },
-  transitionDuration: {
-    type: 'number',
-    defaultValue: 400,
-  },
-}
-
-export default {
-  title: 'Molecules/Carousel',
-  argTypes,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-}

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

@@ -1,79 +0,0 @@
-import { ArgsTable, Canvas, Props, Story } from '@storybook/addon-docs'
-
-import CartItem, {
-  CartItemActions,
-  CartItemContent,
-  CartItemImage,
-  CartItemPrices,
-  CartItemSummary,
-  CartItemTitle,
-} from '../'
-
-# Cart Item
-
-<Canvas>
-  <Story id="molecules-cartitem--default" />
-</Canvas>
-
-## Components
-
-The `CartItem` uses the [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) pattern, its components are:
-
-- `CartItem`: the wrapper component;
-- `CartItemContent`: the wrapper component for the image and summary;
-- `CartItemImage`: the wrapper component for the content's image;
-- `CartItemSummary`: the wrapper component for the title and prices;
-- `CartItemTitle`: the wrapper component for the title;
-- `CartItemPrices`: the wrapper component for the prices;
-- `CartItemActions`: the wrapper component for the remove from cart button and quantity selector;
-
-## Props
-
-All CartItem-related components support all attributes also supported by the `<div>` tag.
-
-### `CartItem`
-
-<ArgsTable of={CartItem} />
-
-### `CartItemContent`
-
-<ArgsTable of={CartItemContent} />
-
-### `CartItemImage`
-
-<ArgsTable of={CartItemImage} />
-
-### `CartItemSummary`
-
-<ArgsTable of={CartItemSummary} />
-
-### `CartItemTitle`
-
-<ArgsTable of={CartItemTitle} />
-
-### `CartItemPrices`
-
-<ArgsTable of={CartItemPrices} />
-
-### `CartItemActions`
-
-<ArgsTable of={CartItemActions} />
-
-## CSS Selectors
-
-```css
-[data-fs-cart-item] {
-}
-[data-fs-cart-item-content] {
-}
-[data-fs-cart-item-image] {
-}
-[data-fs-cart-item-summary] {
-}
-[data-fs-cart-item-title] {
-}
-[data-fs-cart-item-prices] {
-}
-[data-fs-cart-item-actions] {
-}
-```

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

@@ -1,70 +0,0 @@
-import React from 'react'
-
-import CartItem, {
-  CartItemActions,
-  CartItemContent,
-  CartItemImage,
-  CartItemPrices,
-  CartItemSummary,
-  CartItemTitle,
-} from '../'
-import { Button, Price, QuantitySelector } from '../../../../'
-import mdx from './CartItem.mdx'
-
-import type { Meta, Story } from '@storybook/react'
-import type { CartItemProps } from '../'
-
-const product = {
-  name: 'Apple Magic Mouse',
-  imageUrl:
-    'https://assets.vtex.app/unsafe/216x216/center/middle/https%3A%2F%2Fstoreframework.vtexassets.com%2Farquivos%2Fids%2F190902%2Funsplash-magic-mouse.jpg%3Fv%3D637800136963870000',
-  price: {
-    listing: 999,
-    spot: 950,
-  },
-}
-
-const CartItemTemplate: Story<CartItemProps> = ({ testId }) => {
-  return (
-    <CartItem testId={testId}>
-      <CartItemContent>
-        <CartItemImage>
-          <img alt={product.name} src={product.imageUrl} />
-        </CartItemImage>
-
-        <CartItemSummary>
-          <CartItemTitle>{product.name}</CartItemTitle>
-
-          <CartItemPrices>
-            <Price variant="listing" value={product.price.listing} />
-            <Price variant="spot" value={product.price.spot} />
-          </CartItemPrices>
-        </CartItemSummary>
-      </CartItemContent>
-
-      <CartItemActions>
-        <Button>Remove</Button>
-
-        <QuantitySelector
-          quantity={1}
-          leftButtonProps={{ icon: <span>-</span> }}
-          rightButtonProps={{ icon: <span>+</span> }}
-          inputProps={{ readOnly: true }}
-        />
-      </CartItemActions>
-    </CartItem>
-  )
-}
-
-export const Default = CartItemTemplate.bind({})
-
-Default.storyName = 'CartItem'
-
-export default {
-  title: 'Molecules/CartItem',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

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

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

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

@@ -1,38 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import { DiscountBadge } from '@faststore/components'
-
-<Meta title="Molecules/DiscountBadge" component={DiscountBadge} argTypes={{}} />
-
-export const Template = (args) => (
-  <DiscountBadge id="discount-badge-id" listPrice={65} spotPrice={40} />
-)
-
-<header>
-
-# DiscountBadge
-
-A custom `Badge` that display product's discounts.
-
-</header>
-
-## Usage
-
-```jsx
-import { DiscountBadge } from '@faststore/ui'
-// Styles
-import '@faststore/ui/src/components/molecules/DiscountBadge/styles.scss'
-```
-
-<Canvas>
-  <Story
-    name="default"
-    args={{
-      id: 'discount-badge-default',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="default" />

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

@@ -1,63 +0,0 @@
-import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
-
-import Dropdown from '../Dropdown'
-import DropdownButton from '../DropdownButton'
-import DropdownItem from '../DropdownItem'
-import DropdownMenu from '../DropdownMenu'
-
-# DropdownUncontrolled
-
-<Canvas>
-  <Story id="molecules-dropdown--uncontrolled" />
-</Canvas>
-
-# DropdownControlled
-
-<Canvas>
-  <Story id="molecules-dropdown--controlled" />
-</Canvas>
-
-# DropdownSelectable
-
-<Canvas>
-  <Story id="molecules-dropdown--selectable" />
-</Canvas>
-
-## Components
-
-The `Dropdown` uses the [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) pattern, its components are:
-
-- `Dropdown`: the wrapper component, can receive an `isOpen` and emit the event `onDismiss`, which can be used as a controlled component.
-- `DropdownButton`: the button that emits the trigger to open de DropdownMenu.
-- `DropdownItem`: an option on DropdownMenu.
-- `DropdownMenu`: wraps a series of `DropdownItem`s.
-
-## Props
-
-### `Dropdown`
-
-<ArgsTable of={Dropdown} />
-
-### `DropdownButton`
-
-<ArgsTable of={DropdownButton} />
-
-### `DropdownItem`
-
-<ArgsTable of={DropdownItem} />
-
-### `DropdownMenu`
-
-<ArgsTable of={DropdownMenu} />
-
-## CSS Selectors
-
-```css
-[data-fs-dropdown-button] {}
-
-[data-fs-dropdown-item] {}
-
-[data-fs-dropdown-overlay] {}
-
-[data-fs-dropdown-menu] {}
-```

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

@@ -1,94 +0,0 @@
-import React, { useState } from 'react'
-import type { PropsWithChildren } from 'react'
-import type { Meta, Story } from '@storybook/react'
-
-import { Caret } from './assets/Caret'
-import { Button } from '@faststore/components'
-import type { DropdownProps } from '..'
-import Dropdown, { DropdownButton, DropdownItem, DropdownMenu } from '..'
-import mdx from './Dropdown.mdx'
-
-const DropdownUncontrolledTemplate: Story<
-  PropsWithChildren<DropdownProps>
-> = () => {
-  return (
-    <>
-      <Dropdown>
-        <DropdownButton>Dropdown Button</DropdownButton>
-        <DropdownMenu>
-          <DropdownItem onClick={() => console.log('Item 1')}>
-            Dropdown Item 1
-          </DropdownItem>
-          <DropdownItem onClick={() => console.log('Item 2')}>
-            Dropdown Item 2
-          </DropdownItem>
-          <DropdownItem onClick={() => console.log('Item 3')}>
-            Dropdown Item 3
-          </DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
-    </>
-  )
-}
-
-export const Uncontrolled = DropdownUncontrolledTemplate.bind({})
-
-const DropdownControlledTemplate: Story<
-  PropsWithChildren<DropdownProps>
-> = () => {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <>
-      <Button onClick={() => setIsOpen((old) => !old)}>Simple Button</Button>
-      <Dropdown isOpen={isOpen} onDismiss={() => setIsOpen(false)}>
-        <DropdownButton>DropdownButton</DropdownButton>
-        <DropdownMenu>
-          <DropdownItem>Dropdown Item 1</DropdownItem>
-          <DropdownItem>Dropdown Item 2</DropdownItem>
-          <DropdownItem>Dropdown Item 3</DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
-    </>
-  )
-}
-
-export const Controlled = DropdownControlledTemplate.bind({})
-
-const DropdownSelectableTemplate: Story<
-  PropsWithChildren<DropdownProps>
-> = () => {
-  const [value, setValue] = useState('Selectable')
-
-  return (
-    <>
-      <Dropdown>
-        <DropdownButton>
-          {value} <Caret />
-        </DropdownButton>
-        <DropdownMenu>
-          <DropdownItem onClick={() => setValue('Value 1')}>
-            Value 1
-          </DropdownItem>
-          <DropdownItem onClick={() => setValue('Value 2')}>
-            Value 2
-          </DropdownItem>
-          <DropdownItem onClick={() => setValue('Value 3')}>
-            Value 3
-          </DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
-    </>
-  )
-}
-
-export const Selectable = DropdownSelectableTemplate.bind({})
-
-export default {
-  title: 'Molecules/Dropdown',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

package/src/components/molecules/Dropdown/stories/assets/Caret.tsx

@@ -1,19 +0,0 @@
-import React from 'react'
-
-export const Caret = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="feather feather-chevron-down"
-    style={{ display: 'inline' }}
-  >
-    <polyline points="6 9 12 15 18 9" />
-  </svg>
-)

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

@@ -1,23 +0,0 @@
-import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
-
-import Form from '../Form'
-
-# Form
-
-<Canvas>
-  <Story id="molecules-form--form" />
-</Canvas>
-
-## Props
-
-The `Form` component supports all attributes also supported by the `<form>` HTML tag.
-
-Besides those attributes, the following prop is also supported:
-
-<ArgsTable of={Form} />
-
-## CSS Selectors
-
-```css
-[data-fs-form] {}
-```