initial commit

Author: pfrazee

README.md

@@ -0,0 +1,15 @@
+# Form: Profile Name
+
+Set a user name (modal form)
+
+![screenshot.png](screenshot.png)
+
+```jsx
+import ModalBtn from 'patchkit-modal/btn'
+import FormProfileName from 'patchkit-form-profile-name'
+
+const onSubmit = (name, cb) => { console.log('submit', name); cb() }
+<ModalBtn className="fullheight" Form={FormProfileName} formProps={{currentValue: 'bob', className: 'text-center vertical-center', onSubmit: onSubmit}}>
+  <a className="btn highlighted">Click to open</a>
+</ModalBtn>
+```

demo.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import ModalBtn from 'patchkit-modal/btn'
+import FormProfileName from './index'
+
+export default class FormProfileNameDemo extends React.Component {
+  render() {
+    const onSubmit = (name, cb) => { console.log('submit', name); cb() }
+    return <div>
+      <h1>patchkit-form-profile-name</h1>
+      <section className="form-profile-name">
+        <header>&lt;FormProfileName&gt;</header>
+        <div className="content">
+          <ModalBtn className="fullheight" Form={FormProfileName} formProps={{currentValue: 'bob', className: 'text-center vertical-center', onSubmit: onSubmit}}><a className="btn highlighted">Click to open</a></ModalBtn>
+        </div>
+      </section>
+    </div>
+  }
+}

index.jsx

@@ -0,0 +1,73 @@
+import React from 'react'
+
+export default class FormProfileName extends React.Component {
+  static propTypes = {
+    setIsValid: React.PropTypes.func.isRequired,
+    onSubmit: React.PropTypes.func.isRequired,
+    currentValue: React.PropTypes.string,
+    className: React.PropTypes.string
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = this.validate(this.props.currentValue||'', true)
+  }
+
+  componentDidMount() {
+    this.validate(this.state.name) // emit isValid update
+  }
+
+  onChangeName(e) {
+    this.setState(this.validate(e.target.value))
+  }
+
+  validate (name, supressEmit) {
+    let badNameCharsRegex = /[^A-z0-9\._-]/
+    const emit = (b) => { !supressEmit && this.props.setIsValid(b) }
+    if (!name.trim()) {
+      emit(false)
+      return { error: false, isValid: false, name: name }
+    } else if (badNameCharsRegex.test(name)) {
+      emit(false)
+      return {
+        name: name,
+        error: 'We\'re sorry, your name can only include A-z 0-9 . _ - and cannot have spaces.',
+        isValid: false
+      }
+    } else if (name.slice(-1) == '.') {
+      emit(false)
+      return {
+        name: name,
+        error: 'We\'re sorry, your name cannot end with a period.',
+        isValid: false
+      }
+    } else {
+      emit(true)
+      return {
+        name: name,
+        error: false,
+        isValid: true
+      }
+    }
+  }
+
+  submit(cb) {
+    this.props.onSubmit(this.state.name, cb)
+  }
+
+  render() {
+    return <div className={this.props.className}>
+      <h1><span>What would you like to be called?</span></h1>
+      <form className="block" onSubmit={e=>e.preventDefault()}>
+        <fieldset>
+          <div>
+            <label>
+              <input type="text" onChange={this.onChangeName.bind(this)} value={this.state.name} />
+              { this.state.error ? <p className="error">{this.state.error}</p> : '' }
+            </label>
+          </div>
+        </fieldset>
+      </form>
+    </div>
+  }
+}

package.json

@@ -0,0 +1,54 @@
+{
+  "name": "patchkit-form-profile-name",
+  "version": "1.0.0",
+  "description": "Set a user name (modal form)",
+  "main": "index.jsx",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/patchkit/patchkit-form-profile-name.git"
+  },
+  "keywords": [
+    "react"
+  ],
+  "author": "Paul Frazee <[email protected]>",
+  "license": "GPL-3.0",
+  "bugs": {
+    "url": "https://github.com/patchkit/patchkit-form-profile-name/issues"
+  },
+  "homepage": "https://github.com/patchkit/patchkit-form-profile-name#readme",
+  "dependencies": {
+    "react": "^0.14.6"
+  },
+  "devDependencies": {
+    "babel": "^6.3.26",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-stage-0": "^6.3.13",
+    "babelify": "^7.2.0",
+    "browserify": "^13.0.0",
+    "patchkit-modal": "^1.0.3"
+  },
+  "browserify": {
+    "transform": [
+      [
+        "envify",
+        {
+          "global": true
+        }
+      ],
+      [
+        "babelify",
+        {
+          "presets": [
+            "es2015",
+            "stage-0",
+            "react"
+          ]
+        }
+      ]
+    ]
+  }
+}