add react-blessed typing file

types/react-blessed/index.d.ts

@@ -0,0 +1,29 @@
+// Type definitions for react-blessed 0.3.0
+// Project: https://github.com/Yomguithereal/react-blessed
+// Definitions by: Century Guo <http://github.com/guoshencheng>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+
+declare module 'react-blessed' {
+  import * as React from 'react';
+  import * as Blessd from 'blessed';
+  import { Widgets, screen } from 'blessed';
+  export type Callback = () => void | null | undefined;
+  export type renderer = (
+    c: JSX.Element, s: Widgets.Screen, callback?: Callback,
+  ) => React.Component<any, any> | null;
+  export function render(
+    c: JSX.Element, s: Widgets.Screen, callback?: Callback
+  ): React.Component<any, any> | null;
+  export function createBlessedRenderer(b: typeof Blessd): renderer;
+}
+
+declare namespace JSX {
+  interface IntrinsicElements {
+    'blessed-progressbar': any,
+    'blessed-box': any,
+    'blessed-listtable': any,
+    'blessed-button': any,
+    'blessed-form': any
+  }
+}

types/react-blessed/react-blessed-tests.tsx

@@ -0,0 +1,192 @@
+import * as React from 'react';
+import * as blessed from 'blessed';
+import { render } from 'react-blessed';
+
+const { Component } = React;
+
+/**
+ * Stylesheet
+ */
+const stylesheet = {
+  bordered: {
+    border: {
+      type: 'line'
+    },
+    style: {
+      border: {
+        fg: 'blue'
+      }
+    }
+  }
+};
+
+/**
+ * Top level component.
+ */
+class Dashboard extends Component {
+  render() {
+    return (
+      <>
+        <Log />
+        <Request />
+        <Response />
+        <Jobs />
+        <Progress />
+        <Stats />
+      </>
+    );
+  }
+}
+
+/**
+ * Log component.
+ */
+class Log extends Component {
+  render() {
+    return (
+      <blessed-box
+        label="Log"
+        class={stylesheet.bordered}
+        width="60%"
+        height="70%"
+        draggable={true}>
+        {'Hello'}, {0}, {'World'}
+      </blessed-box>
+    );
+  }
+}
+
+/**
+ * Request component.
+ */
+class Request extends Component {
+  render() {
+    return (
+      <blessed-box
+        label="Request"
+        class={stylesheet.bordered}
+        top="70%"
+        width="30%">
+        {0}
+      </blessed-box>
+    );
+  }
+}
+
+/**
+ * Response component.
+ */
+class Response extends Component {
+  render() {
+    return (
+      <blessed-box
+        class={stylesheet.bordered}
+        top="70%"
+        left="30%"
+        width="30%"
+      />
+    );
+  }
+}
+
+/**
+ * Jobs component.
+ */
+class Jobs extends Component {
+  render() {
+    return (
+      <blessed-box
+        label="Jobs"
+        class={stylesheet.bordered}
+        left="60%"
+        width="40%"
+        height="60%"
+      />
+    );
+  }
+}
+
+/**
+ * Progress component.
+ */
+class Progress extends Component<any, any> {
+  state: {
+    progress: number,
+    color: string,
+  } = {
+    progress: 0,
+    color: 'blue'
+  };
+
+  constructor(props: any) {
+    super(props);
+    const interval: NodeJS.Timer = setInterval(() => {
+      const { progress } = this.state;
+      if (this.state.progress >= 100)
+        return clearInterval(interval);
+      this.setState({
+        progress: progress + 1,
+      });
+    }, 50);
+  }
+
+  render() {
+    const { progress, color } = this.state;
+    const label = `Progress - ${progress}%`;
+
+    return (
+      <blessed-progressbar
+        label={label}
+        onComplete={() => this.setState({
+          color: 'green'
+        })}
+        class={stylesheet.bordered}
+        filled={progress}
+        top='60%'
+        left='60%'
+        width='40%'
+        height='10%'
+        style={{
+          bar: {
+            bg: color
+          }
+        }}
+      />
+    );
+  }
+}
+
+/**
+ * Stats component.
+ */
+class Stats extends Component {
+  render() {
+    return (
+      <blessed-box
+        label='Stats'
+        class={stylesheet.bordered}
+        top='70%'
+        left='60%'
+        width='40%'
+        height='31%'
+      >
+        Some stats
+      </blessed-box>
+    );
+  }
+}
+
+/**
+ * Rendering the screen.
+ */
+const screen = blessed.screen({
+  autoPadding: true,
+  smartCSR: true,
+  title: 'react-blessed dashboard'
+});
+
+screen.key(['escape', 'q', 'C-c'], () => {
+  return process.exit(0);
+});
+
+render(<Dashboard />, screen);

types/react-blessed/tsconfig.json

@@ -0,0 +1,26 @@
+{
+    "files": [
+        "index.d.ts",
+        "react-blessed-tests.tsx"
+    ],
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "jsx": "react",
+        "experimentalDecorators": true,
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    }
+}

types/react-blessed/tslint.json

@@ -0,0 +1,7 @@
+{
+	"extends": "dtslint/dt.json",
+	"rules": {
+		// TODO
+		"dt-header": false
+	}
+}