Merged develop

Author: Michiel87

.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.idea*
 
 npm-debug.log*
 yarn-debug.log*

.idea/workspace.xml

@@ -0,0 +1,14 @@
+import React, { useState } from 'react'
+
+interface StateContainerProps {
+    initialState?: any
+    children: any
+}
+
+export const StateContainer: React.FC<StateContainerProps> = ({ initialState = {}, children }) => {
+    const [state, setState] = useState(initialState)
+
+    return children(state, setState)
+}
+
+export default StateContainer

.storybook/StateContainer.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import StateContainer from './StateContainer'
+
+export const withState = (initialState = {}) => (storyFunc: any, context: any) => (
+    <StateContainer initialState={initialState}>
+        { (state: any, storeState: any) => {
+            context.state = state
+            context.storeState = storeState
+            return storyFunc()
+        }}
+    </StateContainer>
+)

.storybook/StateDecorator.tsx

@@ -5,7 +5,7 @@ import { configure, shallow } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
 import Checkbox from '.'
-import theme from '../../../theme'
+import theme from '../../../../theme'
 
 configure({ adapter: new Adapter() })
 

src/components/Input/Button/Button.test.tsx src/components/atoms/Input/Button/Button.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import styled from 'styled-components'
-import { Theme } from '../../../theme';
+import { Theme } from '../../../../theme';
 
 export interface IProps {
   checked: boolean

src/components/Input/Button/__snapshots__/Button.test.tsx.snap src/components/atoms/Input/Button/__snapshots__/Button.test.tsx.snap

@@ -1,18 +1,18 @@
-import React from 'react';
+import React from 'react'
 
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { withState } from '../../.storybook/StateDecorator'
 
-import TextInput from '../components/Input/TextInput'
-import Checkbox from '../components/Input/Checkbox'
-import Button from '../components/Input/Button'
-
-let textInputValue = "Hello there!"
+import TextInput from '../components/atoms/Input/TextInput'
+import Checkbox from '../components/atoms/Input/Checkbox'
+import Button from '../components/atoms/Input/Button'
 
 export default storiesOf('Input', module)
-  .add('TextInput', () => <TextInput value={textInputValue} onChange={(value) => {
-    textInputValue = value
-    action('New Value: ' + value)
+  .addDecorator(withState('Testing'))
+  .add('TextInput', ({ state, storeState }) => <TextInput value={state} onChange={(value) => {
+    storeState(value)
+    action('typing')(value)
   }}>Hello Button</TextInput>)
   .add('Checkbox', () => <Checkbox onClick={action('clicked')}/>)
   .add('Button', () => <Button onClick={action('clicked')}>Hello Button</Button>)