@faststore/ui 2.0.2-alpha.0 → 2.0.4-alpha.0

package/src/atoms/Button/stories/Button.mdx

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

package/src/atoms/Button/stories/Button.stories.tsx

@@ -1,36 +0,0 @@
-import type { Story } from '@storybook/react'
-import React from 'react'
-
-import type { ComponentArgTypes } from '../../../typings/utils'
-import type { ButtonProps } from '../Button'
-import Component from '../Button'
-import mdx from './Button.mdx'
-
-const ButtonTemplate: Story<ButtonProps> = ({ children, onClick, testId }) => (
-  <Component onClick={onClick} testId={testId}>
-    {children}
-  </Component>
-)
-
-export const Button = ButtonTemplate.bind({})
-
-const argTypes: ComponentArgTypes<ButtonProps> = {
-  children: {
-    control: { type: 'text' },
-    defaultValue: 'Button',
-  },
-  onClick: {
-    action: 'Button clicked',
-    table: { disable: true },
-  },
-}
-
-export default {
-  title: 'Atoms/Button',
-  argTypes,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-}

package/src/atoms/Checkbox/Checkbox.test.tsx

@@ -1,65 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-
-import Checkbox from './Checkbox'
-
-describe('Checkbox', () => {
-  it('data-fs-checkbox is present', () => {
-    const { getByTestId } = render(<Checkbox testId="store-checkbox" />)
-
-    expect(getByTestId('store-checkbox')).toHaveAttribute('data-fs-checkbox')
-  })
-
-  it('type checkbox is present', () => {
-    const { getByTestId } = render(<Checkbox testId="store-checkbox" />)
-
-    expect(getByTestId('store-checkbox')).toHaveAttribute('type', 'checkbox')
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations using aria-label', async () => {
-      const { container } = render(
-        <Checkbox
-          aria-label="label checkbox for test"
-          testId="store-checkbox"
-        />
-      )
-
-      expect(await axe(container)).toHaveNoViolations()
-    })
-
-    it('should have no violations using aria-labelledby', async () => {
-      const { container } = render(
-        <>
-          <span id="label">My test label</span>
-          <Checkbox aria-labelledby="label" testId="store-checkbox" />
-        </>
-      )
-
-      expect(await axe(container)).toHaveNoViolations()
-    })
-
-    it('should have no violations using placeholder', async () => {
-      const { container } = render(
-        <Checkbox
-          placeholder="Accessibility placeholder"
-          testId="store-checkbox"
-        />
-      )
-
-      expect(await axe(container)).toHaveNoViolations()
-    })
-
-    it('should have no violations using id with explicit label', async () => {
-      const { container } = render(
-        <>
-          <label htmlFor="checkbox">My test label</label>
-          <Checkbox id="checkbox" testId="store-checkbox" />
-        </>
-      )
-
-      expect(await axe(container)).toHaveNoViolations()
-    })
-  })
-})

package/src/atoms/Checkbox/Checkbox.tsx

@@ -1,27 +0,0 @@
-import React, { forwardRef } from 'react'
-import type { InputHTMLAttributes } from 'react'
-
-export interface CheckboxProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-}
-
-const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
-  { testId = 'store-checkbox', ...otherProps }: CheckboxProps,
-  ref
-) {
-  return (
-    <input
-      ref={ref}
-      data-fs-checkbox
-      data-testid={testId}
-      type="checkbox"
-      {...otherProps}
-    />
-  )
-})
-
-export default Checkbox

package/src/atoms/Checkbox/index.ts

@@ -1,2 +0,0 @@
-export { default } from './Checkbox'
-export type { CheckboxProps } from './Checkbox'

package/src/atoms/Checkbox/stories/Checkbox.mdx

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

package/src/atoms/Checkbox/stories/Checkbox.stories.tsx

@@ -1,65 +0,0 @@
-import type { Story, Meta } from '@storybook/react'
-import React, { useEffect, useState } from 'react'
-
-import type { ComponentArgTypes } from '../../../typings/utils'
-import type { CheckboxProps } from '../Checkbox'
-import Component from '../Checkbox'
-import mdx from './Checkbox.mdx'
-
-const CheckboxTemplate: Story<CheckboxProps> = ({
-  checked,
-  onClick,
-  ...otherProps
-}) => {
-  const [localChecked, setLocalChecked] = useState(checked)
-
-  useEffect(() => {
-    setLocalChecked(checked)
-  }, [checked])
-
-  return (
-    <>
-      <Component
-        {...otherProps}
-        checked={localChecked}
-        onClick={(e) => {
-          onClick?.(e)
-          setLocalChecked(!localChecked)
-        }}
-        id="checkbox"
-      />
-
-      <label htmlFor="checkbox">Checkbox</label>
-    </>
-  )
-}
-
-export const Checkbox = CheckboxTemplate.bind({})
-Checkbox.args = {
-  checked: true,
-}
-
-const controls: ComponentArgTypes<CheckboxProps> = {
-  checked: {
-    control: {
-      type: 'boolean',
-    },
-  },
-}
-
-const actions: ComponentArgTypes<CheckboxProps> = {
-  onClick: { action: 'clicked', table: { disable: true } },
-}
-
-export default {
-  title: 'Atoms/Checkbox',
-  argTypes: {
-    ...controls,
-    ...actions,
-  },
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

package/src/atoms/Icon/Icon.test.tsx

@@ -1,43 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import Icon from './Icon'
-
-const ShoppingCart = () => (
-  <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="9" cy="21" r="1" />
-    <circle cx="20" cy="21" r="1" />
-    <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
-  </svg>
-)
-
-describe('Icon', () => {
-  it('`data-fs-icon` is present', () => {
-    const { getByTestId } = render(
-      <Icon data-testid="store-icon" component={<ShoppingCart />} />
-    )
-
-    expect(getByTestId('store-icon')).toHaveAttribute('data-fs-icon')
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations', async () => {
-      const { container } = render(
-        <Icon data-testid="store-icon" component={<ShoppingCart />} />
-      )
-
-      expect(await axe(container)).toHaveNoViolations()
-    })
-  })
-})

package/src/atoms/Icon/Icon.tsx

@@ -1,26 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react'
-import React, { forwardRef } from 'react'
-
-export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
-  /**
-   * A React component that will be rendered as an icon.
-   */
-  component: ReactNode
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-}
-
-const Icon = forwardRef<HTMLSpanElement, IconProps>(function Button(
-  { component, testId = 'store-icon', ...otherProps }: IconProps,
-  ref
-) {
-  return (
-    <span ref={ref} data-fs-icon data-testid={testId} {...otherProps}>
-      {component}
-    </span>
-  )
-})
-
-export default Icon

package/src/atoms/Icon/index.ts

@@ -1,2 +0,0 @@
-export { default } from './Icon'
-export type { IconProps } from './Icon'

package/src/atoms/Icon/stories/Icon.mdx

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

package/src/atoms/Icon/stories/Icon.stories.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import type { Story } from '@storybook/react'
-
-import Component from '../Icon'
-import type { IconProps } from '../Icon'
-import mdx from './Icon.mdx'
-import ShoppingCart from './assets/ShoppingCart'
-import type { ComponentArgTypes } from '../../../typings/utils'
-
-const IconTemplate: Story<IconProps> = ({ style }) => (
-  <Component style={style} component={<ShoppingCart />} />
-)
-
-export const Icon = IconTemplate.bind({})
-Icon.args = {
-  style: {
-    fontSize: '32px',
-    color: 'red',
-  },
-}
-
-const argTypes: ComponentArgTypes<Omit<IconProps, 'component'>> = {
-  style: {
-    control: { type: 'object' },
-  },
-  onClick: {
-    action: 'Icon clicked',
-    table: { disable: true },
-  },
-}
-
-export default {
-  title: 'Atoms/Icon',
-  argTypes,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-}

package/src/atoms/Icon/stories/assets/ShoppingCart.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import type { FC } from 'react'
-
-// icon by feathericons
-const ShoppingCart: 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="9" cy="21" r="1" />
-    <circle cx="20" cy="21" r="1" />
-    <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
-  </svg>
-)
-
-export default ShoppingCart

package/src/atoms/Incentive/Incentive.test.tsx

@@ -1,36 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import Incentive from './Incentive'
-
-const TestIncentive = () => {
-  return (
-    <Incentive>
-      <span>Item title</span>
-      <span>Item description</span>
-    </Incentive>
-  )
-}
-
-describe('Incentive', () => {
-  let incentive: HTMLElement
-
-  beforeEach(() => {
-    const { getByTestId } = render(<TestIncentive />)
-
-    incentive = getByTestId('store-incentive')
-  })
-
-  describe('Data attributes', () => {
-    it('should have `data-fs-incentive` attribute', () => {
-      expect(incentive).toHaveAttribute('data-fs-incentive')
-    })
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations', async () => {
-      expect(await axe(incentive)).toHaveNoViolations()
-    })
-  })
-})

package/src/atoms/Input/Input.test.tsx

@@ -1,73 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import Input from '.'
-
-describe('Input', () => {
-  it('`data-fs-input` is present', () => {
-    const { getByPlaceholderText } = render(
-      <Input placeholder="Hello World!" />
-    )
-
-    expect(getByPlaceholderText('Hello World!')).toHaveAttribute(
-      'data-fs-input'
-    )
-  })
-
-  it('`data-error` is present', () => {
-    const { getByPlaceholderText } = render(
-      <Input placeholder="Hello World!" variant="error" />
-    )
-
-    expect(getByPlaceholderText('Hello World!')).toHaveAttribute('data-error')
-  })
-
-  it('`data-success` is present', () => {
-    const { getByPlaceholderText } = render(
-      <Input placeholder="Hello World!" variant="success" />
-    )
-
-    expect(getByPlaceholderText('Hello World!')).toHaveAttribute('data-success')
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations using aria-label', async () => {
-      const { container } = render(
-        <Input aria-label="label input for test" testId="store-input" />
-      )
-
-      expect(await axe(container)).toHaveNoViolations()
-    })
-
-    it('should have no violations using aria-labelledby', async () => {
-      const { container } = render(
-        <>
-          <span id="label">My test label</span>
-          <Input aria-labelledby="label" testId="store-input" />
-        </>
-      )
-
-      expect(await axe(container)).toHaveNoViolations()
-    })
-
-    it('should have no violations using placeholder', async () => {
-      const { container } = render(
-        <Input placeholder="Accessibility placeholder" testId="store-input" />
-      )
-
-      expect(await axe(container)).toHaveNoViolations()
-    })
-
-    it('should have no violations using id with explicit label', async () => {
-      const { container } = render(
-        <>
-          <label htmlFor="input">My test label</label>
-          <Input id="input" testId="store-input" />
-        </>
-      )
-
-      expect(await axe(container)).toHaveNoViolations()
-    })
-  })
-})

package/src/atoms/Label/Label.test.tsx

@@ -1,71 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import Label from '.'
-
-describe('Label', () => {
-  it('`data-fs-label` is present', () => {
-    const { getByTestId } = render(<Label />)
-
-    expect(getByTestId('store-label')).toHaveAttribute('data-fs-label')
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations', async () => {
-      const { container } = render(<Label>Label</Label>)
-
-      expect(await axe(container)).toHaveNoViolations()
-    })
-
-    it('should have no violations when using `for` attribute', async () => {
-      const { container: inputContainer } = render(
-        <>
-          <Label htmlFor="input_newsletter">Subscribe to our newsletter</Label>
-          <input id="input_newsletter" />
-        </>
-      )
-
-      expect(await axe(inputContainer)).toHaveNoViolations()
-
-      const { container: selectContainer } = render(
-        <>
-          <Label htmlFor="interest">Select your main interest</Label>
-          <select id="interest">
-            <option value="clothing">Clothing</option>
-            <option value="electronics">Electronics</option>
-            <option value="sale">Sale</option>
-          </select>
-        </>
-      )
-
-      expect(await axe(selectContainer)).toHaveNoViolations()
-    })
-
-    it('should have no violations when wrapping a control element and the labeling text', async () => {
-      // Using input element
-      const { container: inputContainer } = render(
-        <Label>
-          Subscribe to our newsletter
-          <input />
-        </Label>
-      )
-
-      expect(await axe(inputContainer)).toHaveNoViolations()
-
-      // Using select element
-      const { container: selectContainer } = render(
-        <Label>
-          Select your main interest
-          <select id="interest">
-            <option value="clothing">Clothing</option>
-            <option value="electronics">Electronics</option>
-            <option value="sale">Sale</option>
-          </select>
-        </Label>
-      )
-
-      expect(await axe(selectContainer)).toHaveNoViolations()
-    })
-  })
-})

package/src/atoms/Label/Label.tsx

@@ -1,22 +0,0 @@
-import type { LabelHTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
-
-export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-}
-
-const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
-  { testId = 'store-label', children, ...otherProps },
-  ref
-) {
-  return (
-    <label ref={ref} data-fs-label data-testid={testId} {...otherProps}>
-      {children}
-    </label>
-  )
-})
-
-export default Label

package/src/atoms/Label/index.ts

@@ -1,2 +0,0 @@
-export { default } from './Label'
-export type { LabelProps } from './Label'

package/src/atoms/Label/stories/Label.mdx

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

package/src/atoms/Label/stories/Label.stories.tsx

@@ -1,30 +0,0 @@
-import type { Story } from '@storybook/react'
-import React from 'react'
-
-import type { ComponentArgTypes } from '../../../typings/utils'
-import type { LabelProps } from '../Label'
-import Component from '../Label'
-import mdx from './Label.mdx'
-
-const LabelTemplate: Story<LabelProps> = ({ children }) => (
-  <Component>{children}</Component>
-)
-
-export const Label = LabelTemplate.bind({})
-
-const argTypes: ComponentArgTypes<LabelProps> = {
-  children: {
-    control: { type: 'text' },
-    defaultValue: 'Label',
-  },
-}
-
-export default {
-  title: 'Atoms/Label',
-  argTypes,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-}