[WIP] User creation

Author: jellydn

.eslintrc

@@ -15,7 +15,7 @@
   },
   "env": {
     "es6": true,
-    "node": false
+    "node": true
   },
   "rules": {
     "prettier/prettier": "error"

.storybook/addons.js

@@ -0,0 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+import "@storybook/addon-actions/register";
+import "@storybook/addon-links/register";

.storybook/config.js

@@ -0,0 +1,9 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+import { configure } from "@storybook/react";
+
+function loadStories() {
+  require("../stories");
+}
+
+configure(loadStories, module);

.travis.yml

@@ -0,0 +1,9 @@
+language: node_js
+node_js:
+  - 6
+cache:
+  directories:
+    - node_modules
+script:
+  - npm run build
+  - npm test

README.md

@@ -7,3 +7,5 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
  # Dependence library
  * [Rebass](http://jxnblk.com/rebass/)
+ * [react-snapshot](https://www.npmjs.com/package/react-snapshot)
+ * [styled-components](https://github.com/styled-components/styled-components)

package.json

@@ -1,21 +1,31 @@
 {
   "name": "react-users-crud-demo",
+  "homepage": "https://jellydn.github.io/react-users-crud-demo",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "gh-pages": "^1.0.0",
+    "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-scripts": "1.0.11",
-    "rebass": "^1.0.4"
+    "react-snapshot": "^2.0.0-1",
+    "rebass": "^1.0.4",
+    "styled-components": "^2.1.2"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "react-scripts build && react-snapshot",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
-    "precommit": "lint-staged"
+    "precommit": "lint-staged",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
   },
   "devDependencies": {
+    "@storybook/react": "^3.2.5",
     "eslint-config-prettier": "^2.3.0",
     "eslint-plugin-prettier": "^2.2.0",
     "eslint-plugin-react": "^7.2.1",

src/App.css

@@ -1,14 +1,19 @@
-import React, { Component } from "react";
-import { Provider, Heading, Button } from "rebass";
-import "./App.css";
+import React, { PureComponent } from 'react';
+import { Provider } from 'rebass';
+import { injectGlobal } from 'styled-components';
+import Users from './containers/Users';
 
-class App extends Component {
+injectGlobal`
+  * { box-sizing: border-box; }
+  body { margin: 0; }
+`;
+
+class App extends PureComponent {
   render() {
     return (
       <div className="App">
         <Provider>
-          <Heading>Simple Users CRUD</Heading>
-          <Button>Rebass</Button>
+          <Users />
         </Provider>
       </div>
     );

src/App.js

@@ -0,0 +1,57 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Container, Row, Input, Button } from 'rebass';
+
+class UserCreation extends PureComponent {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    age: PropTypes.number.isRequired,
+    nickname: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onSave: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired
+  };
+
+  static defaultProps = {
+    name: '',
+    age: 10,
+    nickname: '',
+    onChange: (field, value) => {},
+    onSave: user => {},
+    onCancel: () => {}
+  };
+
+  render() {
+    const { age, name, nickname } = this.props;
+
+    return (
+      <Container>
+        <Row>
+          <Input
+            placeholder="Name"
+            name="name"
+            value={name}
+            onChange={evt => this.props.onChange('name', evt.target.value)}
+          />
+          <Input
+            type="number"
+            placeholder="0"
+            name="age"
+            value={age}
+            onChange={evt => this.props.onChange('age', evt.target.value)}
+          />
+          <Input
+            placeholder="Nickname"
+            name="nickname"
+            value={nickname}
+            onChange={evt => this.props.onChange('nickname', evt.target.value)}
+          />
+          <Button onClick={this.props.onSave} children="Save" />
+          <Button onClick={this.props.onCancel} children="Cancel" />
+        </Row>
+      </Container>
+    );
+  }
+}
+
+export default UserCreation;

src/components/UserCreation/index.js

@@ -0,0 +1,58 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Row, Column, Button } from 'rebass';
+
+class UserItem extends Component {
+  static propTypes = {
+    id: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+    age: PropTypes.number.isRequired,
+    nickname: PropTypes.string.isRequired,
+    isEdit: PropTypes.bool.isRequired
+  };
+
+  static defaultProps = {
+    id: 0,
+    name: '',
+    age: 0,
+    nickname: '',
+    isEdit: false
+  };
+
+  renderAction = isEdit => {
+    if (isEdit) {
+      return (
+        <Column>
+          <Button children="Edit" />
+          <Button children="Cancel" />
+        </Column>
+      );
+    }
+    return (
+      <Column>
+        <Button children="Edit" />
+        <Button children="Delete" />
+      </Column>
+    );
+  };
+
+  render() {
+    const { id, name, age, nickname, isEdit } = this.props;
+    return (
+      <Row key={`${id}-${nickname}`}>
+        <Column>
+          {name}
+        </Column>
+        <Column>
+          {age}
+        </Column>
+        <Column>
+          {nickname}
+        </Column>
+        {this.renderAction(isEdit)}
+      </Row>
+    );
+  }
+}
+
+export default UserItem;