Support for Typescript please about flume HOT 5 OPEN

declare module 'flume' {
  export namespace Colors {
    const yellow: string
    const orange: string
    const red: string
    const pink: string
    const purple: string
    const blue: string
    const green: string
    const grey: string
  }

  type ControlType = 'text' | 'number' | 'checkbox' | 'select' | 'multiselect' | 'custom'

  type ControlSetValueFn<V> = (newData: V, oldData: V) => V

  type CustomControlRenderFn<V> = <C = Object, I = Object>(
    data: V,
    onChange: (data: V) => void,
    context: C,
    redraw: () => void, // TODO: type
    portProps: PortProps<V>,
    inputData: I,
  ) => JSX.Element

  export interface SelectControlOption {
    value: string
    label?: string
    description?: string
  }

  interface Control<V> {
    type: ControlType
    label: string
    name: string
    setValue?: ControlSetValueFn<V>
  }

  interface TextControl extends Control {
    type: 'text'
    placeholder?: string // FixMe doesnt work for now
    defaultValue: string
  }

  interface NumberControl extends Control {
    type: 'number'
    defaultValue: number
    step?: number
  }

  interface CheckboxControl extends Control {
    type: 'checkbox'
    defaultValue: boolean
  }

  interface SelectControl extends Control {
    type: 'select'
    getOptions?: () => void // TODO: type
    placeholder?: string
    options: SelectControlOption[]
    defaultValue: string
  }

  interface MultiSelectControl extends Control {
    type: 'multiselect'
    getOptions?: () => void // TODO: type
    placeholder?: string
    options: SelectControlOption[]
    defaultValue: string[]
  }

  interface CustomControl<V> extends Control {
    type: 'custom'
    defaultValue: V
    render: CustomControlRenderFn<V>
  }

  export interface ControlConfig<V> {
    name: string
    label: string
    setValue?: ControlSetValueFn<V>
  }

  export interface TextControlConfig extends ControlConfig<string> {
    placeholder?: string // FixMe doesnt work for now
    defaultValue?: string
  }

  export interface NumberControlConfig extends ControlConfig<number> {
    step?: number
    defaultValue?: number
  }

  export interface CheckboxControlConfig extends ControlConfig<boolean> {
    defaultValue?: boolean
  }

  export interface SelectControlConfig extends ControlConfig<string> {
    options: SelectControlOption[]
    defaultValue?: string
  }

  export interface MultiSelectControlConfig extends ControlConfig<string[]> {
    options: SelectControlOption[]
    defaultValue?: string[]
  }

  export interface CustomControlConfig<V> extends ControlConfig<V> {
    render: CustomControlRenderFn<V>
  }

  export namespace Controls {
    function text (config: TextControlConfig): TextControl
    function select (config: SelectControlConfig): SelectControl
    function number (config: NumberControlConfig): NumberControl
    function checkbox (config: CheckboxControlConfig): CheckboxControl
    function multiselect (config: MultiSelectControlConfig): MultiSelectControl
    function custom <V> (config: CustomControlConfig<V>): CustomControl
  }

  interface PortProps<V> {
    label: string
    inputLabel: string
    name: string
    portName: string
    defaultValue: V
    inputData: V
  }

  interface PortConfig<P> {
    type: P
    name: string
    label: string
    color?: string
    acceptTypes?: P[]
    hidePort?: boolean
    controls?: Control[]
  }

  interface Port {
    // ForInternalUse
  }

  type GetPortsFn<P> = (ports: Record<P, (port?: Partial<PortConfig<P>>) => Port>) => Port

  export interface NodeConfig<N, P> {
    type: N
    label: string
    description?: string
    initialWidth?: number
    sortIndex?: number
    addable?: boolean
    deletable?: boolean
    root?: boolean
    inputs?: GetPortsFn<P>
    noControls?: boolean
    outputs?: GetPortsFn<P>
  }


  export interface FlumePlainConfig<P, N> {
    nodeTypes: Record<N, NodeConfig>
    portTypes: Record<P, PortConfig>
  }

