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

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

@@ -1,65 +0,0 @@
-import type { Story } from '@storybook/react'
-import React, { useState } from 'react'
-
-import { Button, Input } from '../../../../'
-import type { FormProps } from '../Form'
-import Component from '../Form'
-import mdx from './Form.mdx'
-import { Checkbox, Label } from '@faststore/components'
-
-const FormTemplate: Story<FormProps> = ({ testId }) => {
-  const [name, setName] = useState<string>()
-  const [email, setEmail] = useState<string>()
-
-  return (
-    <Component
-      testId={testId}
-      onSubmit={(e) => {
-        e.preventDefault()
-        alert(`Thank you for subscribing ${name}! Email: ${email}`)
-      }}
-    >
-      <h1>Sign up & save 15% off your first order</h1>
-      <h2>
-        Be the first to hear about special offers, new product launches, gift
-        ideas and more.
-      </h2>
-      <div>
-        <Label htmlFor="name">Name:</Label>
-        <Input
-          id="name"
-          placeholder="Enter your name"
-          required
-          onChange={(e) => setName(e.currentTarget.value)}
-        />
-      </div>
-      <div>
-        <Label htmlFor="email">Email:</Label>
-        <Input
-          id="email"
-          placeholder="Enter your email"
-          required
-          onChange={(e) => setEmail(e.currentTarget.value)}
-        />
-      </div>
-      <div>
-        <Label>
-          <Checkbox required />I agree to receive emails from Brand. View our{' '}
-          <a href="/">Privacy Policy</a>.
-        </Label>
-      </div>
-      <Button type="submit">Subscribe</Button>
-    </Component>
-  )
-}
-
-export const Form = FormTemplate.bind({})
-
-export default {
-  title: 'Molecules/Form',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-}

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

@@ -1,40 +0,0 @@
-import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
-
-import Gift from '../Gift'
-
-# Gift
-
-<Canvas>
-  <Story id="molecules-gift--gift" />
-</Canvas>
-
-## Components
-
-The `Gift` uses the [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) pattern, its components are:
-
-- `Gift`: the wrapper component, it can receive a `Icon` prop.
-- `GiftImage`: the component's that display the product image.
-- `GiftContent`: the component that can display the product's title, price, and a badge.
-
-## Props
-
-<ArgsTable of={Gift} />
-
-## CSS Selectors
-
-```css
-[data-fs-gift] {
-}
-
-[data-fs-gift-wrapper] {
-}
-
-[data-fs-gift-icon] {
-}
-
-[data-fs-gift-content] {
-}
-
-[data-fs-gift-image] {
-}
-```

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

