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

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

@@ -1,65 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import { Label } from '@faststore/components'
-
-<Meta
-  title="Atoms/Label"
-  component={Label}
-  argTypes={{
-    children: {
-      control: { type: 'text' },
-      defaultValue: 'Label',
-    },
-  }}
-/>
-
-export const Template = (args) => <Label {...args} />
-
-<header>
-
-# Label
-
-A label allows the user to understand a single element. It is often in the form of information, and can have an implied instruction. Usually used to describe the meaning of input fields.
-
-</header>
-
-## Overview
-
-<Canvas>
-  <Story
-    name="overview-label"
-    args={{
-      id: 'overview-label',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
----
-
-## Usage
-
-```jsx
-import Label from '@faststore/ui'
-```
-
-<Canvas>
-  <Story
-    name="default"
-    args={{
-      id: 'label-default',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="default" />
-
-## CSS Selectors
-
-```css
-[data-fs-label] {
-}
-```

package/src/components/atoms/Link/Link.stories.mdx

@@ -1,134 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import { Link } from '@faststore/components'
-
-<Meta
-  title="Atoms/Link/Default"
-  component={Link}
-  argTypes={{
-    children: {
-      name: 'content',
-    },
-    variant: {
-      options: [
-        'default',
-        'display',
-        'footer',
-        'inline',
-      ],
-      control: { type: 'select' },
-    },
-    size: {
-      options: [
-        'regular',
-        'small',
-      ],
-      control: { type: 'select' },
-      defaultValue: 'regular',
-    },
-    inverse: {
-      type: {
-        name: 'boolean',
-      },
-      description: 'Should use inverse color',
-      defaultValue: false,
-    },
-    as: {
-      description: 'Html tag or Link component to be used as Polymorphic way',
-      as: 'a',
-    },
-    testId: {
-      table: {
-        disable: true,
-      },
-    },
-  }}
-/>
-
-export const Template = ({ children, ...args }) => (
-  <Link {...args}>{children}</Link>
-)
-
-<header>
-
-# Link
-
-Link performs the same behavior of a regular anchor tag (`a`), but can be used as any HTML tag and component, including specific Frameworks link components.
-
-</header>
-
-## Overview
-
-<Canvas>
-  <Story
-    name="overview-default"
-    args={{
-      children: 'Default',
-      variant: 'neutral',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-display"
-    args={{
-      children: 'Display',
-      variant: 'display',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-inline"
-    args={{
-      children: 'Inline',
-      variant: 'inline',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-small"
-    args={{
-      children: 'Small',
-      variant: 'display',
-      size: "small",
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-inverse"
-    args={{
-      children: 'Inverse',
-      inverse: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
----
-
-## Usage
-
-```jsx
-import Link from '@faststore/ui'
-
-// Styles
-import @faststore/ui/src/components/atoms/Link/styles.scss
-```
-
-<Canvas>
-  <Story
-    name="default"
-    args={{
-      children: 'Link',
-      variant: 'default',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="default" />

package/src/components/atoms/Popover/stories/Popover.mdx

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

package/src/components/atoms/Popover/stories/Popover.stories.tsx

@@ -1,50 +0,0 @@
-import React, { useRef, useState } from 'react'
-import type { Story } from '@storybook/react'
-
-import Component from '../Popover'
-import { Input } from '@faststore/components'
-import type { PopoverProps } from '../Popover'
-import mdx from './Popover.mdx'
-import type { ComponentArgTypes } from '../../../../typings/utils'
-
-const PopoverTemplate: Story<PopoverProps> = ({ children }) => {
-  const ref = useRef(null)
-  const [value, setValue] = useState('')
-
-  return (
-    <div>
-      <label>
-        <span>Type for a special message</span>
-        <Input
-          type="text"
-          onChange={(event) => setValue(event.target.value)}
-          ref={ref}
-        />
-      </label>
-      {value.length > 0 && <Component targetRef={ref}>{children}</Component>}
-    </div>
-  )
-}
-
-export const Popover = PopoverTemplate.bind({})
-Popover.args = {
-  children: 'Whoa! Look at me!',
-}
-
-const argTypes: ComponentArgTypes<Omit<PopoverProps, 'targetRef'>> = {
-  children: {
-    table: { disable: true },
-  },
-}
-
-const story = {
-  title: 'Atoms/Popover',
-  argTypes,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-}
-
-export default story

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

@@ -1,101 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import { Radio, Label } from '@faststore/components'
-
-<Meta
-  title="Atoms/Radio"
-  component={Radio}
-  argTypes={{
-    disabled: {
-      type: {
-        name: 'boolean',
-      },
-      description: 'Disabled this input. <br/> `boolean`',
-      defaultValue: false,
-    },
-    testId: {
-      table: {
-        disable: true,
-      },
-    },
-  }}
-/>
-
-export const Template = (args) => (
-  <>
-    <Radio {...args} onChange={() => {}} />
-    <Label htmlFor="radio-default">Radio</Label>
-  </>
-)
-
-<header>
-
-# Radio
-
-Radios allow users to select one option from a set.
-
-</header>
-
-## Overview
-
-<Canvas>
-  <Story
-    name="overview-default-1"
-    args={{
-      id: 'overview-radio-default-1',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-default-2"
-    args={{
-      id: 'overview-radio-default-2',
-      checked: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-default-3"
-    args={{
-      id: 'overview-radio-default-3',
-      disabled: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-default-4"
-    args={{
-      id: 'overview-radio-default-4',
-      disabled: true,
-      checked: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
----
-
-## Usage
-
-```jsx
-import Radio from '@faststore/ui'
-// Styles
-import '@faststore/ui/src/components/atoms/Radio/styles.scss'
-```
-
-<Canvas>
-  <Story
-    name="default"
-    args={{
-      id: 'radio-default',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="default" />

package/src/components/atoms/Skeleton/stories/Skeleton.mdx

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

package/src/components/atoms/Skeleton/stories/Skeleton.stories.tsx

@@ -1,21 +0,0 @@
-import type { Story } from '@storybook/react'
-import React from 'react'
-
-import type { SkeletonProps } from '../Skeleton'
-import Component from '../Skeleton'
-import mdx from './Skeleton.mdx'
-
-const SkeletonTemplate: Story<SkeletonProps> = ({ testId, ...otherProps }) => (
-  <Component testId={testId} {...otherProps} />
-)
-
-export const Skeleton = SkeletonTemplate.bind({})
-
-export default {
-  title: 'Atoms/Skeleton',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-}

package/src/components/atoms/Slider/stories/Slider.mdx

@@ -1,29 +0,0 @@
-import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import Slider from '../Slider'
-
-# Slider
-
-<Canvas>
-  <Story id="atoms-slider--slider" />
-</Canvas>
-
-# Props
-
-<ArgsTable of={Slider} />
-
-# CSS Selectors
-
-```css
-[data-fs-slider] {
-}
-[data-slider-range] {
-}
-[data-slider-thumb='(left|right)'] {
-}
-```
-
-# TODO
-
-- [ ] [Keyboard Interaction](https://www.w3.org/TR/wai-aria-practices-1.2/#slidertwothumb_kbd_interaction)
-- [ ] More test cases
-- [ ] Support to orientation

package/src/components/atoms/Slider/stories/Slider.stories.tsx

@@ -1,32 +0,0 @@
-import type { Meta, Story } from '@storybook/react'
-import React from 'react'
-
-import type { ComponentArgTypes } from '../../../../typings/utils'
-import type { SliderProps } from '../Slider'
-import Component from '../Slider'
-import mdx from './Slider.mdx'
-
-const SliderTemplate: Story<SliderProps> = (props) => <Component {...props} />
-
-export const Slider = SliderTemplate.bind({})
-
-const argTypes: ComponentArgTypes<SliderProps> = {
-  min: {
-    control: { type: 'number', min: 0 },
-    defaultValue: 0,
-  },
-  max: {
-    control: { type: 'number', min: 1 },
-    defaultValue: 500,
-  },
-}
-
-export default {
-  title: 'Atoms/Slider',
-  argTypes,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

package/src/components/atoms/Spinner/stories/Spinner.mdx

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

package/src/components/atoms/Spinner/stories/Spinner.stories.tsx

@@ -1,21 +0,0 @@
-import type { Story } from '@storybook/react'
-import React from 'react'
-
-import type { SpinnerProps } from '../Spinner'
-import Component from '../Spinner'
-import mdx from './Spinner.mdx'
-
-const SpinnerTemplate: Story<SpinnerProps> = ({ testId }) => (
-  <Component testId={testId} />
-)
-
-export const Spinner = SpinnerTemplate.bind({})
-
-export default {
-  title: 'Atoms/Spinner',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-}

package/src/components/atoms/TextArea/stories/TextArea.mdx

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

package/src/components/atoms/TextArea/stories/TextArea.stories.tsx

@@ -1,49 +0,0 @@
-import React from 'react'
-import type { Story, Meta } from '@storybook/react'
-
-import Component from '../TextArea'
-import type { TextAreaProps } from '../TextArea'
-import mdx from './TextArea.mdx'
-import type { ComponentArgTypes } from '../../../../typings/utils'
-
-const TextAreaTemplate: Story<TextAreaProps> = (props) => (
-  <Component {...props} aria-label="Textarea" />
-)
-
-export const Textarea = TextAreaTemplate.bind({})
-Textarea.args = {
-  defaultValue: 'Write something here',
-}
-
-const controls: ComponentArgTypes<TextAreaProps> = {
-  variant: {
-    options: ['default', 'success', 'error'],
-    defaultValue: 'default',
-    control: { type: 'select' },
-  },
-  value: {
-    control: {
-      type: 'text',
-    },
-  },
-  defaultValue: {
-    table: { disable: true },
-  },
-}
-
-const actions: ComponentArgTypes<TextAreaProps> = {
-  onChange: { action: 'changed', table: { disable: true } },
-}
-
-export default {
-  title: 'Atoms/Textarea',
-  argTypes: {
-    ...controls,
-    ...actions,
-  },
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

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

@@ -1,62 +0,0 @@
-import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
-
-import Accordion from '../Accordion'
-import { StorybookAccordionItem } from '../AccordionItem'
-import AccordionButton from '../AccordionButton'
-import AccordionPanel from '../AccordionPanel'
-
-# Accordion
-
-## Multiple And Collapsible
-
-<Canvas>
-  <Story id="molecules-accordion--multiple-and-collapsible" />
-</Canvas>
-
-## Toggle With Icon
-
-<Canvas>
-  <Story id="molecules-accordion--toggle-with-icon" />
-</Canvas>
-
-## Components
-
-The `Accordion` uses the [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) pattern, its components are:
-
-- `Accordion`: the wrapper component.
-- `AccordionItem`: the component that wraps an item of the `Accordion`, which is composed of an `AccordionButton` and an `AccordionPanel`.
-- `AccordionButton`: the button used to interact with its related `AccordionItem`, opening or closing the `AccordionPanel`.
-- `AccordionPanel`: the panel that contains the contents of the `AccordionItem`.
-
-## Props
-
-All accordion-related components support all attributes also supported by the `<div>` tag, except for the `AccordionButton`, which renders the `<button>` tag.
-
-Besides those attributes, the following props are also supported:
-
-### `Accordion`
-
-<ArgsTable of={Accordion} />
-
-### `AccordionItem`
-
-<ArgsTable of={StorybookAccordionItem} />
-
-### `AccordionButton`
-
-<ArgsTable of={AccordionButton} />
-
-### `AccordionPanel`
-
-<ArgsTable of={AccordionPanel} />
-
-## CSS Selectors
-
-```css
-[data-fs-accordion] {}
-[data-accordion-item] {}
-[data-accordion-button] {}
-[data-accordion-panel] {}
-```
-
-The `AccordionButton` component inherits [Button](?path=/docs/atoms-button--button#css-selectors) css selectors.