import * as React from 'react';
import { storiesOf } from '@storybook/react';

import {
    CardPreview,
    BaseButtonPreview,
    PrimaryButtonPreview,
    SecondaryButtonPreview,
    DangerButtonPreview,
    SpinnerPreview,
    ConditionalSpinnerPreview,
    ClickOutsidePreview,
    TablePreview,
    FormPreview,
    InputPreview,
} from '../src';

const positioned = (PreviewComponent: any) => () => (
    <div style={{ height: 1500, backgroundColor: '#E6EBEF' }}>
        <div style={{ width: 700, margin: 'auto', paddingTop: 50 }}>
            <PreviewComponent />
        </div>
    </div>
);

storiesOf('Card', module)
    .add('with text', positioned(CardPreview));

storiesOf('Button', module)
    .add('base', positioned(BaseButtonPreview))
    .add('primary', positioned(PrimaryButtonPreview))
    .add('secondary', positioned(SecondaryButtonPreview))
    .add('danger', positioned(DangerButtonPreview));

storiesOf('Spinner', module)
    .add('default', positioned(SpinnerPreview))
    .add('conditional', positioned(ConditionalSpinnerPreview));

storiesOf('Click outside', module)
    .add('default', positioned(ClickOutsidePreview));

storiesOf('Table', module)
    .add('default', positioned(TablePreview));

storiesOf('Form', module)
    .add('simple example', positioned(FormPreview));

storiesOf('Input', module)
    .add('simple example', positioned(InputPreview));