@@ -1,66 +0,0 @@
-import type { Story, Meta } from '@storybook/react'
-import React, { useMemo } from 'react'
-
-import { Badge, Price } from '@faststore/components'
-// Gift components
-import GiftComponent from '../Gift'
-import GiftContent from '../GiftContent'
-import GiftImage from '../GiftImage'
-import type { GiftProps } from '../Gift'
-import mdx from './Gift.mdx'
-
-const Tag = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
-    <path fill="none" d="M0 0h256v256H0z" />
-    <path
-      d="M122.7 25.9 42 42l-16.1 80.7a8 8 0 0 0 2.2 7.2l104.4 104.4a7.9 7.9 0 0 0 11.3 0l90.5-90.5a7.9 7.9 0 0 0 0-11.3L129.9 28.1a8 8 0 0 0-7.2-2.2Z"
-      fill="none"
-      stroke="#000"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="16"
-    />
-    <circle cx="84" cy="84" r="12" />
-  </svg>
-)
-
-function useIntlFormatter(price: number) {
-  return useMemo(() => {
-    const formattedPrice = new Intl.NumberFormat('en-GB', {
-      style: 'currency',
-      currency: 'USD',
-    }).format(price)
-
-    return formattedPrice
-  }, [price])
-}
-
-const GiftTemplate: Story<GiftProps> = ({ testId }) => (
-  <GiftComponent testId={testId} icon={<Tag />}>
-    <GiftImage>
-      <img
-        alt="Aedle VK-1 L Headphone"
-        src="https://assets.vtex.app/unsafe/1608x1206/center/middle/https%3A%2F%2Fstoreframework.vtexassets.com%2Farquivos%2Fids%2F190901%2Funsplash-headphone.jpg%3Fv%3D637800115948430000"
-      />
-    </GiftImage>
-    <GiftContent>
-      <h3>Get a pair of Aedle VK-1 L Headphone</h3>
-      <div>
-        <Price value={145} formatter={useIntlFormatter} />
-        <Badge>Free</Badge>
-      </div>
-    </GiftContent>
-  </GiftComponent>
-)
-
-export const Gift = GiftTemplate.bind({})
-Gift.storyName = 'Gift'
-
-export default {
-  title: 'Molecules/Gift',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

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

@@ -1,46 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import { IconButton, ShoppingCart } from '@faststore/components'
-
-<Meta
-  title="Molecules/IconButton"
-  component={IconButton}
-  argTypes={{
-    variant: {
-      options: ['primary', 'secondary', 'tertiary'],
-      control: { type: 'select' },
-      description: 'Specifies the component color variant.',
-    },
-  }}
-/>
-
-export const Template = ({ args }) => (
-  <IconButton icon={<ShoppingCart />} aria-label="Buy" />
-)
-
-<header>
-
-# IconButton
-
-</header>
-
-## Usage
-
-```jsx
-import { IconButton } from '@faststore/ui'
-// Styles
-import '@faststore/ui/src/components/atoms/Button/styles.scss'
-```
-
-<Canvas>
-  <Story
-    name="default"
-    args={{ id: 'icon-button-default', variant: 'secondary' }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="default" />
-
-This component inherits [Button](?path=/docs/atoms-button--button#css-selectors) css selectors & styles.

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

@@ -1,116 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import { InputField } from '@faststore/components'
-
-<Meta
-  title="Molecules/InputField"
-  component={InputField}
-  argTypes={{
-    actionable: {
-      type: { name: 'boolean' },
-    },
-    disabled: {
-      type: { name: 'boolean' },
-    },
-    id: {
-      type: { name: 'string', required: true },
-    },
-    inputRef: {
-      control: { disable: true },
-    },
-  }}
-/>
-
-export const Template = (args) => {
-  return <InputField {...args} />
-}
-
-<header>
-
-# Input Field
-
-Input Field are text fields used to get user inputs.
-
-</header>
-
-## Overview
-
-The `InputField` component uses [FastStore UI Input](https://www.faststore.dev/reference/ui/atoms/Input) as base.
-
-<Canvas>
-  <Story
-    name="overview-default"
-    args={{
-      id: 'overview-default',
-      label: 'Label',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-error"
-    args={{
-      id: 'overview-error',
-      label: 'Input w/ Error Message',
-      error: 'Error Message',
-      disabled: false,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-actionable"
-    args={{
-      id: 'overview-actionable',
-      label: 'Input w/ Action',
-      actionable: true,
-      disabled: false,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-actionable-error"
-    args={{
-      id: 'overview-actionable-error',
-      label: 'Input w/ Action and Error',
-      actionable: true,
-      error: 'Error Message',
-      disabled: false,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-disabled"
-    args={{
-      id: 'overview-disabled',
-      label: 'Input Disabled',
-      actionable: false,
-      disabled: true,
-      value: 'Input Text',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
----
-
-## Usage
-
-`import InputField from '../components/ui/InputField'`
-
-<Canvas>
-  <Story
-    name="input-default"
-    args={{
-      id: 'input-default',
-      label: 'Label',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="input-default" />

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

@@ -1,20 +0,0 @@
-import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import LoadingButton from '../LoadingButton'
-
-# Loading Button
-
-<Canvas>
-  <Story id="molecules-loadingbutton--loadingbutton" />
-</Canvas>
-
-## Props
-
-<ArgsTable of={LoadingButton} />
-
-## CSS Selectors
-
-```css
-[data-fs-loading-button] {}
-```
-
-This component inherits [Button](?path=/docs/atoms-button--button#css-selectors) css selectors.

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

@@ -1,36 +0,0 @@
-import type { Story } from '@storybook/react'
-import React from 'react'
-
-import type { ComponentArgTypes } from '../../../../typings/utils'
-import type { LoadingButtonProps } from '../LoadingButton'
-import Component from '../LoadingButton'
-import mdx from './LoadingButton.mdx'
-
-const LoadingButtonTemplate: Story<LoadingButtonProps> = ({
-  loading,
-  testId,
-}) => (
-  <Component loading={loading} testId={testId}>
-    Loading Button
-  </Component>
-)
-
-export const LoadingButton = LoadingButtonTemplate.bind({})
-LoadingButton.storyName = 'LoadingButton'
-
-const argTypes: ComponentArgTypes<LoadingButtonProps> = {
-  loading: {
-    type: 'boolean',
-    defaultValue: false,
-  },
-}
-
-export default {
-  title: 'Molecules/LoadingButton',
-  argTypes,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-}

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

@@ -1,18 +0,0 @@
-import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import Modal from '../Modal'
-
-# Modal
-
-<Canvas>
-  <Story id="molecules-modal--modal" />
-</Canvas>
-
-## Props
-
-<ArgsTable of={Modal} />
-
-## CSS Selectors
-
-```css
-[data-fs-modal-content] {}
-```

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

@@ -1,45 +0,0 @@
-import React, { useState } from 'react'
-import type { PropsWithChildren } from 'react'
-import type { Meta, Story } from '@storybook/react'
-
-import type { ModalProps } from '..'
-import { Button } from '@faststore/components'
-import Component from '../Modal'
-import mdx from './Modal.mdx'
-
-const ModalTemplate: Story<PropsWithChildren<ModalProps>> = ({
-  children,
-  ...otherProps
-}) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const handleClose = () => setIsOpen(false)
-
-  return (
-    <>
-      <Button onClick={() => setIsOpen(!isOpen)}>Open Modal</Button>
-      <Component
-        {...otherProps}
-        isOpen={isOpen}
-        aria-label="Storybook Modal"
-        onDismiss={handleClose}
-      >
-        My Modal Content
-        <br />
-        <div data-action-container>
-          <Button onClick={handleClose}>close</Button>
-        </div>
-      </Component>
-    </>
-  )
-}
-
-export const Modal = ModalTemplate.bind({})
-
-export default {
-  title: 'Molecules/Modal',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

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

@@ -1,29 +0,0 @@
-import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
-
-import OrderSummary from '../OrderSummary'
-
-# OrderSummary
-
-<Canvas>
-  <Story id="molecules-ordersummary--order-summary" />
-</Canvas>
-
-## Props
-
-<ArgsTable of={ OrderSummary } />
-
-## CSS Selectors
-
-```css
-[data-fs-order-summary] {}
-[data-fs-order-summary-subtotal] {}
-[data-fs-order-summary-subtotal-label] {}
-[data-fs-order-summary-subtotal-value] {}
-[data-fs-order-summary-discount] {}
-[data-fs-order-summary-discount-label] {}
-[data-fs-order-summary-discount-value] {}
-[data-fs-order-summary-total] {}
-[data-fs-order-summary-total-label] {}
-[data-fs-order-summary-total-value] {}
-
-```

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

@@ -1,29 +0,0 @@
-import type { Story, Meta } from '@storybook/react'
-import React from 'react'
-
-import type { OrderSummaryProps } from '../OrderSummary'
-import Component from '../OrderSummary'
-import mdx from './OrderSummary.mdx'
-
-const OrderSummaryTemplate: Story<OrderSummaryProps> = () => (
-  <Component 
-    subtotalLabel='Subtotal (3 products)'
-    subtotalValue='$300'
-    discountLabel='Discount'
-    discountValue='-$50'
-    totalLabel='Total'
-    totalValue='250$'
-  />
-)
-
-export const OrderSummary = OrderSummaryTemplate.bind({})
-OrderSummary.storyName = 'OrderSummary'
-
-export default {
-  title: 'Molecules/OrderSummary',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

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

@@ -1,19 +0,0 @@
-import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import PaymentMethods from '../PaymentMethods'
-
-# PaymentMethods
-
-<Canvas>
-  <Story id="molecules-paymentmethods--payment-methods" />
-</Canvas>
-
-## Props
-
-<ArgsTable of={PaymentMethods} />
-
-## CSS Selectors
-
-```css
-[data-fs-payment-methods] {}
-[data-payment-methods-flags] {}
-```

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

@@ -1,41 +0,0 @@
-import type { Story, Meta } from '@storybook/react'
-import React from 'react'
-
-import type { PaymentMethodsProps } from '../PaymentMethods'
-import Component from '../PaymentMethods'
-import mdx from './PaymentMethods.mdx'
-import {
-  VisaCard,
-  MasterCard,
-  MaestroCard,
-  AmericanExpressCard,
-  HiperCard,
-  EloCard,
-  DinersClub,
-  PayPal,
-} from './assets/Icons'
-
-const PaymentMethodsTemplate: Story<PaymentMethodsProps> = ({ testId }) => (
-  <Component testId={testId} title="Payment Methods">
-    <VisaCard key="visa" />
-    <MasterCard key="mastercard" />
-    <MaestroCard key="maestro" />
-    <AmericanExpressCard key="american express" />
-    <HiperCard key="hipercard" />
-    <EloCard key="elo" />
-    <DinersClub key="diners club" />
-    <PayPal key="paypal" />
-  </Component>
-)
-
-export const PaymentMethods = PaymentMethodsTemplate.bind({})
-PaymentMethods.storyName = 'PaymentMethods'
-
-export default {
-  title: 'Molecules/PaymentMethods',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

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

@@ -1,89 +0,0 @@
-import React from 'react'
-
-export function VisaCard() {
-  return (
-    <img
-      alt="Visa logo"
-      width={50}
-      height={50}
-      src="https://seeklogo.com/images/V/visa-logo-BDDD51C62D-seeklogo.com.png"
-    />
-  )
-}
-
-export function MasterCard() {
-  return (
-    <img
-      alt="Mastercard logo"
-      width={50}
-      height={50}
-      src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Mastercard-logo.svg/1544px-Mastercard-logo.svg.png"
-    />
-  )
-}
-
-export function AmericanExpressCard() {
-  return (
-    <img
-      alt="American express logo"
-      width={50}
-      height={50}
-      src="https://seeklogo.com/images/A/american-express-logo-EDF87C04A0-seeklogo.com.png"
-    />
-  )
-}
-
-export function MaestroCard() {
-  return (
-    <img
-      alt="American express logo"
-      width={50}
-      height={50}
-      src="https://seeklogo.com/images/M/Maestro-logo-BF4E5E7686-seeklogo.com.png"
-    />
-  )
-}
-
-export function EloCard() {
-  return (
-    <img
-      alt="Elo logo"
-      width={50}
-      height={50}
-      src="https://seeklogo.com/images/E/elo-logo-9F0CF48D54-seeklogo.com.png"
-    />
-  )
-}
-
-export function HiperCard() {
-  return (
-    <img
-      alt="Hipercard logo"
-      width={50}
-      height={50}
-      src="https://seeklogo.com/images/H/Hipercard-logo-139D91D263-seeklogo.com.png"
-    />
-  )
-}
-
-export function PayPal() {
-  return (
-    <img
-      alt="PayPal brand"
-      width={50}
-      height={50}
-      src="https://seeklogo.com/images/P/paypal-logo-484B6FE744-seeklogo.com.png"
-    />
-  )
-}
-
-export function DinersClub() {
-  return (
-    <img
-      alt="Diners club logo"
-      width={50}
-      height={50}
-      src="https://seeklogo.com/images/D/Diners_Club_International-logo-EF50D35BE8-seeklogo.com.png"
-    />
-  )
-}

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

@@ -1,28 +0,0 @@
-import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-
-import PriceRange from '../PriceRange'
-
-# PriceRange
-
-<Canvas>
-  <Story id="molecules-pricerange--price-range" />
-</Canvas>
-
-# Props
-
-<ArgsTable of={PriceRange} />
-
-# CSS Selectors
-
-```css
-[data-fs-price-range] {
-}
-[data-price-range-values] {
-}
-[data-price-range-value='(min|max)'] {
-}
-```
-
-# TODO
-
-- [ ] More test cases