From 7d572f11708293adf5ab1dbc1192cfd47a384aca Mon Sep 17 00:00:00 2001
From: John Benavides <john@mailtrack.io>
Date: Tue, 3 Jul 2018 15:15:21 +0200
Subject: [PATCH] improve imports on stories

---
 .storybook/config.js                          |   6 -
 src/components/card/card.story.js             |  17 +--
 src/components/columns/columns.story.js       |  30 ++--
 src/components/container/container.story.js   |   9 +-
 src/components/content/content.story.js       |   7 +-
 src/components/dropdown/dropdown.story.js     |  14 +-
 src/components/footer/footer.story.js         |  11 +-
 src/components/form/form.story.js             |  22 +--
 src/components/heading/heading.story.js       |  12 +-
 src/components/hero/hero.story.js             |  17 +--
 src/components/icon/icon.story.js             |  24 +--
 src/components/image/image.story.js           |  16 +-
 src/components/level/level.story.js           |  23 ++-
 src/components/loader/loader.story.js         |  14 +-
 src/components/media/media.story.js           |  23 ++-
 src/components/menu/menu.story.js             |  10 +-
 src/components/message/message.story.js       |  14 +-
 src/components/modal/modal.js                 |   6 +-
 src/components/modal/modal.story.js           |  23 ++-
 src/components/navbar/navbar.story.js         | 142 +++---------------
 .../notification/notification.story.js        |   9 +-
 src/components/pagination/pagination.story.js |  13 +-
 src/components/panel/panel.story.js           |  12 +-
 src/components/progress/progress.story.js     |   5 +-
 src/components/section/section.story.js       |  13 +-
 src/components/table/table.story.js           |   6 +-
 src/components/tabs/tabs.story.js             |  12 +-
 src/components/tag/tag.story.js               |  13 +-
 src/components/tile/tile.story.js             |  13 +-
 29 files changed, 173 insertions(+), 363 deletions(-)

diff --git a/.storybook/config.js b/.storybook/config.js
index fd3c6437..9b011957 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -23,12 +23,6 @@ addDecorator(withBackgrounds([
   { name: 'facebook', value: '#3b5998' },
 ]));
 
-addDecorator(story => (
-  <div style={{ marginRight: 95, marginLeft: 10, marginTop: 10 }}>
-    {story()}
-  </div>
-));
-
 addDecorator(withInfo({
   source: false,
 }));
diff --git a/src/components/card/card.story.js b/src/components/card/card.story.js
index c58dd021..f3fa4c1d 100644
--- a/src/components/card/card.story.js
+++ b/src/components/card/card.story.js
@@ -1,21 +1,20 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Card from '.';
-import Media from '../media';
-import Image from '../image';
-import Content from '../content';
-import Heading from '../heading';
+import Card from 'react-bulma-components/lib/components/card';
+import Media from 'react-bulma-components/lib/components/media';
+import Image from 'react-bulma-components/lib/components/image';
+import Content from 'react-bulma-components/lib/components/content';
+import Heading from 'react-bulma-components/lib/components/heading';
 
 storiesOf('Card', module)
   .addDecorator(story => (
-    <div style={{ margin: '10px auto', width: 450 }}>
+    <div style={{ margin: '0px auto', width: 450 }}>
       {story()}
     </div>
   ))
