fix: typeings

packages/components/src/Inject/Inject.component.tsx

@@ -50,7 +50,7 @@ function Inject({ getComponent, component, ...props }: InjectProps) {
 Inject.map = function injectMap(
 	getComponent: GetComponentType,
 	array: InjectConfig[],
-	CustomInject: (props: InjectProps) => JSX.Element | null = Inject,
+	CustomInject: FunctionComponent<InjectProps> = Inject,
 ): JSX.Element[] {
 	return array.map((props, index) => (
 		<CustomInject key={index} getComponent={getComponent} {...props} />
@@ -162,7 +162,7 @@ Inject.getReactElement = function getReactElement(
 		}
 		return <CustomInject {...props} key={key} />;
 	}
-	return data; // We do not throw anything, proptypes should do the job
+	return null; // We do not throw anything, proptypes should do the job
 };
 // @ts-ignore
 Inject.getReactElement.propTypes = PropTypes.oneOfType([

packages/design-system/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -15,10 +15,12 @@ type BreadcrumbsLink = {
 	label: string;
 	href: string;
 	target?: string;
+	as: never;
 };
 
 type BreadcrumbsRouterLink = {
 	label: string;
+	href: never;
 	target?: string;
 	as: ReactElement;
 };
@@ -38,12 +40,13 @@ function BreadcrumbLink({
 	link: BreadcrumbsLink | BreadcrumbsRouterLink;
 	isLastLink: boolean;
 }) {
-	const destinationProps = 'href' in link ? { href: link.href } : { as: link.as };
+	// const destinationProps = 'href' in link ? { href: link.href } : { as: link.as };
 	return (
 		<li className={styles.entry}>
 			<StackHorizontal gap="S" align="center" wrap="nowrap">
 				<Link
-					{...destinationProps}
+					as={link.as}
+					href={link.href}
 					target={link.target}
 					withEllipsis
 					aria-current={isLastLink ? 'page' : undefined}
@@ -79,15 +82,15 @@ export const Breadcrumbs = forwardRef(
 								<Dropdown
 									aria-label={t('COLLAPSED_LINKS_MENU', 'Collapsed links')}
 									items={collapsed.map(collapsedLinks => {
-										const refinedProp =
-											'href' in collapsedLinks
-												? { href: collapsedLinks.href }
-												: { as: collapsedLinks.as };
+										// const refinedProp =
+										// 	'href' in collapsedLinks
+										// 		? { href: collapsedLinks.href }
+										// 		: { as: collapsedLinks.as };
 										return {
-											label: collapsedLinks.label,
-											target: collapsedLinks.target,
+											// label: collapsedLinks.label,
+											// target: collapsedLinks.target,
 											type: 'link',
-											...refinedProp,
+											...collapsedLinks,
 										};
 									})}
 								>

packages/design-system/src/components/Combobox/Combobox.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useRef, FocusEvent } from 'react';
+import { useState, useCallback, useEffect, useRef, FocusEvent, KeyboardEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useId } from '../../useId';
@@ -20,7 +20,7 @@ export const Combobox = ({ values, ...rest }: ComboboxProps) => {
 	const id = useId(rest.id);
 	const boxId = useId();
 	const noValue = t('COMBOBOX_NOT_RESULT', 'No results found');
-	const onKeydown = useCallback(e => {
+	const onKeydown = useCallback((e: KeyboardEvent) => {
 		if (e.key === 'Escape') {
 			setShow(false);
 		}

packages/design-system/src/components/Form/Primitives/Field/Field.tsx

@@ -69,7 +69,7 @@ const Field = forwardRef(
 		return (
 			<StackVertical gap="XXS" align="stretch" justify="start" height="100%" noShrink>
 				{LabelComponent}
-				{cloneElement(children, { id: fieldID, hasError, name, required, ...rest }, ref)}
+				{cloneElement(children, { id: fieldID, hasError, name, required, ref, ...rest })}
 				{link && <Link {...link} />}
 				{description && <Description />}
 			</StackVertical>

packages/flow-designer/src/components/configuration/NodeType.component.ts

@@ -1,8 +1,13 @@
-import type { ReactNode } from 'react';
+import type { ComponentType } from 'react';
 import invariant from 'invariant';
 
+export type NodeTypeProps = {
+	type: string;
+	component: ComponentType<any>;
+};
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function NodeType({ type, component }: { type: string; component: ReactNode }) {
+function NodeType({ type, component }: NodeTypeProps) {
 	invariant(
 		false,
 		'<NodeType> elements are for DataFlow configuration only and should not be rendered',

packages/flow-designer/src/components/configuration/NodeType.test.tsx

@@ -1,12 +1,13 @@
 import { render } from '@testing-library/react';
 import NodeType from './NodeType.component';
 
-const mockComponent = () => <div />;
+const MockComponent = () => <div />;
+MockComponent.displayName = 'MockComponent';
 
 describe('Testing <NodeType>', () => {
 	it('should log an error if rendered', () => {
 		expect(() => {
-			render(<NodeType type="string" component={mockComponent} />);
+			render(<NodeType type="string" component={MockComponent} />);
 		}).toThrowError(
 			'<NodeType> elements are for DataFlow configuration only and should not be rendered',
 		);

packages/flow-designer/src/components/link/LinksRenderer.component.tsx

@@ -1,37 +1,26 @@
-import { Component } from 'react';
-import invariant from 'invariant';
-import get from 'lodash/get';
-import { LinkRecordMap, PortRecordMap, LinkRecord } from '../../customTypings/index.d';
+import { Component, ComponentType } from 'react';
+import { LinkRecordMap, PortRecordMap } from '../../customTypings/index.d';
 
 type Props = {
 	links: LinkRecordMap;
 	ports: PortRecordMap;
-	linkTypeMap: Object;
+	linkTypeMap: Record<string, { component: ComponentType<any> }>;
 };
 
 class LinksRender extends Component<Props> {
-	constructor(props: Props) {
-		super(props);
-		this.renderLink = this.renderLink.bind(this);
-	}
-
-	renderLink(link: LinkRecord) {
-		const ConcreteLink = get((this.props.linkTypeMap as any)[link.getLinkType()], 'component');
-		const source = this.props.ports.get(link.sourceId);
-		const target = this.props.ports.get(link.targetId);
-		if (!ConcreteLink) {
-			invariant(
-				false,
-				`<LinksRenderer /> the defined link type in your graph model
-				hasn't been mapped into the dataflow configuration,
-				check LinkType documentation`,
-			);
-		}
-		return <ConcreteLink link={link} source={source} target={target} key={link.id} />;
-	}
-
 	render() {
-		return <g>{this.props.links.valueSeq().map(this.renderLink)}</g>;
+		const links = this.props.links.toArray();
+		return (
+			<g>
+				{links.map(link => {
+					const ConcreteLink = this.props.linkTypeMap[link.getLinkType()].component;
+					const source = this.props.ports.get(link.sourceId);
+					const target = this.props.ports.get(link.targetId);
+
+					return <ConcreteLink link={link} source={source} target={target} key={link.id} />;
+				})}
+			</g>
+		);
 	}
 }
 

packages/flow-designer/src/components/node/NodesRenderer.component.tsx

@@ -5,7 +5,7 @@ import { NodeRecordMap, NodeRecord, Id, Position } from '../../customTypings/ind
 
 type Props = {
 	nodes: NodeRecordMap;
-	nodeTypeMap: Object;
+	nodeTypeMap: object;
 	startMoveNodeTo: (nodeId: Id, nodePosition: string) => void;
 	moveNodeTo: (nodeId: Id, nodePosition: Position) => void;
 	moveNodeToEnd: (nodeId: Id, nodePosition: Position) => void;
@@ -41,7 +41,7 @@ class NodesRenderer extends Component<Props> {
 	}
 
 	render() {
-		return <g>{this.props.nodes.valueSeq().map(this.renderNode)}</g>;
+		return <g>{this.props.nodes.toArray().map(this.renderNode)}</g>;
 	}
 }
 

packages/flow-designer/src/components/port/AbstractPort.component.tsx

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import type { MouseEventHandler, ReactChildren } from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
 import { select } from 'd3';
 
 import { Port, Position } from '../../api';
@@ -8,7 +8,7 @@ import { PortRecord } from '../../customTypings/index.d';
 type Props = {
 	port?: PortRecord;
 	onClick?: MouseEventHandler;
-	children?: ReactChildren;
+	children?: ReactNode | ReactNode[];
 };
 
 class AbstractPort extends Component<Props> {

packages/flow-designer/src/components/port/PortsRenderer.component.tsx

@@ -3,14 +3,14 @@ import get from 'lodash/get';
 import { Port } from '../../api';
 import { PortRecord, PortRecordMap } from '../../customTypings/index.d';
 
-function PortsRenderer({ ports, portTypeMap }: { ports: PortRecordMap; portTypeMap: Object }) {
+function PortsRenderer({ ports, portTypeMap }: { ports: PortRecordMap; portTypeMap: object }) {
 	const renderPort = (port: PortRecord) => {
 		const type = Port.getComponentType(port);
 		const ConcretePort = get((portTypeMap as any)[type], 'component');
 		return <ConcretePort key={Port.getId(port)} port={port} />;
 	};
 
-	return <g>{ports.valueSeq().map(renderPort)}</g>;
+	return <g>{ports.toArray().map(renderPort)}</g>;
 }
 
 export default PortsRenderer;

packages/flow-designer/src/customTypings/index.d.ts

@@ -32,7 +32,7 @@ export interface PortGraphicalAttributes {
 
 export interface PortData {
 	flowType: string;
-	properties?: {};
+	properties?: object;
 }
 
 export interface Port {
@@ -48,15 +48,15 @@ export interface NodeGraphicalAttributes {
 	nodeType: string;
 	label: string;
 	description: string;
-	properties?: {};
+	properties?: object;
 }
 
 export interface NodeData {
 	datasetId: Id;
-	properties?: {};
+	properties?: object;
 	label: string;
 	description: string;
-	datasetInfo?: {};
+	datasetInfo?: object;
 }
 
 export interface Node {
@@ -69,11 +69,11 @@ export interface Node {
 
 export interface LinkGraphicalAttributes {
 	linkType: string;
-	properties?: {};
+	properties?: object;
 }
 
 export interface LinkData {
-	properties?: {};
+	properties?: object;
 }
 
 export interface Link {
@@ -118,22 +118,22 @@ export type LinkRecord = Record<Link> & {
 /** $STATE */
 
 export type PortRecordMap = Map<Id, PortRecord>;
-export type NodeRecordMap = Map<Id, NodeRecord|NestedNodeRecord>;
+export type NodeRecordMap = Map<Id, NodeRecord | NestedNodeRecord>;
 export type LinkRecordMap = Map<Id, LinkRecord>;
 
-type getStateNodes = (selector: ['nodes', Id]) => NodeRecord;
-type getStatePorts = (selector: ['ports', Id]) => PortRecord;
-type getStateLinks = (selector: ['links', Id]) => LinkRecord;
-type getStateIn = (selector: ['in', Id]) => Id;
-type getStateOut = (selector: ['out', Id]) => Id;
+type GetStateNodes = (selector: ['nodes', Id]) => NodeRecord;
+type GetStatePorts = (selector: ['ports', Id]) => PortRecord;
+type GetStateLinks = (selector: ['links', Id]) => LinkRecord;
+type GetStateIn = (selector: ['in', Id]) => Id;
+type GetStateOut = (selector: ['out', Id]) => Id;
 
 export type State = {
 	in: Map<string, Map<Id, Id>>;
 	parents: Map<string, Map<Id, Id>>;
 	transform: Transform;
 	transformToApply?: Transform;
 	out: Map<string, Map<Id, Id>>;
-	nodes: Map<string, Map<Id, NodeRecord|NestedNodeRecord>>;
+	nodes: Map<string, Map<Id, NodeRecord | NestedNodeRecord>>;
 	ports: Map<string, Map<Id, PortRecord>>;
 	children: Map<string, Map<Id, Id>>;
 	nodeTypes: Map<string, Map<Id, any>>;
@@ -169,7 +169,7 @@ export type PortAction =
 	| {
 			type: 'FLOWDESIGNER_PORT_SET_DATA';
 			portId: Id;
-			data: Object;
+			data: object;
 	  }
 	| {
 			type: 'FLOWDESIGNER_PORT_REMOVE_DATA';