Add React types

js/about.d.ts

@@ -8,11 +8,11 @@ declare class About extends React.Component {
         appbar: any;
     };
     context: {
-        appbar: (title: string, leftElement?: HTMLElement, rightElement?: HTMLElement) => void;
+        appbar: (title: string, leftElement?: Element, rightElement?: Element) => void;
     };
     constructor(props: any);
     componentWillMount(): void;
     clearSettings(): void;
-    render(): any;
+    render(): React.JSX.Element;
 }
 export default About;

js/about.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
-import CardActions from 'material-ui/Card/CardActions';
 import CardHeader from 'material-ui/Card/CardHeader';
-import CardMedia from 'material-ui/Card/CardMedia';
-import CardTitle from 'material-ui/Card/CardTitle';
 import FlatButton from 'material-ui/FlatButton';
 import CardText from 'material-ui/Card/CardText';
 import {List, ListItem} from 'material-ui/List';
 import CodeIcon from 'material-ui/svg-icons/action/code';
 import PersonIcon from 'material-ui/svg-icons/social/person';
+import PropTypes from 'prop-types';
 import OpenInNewIcon from 'material-ui/svg-icons/action/open-in-new';
 import Card from './common/card';
 
@@ -16,7 +14,7 @@ import Card from './common/card';
  */
 class About extends React.Component {
   static contextTypes: { snackbar: any; appbar: any; };
-  context: { appbar: (title: string, leftElement?: HTMLElement, rightElement?: HTMLElement) => void };
+  context: { appbar: (title: string, leftElement?: Element, rightElement?: Element) => void };
   constructor(props) {
     super(props);
 
@@ -77,7 +75,7 @@ class About extends React.Component {
   }
 }
 About.contextTypes = {
-  snackbar: React.PropTypes.func,
-  appbar: React.PropTypes.func,
+  snackbar: PropTypes.func,
+  appbar: PropTypes.func,
 };
 export default About;

js/application.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Router } from 'react-router';
+import Synth from './synth';
+/**
+ * Top-level application component
+ */
+declare class Application extends React.Component {
+    state: {
+        drawerOpen: boolean;
+        snackbarOpen: boolean;
+        snackbarMessage: string;
+        snackbarAutoHideDuration: number;
+        appBarTitle: string;
+        appBarLeftElement: any;
+        appBarRightElement: any;
+    };
+    menuItems: {
+        Home: {
+            route: string;
+            icon: any;
+        };
+        "Sight Reading Practice": {
+            route: string;
+            icon: any;
+        };
+        "Perfect Pitch Practice": {
+            route: string;
+            icon: any;
+        };
+        "Free Play": {
+            route: string;
+            icon: any;
+        };
+        About: {
+            route: string;
+            icon: any;
+        };
+    };
+    synth: Synth;
+    context: {
+        router: Router;
+    };
+    props: {
+        children: any;
+    };
+    static contextTypes: {
+        router: Router;
+    };
+    static childContextTypes: any;
+    constructor(props: any);
+    getChildContext(): {
+        snackbar: any;
+        appbar: any;
+        synth: Synth;
+    };
+    componentDidMount(): void;
+    toggleDrawer(): void;
+    leftNavChange(e: any, key: any, payload: any): void;
+    drawerMenuItemTouched(e: any): void;
+    snackbarRequestClose(): void;
+    displaySnackbar(message: any, duration: any): void;
+    /**
+     * Used in child contexts to update the app bar
+     */
+    updateAppBar(title: any, leftElement: any, rightElement: any): void;
+    render(): React.JSX.Element;
+}
+export default Application;

js/application.jsx → js/application.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Router, Route, Link } from 'react-router'
+import PropTypes from 'prop-types';
+import { Router } from 'react-router'
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
 import { cyan700, cyan900 } from 'material-ui/styles/colors';
