import React from 'react';
import { storiesOf } from '@storybook/react';
import { checkA11y } from 'storybook-addon-a11y';
import { withInfo } from '@storybook/addon-info';
import { withKnobs, boolean } from '@storybook/addon-knobs/react';
import { action } from '@storybook/addon-actions';
import { Store, State } from '@sambego/storybook-state';
import styles from '@sambego/storybook-styles';
import { Box, Checkbox, Link, TextBody } from '../components';
import { baseStyles, centerStyles } from '../.storybook/styles';

const sizes = ['small', 'medium', 'large'];

const store = new Store({
  checked: false,
});

const handleOnChange = checked => {
  store.set({ checked });
  action(`onChange - checked: ${checked}`)();
};

storiesOf('Checkboxes', module)
  .addDecorator((story, context) => withInfo('common info')(story)(context))
  .addDecorator(checkA11y)
  .addDecorator(withKnobs)
  .addDecorator(styles({ ...baseStyles, ...centerStyles }))
  .add('sizes', () => (
    <Box>
      {sizes.map((size, key) => (
        <State store={store} key={key}>
          <Checkbox size={size} marginVertical={3} onChange={handleOnChange} disabled={boolean('Disabled', false)}/>
        </State>
      ))}
    </Box>
  ))
  .add('with labels', () => (
    <Box>
      {sizes.map((size, key) => (
        <State store={store} key={key}>
          <Checkbox size={size} marginVertical={3} onChange={handleOnChange} disabled={boolean('Disabled', false)} label={`I'm a ${size} Checkbox`}/>
        </State>
      ))}
    </Box>
  ))
  .add('with link in label', () => (
    <State store={store}>
      <Checkbox marginVertical={3} onChange={handleOnChange} disabled={boolean('Disabled', false)}>
        <TextBody>I'm a medium label with a <Link href="#" inherit={false}>link</Link> inside</TextBody>
      </Checkbox>
    </State>
  ));

@@ -352,62 +352,9 @@
 ort 
-styles from '@sambego/storybook-styles';%0Aimport %7B Box,
+%7B
  Che
@@ -411,20 +411,8 @@
 rt %7B
- baseStyles,
  cen
@@ -832,94 +832,55 @@
 .add
-Decorator(styles(%7B ...baseStyles, ...centerStyles %7D))%0A  .add('sizes', () =%3E (%0A    %3CBox
+('sizes', () =%3E (%0A    %3Cdiv style=%7BcenterStyles%7D
 %3E%0A  
@@ -1093,35 +1093,35 @@
       ))%7D%0A    %3C/
-Box
+div
 %3E%0A  ))%0A  .add('w
@@ -1146,19 +1146,40 @@
  (%0A    %3C
-Box
+div style=%7BcenterStyles%7D
 %3E%0A      
@@ -1433,11 +1433,11 @@
   %3C/
-Box
+div
 %3E%0A  
@@ -1472,24 +1472,57 @@
 l', () =%3E (%0A
+    %3Cdiv style=%7BcenterStyles%7D%3E%0A  
     %3CState s
@@ -1537,24 +1537,26 @@
 ore%7D%3E%0A      
+  
 %3CCheckbox ma
@@ -1637,16 +1637,18 @@
 alse)%7D%3E%0A
+  
         
@@ -1744,16 +1744,18 @@
 xtBody%3E%0A
+  
       %3C/
@@ -1764,24 +1764,26 @@
 eckbox%3E%0A    
+  
 %3C/State%3E%0A  )
@@ -1779,14 +1779,25 @@
 /State%3E%0A
+    %3C/div%3E%0A
   ));%0A

Update Checkbox stories to use the new centerStyles and not to use Box as wrapper