  export class FlumeConfig<P = keyof {}, N = keyof {}> implements FlumePlainConfig<P, N> {
    constructor (config?: FlumePlainConfig<P, N>);
    nodeTypes: Record<N, NodeConfig<N, P>>
    portTypes: Record<P, PortConfig<P>>
    addRootNodeType (config: NodeConfig<N, P>): this;
    addNodeType (config: NodeConfig<N, P>): this;
    removeNodeType (type: N): this
    addPortType (config: PortConfig<P>): this;
    removePortType (type: P, { skipDynamicNodesCheck }?: { skipDynamicNodesCheck?: boolean }): this;
  }

  interface NodeEditorConfigProps {
    comments?: any;
    nodes?: any;
    nodeTypes?: Object
    portTypes?: Object
    defaultNodes?: any[]
    context?: Object
    onChange?: any;
    onCommentsChange?: any;
    initialScale?: any;
    spaceToPan?: boolean
    hideComments?: boolean
    disableComments?: boolean
    disableZoom?: boolean
    disablePan?: boolean
    circularBehavior?: any;
    debug?: any;
  }

  export function NodeEditor (params: NodeEditorConfigProps): JSX.Element
}

export enum PortType {
  string = 'string',
  number = 'number'
}

export enum NodeType {
  stringConstant = 'stringConstant',
  numberConstant = 'numberConstant',
  concat = 'contact',
}

const config = new FlumeConfig<PortType, NodeType>()

config
  .addPortType({
    type: PortType.string,
    name: PortType.string,
    label: 'String',
    color: Colors.green,
    controls: [
      Controls.text({
        name: PortType.string,
        label: 'String',
      }),
    ],
  })
  .addPortType({
    type: PortType.number,
    name: PortType.number,
    label: 'Number',
    color: Colors.blue,
    acceptTypes: [PortType.number, PortType.string],
    controls: [
      Controls.number({
        name: PortType.number,
        label: 'Number',
      }),
    ],
  })
  .addNodeType({
    type: NodeType.stringConstant,
    label: 'String Constant',
    description: 'Defined string constant',
    inputs: (ports) => [
      ports.string({ label: 'String', hidePort: true }),
    ],
    outputs: (ports) => [
      ports.string(),
    ],
  })
  .addNodeType({
    type: NodeType.numberConstant,
    label: 'Number Constant',
    description: 'Defined number constant',
    inputs: (ports) => [
      ports.number({ label: 'Number', hidePort: true }),
    ],
    outputs: (ports) => [
      ports.number(),
    ],
  })
  .addNodeType({
    type: NodeType.concat,
    label: 'Concat',
    description: 'Concat number and string',
    inputs: (ports) => [
      ports.string(),
      ports.number(),
    ],
    outputs: (ports) => [
      ports.string(),
    ],
  })

type PortType = 'string' | 'number'
type NodeType = 'stringConstant' | 'numberConstant' | 'concat'

const config = new FlumeConfig<PortType, NodeType>()

config
  .addPortType({
    type: 'string',
    name: 'string',
    label: 'String',
    color: Colors.green,
    controls: [
      Controls.text({
        name: 'string',
        label: 'String',
      }),
    ],
  })
  .addPortType({
    type: 'number',
    name: 'number',
    label: 'Number',
    color: Colors.blue,
    acceptTypes: ['string', 'number'],
    controls: [
      Controls.number({
        name: 'number',
        label: 'Number',
      }),
    ],
  })
  .addNodeType({
    type: 'stringConstant',
    label: 'String Constant',
    description: 'Defined string constant',
    inputs: (ports) => [
      ports.string({ label: 'String', hidePort: true }),
    ],
    outputs: (ports) => [
      ports.string(),
    ],
  })
  .addNodeType({
    type: 'numberConstant',
    label: 'Number Constant',
    description: 'Defined number constant',
    inputs: (ports) => [
      ports.number({ label: 'Number', hidePort: true }),
    ],
    outputs: (ports) => [
      ports.number(),
    ],
  })
  .addNodeType({
    type: 'concat',
    label: 'Concat',
    description: 'Concat number and string',
    inputs: (ports) => [
      ports.string(),
      ports.number(),
    ],
    outputs: (ports) => [
      ports.string(),
    ],
  })

config.addPortType({
    type: "asset",
    name: "asset",
    label: "Asset",
    color: Colors.red,
    controls: [
        Controls.text({label: "Asset Path", name: "path"}),
        Controls.number({label: "Asset ID", name: "id"}),
    ]
});