From a90b98111f09fb77bfa587ab721c4ddb9158adc8 Mon Sep 17 00:00:00 2001 From: Semigradsky Date: Mon, 30 Mar 2015 13:38:05 +0300 Subject: [PATCH] Added example --- README.md | 2 ++ examples/README.md | 9 ++++++ examples/global.css | 62 ++++++++++++++++++++++++++++++++++++ examples/index.html | 13 ++++++++ examples/login/app.css | 4 +++ examples/login/app.js | 65 ++++++++++++++++++++++++++++++++++++++ examples/login/index.html | 14 ++++++++ examples/webpack.config.js | 48 ++++++++++++++++++++++++++++ package.json | 12 ++++--- 9 files changed, 225 insertions(+), 4 deletions(-) create mode 100644 examples/README.md create mode 100644 examples/global.css create mode 100644 examples/index.html create mode 100644 examples/login/app.css create mode 100644 examples/login/app.js create mode 100644 examples/login/index.html create mode 100644 examples/webpack.config.js diff --git a/README.md b/README.md index 47e64ea..9173b0b 100644 --- a/README.md +++ b/README.md @@ -77,6 +77,8 @@ The main concept is that forms, inputs and validation is done very differently a ## How to use +See `examples` folder for live examples. + #### Formsy gives you a form straight out of the box ```javascript diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 0000000..0b43c49 --- /dev/null +++ b/examples/README.md @@ -0,0 +1,9 @@ +Formsy React Examples +===================== + +To run and development examples: + +1. Clone this repo +2. Run `npm install` +3. Start the development server with `npm run examples` +4. Point your browser to http://localhost:8080 \ No newline at end of file diff --git a/examples/global.css b/examples/global.css new file mode 100644 index 0000000..5808257 --- /dev/null +++ b/examples/global.css @@ -0,0 +1,62 @@ +body { + font-family: "Helvetica Neue", Arial; + font-weight: 200; +} + +h1, h2, h3 { + font-weight: 100; +} + +a { + color: hsl(200, 50%, 50%); +} + +a.active { + color: hsl(20, 50%, 50%); +} + +.breadcrumbs a { + text-decoration: none; +} + +form { + padding: 15px; + border: 1px solid black; +} + +.form-group { + margin-bottom: 15px; +} + +.form-group label { + display: inline-block; + max-width: 100%; + margin-bottom: 5px; + font-weight: 700; +} + +.form-group input { + display: block; + width: 100%; + height: 34px; + padding: 6px 12px; + font-size: 14px; + line-height: 1.42857143; + color: #555; + background-color: #FFF; + background-image: none; + border: 1px solid #CCC; + border-radius: 4px; + box-sizing: border-box; +} + +.validation-error { + color: red; + margin-top: 5px; + display: inline-block; +} + +button { + padding: 10px 15px; + border-radius: 4px; +} \ No newline at end of file diff --git a/examples/index.html b/examples/index.html new file mode 100644 index 0000000..fd76d10 --- /dev/null +++ b/examples/index.html @@ -0,0 +1,13 @@ + + + + Formsy React Examples + + + +

Formsy React Examples

