Updated redux dock monitor and log monitor to include new optional props, and added typing to custom themes by adding base16 colour scheme typings

base16/base16-tests.ts

@@ -0,0 +1,24 @@
+/// <reference path="./base16.d.ts" />
+
+import * as base16 from 'base16';
+
+const colorScheme: base16.ColorScheme = base16.solarized
+
+const scheme: string = colorScheme.scheme
+const author: string = colorScheme.author
+const base00: string = colorScheme.base00
+const base01: string = colorScheme.base01
+const base02: string = colorScheme.base02
+const base03: string = colorScheme.base03
+const base04: string = colorScheme.base04
+const base05: string = colorScheme.base05
+const base06: string = colorScheme.base06
+const base07: string = colorScheme.base07
+const base08: string = colorScheme.base08
+const base09: string = colorScheme.base09
+const base0A: string = colorScheme.base0A
+const base0B: string = colorScheme.base0B
+const base0C: string = colorScheme.base0C
+const base0D: string = colorScheme.base0D
+const base0E: string = colorScheme.base0E
+const base0F: string = colorScheme.base0F

base16/base16.d.ts

@@ -0,0 +1,70 @@
+// Type definitions for base16-js 1.0.0
+// Project: https://github.com/gaearon/base16-js
+// Definitions by: Alec Hill <https://github.com/alechill>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+declare module 'base16' {
+
+  /**
+   * Type describing a syntax highlighting scheme as a JS object, as used in redux dev tools
+   * Based on https://github.com/chriskempson/base16
+   */
+  export interface ColorScheme {
+    scheme: string
+    author: string
+    base00: string
+    base01: string
+    base02: string
+    base03: string
+    base04: string
+    base05: string
+    base06: string
+    base07: string
+    base08: string
+    base09: string
+    base0A: string
+    base0B: string
+    base0C: string
+    base0D: string
+    base0E: string
+    base0F: string
+  }
+
+  // predefined schemes...
+  export var threezerotwofour: ColorScheme
+  export var apathy: ColorScheme
+  export var ashes: ColorScheme
+  export var atelierDune: ColorScheme
+  export var atelierForest: ColorScheme
+  export var atelierHeath: ColorScheme
+  export var atelierLakeside: ColorScheme
+  export var atelierSeaside: ColorScheme
+  export var bespin: ColorScheme
+  export var brewer: ColorScheme
+  export var bright: ColorScheme
+  export var chalk: ColorScheme
+  export var codeschool: ColorScheme
+  export var colors: ColorScheme
+  export var eighties: ColorScheme
+  export var embers: ColorScheme
+  export var flat: ColorScheme
+  export var google: ColorScheme
+  export var grayscale: ColorScheme
+  export var greenscreen: ColorScheme
+  export var harmonic: ColorScheme
+  export var hopscotch: ColorScheme
+  export var isotope: ColorScheme
+  export var marrakesh: ColorScheme
+  export var monokai: ColorScheme
+  export var ocean: ColorScheme
+  export var paraiso: ColorScheme
+  export var pop: ColorScheme
+  export var railscasts: ColorScheme
+  export var shapeshifter: ColorScheme
+  export var solarized: ColorScheme
+  export var summerfruit: ColorScheme
+  export var tomorrow: ColorScheme
+  export var tube: ColorScheme
+  export var twilight: ColorScheme
+
+}

redux-devtools-dock-monitor/redux-devtools-dock-monitor-tests.tsx

@@ -4,4 +4,12 @@
 import * as React from 'react'
 import DockMonitor from 'redux-devtools-dock-monitor'
 
-let dockMonitor = <DockMonitor toggleVisibilityKey='ctrl-h' changePositionKey='ctrl-q' />
+let dockMonitor = <DockMonitor toggleVisibilityKey='ctrl-h' changePositionKey='ctrl-q' />
+
+let dockMonitorOptionalProps = <DockMonitor toggleVisibilityKey='ctrl-h'
+                                            changePositionKey='ctrl-q'
+                                            changeMonitorKey='ctrl-m'
+                                            fluid={false}
+                                            defaultSize={0.5}
+                                            defaultPosition='bottom'
+                                            defaultIsVisible={false} />

redux-devtools-dock-monitor/redux-devtools-dock-monitor.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for redux-devtools-dock-monitor 1.0.1
+// Type definitions for redux-devtools-dock-monitor 1.1.1
 // Project: https://github.com/gaearon/redux-devtools-dock-monitor
 // Definitions by: Petryshyn Sergii <https://github.com/mc-petry>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