@@ -25,6 +26,13 @@ const muiTheme = getMuiTheme({
  * Top-level application component
  */
 class Application extends React.Component {
+  state: { drawerOpen: boolean; snackbarOpen: boolean; snackbarMessage: string; snackbarAutoHideDuration: number; appBarTitle: string; appBarLeftElement: any; appBarRightElement: any; };
+  menuItems: { Home: { route: string; icon: any; }; "Sight Reading Practice": { route: string; icon: any; }; "Perfect Pitch Practice": { route: string; icon: any; }; "Free Play": { route: string; icon: any; }; About: { route: string; icon: any; }; };
+  synth: Synth;
+  context: { router: Router };
+  props: { children: any; };
+  static contextTypes: { router: Router; };
+  static childContextTypes;
 
   constructor(props) {
     super(props);
@@ -179,11 +187,11 @@ class Application extends React.Component {
   }
 }
 Application.contextTypes = {
-  router: React.PropTypes.object
+  router: PropTypes.object
 };
 Application.childContextTypes = {
-  snackbar: React.PropTypes.func,
-  appbar: React.PropTypes.func,
-  synth: React.PropTypes.object,
+  snackbar: PropTypes.func,
+  appbar: PropTypes.func,
+  synth: PropTypes.instanceOf(Synth),
 };
 export default Application;

js/common/card.d.ts

@@ -1,8 +1,11 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 /**
  * Wrapper around material-ui Card with some customizations
  */
 export default class extends React.Component {
-    props: {};
-    render(): any;
+    props: {
+        children?: Element | Element[] | ReactElement | ReactElement[];
+        style?: React.CSSProperties;
+    };
+    render(): React.JSX.Element;
 }

js/common/card.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import Card from 'material-ui/Card/Card';
 
 /**
  * Wrapper around material-ui Card with some customizations
  */
 export default class extends React.Component {
-  props: {};
+  props: { children?: Element | Element[] | ReactElement | ReactElement[], style?: React.CSSProperties };
   render() {
     //var { children, ...other } = this.props;
     return (

js/common/practice-intro.d.ts

@@ -1,4 +1,17 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
+export type PreferenceItem = {
+    type: string;
+    label: string;
+    pref: string;
+    default: boolean;
+};
+export type PreferenceGroup = {
+    header: string;
+    items: PreferenceItem[];
+};
+export type PreferencesState = {
+    [x: string]: any;
+};
 /**
  * Wrapper component for practice modes, containing general functionality for
  * displaying an initial options screen with a "start" button to begin an
@@ -9,25 +22,19 @@ import React from 'react';
  */
 declare class PracticeIntro extends React.Component {
     props: {
-        component: React.Component;
+        component: React.ComponentType<{
+            prefs: PreferencesState;
+        }>;
         title: string;
-        prefDefs: {
-            header: string;
-            items: {
-                type: string;
-                label: string;
-                pref: string;
-                default: boolean;
-            }[];
-        }[];
+        prefDefs: PreferenceGroup[];
         prefsNamespace: string;
     };
     state: {
         started: boolean;
-        prefs: any;
+        prefs: PreferencesState;
     };
     context: {
-        appbar: (title: string, leftElement?: HTMLElement, rightElement?: HTMLElement) => void;
+        appbar: (title: string, leftElement?: Element | ReactElement, rightElement?: Element | ReactElement) => void;
     };
     static contextTypes: {
         snackbar: any;
@@ -57,6 +64,6 @@ declare class PracticeIntro extends React.Component {
      * Handler for all toggle switches and checkboxes
      */
     onToggle(e: any, enabled: any): void;
-    render(): any;
+    render(): React.JSX.Element;
 }
 export default PracticeIntro;

js/common/practice-intro.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import FlatButton from 'material-ui/FlatButton';
 import IconButton from 'material-ui/IconButton';
 import NavigationBackIcon from 'material-ui/svg-icons/navigation/arrow-back';
@@ -7,6 +7,21 @@ import Subheader from 'material-ui/Subheader';
 import Card from './card';
 import PrefsToggle from './prefs-toggle';
 import PrefsCheckbox from './prefs-checkbox';
+import PropTypes from 'prop-types';
+
+export type PreferenceItem = {
+  type: string;
+  label: string;
+  pref: string;
+  default: boolean;
+};
+export type PreferenceGroup = {
+  header: string;
+  items: PreferenceItem[];
+};
+export type PreferencesState = {
+  [x: string]: any
+};
 
 /**
  * Wrapper component for practice modes, containing general functionality for
@@ -17,17 +32,9 @@ import PrefsCheckbox from './prefs-checkbox';
  * how to use.
  */
 class PracticeIntro extends React.Component {
-  props: {component: React.Component, title: string, prefDefs: {
-    header: string;
-    items: {
-        type: string;
-        label: string;
-        pref: string;
-        default: boolean;
-    }[];
-}[], prefsNamespace: string};
-  state: { started: boolean; prefs: any; };
-  context: { appbar: (title: string, leftElement?: HTMLElement, rightElement?: HTMLElement) => void };
+  props: { component: React.ComponentType<{ prefs: PreferencesState }>, title: string, prefDefs: PreferenceGroup[], prefsNamespace: string };
+  state: { started: boolean; prefs: PreferencesState; };
+  context: { appbar: (title: string, leftElement?: Element | ReactElement, rightElement?: Element | ReactElement) => void };
   static contextTypes: { snackbar: any; appbar: any; };
 
   constructor(props) {
@@ -36,7 +43,7 @@ class PracticeIntro extends React.Component {
     // If localStorage doesn't have prefs yet, pre-populate with defaults
     let prefs = localStorage["prefs." + this.props.prefsNamespace];
     if (prefs === undefined) {
-      var defaults = {};
+      var defaults: { [x: string]: any } = {};
       this.props.prefDefs.forEach(section => {
         section.items.forEach(item => {
           defaults[item.pref] = item.default;
@@ -147,7 +154,7 @@ class PracticeIntro extends React.Component {
   }
 }
 PracticeIntro.contextTypes = {
-  snackbar: React.PropTypes.func,
-  appbar: React.PropTypes.func,
+  snackbar: PropTypes.func,
+  appbar: PropTypes.func,
 };
 export default PracticeIntro;

js/common/prefs-checkbox.d.ts

@@ -6,5 +6,5 @@ export default class extends React.Component {
         defaultState: boolean;
         onSwitch: Function;
     };
-    render(): any;
+    render(): React.JSX.Element;
 }

js/common/prefs-toggle.d.ts

@@ -6,5 +6,5 @@ export default class extends React.Component {
         defaultState: boolean;
         onSwitch: Function;
     };
-    render(): any;
+    render(): React.JSX.Element;
 }

js/common/tip-card.d.ts

@@ -7,5 +7,5 @@ export default class extends React.Component {
         children: any;
         title: string;
     };
-    render(): any;
+    render(): React.JSX.Element;
 }

js/entry.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from 'react-dom'
 import { Router, Route, IndexRoute, Link, hashHistory } from 'react-router'
 import injectTapEventPlugin from 'react-tap-event-plugin';
-import Application from './application.jsx';
+import Application from './application';
 import Home from './home';
 import About from './about';
 import SightReadingPracticeIntro from './modes/sight-reading-practice-intro.jsx';

js/home.d.ts

@@ -4,7 +4,7 @@ import React from 'react';
  */
 declare class Home extends React.Component {
     context: {
-        appbar: (title: string, leftElement?: HTMLElement, rightElement?: HTMLElement) => void;
+        appbar: (title: string, leftElement?: Element, rightElement?: Element) => void;
     };
     props: {
         location: {
@@ -19,6 +19,6 @@ declare class Home extends React.Component {
     };
     constructor(props: any);
     componentWillMount(): void;
-    render(): any;
+    render(): React.JSX.Element;
 }
 export default Home;

js/home.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import CardTitle from 'material-ui/Card/CardTitle';
 import CardText from 'material-ui/Card/CardText';
 import Card from './common/card';
@@ -8,7 +9,7 @@ import TipCard from './common/tip-card';
  * Component providing the main/home screen
  */
 class Home extends React.Component {
-  context: { appbar: ( title: string, leftElement?: HTMLElement, rightElement?: HTMLElement) => void };
+  context: { appbar: ( title: string, leftElement?: Element, rightElement?: Element) => void };
   props: { location: { query: { [x: string]: string } } };
   static contextTypes: { snackbar: any; appbar: any; };
   constructor(props) {
@@ -77,7 +78,7 @@ class Home extends React.Component {
   }
 }
 Home.contextTypes = {
-  snackbar: React.PropTypes.func,
-  appbar: React.PropTypes.func,
+  snackbar: PropTypes.func,
+  appbar: PropTypes.func,
 };
 export default Home;