first commit

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react", "es2015", "stage-1"]
+}

.gitignore

@@ -0,0 +1,8 @@
+/node_modules
+bundle.js
+npm-debug.log
+index.html
+
+# IntelliJ
+*.iml
+/.idea

LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Luke Haas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,20 @@
+# Regex Hub
+
+The project is hosted here: https://projects.lukehaas.me/regexhub
+
+### Adding a new pattern
+
+The patterns are contained in the file src/data/index.js
+
+Each pattern requires the following details:
+- name
+- regex
+- description
+- tags
+
+
+
+
+### License
+
+[MIT License](http://dsf.com)

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "redux-simple-starter",
+  "version": "1.0.0",
+  "description": "Simple starter package for Redux with React and Babel support",
+  "main": "index.js",
+  "repository": "git@github.com:StephenGrider/ReduxSimpleStarter.git",
+  "scripts": {
+    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
+    "test:watch": "npm run test -- --watch"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-core": "^6.2.1",
+    "babel-loader": "^6.2.0",
+    "babel-preset-es2015": "^6.1.18",
+    "babel-preset-react": "^6.1.18",
+    "chai": "^3.5.0",
+    "chai-jquery": "^2.0.0",
+    "css-loader": "^0.26.0",
+    "jquery": "^2.2.1",
+    "jsdom": "^8.1.0",
+    "mocha": "^2.4.5",
+    "node-sass": "^3.13.0",
+    "react-addons-test-utils": "^0.14.7",
+    "sass-loader": "^4.0.2",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.12.9",
+    "webpack-dev-server": "^1.14.0"
+  },
+  "dependencies": {
+    "babel-preset-stage-1": "^6.1.18",
+    "lodash": "^3.10.1",
+    "react": "^0.14.3",
+    "react-dom": "^0.14.3",
+    "react-redux": "^4.0.0",
+    "react-router": "^2.0.1",
+    "redux": "^3.0.4"
+  }
+}

src/components/app.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import Regex from './regex';
+
+import { patterns } from '../data';
+
+export default class App extends Component {
+
+  renderPatterns() {
+    var i = 0,z = 0,
+      sortedData = [[],[],[]],
+      index = 0;
+
+    for(var j = 0;j < patterns.length;j++) {
+      if(index%3===0) {
+        index = 0;
+      }
+
+      sortedData[index].push(patterns[j]);
+      index++;
+    }
+
+    return sortedData.map((data) => {
+
+      i++;
+      var panels = data.map((props) => {
+        z++;
+        return <Regex {...props} key={z} />
+      });
+      return (
+        <div className="col-xs-12 col-sm-6 col-md-4" key={i}>
+           {panels}
+        </div>
+      );
+    });
+  }
+  render() {
+    return (
+      <div className="row">{this.renderPatterns()}</div>
+    );
+  }
+}

src/components/regex.js

@@ -0,0 +1,118 @@
+import React, { Component } from 'react';
+//import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+
+class Regex extends Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			editableRegex: props.regex.toString(),
+			test:"",
+			output:false,
+			open:false
+		};
+	}
+	handleRegexChange(val) {
+
+
+		this.setState({
+			editableRegex:val
+		},this.evaluateOutput);
+
+	}
+	handleTestChange(val) {
+
+		this.setState({
+			test:val
+		},this.evaluateOutput);
+
+	}
+	evaluateOutput() {
+
+		if(this.state.test.length>0 && this.state.editableRegex.length>0) {
+			var editableRegex = this.state.editableRegex;
+
+
+			var flags = /[^\/]+$/.exec(editableRegex);
+			if(!flags) {
+				flags = "";
+			}
+			editableRegex = editableRegex.replace(/[^\/]+$/, "");
+
+			var reg = new RegExp(eval(editableRegex),flags);
+
+			var out;
+			try {
+				out = reg.exec(this.state.test);
+			} catch(e) {
+				out = "Invalid regex";
+			}
+
+			if(!out) {
+				out = [];
+				out[0] = "null";
+			} else if(out[0]==="") {
+				out[0] = "null";
+			}
+
+			this.setState({
+				output:out[0]
+			});
+		} else {
+			this.setState({
+				output:false
+			});
+		}
+
+
+	}
+	handleOpen(e) {
+		e.preventDefault();
+
+		if(this.state.open) {
+			this.setState({
+				open:false
+			});
+		} else {
+			this.setState({
+				open:true
+			});
+		}
+	}
+	render() {
+		var output = <div className="output">Output:<br/>{this.state.output}</div>;
+		return (
+			<div className="panel panel-default">
+				<div className="panel-heading">
+					<a href="#" className={this.state.open ? "open" : "closed"} onClick={e => this.handleOpen(e)}>{this.props.name}</a>
+
+
+					<div className={this.state.open ? "desc" : "desc closed"}><p>{this.props.description}</p></div>
+
+				</div>
+				<div className="panel-body">
+					<input type="text" value={this.state.editableRegex} onChange={e => this.handleRegexChange(e.target.value)} />
+				</div>
+				<div className="panel-footer">
+					<form>
+						<input type="text" placeholder="Test string" value={this.state.test} onChange={e => this.handleTestChange(e.target.value)} />
+					</form>
+					{this.state.output ? output : ""}
+				</div>
+			</div>
+		);
+	}
+}
+
+export default Regex;
+
+/*
+
+Add reset button - once regex is edited the button will restore it?
+
+
+add search
+add details at the bottom for pull requests
+
+
+*/