@@ -8,6 +8,8 @@
 declare module "redux-devtools-dock-monitor" {
   import * as React from 'react'
 
+  type DockPosition = 'left' | 'top' | 'right' | 'bottom'
+
   interface IDockMonitorProps {
     /**
      * Any valid Redux DevTools monitor.
@@ -15,39 +17,48 @@ declare module "redux-devtools-dock-monitor" {
     children?: React.ReactNode
 
     /**
-     * A key or a key combination that toggles the dock visibility. 
+     * A key or a key combination that toggles the dock visibility.
      * Must be recognizable by parse-key (for example, 'ctrl-h')
      */
     toggleVisibilityKey: string
 
     /**
-     * A key or a key combination that toggles the dock position. 
+     * A key or a key combination that toggles the dock position.
      * Must be recognizable by parse-key (for example, 'ctrl-w')
      */
     changePositionKey: string
 
+    /**
+     * A key or a key combination that switches the currently visible monitor.
+     * Must be recognizable by parse-key (for example, 'ctrl-m')
+     * Required if you use more than one monitor.
+     *
+     * @default undefined
+     */
+    changeMonitorKey?: string
+
     /**
      * When true, the dock size is a fraction of the window size, fixed otherwise.
-     * 
+     *
      * @default true
      */
     fluid?: boolean
 
     /**
-     * Size of the dock. When fluid is true, a float (0.5 means half the window size). 
+     * Size of the dock. When fluid is true, a float (0.5 means half the window size).
      * When fluid is false, a width in pixels
-     * 
+     *
      * @default 0.3 (3/10th of the window size)
      */
     defaultSize?: number
 
     /**
-     * Where the dock appears on the screen. 
+     * Where the dock appears on the screen.
      * Valid values: 'left', 'top', 'right', 'bottom'
-     * 
+     *
      * @default 'right'
      */
-    defaultPosition?: string
+    defaultPosition?: DockPosition
 
     /**
      * @default true
@@ -56,4 +67,4 @@ declare module "redux-devtools-dock-monitor" {
   }
 
   export default class DockMonitor extends React.Component<IDockMonitorProps, any> {}
-}
+}

redux-devtools-log-monitor/redux-devtools-log-monitor-tests.tsx

@@ -4,4 +4,34 @@
 import * as React from 'react'
 import LogMonitor from 'redux-devtools-log-monitor'
 
-let logMonitor = <LogMonitor />
+let logMonitor = <LogMonitor />
+
+let logMonitorWithStringTheme = <LogMonitor theme='tomorrow' />
+
+const customTheme = {
+  scheme: 'Oscar Award Winner',
+  author: 'Nic Cage',
+  base00: '#000000',
+  base01: '#000000',
+  base02: '#000000',
+  base03: '#000000',
+  base04: '#000000',
+  base05: '#000000',
+  base06: '#000000',
+  base07: '#000000',
+  base08: '#000000',
+  base09: '#000000',
+  base0A: '#000000',
+  base0B: '#000000',
+  base0C: '#000000',
+  base0D: '#000000',
+  base0E: '#000000',
+  base0F: '#000000'
+}
+
+let logMonitorWithCustomTheme = <LogMonitor theme={customTheme} />
+
+let logMonitorWithOtherOptProps = <LogMonitor select={(state: any) => state}
+                                              preserveScrollTop={true}
+                                              expandActionRoot={true}
+                                              expandStateRoot={true} />

redux-devtools-log-monitor/redux-devtools-log-monitor.d.ts

@@ -1,39 +1,55 @@
-// Type definitions for redux-devtools-log-monitor 1.0.1
+// Type definitions for redux-devtools-log-monitor 1.0.11
 // Project: https://github.com/gaearon/redux-devtools-log-monitor
 // Definitions by: Petryshyn Sergii <https://github.com/mc-petry>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 
 /// <reference path="../react/react.d.ts" />
+/// <reference path="../base16/base16.d.ts" />
 
 declare module "redux-devtools-log-monitor" {
   import * as React from 'react'
+  import {ColorScheme} from 'base16'
 
   interface ILogMonitorProps {
     /**
-     * Either a string referring to one of the themes provided by 
+     * Either a string referring to one of the themes provided by
      * redux-devtools-themes or a custom object of the same format.
-     * 
+     *
      * @see https://github.com/gaearon/redux-devtools-themes
      */
-    theme?: string
+    theme?: string | ColorScheme
 
     /**
      * A function that selects the slice of the state for DevTools to show.
-     *  
+     *
      * @example state => state.thePart.iCare.about.
      * @default state => state.
      */
     select?: (state: any) => any
 
     /**
-     * When true, records the current scroll top every second so it 
-     * can be restored on refresh. This only has effect when used together 
+     * When true, records the current scroll top every second so it
+     * can be restored on refresh. This only has effect when used together
      * with persistState() enhancer from Redux DevTools.
-     * 
+     *
      * @default true
      */
     preserveScrollTop?: boolean
+
+    /**
+     * When true, displays the action object expanded rather than collapsed.
+     *
+     * @default true
+     */
+    expandActionRoot?: boolean
+
+    /**
+     * When true, displays the state object expanded rather than collapsed.
+     *
+     * @default true
+     */
+     expandStateRoot?: boolean
   }
 
   export default class LogMonitor extends React.Component<ILogMonitorProps, any> {}
-}
+}