feat(network): remove prop-types

packages/network/package.json

@@ -42,7 +42,6 @@
   },
   "peerDependencies": {
     "@nivo/core": "0.76.0",
-    "prop-types": ">= 15.5.10 < 16.0.0",
     "react": ">= 16.14.0 < 18.0.0"
   },
   "publishConfig": {

packages/network/src/AnimatedLinks.tsx

@@ -1,5 +1,4 @@
 import { memo } from 'react'
-import PropTypes from 'prop-types'
 import { TransitionMotion, spring } from 'react-motion'
 import { useMotionConfig } from '@nivo/core'
 import Link from './Link'
@@ -16,7 +15,13 @@ const willEnter = ({ style, data }) => {
     }
 }
 
-const AnimatedLinks = ({ links, linkThickness, linkColor }) => {
+interface AnimatedLinksProps {
+    // links: PropTypes.array.isRequired,
+    // linkThickness: PropTypes.func.isRequired,
+    // linkColor: PropTypes.func.isRequired,
+}
+
+const AnimatedLinks = ({ links, linkThickness, linkColor }: AnimatedLinksProps) => {
     const { springConfig } = useMotionConfig()
 
     return (
@@ -55,10 +60,4 @@ const AnimatedLinks = ({ links, linkThickness, linkColor }) => {
     )
 }
 
-AnimatedLinks.propTypes = {
-    links: PropTypes.array.isRequired,
-    linkThickness: PropTypes.func.isRequired,
-    linkColor: PropTypes.func.isRequired,
-}
-
 export default memo(AnimatedLinks)

packages/network/src/AnimatedNodes.tsx

@@ -1,5 +1,4 @@
 import { memo } from 'react'
-import PropTypes from 'prop-types'
 import { TransitionMotion, spring } from 'react-motion'
 import { useMotionConfig } from '@nivo/core'
 import Node from './Node'
@@ -20,7 +19,21 @@ const willLeave =
         scale: spring(0, springConfig),
     })
 
