small polish and storybook

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /\.stories\.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@emotion/core": "^10.0.14",
     "@emotion/styled": "^10.0.14",
+    "@storybook/react": "^5.1.9",
     "babel-plugin-emotion": "^10.0.14",
     "react": "^16.8.6",
     "styled-system": "^5.0.12"
@@ -14,6 +15,10 @@
     "@babel/core": "^7.4.5",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
+    "@storybook/addon-actions": "^5.1.9",
+    "@storybook/addon-links": "^5.1.9",
+    "@storybook/addons": "^5.1.9",
+    "babel-loader": "^8.0.6",
     "rollup": "^1.16.4",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.0.1",
@@ -27,6 +32,8 @@
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "scripts": {
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   }
 }

src/Avatar.js

@@ -4,7 +4,7 @@ import withDefaultProps from './withDefaultProps'
 const defaultProps = {
   borderRadius: 3,
   size: 40,
-  alt: ''
+  alt: '',
 }
 
 export default withDefaultProps(defaultProps, 'img')`

src/Badge.js

@@ -0,0 +1 @@
+// Not yet implemented

src/Box.js

@@ -3,12 +3,12 @@ import Flex from './Flex'
 import withDefaultProps from './withDefaultProps'
 
 const defaultProps = {
-  borderRadius: 3
+  borderRadius: 3,
 }
 
 export default withDefaultProps(defaultProps, Flex)`
+  ${border};
   ${borderRadius};
   ${typography};
-  ${border};
   ${zIndex};
 `

src/Button.js

@@ -4,15 +4,15 @@ import {
   space,
   border,
   flexbox,
-  color
+  color,
 } from 'styled-system'
 import withDefaultProps from './withDefaultProps'
 
 const defaultProps = {
   disabled: false,
   border: 0,
   p: 2,
-  borderRadius: 3
+  borderRadius: 3,
 }
 
 export default withDefaultProps(defaultProps, 'button')`
@@ -22,7 +22,7 @@ export default withDefaultProps(defaultProps, 'button')`
   ${flexbox};
   ${size};
   ${space};
-  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   display: flex;
-  opacity: ${props => (props.disabled ? 0.5 : 1)};
+  opacity: ${(props) => (props.disabled ? 0.5 : 1)};
 `

src/Dropdown.js

@@ -0,0 +1 @@
+// Not yet implemented

src/Flex.js

@@ -4,9 +4,9 @@ import withDefaultProps from './withDefaultProps'
 const defaultProps = {}
 
 export default withDefaultProps(defaultProps, 'div')`
+  ${color};
   ${flexbox};
   ${layout};
   ${space};
-  ${color};
   display: flex;
 `

src/Input.js

@@ -5,12 +5,12 @@ const defaultProps = {
   borderRadius: 3,
   width: 120,
   p: 2,
-  border: `1px solid #e7e7e7`
+  border: `1px solid #e7e7e7`,
 }
 
 export default withDefaultProps(defaultProps, 'input')`
-  ${borderRadius};
   ${border};
+  ${borderRadius};
   ${layout};
   ${space};
 `

src/Text.js

@@ -1,11 +1,12 @@
-import { layout, space, typography } from 'styled-system'
+import { layout, space, typography, color } from 'styled-system'
 import withDefaultProps from './withDefaultProps'
 
 const defaultProps = {}
 
 export default withDefaultProps(defaultProps, 'div')`
+  ${color};
   ${layout};
-  ${props => props.textTransform && `text-transform: ${props.textTransform};`}
+  ${(props) => props.textTransform && `text-transform: ${props.textTransform};`}
   ${space};
   ${typography};
 `

src/Tooltip.js

@@ -1,4 +1,5 @@
-// Work in Progress
+// Not yet (fully) implemented
+
 import React from 'react'
 import styled from '@emotion/styled'
 

stories/Avatar.stories.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { Avatar } from '../dist/index.es'
+
+storiesOf('Avatar', module)
+  .add('default', () => <Avatar src="http://placekeanu.com/200/200" alt="" />)
+  .add('with size', () => (
+    <Avatar size={80} src="http://placekeanu.com/200/200" alt="" />
+  ))
+  .add('with size/border', () => (
+    <Avatar
+      size={180}
+      borderRadius="50%"
+      src="http://placekeanu.com/200/200"
+      alt=""
+    />
+  ))

stories/Button.stories.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { Button } from '../dist/index.es'
+
+storiesOf('Button', module)
+  .add('default', () => (
+    <Button onClick={action('clicked')}>Hello Button</Button>
+  ))
+  .add('with colors', () => (
+    <Button onClick={action('clicked')} bg="#000" color="#fff">
+      Hello Button
+    </Button>
+  ))

stories/Text.stories.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { Text } from '../dist/index.es'
+
+storiesOf('Text', module)
+  .add('default', () => <Text>Hello Text</Text>)
+  .add('with colors', () => <Text color="#cc343d">Hello Text</Text>)
+  .add('with fontSize/Weight', () => (
+    <Text fontSize={24} fontWeight={600}>
+      Hello Text
+    </Text>
+  ))

stories/Tooltip.stories.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { Tooltip, Text, Position } from '../dist/index.es'
+
+storiesOf('Tooltip', module).add('default', () => (
+  <Position position="relative" m={5}>
+    <Tooltip text="Tooltip text">
+      <Text>Hello Tooltip</Text>
+    </Tooltip>
+  </Position>
+))