reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-27 00:19:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

dock-monitor

Browse Source
This commit is contained in:
Nathan Bierema 2020-12-21 13:43:14 -05:00
parent cf357931e3
commit 16d6e95136
17 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/redux-devtools-chart-monitor/README.md
View File

@ -34,8 +34,8 @@ export default createDevTools(<ChartMonitor />);
Then you can render `<DevTools>` to any place inside app or even into a separate popup window. Then you can render `<DevTools>` to any place inside app or even into a separate popup window.
Alternatively, you can use it together with [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) to make it dockable. Alternatively, you can use it together with [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) to make it dockable.
Consult the [`DockMonitor` README](https://github.com/gaearon/redux-devtools-dock-monitor) for details of this approach. Consult the [`DockMonitor` README](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) for details of this approach.
[Read how to start using Redux DevTools.](https://github.com/reduxjs/redux-devtools) [Read how to start using Redux DevTools.](https://github.com/reduxjs/redux-devtools)
@ -54,7 +54,7 @@ You can read the React component [propTypes](https://github.com/reduxjs/redux-de
| `heightBetweenNodesCoeff` | By default, set to `1`. | | `heightBetweenNodesCoeff` | By default, set to `1`. |
| `widthBetweenNodesCoeff` | By default, set to `1.3`. | | `widthBetweenNodesCoeff` | By default, set to `1.3`. |
| `isSorted` | By default, set to `false`. | | `isSorted` | By default, set to `false`. |
| `style` | {<br>&nbsp;&nbsp;width: '100%', height: '100%', // i.e fullscreen for [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor)<br>&nbsp;&nbsp;text: {<br>&nbsp;&nbsp;&nbsp;&nbsp;colors: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'default': `theme.base0D`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hover: `theme.base06`<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;node: {<br>&nbsp;&nbsp;&nbsp;&nbsp;colors: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'default': `theme.base0B`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collapsed: `theme.base0B`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parent: `theme.base0E`<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;radius: 7<br>&nbsp;&nbsp;}<br>} | | `style` | {<br>&nbsp;&nbsp;width: '100%', height: '100%', // i.e fullscreen for [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor)<br>&nbsp;&nbsp;text: {<br>&nbsp;&nbsp;&nbsp;&nbsp;colors: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'default': `theme.base0D`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hover: `theme.base06`<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;node: {<br>&nbsp;&nbsp;&nbsp;&nbsp;colors: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'default': `theme.base0B`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collapsed: `theme.base0B`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parent: `theme.base0E`<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;radius: 7<br>&nbsp;&nbsp;}<br>} |
| `onClickText` | Function called with a reference to the clicked node as first argument when clicking on the text next to a node. | | `onClickText` | Function called with a reference to the clicked node as first argument when clicking on the text next to a node. |
| `tooltipOptions` | {<br>&nbsp;&nbsp;disabled: false,<br>&nbsp;&nbsp;indentationSize: 2,<br>&nbsp;&nbsp;style: {<br>&nbsp;&nbsp;&nbsp;&nbsp;'background-color': `theme.base06`,<br>&nbsp;&nbsp;&nbsp;&nbsp;'opacity': '0.7',<br>&nbsp;&nbsp;&nbsp;&nbsp;'border-radius': '5px',<br>&nbsp;&nbsp;&nbsp;&nbsp;'padding': '5px'<br>&nbsp;&nbsp;}<br>}<br>[More info](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip#api). | | `tooltipOptions` | {<br>&nbsp;&nbsp;disabled: false,<br>&nbsp;&nbsp;indentationSize: 2,<br>&nbsp;&nbsp;style: {<br>&nbsp;&nbsp;&nbsp;&nbsp;'background-color': `theme.base06`,<br>&nbsp;&nbsp;&nbsp;&nbsp;'opacity': '0.7',<br>&nbsp;&nbsp;&nbsp;&nbsp;'border-radius': '5px',<br>&nbsp;&nbsp;&nbsp;&nbsp;'padding': '5px'<br>&nbsp;&nbsp;}<br>}<br>[More info](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip#api). |

4
packages/redux-devtools-dock-monitor/README.md
View File

@ -8,7 +8,7 @@ Powered by [React Dock](https://github.com/alexkuz/react-dock).
### Installation ### Installation
``` ```
yarn add redux-devtools-dock-monitor yarn add @redux-devtools/dock-monitor
``` ```
### Usage ### Usage
@ -23,7 +23,7 @@ import React from 'react';
import { createDevTools } from '@redux-devtools/core'; import { createDevTools } from '@redux-devtools/core';
import LogMonitor from 'redux-devtools-log-monitor'; import LogMonitor from 'redux-devtools-log-monitor';
import SliderMonitor from 'redux-devtools-slider-monitor'; import SliderMonitor from 'redux-devtools-slider-monitor';
import DockMonitor from 'redux-devtools-dock-monitor'; import DockMonitor from '@redux-devtools/dock-monitor';
export default createDevTools( export default createDevTools(
<DockMonitor <DockMonitor

2
packages/redux-devtools-dock-monitor/package.json
View File

@ -1,5 +1,5 @@
{ {
"name": "redux-devtools-dock-monitor", "name": "@redux-devtools/dock-monitor",
"version": "1.2.0", "version": "1.2.0",
"description": "A resizable and movable dock for Redux DevTools monitors", "description": "A resizable and movable dock for Redux DevTools monitors",
"keywords": [ "keywords": [

2
packages/redux-devtools-inspector-monitor-test-tab/demo/src/js/DevTools.tsx
View File

@ -5,7 +5,7 @@ import InspectorMonitor, {
base16Themes, base16Themes,
Tab, Tab,
} from 'redux-devtools-inspector-monitor'; } from 'redux-devtools-inspector-monitor';
import DockMonitor from 'redux-devtools-dock-monitor'; import DockMonitor from '@redux-devtools/dock-monitor';
import { Location } from 'history'; import { Location } from 'history';
import getOptions from './getOptions'; import getOptions from './getOptions';
import TestGenerator from '../../../src'; import TestGenerator from '../../../src';

2
packages/redux-devtools-inspector-monitor-test-tab/package.json
View File

@ -55,6 +55,7 @@
}, },
"devDependencies": { "devDependencies": {
"@redux-devtools/core": "^3.7.0", "@redux-devtools/core": "^3.7.0",
"@redux-devtools/dock-monitor": "^1.2.0",
"@types/es6template": "^1.0.0", "@types/es6template": "^1.0.0",
"@types/history": "^4.7.7", "@types/history": "^4.7.7",
"@types/jsan": "^3.1.0", "@types/jsan": "^3.1.0",
@ -77,7 +78,6 @@
"react-redux": "^7.2.1", "react-redux": "^7.2.1",
"react-router": "^5.2.0", "react-router": "^5.2.0",
"redux": "^4.0.5", "redux": "^4.0.5",
"redux-devtools-dock-monitor": "^1.2.0",
"redux-devtools-inspector-monitor": "^0.14.0", "redux-devtools-inspector-monitor": "^0.14.0",
"redux-logger": "^3.0.6", "redux-logger": "^3.0.6",
"seamless-immutable": "^7.1.4" "seamless-immutable": "^7.1.4"

4
packages/redux-devtools-inspector-monitor/README.md
View File

@ -28,8 +28,8 @@ export default createDevTools(<Inspector />);
Then you can render `<DevTools>` to any place inside app or even into a separate popup window. Then you can render `<DevTools>` to any place inside app or even into a separate popup window.
Alternative, you can use it together with [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) to make it dockable. Alternative, you can use it together with [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) to make it dockable.
Consult the [`DockMonitor` README](https://github.com/gaearon/redux-devtools-dock-monitor) for details of this approach. Consult the [`DockMonitor` README](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) for details of this approach.
[Read how to start using Redux DevTools.](https://github.com/gaearon/redux-devtools) [Read how to start using Redux DevTools.](https://github.com/gaearon/redux-devtools)

2
packages/redux-devtools-inspector-monitor/demo/src/js/DevTools.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { createDevTools } from '@redux-devtools/core'; import { createDevTools } from '@redux-devtools/core';
import DockMonitor from 'redux-devtools-dock-monitor'; import DockMonitor from '@redux-devtools/dock-monitor';
import { Location } from 'history'; import { Location } from 'history';
import DevtoolsInspector from '../../../src/DevtoolsInspector'; import DevtoolsInspector from '../../../src/DevtoolsInspector';
import getOptions from './getOptions'; import getOptions from './getOptions';

2
packages/redux-devtools-inspector-monitor/package.json
View File

@ -54,6 +54,7 @@
}, },
"devDependencies": { "devDependencies": {
"@redux-devtools/core": "^3.7.0", "@redux-devtools/core": "^3.7.0",
"@redux-devtools/dock-monitor": "^1.2.0",
"@types/dateformat": "^3.0.1", "@types/dateformat": "^3.0.1",
"@types/hex-rgba": "^1.0.0", "@types/hex-rgba": "^1.0.0",
"@types/history": "^4.7.7", "@types/history": "^4.7.7",
@ -73,7 +74,6 @@
"react-redux": "^7.2.1", "react-redux": "^7.2.1",
"react-router": "^5.2.0", "react-router": "^5.2.0",
"redux": "^4.0.5", "redux": "^4.0.5",
"redux-devtools-dock-monitor": "^1.2.0",
"redux-logger": "^3.0.6", "redux-logger": "^3.0.6",
"seamless-immutable": "^7.1.4" "seamless-immutable": "^7.1.4"
}, },

4
packages/redux-devtools-log-monitor/README.md
View File

@ -27,8 +27,8 @@ export default createDevTools(<LogMonitor />);
Then you can render `<DevTools>` to any place inside app or even into a separate popup window. Then you can render `<DevTools>` to any place inside app or even into a separate popup window.
Alternative, you can use it together with [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) to make it dockable. Alternative, you can use it together with [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) to make it dockable.
Consult the [`DockMonitor` README](https://github.com/gaearon/redux-devtools-dock-monitor) for details of this approach. Consult the [`DockMonitor` README](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) for details of this approach.
[Read how to start using Redux DevTools.](https://github.com/reduxjs/redux-devtools) [Read how to start using Redux DevTools.](https://github.com/reduxjs/redux-devtools)

2
packages/redux-devtools-slider-monitor/README.md
View File

@ -16,7 +16,7 @@ It uses a slider based on [react-slider](https://github.com/mpowaga/react-slider
### Recommended Usage ### Recommended Usage
Use with [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) Use with [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor)
```javascript ```javascript
<DockMonitor <DockMonitor

2
packages/redux-devtools-slider-monitor/examples/todomvc/containers/DevTools.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { createDevTools } from '@redux-devtools/core'; import { createDevTools } from '@redux-devtools/core';
import DockMonitor from 'redux-devtools-dock-monitor'; import DockMonitor from '@redux-devtools/dock-monitor';
import SliderMonitor from 'redux-devtools-slider-monitor'; import SliderMonitor from 'redux-devtools-slider-monitor';
export default createDevTools( export default createDevTools(

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

@ -16,13 +16,13 @@
}, },
"dependencies": { "dependencies": {
"@redux-devtools/core": "^3.7.0", "@redux-devtools/core": "^3.7.0",
"@redux-devtools/dock-monitor": "^1.2.0",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-hot-loader": "^4.12.21", "react-hot-loader": "^4.12.21",
"react-redux": "^7.2.1", "react-redux": "^7.2.1",
"redux": "^4.0.5", "redux": "^4.0.5",
"redux-devtools-dock-monitor": "^1.2.0",
"redux-devtools-log-monitor": "^2.1.0", "redux-devtools-log-monitor": "^2.1.0",
"redux-devtools-slider-monitor": "^2.0.0-5", "redux-devtools-slider-monitor": "^2.0.0-5",
"todomvc-app-css": "^2.3.0" "todomvc-app-css": "^2.3.0"

4
packages/redux-devtools/README.md
View File

@ -31,7 +31,7 @@ A live-editing time travel environment for [Redux](https://github.com/reactjs/re
### Overview ### Overview
Redux DevTools is a development time package that provides power-ups for your Redux development workflow. Be careful to strip its code in production (see [walkthrough](../../docs/Walkthrough.md) for instructions)! To use Redux DevTools, you need to choose a “monitor”—a React component that will serve as a UI for the DevTools. Different tasks and workflows require different UIs, so Redux DevTools is built to be flexible in this regard. We recommend using [`LogMonitor`](https://github.com/gaearon/redux-devtools-log-monitor) for inspecting the state and time travel, and wrap it in a [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) to quickly move it across the screen. That said, when you’re comfortable rolling up your own setup, feel free to do this, and share it with us. Redux DevTools is a development time package that provides power-ups for your Redux development workflow. Be careful to strip its code in production (see [walkthrough](../../docs/Walkthrough.md) for instructions)! To use Redux DevTools, you need to choose a “monitor”—a React component that will serve as a UI for the DevTools. Different tasks and workflows require different UIs, so Redux DevTools is built to be flexible in this regard. We recommend using [`LogMonitor`](https://github.com/gaearon/redux-devtools-log-monitor) for inspecting the state and time travel, and wrap it in a [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) to quickly move it across the screen. That said, when you’re comfortable rolling up your own setup, feel free to do this, and share it with us.
If you came here looking for what do the “Reset”, “Revert”, “Sweep” or “Commit” buttons do, check out [the `LogMonitor` documentation](https://github.com/gaearon/redux-devtools-log-monitor/blob/master/README.md#features). If you came here looking for what do the “Reset”, “Revert”, “Sweep” or “Commit” buttons do, check out [the `LogMonitor` documentation](https://github.com/gaearon/redux-devtools-log-monitor/blob/master/README.md#features).
@ -78,7 +78,7 @@ Also try opening `http://localhost:3000/?debug_session=123`, click around, and t
### Custom Monitors ### Custom Monitors
**DevTools accepts monitor components so you can build a completely custom UI.** [`LogMonitor`](https://github.com/gaearon/redux-devtools-log-monitor) and [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) are just examples of what is possible. **DevTools accepts monitor components so you can build a completely custom UI.** [`LogMonitor`](https://github.com/gaearon/redux-devtools-log-monitor) and [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) are just examples of what is possible.
**[I challenge you to build a custom monitor for Redux DevTools!](https://github.com/reduxjs/redux-devtools/issues/3)** **[I challenge you to build a custom monitor for Redux DevTools!](https://github.com/reduxjs/redux-devtools/issues/3)**

2
packages/redux-devtools/examples/counter/package.json
View File

@ -20,13 +20,13 @@
}, },
"dependencies": { "dependencies": {
"@redux-devtools/core": "^3.7.0", "@redux-devtools/core": "^3.7.0",
"@redux-devtools/dock-monitor": "^1.2.0",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-hot-loader": "^4.12.21", "react-hot-loader": "^4.12.21",
"react-redux": "^7.2.1", "react-redux": "^7.2.1",
"redux": "^4.0.5", "redux": "^4.0.5",
"redux-devtools-dock-monitor": "^1.2.0",
"redux-devtools-log-monitor": "^2.1.0", "redux-devtools-log-monitor": "^2.1.0",
"redux-thunk": "^2.3.0" "redux-thunk": "^2.3.0"
}, },

2
packages/redux-devtools/examples/counter/src/containers/DevTools.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { createDevTools } from '@redux-devtools/core'; import { createDevTools } from '@redux-devtools/core';
import LogMonitor from 'redux-devtools-log-monitor'; import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor'; import DockMonitor from '@redux-devtools/dock-monitor';
export default createDevTools( export default createDevTools(
<DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q"> <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">

2
packages/redux-devtools/examples/todomvc/containers/DevTools.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { createDevTools } from '@redux-devtools/core'; import { createDevTools } from '@redux-devtools/core';
import LogMonitor from 'redux-devtools-log-monitor'; import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor'; import DockMonitor from '@redux-devtools/dock-monitor';
export default createDevTools( export default createDevTools(
<DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q"> <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">

2
packages/redux-devtools/examples/todomvc/package.json
View File

@ -32,6 +32,7 @@
}, },
"dependencies": { "dependencies": {
"@redux-devtools/core": "^3.7.0", "@redux-devtools/core": "^3.7.0",
"@redux-devtools/dock-monitor": "^1.2.0",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^16.13.1", "react": "^16.13.1",
@ -39,7 +40,6 @@
"react-hot-loader": "^4.12.21", "react-hot-loader": "^4.12.21",
"react-redux": "^7.2.1", "react-redux": "^7.2.1",
"redux": "^4.0.5", "redux": "^4.0.5",
"redux-devtools-dock-monitor": "^1.2.0",
"redux-devtools-log-monitor": "^2.1.0", "redux-devtools-log-monitor": "^2.1.0",
"todomvc-app-css": "^2.3.0" "todomvc-app-css": "^2.3.0"
}, },