Merge pull request #30340 from guoshencheng/react-blessed

add typing for react-blessed

types/react-blessed/index.d.ts

@@ -0,0 +1,16 @@
+// Type definitions for react-blessed 0.3
+// Project: https://github.com/yomguithereal/react-blessed#readme
+// Definitions by: My Self <https://github.com/me>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+import * as React from 'react';
+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(bls: any): renderer;

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

@@ -0,0 +1,197 @@
+import * as React from 'react';
+import * as blessed from 'blessed';
+import { render } from 'react-blessed';
+
+// Testing example from demos page
+// https://github.com/Yomguithereal/react-blessed/blob/master/examples/dashboard.jsx
+
+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) {
+        clearInterval(interval);
+        return;
+      }
+      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/react.d.ts

@@ -0,0 +1,34 @@
+// relation to blessed export widgets, prepare for next version of react-blessed
+declare namespace JSX {
+  interface IntrinsicElements {
+    'blessed-box': any;
+    'blessed-text': any;
+    'blessed-line': any;
+    'blessed-scrollablebox': any;
+    'blessed-scrollabletext': any;
+    'blessed-bigtext': any;
+    'blessed-list': any;
+    'blessed-filemanager': any;
+    'blessed-listtable': any;
+    'blessed-listbar': any;
+    'blessed-form': any;
+    'blessed-input': any;
+    'blessed-textarea': any;
+    'blessed-textbox': any;
+    'blessed-button': any;
+    'blessed-checkbox': any;
+    'blessed-radioset': any;
+    'blessed-radiobutton': any;
+    'blessed-table': any;
+    'blessed-prompt': any;
+    'blessed-question': any;
+    'blessed-message': any;
+    'blessed-loading': any;
+    'blessed-log': any;
+    'blessed-progressbar': any;
+    'blessed-program': any;
+    'blessed-terminal': any;
+    'blessed-layout': any;
+    'blessed-escape': any;
+  }
+}

types/react-blessed/tsconfig.json

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

types/react-blessed/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }