@faststore/ui 2.0.3-alpha.0 → 2.0.5-alpha.0

package/src/atoms/List/List.test.tsx

@@ -1,195 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React, { Fragment } from 'react'
-
-import List from './List'
-
-const optionsArray = ['Great', 'Ok', 'Bad']
-
-describe('List', () => {
-  it('should have `data-fs-list` attribute', () => {
-    const { getByTestId } = render(
-      <List>
-        {optionsArray.map((value) => {
-          return <li key={value}>{value}</li>
-        })}
-      </List>
-    )
-
-    expect(getByTestId('store-list')).toHaveAttribute('data-fs-list')
-  })
-
-  it('should be empty if no children are provided', () => {
-    const { getByTestId } = render(<List />)
-
-    expect(getByTestId('store-list')).toBeEmptyDOMElement()
-  })
-
-  it('should have expected data attributes for each variation', () => {
-    const { getByTestId, rerender } = render(
-      <List variant="ordered">
-        {optionsArray.map((value) => {
-          return <li key={value}>{value}</li>
-        })}
-      </List>
-    )
-
-    expect(getByTestId('store-list')).toHaveAttribute(
-      'data-fs-list',
-      'ordered'
-    )
-
-    rerender(
-      <List variant="unordered">
-        {optionsArray.map((value) => {
-          return <li key={value}>{value}</li>
-        })}
-      </List>
-    )
-
-    expect(getByTestId('store-list')).toHaveAttribute(
-      'data-fs-list',
-      'unordered'
-    )
-
-    rerender(
-      <List variant="description">
-        {optionsArray.map((value) => {
-          return <li key={value}>{value}</li>
-        })}
-      </List>
-    )
-
-    expect(getByTestId('store-list')).toHaveAttribute(
-      'data-fs-list',
-      'description'
-    )
-  })
-
-  it('should render the expected HTML tag for each variant', () => {
-    const { getByTestId, rerender } = render(
-      <List variant="unordered">
-        {optionsArray.map((value) => {
-          return <li key={value}>{value}</li>
-        })}
-      </List>
-    )
-
-    expect(getByTestId('store-list')).toBeInstanceOf(HTMLUListElement)
-
-    rerender(
-      <List variant="ordered">
-        {optionsArray.map((value) => {
-          return <li key={value}>{value}</li>
-        })}
-      </List>
-    )
-
-    expect(getByTestId('store-list')).toBeInstanceOf(HTMLOListElement)
-
-    rerender(
-      <List variant="description">
-        {optionsArray.map((value, index) => {
-          return (
-            <Fragment key={index}>
-              <dt key={`${index}--term`}>{value}</dt>
-              <dd key={`${index}--details`}>option</dd>
-            </Fragment>
-          )
-        })}
-      </List>
-    )
-
-    expect(getByTestId('store-list')).toBeInstanceOf(HTMLDListElement)
-  })
-
-  it('should respect the HTML tag passed as "as" prop', () => {
-    const { getByTestId, rerender } = render(
-      <List variant="unordered" as="div">
-        {optionsArray.map((value) => {
-          return <li key={value}>{value}</li>
-        })}
-      </List>
-    )
-
-    expect(getByTestId('store-list')).toBeInstanceOf(HTMLDivElement)
-
-    rerender(
-      <List variant="ordered" as="div">
-        {optionsArray.map((value) => {
-          return <li key={value}>{value}</li>
-        })}
-      </List>
-    )
-
-    expect(getByTestId('store-list')).toBeInstanceOf(HTMLDivElement)
-
-    rerender(
-      <List variant="description" as="div">
-        {optionsArray.map((value, index) => {
-          return (
-            <Fragment key={index}>
-              <dt key={`${index}--term`}>{value}</dt>
-              <dd key={`${index}--details`}>option</dd>
-            </Fragment>
-          )
-        })}
-      </List>
-    )
-
-    expect(getByTestId('store-list')).toBeInstanceOf(HTMLDivElement)
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations when rendering the default variant', async () => {
-      const { getByTestId } = render(
-        <List>
-          {optionsArray.map((option, index) => (
-            <li key={index}>{option}</li>
-          ))}
-        </List>
-      )
-
-      expect(await axe(getByTestId('store-list'))).toHaveNoViolations()
-    })
-
-    it('should have no violations when rendering the unordered variant', async () => {
-      const { getByTestId } = render(
-        <List variant="unordered">
-          {optionsArray.map((option, index) => (
-            <li key={index}>{option}</li>
-          ))}
-        </List>
-      )
-
-      expect(await axe(getByTestId('store-list'))).toHaveNoViolations()
-    })
-
-    it('should have no violations when rendering the ordered variant', async () => {
-      const { getByTestId } = render(
-        <List variant="ordered">
-          {optionsArray.map((option, index) => (
-            <li key={index}>{option}</li>
-          ))}
-        </List>
-      )
-
-      expect(await axe(getByTestId('store-list'))).toHaveNoViolations()
-    })
-
-    it('should have no violations when rendering the description variant', async () => {
-      const { getByTestId } = render(
-        <List variant="description">
-          {optionsArray.map((option, index) => (
-            <Fragment key={index}>
-              <dt key={`${index}--term`}>{option}</dt>
-              <dd key={`${index}--details`}>option</dd>
-            </Fragment>
-          ))}
-        </List>
-      )
-
-      expect(await axe(getByTestId('store-list'))).toHaveNoViolations()
-    })
-  })
-})

