Merge branch 'develop' of https://github.com/realworldreact/realworld…

…react into develop

.eslintrc

@@ -1,6 +1,8 @@
 {
   "parser": "babel-eslint",
 
+  "extends": ["prettier"],
+
   "parserOptions": {
     "ecmaVersion": 6,
     "sourceType": "module"
@@ -51,6 +53,7 @@
   },
 
   "rules": {
+    "prettier/prettier": "error",
     "react/jsx-uses-react": 2,
     "react/jsx-uses-vars": 2,
     "react/react-in-jsx-scope": 2,
@@ -176,14 +179,14 @@
     "no-extra-parens": [0],
     "one-var": [0],
     "operator-assignment": [0, "always"],
-    "operator-linebreak": [2, "before"],
+    "operator-linebreak": [0],
     "padded-blocks": [0],
     "quote-props": [0],
     "radix": [0],
     "semi": [2],
     "semi-spacing": [2, {"before": false, "after": true}],
     "sort-vars": [0],
-    "space-before-function-paren": [2, {"anonymous": "always", "named": "always"}],
+    "space-before-function-paren": [0],
     "space-before-blocks": [0, "always"],
     "space-in-brackets": [
       0, "never", {

package.json

@@ -9,7 +9,7 @@
     "develop": "gatsby develop",
     "build": "gatsby build",
     "serve": "gatsby serve",
-    "format": "prettier --trailing-comma es5 --single-quote --write \"src/**/*.js\"",
+    "format": "prettier --write \"src/**/*.js\"",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
@@ -22,11 +22,13 @@
     "polished": "^1.9.2",
     "react-helmet": "^5.2.0",
     "react-ripples": "^1.1.2",
-    "react-simple-dropdown": "^3.2.0"
+    "react-simple-dropdown": "^3.2.0",
+    "react-textarea-autosize": "^5.2.1"
   },
   "devDependencies": {
     "babel-eslint": "^8.2.1",
     "eslint": "^4.18.0",
+    "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-react": "^7.6.1",
     "prettier": "^1.10.2",

prettier.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  parser: 'babylon',
+  printWidth: 80,
+  semi: true,
+  singleQuote: true,
+  bracketSpacing: true
+};

src/components/common/Footer/index.js

@@ -11,12 +11,9 @@ const Footer = props => {
   const { theme, sheet, classes, className, ...etc } = props;
   return (
     <footer className={cx(classes.root, 'container', className)} {...etc}>
-      <div className='row'>
-        <div className='col-xs-12'>
-          <img
-            className={classes.logo}
-            src={logoReversed}
-          />
+      <div className="row">
+        <div className="col-xs-12">
+          <img className={classes.logo} src={logoReversed} />
         </div>
       </div>
     </footer>

src/components/common/Footer/styles.js

@@ -1,9 +1,9 @@
 export default () => ({
   root: {
-    padding: 20,
+    padding: 20
   },
   logo: {
     width: 100,
-    height: 100,
-  },
+    height: 100
+  }
 });

src/components/common/Header/index.js

@@ -14,13 +14,13 @@ const Header = props => {
   const { theme, sheet, classes, className, reversed, ...etc } = props;
   return (
     <header className={cx(classes.root, 'container', className)} {...etc}>
-      <div className='row'>
-        <div className='col-xs-3'>
-          <Link to='/'>
+      <div className="row">
+        <div className="col-xs-3">
+          <Link to="/">
             <img
               className={classes.logo}
               src={reversed ? logoReversed : logoAuto}
-              alt='Real World React'
+              alt="Real World React"
             />
           </Link>
         </div>
@@ -37,7 +37,7 @@ Header.propTypes = {
   /**
    * Set theme with reversed colors.
    */
-  reversed: PropTypes.bool,
+  reversed: PropTypes.bool
 };
 
 export default withStyles(styles)(Header);

src/components/common/Header/styles.js

@@ -1,26 +1,26 @@
 export default () => ({
   root: {
-    padding: 20,
+    padding: 20
   },
   logo: {
     display: 'inline-block',
-    height: 60,
+    height: 60
   },
   menu: {
     display: 'flex',
-    textAlign: 'right',
+    textAlign: 'right'
   },
   desktop: {
-    display: 'none',
+    display: 'none'
   },
 
   // small +
   '@media screen and (min-width: 48em)': {
     mobile: {
-      display: 'none',
+      display: 'none'
     },
     desktop: {
-      display: 'flex',
-    },
-  },
+      display: 'flex'
+    }
+  }
 });

src/components/forms/Button/index.js

@@ -8,12 +8,11 @@ import cx from 'classnames';
 import styles from './styles';
 
 class Button extends React.Component {
-
-  constructor () {
+  constructor() {
     super(...arguments);
   }
 
-  render () {
+  render() {
     const {
       theme,
       sheet,
@@ -37,10 +36,10 @@ class Button extends React.Component {
     );
   }
 
-  onClick = (ev) => {
+  onClick = ev => {
     ev.preventDefault();
     if (this.props.href) navigateTo(this.props.href);
-  }
+  };
 }
 
 Button.propTypes = {
@@ -57,7 +56,14 @@ Button.propTypes = {
   /**
    * Color palette for styles.
    */
-  palette: PropTypes.oneOf(['primary', 'secondary', 'inverted', 'text', 'alert', 'black']),
+  palette: PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'inverted',
+    'text',
+    'alert',
+    'black'
+  ]),
 
   /**
    * Button would be outlined.
@@ -72,11 +78,11 @@ Button.propTypes = {
   /**
    * Button content.
    */
-  children: PropTypes.any.isRequired,
+  children: PropTypes.any.isRequired
 };
 
 Button.defaultProps = {
-  palette: 'primary',
+  palette: 'primary'
 };
 
 export default withStyles(styles)(Button);

src/components/forms/Button/styles.js

@@ -1,12 +1,12 @@
-export default (theme) => ({
+export default theme => ({
   root: {
-    display: props => props.fullWidth ? 'block' : 'inline-block',
+    display: props => (props.fullWidth ? 'block' : 'inline-block'),
     overflow: 'hidden',
-    verticalAlign: 'middle',
+    verticalAlign: 'middle'
   },
   ripples: {
     width: '100%',
-    height: '100%',
+    height: '100%'
   },
   button: {
     display: 'inline-block',
@@ -25,20 +25,21 @@ export default (theme) => ({
     transition: 'all 200ms ease-out',
 
     color: props => theme.palette[props.palette].contrastText,
-    border: props => '2px solid '
-      + theme.palette[props.palette][props.outline ? 'contrastText' : 'base'],
-    backgroundColor: props => props.outline
-      ? 'transparent'
-      : theme.palette[props.palette].base,
+    border: props =>
+      '2px solid ' +
+      theme.palette[props.palette][props.outline ? 'contrastText' : 'base'],
+    backgroundColor: props =>
+      props.outline ? 'transparent' : theme.palette[props.palette].base,
 
     '&:hover': {
       color: props => props.outline && theme.palette[props.palette].light,
       borderColor: props => theme.palette[props.palette].light,
-      backgroundColor: props => !props.outline && theme.palette[props.palette].light,
+      backgroundColor: props =>
+        !props.outline && theme.palette[props.palette].light
     },
 
     '&::-moz-focus-inner': {
-      border: 'none',
-    },
-  },
+      border: 'none'
+    }
+  }
 });

src/components/forms/TextField/index.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from 'react-jss';
+import TextareaAutoize from 'react-textarea-autosize';
+import cx from 'classnames';
+
+import styles from './styles';
+
+const TextField = props => {
+  const {
+    theme,
+    sheet,
+    classes,
+    className,
+    palette,
+    reversed,
+    isTextarea,
+    type,
+    value,
+    onChange,
+    placeholder,
+    errorText,
+    fieldProps,
+    ...etc
+  } = props;
+  const cls = cx(classes.root, className);
+  const node = isTextarea ? TextareaAutoize : 'input';
+  return (
+    <div className={cls} {...etc}>
+      {React.createElement(node, {
+        type: node === 'input' ? type : null,
+        value,
+        onChange,
+        placeholder,
+        ...fieldProps,
+        className: cx(classes.field, fieldProps.className),
+      })}
+      {!!errorText && <div className={classes.errorText}>{errorText}</div>}
+    </div>
+  );
+};
+
+TextField.propTypes = {
+  /**
+   * Color palette.
+   */
+  palette: PropTypes.oneOf(['primary', 'secondary']),
+
+  /**
+   * If colors should be reversed.
+   */
+  reversed: PropTypes.bool,
+
+  /**
+   * If the field is a textarea.
+   */
+  isTextarea: PropTypes.bool,
+
+  /**
+   * If node 'input', its type.
+   */
+  type: PropTypes.oneOf(['text', 'number', 'email']),
+
+  /**
+   * Field value when controlled.
+   */
+  value: PropTypes.string,
+
+  /**
+   * Field onchange event handler.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Field placeholder text.
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * When the field has an error, show this text below it.
+   */
+  errorText: PropTypes.string,
+
+  /**
+   * Extra fields to pass to the encapsulated field element.
+   */
+  fieldProps: PropTypes.object,
+};
+
+TextField.defaultProps = {
+  type: 'text',
+  palette: 'primary',
+  fieldProps: {},
+};
+
+export default withStyles(styles)(TextField);