Typescript definitions validation (react-toolbox#1163)

* initial attempt to validate ts definitions

* ignore .vscode

* Add other spect & some fixes:

- Add target prop to Button
- Add value prop to MenuItem
- Make label optional in Tab
- Improve Tooltip types

* Add tsc validation to travis

* fix typo in travis build step

.gitignore

@@ -4,3 +4,4 @@ node_modules
 npm-debug.log
 .idea
 .DS_Store
+.vscode

.travis.yml

@@ -8,4 +8,5 @@ node_js:
 
 script:
   - npm run lint
+  - npm run ts
   - npm test

components/button/Button.d.ts

@@ -1,8 +1,9 @@
 import * as React from "react";
 import ReactToolbox from "../index";
+import { RippleProps } from '../ripple/index';
 import { ButtonBaseProps, ButtonTheme } from './base';
 
-export interface ButtonProps extends ButtonBaseProps {
+export interface ButtonProps extends ButtonBaseProps, RippleProps {
   /**
    * If true, the button will have a flat look.
    * @default false
@@ -31,6 +32,10 @@ export interface ButtonProps extends ButtonBaseProps {
    * @default false
    */
   raised?: boolean;
+  /**
+   * Passed down to the root element
+   */
+  target?: string;
   /**
    * Classnames object defining the component style.
    */

components/input/Input.d.ts

@@ -132,7 +132,7 @@ export interface InputProps extends ReactToolbox.Props {
   /**
    * The number of rows the multiline input field has.
    */
-  rows?:number;
+  rows?: number;
   /**
    * Classnames object defining the component style.
    */

components/menu/MenuItem.d.ts

@@ -59,6 +59,10 @@ export interface MenuItemProps extends ReactToolbox.Props {
    * Classnames object defining the component style.
    */
   theme?: MenuItemTheme;
+  /**
+   * Passed down to the root element
+   */
+  value?: any;
 }
 
 export class MenuItem extends React.Component<MenuItemProps, {}> { }

components/tabs/Tab.d.ts

@@ -52,9 +52,9 @@ export interface TabProps extends ReactToolbox.Props {
    */
   icon?: React.ReactNode;
   /**
-   * Label text for navigation header. Required.
+   * Label text for navigation header.
    */
-  label: string;
+  label?: string;
   /**
    * Callback function that is fired when the tab is activated.
    */

components/tooltip/index.d.ts

@@ -70,10 +70,21 @@ declare class TooltipComponent<P, S> extends React.Component<P, S> {
   props: P & TooltipProps;
 }
 
-interface TooltippedComponentClass<P> extends TooltipProps {
+declare interface TooltippedComponentClass<P> extends TooltipProps {
   new (props?: P, context?: any): TooltipComponent<P, any>;
 }
 
-export function Tooltip<P>(componentClass: React.ComponentClass<P>): TooltippedComponentClass<P>;
+declare interface TooltipOptions {
+  className?: string;
+  delay?: number;
+  hideOnClick?: boolean;
+  passthrough?: boolean;
+  showOnClick?: boolean;
+  position?: 'bottom' | 'horizontal' | 'left' | 'right' | 'top' | 'vertical'
+}
+
+declare type tooltipHOC<P> = (componentClass: React.ComponentClass<P>) => TooltippedComponentClass<P>
+
+export function tooltipFactory<P>(options?: TooltipOptions): tooltipHOC<P>;
 
-export default Tooltip;
+export default function Tooltip<P>(component: React.ReactType): TooltippedComponentClass<P>;

package.json

@@ -34,6 +34,8 @@
     "react-transition-group": "^1.1.3"
   },
   "devDependencies": {
+    "@types/node": "^7.0.4",
+    "@types/react": "^15.0.0",
     "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
     "babel-eslint": "^7.2.3",
@@ -86,13 +88,15 @@
     "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.3.6",
     "rimraf": "^2.6.1",
+    "sinon": "^2.0.0-pre.2",
     "style-loader": "^0.18.1",
     "stylelint": "^7.10.1",
     "stylelint-config-standard": "^16.0.0",
     "stylelint-order": "^0.4.4",
+    "typescript": "^2.1.5",
     "webpack": "^2.6.0",
     "webpack-dev-middleware": "^1.10.2",
-    "webpack-hot-middleware": "^2.18.0"
+    "webpack-hot-middleware": "^2.18.0"    
   },
   "engines": {
     "node": ">= 6"
@@ -111,6 +115,8 @@
     "prepublish": "npm run build",
     "release": "bumped release",
     "start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
+    "ts": "tsc",
+    "tsd": "cpx \"./components/**/*.d.ts\" ./lib"
     "test": "jest",
     "test:watch": "jest --watch --no-watchman"
   },

spec/ts/app_bar.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import AppBar, {AppBar as NamedAppBar} from 'components/app_bar';
+
+const AppBarTest: React.SFC<any> = () => (
+  <section>
+    <h5>AppBar</h5>
+    <br />
+    <AppBar title='Title' />
+    <br />
+    <AppBar leftIcon='menu' title='Title' />
+    <br />
+    <AppBar leftIcon='arrow_back' title='Title' rightIcon='close' />
+    <br />
+    <AppBar>
+      Custom content
+    </AppBar>
+    <br/>
+    <NamedAppBar title='NamedAppBar' />
+  </section>
+)
+
+export default AppBarTest;

spec/ts/autocomplete.tsx

@@ -0,0 +1,96 @@
+import * as  React from 'react';
+import Autocomplete from 'components/autocomplete';
+
+class AutocompleteTest extends React.Component<any, any> {
+  state: any = {
+    simple: 'Spain',
+    simpleShowAll: 'England',
+    multipleArray: ['ES-es', 'TH-th'],
+    multipleObject: {'ES-es': 'Spain', 'TH-th': 'Thailand'},
+    countriesArray: ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'],
+    countriesObject: {
+      'EN-gb': 'England',
+      'EN-en': 'United States of America', 'EN-nz': 'New Zealand'
+    }
+  };
+
+  handleFocus = (event: React.MouseEvent<any>) => {
+    console.log('This is focused');
+    console.log(event);
+  };
+
+  handleMultipleArrayChange = (value: any) => {
+    this.setState({
+      multipleArray: value,
+      countriesObject: {
+        ...this.state.countriesObject,
+        ...(value[0] && !this.state.countriesObject[value[0]]) ? {[value[0]]: value[0]} : {}
+      }
+    });
+  };
+
+  handleMultipleObjectChange = (value: any) => {
+    this.setState({
+      multipleObject: value
+    });
+  };
+
+  handleSimpleChange = (value: any) => {
+    this.setState({simple: value});
+  };
+
+  handleSimpleShowAllChange = (value: any) => {
+    this.setState({simpleShowAll: value});
+  };
+
+  render () {
+    return (
+      <section>
+        <h5>Autocomplete</h5>
+        <p>You can have a multiple or simple autocomplete.</p>
+
+        <Autocomplete
+          allowCreate
+          keepFocusOnChange
+          label="Pick multiple elements..."
+          onFocus={this.handleFocus}
+          onChange={this.handleMultipleArrayChange}
+          source={this.state.countriesObject}
+          suggestionMatch="anywhere"
+          value={this.state.multipleArray}
+        />
+
+        <Autocomplete
+          allowCreate
+          label="Pick multiple elements with object value..."
+          onChange={this.handleMultipleObjectChange}
+          showSelectedWhenNotInSource
+          source={this.state.countriesObject}
+          suggestionMatch="anywhere"
+          value={this.state.multipleObject}
+        />
+
+        <Autocomplete
+          hint="Elements up to you..."
+          label="Choose a country"
+          multiple={false}
+          onChange={this.handleSimpleChange}
+          source={this.state.countriesArray}
+          value={this.state.simple}
+        />
+
+        <Autocomplete
+          hint="Elements up to you..."
+          label="Choose a country (showing all suggestions)"
+          multiple={false}
+          onChange={this.handleSimpleShowAllChange}
+          showSuggestionsWhenValueIsSet
+          source={this.state.countriesArray}
+          value={this.state.simpleShowAll}
+        />
+      </section>
+    );
+  }
+}
+
+export default AutocompleteTest;

spec/ts/avatar.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Avatar from '../../components/avatar';
+import GithubIcon from './github_icon';
+
+const AvatarTest = () => (
+  <section>
+    <h5>Avatars</h5>
+    <p>Provide an image source or object, a font icon, children or a title to use its first letter.</p>
+    <Avatar style={{ backgroundColor: 'deepskyblue' }} icon="folder" alt="icon folder" />
+    <Avatar icon={<GithubIcon />} />
+    <Avatar><img src="https://placeimg.com/80/80/animals" alt="foobar" /></Avatar>
+    <Avatar image="https://placeimg.com/80/80/animals" alt="foobar" />
+    <Avatar
+      alt="foobar"
+      image="http://www.thewrap.com/wp-content/uploads/2015/08/margot-robbie-harley-quinn_main.jpg" cover
+    />
+    <Avatar title="Javier" />
+    <Avatar style={{ backgroundColor: 'yellowgreen' }}><GithubIcon /></Avatar>
+  </section>
+);
+
+export default AvatarTest;

spec/ts/button.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import GithubIcon from './github_icon';
+import { Button, IconButton, BrowseButton } from '../../components/button';
+
+const ButtonTest = () => (
+  <section>
+    <h5>Buttons</h5>
+    <p>lorem ipsum...</p>
+
+    <Button href="http://github.com/javivelasco" target="_blank" raised>
+      <GithubIcon /> Github
+    </Button>
+    <Button icon="bookmark" label="Bookmark" accent onRippleEnded={rippleEnded} />
+    <Button icon="bookmark" label="Bookmark" raised primary rippleMultiple={false} onRippleEnded={rippleEnded} />
+    <Button icon="inbox" label="Inbox" flat />
+    <Button icon="add" floating />
+    <Button icon="add" floating primary />
+    <Button href="http://github.com/javivelasco" target="_blank" icon="link" floating accent />
+    <Button icon="add" floating primary disabled />
+    <Button icon="add" floating accent mini />
+    <IconButton icon="favorite" accent />
+    <IconButton icon="favorite" inverse />
+    <IconButton icon="favorite" />
+    <IconButton icon="favorite" disabled />
+    <IconButton primary><GithubIcon /></IconButton>
+    <Button icon="add" label="Add this" flat primary />
+    <Button icon="add" label="Add this" flat disabled />
+    <h5>Icon Button Alignment</h5>
+    <p>
+      Icon Buttons should align in the vertical center, to see this we need to
+      put them next to text or highlight thier background color.
+    </p>
+    <IconButton icon="menu" style={{ backgroundColor: 'red' }} inverse />
+    <span style={{ verticalAlign: 'middle' }}>Menu</span>
+    <IconButton icon="menu" />
+    <span style={{ verticalAlign: 'middle' }}>Menu</span>
+    <IconButton><GithubIcon /></IconButton>
+    <span style={{ verticalAlign: 'middle' }}>Github</span>
+    <h5>Browse Button</h5>
+    <br />
+    <BrowseButton icon="folder_open" label="BROWSE" raised primary />
+    &nbsp;
+    <BrowseButton label="BROWSE" raised />
+  </section>
+);
+
+function rippleEnded() {
+  console.log('Ripple animation ended!');
+}
+
+export default ButtonTest;