package/src/atoms/Overlay/Overlay.test.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-
-import Overlay from './Overlay'
-
-describe('Overlay', () => {
-  const testId = 'store-overlay'
-
-  it('data-fs-overlay is present', () => {
-    const { getByTestId } = render(<Overlay testId={testId} />)
-
-    expect(getByTestId(testId)).toHaveAttribute('data-fs-overlay')
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations', async () => {
-      const { getByTestId } = render(<Overlay testId={testId} />)
-
-      expect(await axe(getByTestId(testId))).toHaveNoViolations()
-    })
-  })
-})

package/src/atoms/Overlay/Overlay.tsx

@@ -1,26 +0,0 @@
-import type { HTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
-
-export interface Props extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-}
-
-const Overlay = forwardRef<HTMLDivElement, Props>(function Overlay(
-  { testId = 'store-overlay', ...otherProps },
-  ref
-) {
-  return (
-    <div
-      role="presentation"
-      data-fs-overlay
-      data-testid={testId}
-      ref={ref}
-      {...otherProps}
-    />
-  )
-})
-
-export default Overlay

package/src/atoms/Overlay/index.ts

@@ -1,2 +0,0 @@
-export { default } from './Overlay'
-export type { Props as OverlayProps } from './Overlay'

package/src/atoms/Overlay/stories/Overlay.mdx

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

package/src/atoms/Overlay/stories/Overlay.stories.tsx

