feat: 🎸 export TypeScript types and improve build process

Export TypeScript types, build with tsc, remove Gulp, publish to NPM
only lib/ folder, upgrade TypeScript to latest, import React as
wildcard.

package.json

@@ -7,22 +7,23 @@
     "type": "git",
     "url": "https://github.com/streamich/libreact.git"
   },
+  "files": ["lib/"],
   "scripts": {
-    "start": "npm run test:story",
-    "build": "npm run clean && gulp --gulpfile build/gulpfile.js build",
-    "clean": "rimraf lib modules && npm run test:story:clean && npm run docs:clean",
-    "test": "npm run test:server && npm run test:client",
+    "start": "yarn test:story",
+    "clean": "rimraf lib modules && yarn test:story:clean && yarn docs:clean",
+    "build": "tsc",
+    "test": "yarn test:server && yarn test:client",
     "test:server": "mocha -r ts-node/register src/**/*.test-server.ts*",
     "test:client": "jest",
     "test:client:coverage": "jest --coverage",
     "test:watch": "jest --watch",
     "test:story:clean": "rimraf storybook-static",
-    "test:story": "npm run storybook",
+    "test:story": "yarn storybook",
     "test:story:build": "build-storybook",
     "docs:clean": "rimraf dist_docs docs/_book",
-    "docs:serve": "npm run docs:clean && gitbook install ./docs && gitbook serve ./docs",
-    "docs:build": "npm run docs:clean && gitbook install ./docs && gitbook build ./docs",
-    "docs:publish": "npm run test:story:build && npm run docs:build && ./build/publish-docs.sh",
+    "docs:serve": "yarn docs:clean && gitbook install ./docs && gitbook serve ./docs",
+    "docs:build": "yarn docs:clean && gitbook install ./docs && gitbook build ./docs",
+    "docs:publish": "yarn test:story:build && yarn docs:build && ./build/publish-docs.sh",
     "storybook": "start-storybook -p 6007",
     "semantic-release": "semantic-release"
   },
@@ -47,14 +48,12 @@
     "@types/chai": "4.1.1",
     "@types/jest": "22.0.1",
     "@types/node": "9.3.0",
-    "@types/react": "^16.3.17",
-    "@types/react-dom": "16.0.3",
+    "@types/react": "^16.4.14",
+    "@types/react-dom": "^16.0.8",
     "chai": "4.1.2",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.3.4",
-    "gulp": "3.9.1",
-    "gulp-typescript": "3",
     "jest": "^23.6.0",
     "jest-environment-jsdom": "^23.4.0",
     "jest-environment-jsdom-global": "^1.1.0",
@@ -64,10 +63,10 @@
     "react-test-renderer": "16.2.0",
     "rimraf": "2.6.2",
     "to-string-loader": "1.1.5",
-    "ts-jest": "22.0.1",
-    "ts-loader": "3.2.0",
-    "ts-node": "4.1.0",
-    "typescript": "2.6.2",
+    "ts-jest": "^23.10.3",
+    "ts-loader": "^5.2.1",
+    "ts-node": "^7.0.1",
+    "typescript": "^3.1.1",
     "webpack": "3.10.0",
     "semantic-release": "^15.5.0",
     "@semantic-release/changelog": "^2.0.2",

src/ActiveSensor/__story__/story.tsx

@@ -1,7 +1,7 @@
 import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {ActiveSensor} from '..';
-import ShowDocs from '../../../.storybook/ShowDocs'
+import ShowDocs from '../../ShowDocs'
 
 storiesOf('Sensors/ActiveSensor', module)
   .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/ActiveSensor.md')}))

src/AfterDraf/__story__/story.tsx

@@ -1,7 +1,7 @@
 import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {AfterDraf} from '..';
-import ShowDocs from '../../../.storybook/ShowDocs'
+import ShowDocs from '../../ShowDocs'
 
 storiesOf('Animation/AfterDraf', module)
   .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/AfterDraf.md')}))

src/AfterDraf/createSingleRunDraf.ts