-const AnimatedNodes = ({ nodes, color, borderColor, ...props }) => {
+interface AnimatedNodesProps {
+    // nodes: PropTypes.array.isRequired,
+    nodes: any[]
+    // color: PropTypes.func.isRequired,
+    color: Function
+    borderWidth: number
+    // borderColor: PropTypes.func.isRequired,
+    borderColor: Function
+    // handleNodeHover: PropTypes.func.isRequired,
+    handleNodeHover: Function
+    // handleNodeLeave: PropTypes.func.isRequired,
+    handleNodeLeave: Function
+}
+
+const AnimatedNodes = ({ nodes, color, borderColor, ...props }: AnimatedNodesProps) => {
     const { springConfig } = useMotionConfig()
 
     return (
@@ -61,13 +74,4 @@ const AnimatedNodes = ({ nodes, color, borderColor, ...props }) => {
     )
 }
 
-AnimatedNodes.propTypes = {
-    nodes: PropTypes.array.isRequired,
-    color: PropTypes.func.isRequired,
-    borderWidth: PropTypes.number.isRequired,
-    borderColor: PropTypes.func.isRequired,
-    handleNodeHover: PropTypes.func.isRequired,
-    handleNodeLeave: PropTypes.func.isRequired,
-}
-
 export default memo(AnimatedNodes)

packages/network/src/Link.tsx

@@ -1,7 +1,16 @@
 import { memo } from 'react'
-import PropTypes from 'prop-types'
 
-const Link = ({ sourceX, sourceY, targetX, targetY, thickness, color }) => {
+interface LinkProps {
+    link: any
+    sourceX: number
+    sourceY: number
+    targetX: number
+    targetY: number
+    thickness: number
+    color: string
+}
+
+const Link = ({ sourceX, sourceY, targetX, targetY, thickness, color }: LinkProps) => {
     return (
         <line
             stroke={color}
@@ -15,14 +24,4 @@ const Link = ({ sourceX, sourceY, targetX, targetY, thickness, color }) => {
     )
 }
 
-Link.propTypes = {
-    link: PropTypes.object.isRequired,
-    sourceX: PropTypes.number.isRequired,
-    sourceY: PropTypes.number.isRequired,
-    targetX: PropTypes.number.isRequired,
-    targetY: PropTypes.number.isRequired,
-    thickness: PropTypes.number.isRequired,
-    color: PropTypes.string.isRequired,
-}
-
 export default memo(Link)

packages/network/src/Network.tsx

@@ -2,7 +2,7 @@ import { createElement, Fragment, useCallback } from 'react'
 import { withContainer, useDimensions, SvgWrapper, useTheme, useMotionConfig } from '@nivo/core'
 import { useInheritedColor } from '@nivo/colors'
 import { useTooltip } from '@nivo/tooltip'
-import { NetworkPropTypes, NetworkDefaultProps } from './props'
+import { NetworkDefaultProps } from './props'
 import { useNetwork, useNodeColor, useLinkThickness } from './hooks'
 import AnimatedNodes from './AnimatedNodes'
 import StaticNodes from './StaticNodes'
@@ -120,7 +120,6 @@ const Network = props => {
     )
 }
 
-Network.propTypes = NetworkPropTypes
 Network.defaultProps = NetworkDefaultProps
 
 export default withContainer(Network)

packages/network/src/NetworkCanvas.tsx

@@ -1,10 +1,9 @@
 import { useCallback, useRef, useEffect } from 'react'
-
 import * as React from 'react'
 import { getDistance, getRelativeCursor, withContainer, useDimensions, useTheme } from '@nivo/core'
 import { useInheritedColor } from '@nivo/colors'
 import { useTooltip } from '@nivo/tooltip'
-import { NetworkCanvasPropTypes, NetworkCanvasDefaultProps } from './props'
+import { NetworkCanvasDefaultProps } from './props'
 import { useNetwork, useNodeColor, useLinkThickness } from './hooks'
 import NetworkNodeTooltip from './NetworkNodeTooltip'
 
@@ -187,7 +186,6 @@ const NetworkCanvas = props => {
     )
 }
 
-NetworkCanvas.propTypes = NetworkCanvasPropTypes
 NetworkCanvas.defaultProps = NetworkCanvasDefaultProps
 
 export default withContainer(NetworkCanvas)

packages/network/src/NetworkNodeTooltip.tsx

@@ -1,8 +1,16 @@
 import { memo } from 'react'
-import PropTypes from 'prop-types'
 import { BasicTooltip } from '@nivo/tooltip'
 
-const NetworkNodeTooltip = ({ node, format, tooltip }) => (
+interface NetworkNodeTooltipProps {
+    // node: PropTypes.shape({
+    //     id: PropTypes.string.isRequired,
+    //     color: PropTypes.string.isRequired,
+    // }).isRequired,
+    // format: PropTypes.func,
+    // tooltip: PropTypes.func,
+}
+
+const NetworkNodeTooltip = ({ node, format, tooltip }: NetworkNodeTooltipProps) => (
     <BasicTooltip
         id={node.id}
         enableChip={true}
@@ -12,13 +20,4 @@ const NetworkNodeTooltip = ({ node, format, tooltip }) => (
     />
 )
 
-NetworkNodeTooltip.propTypes = {
-    node: PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        color: PropTypes.string.isRequired,
-    }).isRequired,
-    format: PropTypes.func,
-    tooltip: PropTypes.func,
-}
-
 export default memo(NetworkNodeTooltip)

packages/network/src/Node.tsx

@@ -1,5 +1,18 @@
 import { memo } from 'react'
-import PropTypes from 'prop-types'
+
+interface NodeProps {
+    node: any
+    x: number
+    y: number
+    radius: number
+    color: string
+    borderWidth: number
+    borderColor: string
+    scale?: number
+    handleNodeClick: Function
+    handleNodeHover: Function
+    handleNodeLeave: Function
+}
 
 const Node = ({
     node,
@@ -13,7 +26,7 @@ const Node = ({
     handleNodeClick,
     handleNodeHover,
     handleNodeLeave,
-}) => {
+}: NodeProps) => {
     return (
         <circle
             transform={`translate(${x},${y}) scale(${scale})`}
@@ -29,17 +42,4 @@ const Node = ({
     )
 }
 
-Node.propTypes = {
-    node: PropTypes.object.isRequired,
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    radius: PropTypes.number.isRequired,
-    color: PropTypes.string.isRequired,
-    borderWidth: PropTypes.number.isRequired,
-    borderColor: PropTypes.string.isRequired,
-    scale: PropTypes.number,
-    handleNodeHover: PropTypes.func.isRequired,
-    handleNodeLeave: PropTypes.func.isRequired,
-}
-
 export default memo(Node)

packages/network/src/StaticLinks.tsx

@@ -1,8 +1,13 @@
 import { memo } from 'react'
-import PropTypes from 'prop-types'
 import Link from './Link'
 
-const StaticLinks = ({ links, linkThickness, linkColor }) => {
+interface StaticLinksProps {
+    // links: PropTypes.array.isRequired,
+    // linkThickness: PropTypes.func.isRequired,
+    // linkColor: PropTypes.func.isRequired,
+}
+
+const StaticLinks = ({ links, linkThickness, linkColor }: StaticLinksProps) => {
     return links.map(link => {
         return (
             <Link
@@ -19,10 +24,4 @@ const StaticLinks = ({ links, linkThickness, linkColor }) => {
     })
 }
 
-StaticLinks.propTypes = {
-    links: PropTypes.array.isRequired,
-    linkThickness: PropTypes.func.isRequired,
-    linkColor: PropTypes.func.isRequired,
-}
-
 export default memo(StaticLinks)

packages/network/src/StaticNodes.tsx

@@ -1,8 +1,16 @@
 import { memo } from 'react'
-import PropTypes from 'prop-types'
 import Node from './Node'
 
-const StaticNodes = ({ nodes, color, borderColor, ...props }) => {
+interface StaticNodesProps {
+    nodes: any[]
+    color: Function
+    borderWidth: number
+    borderColor: Function
+    handleNodeHover: Function
+    handleNodeLeave: Function
+}
+
+const StaticNodes = ({ nodes, color, borderColor, ...props }: StaticNodesProps) => {
     return nodes.map(node => {
         return (
             <Node
@@ -19,13 +27,4 @@ const StaticNodes = ({ nodes, color, borderColor, ...props }) => {
     })
 }
 
-StaticNodes.propTypes = {
-    nodes: PropTypes.array.isRequired,
-    color: PropTypes.func.isRequired,
-    borderWidth: PropTypes.number.isRequired,
-    borderColor: PropTypes.func.isRequired,
-    handleNodeHover: PropTypes.func.isRequired,
-    handleNodeLeave: PropTypes.func.isRequired,
-}
-
 export default memo(StaticNodes)

packages/network/src/props.ts

@@ -1,53 +1,3 @@
-import PropTypes from 'prop-types'
-import { motionPropTypes } from '@nivo/core'
-import { inheritedColorPropType } from '@nivo/colors'
-
-const commonPropTypes = {
-    nodes: PropTypes.arrayOf(
-        PropTypes.shape({
-            id: PropTypes.string.isRequired,
-        })
-    ).isRequired,
-    links: PropTypes.arrayOf(
-        PropTypes.shape({
-            source: PropTypes.string.isRequired,
-            target: PropTypes.string.isRequired,
-        })
-    ).isRequired,
-
-    layers: PropTypes.arrayOf(
-        PropTypes.oneOfType([PropTypes.oneOf(['links', 'nodes']), PropTypes.func])
-    ).isRequired,
-
-    linkDistance: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.number])
-        .isRequired,
-    repulsivity: PropTypes.number.isRequired,
-    distanceMin: PropTypes.number.isRequired,
-    distanceMax: PropTypes.number.isRequired,
-    iterations: PropTypes.number.isRequired,
-
-    nodeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
-    nodeBorderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
-    nodeBorderColor: inheritedColorPropType.isRequired,
-
-    linkThickness: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
-    linkColor: inheritedColorPropType.isRequired,
-
-    isInteractive: PropTypes.bool.isRequired,
-    onClick: PropTypes.func,
-}
-
-export const NetworkPropTypes = {
-    ...commonPropTypes,
-    role: PropTypes.string.isRequired,
-    ...motionPropTypes,
-}
-
-export const NetworkCanvasPropTypes = {
-    pixelRatio: PropTypes.number.isRequired,
-    ...commonPropTypes,
-}
-
 const commonDefaultProps = {
     layers: ['links', 'nodes'],
 

packages/network/src/types.ts

@@ -43,6 +43,41 @@ export interface NetworkCustomLayerProps {
 }
 export type NetworkCustomLayer = FunctionComponent<NetworkCustomLayerProps>
 
+/*
+nodes: PropTypes.arrayOf(
+    PropTypes.shape({
+        id: PropTypes.string.isRequired,
+    })
+).isRequired,
+links: PropTypes.arrayOf(
+    PropTypes.shape({
+        source: PropTypes.string.isRequired,
+        target: PropTypes.string.isRequired,
+    })
+).isRequired,
+
+layers: PropTypes.arrayOf(
+    PropTypes.oneOfType([PropTypes.oneOf(['links', 'nodes']), PropTypes.func])
+).isRequired,
+
+linkDistance: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.number])
+    .isRequired,
+repulsivity: PropTypes.number.isRequired,
+distanceMin: PropTypes.number.isRequired,
+distanceMax: PropTypes.number.isRequired,
+iterations: PropTypes.number.isRequired,
+
+nodeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+nodeBorderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
+nodeBorderColor: inheritedColorPropType.isRequired,
+
+linkThickness: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
+linkColor: inheritedColorPropType.isRequired,
+
+isInteractive: PropTypes.bool.isRequired,
+onClick: PropTypes.func,
+*/
+
 export interface NetworkCommonProps {
     margin: Box