// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import intro from './INTRO.mkd';
import { Box } from '../src/primitives/box';
import { Grid, GridItem } from '../src/core/structures/grid';
import { compileMarkdown } from './markdown-formatter';

storiesOf('A MANUAL', module).add('Intro', () => (
  <Box colorName="background" spacing="pv4">
    <Grid>
      <GridItem
        sm={10}
        md={8}
        offsetSm={1}
        offsetMd={2}
        offsetLg={2}
        offsetXl={2}
      >
        <Box colorName="white" spacing="p3">
          {compileMarkdown(intro).tree}
        </Box>
      </GridItem>
    </Grid>
  </Box>
));
