TS typing

[linonetwo]

Giving typescript typing can let developer better understand waht props this react component needs.

Currently, it is hard to embed this react component due to lack of example and typing, thanks.

[linonetwo]

Type that I'm using in src/type.d.ts

declare module 'the-graph' {
  import { Graph, GraphEdge, GraphNode } from 'fbp-graph';
  import { MutableRefObject } from 'react';
  import { Component as NoFloComponent } from 'noflo';
  import { JSONSchema7Type } from 'json-schema';

  export interface ITheGraphEditorContextMenuOptions {
    element: ITheGraphEditor;
    graph: Graph;
    item: Graph | GraphNode | GraphEdge;
    itemKey: 'graph' | 'node' | 'edge';
    /**
     * Keyof this.props.menus
     * For example, `'main'`
     */
    type: string;
    x?: number;
    y?: number;
  }
  export interface ITheGraphProps {
    contextMenu?: contextMenu;
    getEditorRef?: MutableRefObject<ITheGraphEditor | undefined>;
    getMenuDef?: (options: ITheGraphEditorContextMenuOptions) => any;
    graph: Graph;
    height: number | string;
    library?: IFBPLibrary;
    offsetX?: number;
    onEdgeSelection: (edgeID: string, edge: any, toggle: boolean) => void;
    onNodeSelection: (nodeID: string, node: any, toggle: boolean) => void;
    onPanScale: (x: number, y: number, scale: number) => void;
    readonly: boolean;
    width: number | string;
  }
  export interface ITheGraphEditorState {
    height: number;
    maxZoom: number;
    minZoom: number;
    scale: number;
    tooltip: string;
    tooltipVisible: boolean;
    tooltipX: number;
    tooltipY: number;
    trackStartX: number | null;
    trackStartY: number | null;
    width: number;
    x: number;
    y: number;
  }
  /**
   * Things accessible in the-graph/the-graph-app.js
   */
  export interface ITheGraphEditor {
    debounceLibraryRefesh: () => void;
    dirty: boolean;
    focusNode: (node: GraphNode) => void;
    getComponent: (name: string) => void;
    hideContext: () => void;
    lastScale: number;
    lastX: number;
    lastY: number;
    library: IFBPLibrary;
    libraryDirty: boolean;
    pinching: boolean;
    refs: {
      graph?: ITheGraphEditorGraph;
    };
    registerComponent: (definition: NoFloComponent, generated: boolean) => void;
    /**
     * This is undefined, because it is in the-graph/the-graph-graph.js
     * Set the preview bounding rect by drag event
     * In the-graph/the-graph-graph.js
     * ```js
     * appDomNode.addEventListener('mousemove', this.renderPreviewEdge);
     * appDomNode.addEventListener('panmove', this.renderPreviewEdge);
     * appDomNode.addEventListener('tap', this.cancelPreviewEdge);
      ```
     */
    renderPreviewEdge?: (event: MouseEvent | TouchEvent) => void;
    rerender: () => void;
    setState: (state: Partial<ITheGraphEditorState>) => void;
    showContext: (options: ITheGraphEditorContextMenuOptions) => void;
    state: ITheGraphEditorState;
    theme: 'dark' | 'light';
    triggerAutolayout: () => void;
    triggerFit: () => void;
    unselectAll: () => void;
    zoomFactor: number;
    zoomX: number;
    zoomY: number;
  }
  export interface ITheGraphEditorGraphState {
    animatedEdges: GraphEdge[];
    displaySelectionGroup: boolean;
    edgePreview: GraphEdge | null;
    edgePreviewX: number;
    edgePreviewY: number;
    errorNodes: GraphNode[];
    forceSelection: boolean;
    offsetX: number;
    offsetY: number;
    selectedEdges: GraphEdge[];
    selectedNodes: GraphNode[];
  }
  export interface ITheGraphEditorGraphProps {
    app: ITheGraphEditor | null;
    graph: Graph;
    library: IFBPLibrary;
    // allows overriding icon of a node
    nodeIcons: Record<string, string>;
    offsetX: number;
    offsetY: number;
  }
  export interface ITheGraphEditorGraph {
    addEdge: Function;
    cancelPreviewEdge: Function;
    context: {};
    dirty: false;
    edgeStart: Function;
    getComponentInfo: Function;
    getGraphInport: Function;
    getGraphOutport: Function;
    getNodeInport: Function;
    getNodeOutport: Function;
    getPorts: Function;
    markDirty: Function;
    mounted: true;
    moveGroup: Function;
    /**
     * ```json
     * {"adapters/ObjectToString_emfdv":{"inports":{"in":{"label":"in","type":"object","x":0,"y":18},"assoc":{"label":"assoc","type":"string","x":0,"y":36,"route":0},"delim":{"label":"delim","type":"string","x":0,"y":54,"route":0}},"outports":{"out":{"label":"out","type":"string","x":72,"y":36,"route":0}}},"adapters/PacketsToObject_llf0k":{"inports":{"in":{"label":"in","type":"all","x":0,"y":36,"route":0}},"outports":{"out":{"label":"out","type":"object","x":72,"y":36}}}}
     * ```
     */
    portInfo?: Record<string, { inports: INoFloProtocolComponentPort[]; outports: INoFloProtocolComponentPort[] }>;
    props: ITheGraphEditorGraphProps;
    refs: {};
    renderPreviewEdge: Function;
    resetPortRoute: Function;
    setAnimatedEdges: Function;
    setErrorNodes: Function;
    setSelectedEdges: Function;
    setSelectedNodes: Function;
    state: ITheGraphEditorGraphState;
    subscribeGraph: Function;
    triggerRender: Function;
    updateIcon: Function;
  }
  export function App(props: ITheGraphProps): JSX.Element;