+ + + \ No newline at end of file diff --git a/examples/login/app.css b/examples/login/app.css new file mode 100644 index 0000000..32b2cda --- /dev/null +++ b/examples/login/app.css @@ -0,0 +1,4 @@ +.login { + width: 400px; + margin: 0 auto; +} \ No newline at end of file diff --git a/examples/login/app.js b/examples/login/app.js new file mode 100644 index 0000000..8b1a4f7 --- /dev/null +++ b/examples/login/app.js @@ -0,0 +1,65 @@ +var React = require('react'); +var Formsy = require('./../..'); + +var App = React.createClass({ + getInitialState: function() { + return { canSubmit: false }; + }, + submit: function (data) { + alert(JSON.stringify(data, null, 4)); + }, + enableButton: function () { + this.setState({ + canSubmit: true + }); + }, + disableButton: function () { + this.setState({ + canSubmit: false + }); + }, + render: function () { + return ( + + + + + + ); + } +}); + +var MyOwnInput = React.createClass({ + + // Add the Formsy Mixin + mixins: [Formsy.Mixin], + + // setValue() will set the value of the component, which in + // turn will validate it and the rest of the form + changeValue: function (event) { + this.setValue(event.currentTarget.value); + }, + render: function () { + + // Set a specific className based on the validation + // state of this component. showRequired() is true + // when the value is empty and the required prop is + // passed to the input. showError() is true when the + // value typed is invalid + var className = this.props.className + ' ' + (this.showRequired() ? 'required' : this.showError() ? 'error' : null); + + // An error message is returned ONLY if the component is invalid + // or the server has returned an error message + var errorMessage = this.getErrorMessage(); + + return ( +
+ + + {errorMessage} +
+ ); + } +}); + +React.render(, document.getElementById('example')); \ No newline at end of file diff --git a/examples/login/index.html b/examples/login/index.html new file mode 100644 index 0000000..755fd78 --- /dev/null +++ b/examples/login/index.html @@ -0,0 +1,14 @@ + + + + Login Example + + + + +

Formsy React Examples / Login

+
+ + + + \ No newline at end of file diff --git a/examples/webpack.config.js b/examples/webpack.config.js new file mode 100644 index 0000000..eb06ae3 --- /dev/null +++ b/examples/webpack.config.js @@ -0,0 +1,48 @@ +var fs = require('fs'); +var path = require('path'); +var webpack = require('webpack'); + +function isDirectory(dir) { + return fs.lstatSync(dir).isDirectory(); +} + +module.exports = { + + devtool: 'inline-source-map', + + entry: fs.readdirSync(__dirname).reduce(function (entries, dir) { + var isDraft = dir.charAt(0) === '_'; + + if (!isDraft && isDirectory(path.join(__dirname, dir))) + entries[dir] = path.join(__dirname, dir, 'app.js'); + + return entries; + }, {}), + + output: { + path: 'examples/__build__', + filename: '[name].js', + chunkFilename: '[id].chunk.js', + publicPath: '/__build__/' + }, + + module: { + loaders: [ + { test: /\.js$/, exclude: /node_modules/, loader: 'jsx-loader' } + ] + }, + + resolve: { + alias: { + 'react-router': '../../modules/index' + } + }, + + plugins: [ + new webpack.optimize.CommonsChunkPlugin('shared.js'), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') + }) + ] + +}; \ No newline at end of file diff --git a/package.json b/package.json index caa662e..250b2e6 100644 --- a/package.json +++ b/package.json @@ -3,12 +3,13 @@ "version": "0.9.0", "description": "A form input builder and validator for React JS", "repository": { - "type": "git", - "url": "https://github.com/christianalfoni/formsy-react.git" + "type": "git", + "url": "https://github.com/christianalfoni/formsy-react.git" }, "main": "src/main.js", "scripts": { - "test": "./node_modules/.bin/jasmine-node ./specs" + "test": "./node_modules/.bin/jasmine-node ./specs", + "examples": "webpack-dev-server --config examples/webpack.config.js --content-base examples" }, "author": "Christian Alfoni", "license": "MIT", @@ -24,10 +25,13 @@ "gulp-streamify": "0.0.5", "gulp-uglify": "^0.3.1", "gulp-util": "^3.0.0", + "jsx-loader": "^0.12.2", "phantomjs": "^1.9.12", "reactify": "^1.1.0", "vinyl-source-stream": "^0.1.1", - "watchify": "^2.1.1" + "watchify": "^2.1.1", + "webpack": "^1.7.3", + "webpack-dev-server": "^1.7.0" }, "peerDependencies": { "react": "^0.12.2 || ^0.13.1"