Update

packages/redux-devtools-chart-monitor/package.json

@@ -44,7 +44,6 @@
     "@types/redux-devtools-themes": "^1.0.0",
     "d3-state-visualizer": "^1.6.0",
     "deepmerge": "^4.2.2",
-    "prop-types": "^15.8.1",
     "redux-devtools-themes": "^1.0.0"
   },
   "devDependencies": {

packages/redux-devtools-chart-monitor/src/Chart.tsx

@@ -1,7 +1,6 @@
 import React, { Component, createRef } from 'react';
-import PropTypes from 'prop-types';
 import { tree } from 'd3-state-visualizer';
-import type { Node, StyleValue } from 'd3-state-visualizer';
+import type { HierarchyPointNode, Node, StyleValue } from 'd3-state-visualizer';
 import { Action, Dispatch } from 'redux';
 import { LiftedAction, LiftedState } from '@redux-devtools/core';
 import * as themes from 'redux-devtools-themes';
@@ -24,7 +23,7 @@ export interface Props<S, A extends Action<unknown>>
   isSorted: boolean;
   heightBetweenNodesCoeff: number;
   widthBetweenNodesCoeff: number;
-  onClickText: (datum: Node) => void;
+  onClickText: (datum: HierarchyPointNode<Node>) => void;
   tooltipOptions: {
     disabled: boolean;
     offset: {
@@ -39,58 +38,6 @@ export interface Props<S, A extends Action<unknown>>
 }
 
 class Chart<S, A extends Action<unknown>> extends Component<Props<S, A>> {
-  static propTypes = {
-    state: PropTypes.object,
-    rootKeyName: PropTypes.string,
-    pushMethod: PropTypes.oneOf(['push', 'unshift']),
-    tree: PropTypes.shape({
-      name: PropTypes.string,
-      children: PropTypes.array,
-    }),
-    id: PropTypes.string,
-    style: PropTypes.shape({
-      node: PropTypes.shape({
-        colors: PropTypes.shape({
-          default: PropTypes.string,
-          parent: PropTypes.string,
-          collapsed: PropTypes.string,
-        }),
-        radius: PropTypes.number,
-      }),
-      text: PropTypes.shape({
-        colors: PropTypes.shape({
-          default: PropTypes.string,
-          hover: PropTypes.string,
-        }),
-      }),
-      link: PropTypes.object,
-    }),
-    size: PropTypes.number,
-    aspectRatio: PropTypes.number,
-    margin: PropTypes.shape({
-      top: PropTypes.number,
-      right: PropTypes.number,
-      bottom: PropTypes.number,
-      left: PropTypes.number,
-    }),
-    isSorted: PropTypes.bool,
-    heightBetweenNodesCoeff: PropTypes.number,
-    widthBetweenNodesCoeff: PropTypes.number,
-    transitionDuration: PropTypes.number,
-    onClickText: PropTypes.func,
-    tooltipOptions: PropTypes.shape({
-      disabled: PropTypes.bool,
-      left: PropTypes.number,
-      top: PropTypes.number,
-      offset: PropTypes.shape({
-        left: PropTypes.number,
-        top: PropTypes.number,
-      }),
-      indentationSize: PropTypes.number,
-      style: PropTypes.object,
-    }),
-  };
-
   divRef = createRef<HTMLDivElement>();
   // eslint-disable-next-line @typescript-eslint/ban-types
   renderChart?: (state?: {} | null | undefined) => void;

packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx

@@ -1,5 +1,4 @@
 import React, { CSSProperties, PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import * as themes from 'redux-devtools-themes';
 import {
   ActionCreators,
@@ -8,7 +7,7 @@ import {
 } from '@redux-devtools/core';
 import deepmerge from 'deepmerge';
 import { Action, Dispatch } from 'redux';
-import { NodeWithId, Primitive } from 'd3-state-visualizer';
+import type { HierarchyPointNode, Node } from 'd3-state-visualizer';
 
 import reducer, { ChartMonitorState } from './reducers';
 import Chart, { Props } from './Chart';
@@ -52,7 +51,7 @@ export interface ChartMonitorProps<S, A extends Action<unknown>>
   isSorted: boolean;
   heightBetweenNodesCoeff: number;
   widthBetweenNodesCoeff: number;
-  onClickText: (datum: NodeWithId) => void;
+  onClickText: (datum: HierarchyPointNode<Node>) => void;
   tooltipOptions: unknown;
   style: {
     width: number;
@@ -80,23 +79,6 @@ class ChartMonitor<S, A extends Action<unknown>> extends PureComponent<
 > {
   static update = reducer;
 
-  static propTypes = {
-    dispatch: PropTypes.func,
-    computedStates: PropTypes.array,
-    currentStateIndex: PropTypes.number,
-    actionsById: PropTypes.object,
-    stagedActionIds: PropTypes.array,
-    skippedActionIds: PropTypes.array,
-    monitorState: PropTypes.shape({
-      initialScrollTop: PropTypes.number,
-    }),
-
-    preserveScrollTop: PropTypes.bool,
-    select: PropTypes.func.isRequired,
-    theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-    invertTheme: PropTypes.bool,
-  };
-
   static defaultProps = {
     select: (state: unknown) => state,
     theme: 'nicinabox',
@@ -140,45 +122,10 @@ class ChartMonitor<S, A extends Action<unknown>> extends PureComponent<
     return invertTheme ? invertColors(themes.nicinabox) : themes.nicinabox;
   }
 
-  getChartStyle() {
-    const theme = this.getTheme();
-
-    return {
-      width: '100%',
-      height: '100%',
-      node: {
-        colors: {
-          default: theme.base0B,
-          collapsed: theme.base0B,
-          parent: theme.base0E,
-        },
-        radius: 7,
-      },
-      text: {
-        colors: {
-          default: theme.base0D,
-          hover: theme.base06,
-        },
-      },
-    };
-  }
-
   getChartOptions(props = this.props): Props<S, A> {
     const { computedStates } = props;
     const theme = this.getTheme();
 
-    const tooltipOptions = {
-      disabled: false,
-      offset: { left: 30, top: 10 },
-      indentationSize: 2,
-      style: {
-        'background-color': theme.base06,
-        opacity: '0.7',
-        'border-radius': '5px',
-        padding: '5px',
-      },
-    };
-
     const defaultOptions = {
       state: computedStates.length
         ? computedStates[props.currentStateIndex].state
@@ -186,10 +133,35 @@ class ChartMonitor<S, A extends Action<unknown>> extends PureComponent<
       isSorted: false,
       heightBetweenNodesCoeff: 1,
       widthBetweenNodesCoeff: 1.3,
-      tooltipOptions,
+      tooltipOptions: {
-      style: this.getChartStyle() as unknown as
+        disabled: false,
-        | { [key: string]: Primitive }
+        offset: { left: 30, top: 10 },
-        | undefined,
+        indentationSize: 2,
+        styles: {
+          'background-color': theme.base06,
+          opacity: '0.7',
+          'border-radius': '5px',
+          padding: '5px',
+        },
+      },
+      chartStyles: {
+        width: '100%',
+        height: '100%',
+      },
+      nodeStyleOptions: {
+        colors: {
+          default: theme.base0B,
+          collapsed: theme.base0B,
+          parent: theme.base0E,
+        },
+        radius: 7,
+      },
+      textStyleOptions: {
+        colors: {
+          default: theme.base0D,
+          hover: theme.base06,
+        },
+      },
     };
 
     return deepmerge(defaultOptions, props);
@@ -198,10 +170,9 @@ class ChartMonitor<S, A extends Action<unknown>> extends PureComponent<
   render() {
     const theme = this.getTheme();
 
-    const ChartAsAny = Chart as any;
     return (
       <div style={{ ...styles.container, backgroundColor: theme.base07 }}>
-        <ChartAsAny {...this.getChartOptions()} />
+        <Chart {...this.getChartOptions()} />
       </div>
     );
   }

pnpm-lock.yaml

@@ -893,7 +893,6 @@ importers:
       eslint-config-prettier: ^8.5.0
       eslint-plugin-react: ^7.31.11
       eslint-plugin-react-hooks: ^4.6.0
-      prop-types: ^15.8.1
       react: ^18.2.0
       redux: ^4.2.0
       redux-devtools-themes: ^1.0.0
@@ -905,7 +904,6 @@ importers:
       '@types/redux-devtools-themes': 1.0.0
       d3-state-visualizer: link:../d3-state-visualizer
       deepmerge: 4.2.2
-      prop-types: 15.8.1
       redux-devtools-themes: 1.0.0
     devDependencies:
       '@babel/cli': 7.19.3_@babel+core@7.20.5