Merge pull request #24 from meriadec/master

Storybook

.babelrc

@@ -10,6 +10,7 @@
       }
     ],
     "flow",
+    "react",
     "stage-0"
   ],
   "plugins": [["module-resolver", { "root": ["src"] }]]

.storybook/config.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { configure, addDecorator } from '@storybook/react'
+import { ThemeProvider } from 'styled-components'
+
+import 'styles/global'
+import theme from 'styles/theme'
+
+const req = require.context('../src', true, /.stories.js$/)
+function loadStories() {
+  req.keys().forEach(filename => req(filename))
+}
+
+addDecorator(story => (
+  <ThemeProvider theme={theme}>
+    <div style={{ padding: 20 }}>{story()}</div>
+  </ThemeProvider>
+))
+
+configure(loadStories, module)

package.json

@@ -10,11 +10,13 @@
     "compile": "electron-webpack",
     "dist": "bash ./scripts/dist.sh && electron-builder",
     "dist:dir": "yarn dist --dir -c.compression=store -c.mac.identity=null",
-    "prettier": "prettier --write \"{src,webpack}/**/*.js\"",
+    "prettier": "prettier --write \"{src,webpack,.storybook}/**/*.js\"",
     "postinstall": "bash ./scripts/postinstall.sh",
     "release": "build",
     "flow": "flow",
-    "lint": "eslint src webpack"
+    "lint": "eslint src webpack .storybook",
+    "storybook": "start-storybook -p 4444",
+    "build-storybook": "build-storybook"
   },
   "electronWebpack": {
     "renderer": {
@@ -53,6 +55,11 @@
     "webpack": "^3.10.0"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^3.3.9",
+    "@storybook/addon-links": "^3.3.9",
+    "@storybook/addons": "^3.3.9",
+    "@storybook/react": "^3.3.9",
+    "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.1",
     "babel-loader": "^7.1.2",
     "babel-plugin-module-resolver": "^3.0.0",

src/components/base/Input/index.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components'
+
+export default styled.input`
+  padding: 10px 15px;
+  border: 1px solid ${p => p.theme.colors.mouse};
+  border-radius: 3px;
+  display: flex;
+  width: 100%;
+  color: ${p => p.theme.colors.steel};
+  background: ${p => p.theme.colors.white};
+
+  &::placeholder {
+    color: ${p => p.theme.colors.mouse};
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: rgba(0, 0, 0, 0.05) 0 2px 2px;
+  }
+`

src/components/base/Input/stories.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import Input from 'components/base/Input'
+
+const stories = storiesOf('Input', module)
+
+stories.add('basic', () => <Input placeholder="Foo bar" />)