improve imports on stories

haflinger · Jul 3, 2018 · 7d572f1 · 7d572f1
1 parent 19f3c2b
commit 7d572f1
Show file tree

Hide file tree

Showing 29 changed files with 173 additions and 363 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>