Merge pull request #53 from jeff-phillips-18/strict

chore(strictFunctionTypes): Set strictFunctionTypes

fed-mini-modules.js

@@ -37,7 +37,7 @@ async function createPackage(file) {
     module: esmRelative,
   };
   const typings = glob.sync(`${root}/src/${fileName}/*.d.ts`);
-  let cmds = [];
+  const cmds = [];
   content.typings = 'index.d.ts';
   cmds.push(copyTypings(typings, `${root}/${fileName}`));
   cmds.push(fse.writeJSON(destFile, content));
@@ -56,6 +56,7 @@ async function run(files) {
       copyTypings(indexTypings, root);
     }
   } catch (error) {
+    // eslint-disable-next-line no-console
     console.error(error);
     process.exit(1);
   }

package.json

@@ -14,8 +14,8 @@
     "start": "yarn build && concurrently --kill-others \"yarn workspace @patternfly/react-topology docs:develop\"",
     "serve:docs": "yarn workspace @patternfly/react-topology docs:serve",
     "clean": "yarn workspace @patternfly/react-topology clean",
-    "lint:js": "node --max-old-space-size=4096 node_modules/.bin/eslint packages --ext js,jsx,ts,tsx --cache",
-    "lint:md": "yarn eslint packages --ext md --no-eslintrc --config .eslintrc-md.json --cache",
+    "lint:js": "eslint . --ext .js,.jsx,.ts,.tsx --color",
+    "lint:md": "eslint packages --ext md --no-eslintrc --config .eslintrc-md.json --cache",
     "lint": "yarn lint:js && yarn lint:md",
     "test": "TZ=EST jest packages",
     "test:a11y": "echo skipping a11y tests for now",

packages/demo-app-ts/src/components/CustomCircleNode.tsx

