started with login example

Author: dsumer

examples/components/TextInput.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import Input from '@cat-react/form/Input'
+
+@Input
+export default class TextInput extends React.Component {
+    onChange(event) {
+        this.props.setValue(event.target.value);
+    }
+
+    renderErrors() {
+        let errorMessages = [];
+        if (!this.props.isPristine()) {
+            errorMessages = this.props.getErrorMessages();
+        }
+
+        if (!errorMessages || errorMessages.length <= 0) {
+            return null;
+        }
+
+        return <ul>{errorMessages.map((message, i) => <li key={i}>{message}</li>)}</ul>;
+    }
+
+    render() {
+        let className = '';
+        if (!this.props.isPristine()) {
+            className = this.props.isValid() ? null : 'error';
+        }
+
+        // TODO: remove onBlur
+        return (
+            <label>
+                {this.props.label} {this.props.isRequired() ? '*' : null}
+                <input className={className}
+                       type="text"
+                       value={this.props.getValue()}
+                       onChange={this.onChange.bind(this)}
+                       onBlur={this.props.onBlur}/>
+                {this.renderErrors()}
+            </label>
+        );
+    }
+}

examples/login/app.js

@@ -1,9 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import Form from '@cat-react/form/Form';
+import TextInput from '../components/TextInput';
 
 class App extends React.Component {
     render() {
-        return <div>Login</div>;
+        return (
+            <Form>
+                <h1>Login</h1>
+                <TextInput label="Username" name="username" value="" validations={{isRequired: true}} />
+            </Form>
+        );
     };
 }
 

examples/webpack.config.js

@@ -7,7 +7,7 @@ module.exports = {
     entry: fs.readdirSync(__dirname).reduce(function (entries, dir) {
         const isDir = fs.lstatSync(path.join(__dirname, dir)).isDirectory();
 
-        if (isDir) {
+        if (isDir && dir !== 'components') {
             entries[dir] = path.join(__dirname, dir, 'app.js');
         }
 
@@ -26,7 +26,8 @@ module.exports = {
                 exclude: /node_modules/,
                 loader: 'babel-loader',
                 query: {
-                    presets: ['es2015', 'react']
+                    presets: ['es2015', 'react', 'stage-0'],
+                    plugins: ['transform-runtime', 'transform-class-properties', 'transform-decorators-legacy']
                 }
             }
         ]

package.json

@@ -21,6 +21,7 @@
         "babel-loader": "^7.1.2",
         "babel-plugin-transform-class-properties": "^6.24.1",
         "babel-plugin-transform-decorators-legacy": "^1.3.4",
+        "babel-plugin-transform-runtime": "^6.23.0",
         "babel-preset-es2015": "^6.24.1",
         "babel-preset-react": "^6.24.1",
         "babel-preset-stage-0": "^6.24.1",

yarn.lock

@@ -826,6 +826,12 @@ babel-plugin-transform-regenerator@^6.24.1:
   dependencies:
     regenerator-transform "^0.10.0"
 
+babel-plugin-transform-runtime@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.23.0.tgz#88490d446502ea9b8e7efb0fe09ec4d99479b1ee"
+  dependencies:
+    babel-runtime "^6.22.0"
+
 babel-plugin-transform-strict-mode@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"