@@ -1,4 +1,4 @@
-import {Component} from 'react';
+import * as React from 'react';
 import {isClient} from '../util';
 
 export interface IAfterDrafState {
@@ -9,7 +9,7 @@ export const createSingleRunDraf = isClient
   ? () => {
     let signelDrafFinished = false;
 
-    return class extends Component<{}, IAfterDrafState> {
+    return class extends React.Component<{}, IAfterDrafState> {
       frame;
       state: IAfterDrafState;
 

src/AfterDraf/index.ts

@@ -1,12 +1,12 @@
-import {Component} from 'react';
+import * as React from 'react';
 import {isClient} from '../util';
 
 export interface IAfterDrafState {
   ready: boolean;
 }
 
 export const AfterDraf = isClient
-  ? class AfterDraf extends Component<{}, IAfterDrafState> {
+  ? class AfterDraf extends React.Component<{}, IAfterDrafState> {
     frame;
     state: IAfterDrafState;
 

src/AfterTimeout/__story__/story.tsx

@@ -1,7 +1,7 @@
 import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {AfterTimeout} from '..';
-import ShowDocs from '../../../.storybook/ShowDocs'
+import ShowDocs from '../../ShowDocs'
 
 storiesOf('Animation/AfterTimeout', module)
   .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/AfterTimeout.md')}))

src/Alert/__story__/story.tsx

@@ -1,7 +1,7 @@
 import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {Alert} from '..';
-import ShowDocs from '../../../.storybook/ShowDocs'
+import ShowDocs from '../../ShowDocs'
 
 storiesOf('Generators/Alert', module)
   .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Alert.md')}))

src/BatterySensor/__story__/story.ts

@@ -1,7 +1,7 @@
 import {Component, createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {BatterySensor, withBattery} from '..';
-import ShowDocs from '../../../.storybook/ShowDocs';
+import ShowDocs from '../../ShowDocs';
 
 const Print = (props) => h('pre', {
   style: {

src/BrowserOnly/__story__/story.tsx

@@ -1,7 +1,7 @@
 import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {BrowserOnly} from '..';
-import ShowDocs from '../../../.storybook/ShowDocs'
+import ShowDocs from '../../ShowDocs'
 
 storiesOf('Boundaries/BrowserOnly', module)
   .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/BrowserOnly.md')}))

src/Counter/__story__/story.tsx

@@ -1,7 +1,7 @@
 import {Component, createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {Counter, withCounter} from '..';
-import ShowDocs from '../../../.storybook/ShowDocs'
+import ShowDocs from '../../ShowDocs'
 
 const Val = ({value, inc}) =>
   <div onClick={() => inc(3)} onDoubleClick={inc}>{value}</div>;

src/Dimmable/__story__/story.tsx

@@ -2,7 +2,7 @@ import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {Dimmable} from '..';
 import {Toggle} from '../../Toggle';
-import ShowDocs from '../../../.storybook/ShowDocs'
+import ShowDocs from '../../ShowDocs'
 
 storiesOf('UI/Dimmable', module)
   .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Dimmable.md')}))

src/Dimmable/index.ts

@@ -1,5 +1,5 @@
+import * as React from 'react';
 import {IDimmableProps} from './index';
-import {Component, Children, cloneElement} from 'react';
 import {h, noop} from '../util';
 import {Dimmer, IDimmerProps} from '../Dimmer';
 
@@ -19,15 +19,15 @@ export interface IDimmableProps extends IDimmerProps {
   renderOverlay?: (dim?: boolean) => React.ReactChild;
 }
 
-export class Dimmable extends Component<IDimmableProps> {
+export class Dimmable extends React.Component<IDimmableProps> {
   static defaultProps = {
     blur: 5,
   };
 
   render () {
     const {children, dim, blur, renderOverlay, ...rest} = this.props;
-    const element = Children.only(children);
-    const elementChildren = Children.toArray(element.props.children);
+    const element = React.Children.only(children);
+    const elementChildren = React.Children.toArray(element.props.children);
     let child: React.ReactChild;
     const dimmerProps: IDimmerProps = rest;
 
@@ -65,13 +65,13 @@ export class Dimmable extends Component<IDimmableProps> {
           }
         }
 
-        child = cloneElement(child, childProps);
+        child = React.cloneElement(child, childProps);
       }
     } else {
       child = h(onlyTextNodes(elementChildren) ? 'span' : 'div', childProps, ...elementChildren);
     }
 
-    return cloneElement(element, {
+    return React.cloneElement(element, {
       style: {
         ...(element.props.style || {}),
         position: 'relative'

src/Dimmer/__story__/story.tsx

@@ -2,7 +2,7 @@ import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {Dimmer} from '..';
 import {Toggle} from '../../Toggle';
-import ShowDocs from '../../../.storybook/ShowDocs'
+import ShowDocs from '../../ShowDocs'
 
 storiesOf('UI/Dimmer', module)
   .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Dimmer.md')}))

src/DropArea/__story__/story.tsx

@@ -2,7 +2,7 @@ import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
 import {DropArea} from '..';
-import ShowDocs from '../../../.storybook/ShowDocs'
+import ShowDocs from '../../ShowDocs'
 
 storiesOf('UI/DropArea', module)
   .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/DropArea.md')}))

src/DropArea/index.ts

@@ -1,4 +1,4 @@
-import {Component, cloneElement} from 'react';
+import * as React from 'react';
 import {render} from 'react-universal-interface';
 import {noop} from '../util';
 
@@ -11,7 +11,7 @@ export interface IDropAreaProps {
 export interface IDropAreaState {
 }
 
-export class DropArea extends Component<IDropAreaProps, IDropAreaState> {
+export class DropArea extends React.Component<IDropAreaProps, IDropAreaState> {
   static defaultProps = {
     onFiles: noop,
     onText: noop,
@@ -73,7 +73,7 @@ export class DropArea extends Component<IDropAreaProps, IDropAreaState> {
     const element = render(this.props, {});
     const {props} = element;
 
-    return cloneElement(element, {
+    return React.cloneElement(element, {
       ...props,
       onDragOver: this.onDragOver(props.onDragOver),
       onDragEnter: this.onDragEnter(props.onDragEnter),

src/ElectronOnly/__story__/story.tsx

@@ -1,7 +1,7 @@
 import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {ElectronOnly} from '..';
-import ShowDocs from '../../../.storybook/ShowDocs'
+import ShowDocs from '../../ShowDocs'
 
 storiesOf('Boundaries/ElectronOnly', module)
   .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/ElectronOnly.md')}))

src/ErrorBoundary/__story__/story.tsx

@@ -1,7 +1,7 @@
 import {Component, createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {ErrorBoundary, withErrorBoundary} from '..';
-import ShowDocs from '../../../.storybook/ShowDocs'
+import ShowDocs from '../../ShowDocs'
 
 class BuggyCounter extends Component<any, any> {
   state;

src/ExitSensor/__story__/story.tsx

@@ -1,7 +1,7 @@
 import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {ExitSensor} from '..';
-import ShowDocs from '../../../.storybook/ShowDocs'
+import ShowDocs from '../../ShowDocs'
 import {StoryExitSensorExample} from './StoryExitSensorExample';
 
 storiesOf('Sensors/ExitSensor', module)

src/ExitSensor/index.ts

@@ -1,4 +1,4 @@
-import {Component, cloneElement} from 'react';
+import * as React from 'react';
 
 export interface IExitSensorProps {
   children?: React.ReactElement<any>;
@@ -8,7 +8,7 @@ export interface IExitSensorProps {
 export interface IExitSensorState {
 }
 
-export class ExitSensor extends Component<IExitSensorProps, IExitSensorState> {
+export class ExitSensor extends React.Component<IExitSensorProps, IExitSensorState> {
   static defaultProps = {
     time: 200
   };
@@ -52,7 +52,7 @@ export class ExitSensor extends Component<IExitSensorProps, IExitSensorState> {
     if (this.exitInFlight) {
       this.nextElement = element;
 
-      return cloneElement(this.element, {
+      return React.cloneElement(this.element, {
         exiting: true
       });
     }
@@ -69,7 +69,7 @@ export class ExitSensor extends Component<IExitSensorProps, IExitSensorState> {
 
       this.timeout = setTimeout(this.transition, this.props.time);
 
-      return cloneElement(this.element, {
+      return React.cloneElement(this.element, {
         exiting: true
       });
     }

src/Flipflop/__story__/story.tsx

@@ -1,7 +1,7 @@
 import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {Flipflop} from '..';
-import ShowDocs from '../../../.storybook/ShowDocs'
+import ShowDocs from '../../ShowDocs'
 
 storiesOf('Inversion/Flipflop', module)
   .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Flipflop.md')}))

src/FocusSensor/__story__/story.tsx

@@ -1,7 +1,7 @@
 import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 import {FocusSensor} from '..';
-import ShowDocs from '../../../.storybook/ShowDocs'
+import ShowDocs from '../../ShowDocs'
 
 storiesOf('Sensors/FocusSensor', module)
   .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/FocusSensor.md')}))