@@ -3,7 +3,6 @@ import { observer } from 'mobx-react';
 import {
   WithCreateConnectorProps,
   Dimensions,
-  Node,
   WithContextMenuProps,
   WithDragNodeProps,
   WithSelectionProps,
@@ -12,12 +11,13 @@ import {
   ShapeProps,
   useAnchor,
   EllipseAnchor,
-  action
+  action,
+  GraphElement
 } from '@patternfly/react-topology';
 import DemoDefaultNode from './DemoDefaultNode';
 
 type CustomCircleNodeProps = {
-  element: Node;
+  element: GraphElement;
   droppable?: boolean;
   canDrop?: boolean;
 } & WithSelectionProps &

packages/demo-app-ts/src/components/CustomPathNode.tsx

@@ -2,18 +2,18 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import {
   WithCreateConnectorProps,
-  Node,
   WithContextMenuProps,
   WithDragNodeProps,
   WithSelectionProps,
   WithDndDragProps,
-  WithDndDropProps
+  WithDndDropProps,
+  GraphElement
 } from '@patternfly/react-topology';
 import Path from './shapes/Path';
 import DemoDefaultNode from './DemoDefaultNode';
 
 type CustomPathNodeProps = {
-  element: Node;
+  element: GraphElement;
   droppable?: boolean;
   canDrop?: boolean;
 } & WithSelectionProps &

packages/demo-app-ts/src/components/CustomPolygonNode.tsx

@@ -2,18 +2,18 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import {
   WithCreateConnectorProps,
-  Node,
   WithContextMenuProps,
   WithDragNodeProps,
   WithSelectionProps,
   WithDndDragProps,
-  WithDndDropProps
+  WithDndDropProps,
+  GraphElement
 } from '@patternfly/react-topology';
 import Polygon from './shapes/Polygon';
 import DemoDefaultNode from './DemoDefaultNode';
 
 type CustomPolygonNodeProps = {
-  element: Node;
+  element: GraphElement;
   droppable?: boolean;
   canDrop?: boolean;
 } & WithSelectionProps &

packages/demo-app-ts/src/components/CustomRectNode.tsx

@@ -2,20 +2,20 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import {
   WithCreateConnectorProps,
-  Node,
   WithContextMenuProps,
   WithDragNodeProps,
   WithSelectionProps,
   WithDndDragProps,
   WithDndDropProps,
   ShapeProps,
   useAnchor,
-  RectAnchor
+  RectAnchor,
+  GraphElement
 } from '@patternfly/react-topology';
 import DemoDefaultNode from './DemoDefaultNode';
 
 type CustomRectNodeProps = {
-  element: Node;
+  element: GraphElement;
   droppable?: boolean;
   canDrop?: boolean;
 } & WithSelectionProps &

packages/demo-app-ts/src/components/DefaultEdge.tsx

@@ -4,6 +4,7 @@ import {
   Edge,
   EdgeConnectorArrow,
   EdgeTerminalType,
+  GraphElement,
   Layer,
   Point,
   useBendpoint,
@@ -13,7 +14,7 @@ import {
 } from '@patternfly/react-topology';
 
 type EdgeProps = {
-  element: Edge;
+  element: GraphElement;
   dragging?: boolean;
 } & WithSourceDragProps &
   WithTargetDragProps &
@@ -48,9 +49,10 @@ const DefaultEdge: React.FunctionComponent<EdgeProps> = ({
   onShowRemoveConnector,
   onHideRemoveConnector
 }) => {
-  const startPoint = element.getStartPoint();
-  const endPoint = element.getEndPoint();
-  const bendpoints = element.getBendpoints();
+  const edgeElement = element as Edge;
+  const startPoint = edgeElement.getStartPoint();
+  const endPoint = edgeElement.getEndPoint();
+  const bendpoints = edgeElement.getBendpoints();
   const d = `M${startPoint.x} ${startPoint.y} ${bendpoints.map((b: Point) => `L${b.x} ${b.y} `).join('')}L${
     endPoint.x
   } ${endPoint.y}`;
@@ -67,7 +69,7 @@ const DefaultEdge: React.FunctionComponent<EdgeProps> = ({
           onMouseLeave={onHideRemoveConnector}
         />
         {sourceDragRef && <circle ref={sourceDragRef} r={8} cx={startPoint.x} cy={startPoint.y} fillOpacity={0} />}
-        <EdgeConnectorArrow dragRef={targetDragRef} edge={element} terminalType={EdgeTerminalType.directional} />
+        <EdgeConnectorArrow dragRef={targetDragRef} edge={edgeElement} terminalType={EdgeTerminalType.directional} />
       </Layer>
       {bendpoints && bendpoints.map((p, i) => <Bendpoint point={p} key={i.toString()} />)}
     </>

packages/demo-app-ts/src/components/DefaultGroup.tsx

@@ -10,12 +10,13 @@ import {
   WithDndDropProps,
   WithDndDragProps,
   useAnchor,
-  RectAnchor
+  RectAnchor,
+  GraphElement
 } from '@patternfly/react-topology';
 
 type GroupProps = {
   children?: React.ReactNode;
-  element: Node;
+  element: GraphElement;
   droppable?: boolean;
   hover?: boolean;
   canDrop?: boolean;
@@ -36,13 +37,14 @@ const DefaultGroup: React.FunctionComponent<GroupProps> = ({
   hover,
   canDrop
 }) => {
+  const nodeElement = element as Node;
   useAnchor(RectAnchor);
   const boxRef = React.useRef<Rect | null>(null);
   const refs = useCombineRefs<SVGRectElement>(dragNodeRef, dndDragRef, dndDropRef);
 
   if (!droppable || !boxRef.current) {
     // change the box only when not dragging
-    boxRef.current = element.getBounds();
+    boxRef.current = nodeElement.getBounds();
   }
   let fill = '#ededed';
   if (canDrop && hover) {
@@ -53,8 +55,8 @@ const DefaultGroup: React.FunctionComponent<GroupProps> = ({
     fill = element.getData().background;
   }
 
-  if (element.isCollapsed()) {
-    const { width, height } = element.getDimensions();
+  if (nodeElement.isCollapsed()) {
+    const { width, height } = nodeElement.getDimensions();
     return (
       <g>
         <rect

packages/demo-app-ts/src/components/DemoDefaultNode.tsx

@@ -12,11 +12,12 @@ import {
   useCombineRefs,
   useHover,
   getShapeComponent,
-  ShapeProps
+  ShapeProps,
+  GraphElement
 } from '@patternfly/react-topology';
 
 type DemoDefaultNodeProps = {
-  element: Node;
+  element: GraphElement;
   droppable?: boolean;
   canDrop?: boolean;
   getCustomShape?: (node: Node) => React.FunctionComponent<ShapeProps>;
@@ -40,15 +41,16 @@ const DemoDefaultNode: React.FunctionComponent<DemoDefaultNodeProps> = ({
   onShowCreateConnector,
   onContextMenu
 }) => {
+  const nodeElement = element as Node;
   const [hover, hoverRef] = useHover();
   const refs = useCombineRefs(hoverRef, dragNodeRef, dndDragRef);
-  const { width, height } = element.getDimensions();
+  const { width, height } = nodeElement.getDimensions();
 
   const className = classNames('pf-ri-topology__node__background', {
     'pf-m-hover': canDrop && hover,
     'pf-m-selected': selected
   });
-  const ShapeComponent = (getCustomShape && getCustomShape(element)) || getShapeComponent(element);
+  const ShapeComponent = (getCustomShape && getCustomShape(nodeElement)) || getShapeComponent(nodeElement);
 
   React.useEffect(() => {
     if (hover) {
@@ -60,7 +62,7 @@ const DemoDefaultNode: React.FunctionComponent<DemoDefaultNodeProps> = ({
 
   return (
     <g ref={refs} onClick={onSelect} onContextMenu={onContextMenu}>
-      <ShapeComponent className={className} element={element} width={width} height={height} dndDropRef={dndDropRef} />
+      <ShapeComponent className={className} element={nodeElement} width={width} height={height} dndDropRef={dndDropRef} />
     </g>
   );
 };

packages/demo-app-ts/src/components/DemoFinallyNode.tsx

@@ -3,8 +3,8 @@ import { observer } from 'mobx-react';
 import {
   DEFAULT_LAYER,
   FinallyNode,
+  GraphElement,
   Layer,
-  Node,
   ScaleDetailsLevel,
   TOP_LAYER,
   useDetailsLevel,
@@ -14,9 +14,8 @@ import {
 } from '@patternfly/react-topology';
 
 type DemoFinallyNodeProps = {
-  element: Node;
-} & WithContextMenuProps &
-  WithSelectionProps;
+  element: GraphElement;
+} & WithContextMenuProps & WithSelectionProps;
 
 const DemoFinallyNode: React.FunctionComponent<DemoFinallyNodeProps> = ({ ...props }) => {
   const [hover, hoverRef] = useHover();

packages/demo-app-ts/src/components/DemoTaskGroupEdge.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import { Edge, TaskEdge } from '@patternfly/react-topology';
+import { GraphElement, TaskEdge } from '@patternfly/react-topology';
 
 export const GROUPED_PIPELINE_NODE_SEPARATION_HORIZONTAL = 200;
 
 interface DemoTaskEdgeProps {
-  element: Edge;
+  element: GraphElement;
 }
 
 const DemoTaskGroupEdge: React.FunctionComponent<DemoTaskEdgeProps> = props => (

packages/demo-app-ts/src/components/DemoTaskNode.tsx

@@ -3,6 +3,7 @@ import { observer } from 'mobx-react';
 import {
   DEFAULT_LAYER,
   DEFAULT_WHEN_OFFSET,
+  GraphElement,
   Layer,
   Node,
   ScaleDetailsLevel,
@@ -17,9 +18,8 @@ import {
 import { PopoverProps } from '@patternfly/react-core';
 
 type DemoTaskNodeProps = {
-  element: Node;
-} & WithContextMenuProps &
-  WithSelectionProps;
+  element: GraphElement;
+} & WithContextMenuProps & WithSelectionProps;
 
 const DEMO_TIP_TEXT =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.';
@@ -30,6 +30,7 @@ const DemoTaskNode: React.FunctionComponent<DemoTaskNodeProps> = ({
   contextMenuOpen,
   ...rest
 }) => {
+  const nodeElement = element as Node;
   const data = element.getData();
   const [hover, hoverRef] = useHover();
   const detailsLevel = useDetailsLevel();
@@ -49,7 +50,7 @@ const DemoTaskNode: React.FunctionComponent<DemoTaskNodeProps> = ({
     <WhenDecorator
       element={element}
       status={data.whenStatus}
-      leftOffset={hasTaskIcon ? DEFAULT_WHEN_OFFSET + (element.getBounds().height - 4) * 0.75 : DEFAULT_WHEN_OFFSET}
+      leftOffset={hasTaskIcon ? DEFAULT_WHEN_OFFSET + (nodeElement.getBounds().height - 4) * 0.75 : DEFAULT_WHEN_OFFSET}
     />
   ) : null;
 
@@ -62,20 +63,21 @@ const DemoTaskNode: React.FunctionComponent<DemoTaskNodeProps> = ({
 
   return (
     <Layer id={detailsLevel !== ScaleDetailsLevel.high && hover ? TOP_LAYER : DEFAULT_LAYER}>
-      <TaskNode
-        ref={hoverRef}
-        element={element}
-        onContextMenu={data.showContextMenu ? onContextMenu : undefined}
-        contextMenuOpen={contextMenuOpen}
-        scaleNode={(hover || contextMenuOpen) && detailsLevel !== ScaleDetailsLevel.high}
-        hideDetailsAtMedium
-        {...passedData}
-        {...rest}
-        badgePopoverParams={badgePopoverParams}
-        badgeTooltip={data.badgeTooltips && DEMO_TIP_TEXT}
-      >
-        {whenDecorator}
-      </TaskNode>
+      <g ref={hoverRef}>
+        <TaskNode
+          element={element}
+          onContextMenu={data.showContextMenu ? onContextMenu : undefined}
+          contextMenuOpen={contextMenuOpen}
+          scaleNode={(hover || contextMenuOpen) && detailsLevel !== ScaleDetailsLevel.high}
+          hideDetailsAtMedium
+          {...passedData}
+          {...rest}
+          badgePopoverParams={badgePopoverParams}
+          badgeTooltip={data.badgeTooltips && DEMO_TIP_TEXT}
+        >
+          {whenDecorator}
+        </TaskNode>
+      </g>
     </Layer>
   );
 };

packages/demo-app-ts/src/components/FailedEdge.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import { Edge, integralShapePath } from '@patternfly/react-topology';
+import { Edge, GraphElement, integralShapePath } from '@patternfly/react-topology';
 import styles from '@patternfly/react-topology/src/css/topology-components';
 
 interface FailedEdgeProps {
-  element: Edge;
+  element: GraphElement;
 }
 
 const FailedEdge: React.FunctionComponent<FailedEdgeProps> = ({ element }) => {
-  const startPoint = element.getStartPoint();
-  const endPoint = element.getEndPoint();
+  const edgeElement = element as Edge;
+  const startPoint = edgeElement.getStartPoint();
+  const endPoint = edgeElement.getEndPoint();
   const startIndent: number = element.getData()?.indent || 0;
 
   const path = integralShapePath(startPoint, endPoint, startIndent, 10);