fix?

packages/devui/src/Button/Button.tsx

@@ -1,9 +1,9 @@
 import React, { Component, ReactNode } from 'react';
 import PropTypes from 'prop-types';
+import { Base16Theme } from 'base16';
 import createStyledComponent from '../utils/createStyledComponent';
 import * as styles from './styles';
 import { commonStyle, tooltipStyle } from './styles/common';
-import { Theme } from '../themes/default';
 
 const ButtonWrapper = createStyledComponent(styles, 'button');
 const TooltipWrapper = createStyledComponent(tooltipStyle);
@@ -41,7 +41,7 @@ export interface ButtonProps {
   primary?: boolean;
   size?: Size;
   mark?: Mark | false;
-  theme?: Theme;
+  theme?: Base16Theme;
 }
 
 export default class Button extends Component<ButtonProps> {

packages/devui/src/Dialog/Dialog.tsx

@@ -1,10 +1,10 @@
 import React, { PureComponent, Component } from 'react';
 import PropTypes from 'prop-types';
+import { Base16Theme } from 'base16';
 import createStyledComponent from '../utils/createStyledComponent';
 import * as styles from './styles';
 import Button from '../Button';
 import Form from '../Form';
-import { Theme } from '../themes/default';
 import { Props as FormProps } from '../Form/Form';
 
 const DialogWrapper = createStyledComponent(styles);
@@ -23,7 +23,7 @@ export interface DialogProps {
     e: React.MouseEvent<HTMLButtonElement | HTMLDivElement> | false
   ) => void;
   onSubmit: () => void;
-  theme?: Theme;
+  theme?: Base16Theme;
 }
 
 type Rest<P> = Omit<

packages/devui/src/Editor/Editor.tsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import CodeMirror from 'codemirror';
+import { Base16Theme } from 'base16';
 import { defaultStyle, themedStyle } from './styles';
 import { Theme } from '../themes/default';
 