-  .add('Default', withInfo()(() => (
+  .add('Default', (() => (
     <Card>
       <Card.Image size="4by3" src="http://bulma.io/images/placeholders/1280x960.png" />
       <Card.Content>
@@ -38,7 +37,7 @@ storiesOf('Card', module)
       </Card.Content>
     </Card>
   )))
-  .add('With Footer actions', withInfo()(() => (
+  .add('With Footer actions', (() => (
     <Card>
       <Card.Header>
         <Card.Header.Title>Title</Card.Header.Title>
diff --git a/src/components/columns/columns.story.js b/src/components/columns/columns.story.js
index bb72177a..b3fe731b 100644
--- a/src/components/columns/columns.story.js
+++ b/src/components/columns/columns.story.js
@@ -1,20 +1,14 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Columns from '.';
-import Box from '../box';
-import Heading from '../heading';
+import Columns from 'react-bulma-components/lib/components/columns';
+import Box from 'react-bulma-components/lib/components/box';
+import Heading from 'react-bulma-components/lib/components/heading';
 import CONSTANTS from './constants';
 
 storiesOf('Columns', module)
-  .addDecorator(story => (
-    <div style={{ margin: 10 }}>
-      {story()}
-    </div>
-  ))
-  .add('Basic', withInfo('')(() => (
+  .add('Basic', (() => (
     <Columns>
       <Columns.Column>
         <p className="bd-notification is-success">First Column</p>
@@ -30,7 +24,7 @@ storiesOf('Columns', module)
       </Columns.Column>
     </Columns>
   )))
-  .add('Sizes by name', withInfo('')(() => (
+  .add('Sizes by name', (() => (
     <div>
       {Object.keys(CONSTANTS.SIZES).map(size => (
         <Columns key={size}>
@@ -46,7 +40,7 @@ storiesOf('Columns', module)
       }
     </div>
   )))
-  .add('Sizes by 12 Columns', withInfo('')(() => (
+  .add('Sizes by 12 Columns', (() => (
     <div>
       <Columns>
         <Columns.Column size={1}>
@@ -311,7 +305,7 @@ storiesOf('Columns', module)
       </Columns>
     </div>
   )))
-  .add('With Offset', withInfo('')(() => (
+  .add('With Offset', (() => (
     <div>
       <Columns mobile>
         <Columns.Column size="half" offset="one-quarter">
@@ -332,7 +326,7 @@ storiesOf('Columns', module)
       </Columns>
     </div>
   )))
-  .add('Narrow', withInfo('')(() => (
+  .add('Narrow', (() => (
     <Columns>
       <Columns.Column narrow>
         <Box style={{ width: 200 }}>
@@ -348,7 +342,7 @@ storiesOf('Columns', module)
       </Columns.Column>
     </Columns>
   )))
-  .add('Responsive', withInfo('')(() => (
+  .add('Responsive', (() => (
     <div>
       <Box>
         <Heading size={5} renderAs="p">Mobile</Heading>
@@ -403,7 +397,7 @@ storiesOf('Columns', module)
       </Box>
     </div>
   )))
-  .add('Different column size per breakpoint', withInfo('')(() => (
+  .add('Different column size per breakpoint', (() => (
     <Columns breakpoint="mobile">
       <Columns.Column
         mobile={{
@@ -438,7 +432,7 @@ storiesOf('Columns', module)
       </Columns.Column>
     </Columns>
   )))
-  .add('Nested', withInfo('')(() => (
+  .add('Nested', (() => (
     <Columns>
       <Columns.Column size="half">
         <p className="bd-notification is-success">First Column</p>
@@ -467,7 +461,7 @@ storiesOf('Columns', module)
       </Columns.Column>
     </Columns>
   )))
-  .add('gapless columns', withInfo('')(() => (
+  .add('gapless columns', (() => (
     <Columns gapless>
       <Columns.Column>
         <p className="bd-notification is-success"> First Column</p>
diff --git a/src/components/container/container.story.js b/src/components/container/container.story.js
index 171c4d6b..b8e7fe22 100644
--- a/src/components/container/container.story.js
+++ b/src/components/container/container.story.js
@@ -1,14 +1,13 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Container from '.';
-import Heading from '../heading';
-import Section from '../section';
+import Container from 'react-bulma-components/lib/components/container';
+import Heading from 'react-bulma-components/lib/components/heading';
+import Section from 'react-bulma-components/lib/components/section';
 
 storiesOf('Container', module)
-  .add('Default', withInfo()(() => (
+  .add('Default', (() => (
     <div>
       <Section>
         <Container>
diff --git a/src/components/content/content.story.js b/src/components/content/content.story.js
index cc08ae20..d5c38556 100644
--- a/src/components/content/content.story.js
+++ b/src/components/content/content.story.js
@@ -1,12 +1,11 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Content from '.';
+import Content from 'react-bulma-components/lib/components/content';
 
 storiesOf('Content', module)
-  .add('Default', withInfo()(() => (
+  .add('Default', (() => (
     <Content>
       <h1>Hello World</h1>
       <p>Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!</p>
@@ -99,7 +98,7 @@ storiesOf('Content', module)
       <p>Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.</p>
     </Content>
   )))
-  .add('Size Small', withInfo()(() => (
+  .add('Size Small', (() => (
     <Content size="small">
       <h1>Hello World</h1>
       <p>Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!</p>
diff --git a/src/components/dropdown/dropdown.story.js b/src/components/dropdown/dropdown.story.js
index da190468..c94e31ee 100644
--- a/src/components/dropdown/dropdown.story.js
+++ b/src/components/dropdown/dropdown.story.js
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
 import Dropdown from '.';
 
@@ -37,12 +36,7 @@ class Wrapper extends React.Component {
 }
 
 storiesOf('Dropdown', module)
-  .addDecorator(story => (
-    <div style={{ margin: 10 }}>
-      {story()}
-    </div>
-  ))
-  .add('Default', withInfo()(() => (
+  .add('Default', (() => (
     <Dropdown>
       <Dropdown.Item value="item" >
         Dropdown item
@@ -62,7 +56,7 @@ storiesOf('Dropdown', module)
       </Dropdown.Item>
     </Dropdown>
   )))
-  .add('Hoverable', withInfo()(() => (
+  .add('Hoverable', (() => (
     <Dropdown hoverable>
       <Dropdown.Item value="item" >
         Dropdown item
@@ -82,5 +76,5 @@ storiesOf('Dropdown', module)
       </Dropdown.Item>
     </Dropdown>
   )))
-  .add('Controlled component', withInfo()(() => <Wrapper />))
-  .add('Controlled component Hoverable', withInfo()(() => <Wrapper hoverable color="dark" />));
+  .add('Controlled component', (() => <Wrapper />))
+  .add('Controlled component Hoverable', (() => <Wrapper hoverable color="dark" />));
diff --git a/src/components/footer/footer.story.js b/src/components/footer/footer.story.js
index 995c24fb..53abf944 100644
--- a/src/components/footer/footer.story.js
+++ b/src/components/footer/footer.story.js
@@ -1,15 +1,14 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Footer from '.';
-import Container from '../container';
-import Content from '../content';
-import Hero from '../hero';
+import Footer from 'react-bulma-components/lib/components/footer';
+import Container from 'react-bulma-components/lib/components/container';
+import Content from 'react-bulma-components/lib/components/content';
+import Hero from 'react-bulma-components/lib/components/hero';
 
 storiesOf('Footer', module)
-  .add('Default', withInfo()(() => (
+  .add('Default', (() => (
     <Hero size="fullheight">
       <Hero.Head renderAs="header" />
       <Hero.Body />
diff --git a/src/components/form/form.story.js b/src/components/form/form.story.js
index 4a790618..6014a267 100644
--- a/src/components/form/form.story.js
+++ b/src/components/form/form.story.js
@@ -1,11 +1,10 @@
 import React, { PureComponent } from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import { Field, Control, Label, Input, Textarea, Select, Checkbox, Radio, Help } from '.';
-import Button from '../button';
-import Icon from '../icon';
+import { Field, Control, Label, Input, Textarea, Select, Checkbox, Radio, Help } from 'react-bulma-components/lib/components/form';
+import Button from 'react-bulma-components/lib/components/button';
+import Icon from 'react-bulma-components/lib/components/icon';
 
 /* eslint-disable react/no-multi-comp */
 const HoC = (Component) => {
@@ -78,12 +77,7 @@ const SelectControlled = HoC(Select);
 const CheckboxControlled = HoCCheckbox(Checkbox);
 
 storiesOf('Form', module)
-  .addDecorator(story => (
-    <div style={{ margin: 10 }}>
-      {story()}
-    </div>
-  ))
-  .add('Default', withInfo()(() => (
+  .add('Default', (() => (
     <div>
       <Field>
         <Label>Name</Label>
@@ -155,13 +149,7 @@ storiesOf('Form', module)
       </Field>
     </div>
   )))
-  .add('Handle Multiple inputs', withInfo({
-    text: `
-    Check [React Docs](https://reactjs.org/docs/forms.html#handling-multiple-inputs)
-    `,
-    source: false,
-    propTables: [],
-  })(() => {
+  .add('Handle Multiple inputs', (() => {
     /* eslint-disable react/no-multi-comp */
     class MultiInputHandler extends PureComponent {
       state = {
diff --git a/src/components/heading/heading.story.js b/src/components/heading/heading.story.js
index cecea5fb..77a65e6d 100644
--- a/src/components/heading/heading.story.js
+++ b/src/components/heading/heading.story.js
@@ -1,18 +1,12 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Heading from '.';
-import Box from '../box';
+import Heading from 'react-bulma-components/lib/components/heading';
+import Box from 'react-bulma-components/lib/components/box';
 
 storiesOf('Heading', module)
-  .addDecorator(story => (
-    <div style={{ margin: 10 }}>
-      {story()}
-    </div>
-  ))
-  .add('Default', withInfo()(() => (
+  .add('Default', (() => (
     <div>
       <Box>
         <Heading>
diff --git a/src/components/hero/hero.story.js b/src/components/hero/hero.story.js
index 12aece9c..ddabdaf5 100644
--- a/src/components/hero/hero.story.js
+++ b/src/components/hero/hero.story.js
@@ -1,15 +1,14 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Hero from '.';
-import Heading from '../heading';
-import Section from '../section';
-import Container from '../container';
+import Hero from 'react-bulma-components/lib/components/hero';
+import Heading from 'react-bulma-components/lib/components/heading';
+import Section from 'react-bulma-components/lib/components/section';
+import Container from 'react-bulma-components/lib/components/container';
 
 storiesOf('Hero', module)
-  .add('Default with color', withInfo()(() => (
+  .add('Default with color', (() => (
     <div>
       <Section>
         <Hero color="primary" >
@@ -56,7 +55,7 @@ storiesOf('Hero', module)
       </Section>
     </div>
   )))
-  .add('Gradient (EXPERIMENTAL)', withInfo()(() => (
+  .add('Gradient (EXPERIMENTAL)', (() => (
     <div>
       <Section>
         <Hero color="primary" gradient >
@@ -103,7 +102,7 @@ storiesOf('Hero', module)
       </Section>
     </div>
   )))
-  .add('Differents Sizes', withInfo()(() => (
+  .add('Differents Sizes', (() => (
     <div>
       <Hero color="primary" size="medium" >
         <Hero.Body>
@@ -122,7 +121,7 @@ storiesOf('Hero', module)
       </Hero>
     </div>
   )))
-  .add('Vertical Alignments', withInfo()(() => (
+  .add('Vertical Alignments', (() => (
     <Hero size="fullheight" color="primary" >
       <Hero.Head renderAs="header">
         <div className="bd-notification is-info">Header</div>
diff --git a/src/components/icon/icon.story.js b/src/components/icon/icon.story.js
index 3175e746..33220b78 100644
--- a/src/components/icon/icon.story.js
+++ b/src/components/icon/icon.story.js
@@ -1,15 +1,13 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Icon from '.';
+import Icon from 'react-bulma-components/lib/components/icon';
 
 storiesOf('Icon', module)
-  .addDecorator(story => <div style={{ margin: 10 }}>{story()}</div>)
   .add(
     'Default',
-    withInfo()(() => (
+    (() => (
       <div>
         <Icon icon="bars" color="info" />
         <Icon icon="angle-down" />
@@ -17,23 +15,7 @@ storiesOf('Icon', module)
     )),
   )
   .add(
-    'Custom Icon',
-    withInfo({
-      text: `
-        Notice: Icon component only prepares space for the icon. You need to import the icon library of your choice extra. See the example below for Font Awesome:
-
-        ~~~js
-          import Icon from 'react-bulma-components/lib/components/icon';
-        
-          import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-          import faUserPlus from '@fortawesome/fontawesome-free-solid/faUserPlus';
-          
-          <Icon>
-            <FontAwesomeIcon icon={faUserPlus} />
-          </Icon>
-        ~~~
-      `,
-    })(() => (
+    'Custom Icon',(() => (
       <div>
         <Icon>
           <span className="rbc rbc-bars" />
diff --git a/src/components/image/image.story.js b/src/components/image/image.story.js
index 35b185b4..53c1b284 100644
--- a/src/components/image/image.story.js
+++ b/src/components/image/image.story.js
@@ -1,24 +1,18 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Image from '.';
+import Image from 'react-bulma-components/lib/components/image';
 import CONSTANTS from './constants';
-import Table from '../table';
+import Table from 'react-bulma-components/lib/components/table';
 
 storiesOf('Image', module)
-  .addDecorator(story => (
-    <div style={{ margin: 10 }}>
-      {story()}
-    </div>
-  ))
-  .add('Default', withInfo()(() => (
+  .add('Default', (() => (
     <div style={{ width: 320 }}>
       <Image src="http://bulma.io/images/placeholders/640x480.png" size="3by2" />
     </div>
   )))
-  .add('Fixed Square', withInfo()(() => (
+  .add('Fixed Square', (() => (
     <Table>
       <thead>
         <tr>
@@ -44,7 +38,7 @@ storiesOf('Image', module)
       </tbody>
     </Table>
   )))
-  .add('Responsive images with ratios', withInfo()(() => (
+  .add('Responsive images with ratios', (() => (
     <Table>
       <thead>
         <tr>
diff --git a/src/components/level/level.story.js b/src/components/level/level.story.js
index aa3cb839..85837e15 100644
--- a/src/components/level/level.story.js
+++ b/src/components/level/level.story.js
@@ -1,16 +1,15 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Level from '.';
-import { Field, Control, Input } from '../form';
-import Heading from '../heading';
-import Button from '../button';
-import Hero from '../hero';
-import Container from '../container';
-import Box from '../box';
-import Section from '../section';
+import Level from 'react-bulma-components/lib/components/level';
+import { Field, Control, Input } from 'react-bulma-components/lib/components/form';
+import Heading from 'react-bulma-components/lib/components/heading';
+import Button from 'react-bulma-components/lib/components/button';
+import Hero from 'react-bulma-components/lib/components/hero';
+import Container from 'react-bulma-components/lib/components/container';
+import Box from 'react-bulma-components/lib/components/box';
+import Section from 'react-bulma-components/lib/components/section';
 
 const style = { textAlign: 'center' };
 
@@ -24,7 +23,7 @@ storiesOf('Level', module)
       </Hero.Head>
     </Hero>
   ))
-  .add('Default', withInfo()(() => (
+  .add('Default', (() => (
     <Section>
       <Box>
         <Level renderAs="nav">
@@ -59,7 +58,7 @@ storiesOf('Level', module)
       </Box>
     </Section>
   )))
-  .add('Items Centered', withInfo()(() => (
+  .add('Items Centered', (() => (
     <Section>
       <Box>
         <Level renderAs="nav">
@@ -107,7 +106,7 @@ storiesOf('Level', module)
       </Box>
     </Section>
   )))
-  .add('With breakpoint', withInfo()(() => (
+  .add('With breakpoint', (() => (
     ['mobile', null].map(breakpoint => (
       <Section>
         <Heading>{breakpoint || 'Without breakpoint'}</Heading>
diff --git a/src/components/loader/loader.story.js b/src/components/loader/loader.story.js
index 7754b09a..db1aad64 100644
--- a/src/components/loader/loader.story.js
+++ b/src/components/loader/loader.story.js
@@ -1,23 +1,17 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
 import './loader.story.sass';
-import Loader from '.';
+import Loader from 'react-bulma-components/lib/components/loader';
 
 storiesOf('Loader', module)
-  .addDecorator(story => (
-    <div style={{ margin: 10 }}>
-      {story()}
-    </div>
-  ))
-  .add('Default', withInfo()(() => (
+  .add('Default', (() => (
     <Loader />
   )))
-  .add('with inline style', withInfo()(() => (
+  .add('with inline style', (() => (
     <Loader style={{ width: 300, height: 300, border: '4px solid blue', borderTopColor: 'transparent', borderRightColor: 'transparent' }} />
   )))
-  .add('with other classes', withInfo()(() => (
+  .add('with other classes', (() => (
     <Loader className="loader-override" />
   )));
diff --git a/src/components/media/media.story.js b/src/components/media/media.story.js
index 096d98cd..4cbd5e9e 100644
--- a/src/components/media/media.story.js
+++ b/src/components/media/media.story.js
@@ -1,21 +1,20 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Media from '.';
-import Image from '../image';
-import Content from '../content';
-import Button from '../button';
-import Level from '../level';
-import Section from '../section';
-import Box from '../box';
-import { Textarea, Field, Control } from '../form';
+import Media from 'react-bulma-components/lib/components/media';
+import Image from 'react-bulma-components/lib/components/image';
+import Content from 'react-bulma-components/lib/components/content';
+import Button from 'react-bulma-components/lib/components/button';
+import Level from 'react-bulma-components/lib/components/level';
+import Section from 'react-bulma-components/lib/components/section';
+import Box from 'react-bulma-components/lib/components/box';
+import { Textarea, Field, Control } from 'react-bulma-components/lib/components/form';
 
 const style = { background: '#e6e6e6', width: 64, height: 64 };
 
 storiesOf('Media', module)
-  .add('Default', withInfo()(() => (
+  .add('Default', (() => (
     <Section>
       <Box>
         <Media>
@@ -41,7 +40,7 @@ storiesOf('Media', module)
       </Box>
     </Section>
   )))
-  .add('Right Media', withInfo()(() => (
+  .add('Right Media', (() => (
     <Section>
       <Box>
         <Media>
@@ -55,7 +54,7 @@ storiesOf('Media', module)
       </Box>
     </Section>
   )))
-  .add('Nested', withInfo()(() => (
+  .add('Nested', (() => (
     <Section>
       <Box>
         <Media renderAs="article">
diff --git a/src/components/menu/menu.story.js b/src/components/menu/menu.story.js
index 99743831..e86463b5 100644
--- a/src/components/menu/menu.story.js
+++ b/src/components/menu/menu.story.js
@@ -1,17 +1,11 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Menu from '.';
+import Menu from 'react-bulma-components/lib/components/menu';
 
 storiesOf('Menu', module)
-  .addDecorator(story => (
-    <div style={{ margin: 10 }}>
-      {story()}
-    </div>
-  ))
-  .add('Default', withInfo('')(() => (
+  .add('Default', (() => (
     <Menu>
       <Menu.List title="General">
         <Menu.List.Item>
diff --git a/src/components/message/message.story.js b/src/components/message/message.story.js
index 7584a9ab..75cf46b5 100644
--- a/src/components/message/message.story.js
+++ b/src/components/message/message.story.js
@@ -1,18 +1,12 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Message from '.';
-import Button from '../button';
+import Message from 'react-bulma-components/lib/components/message';
+import Button from 'react-bulma-components/lib/components/button';
 
 storiesOf('Message', module)
-  .addDecorator(story => (
-    <div style={{ margin: 10 }}>
-      {story()}
-    </div>
-  ))
-  .add('Default', withInfo()(() => (
+  .add('Default', (() => (
     <Message>
       <Message.Header>
         Title
@@ -23,7 +17,7 @@ storiesOf('Message', module)
       </Message.Body>
     </Message>
   )))
-  .add('Color', withInfo()(() => (
+  .add('Color', (() => (
     <React.Fragment>
       <Message color="info">
         <Message.Header>
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
index c3588963..a8d4881a 100644
--- a/src/components/modal/modal.js
+++ b/src/components/modal/modal.js
@@ -63,10 +63,10 @@ export default class Modal extends PureComponent {
   }
 
   getDocument = () => {
-    const { document } = this.props;
-    if (document) {
-      return document;
+    if (this.props.document) {
+      return this.props.document;
     }
+
     if (typeof document !== 'undefined') {
       return document;
     }
diff --git a/src/components/modal/modal.story.js b/src/components/modal/modal.story.js
index fdceb0bf..adbd7806 100644
--- a/src/components/modal/modal.story.js
+++ b/src/components/modal/modal.story.js
@@ -2,15 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Modal from '.';
-import Image from '../image';
-import Media from '../media';
-import Button from '../button';
-import Content from '../content';
-import Section from '../section';
-import Level from '../level';
+import Modal from 'react-bulma-components/lib/components/modal';
+import Image from 'react-bulma-components/lib/components/image';
+import Media from 'react-bulma-components/lib/components/media';
+import Button from 'react-bulma-components/lib/components/button';
+import Content from 'react-bulma-components/lib/components/content';
+import Section from 'react-bulma-components/lib/components/section';
+import Level from 'react-bulma-components/lib/components/level';
 
 class OpenModal extends React.Component {
   static propTypes = {
@@ -42,7 +41,7 @@ class OpenModal extends React.Component {
 }
 
 storiesOf('Modal', module)
-  .add('Default', withInfo()(() => (
+  .add('Default', (() => (
     <OpenModal modal={{ closeOnEsc: false }}>
       <Modal.Content>
         <Section style={{ backgroundColor: 'white' }}>
@@ -51,7 +50,7 @@ storiesOf('Modal', module)
       </Modal.Content>
     </OpenModal>
   )))
-  .add('Close with keyboard', withInfo()(() => (
+  .add('Close with keyboard', (() => (
     <OpenModal modal={{ showClose: false }}>
       <Modal.Content>
         <Section style={{ backgroundColor: 'white' }}>
@@ -60,7 +59,7 @@ storiesOf('Modal', module)
       </Modal.Content>
     </OpenModal>
   )))
-  .add('Close on click outside', withInfo()(() => (
+  .add('Close on click outside', (() => (
     <OpenModal modal={{ closeOnBlur: true, showClose: false }}>
       <Modal.Content>
         <Section style={{ backgroundColor: 'white' }}>
@@ -69,7 +68,7 @@ storiesOf('Modal', module)
       </Modal.Content>
     </OpenModal>
   )))
-  .add('Modal Card', withInfo()(() => (
+  .add('Modal Card', (() => (
     <OpenModal modal={{ closeOnBlur: true }}>
       <Modal.Card>
         <Modal.Card.Head>
diff --git a/src/components/navbar/navbar.story.js b/src/components/navbar/navbar.story.js
index 1fe032f2..c5b6f84e 100644
--- a/src/components/navbar/navbar.story.js
+++ b/src/components/navbar/navbar.story.js
@@ -3,23 +3,29 @@
 import React, { Fragment } from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
-import { Field, Control } from '../form';
-import Button from '../button';
+import { select } from '@storybook/addon-knobs';
+import { Field, Control } from 'react-bulma-components/lib/components/form';
+import Button from 'react-bulma-components/lib/components/button';
+import Navbar from 'react-bulma-components/lib/components/navbar';
 import CONSTANTS from '../../constants';
 
-import Navbar from '.';
-
-const colors = [null].concat(Object.keys(CONSTANTS.COLORS).map(key => CONSTANTS.COLORS[key]));
+const colors = {
+  Default: '',
+  primary: 'primary',
+  info: 'info',
+  danger: 'danger',
+  warning: 'warning',
+  success: 'success',
+  white: 'white',
+  black: 'black',
+  light: 'light',
+  dark: 'dark',
+  link: 'link',
+};
 
 storiesOf('Navbar', module)
-  .addDecorator(story => (
-    <div style={{ margin: 10 }}>
-      {story()}
-    </div>
-  ))
-  .add('Default', withInfo('Default Implementation')(() => (
-    <Navbar>
+  .add('Default', (() => (
+    <Navbar color={select('Color', colors)}>
       <Navbar.Brand>
         <Navbar.Item renderAs="a" href="#">
           <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28" />
@@ -67,112 +73,10 @@ storiesOf('Navbar', module)
       </Navbar.Menu>
     </Navbar>
   )))
-  .add('Colors', withInfo()(() => {
-    class Component extends React.Component {
-      state = {
-        color: null,
-      }
-      render() {
-        const { children } = this.props;
-        return (
-          <Fragment>
-            {React.cloneElement(children, { color: this.state.color })}
-
-            <div style={{ marginTop: '2rem' }}>
-              <Field kind="group">
-                <Control>
-                  <Button color={null} onClick={() => this.setState({ color: null })}>default</Button>
-                </Control>
-                {colors
-                  .filter(c => !!c)
-                  .map(color => (
-                    <Control key={color}>
-                      <Button color={color} onClick={() => this.setState({ color })}>{color}</Button>
-                    </Control>
-                ))}
-              </Field>
-            </div>
-          </Fragment>
-        );
-      }
-    }
-    return (
-      <Component>
-        <Navbar>
-          <Navbar.Brand>
-            <Navbar.Item renderAs="a" href="#">
-              <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28" />
-            </Navbar.Item>
-            <Navbar.Burger />
-          </Navbar.Brand>
-          <Navbar.Menu>
-            <Navbar.Container>
-              <Navbar.Item dropdown hoverable>
-                <Navbar.Link>
-                  Docs
-                </Navbar.Link>
-                <Navbar.Dropdown boxed>
-                  <Navbar.Item href="#">
-                    Home
-                  </Navbar.Item>
-                  <Navbar.Item href="#">
-                    List
-                  </Navbar.Item>
-                  <Navbar.Item href="#">
-                    Another Item
-                  </Navbar.Item>
-                  <Navbar.Divider />
-                  <Navbar.Item active href="#">
-                    Active
-                  </Navbar.Item>
-                </Navbar.Dropdown>
-              </Navbar.Item>
-              <Navbar.Item href="#">
-                    Second
-              </Navbar.Item>
-            </Navbar.Container>
-            <Navbar.Container position="end">
-              <Navbar.Item href="#">
-                    At the end
-              </Navbar.Item>
-            </Navbar.Container>
-          </Navbar.Menu>
-        </Navbar>
-      </Component>
-    );
-  }))
-  .add('Fixed', withInfo('Default Implementation')(() => {
-    class Component extends React.Component {
-      state = {
-        fixed: null,
-      }
-      render() {
-        const { children } = this.props;
-        const { fixed } = this.state;
-        return (
-          <Fragment>
-            {React.cloneElement(children, { fixed })}
-
-            <div style={{ height: '150vh' }}>
-              <Field kind="group">
-                <Control>
-                  <Button onClick={() => this.setState({ fixed: 'top' })}>Fixed Top</Button>
-                </Control>
-                <Control>
-                  <Button onClick={() => this.setState({ fixed: 'bottom' })}>Fixed Botton</Button>
-                </Control>
-                <Control>
-                  <Button onClick={() => this.setState({ fixed: undefined })}>Normal</Button>
-                </Control>
-              </Field>
-            </div>
-          </Fragment>
-        );
-      }
-    }
+  .add('Fixed', (() => {
     return (
-      <Component>
-        <Navbar>
+      <div style={{ height: '150vh' }}>
+        <Navbar fixed={select('Fixed', { default: null, top: 'top', bottom: 'bottom' })}>
           <Navbar.Brand>
             <Navbar.Item renderAs="a" href="#">
               <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28" />
@@ -192,6 +96,6 @@ storiesOf('Navbar', module)
             </Navbar.Container>
           </Navbar.Menu>
         </Navbar>
-      </Component>
+      </div>
     );
   }));
diff --git a/src/components/notification/notification.story.js b/src/components/notification/notification.story.js
index 107b1782..baf33dcf 100644
--- a/src/components/notification/notification.story.js
+++ b/src/components/notification/notification.story.js
@@ -1,14 +1,13 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Notification from '.';
-import Button from '../button';
-import Section from '../section';
+import Notification from 'react-bulma-components/lib/components/notification';
+import Button from 'react-bulma-components/lib/components/button';
+import Section from 'react-bulma-components/lib/components/section';
 
 storiesOf('Notification', module)
-  .add('Default', withInfo()(() => (
+  .add('Default', (() => (
     <Section>
       <Notification>
           Lorem ipsum dolor sit amet, consectetur
diff --git a/src/components/pagination/pagination.story.js b/src/components/pagination/pagination.story.js
index e27dff07..19187bc5 100644
--- a/src/components/pagination/pagination.story.js
+++ b/src/components/pagination/pagination.story.js
@@ -1,22 +1,19 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Pagination from '.';
+import Pagination from 'react-bulma-components/lib/components/pagination';
 
 storiesOf('Pagination', module)
   .addDecorator(story => (
-    <div style={{ margin: 50, marginTop: 100 }}>
-      {story()}
-    </div>
+    <div style={{margin: 50}}>{story()}</div>
   ))
-  .add('Default', withInfo('')(() => (
+  .add('Default', (() => (
     <Pagination current={3} total={5} delta={1} />
   )))
-  .add('Without page number', withInfo('')(() => (
+  .add('Without page number', (() => (
     <Pagination current={3} total={5} delta={0} />
   )))
-  .add('Without prev/next button', withInfo('')(() => (
+  .add('Without prev/next button', (() => (
     <Pagination showPrevNext={false} current={3} total={5} delta={1} />
   )));
diff --git a/src/components/panel/panel.story.js b/src/components/panel/panel.story.js
index 829d1264..5d5e06bd 100644
--- a/src/components/panel/panel.story.js
+++ b/src/components/panel/panel.story.js
@@ -1,12 +1,10 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
-
-import Panel from '.';
-import { Control, Input, Checkbox } from '../form';
-import Icon from '../icon';
-import Button from '../button';
+import Panel from 'react-bulma-components/lib/components/panel';
+import { Control, Input, Checkbox } from 'react-bulma-components/lib/components/form';
+import Icon from 'react-bulma-components/lib/components/icon';
+import Button from 'react-bulma-components/lib/components/button';
 
 storiesOf('Panel', module)
   .addDecorator(story => (
@@ -14,7 +12,7 @@ storiesOf('Panel', module)
       {story()}
     </div>
   ))
-  .add('Default', withInfo()(() => (
+  .add('Default', (() => (
     <Panel>
       <Panel.Header>
         repositories
diff --git a/src/components/progress/progress.story.js b/src/components/progress/progress.story.js
index d67167c0..f053ffa6 100644
--- a/src/components/progress/progress.story.js
+++ b/src/components/progress/progress.story.js
@@ -1,12 +1,11 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Progress from '.';
+import Progress from 'react-bulma-components/lib/components/progress';
 
 storiesOf('Progress', module)
-  .add('Default', withInfo()(() => (
+  .add('Default', (() => (
     <div>
       <Progress max={100} value={15} color="primary" size="small" />
       <Progress max={100} value={15} color="info" />
diff --git a/src/components/section/section.story.js b/src/components/section/section.story.js
index 868318dd..bd96ee97 100644
--- a/src/components/section/section.story.js
+++ b/src/components/section/section.story.js
@@ -1,14 +1,13 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Section from '.';
-import Container from '../container';
-import Heading from '../heading';
+import Section from 'react-bulma-components/lib/components/section';
+import Container from 'react-bulma-components/lib/components/container';
+import Heading from 'react-bulma-components/lib/components/heading';
 
 storiesOf('Section', module)
-  .add('Default', withInfo()(() => (
+  .add('Default', (() => (
     <div>
       <Section>
         <Container>
@@ -44,7 +43,7 @@ storiesOf('Section', module)
       </Section>
     </div>
   )))
-  .add('Medium', withInfo()(() => (
+  .add('Medium', (() => (
     <div>
       <Section size="medium">
         <Container>
@@ -72,7 +71,7 @@ storiesOf('Section', module)
       </Section>
     </div>
   )))
-  .add('Large', withInfo()(() => (
+  .add('Large', (() => (
     <div>
       <Section size="large">
         <Container>
diff --git a/src/components/table/table.story.js b/src/components/table/table.story.js
index 04d0046b..6724cc73 100644
--- a/src/components/table/table.story.js
+++ b/src/components/table/table.story.js
@@ -1,12 +1,10 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
-
-import Table from '.';
+import Table from 'react-bulma-components/lib/components/table';
 
 storiesOf('Table', module)
-  .add('Default', withInfo()(() => (
+  .add('Default', (() => (
     <Table>
       <thead>
         <tr>
diff --git a/src/components/tabs/tabs.story.js b/src/components/tabs/tabs.story.js
index 06e0fc64..e5334628 100644
--- a/src/components/tabs/tabs.story.js
+++ b/src/components/tabs/tabs.story.js
@@ -1,9 +1,9 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Tabs from '.';
+import { select, boolean } from '@storybook/addon-knobs';
+import Tabs from 'react-bulma-components/lib/components/tabs';
 
 storiesOf('Tabs', module)
   .addDecorator(story => (
@@ -11,8 +11,12 @@ storiesOf('Tabs', module)
       {story()}
     </div>
   ))
-  .add('Default', withInfo()(() => (
-    <Tabs type="boxed">
+  .add('Default', (() => (
+    <Tabs
+      type={select('Tab type', {boxed: 'boxed', toggle: 'toggle', 'toggle-rounded': 'toggle-rounded' }, 'boxed')}
+      fullwidth={boolean('Full width', false)}
+      align={select('Align', { Default: null, centered: 'centered', right: 'right' })}
+    >
       <Tabs.Tab active>
         Test
       </Tabs.Tab>
diff --git a/src/components/tag/tag.story.js b/src/components/tag/tag.story.js
index 357050dc..41eb0b14 100644
--- a/src/components/tag/tag.story.js
+++ b/src/components/tag/tag.story.js
@@ -1,10 +1,9 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Tag from '.';
-import { Field, Control } from '../form';
+import Tag from 'react-bulma-components/lib/components/tag';
+import { Field, Control } from 'react-bulma-components/lib/components/form';
 
 storiesOf('Tag', module)
   .addDecorator(story => (
@@ -12,7 +11,7 @@ storiesOf('Tag', module)
       {story()}
     </div>
   ))
-  .add('Default', withInfo()(() => (
+  .add('Default', (() => (
     <Tag>
       Tag Text
     </Tag>
@@ -36,7 +35,7 @@ storiesOf('Tag', module)
       </Tag>
     </Tag.Group>
   ))
-  .add('Group Tags without gap', withInfo()(() => (
+  .add('Group Tags without gap', (() => (
     <div>
       <Tag.Group gapless>
         <Tag>
@@ -54,7 +53,7 @@ storiesOf('Tag', module)
       </Tag.Group>
     </div>
   )))
-  .add('Group Tags without gap multiline', withInfo()(() => (
+  .add('Group Tags without gap multiline', (() => (
     <div>
       <Field multiline kind="group">
         <Control>
@@ -90,7 +89,7 @@ storiesOf('Tag', module)
       </Field>
     </div>
   )))
-  .add('Others', withInfo()(() => (
+  .add('Others', (() => (
     <Tag.Group>
       <Tag rounded>
         Rounded
diff --git a/src/components/tile/tile.story.js b/src/components/tile/tile.story.js
index 86c52bdd..51037b72 100644
--- a/src/components/tile/tile.story.js
+++ b/src/components/tile/tile.story.js
@@ -1,16 +1,15 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 
-import Tile from '.';
-import Heading from '../heading';
-import Image from '../image';
-import Section from '../section';
-import Box from '../box';
+import Tile from 'react-bulma-components/lib/components/tile';
+import Heading from 'react-bulma-components/lib/components/heading';
+import Image from 'react-bulma-components/lib/components/image';
+import Section from 'react-bulma-components/lib/components/section';
+import Box from 'react-bulma-components/lib/components/box';
 
 storiesOf('Tile', module)
-  .add('Default', withInfo()(() => (
+  .add('Default', (() => (
     <Section>
       <Box>
         <Tile kind="ancestor">