import { Meta, Canvas, Props } from '@storybook/addon-docs/blocks';
import CustomStore from './CustomStore';
import { IntegrationStoreMapping} from './types';

<Meta title="Components/Common/CustomStore" component={CustomStore} />

# CustomStore

<Canvas>
  <CustomStore name="ebay" />
  <CustomStore name="amazon" />
  <CustomStore name="etsy" content="EE" />
  <CustomStore name="foo" content="AA" />
  <CustomStore name="bar" />
</Canvas>

## Usage

```jsx
import { VeeqoCommon } from '@veeqo/components';
const { CustomStore } = VeeqoCommon;

<CustomStore name="ebay" />
<CustomStore name="amazon" />
<CustomStore name="etsy" content="EE" />

<CustomStore name="foo" content="AA" />
<CustomStore name="bar" />
```

## List of available predefined styles

<table>
  <thead>
    <tr>
      <th>Integrations</th>
      <th>Store</th>
      <th>Icon</th>
    </tr>
  </thead>
  <tbody>
  {Object.values(IntegrationStoreMapping).filter((v, i, a) => a.indexOf(v) === i).map(name => (
    <tr>
      <td>
        {Object.keys(IntegrationStoreMapping).filter((v, i) => IntegrationStoreMapping[v] === name).map(integration => (
          <p style={{margin: '0'}}>{integration}</p>
        ))}
      </td>
      <td>{name}</td>
      <td>
        <CustomStore name={name} />
      </td>
    </tr>
  ))}
  </tbody>
</table>

## Props

<Props of={CustomStore} />