@@ -19,7 +20,7 @@ export interface EditorProps {
   lineNumbers: boolean;
   lineWrapping: boolean;
   readOnly: boolean;
-  theme?: Theme;
+  theme?: Base16Theme;
   foldGutter: boolean;
   autofocus: boolean;
   onChange: (value: string, change: CodeMirror.EditorChangeLinkedList) => void;

packages/devui/src/Form/Form.tsx

@@ -1,11 +1,11 @@
 import React, { PureComponent, Component } from 'react';
 import PropTypes from 'prop-types';
 import JSONSchemaForm, { FormProps } from 'react-jsonschema-form';
+import { Base16Theme } from 'base16';
 import createStyledComponent from '../utils/createStyledComponent';
 import styles from './styles';
 import Button from '../Button';
 import customWidgets from './widgets';
-import { Theme } from '../themes/default';
 
 const FormContainer = createStyledComponent(styles, JSONSchemaForm);
 
@@ -14,7 +14,7 @@ export interface Props<T> extends FormProps<T> {
   submitText?: string;
   primaryButton?: boolean;
   noSubmit?: boolean;
-  theme?: Theme;
+  theme?: Base16Theme;
 }
 
 /**

packages/devui/src/Notification/Notification.tsx

@@ -4,9 +4,9 @@ import { MdClose } from 'react-icons/md';
 import { MdWarning } from 'react-icons/md';
 import { MdError } from 'react-icons/md';
 import { MdCheckCircle } from 'react-icons/md';
+import { Base16Theme } from 'base16';
 import createStyledComponent from '../utils/createStyledComponent';
 import styles from './styles';
-import { Theme } from '../themes/default';
 
 const NotificationWrapper = createStyledComponent(styles);
 
@@ -16,7 +16,7 @@ export interface NotificationProps {
   children?: React.ReactNode;
   type: Type;
   onClose?: React.MouseEventHandler<HTMLButtonElement>;
-  theme?: Theme;
+  theme?: Base16Theme;
 }
 
 export default class Notification extends Component<NotificationProps> {

packages/devui/src/SegmentedControl/SegmentedControl.tsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Base16Theme } from 'base16';
 import createStyledComponent from '../utils/createStyledComponent';
 import styles from './styles';
-import { Theme } from '../themes/default';
 
 const SegmentedWrapper = createStyledComponent(styles);
 
@@ -11,7 +11,7 @@ export interface SegmentedControlProps {
   selected?: string;
   onClick: (value: string) => void;
   disabled?: boolean;
-  theme?: Theme;
+  theme?: Base16Theme;
 }
 
 export default class SegmentedControl extends Component<SegmentedControlProps> {

packages/devui/src/Slider/Slider.tsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Base16Theme } from 'base16';
 import createStyledComponent from '../utils/createStyledComponent';
 import * as styles from './styles';
 import { containerStyle } from './styles/common';
-import { Theme } from '../themes/default';
 
 const SliderWrapper = createStyledComponent(styles);
 const ContainerWithValue = createStyledComponent(containerStyle);
@@ -17,7 +17,7 @@ export interface SliderProps {
   withValue?: boolean;
   disabled?: boolean;
   onChange: (value: number) => void;
-  theme?: Theme;
+  theme?: Base16Theme;
 }
 
 export default class Slider extends Component<SliderProps> {

packages/devui/src/Toolbar/styles/Toolbar.ts

@@ -1,5 +1,6 @@
 import styled, { ThemedStyledInterface } from 'styled-components';
-import { Theme } from '../../themes/default';
+import { Base16Theme } from 'base16';
+import * as CSS from 'csstype';
 
 export type BorderPosition = 'top' | 'bottom';
 
@@ -10,7 +11,9 @@ export interface Props {
   noBorder?: boolean;
 }
 
-const Toolbar = (styled as ThemedStyledInterface<Theme>).div<Props>`
+const Toolbar = (styled as ThemedStyledInterface<
+  Base16Theme & { fontFamily?: CSS.Property.FontFamily }
+>).div<Props>`
   display: flex;
   flex-shrink: 0;
   box-sizing: border-box;

packages/devui/src/utils/createStyledComponent.ts

@@ -59,7 +59,10 @@ export default function createStyledComponent<
   C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
   // eslint-disable-next-line @typescript-eslint/ban-types
   O extends object = {}
->(styles: Styles<C, O>, component?: C): StyledComponent<C, Theme, O> {
+>(
+  styles: Styles<C, O>,
+  component?: C
+): StyledComponent<C, Theme | Base16Theme, O> {
   return (styled as ThemedStyledInterface<Theme>)((component || 'div') as C)`
     ${(props: ThemedStyledProps<StyledComponentPropsWithRef<C> & O, Theme>) =>
       isThemeFromProvider(props.theme)
@@ -72,7 +75,7 @@ export default function createStyledComponent<
             ...props,
             theme: getDefaultTheme(props.theme),
           })}
-  `;
+  ` as StyledComponent<C, Theme | Base16Theme, O>;
 }
 
 // TODO: memoize it?

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

@@ -57,7 +57,7 @@
   "peerDependencies": {
     "@types/react": "^16.9.46",
     "react": "^16.3.0",
-    "redux": "^4.0.5",
+    "redux": "^3.4.0 || ^4.0.0",
     "redux-devtools": "^3.4.0"
   }
 }

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

@@ -40,11 +40,13 @@
   "devDependencies": {
     "@types/react": "^16.9.46",
     "react": "^16.13.1",
+    "redux": "^4.0.5",
     "redux-devtools": "^3.7.0"
   },
   "peerDependencies": {
     "@types/react": "^16.3.18",
     "react": "^16.3.0",
+    "redux": "^3.4.0 || ^4.0.0",
     "redux-devtools": "^3.4.0"
   }
 }

packages/redux-devtools-slider-monitor/src/SliderButton.tsx

@@ -1,8 +1,16 @@
 import React, { Component, PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import { Base16Theme } from 'redux-devtools-themes';
 import Button from 'devui/lib/Button';
 
-export default class SliderButton extends (PureComponent || Component) {
+interface Props {
+  theme: Base16Theme;
+  type: string;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+export default class SliderButton extends (PureComponent || Component)<Props> {
   static propTypes = {
     theme: PropTypes.object,
     type: PropTypes.string,
@@ -61,7 +69,7 @@ export default class SliderButton extends (PureComponent || Component) {
     </Button>
   );
 
-  renderStepButton = (direction) => {
+  renderStepButton = (direction: 'left' | 'right') => {
     const isLeft = direction === 'left';
     const d = isLeft
       ? 'M15.41 16.09l-4.58-4.59 4.58-4.59-1.41-1.41-6 6 6 6z'

packages/redux-devtools-slider-monitor/src/SliderMonitor.tsx

@@ -1,7 +1,9 @@
 import React, { Component, PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import { Action, Dispatch } from 'redux';
 import * as themes from 'redux-devtools-themes';
-import { ActionCreators } from 'redux-devtools';
+import { Base16Theme } from 'redux-devtools-themes';
+import { ActionCreators, LiftedAction, LiftedState } from 'redux-devtools';
 import { Toolbar, Divider } from 'devui/lib/Toolbar';
 import Slider from 'devui/lib/Slider';
 import Button from 'devui/lib/Button';
@@ -10,9 +12,44 @@ import SegmentedControl from 'devui/lib/SegmentedControl';
 import reducer from './reducers';
 import SliderButton from './SliderButton';
 
+// eslint-disable-next-line @typescript-eslint/unbound-method
 const { reset, jumpToState } = ActionCreators;
 
-export default class SliderMonitor extends (PureComponent || Component) {
+interface ExternalProps<S, A extends Action<unknown>> {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  dispatch: Dispatch<LiftedAction<S, A, {}>>;
+  preserveScrollTop: boolean;
+  select: (state: S) => unknown;
+  theme: keyof typeof themes | Base16Theme;
+  keyboardEnabled: boolean;
+  hideResetButton?: boolean;
+}
+
+interface DefaultProps {
+  select: (state: unknown) => unknown;
+  theme: keyof typeof themes;
+  preserveScrollTop: boolean;
+  keyboardEnabled: boolean;
+}
+
+interface SliderMonitorProps<S, A extends Action<unknown>>  // eslint-disable-next-line @typescript-eslint/ban-types
+  extends LiftedState<S, A, {}> {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  dispatch: Dispatch<LiftedAction<S, A, {}>>;
+  preserveScrollTop: boolean;
+  select: (state: S) => unknown;
+  theme: keyof typeof themes | Base16Theme;
+  keyboardEnabled: boolean;
+  hideResetButton?: boolean;
+}
+
+interface State {
+  timer: number | undefined;
+  replaySpeed: string;
+}
+
+class SliderMonitor<S, A extends Action<unknown>> extends (PureComponent ||
+  Component)<SliderMonitorProps<S, A>, State> {
   static update = reducer;
 
   static propTypes = {
@@ -25,7 +62,7 @@ export default class SliderMonitor extends (PureComponent || Component) {
       initialScrollTop: PropTypes.number,
     }),
     preserveScrollTop: PropTypes.bool,
-    stagedActions: PropTypes.array,
+    // stagedActions: PropTypes.array,
     select: PropTypes.func.isRequired,
     hideResetButton: PropTypes.bool,
     theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
@@ -33,13 +70,13 @@ export default class SliderMonitor extends (PureComponent || Component) {
   };
 
   static defaultProps = {
-    select: (state) => state,
+    select: (state: unknown) => state,
     theme: 'nicinabox',
     preserveScrollTop: true,
     keyboardEnabled: true,
   };
 
-  state = {
+  state: State = {
     timer: undefined,
     replaySpeed: '1x',
   };
@@ -56,11 +93,13 @@ export default class SliderMonitor extends (PureComponent || Component) {
     }
   }
 
-  setUpTheme = () => {
+  setUpTheme = (): Base16Theme => {
     let theme;
     if (typeof this.props.theme === 'string') {
-      if (typeof themes[this.props.theme] !== 'undefined') {
+      if (
-        theme = themes[this.props.theme];
+        typeof themes[this.props.theme as keyof typeof themes] !== 'undefined'
+      ) {
+        theme = themes[this.props.theme as keyof typeof themes];
       } else {
         theme = themes.nicinabox;
       }
@@ -76,7 +115,7 @@ export default class SliderMonitor extends (PureComponent || Component) {
     this.props.dispatch(reset());
   };
 
-  handleKeyPress = (event) => {
+  handleKeyPress = (event: KeyboardEvent) => {
     if (!this.props.keyboardEnabled) {
       return null;
     }
@@ -105,7 +144,7 @@ export default class SliderMonitor extends (PureComponent || Component) {
     return null;
   };
 
-  handleSliderChange = (value) => {
+  handleSliderChange = (value: number) => {
     if (this.state.timer) {
       this.pauseReplay();
     }
@@ -134,7 +173,7 @@ export default class SliderMonitor extends (PureComponent || Component) {
     }
 
     let counter = stateIndex;
-    const timer = setInterval(() => {
+    const timer = window.setInterval(() => {
       if (counter + 1 <= computedStates.length - 1) {
         dispatch(jumpToState(counter + 1));
       }
@@ -165,7 +204,7 @@ export default class SliderMonitor extends (PureComponent || Component) {
     }
   };
 
-  loop = (index) => {
+  loop = (index: number) => {
     let currentTimestamp = Date.now();
     let timestampDiff = this.getLatestTimestampDiff(index);
 
@@ -204,16 +243,16 @@ export default class SliderMonitor extends (PureComponent || Component) {
     }
   };
 
-  getLatestTimestampDiff = (index) =>
+  getLatestTimestampDiff = (index: number) =>
     this.getTimestampOfStateIndex(index + 1) -
     this.getTimestampOfStateIndex(index);
 
-  getTimestampOfStateIndex = (stateIndex) => {
+  getTimestampOfStateIndex = (stateIndex: number) => {
     const id = this.props.stagedActionIds[stateIndex];
     return this.props.actionsById[id].timestamp;
   };
 
-  pauseReplay = (cb) => {
+  pauseReplay = (cb?: () => void) => {
     if (this.state.timer) {
       cancelAnimationFrame(this.state.timer);
       clearInterval(this.state.timer);
@@ -246,7 +285,7 @@ export default class SliderMonitor extends (PureComponent || Component) {
     }
   };
 
-  changeReplaySpeed = (replaySpeed) => {
+  changeReplaySpeed = (replaySpeed: string) => {
     this.setState({ replaySpeed });
 
     if (this.state.timer) {
@@ -276,7 +315,7 @@ export default class SliderMonitor extends (PureComponent || Component) {
     let actionType = actionsById[actionId].action.type;
     if (actionType === undefined) actionType = '<UNDEFINED>';
     else if (actionType === null) actionType = '<NULL>';
-    else actionType = actionType.toString() || '<EMPTY>';
+    else actionType = (actionType as string).toString() || '<EMPTY>';
 
     const onPlayClick =
       replaySpeed === 'Live' ? this.startRealtimeReplay : this.startReplay;
@@ -295,7 +334,7 @@ export default class SliderMonitor extends (PureComponent || Component) {
       <Toolbar noBorder compact fullHeight theme={theme}>
         {playPause}
         <Slider
-          label={actionType}
+          label={actionType as string}
           sublabel={`(${actionId})`}
           min={0}
           max={max}
@@ -332,3 +371,16 @@ export default class SliderMonitor extends (PureComponent || Component) {
     );
   }
 }
+
+export default (SliderMonitor as unknown) as React.ComponentType<
+  ExternalProps<unknown, Action<unknown>>
+> & {
+  update(
+    monitorProps: ExternalProps<unknown, Action<unknown>>,
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    state: {} | undefined,
+    action: Action<unknown>
+    // eslint-disable-next-line @typescript-eslint/ban-types
+  ): {};
+  defaultProps: DefaultProps;
+};