stash

packages/d3-state-visualizer/src/charts/index.ts

@@ -1 +1,2 @@
 export { default as tree } from './tree/tree';
+export type { NodeWithId } from './tree/tree';

packages/d3-state-visualizer/src/charts/tree/tree.ts

@@ -34,7 +34,7 @@ interface InputOptions {
   widthBetweenNodesCoeff: number;
   transitionDuration: number;
   blinkDuration: number;
-  onClickText: () => void;
+  onClickText: (datum: NodeWithId) => void;
   tooltipOptions: {
     disabled?: boolean;
     left?: number | undefined;

packages/d3-state-visualizer/src/index.ts

@@ -1,5 +1,6 @@
 import * as charts from './charts';
 
 export { tree } from './charts';
+export type { NodeWithId } from './charts';
 
 export default charts;

packages/devui/src/Tabs/index.ts

@@ -1 +1,2 @@
 export { default } from './Tabs';
+export { Tab } from './TabsHeader';

packages/devui/src/index.ts

@@ -6,7 +6,7 @@ export { default as Editor } from './Editor';
 export { default as Form } from './Form';
 export { default as Select } from './Select';
 export { default as Slider } from './Slider';
-export { default as Tabs } from './Tabs';
+export { default as Tabs, Tab } from './Tabs';
 export { default as SegmentedControl } from './SegmentedControl';
 export { default as Notification } from './Notification';
 export * from './Toolbar';
@@ -14,4 +14,4 @@ export * from './Toolbar';
 import color from './utils/color';
 export const effects = { color };
 export { default as createStyledComponent } from './utils/createStyledComponent';
-export { Theme, Scheme } from './utils/theme';
+export { Theme, ThemeFromProvider, Scheme } from './utils/theme';

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

@@ -7,6 +7,7 @@ import * as themes from 'redux-devtools-themes';
 import { Base16Theme } from 'react-base16-styling';
 import { ChartMonitorState } from './reducers';
 import { Primitive } from 'd3';
+import { NodeWithId } from 'd3-state-visualizer/lib/charts/tree/tree';
 
 const wrapperStyle = {
   width: '100%',
@@ -25,6 +26,7 @@ export interface Props<S, A extends Action<unknown>>
   isSorted: boolean;
   heightBetweenNodesCoeff: number;
   widthBetweenNodesCoeff: number;
+  onClickText: (datum: NodeWithId) => void;
   tooltipOptions: {
     disabled: boolean;
     offset: {

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

@@ -9,6 +9,7 @@ import { Base16Theme } from 'react-base16-styling';
 import reducer, { ChartMonitorState } from './reducers';
 import Chart, { Props } from './Chart';
 import { Primitive } from 'd3';
+import { NodeWithId } from 'd3-state-visualizer/lib/charts/tree/tree';
 // eslint-disable-next-line @typescript-eslint/unbound-method
 const { reset, rollback, commit, sweep, toggleAction } = ActionCreators;
 
@@ -49,6 +50,7 @@ export interface ChartMonitorProps<S, A extends Action<unknown>>
   isSorted: boolean;
   heightBetweenNodesCoeff: number;
   widthBetweenNodesCoeff: number;
+  onClickText: (datum: NodeWithId) => void;
   tooltipOptions: unknown;
   style: {
     width: number;

packages/redux-devtools-core/src/app/containers/monitors/ChartMonitorWrapper.tsx

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { connect, ResolveThunks } from 'react-redux';
 import ChartMonitor from 'redux-devtools-chart-monitor';
+import { NodeWithId } from 'd3-state-visualizer';
 import { selectMonitorWithState } from '../../actions';
 
-export function getPath(obj, inspectedStatePath) {
+export function getPath(obj: NodeWithId, inspectedStatePath: string[]) {
   const parent = obj.parent;
   if (!parent) return;
   getPath(parent, inspectedStatePath);
@@ -20,8 +20,8 @@ type Props = DispatchProps;
 class ChartMonitorWrapper extends Component<Props> {
   static update = ChartMonitor.update;
 
-  onClickText = (data) => {
-    const inspectedStatePath = [];
+  onClickText = (data: NodeWithId) => {
+    const inspectedStatePath: string[] = [];
     getPath(data, inspectedStatePath);
     this.props.selectMonitorWithState('InspectorMonitor', {
       inspectedStatePath,
@@ -45,10 +45,6 @@ class ChartMonitorWrapper extends Component<Props> {
   }
 }
 
-ChartMonitorWrapper.propTypes = {
-  selectMonitorWithState: PropTypes.func.isRequired,
-};
-
 const actionCreators = {
   selectMonitorWithState: selectMonitorWithState,
 };

packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/RawTab.tsx

@@ -2,21 +2,27 @@ import React, { Component } from 'react';
 import { Editor } from 'devui';
 import { stringify } from 'javascript-stringify';
 
-export default class RawTab extends Component {
-  constructor(props) {
+interface Props {
+  data: unknown;
+}
+
+export default class RawTab extends Component<Props> {
+  value?: string | undefined;
+
+  constructor(props: Props) {
     super(props);
     this.stringifyData(props);
   }
 
-  shouldComponentUpdate(nextProps) {
+  shouldComponentUpdate(nextProps: Props) {
     return nextProps.data !== this.value;
   }
 
-  UNSAFE_componentWillUpdate(nextProps) {
+  UNSAFE_componentWillUpdate(nextProps: Props) {
     this.stringifyData(nextProps);
   }
 
-  stringifyData(props) {
+  stringifyData(props: Props) {
     this.value = stringify(props.data, null, 2);
   }
 

packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/SubTabs.tsx

@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect, ResolveThunks } from 'react-redux';
-import { Tabs } from 'devui';
+import { Tab, Tabs } from 'devui';
+import { TabComponentProps } from 'redux-devtools-inspector-monitor';
+import { Action } from 'redux';
 import StateTree from 'redux-devtools-inspector-monitor/lib/tabs/StateTab';
 import ActionTree from 'redux-devtools-inspector-monitor/lib/tabs/ActionTab';
 import DiffTree from 'redux-devtools-inspector-monitor/lib/tabs/DiffTab';
@@ -13,9 +15,13 @@ import { StoreState } from '../../../reducers';
 
 type StateProps = ReturnType<typeof mapStateToProps>;
 type DispatchProps = ResolveThunks<typeof actionCreators>;
-type Props = StateProps & DispatchProps;
+type Props = StateProps &
+  DispatchProps &
+  TabComponentProps<unknown, Action<unknown>>;
 
 class SubTabs extends Component<Props> {
+  tabs?: Tab<unknown>[];
+
   constructor(props: Props) {
     super(props);
     this.updateTabs(props);
@@ -83,7 +89,7 @@ class SubTabs extends Component<Props> {
 
     return (
       <Tabs
-        tabs={this.tabs}
+        tabs={this.tabs!}
         selected={selected || 'Tree'}
         onClick={this.props.selectMonitorTab}
       />

packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/VisualDiffTab.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { formatters } from 'jsondiffpatch';
+import { Delta, formatters } from 'jsondiffpatch';
 import styled from 'styled-components';
 import { effects } from 'devui';
 
@@ -218,22 +218,22 @@ export const StyledContainer = styled.div`
   }
 `;
 
-export default class VisualDiffTab extends Component {
-  shouldComponentUpdate(nextProps) {
+interface Props {
+  data?: Delta;
+}
+
+export default class VisualDiffTab extends Component<Props> {
+  shouldComponentUpdate(nextProps: Props) {
     return this.props.data !== nextProps.data;
   }
 
   render() {
-    let __html;
+    let __html: string | undefined;
     const data = this.props.data;
     if (data) {
-      __html = formatters.html.format(data);
+      __html = formatters.html.format(data, undefined);
     }
 
-    return <StyledContainer dangerouslySetInnerHTML={{ __html }} />;
+    return <StyledContainer dangerouslySetInnerHTML={{ __html: __html! }} />;
   }
 }
-
-VisualDiffTab.propTypes = {
-  data: PropTypes.object,
-};

packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/index.tsx

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import InspectorMonitor from 'redux-devtools-inspector-monitor';
+import InspectorMonitor, { Tab } from 'redux-devtools-inspector-monitor';
 import TraceTab from 'redux-devtools-inspector-monitor-trace-tab';
 import TestTab from 'redux-devtools-inspector-monitor-test-tab';
 import { DATA_TYPE_KEY } from '../../../constants/dataTypes';
 import SubTabs from './SubTabs';
+import { Action } from 'redux';
 
 const DEFAULT_TABS = [
   {
@@ -25,25 +25,38 @@ const DEFAULT_TABS = [
   },
 ];
 
-class InspectorWrapper extends Component {
+interface Features {
+  test?: boolean;
+  skip?: boolean;
+}
+interface Props {
+  features?: Features;
+}
+
+class InspectorWrapper extends Component<Props> {
   static update = InspectorMonitor.update;
 
   render() {
     const { features, ...rest } = this.props;
-    let tabs;
+    let tabs: () => Tab<unknown, Action<unknown>>[];
     if (features && features.test) {
-      tabs = () => [...DEFAULT_TABS, { name: 'Test', component: TestTab }];
+      tabs = () => [
+        ...(DEFAULT_TABS as Tab<unknown, Action<unknown>>[]),
+        ({ name: 'Test', component: TestTab } as unknown) as Tab<
+          unknown,
+          Action<unknown>
+        >,
+      ];
     } else {
-      tabs = () => DEFAULT_TABS;
+      tabs = () => DEFAULT_TABS as Tab<unknown, Action<unknown>>[];
     }
 
     return (
       <InspectorMonitor
         dataTypeKey={DATA_TYPE_KEY}
-        shouldPersistState={false}
         invertTheme={false}
         tabs={tabs}
-        hideActionButtons={!features.skip}
+        hideActionButtons={!features!.skip}
         hideMainButtons
         {...rest}
       />
@@ -51,8 +64,4 @@ class InspectorWrapper extends Component {
   }
 }
 
-InspectorWrapper.propTypes = {
-  features: PropTypes.object,
-};
-
 export default InspectorWrapper;

packages/redux-devtools-core/src/app/containers/monitors/Slider.tsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import styled, { withTheme } from 'styled-components';
 import SliderMonitor from 'redux-devtools-slider-monitor';
 import { LiftedAction, LiftedState } from 'redux-devtools-instrument';
 import { Action, Dispatch } from 'redux';
+import { ThemeFromProvider } from 'devui';
 
 const SliderWrapper = styled.div`
   border-color: ${(props) => props.theme.base02};
@@ -14,7 +14,7 @@ const SliderWrapper = styled.div`
 interface Props {
   liftedState: LiftedState<unknown, Action<unknown>, unknown>;
   dispatch: Dispatch<LiftedAction<unknown, Action<unknown>, unknown>>;
-  theme:
+  theme: ThemeFromProvider;
 }
 
 class Slider extends Component<Props> {
@@ -38,10 +38,4 @@ class Slider extends Component<Props> {
   }
 }
 
-Slider.propTypes = {
-  liftedState: PropTypes.object,
-  dispatch: PropTypes.func.isRequired,
-  theme: PropTypes.object.isRequired,
-};
-
 export default withTheme(Slider);

packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx

@@ -25,7 +25,7 @@ export interface TabComponentProps<S, A extends Action<unknown>> {
   base16Theme: Base16Theme;
   invertTheme: boolean;
   isWideLayout: boolean;
-  dataTypeKey: string | undefined;
+  dataTypeKey: string | symbol | undefined;
   delta: Delta | null | undefined | false;
   action: A;
   nextState: S;
@@ -67,7 +67,7 @@ interface Props<S, A extends Action<unknown>> {
   actions: { [actionId: number]: PerformAction<A> };
   selectedActionId: number | null;
   startActionId: number | null;
-  dataTypeKey: string | undefined;
+  dataTypeKey: string | symbol | undefined;
   monitorState: DevtoolsInspectorState;
   updateMonitorState: (monitorState: Partial<DevtoolsInspectorState>) => void;
   styling: StylingFunction;

packages/redux-devtools-inspector-monitor/src/DevtoolsInspector.tsx

@@ -128,7 +128,7 @@ function createThemeState<S, A extends Action<unknown>>(
   return { base16Theme, styling };
 }
 
-interface ExternalProps<S, A extends Action<unknown>> {
+export interface ExternalProps<S, A extends Action<unknown>> {
   dispatch: Dispatch<
     DevtoolsInspectorAction | LiftedAction<S, A, DevtoolsInspectorState>
   >;
@@ -142,7 +142,7 @@ interface ExternalProps<S, A extends Action<unknown>> {
   hideMainButtons?: boolean;
   hideActionButtons?: boolean;
   invertTheme: boolean;
-  dataTypeKey?: string;
+  dataTypeKey?: string | symbol;
   tabs: Tab<S, A>[] | ((tabs: Tab<S, A>[]) => Tab<S, A>[]);
 }
 
@@ -169,7 +169,7 @@ export interface DevtoolsInspectorProps<S, A extends Action<unknown>>
   hideMainButtons?: boolean;
   hideActionButtons?: boolean;
   invertTheme: boolean;
-  dataTypeKey?: string;
+  dataTypeKey?: string | symbol;
   tabs: Tab<S, A>[] | ((tabs: Tab<S, A>[]) => Tab<S, A>[]);
 }
 

packages/redux-devtools-inspector-monitor/src/redux.ts

@@ -4,7 +4,7 @@ import { DevtoolsInspectorProps } from './DevtoolsInspector';
 const UPDATE_MONITOR_STATE =
   '@@redux-devtools-inspector-monitor/UPDATE_MONITOR_STATE';
 
-interface UpdateMonitorStateAction {
+export interface UpdateMonitorStateAction {
   type: typeof UPDATE_MONITOR_STATE;
   monitorState: Partial<DevtoolsInspectorState>;
 }

packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx

@@ -60,7 +60,7 @@ interface Props {
     expandable: boolean
   ) => React.ReactNode;
   isWideLayout: boolean;
-  dataTypeKey: string | undefined;
+  dataTypeKey: string | symbol | undefined;
 }
 
 interface State {

packages/redux-devtools-inspector-monitor/src/tabs/getItemString.tsx

@@ -73,7 +73,7 @@ const getItemString = (
   styling: StylingFunction,
   type: string,
   data: any,
-  dataTypeKey: string | undefined,
+  dataTypeKey: string | symbol | undefined,
   isWideLayout: boolean,
   isDiff?: boolean
 ) => (