src/data/index.js

@@ -0,0 +1,103 @@
+export const patterns = [{
+	name:"Date in format dd/mm/yyyy",
+	regex:/^([1-9]|0[1-9]|[12][0-9]|3[01])\D([1-9]|0[1-9]|1[012])\D(19[0-9][0-9]|20[0-9][0-9])$/,
+	description:"Will match dates with slashes or with spaces dd/mm/yyyy dd mm yyyy",
+	tags:"date time"
+},
+{
+	name:"HTML tags",
+	regex:/^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/,
+	description:"Match opening and closing HTML tags with content between",
+	tags:"markup,xml,html"
+},
+{
+	name:"Username",
+	regex:/^[a-z0-9_-]{3,16}$/,
+	description:"A string between 3 and 16 characters, allowing alphanumeric characters and hyphens and underscores",
+	tags:"username,validation"
+},
+{
+	name:"Password",
+	regex:/^[a-z0-9_-]{6,18}$/,
+	description:"A string between 6 and 18 characters, allowing alphanumeric characters and hypehns and underscores",
+	tags:"password,validation"
+},
+{
+	name:"Hex Value",
+	regex:/^#?([a-f0-9]{6}|[a-f0-9]{3})$/,
+	description:"Base 16 numbers, such as RGB values",
+	tags:"hex,color"
+},
+{
+	name:"URL Slug",
+	regex:/^[a-z0-9-]+$/,
+	description:"Match valid URL slugs",
+	tags:"URL"
+},
+{
+	name:"Email",
+	regex:/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,
+	description:"Match standards complient email addresses",
+	tags:"email,validation"
+},
+{
+	name:"URL",
+	regex:/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/,
+	description:"Match URL with optional protocal",
+	tags:"url,address,http"
+},
+{
+	name:"IP Address",
+	regex:/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
+	description:"Match IP v4 addresses",
+	tags:"tcpip,internet,address"
+},
+{
+	name:"Positive Integer",
+	regex:/^\d+$/,
+	descriptions:"Match whole numbers above zero",
+	tags:"number"
+},
+{
+	name:"Negative Integer",
+	regex:/^-\d+$/,
+	description:"Match whole numbers below zero",
+	tags:"number"
+},
+{
+	name:"Integer",
+	regex:/^-?\d+$/,
+	description:"Match whole numbers, above or below zero",
+	tags:"number"
+},
+{
+	name:"Positive number",
+	regex:/^\d*\.?\d+$/,
+	description:"Match integers or floats that are positive",
+	tags:"float"
+},
+{
+	name:"Negative number",
+	regex:/^-\d*\.?\d+$/,
+	description:"Match integers or floats that are negative",
+	tags:"float"
+},
+{
+	name:"Positive or negative number",
+	regex:/^-?\d*\.?\d+$/,
+	description:"Match integers or floats that are positive or negative",
+	tags:"float"
+},
+{
+	name:"Phone number",
+	regex:/^\+?[\d\s]{3,}$/,
+	description:"Match phone numbers at least 3 digits long",
+	tags:"validation"
+},
+{
+	name:"New line",
+	regex:/[\r\n]|$/,
+	description:"Match new lines within text",
+	tags:"text"
+}
+];

src/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { createStore, applyMiddleware } from 'redux';
+
+import App from './components/app';
+import reducers from './reducers';
+
+import './sass/style.scss';
+
+const createStoreWithMiddleware = applyMiddleware()(createStore);
+
+ReactDOM.render(
+  <Provider store={createStoreWithMiddleware(reducers)}>
+    <App />
+  </Provider>
+  , document.querySelector('.app'));

src/reducers/index.js

@@ -0,0 +1,7 @@
+import { combineReducers } from 'redux';
+
+const rootReducer = combineReducers({
+  state: (state = {}) => state
+});
+
+export default rootReducer;