feat(redux-devtools-slider-monitor): convert to TypeScript (#631)

* start

* fix?

* fix lint

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/.babelrc

@@ -1,4 +1,8 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
   "plugins": ["@babel/plugin-proposal-class-properties"]
 }

packages/redux-devtools-slider-monitor/.eslintignore

@@ -0,0 +1,2 @@
+examples
+lib

packages/redux-devtools-slider-monitor/.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  extends: '../../.eslintrc',
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      extends: '../../eslintrc.ts.react.base.json',
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.json'],
+      },
+    },
+  ],
+};

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

@@ -13,19 +13,17 @@
     "url": "https://github.com/calesce/redux-slider-monitor.git"
   },
   "license": "MIT",
-  "devDependencies": {
-    "@babel/core": "^7.11.0",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/preset-env": "^7.11.0",
-    "@babel/preset-react": "^7.10.4",
-    "babel-loader": "^8.1.0",
-    "raw-loader": "^4.0.1",
-    "webpack": "^4.44.1",
-    "webpack-dev-server": "^3.11.0"
-  },
   "dependencies": {
+    "classnames": "^2.2.6",
     "react-hot-loader": "^4.12.21",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-redux": "^7.2.1",
-    "redux-devtools-slider-monitor": "^2.0.0-5"
+    "redux": "^4.0.5",
+    "redux-devtools": "^3.7.0",
+    "redux-devtools-dock-monitor": "^1.2.0",
+    "redux-devtools-log-monitor": "^2.1.0",
+    "redux-devtools-slider-monitor": "^2.0.0-5",
+    "todomvc-app-css": "^2.3.0"
   }
 }

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

@@ -2,47 +2,51 @@
   "name": "redux-devtools-slider-monitor",
   "version": "2.0.0-5",
   "description": "A custom monitor for replaying Redux actions that works similarly to a video player",
-  "main": "lib/SliderMonitor.js",
+  "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-slider-monitor",
-  "scripts": {
-    "clean": "rimraf lib",
-    "build": "babel src --out-dir lib",
-    "prepare": "npm run build",
-    "prepublishOnly": "npm run clean && npm run build"
-  },
-  "repository": {
-    "url": "https://github.com/reduxjs/redux-devtools"
-  },
-  "author": "Cale Newman <newman.cale@gmail.com> (http://github.com/calesce)",
-  "license": "MIT",
   "bugs": {
     "url": "https://github.com/reduxjs/redux-devtools/issues"
   },
-  "homepage": "https://github.com/reduxjs/redux-devtools",
+  "license": "MIT",
-  "devDependencies": {
+  "author": "Cale Newman <newman.cale@gmail.com> (http://github.com/calesce)",
-    "@babel/cli": "^7.10.5",
+  "files": [
-    "@babel/core": "^7.11.1",
+    "lib",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "src"
-    "@babel/preset-env": "^7.11.0",
+  ],
-    "@babel/preset-react": "^7.10.4",
+  "main": "lib/SliderMonitor.js",
-    "classnames": "^2.2.6",
+  "types": "lib/SliderMonitor.d.ts",
-    "react": "^16.13.1",
+  "repository": {
-    "react-dom": "^16.13.1",
+    "type": "git",
-    "redux": "^4.0.5",
+    "url": "https://github.com/reduxjs/redux-devtools.git"
-    "redux-devtools": "^3.7.0",
-    "redux-devtools-dock-monitor": "^1.2.0",
-    "redux-devtools-log-monitor": "^2.1.0",
-    "rimraf": "^3.0.2",
-    "style-loader": "^1.2.1",
-    "todomvc-app-css": "^2.3.0"
   },
-  "peerDependencies": {
+  "scripts": {
-    "react": "^0.14.0 || ^15.0.0 || ^16.0.0-0",
+    "build": "npm run build:types && npm run build:js",
-    "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0-0",
+    "build:types": "tsc --emitDeclarationOnly",
-    "redux-devtools": "^3.0.0"
+    "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline",
+    "clean": "rimraf lib",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "npm run type-check -- --watch",
+    "preversion": "npm run type-check && npm run lint",
+    "prepublishOnly": "npm run clean && npm run build"
   },
   "dependencies": {
+    "@types/prop-types": "^15.7.3",
+    "@types/redux-devtools-themes": "^1.0.0",
     "devui": "^1.0.0-6",
     "prop-types": "^15.7.2",
     "redux-devtools-themes": "^1.0.0"
+  },
+  "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,7 +93,7 @@ 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') {
@@ -76,7 +113,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 +142,7 @@ export default class SliderMonitor extends (PureComponent || Component) {
     return null;
   };
 
-  handleSliderChange = (value) => {
+  handleSliderChange = (value: number) => {
     if (this.state.timer) {
       this.pauseReplay();
     }
@@ -134,7 +171,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 +202,7 @@ export default class SliderMonitor extends (PureComponent || Component) {
     }
   };
 
-  loop = (index) => {
+  loop = (index: number) => {
     let currentTimestamp = Date.now();
     let timestampDiff = this.getLatestTimestampDiff(index);
 
@@ -204,16 +241,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 +283,7 @@ export default class SliderMonitor extends (PureComponent || Component) {
     }
   };
 
-  changeReplaySpeed = (replaySpeed) => {
+  changeReplaySpeed = (replaySpeed: string) => {
     this.setState({ replaySpeed });
 
     if (this.state.timer) {
@@ -276,7 +313,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 +332,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 +369,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;
+};

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

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.react.base.json",
+  "compilerOptions": {
+    "outDir": "lib"
+  },
+  "include": ["src"]
+}

yarn.lock

@@ -63,7 +63,7 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@>=7.9.0", "@babel/core@^7.1.0", "@babel/core@^7.11.0", "@babel/core@^7.11.1", "@babel/core@^7.7.5":
+"@babel/core@>=7.9.0", "@babel/core@^7.1.0", "@babel/core@^7.11.1", "@babel/core@^7.7.5":
   version "7.11.1"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.11.1.tgz#2c55b604e73a40dc21b0e52650b11c65cf276643"
   integrity sha512-XqF7F6FWQdKGGWAzGELL+aCO1p+lRY5Tj5/tbT3St1G8NaH70jhhDIKknIZaDans0OQBG5wRAldROLHSt44BgQ==