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

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

@@ -1,52 +0,0 @@
-import type { Story, Meta } from '@storybook/react'
-import React from 'react'
-import { RadioOption } from '../../../../'
-
-import type { SkuSelectorProps } from '../SkuSelector'
-import Component from '../SkuSelector'
-import mdx from './SkuSelector.mdx'
-
-const SkuSelectorTemplate: Story<SkuSelectorProps> = ({ testId }) => {
-  const activeValue = 'Pink'
-  const options = [
-    { label: 'Color Pink', value: 'Pink' },
-    { label: 'Color White', value: 'White' },
-  ]
-  const variant = 'label'
-
-  return (
-    <Component
-      testId={testId}
-      variant={variant}
-      options={options}
-      activeValue={activeValue}
-      label='Color'
-    >
-      {options.map((option, index) => {
-        return (
-          <RadioOption
-            data-fs-sku-selector-option
-            key={String(index)}
-            label={option.label}
-            value={option.value}
-            checked={option.value === activeValue}
-          >
-            <span>{option.value}</span>
-          </RadioOption>
-        )
-      })}
-    </Component>
-  )
-}
-
-export const SkuSelector = SkuSelectorTemplate.bind({})
-SkuSelector.storyName = 'SkuSelector'
-
-export default {
-  title: 'Molecules/SkuSelector',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

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

@@ -1,31 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import { Tag } from '@faststore/components'
-
-<Meta title="Molecules/Tag" component={Tag} argTypes={{}} />
-
-export const Template = (args) => (
-  <Tag label="Label" variant="warning" onClose={() => {}} />
-)
-
-<header>
-
-# Tag
-
-Tags are an interactive `Badge.` By default, its have a close button.
-
-</header>
-
-## Usage
-
-```jsx
-import { Tag } from '@faststore/ui'
-// Styles
-import '@faststore/ui/src/components/molecules/Tag/styles.scss'
-```
-
-<Canvas>
-  <Story name="default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="default" />

package/src/components/organisms/OutOfStock/stories/OutOfStock.mdx

@@ -1,37 +0,0 @@
-import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
-
-import OutOfStock from '../OutOfStock'
-
-# OutOfStock
-
-<Canvas>
-  <Story id="organisms-outofstock--out-of-stock" />
-</Canvas>
-
-The `OutOfStock` uses the [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) pattern, its components are:
-
-- `OutOfStock`: the form wrapper of the out of stock component with title and message;
-- `OutOfStockTitle`: the main title component for out of stock component;
-- `OutOfStockMessage`: the message component for out of stock component;
-
-## Props
-
-### `OutOfStock`
-
-<ArgsTable of={ OutOfStock } />
-
-## CSS Selectors
-
-```css
-[data-fs-out-of-stock] {
-}
-
-[data-out-of-stock-form] {
-}
-
-[data-out-of-stock-title] {
-}
-
-[data-out-of-stock-message] {
-}
-```

package/src/components/organisms/OutOfStock/stories/OutOfStock.stories.tsx

@@ -1,71 +0,0 @@
-import type { Story, Meta } from '@storybook/react'
-import React, { useState } from 'react'
-
-import type {
-  OutOfStockMessageProps,
-  OutOfStockTitleProps,
-  OutOfStockProps,
-} from '..'
-import Component, { OutOfStockTitle, OutOfStockMessage } from '..'
-import { Button, Input } from '@faststore/components'
-import mdx from './OutOfStock.mdx'
-
-type OutOfStockTemplateProps = {
-  title: string
-  message: string
-  titleAs: OutOfStockTitleProps['as']
-  messageAs: OutOfStockMessageProps['as']
-} & OutOfStockProps
-
-const OutOfStockTemplate: Story<OutOfStockTemplateProps> = ({
-  title,
-  message,
-  titleAs,
-  messageAs,
-  ...props
-}) => {
-  const [value, setValue] = useState('')
-
-  const handlerSubmitForm = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-
-    alert(value)
-  }
-
-  return (
-    <Component onSubmit={handlerSubmitForm} {...props}>
-      <OutOfStockTitle as={titleAs}>{title}</OutOfStockTitle>
-      <OutOfStockMessage as={messageAs}>{message}</OutOfStockMessage>
-      <Input value={value} onChange={(e) => setValue(e.target.value)} />
-      <Button>Notify me</Button>
-    </Component>
-  )
-}
-
-export const OutOfStock = OutOfStockTemplate.bind({})
-OutOfStock.storyName = 'OutOfStock'
-
-export default {
-  title: 'Organisms/OutOfStock',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-  args: {
-    title: 'Notify me',
-    message: 'Notify me when available',
-  },
-  argTypes: {
-    titleAs: {
-      defaultValue: 'h2',
-      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'],
-      control: { type: 'select' },
-    },
-    messageAs: {
-      defaultValue: 'p',
-      options: ['h2', 'h3', 'h4', 'h5', 'h6', 'p', 'div', 'span'],
-      control: { type: 'select' },
-    },
-  },
-} as Meta

package/src/components/organisms/Tiles/stories/Tiles.mdx

@@ -1,39 +0,0 @@
-import { ArgsTable, Canvas, Story } from '@storybook/addon-docs'
-
-import { Tile, Tiles } from '../'
-
-# Tiles
-
-<Canvas>
-  <Story id="organisms-tiles--tiles" />
-</Canvas>
-
-## Components
-
-- `Tiles`: the parent component that wraps one or many `Tile`s.
-- `Tile`: the child component.
-
-## Props
-
-Besides those attributes, the following props are also supported:
-
-### `Tiles`
-
-<ArgsTable of={Tiles} />
-
-### `Tile`
-
-<ArgsTable of={Tile} />
-
-## CSS Selectors
-
-```css
-[data-fs-tiles] {
-}
-
-[data-fs-tiles-variant='expanded-first'|'expanded-first-two'] {
-}
-
-[data-fs-tile] {
-}
-```

package/src/components/organisms/Tiles/stories/Tiles.stories.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-
-import { Tile, Tiles as UITiles } from '../'
-import mdx from './Tiles.mdx'
-
-import type { Story, Meta } from '@storybook/react'
-import type { TilesProps } from '../'
-
-const TilesTemplate: Story<TilesProps> = () => (
-  <>
-    <UITiles>
-      <Tile>Tile #1</Tile>
-      <Tile>Tile #2</Tile>
-    </UITiles>
-    <UITiles>
-      <Tile>Tile #1</Tile>
-      <Tile>Tile #2</Tile>
-      <Tile>Tile #3</Tile>
-      <Tile>Tile #4</Tile>
-    </UITiles>
-    <UITiles>
-      <Tile>Tile #1</Tile>
-      <Tile>Tile #2</Tile>
-      <Tile>Tile #3</Tile>
-    </UITiles>
-  </>
-)
-
-export const Tiles = TilesTemplate.bind({})
-
-export default {
-  title: 'Organisms/Tiles',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

package/src/typings/utils.d.ts

@@ -1,5 +0,0 @@
-import type { ArgTypes } from '@storybook/react'
-
-export type ComponentArgTypes<T> = {
-  [K in keyof T]: ArgTypes
-}