Inital checkin

Author: Andrew Ross

README.md

@@ -0,0 +1,59 @@
+#Typings-React-Router
+
+This is typings for thee [react-router](https://github.com/reactjs/react-router)
+
+It's highly suggested to install with [typings](https://github.com/typings/typings) definition manager.
+Use the command `typings install react-router --save`.
+
+You're code should look pretty much the same the javascript with one exception.
+When a component is used with a `Route` component it injects several property values.
+To type this the `IInjectableProps` interface has all the properties defined that injecting will add.
+
+To use it extend your current Property interface with `IInjectableProps`.
+
+```javascript
+import React from 'react';
+import { render } from 'react-dom';
+import { Link, Router, Route, IInjectedProps } from 'react-router';
+
+class User extends React.Component<IInjectedProps,{}> {
+  render() {
+    let { userID } = this.props.params
+    let { query } = this.props.location
+    let age = query && query["showAge"] ? '33' : ''
+
+    return (
+      <div className="User">
+        <h1>User id: {userID}</h1>
+        {age}
+      </div>
+    )
+  }
+}
+
+class App extends React.Component<React.Props<{}>,{}> {
+  render() {
+    return (
+      <div>
+        <ul>
+          <li><Link to="/user/bob" activeClassName="active">Bob</Link></li>
+          <li><Link to={{ pathname: '/user/bob', query: { showAge: true } }} activeClassName="active">Bob With Query Params</Link></li>
+          <li><Link to="/user/sally" activeClassName="active">Sally</Link></li>
+        </ul>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+render((
+  <Router history={browserHistory}>
+    <Route path="/" component={App}>
+      <Route path="user/:userID" component={User} />
+    </Route>
+  </Router>
+), document.getElementById('example'));
+```
+
+This is quite a large api so I might have missed some of the details.
+If there is something that should work or documentation that's incorrect please don't hesistate to post an issue.

examples/active-links.tsx

@@ -0,0 +1,123 @@
+/// <reference path="../typings/main.d.ts" />
+/// <reference path="../react-router.d.ts" />
+
+import React from 'react';
+import { render } from 'react-dom';
+import {
+	IRouterProps,
+	Router,
+	ILinkProps,
+	Link,
+	IndexLink,
+	IRouterContext,
+	IRouter,
+	RouterContext,
+	IRouteProps,
+	Route,
+	PlainRoute,
+	IRedirectProps,
+	Redirect,
+	IndexRoute,
+	IIndexRouteProps,
+	IndexRedirect,
+	IInjectedProps,
+	browserHistory,
+	hashHistory,
+	createMemoryHistory,
+	useRouterHistory,
+	IMatchArgs,
+	match,
+	createRoutes
+} from '../react-router'
+
+
+const ACTIVE = { color: 'red' }
+
+class App extends React.Component<React.Props<{}>, {}> {
+	render() {
+		return (
+			<div>
+				<h1>APP!</h1>
+				<ul>
+					<li><Link      to="/"           activeStyle={ACTIVE}>/</Link></li>
+					<li><IndexLink to="/"           activeStyle={ACTIVE}>/ IndexLink</IndexLink></li>
+
+					<li><Link      to="/users"      activeStyle={ACTIVE}>/users</Link></li>
+					<li><IndexLink to="/users"      activeStyle={ACTIVE}>/users IndexLink</IndexLink></li>
+
+					<li><Link      to="/users/ryan" activeStyle={ACTIVE}>/users/ryan</Link></li>
+					<li><Link      to={{ pathname: '/users/ryan', query: { foo: 'bar' } }}
+						activeStyle={ACTIVE}>/users/ryan?foo=bar</Link></li>
+
+					<li><Link      to="/about"      activeStyle={ACTIVE}>/about</Link></li>
+				</ul>
+
+				{this.props.children}
+			</div>
+		)
+	}
+}
+
+class Index extends React.Component<IInjectedProps, {}> {
+	render() {
+		return (
+			<div>
+				<h2>Index!</h2>
+			</div>
+		)
+	}
+}
+
+class Users extends React.Component<React.Props<{}> & IInjectedProps, {}> {
+	render() {
+		return (
+			<div>
+				<h2>Users</h2>
+				{this.props.children}
+			</div>
+		)
+	}
+}
+
+class UsersIndex extends React.Component<IInjectedProps, {}> {
+	render() {
+		return (
+			<div>
+				<h3>UsersIndex</h3>
+			</div>
+		)
+	}
+}
+
+class User extends React.Component<IInjectedProps, {}> {
+	render() {
+		return (
+			<div>
+				<h3>User {this.props.params['id']}</h3>
+			</div>
+		)
+	}
+}
+
+class About extends React.Component<{}, {}> {
+	render() {
+		return (
+			<div>
+				<h2>About</h2>
+			</div>
+		)
+	}
+}
+
+render((
+	<Router history={browserHistory}>
+		<Route path="/" component={App}>
+			<IndexRoute component={Index}/>
+			<Route path="/about" component={About}/>
+			<Route path="users" component={Users}>
+				<IndexRoute component={UsersIndex}/>
+				<Route path=":id" component={User}/>
+			</Route>
+		</Route>
+	</Router>
+), document.getElementById('example'));

examples/auth-flow.tsx

@@ -0,0 +1,166 @@
+/// <reference path="../typings/main.d.ts" />
+/// <reference path="../react-router.d.ts" />
+
+import React from 'react';
+import { render } from 'react-dom';
+import {
+	IRouterProps,
+	Router,
+	ILinkProps,
+	Link,
+	IndexLink,
+	IRouterContext,
+	IRouter,
+	RouterContext,
+	IRouteProps,
+	Route,
+	PlainRoute,
+	IRedirectProps,
+	Redirect,
+	IndexRoute,
+	IIndexRouteProps,
+	IndexRedirect,
+	IInjectedProps,
+	browserHistory,
+	hashHistory,
+	createMemoryHistory,
+	useRouterHistory,
+	IMatchArgs,
+	match,
+	createRoutes
+} from '../react-router'
+import auth = require("./auth");
+
+const App = React.createClass({
+	getInitialState() {
+		return {
+			loggedIn: auth.loggedIn()
+		}
+	},
+
+	updateAuth(loggedIn) {
+		this.setState({
+			loggedIn: loggedIn
+		})
+	},
+
+	componentWillMount() {
+		auth.onChange = this.updateAuth
+		auth.login()
+	},
+
+	render() {
+		return (
+			<div>
+				<ul>
+					<li>
+						{this.state.loggedIn ? (
+							<Link to="/logout">Log out</Link>
+						) : (
+								<Link to="/login">Sign in</Link>
+							) }
+					</li>
+					<li><Link to="/about">About</Link></li>
+					<li><Link to="/dashboard">Dashboard</Link> (authenticated) </li>
+				</ul>
+				{this.props.children || <p>You are {!this.state.loggedIn && 'not'} logged in.</p>}
+			</div>
+		)
+	}
+})
+
+const Dashboard = React.createClass({
+	render() {
+		const token = auth.getToken()
+
+		return (
+			<div>
+				<h1>Dashboard</h1>
+				<p>You made it!</p>
+				<p>{token}</p>
+			</div>
+		)
+	}
+})
+
+const Login = React.createClass({
+
+	contextTypes: {
+		router: React.PropTypes.object.isRequired
+	},
+
+	getInitialState() {
+		return {
+			error: false
+		}
+	},
+
+	handleSubmit(event:React.FormEvent) {
+		event.preventDefault()
+
+		const email = this.refs.email.value
+		const pass = this.refs.pass.value
+
+		auth.login(email, pass, (loggedIn) => {
+			if (!loggedIn)
+				return this.setState({ error: true })
+
+			const { location } = this.props;
+
+			if (location.state && location.state.nextPathname) {
+				this.context.router.replace(location.state.nextPathname)
+			} else {
+				this.context.router.replace('/')
+			}
+		})
+	},
+
+	render() {
+		return (
+			<form onSubmit={this.handleSubmit}>
+				<label><input ref="email" placeholder="email" defaultValue="[email protected]" /></label>
+				<label><input ref="pass" placeholder="password" /></label> (hint: password1) <br />
+				<button type="submit">login</button>
+				{this.state.error && (
+					<p>Bad login information</p>
+				) }
+			</form>
+		)
+	}
+})
+
+const About = React.createClass({
+	render() {
+		return <h1>About</h1>
+	}
+})
+
+const Logout = React.createClass({
+	componentDidMount() {
+		auth.logout()
+	},
+
+	render() {
+		return <p>You are now logged out</p>
+	}
+})
+
+function requireAuth(nextState, replace) {
+	if (!auth.loggedIn()) {
+		replace({
+			pathname: '/login',
+			state: { nextPathname: nextState.location.pathname }
+		})
+	}
+}
+
+render((
+	<Router history={browserHistory}>
+		<Route path="/" component={Login} components={{ "login": Login }}>
+			<Route path="login" component={Login} />
+			<Route path="logout" component={Logout} />
+			<Route path="about" component={About} />
+			<Route path="dashboard" component={Dashboard} onEnter={requireAuth} />
+		</Route>
+	</Router>
+), document.getElementById('example'))