@@ -1,48 +0,0 @@
-import type { Story, Meta } from '@storybook/react'
-import React from 'react'
-
-import type { ComponentArgTypes } from '../../../typings/utils'
-import type { Props as OverlayProps } from '../Overlay'
-import Component from '../Overlay'
-import mdx from './Overlay.mdx'
-
-type ColorType = 'black' | 'green'
-type OverlayStoryProps = OverlayProps & { color: ColorType }
-
-const OverlayTemplate: Story<OverlayStoryProps> = ({
-  color = 'black',
-  ...otherProps
-}) => {
-  const dataColor =
-    color === 'black' ? { 'data-black': true } : { 'data-green': true }
-
-  return (
-    <div data-story-overlay-out-container>
-      A content outside me
-      <Component {...otherProps} {...dataColor} />
-    </div>
-  )
-}
-
-export const Overlay = OverlayTemplate.bind({})
-
-const controls: ComponentArgTypes<OverlayStoryProps> = {
-  color: {
-    options: ['green', 'black'],
-    control: {
-      type: 'select',
-    },
-  },
-}
-
-export default {
-  title: 'Atoms/Overlay',
-  argTypes: {
-    ...controls,
-  },
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

package/src/atoms/Popover/Popover.test.tsx

@@ -1,39 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React, { useRef } from 'react'
-import { act } from 'react-dom/test-utils'
-
-import Popover from './Popover'
-
-const PopoverTemplate = (props: any) => {
-  const ref = useRef<any>(null)
-
-  return (
-    <>
-      <div ref={ref} />
-      <Popover {...props} targetRef={ref}>
-        <div>
-          <p>Whoa! Look at me!</p>
-        </div>
-      </Popover>
-    </>
-  )
-}
-
-describe('Popover', () => {
-  it('`data-fs-popover` is present', () => {
-    const { getByTestId } = render(<PopoverTemplate />)
-
-    expect(getByTestId('store-popover')).toHaveAttribute('data-fs-popover')
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations', async () => {
-      const { getByTestId } = render(<PopoverTemplate />)
-
-      await act(async () => {
-        expect(await axe(getByTestId('store-popover'))).toHaveNoViolations()
-      })
-    })
-  })
-})

package/src/atoms/Price/Price.test.tsx

@@ -1,63 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import Price from './Price'
-
-describe('Price', () => {
-  it('`data-fs-price` is present', () => {
-    const { getByTestId } = render(<Price value={32.5} />)
-
-    expect(getByTestId('store-price')).toHaveAttribute('data-fs-price')
-  })
-
-  it('`data-variant` is equal to `selling` if no variant is defined', () => {
-    const { getByTestId } = render(<Price value={32.5} />)
-
-    expect(getByTestId('store-price')).toHaveAttribute(
-      'data-variant',
-      'selling'
-    )
-  })
-
-  it('`data-variant` is equal to `listing` if variant is listing', () => {
-    const { getByTestId } = render(<Price value={32.5} variant="listing" />)
-
-    expect(getByTestId('store-price')).toHaveAttribute(
-      'data-variant',
-      'listing'
-    )
-  })
-
-  it('returns unaltered value if no formatter is provided', () => {
-    const { getByTestId } = render(<Price value={32.5} />)
-
-    expect(getByTestId('store-price')).toHaveTextContent('32.5')
-  })
-
-  it('returns empty content if formatter returns null', () => {
-    const { getByTestId } = render(
-      <Price value={32.5} formatter={() => null} />
-    )
-
-    expect(getByTestId('store-price')).toBeEmptyDOMElement()
-  })
-
-  it('returns formatter result as content', () => {
-    const formatterResult = 'Formatter result'
-
-    const { getByTestId } = render(
-      <Price value={32.5} formatter={() => formatterResult} />
-    )
-
-    expect(getByTestId('store-price')).toHaveTextContent(formatterResult)
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations', async () => {
-      const { getByTestId } = render(<Price value={32.2} />)
-
-      expect(await axe(getByTestId('store-price'))).toHaveNoViolations()
-    })
-  })
-})

package/src/atoms/Radio/Radio.test.tsx

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

package/src/atoms/Radio/Radio.tsx

@@ -1,24 +0,0 @@
-import React, { forwardRef } from 'react'
-import type { InputHTMLAttributes } from 'react'
-
-export interface RadioProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
-  testId?: string
-}
-
-const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
-  { testId = 'store-radio', ...otherProps }: RadioProps,
-  ref
-) {
-  return (
-    <input
-      ref={ref}
-      data-fs-radio
-      data-testid={testId}
-      type="radio"
-      {...otherProps}
-    />
-  )
-})
-
-export default Radio

package/src/atoms/Radio/index.ts

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

package/src/atoms/Radio/stories/Radio.mdx

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

package/src/atoms/Radio/stories/Radio.stories.tsx

@@ -1,41 +0,0 @@
-import type { Story, Meta } from '@storybook/react'
-import React from 'react'
-
-import type { ComponentArgTypes } from '../../../typings/utils'
-import type { RadioProps } from '../Radio'
-import Component from '../Radio'
-import mdx from './Radio.mdx'
-
-const RadioTemplate: Story<RadioProps> = (props) => (
-  <>
-    <Component {...props} id="radio" />
-    <label htmlFor="radio">Radio</label>
-  </>
-)
-
-export const Radio = RadioTemplate.bind({})
-
-const controls: ComponentArgTypes<RadioProps> = {
-  checked: {
-    control: {
-      type: 'boolean',
-    },
-  },
-}
-
-const actions: ComponentArgTypes<RadioProps> = {
-  onClick: { action: 'clicked', table: { disable: true } },
-}
-
-export default {
-  title: 'Atoms/Radio',
-  argTypes: {
-    ...controls,
-    ...actions,
-  },
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

package/src/atoms/Select/Select.test.tsx

@@ -1,71 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import Select from './Select'
-
-const optionsArray = [
-  ['great', 'Great'],
-  ['ok', 'Ok'],
-  ['bad', 'Bad'],
-]
-
-const mapPairToOption = (value: string, label: string) => {
-  return (
-    <option key={value} value={value}>
-      {label}
-    </option>
-  )
-}
-
-describe('Select', () => {
-  it('`data-fs-select` is present', () => {
-    const { getByTestId } = render(
-      <Select testId="store-select">
-        {optionsArray.map(([value, label]) => {
-          return mapPairToOption(value, label)
-        })}
-      </Select>
-    )
-
-    expect(getByTestId('store-select')).toHaveAttribute('data-fs-select')
-  })
-
-  it('select is empty when no options are given', () => {
-    const { getByTestId } = render(<Select testId="store-select" />)
-
-    expect(getByTestId('store-select')).toBeEmptyDOMElement()
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations using aria-label', async () => {
-      const { container } = render(
-        <Select aria-label="label select for test" testId="store-select" />
-      )
-
-      expect(await axe(container)).toHaveNoViolations()
-    })
-
-    it('should have no violations using aria-labelledby', async () => {
-      const { container } = render(
-        <>
-          <span id="label">My test label</span>
-          <Select aria-labelledby="label" testId="store-select" />
-        </>
-      )
-
-      expect(await axe(container)).toHaveNoViolations()
-    })
-
-    it('should have no violations using id with explicit label', async () => {
-      const { container } = render(
-        <>
-          <label htmlFor="select">My test label</label>
-          <Select id="select" testId="store-select" />
-        </>
-      )
-
-      expect(await axe(container)).toHaveNoViolations()
-    })
-  })
-})

package/src/atoms/Skeleton/Skeleton.test.tsx

@@ -1,13 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-
-import Skeleton from './Skeleton'
-
-describe('Skeleton', () => {
-  it('`data-fs-skeleton` is present', () => {
-    const { getByTestId } = render(<Skeleton testId="store-skeleton" />)
-    const skeleton = getByTestId('store-skeleton')
-
-    expect(skeleton).toHaveAttribute('data-fs-skeleton')
-  })
-})

package/src/atoms/Slider/Slider.test.tsx

@@ -1,32 +0,0 @@
-import { render } from '@testing-library/react'
-import { axe } from 'jest-axe'
-import React from 'react'
-
-import Slider from './Slider'
-
-const props = {
-  min: {
-    absolute: 0,
-    selected: 0,
-  },
-  max: {
-    absolute: 100,
-    selected: 100,
-  },
-}
-
-describe('Slider', () => {
-  it('`data-fs-slider` is present', () => {
-    const { getByTestId } = render(<Slider {...props} />)
-
-    expect(getByTestId('store-slider')).toHaveAttribute('data-fs-slider')
-  })
-
-  describe('Accessibility', () => {
-    it('should have no violations', async () => {
-      const { getByTestId } = render(<Slider {...props} />)
-
-      expect(await axe(getByTestId('store-slider'))).toHaveNoViolations()
-    })
-  })
-})