  export interface INoFloProtocolComponentPort {
    addressable?: boolean;
    /**
     * @example default: 'default-value',
     */
    default?: JSONSchema7Type;
    description: string;
    id: string;
    required?: boolean;
    schema?: string;
    type: 'all' | 'array' | 'boolean' | 'bang' | 'int' | 'number' | 'object' | 'string';
    /**
     * @example values: 'noflo is awesome'.split(' ')
     */
    values?: JSONSchema7Type[];
  }
  /**
   * ```json
   * {
        "name": "adapters/ObjectToString",
        "icon": "font",
        "description": "stringifies a simple object with configurable associator and delimiter",
        "subgraph": false,
        "inports": [
            {
                "id": "in",
                "type": "object",
                "schema": null,
                "required": false,
                "description": "Object to convert",
                "name": "in"
            },
            {
                "id": "assoc",
                "type": "string",
                "schema": null,
                "required": false,
                "default": ":",
                "description": "Associating string for key/value pairs",
                "name": "assoc"
            },
            {
                "id": "delim",
                "type": "string",
                "schema": null,
                "required": false,
                "default": ",",
                "description": "Delimiter string between object properties",
                "name": "delim"
            }
        ],
        "outports": [
            {
                "id": "out",
                "type": "string",
                "schema": null,
                "required": false,
                "description": "string",
                "name": "out"
            }
        ]
    }
    ```
   */
  export interface INoFloUIComponentPort extends Omit<INoFloProtocolComponentPort, 'id'> {
    name: string;
  }
  function componentsFromGraph(graph: Graph): INoFloUIComponent[];
  export interface INoFloUIComponent {
    description: string;
    icon: string;
    inports?: INoFloUIComponentPort[];
    name: string;
    outports?: INoFloUIComponentPort[];
    /**
     * True means this is not a Elementary component
     */
    subgraph?: boolean;
    unnamespaced?: boolean;
  }
  export interface INoFloProtocolComponent extends Omit<INoFloUIComponent, 'inports' | 'outports'> {
    inPorts?: INoFloProtocolComponentPort[];
    outPorts?: INoFloProtocolComponentPort[];
  }
  export type IFBPLibrary = Record<string, INoFloUIComponent>;
  function libraryFromGraph(graph: Graph): IFBPLibrary;

  export const library = {
    componentsFromGraph,
    libraryFromGraph,
  };

  function styleFromTheme(theme: 'dark' | 'light'): {
    height: number;
    lineWidth: number;
    nodeSize: number;
    width: number;
  };
  function renderThumbnail(contextcontext: CanvasRenderingContext2D | null, graph: Graph, properties: ReturnType<typeof styleFromTheme>): {
    rectangle: number[];
    scale: number;
  };
  export const thumb = {
    styleFromTheme,
    render: renderThumbnail,
  };

  export interface ITheGraphNavProps {
    graph: Graph;
    height: number;
    onPanTo?: (panTo: {
      x: number;
      y: number;
    }, event: MouseEvent) => void;
    onTap?: () => void;
    viewrectangle?: number[];
    viewscale: number;
    width: number;
  }
  function NavComponent(props: ITheGraphNavProps): JSX.Element;
  export const nav = {
    Component: NavComponent,
  };

  /**
   * @url https://github.com/flowhub/the-graph/blob/7e9457ece2923dd86b1078019d50fc18e7052770/the-graph/font-awesome-unicode-map.js
   * ```js
   * // This file is generated via `npm run fontawesome`
      module.exports = {
        '500px': '',
        'address-book': '',
        'address-book-o': '',
    ```
   */
  export const FONT_AWESOME: Record<string, string>;

  /**
   *
   * @param keilerGraph assign by
   * ```js
   * autolayouter = klayNoflo.init({
      onSuccess: this.applyAutolayout.bind(this),
      workerScript: 'vendor/klayjs/klay.js',
    })
    ```
   * @param props `{ snap: 36 }` in noflo-ui example.
   */
  function applyAutolayout(graph: Graph, keilerGraph, props: { snap: number }): void;
  export const autolayout = {
    applyToGraph: applyAutolayout,
  };
}
declare module 'the-graph/the-graph-nav/the-graph-nav' {
  import { nav } from 'the-graph';
  export const Component = nav.Component;
}

declare module 'the-graph/the-graph/the-graph-autolayout' {
  import { autolayout } from 'the-graph';
  // eslint-disable-next-line unicorn/prefer-export-from
  export default autolayout;
}

declare module 'klayjs-noflo/klay-noflo' {
  import { Graph } from 'fbp-graph';
  export interface IKlayLayoutOptions {
    direction: string;
    graph: Graph;
    options: {
      algorithm: string;
      borderSpacing: number;
      crossMin: string;
      direction: string;
      edgeRouting: string;
      edgeSpacingFactor: number;
      inLayerSpacingFactor: number;
      intCoordinates: boolean;
      layoutHierarchy: boolean;
      nodeLayering: string;
      nodePlace: string;
      spacing: number;
    };
    portInfo:
      | Record<string, {
        inports: INoFloProtocolComponentPort[];
        outports: INoFloProtocolComponentPort[];
      }>
      | undefined;
  }
  export const klayNoflo: {
    init(options: { onSuccess: (keilerGraph: unknown) => void; workerScript: string }): typeof klayNoflo;
    layout(options: IKlayLayoutOptions): void;
  };
}