mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-07-22 06:00:07 +03:00
Merge branch 'main' into react-json-tree-unsafe
This commit is contained in:
Nathan Bierema
GitHub
commit
99acb5b040
8
.changeset/friendly-coats-trade.md
Normal file
8
.changeset/friendly-coats-trade.md
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
'd3-state-visualizer': major
|
||||
---
|
||||
|
||||
- Remove UMD build.
|
||||
- Split `style` option into `chartStyles`, `nodeStyleOptions`, `textStyleOptions`, and `linkStyles`.
|
||||
- The shape of the argument passed to the `onClickText` option has been updated.
|
||||
- Rename `InputOptions` to `Options`, `Primitive` to `StyleValue`, and `NodeWithId` to `HierarchyPointNode<Node>`.
|
||||
6
.changeset/slimy-elephants-flash.md
Normal file
6
.changeset/slimy-elephants-flash.md
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
'@redux-devtools/chart-monitor': major
|
||||
---
|
||||
|
||||
- Split `style` option into `chartStyles`, `nodeStyleOptions`, `textStyleOptions`, and `linkStyles`.
|
||||
- The shape of the argument passed to the `onClickText` option has been updated.
|
||||
10
.changeset/spicy-olives-compete.md
Normal file
10
.changeset/spicy-olives-compete.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
'd3tooltip': major
|
||||
---
|
||||
|
||||
- Remove UMD build.
|
||||
- Upgrade d3 peer dependency from v3 to v7.
|
||||
- Remove `attr` configuration method.
|
||||
- Rename `style` configuration method to `styles` and move to options.
|
||||
- Move `text` configuration method to options.
|
||||
- Remove d3 parameter as first parameter for `tooltip`.
|
||||
5
.changeset/weak-kings-brake.md
Normal file
5
.changeset/weak-kings-brake.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'map2tree': major
|
||||
---
|
||||
|
||||
- Remove UMD build.
|
||||
|
|
@ -1,5 +1,17 @@
|
|||
# remotedev-redux-devtools-extension
|
||||
|
||||
## 3.0.17
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 1aa6c4f7: Fix remounting root for devpanel
|
||||
|
||||
## 3.0.16
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 20ebf725: Remove source map from page wrap bundle
|
||||
|
||||
## 3.0.14
|
||||
|
||||
### Patch Changes
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"version": "3.0.11",
|
||||
"version": "3.0.17",
|
||||
"name": "Redux DevTools",
|
||||
"description": "Redux DevTools for debugging application's state changes.",
|
||||
"homepage_url": "https://github.com/reduxjs/redux-devtools",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"version": "3.0.11",
|
||||
"version": "3.0.17",
|
||||
"name": "Redux DevTools",
|
||||
"description": "Redux DevTools for debugging application's state changes.",
|
||||
"homepage_url": "https://github.com/reduxjs/redux-devtools",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"version": "3.0.11",
|
||||
"version": "3.0.17",
|
||||
"name": "Redux DevTools",
|
||||
"manifest_version": 2,
|
||||
"description": "Redux Developer Tools for debugging application state changes.",
|
||||
|
|
|
|||
|
|
@ -5,5 +5,7 @@ module.exports = {
|
|||
moduleNameMapper: {
|
||||
'\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
|
||||
},
|
||||
resolver: '<rootDir>/jestResolver.js',
|
||||
transformIgnorePatterns: [
|
||||
'node_modules/(?!.pnpm|d3|dateformat|delaunator|nanoid|robust-predicates|uuid)',
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
module.exports = (path, options) => {
|
||||
return options.defaultResolver(path, {
|
||||
...options,
|
||||
packageFilter: (pkg) => {
|
||||
if (pkg.name === 'nanoid') {
|
||||
pkg.exports['.'].browser = pkg.exports['.'].require;
|
||||
}
|
||||
if (pkg.name === 'uuid' && pkg.version.startsWith('8.')) {
|
||||
delete pkg.exports;
|
||||
delete pkg.module;
|
||||
}
|
||||
return pkg;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"private": true,
|
||||
"name": "remotedev-redux-devtools-extension",
|
||||
"version": "3.0.14",
|
||||
"version": "3.0.17",
|
||||
"description": "Redux Developer Tools for debugging application state changes.",
|
||||
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/extension",
|
||||
"license": "MIT",
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
"lodash": "^4.17.21",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^4.6.0",
|
||||
"react-icons": "^4.7.1",
|
||||
"react-is": "^18.2.0",
|
||||
"react-json-tree": "^0.17.0",
|
||||
"react-redux": "^8.0.5",
|
||||
|
|
@ -50,33 +50,33 @@
|
|||
"styled-components": "^5.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@babel/register": "^7.18.9",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@types/chrome": "^0.0.203",
|
||||
"@types/lodash": "^4.14.190",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/chrome": "^0.0.206",
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@types/styled-components": "^5.1.26",
|
||||
"babel-loader": "^9.1.0",
|
||||
"chromedriver": "^106.0.1",
|
||||
"chromedriver": "^108.0.0",
|
||||
"copy-webpack-plugin": "^11.0.0",
|
||||
"cpy-cli": "^4.2.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^6.7.2",
|
||||
"electron": "^21.3.1",
|
||||
"eslint": "^8.28.0",
|
||||
"css-loader": "^6.7.3",
|
||||
"electron": "^22.0.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-airbnb": "^19.0.4",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.6.1",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.13",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.14",
|
||||
"immutable": "^4.1.0",
|
||||
"jest": "^29.3.1",
|
||||
"jest-environment-jsdom": "^29.3.1",
|
||||
|
|
@ -85,12 +85,12 @@
|
|||
"react-transform-catch-errors": "^1.0.2",
|
||||
"react-transform-hmr": "^1.0.4",
|
||||
"rimraf": "^3.0.2",
|
||||
"selenium-webdriver": "^4.6.1",
|
||||
"selenium-webdriver": "^4.7.1",
|
||||
"sinon-chrome": "^3.0.1",
|
||||
"style-loader": "^3.3.1",
|
||||
"ts-jest": "^29.0.3",
|
||||
"typescript": "~4.9.3",
|
||||
"typescript": "~4.9.4",
|
||||
"webpack": "^5.75.0",
|
||||
"webpack-cli": "^5.0.0"
|
||||
"webpack-cli": "^5.0.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { CSSProperties } from 'react';
|
||||
import React, { CSSProperties, ReactNode } from 'react';
|
||||
import { createRoot, Root } from 'react-dom/client';
|
||||
import { Provider } from 'react-redux';
|
||||
import { Persistor } from 'redux-persist';
|
||||
|
|
@ -20,6 +20,7 @@ const messageStyle: CSSProperties = {
|
|||
};
|
||||
|
||||
let rendered: boolean | undefined;
|
||||
let currentRoot: Root | undefined;
|
||||
let store: Store<StoreStateWithoutSocket, StoreAction> | undefined;
|
||||
let persistor: Persistor | undefined;
|
||||
let bgConnection: chrome.runtime.Port;
|
||||
|
|
@ -27,11 +28,16 @@ let naTimeout: NodeJS.Timeout;
|
|||
|
||||
const isChrome = navigator.userAgent.indexOf('Firefox') === -1;
|
||||
|
||||
function renderDevTools(root: Root) {
|
||||
root.unmount();
|
||||
function renderNodeAtRoot(node: ReactNode) {
|
||||
if (currentRoot) currentRoot.unmount();
|
||||
currentRoot = createRoot(document.getElementById('root')!);
|
||||
currentRoot.render(node);
|
||||
}
|
||||
|
||||
function renderDevTools() {
|
||||
clearTimeout(naTimeout);
|
||||
({ store, persistor } = configureStore(position, bgConnection));
|
||||
root.render(
|
||||
renderNodeAtRoot(
|
||||
<Provider store={store}>
|
||||
<PersistGate loading={null} persistor={persistor}>
|
||||
<App position={position} />
|
||||
|
|
@ -41,7 +47,7 @@ function renderDevTools(root: Root) {
|
|||
rendered = true;
|
||||
}
|
||||
|
||||
function renderNA(root: Root) {
|
||||
function renderNA() {
|
||||
if (rendered === false) return;
|
||||
rendered = false;
|
||||
naTimeout = setTimeout(() => {
|
||||
|
|
@ -74,31 +80,28 @@ function renderNA(root: Root) {
|
|||
);
|
||||
}
|
||||
|
||||
root.unmount();
|
||||
root.render(message);
|
||||
renderNodeAtRoot(message);
|
||||
store = undefined;
|
||||
});
|
||||
} else {
|
||||
root.unmount();
|
||||
root.render(message);
|
||||
renderNodeAtRoot(message);
|
||||
store = undefined;
|
||||
}
|
||||
}, 3500);
|
||||
}
|
||||
|
||||
function init(id: number) {
|
||||
const root = createRoot(document.getElementById('root')!);
|
||||
renderNA(root);
|
||||
renderNA();
|
||||
bgConnection = chrome.runtime.connect({
|
||||
name: id ? id.toString() : undefined,
|
||||
});
|
||||
bgConnection.onMessage.addListener(
|
||||
<S, A extends Action<unknown>>(message: PanelMessage<S, A>) => {
|
||||
if (message.type === 'NA') {
|
||||
if (message.id === id) renderNA(root);
|
||||
if (message.id === id) renderNA();
|
||||
else store!.dispatch({ type: REMOVE_INSTANCE, id: message.id });
|
||||
} else {
|
||||
if (!rendered) renderDevTools(root);
|
||||
if (!rendered) renderDevTools();
|
||||
store!.dispatch(message);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
|
|||
module.exports = function (env) {
|
||||
return {
|
||||
mode: env.production ? 'production' : 'development',
|
||||
devtool: env.production ? 'source-map' : 'eval-source-map',
|
||||
devtool: env.production ? undefined : 'eval-source-map',
|
||||
entry: {
|
||||
background: [
|
||||
path.resolve(__dirname, 'src/chromeApiMock'),
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
|
|||
|
||||
module.exports = {
|
||||
mode: 'production',
|
||||
devtool: 'source-map',
|
||||
entry: {
|
||||
pagewrap: path.resolve(__dirname, 'src/pageScriptWrap'),
|
||||
},
|
||||
|
|
|
|||
20
package.json
20
package.json
|
|
@ -1,20 +1,20 @@
|
|||
{
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@changesets/cli": "^2.25.2",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@changesets/cli": "^2.26.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-jest": "^27.1.6",
|
||||
"eslint-plugin-jest": "^27.1.7",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"jest": "^29.3.1",
|
||||
"prettier": "2.8.0",
|
||||
"typescript": "~4.9.3",
|
||||
"nx": "^15.2.1",
|
||||
"prettier": "2.8.1",
|
||||
"typescript": "~4.9.4",
|
||||
"nx": "^15.3.3",
|
||||
"@nrwl/nx-cloud": "^15.0.2"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
"packages/redux-devtools-rtk-query-monitor/demo",
|
||||
"packages/redux-devtools-slider-monitor/examples/todomvc"
|
||||
],
|
||||
"packageManager": "pnpm@7.17.1",
|
||||
"packageManager": "pnpm@7.19.0",
|
||||
"pnpm": {
|
||||
"overrides": {
|
||||
"@babel/highlight>chalk": "Methuselah96/chalk#v2-without-process"
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ const render = tree(document.getElementById('root'), {
|
|||
isSorted: false,
|
||||
widthBetweenNodesCoeff: 1.5,
|
||||
heightBetweenNodesCoeff: 2,
|
||||
style: { border: '1px solid black' },
|
||||
chartStyles: { border: '1px solid black' },
|
||||
tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 },
|
||||
});
|
||||
|
||||
|
|
@ -61,7 +61,7 @@ Other options are listed below and have reasonable default values if you want to
|
|||
| Option | Type | Default | Description |
|
||||
| ------------------------- | ------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `id` | String | `'d3svg'` | Sets the identifier of the SVG element —i.e your chart— that will be added to the DOM element you passed as first argument |
|
||||
| `style` | Object | `{}` | Sets the CSS style of the chart |
|
||||
| `chartStyles` | Object | `{}` | Sets the CSS style of the chart |
|
||||
| `size` | Number | `500` | Sets size of the chart in pixels |
|
||||
| `aspectRatio` | Float | `1.0` | Sets the chart height to `size * aspectRatio` and [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) in order to preserve the aspect ratio of the chart. [Great video](https://www.youtube.com/watch?v=FCOeMy7HrBc) if you want to learn more about how SVG works |
|
||||
| `widthBetweenNodesCoeff` | Float | `1.0` | Alters the horizontal space between each node |
|
||||
|
|
@ -74,12 +74,6 @@ Other options are listed below and have reasonable default values if you want to
|
|||
|
||||
More to come...
|
||||
|
||||
## Bindings
|
||||
|
||||
### React
|
||||
|
||||
[example](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3-state-visualizer/examples/react-tree) implementation.
|
||||
|
||||
## Roadmap
|
||||
|
||||
- Threshold for large arrays so only a single node is displayed instead of all the children. That single node would be exclude from searching until selected.
|
||||
|
|
|
|||
|
|
@ -29,22 +29,22 @@
|
|||
"map2tree": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@types/node": "^18.11.9",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"@types/node": "^18.11.17",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"babel-loader": "^9.1.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.13",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.14",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "~4.9.3",
|
||||
"typescript": "~4.9.4",
|
||||
"webpack": "^5.75.0",
|
||||
"webpack-cli": "^5.0.0",
|
||||
"webpack-cli": "^5.0.1",
|
||||
"webpack-dev-server": "^4.11.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const render = tree(document.getElementById('root')!, {
|
|||
isSorted: false,
|
||||
widthBetweenNodesCoeff: 1.5,
|
||||
heightBetweenNodesCoeff: 2,
|
||||
style: { border: '1px solid black' },
|
||||
chartStyles: { border: '1px solid black' },
|
||||
tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 },
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -23,18 +23,16 @@
|
|||
"main": "lib/cjs/index.js",
|
||||
"module": "lib/esm/index.js",
|
||||
"types": "lib/types/index.d.ts",
|
||||
"unpkg": "dist/d3-state-visualizer.umd.js",
|
||||
"sideEffects": false,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/reduxjs/redux-devtools.git"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:umd",
|
||||
"build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types",
|
||||
"build:cjs": "babel src --extensions \".ts\" --out-dir lib/cjs",
|
||||
"build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts\" --out-dir lib/esm",
|
||||
"build:types": "tsc --emitDeclarationOnly",
|
||||
"build:umd": "rollup -c",
|
||||
"clean": "rimraf lib",
|
||||
"lint": "eslint . --ext .ts",
|
||||
"type-check": "tsc --noEmit",
|
||||
|
|
@ -42,9 +40,9 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@types/d3": "^3.5.47",
|
||||
"d3": "^3.5.17",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@types/d3": "^7.4.0",
|
||||
"d3": "^7.8.0",
|
||||
"d3tooltip": "^2.1.0",
|
||||
"deepmerge": "^4.2.2",
|
||||
"map2tree": "^2.1.0",
|
||||
|
|
@ -52,25 +50,16 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@rollup/plugin-babel": "^6.0.3",
|
||||
"@rollup/plugin-commonjs": "^23.0.2",
|
||||
"@rollup/plugin-node-resolve": "^15.0.1",
|
||||
"@rollup/plugin-terser": "^0.1.0",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/ramda": "^0.28.20",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"rollup": "^3.5.0",
|
||||
"rollup-plugin-typescript2": "^0.34.1",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +0,0 @@
|
|||
import typescript from 'rollup-plugin-typescript2';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import babel from '@rollup/plugin-babel';
|
||||
import terser from '@rollup/plugin-terser';
|
||||
|
||||
const config = [
|
||||
{
|
||||
input: 'src/index.ts',
|
||||
output: {
|
||||
name: 'd3-state-visualizer',
|
||||
file: 'lib/umd/d3-state-visualizer.js',
|
||||
format: 'umd',
|
||||
},
|
||||
plugins: [
|
||||
typescript({
|
||||
tsconfigOverride: { compilerOptions: { declaration: false } },
|
||||
}),
|
||||
resolve(),
|
||||
commonjs(),
|
||||
babel({
|
||||
babelHelpers: 'runtime',
|
||||
extensions: ['.ts'],
|
||||
plugins: ['@babel/plugin-transform-runtime'],
|
||||
}),
|
||||
],
|
||||
},
|
||||
{
|
||||
input: 'src/index.ts',
|
||||
output: {
|
||||
name: 'd3-state-visualizer',
|
||||
file: 'lib/umd/d3-state-visualizer.min.js',
|
||||
format: 'umd',
|
||||
},
|
||||
plugins: [
|
||||
typescript({
|
||||
tsconfigOverride: { compilerOptions: { declaration: false } },
|
||||
}),
|
||||
resolve(),
|
||||
commonjs(),
|
||||
babel({
|
||||
babelHelpers: 'runtime',
|
||||
extensions: ['.ts'],
|
||||
plugins: ['@babel/plugin-transform-runtime'],
|
||||
}),
|
||||
terser(),
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default config;
|
||||
|
|
@ -1,2 +1,4 @@
|
|||
export type { HierarchyPointNode } from 'd3';
|
||||
export type { StyleValue } from 'd3tooltip';
|
||||
export { default as tree } from './tree/tree';
|
||||
export type { InputOptions, NodeWithId, Primitive } from './tree/tree';
|
||||
export type { Node, Options } from './tree/tree';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import d3, { ZoomEvent, Primitive } from 'd3';
|
||||
import * as d3 from 'd3';
|
||||
import type { D3ZoomEvent, HierarchyPointLink, HierarchyPointNode } from 'd3';
|
||||
import { isEmpty } from 'ramda';
|
||||
import { map2tree } from 'map2tree';
|
||||
import type { Node } from 'map2tree';
|
||||
import deepmerge from 'deepmerge';
|
||||
import {
|
||||
getTooltipString,
|
||||
|
|
@ -9,17 +11,33 @@ import {
|
|||
getNodeGroupByDepthCount,
|
||||
} from './utils';
|
||||
import { tooltip } from 'd3tooltip';
|
||||
import type { StyleValue } from 'd3tooltip';
|
||||
|
||||
export interface InputOptions {
|
||||
export interface Options {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
state?: {} | null;
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
tree?: NodeWithId | {};
|
||||
tree?: Node | {};
|
||||
|
||||
rootKeyName: string;
|
||||
pushMethod: 'push' | 'unshift';
|
||||
id: string;
|
||||
style: { [key: string]: Primitive };
|
||||
chartStyles: { [key: string]: StyleValue };
|
||||
nodeStyleOptions: {
|
||||
colors: {
|
||||
default: string;
|
||||
collapsed: string;
|
||||
parent: string;
|
||||
};
|
||||
radius: number;
|
||||
};
|
||||
textStyleOptions: {
|
||||
colors: {
|
||||
default: string;
|
||||
hover: string;
|
||||
};
|
||||
};
|
||||
linkStyles: { [key: string]: StyleValue };
|
||||
size: number;
|
||||
aspectRatio: number;
|
||||
initialZoom: number;
|
||||
|
|
@ -34,7 +52,7 @@ export interface InputOptions {
|
|||
widthBetweenNodesCoeff: number;
|
||||
transitionDuration: number;
|
||||
blinkDuration: number;
|
||||
onClickText: (datum: NodeWithId) => void;
|
||||
onClickText: (datum: HierarchyPointNode<Node>) => void;
|
||||
tooltipOptions: {
|
||||
disabled?: boolean;
|
||||
left?: number | undefined;
|
||||
|
|
@ -43,64 +61,7 @@ export interface InputOptions {
|
|||
left: number;
|
||||
top: number;
|
||||
};
|
||||
style?: { [key: string]: Primitive } | undefined;
|
||||
indentationSize?: number;
|
||||
};
|
||||
}
|
||||
|
||||
interface Options {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
state?: {} | null;
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
tree?: NodeWithId | {};
|
||||
|
||||
rootKeyName: string;
|
||||
pushMethod: 'push' | 'unshift';
|
||||
id: string;
|
||||
style: {
|
||||
node: {
|
||||
colors: {
|
||||
default: string;
|
||||
collapsed: string;
|
||||
parent: string;
|
||||
};
|
||||
radius: number;
|
||||
};
|
||||
text: {
|
||||
colors: {
|
||||
default: string;
|
||||
hover: string;
|
||||
};
|
||||
};
|
||||
link: {
|
||||
stroke: string;
|
||||
fill: string;
|
||||
};
|
||||
};
|
||||
size: number;
|
||||
aspectRatio: number;
|
||||
initialZoom: number;
|
||||
margin: {
|
||||
top: number;
|
||||
right: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
};
|
||||
isSorted: boolean;
|
||||
heightBetweenNodesCoeff: number;
|
||||
widthBetweenNodesCoeff: number;
|
||||
transitionDuration: number;
|
||||
blinkDuration: number;
|
||||
onClickText: () => void;
|
||||
tooltipOptions: {
|
||||
disabled: boolean;
|
||||
left: number | undefined;
|
||||
top: number | undefined;
|
||||
offset: {
|
||||
left: number;
|
||||
top: number;
|
||||
};
|
||||
style: { [key: string]: Primitive } | undefined;
|
||||
styles?: { [key: string]: StyleValue } | undefined;
|
||||
indentationSize?: number;
|
||||
};
|
||||
}
|
||||
|
|
@ -111,26 +72,25 @@ const defaultOptions: Options = {
|
|||
pushMethod: 'push',
|
||||
tree: undefined,
|
||||
id: 'd3svg',
|
||||
style: {
|
||||
node: {
|
||||
colors: {
|
||||
default: '#ccc',
|
||||
collapsed: 'lightsteelblue',
|
||||
parent: 'white',
|
||||
},
|
||||
radius: 7,
|
||||
chartStyles: {},
|
||||
nodeStyleOptions: {
|
||||
colors: {
|
||||
default: '#ccc',
|
||||
collapsed: 'lightsteelblue',
|
||||
parent: 'white',
|
||||
},
|
||||
text: {
|
||||
colors: {
|
||||
default: 'black',
|
||||
hover: 'skyblue',
|
||||
},
|
||||
},
|
||||
link: {
|
||||
stroke: '#000',
|
||||
fill: 'none',
|
||||
radius: 7,
|
||||
},
|
||||
textStyleOptions: {
|
||||
colors: {
|
||||
default: 'black',
|
||||
hover: 'skyblue',
|
||||
},
|
||||
},
|
||||
linkStyles: {
|
||||
stroke: '#000',
|
||||
fill: 'none',
|
||||
},
|
||||
size: 500,
|
||||
aspectRatio: 1.0,
|
||||
initialZoom: 1,
|
||||
|
|
@ -156,37 +116,29 @@ const defaultOptions: Options = {
|
|||
left: 0,
|
||||
top: 0,
|
||||
},
|
||||
style: undefined,
|
||||
styles: undefined,
|
||||
},
|
||||
};
|
||||
} satisfies Options;
|
||||
|
||||
export interface NodeWithId {
|
||||
name: string;
|
||||
children?: NodeWithId[] | null;
|
||||
_children?: NodeWithId[] | null;
|
||||
value?: unknown;
|
||||
id: string;
|
||||
|
||||
parent?: NodeWithId;
|
||||
depth?: number;
|
||||
x?: number;
|
||||
y?: number;
|
||||
export interface InternalNode extends Node {
|
||||
_children?: this[] | undefined;
|
||||
id: string | number;
|
||||
}
|
||||
|
||||
interface NodePosition {
|
||||
parentId: string | null | undefined;
|
||||
id: string;
|
||||
x: number | undefined;
|
||||
y: number | undefined;
|
||||
parentId: string | number | null;
|
||||
id: string | number;
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
export default function (
|
||||
DOMNode: HTMLElement,
|
||||
options: Partial<InputOptions> = {}
|
||||
) {
|
||||
export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
|
||||
const {
|
||||
id,
|
||||
style,
|
||||
chartStyles,
|
||||
nodeStyleOptions,
|
||||
textStyleOptions,
|
||||
linkStyles,
|
||||
size,
|
||||
aspectRatio,
|
||||
initialZoom,
|
||||
|
|
@ -202,64 +154,50 @@ export default function (
|
|||
tree,
|
||||
tooltipOptions,
|
||||
onClickText,
|
||||
} = deepmerge(defaultOptions, options) as Options;
|
||||
} = deepmerge(defaultOptions, options);
|
||||
|
||||
const width = size - margin.left - margin.right;
|
||||
const height = size * aspectRatio - margin.top - margin.bottom;
|
||||
const fullWidth = size;
|
||||
const fullHeight = size * aspectRatio;
|
||||
|
||||
const attr: { [key: string]: Primitive } = {
|
||||
id,
|
||||
preserveAspectRatio: 'xMinYMin slice',
|
||||
};
|
||||
|
||||
if (!(style as unknown as { [key: string]: Primitive }).width) {
|
||||
attr.width = fullWidth;
|
||||
}
|
||||
|
||||
if (
|
||||
!(style as unknown as { [key: string]: Primitive }).width ||
|
||||
!(style as unknown as { [key: string]: Primitive }).height
|
||||
) {
|
||||
attr.viewBox = `0 0 ${fullWidth} ${fullHeight}`;
|
||||
}
|
||||
|
||||
const root = d3.select(DOMNode);
|
||||
const zoom = d3.behavior.zoom().scaleExtent([0.1, 3]).scale(initialZoom);
|
||||
const vis = root
|
||||
const zoom = d3.zoom<SVGSVGElement, unknown>().scaleExtent([0.1, 3]);
|
||||
|
||||
const svgElement = root
|
||||
.append('svg')
|
||||
.attr(attr)
|
||||
.style({ cursor: '-webkit-grab', ...style } as unknown as {
|
||||
[key: string]: Primitive;
|
||||
})
|
||||
.attr('id', id)
|
||||
.attr('preserveAspectRatio', 'xMinYMin slice')
|
||||
.style('cursor', '-webkit-grab');
|
||||
|
||||
if (!chartStyles.width) {
|
||||
svgElement.attr('width', fullWidth);
|
||||
}
|
||||
|
||||
if (!chartStyles.width || !chartStyles.height) {
|
||||
svgElement.attr('viewBox', `0 0 ${fullWidth} ${fullHeight}`);
|
||||
}
|
||||
|
||||
for (const [key, value] of Object.entries(chartStyles)) {
|
||||
svgElement.style(key, value);
|
||||
}
|
||||
|
||||
const vis = svgElement
|
||||
// eslint-disable-next-line @typescript-eslint/unbound-method
|
||||
.call(zoom.scaleTo, initialZoom)
|
||||
.call(
|
||||
zoom.on('zoom', () => {
|
||||
const { translate, scale } = d3.event as ZoomEvent;
|
||||
vis.attr(
|
||||
'transform',
|
||||
`translate(${translate.toString()})scale(${scale})`
|
||||
);
|
||||
zoom.on('zoom', (event) => {
|
||||
const { transform } = event as D3ZoomEvent<SVGSVGElement, unknown>;
|
||||
vis.attr('transform', transform.toString());
|
||||
})
|
||||
)
|
||||
.append('g')
|
||||
.attr({
|
||||
transform: `translate(${margin.left + style.node.radius}, ${
|
||||
.attr(
|
||||
'transform',
|
||||
`translate(${margin.left + nodeStyleOptions.radius}, ${
|
||||
margin.top
|
||||
}) scale(${initialZoom})`,
|
||||
});
|
||||
|
||||
let layout = d3.layout.tree().size([width, height]);
|
||||
let data: NodeWithId;
|
||||
|
||||
if (isSorted) {
|
||||
layout.sort((a, b) =>
|
||||
(b as NodeWithId).name.toLowerCase() <
|
||||
(a as NodeWithId).name.toLowerCase()
|
||||
? 1
|
||||
: -1
|
||||
}) scale(${initialZoom})`
|
||||
);
|
||||
}
|
||||
|
||||
// previousNodePositionsById stores node x and y
|
||||
// as well as hierarchy (id / parentId);
|
||||
|
|
@ -277,8 +215,8 @@ export default function (
|
|||
// of parent ids; once a parent that matches the given filter is found,
|
||||
// the parent position gets returned
|
||||
function findParentNodePosition(
|
||||
nodePositionsById: { [nodeId: string]: NodePosition },
|
||||
nodeId: string,
|
||||
nodePositionsById: { [nodeId: string | number]: NodePosition },
|
||||
nodeId: string | number,
|
||||
filter: (nodePosition: NodePosition) => boolean
|
||||
) {
|
||||
let currentPosition = nodePositionsById[nodeId];
|
||||
|
|
@ -294,19 +232,18 @@ export default function (
|
|||
}
|
||||
|
||||
return function renderChart(nextState = tree || state) {
|
||||
data = !tree
|
||||
? // eslint-disable-next-line @typescript-eslint/ban-types
|
||||
(map2tree(nextState as {}, {
|
||||
let data = !tree
|
||||
? (map2tree(nextState, {
|
||||
key: rootKeyName,
|
||||
pushMethod,
|
||||
}) as NodeWithId)
|
||||
: (nextState as NodeWithId);
|
||||
}) as InternalNode)
|
||||
: (nextState as InternalNode);
|
||||
|
||||
if (isEmpty(data) || !data.name) {
|
||||
data = {
|
||||
name: 'error',
|
||||
message: 'Please provide a state map or a tree structure',
|
||||
} as unknown as NodeWithId;
|
||||
} as unknown as InternalNode;
|
||||
}
|
||||
|
||||
let nodeIndex = 0;
|
||||
|
|
@ -334,76 +271,94 @@ export default function (
|
|||
|
||||
function update() {
|
||||
// path generator for links
|
||||
const diagonal = d3.svg
|
||||
.diagonal<NodePosition>()
|
||||
.projection((d) => [d.y!, d.x!]);
|
||||
const linkHorizontal = d3
|
||||
.linkHorizontal<
|
||||
{
|
||||
source: { x: number; y: number };
|
||||
target: { x: number; y: number };
|
||||
},
|
||||
{ x: number; y: number }
|
||||
>()
|
||||
.x((d) => d.y)
|
||||
.y((d) => d.x);
|
||||
// set tree dimensions and spacing between branches and nodes
|
||||
const maxNodeCountByLevel = Math.max(...getNodeGroupByDepthCount(data));
|
||||
|
||||
layout = layout.size([
|
||||
maxNodeCountByLevel * 25 * heightBetweenNodesCoeff,
|
||||
width,
|
||||
]);
|
||||
const layout = d3
|
||||
.tree<InternalNode>()
|
||||
.size([maxNodeCountByLevel * 25 * heightBetweenNodesCoeff, width]);
|
||||
|
||||
const nodes = layout.nodes(data as d3.layout.tree.Node) as NodeWithId[];
|
||||
const links = layout.links(nodes as d3.layout.tree.Node[]);
|
||||
const rootNode = d3.hierarchy(data);
|
||||
if (isSorted) {
|
||||
rootNode.sort((a, b) =>
|
||||
b.data.name.toLowerCase() < a.data.name.toLowerCase() ? 1 : -1
|
||||
);
|
||||
}
|
||||
|
||||
nodes.forEach(
|
||||
const rootPointNode = layout(rootNode);
|
||||
const links = rootPointNode.links();
|
||||
|
||||
rootPointNode.each(
|
||||
(node) =>
|
||||
(node.y = node.depth! * (maxLabelLength * 7 * widthBetweenNodesCoeff))
|
||||
(node.y = node.depth * (maxLabelLength * 7 * widthBetweenNodesCoeff))
|
||||
);
|
||||
|
||||
const nodes = rootPointNode.descendants();
|
||||
|
||||
const nodePositions = nodes.map((n) => ({
|
||||
parentId: n.parent && n.parent.id,
|
||||
id: n.id,
|
||||
parentId: n.parent && n.parent.data.id,
|
||||
id: n.data.id,
|
||||
x: n.x,
|
||||
y: n.y,
|
||||
}));
|
||||
const nodePositionsById: { [nodeId: string]: NodePosition } = {};
|
||||
const nodePositionsById: { [nodeId: string | number]: NodePosition } = {};
|
||||
nodePositions.forEach((node) => (nodePositionsById[node.id] = node));
|
||||
|
||||
// process the node selection
|
||||
const node = vis
|
||||
.selectAll('g.node')
|
||||
.property('__oldData__', (d: NodeWithId) => d)
|
||||
.data(nodes, (d) => d.id || (d.id = ++nodeIndex as unknown as string));
|
||||
.selectAll<SVGGElement, HierarchyPointNode<InternalNode>>('g.node')
|
||||
.property('__oldData__', (d) => d)
|
||||
.data(nodes, (d) => d.data.id || (d.data.id = ++nodeIndex));
|
||||
const nodeEnter = node
|
||||
.enter()
|
||||
.append('g')
|
||||
.attr({
|
||||
class: 'node',
|
||||
transform: (d) => {
|
||||
const position = findParentNodePosition(
|
||||
nodePositionsById,
|
||||
d.id,
|
||||
(n) => !!previousNodePositionsById[n.id]
|
||||
);
|
||||
const previousPosition =
|
||||
(position && previousNodePositionsById[position.id]) ||
|
||||
previousNodePositionsById.root;
|
||||
return `translate(${previousPosition.y!},${previousPosition.x!})`;
|
||||
},
|
||||
.attr('class', 'node')
|
||||
.attr('transform', (d) => {
|
||||
const position = findParentNodePosition(
|
||||
nodePositionsById,
|
||||
d.data.id,
|
||||
(n) => !!previousNodePositionsById[n.id]
|
||||
);
|
||||
const previousPosition =
|
||||
(position && previousNodePositionsById[position.id]) ||
|
||||
previousNodePositionsById.root;
|
||||
return `translate(${previousPosition.y},${previousPosition.x})`;
|
||||
})
|
||||
.style({
|
||||
fill: style.text.colors.default,
|
||||
cursor: 'pointer',
|
||||
.style('fill', textStyleOptions.colors.default)
|
||||
.style('cursor', 'pointer')
|
||||
.on('mouseover', function mouseover() {
|
||||
d3.select(this).style('fill', textStyleOptions.colors.hover);
|
||||
})
|
||||
.on('mouseover', function mouseover(this: EventTarget) {
|
||||
d3.select(this).style({
|
||||
fill: style.text.colors.hover,
|
||||
});
|
||||
})
|
||||
.on('mouseout', function mouseout(this: EventTarget) {
|
||||
d3.select(this).style({
|
||||
fill: style.text.colors.default,
|
||||
});
|
||||
.on('mouseout', function mouseout() {
|
||||
d3.select(this).style('fill', textStyleOptions.colors.default);
|
||||
});
|
||||
|
||||
if (!tooltipOptions.disabled) {
|
||||
nodeEnter.call(
|
||||
tooltip<NodeWithId>(d3, 'tooltip', { ...tooltipOptions, root })
|
||||
.text((d, i) => getTooltipString(d, i, tooltipOptions))
|
||||
.style(tooltipOptions.style)
|
||||
tooltip<
|
||||
SVGGElement,
|
||||
HierarchyPointNode<InternalNode>,
|
||||
SVGGElement,
|
||||
unknown,
|
||||
HTMLElement,
|
||||
unknown,
|
||||
null,
|
||||
undefined
|
||||
>('tooltip', {
|
||||
...tooltipOptions,
|
||||
root,
|
||||
text: (d) => getTooltipString(d.data, tooltipOptions),
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -412,77 +367,81 @@ export default function (
|
|||
const nodeEnterInnerGroup = nodeEnter.append('g');
|
||||
nodeEnterInnerGroup
|
||||
.append('circle')
|
||||
.attr({
|
||||
class: 'nodeCircle',
|
||||
r: 0,
|
||||
})
|
||||
.on('click', (clickedNode) => {
|
||||
if ((d3.event as Event).defaultPrevented) return;
|
||||
toggleChildren(clickedNode);
|
||||
.attr('class', 'nodeCircle')
|
||||
.attr('r', 0)
|
||||
.on('click', (event, clickedNode) => {
|
||||
if ((event as Event).defaultPrevented) return;
|
||||
toggleChildren(clickedNode.data);
|
||||
update();
|
||||
});
|
||||
|
||||
nodeEnterInnerGroup
|
||||
.append('text')
|
||||
.attr({
|
||||
class: 'nodeText',
|
||||
'text-anchor': 'middle',
|
||||
transform: 'translate(0,0)',
|
||||
dy: '.35em',
|
||||
})
|
||||
.style({
|
||||
'fill-opacity': 0,
|
||||
})
|
||||
.text((d) => d.name)
|
||||
.on('click', onClickText);
|
||||
|
||||
// update the text to reflect whether node has children or not
|
||||
node.select('text').text((d) => d.name);
|
||||
|
||||
// change the circle fill depending on whether it has children and is collapsed
|
||||
node.select('circle').style({
|
||||
stroke: 'black',
|
||||
'stroke-width': '1.5px',
|
||||
fill: (d) =>
|
||||
d._children
|
||||
? style.node.colors.collapsed
|
||||
: d.children
|
||||
? style.node.colors.parent
|
||||
: style.node.colors.default,
|
||||
});
|
||||
|
||||
// transition nodes to their new position
|
||||
const nodeUpdate = node
|
||||
.transition()
|
||||
.duration(transitionDuration)
|
||||
.attr({
|
||||
transform: (d) => `translate(${d.y!},${d.x!})`,
|
||||
.attr('class', 'nodeText')
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('transform', 'translate(0,0)')
|
||||
.attr('dy', '.35em')
|
||||
.style('fill-opacity', 0)
|
||||
.text((d) => d.data.name)
|
||||
.on('click', (_, datum) => {
|
||||
onClickText(datum);
|
||||
});
|
||||
|
||||
const nodeEnterAndUpdate = nodeEnter.merge(node);
|
||||
|
||||
// update the text to reflect whether node has children or not
|
||||
nodeEnterAndUpdate.select('text').text((d) => d.data.name);
|
||||
|
||||
// change the circle fill depending on whether it has children and is collapsed
|
||||
nodeEnterAndUpdate
|
||||
.select('circle')
|
||||
.style('stroke', 'black')
|
||||
.style('stroke-width', '1.5px')
|
||||
.style('fill', (d) =>
|
||||
d.data._children && d.data._children.length > 0
|
||||
? nodeStyleOptions.colors.collapsed
|
||||
: d.data.children && d.data.children.length > 0
|
||||
? nodeStyleOptions.colors.parent
|
||||
: nodeStyleOptions.colors.default
|
||||
);
|
||||
|
||||
// transition nodes to their new position
|
||||
const nodeUpdate = nodeEnterAndUpdate
|
||||
.transition()
|
||||
.duration(transitionDuration)
|
||||
.attr('transform', (d) => `translate(${d.y},${d.x})`);
|
||||
|
||||
// ensure circle radius is correct
|
||||
nodeUpdate.select('circle').attr('r', style.node.radius);
|
||||
nodeUpdate.select('circle').attr('r', nodeStyleOptions.radius);
|
||||
|
||||
// fade the text in and align it
|
||||
nodeUpdate
|
||||
.select('text')
|
||||
.select<SVGTextElement>('text')
|
||||
.style('fill-opacity', 1)
|
||||
.attr({
|
||||
transform: function transform(this: SVGGraphicsElement, d) {
|
||||
const x =
|
||||
(d.children || d._children ? -1 : 1) *
|
||||
(this.getBBox().width / 2 + style.node.radius + 5);
|
||||
return `translate(${x},0)`;
|
||||
},
|
||||
.attr('transform', function transform(d) {
|
||||
const x =
|
||||
(((d.data.children ?? d.data._children)?.length ?? 0) > 0
|
||||
? -1
|
||||
: 1) *
|
||||
(this.getBBox().width / 2 + nodeStyleOptions.radius + 5);
|
||||
return `translate(${x},0)`;
|
||||
});
|
||||
|
||||
// blink updated nodes
|
||||
node
|
||||
.filter(function flick(this: any, d) {
|
||||
nodeEnterAndUpdate
|
||||
.filter(function flick(
|
||||
this: SVGGElement & {
|
||||
__oldData__?: HierarchyPointNode<InternalNode>;
|
||||
},
|
||||
d
|
||||
) {
|
||||
// test whether the relevant properties of d match
|
||||
// the equivalent property of the oldData
|
||||
// also test whether the old data exists,
|
||||
// to catch the entering elements!
|
||||
return this.__oldData__ && d.value !== this.__oldData__.value;
|
||||
return (
|
||||
!!this.__oldData__ && d.data.value !== this.__oldData__.data.value
|
||||
);
|
||||
})
|
||||
.select('g')
|
||||
.style('opacity', '0.3')
|
||||
|
|
@ -492,21 +451,19 @@ export default function (
|
|||
|
||||
// transition exiting nodes to the parent's new position
|
||||
const nodeExit = node
|
||||
.exit()
|
||||
.exit<HierarchyPointNode<InternalNode>>()
|
||||
.transition()
|
||||
.duration(transitionDuration)
|
||||
.attr({
|
||||
transform: (d) => {
|
||||
const position = findParentNodePosition(
|
||||
previousNodePositionsById,
|
||||
d.id,
|
||||
(n) => !!nodePositionsById[n.id]
|
||||
);
|
||||
const futurePosition =
|
||||
(position && nodePositionsById[position.id]) ||
|
||||
nodePositionsById.root;
|
||||
return `translate(${futurePosition.y!},${futurePosition.x!})`;
|
||||
},
|
||||
.attr('transform', (d) => {
|
||||
const position = findParentNodePosition(
|
||||
previousNodePositionsById,
|
||||
d.data.id,
|
||||
(n) => !!nodePositionsById[n.id]
|
||||
);
|
||||
const futurePosition =
|
||||
(position && nodePositionsById[position.id]) ||
|
||||
nodePositionsById.root;
|
||||
return `translate(${futurePosition.y},${futurePosition.x})`;
|
||||
})
|
||||
.remove();
|
||||
|
||||
|
|
@ -516,65 +473,66 @@ export default function (
|
|||
|
||||
// update the links
|
||||
const link = vis
|
||||
.selectAll('path.link')
|
||||
.data(links, (d) => (d.target as NodeWithId).id);
|
||||
.selectAll<SVGPathElement, HierarchyPointLink<InternalNode>>(
|
||||
'path.link'
|
||||
)
|
||||
.data(links, (d) => d.target.data.id);
|
||||
|
||||
// enter any new links at the parent's previous position
|
||||
link
|
||||
const linkEnter = link
|
||||
.enter()
|
||||
.insert('path', 'g')
|
||||
.attr({
|
||||
class: 'link',
|
||||
d: (d) => {
|
||||
const position = findParentNodePosition(
|
||||
nodePositionsById,
|
||||
(d.target as NodeWithId).id,
|
||||
(n) => !!previousNodePositionsById[n.id]
|
||||
);
|
||||
const previousPosition =
|
||||
(position && previousNodePositionsById[position.id]) ||
|
||||
previousNodePositionsById.root;
|
||||
return diagonal({
|
||||
source: previousPosition,
|
||||
target: previousPosition,
|
||||
} as d3.svg.diagonal.Link<NodePosition>);
|
||||
},
|
||||
})
|
||||
.style(style.link);
|
||||
.attr('class', 'link')
|
||||
.attr('d', (d) => {
|
||||
const position = findParentNodePosition(
|
||||
nodePositionsById,
|
||||
d.target.data.id,
|
||||
(n) => !!previousNodePositionsById[n.id]
|
||||
);
|
||||
const previousPosition =
|
||||
(position && previousNodePositionsById[position.id]) ||
|
||||
previousNodePositionsById.root;
|
||||
return linkHorizontal({
|
||||
source: previousPosition,
|
||||
target: previousPosition,
|
||||
});
|
||||
});
|
||||
|
||||
for (const [key, value] of Object.entries(linkStyles)) {
|
||||
linkEnter.style(key, value);
|
||||
}
|
||||
|
||||
const linkEnterAndUpdate = linkEnter.merge(link);
|
||||
|
||||
// transition links to their new position
|
||||
link
|
||||
linkEnterAndUpdate
|
||||
.transition()
|
||||
.duration(transitionDuration)
|
||||
.attr({
|
||||
d: diagonal as unknown as Primitive,
|
||||
});
|
||||
.attr('d', linkHorizontal);
|
||||
|
||||
// transition exiting nodes to the parent's new position
|
||||
link
|
||||
.exit()
|
||||
.exit<HierarchyPointLink<InternalNode>>()
|
||||
.transition()
|
||||
.duration(transitionDuration)
|
||||
.attr({
|
||||
d: (d) => {
|
||||
const position = findParentNodePosition(
|
||||
previousNodePositionsById,
|
||||
(d.target as NodeWithId).id,
|
||||
(n) => !!nodePositionsById[n.id]
|
||||
);
|
||||
const futurePosition =
|
||||
(position && nodePositionsById[position.id]) ||
|
||||
nodePositionsById.root;
|
||||
return diagonal({
|
||||
source: futurePosition,
|
||||
target: futurePosition,
|
||||
});
|
||||
},
|
||||
.attr('d', (d) => {
|
||||
const position = findParentNodePosition(
|
||||
previousNodePositionsById,
|
||||
d.target.data.id,
|
||||
(n) => !!nodePositionsById[n.id]
|
||||
);
|
||||
const futurePosition =
|
||||
(position && nodePositionsById[position.id]) ||
|
||||
nodePositionsById.root;
|
||||
return linkHorizontal({
|
||||
source: futurePosition,
|
||||
target: futurePosition,
|
||||
});
|
||||
})
|
||||
.remove();
|
||||
|
||||
// delete the old data once it's no longer needed
|
||||
node.property('__oldData__', null);
|
||||
nodeEnterAndUpdate.property('__oldData__', null);
|
||||
|
||||
// stash the old positions for transition
|
||||
previousNodePositionsById = nodePositionsById;
|
||||
|
|
@ -582,4 +540,4 @@ export default function (
|
|||
};
|
||||
}
|
||||
|
||||
export { Primitive };
|
||||
export type { Node };
|
||||
|
|
|
|||
|
|
@ -1,38 +1,38 @@
|
|||
import { is, join, pipe, replace } from 'ramda';
|
||||
import sortAndSerialize from './sortAndSerialize';
|
||||
import { NodeWithId } from './tree';
|
||||
import type { InternalNode } from './tree';
|
||||
|
||||
export function collapseChildren(node: NodeWithId) {
|
||||
export function collapseChildren(node: InternalNode) {
|
||||
if (node.children) {
|
||||
node._children = node.children;
|
||||
node._children.forEach(collapseChildren);
|
||||
node.children = null;
|
||||
node.children = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
export function expandChildren(node: NodeWithId) {
|
||||
export function expandChildren(node: InternalNode) {
|
||||
if (node._children) {
|
||||
node.children = node._children;
|
||||
node.children.forEach(expandChildren);
|
||||
node._children = null;
|
||||
node._children = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
export function toggleChildren(node: NodeWithId) {
|
||||
export function toggleChildren(node: InternalNode) {
|
||||
if (node.children) {
|
||||
node._children = node.children;
|
||||
node.children = null;
|
||||
node.children = undefined;
|
||||
} else if (node._children) {
|
||||
node.children = node._children;
|
||||
node._children = null;
|
||||
node._children = undefined;
|
||||
}
|
||||
return node;
|
||||
}
|
||||
|
||||
export function visit(
|
||||
parent: NodeWithId,
|
||||
visitFn: (parent: NodeWithId) => void,
|
||||
childrenFn: (parent: NodeWithId) => NodeWithId[] | null | undefined
|
||||
parent: InternalNode,
|
||||
visitFn: (parent: InternalNode) => void,
|
||||
childrenFn: (parent: InternalNode) => InternalNode[] | null | undefined
|
||||
) {
|
||||
if (!parent) {
|
||||
return;
|
||||
|
|
@ -50,10 +50,10 @@ export function visit(
|
|||
}
|
||||
}
|
||||
|
||||
export function getNodeGroupByDepthCount(rootNode: NodeWithId) {
|
||||
export function getNodeGroupByDepthCount(rootNode: InternalNode) {
|
||||
const nodeGroupByDepthCount = [1];
|
||||
|
||||
const traverseFrom = function traverseFrom(node: NodeWithId, depth = 0) {
|
||||
const traverseFrom = function traverseFrom(node: InternalNode, depth = 0) {
|
||||
if (!node.children || node.children.length === 0) {
|
||||
return 0;
|
||||
}
|
||||
|
|
@ -73,11 +73,7 @@ export function getNodeGroupByDepthCount(rootNode: NodeWithId) {
|
|||
return nodeGroupByDepthCount;
|
||||
}
|
||||
|
||||
export function getTooltipString(
|
||||
node: unknown,
|
||||
i: number | undefined,
|
||||
{ indentationSize = 4 }
|
||||
) {
|
||||
export function getTooltipString(node: InternalNode, { indentationSize = 4 }) {
|
||||
if (!is(Object, node)) return '';
|
||||
|
||||
const spacer = join(' ');
|
||||
|
|
@ -89,7 +85,6 @@ export function getTooltipString(
|
|||
|
||||
if (typeof node.value !== 'undefined') return json2html(node.value);
|
||||
if (typeof node.object !== 'undefined') return json2html(node.object);
|
||||
if (children && children.length)
|
||||
return `childrenCount: ${(children as unknown[]).length}`;
|
||||
if (children && children.length) return `childrenCount: ${children.length}`;
|
||||
return 'empty';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
export { tree } from './charts';
|
||||
export type { InputOptions, NodeWithId, Primitive } from './charts';
|
||||
export type { HierarchyPointNode, Node, Options, StyleValue } from './charts';
|
||||
|
|
|
|||
|
|
@ -10,45 +10,45 @@ It was created by [@romseguy](https://github.com/romseguy) and merged from [`rom
|
|||
## Quick usage
|
||||
|
||||
```javascript
|
||||
import d3 from 'd3';
|
||||
import * as d3 from 'd3';
|
||||
import { tooltip } from 'd3tooltip';
|
||||
|
||||
const DOMNode = document.getElementById('chart');
|
||||
const root = d3.select(DOMNode);
|
||||
const vis = root.append('svg');
|
||||
|
||||
let options = {
|
||||
offset: {left: 30, top: 10}
|
||||
const options = {
|
||||
offset: { left: 30, top: 10 },
|
||||
styles: { 'min-width': '50px', 'border-radius': '5px' },
|
||||
};
|
||||
|
||||
vis.selectAll('circle').data(someData).enter()
|
||||
vis
|
||||
.selectAll('circle')
|
||||
.data(someData)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('r', 10)
|
||||
.call(
|
||||
d3tooltip(d3, 'tooltipClassName', options)
|
||||
.text((d, i) => toStringOrHtml(d))
|
||||
.attr({ 'class': 'anotherClassName' })
|
||||
.style({ 'min-width': '50px', 'border-radius: 5px' })
|
||||
d3tooltip('tooltipClassName', {
|
||||
...options,
|
||||
text: (d) => toStringOrHtml(d),
|
||||
})
|
||||
)
|
||||
.on({
|
||||
mouseover(d, i) {
|
||||
d3.select(this).style({
|
||||
fill: 'skyblue'
|
||||
});
|
||||
},
|
||||
mouseout(d, i) {
|
||||
d3.select(this).style({
|
||||
fill: 'black'
|
||||
});
|
||||
}
|
||||
.on('mouseover', function () {
|
||||
d3.select(this).style('fill', 'skyblue');
|
||||
})
|
||||
.on('mouseout', function () {
|
||||
d3.select(this).style('fill', 'black');
|
||||
});
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
| Option | Type | Default | Description |
|
||||
| -------- | ----------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `root` | DOM.Element | `body` | The tooltip will be added as a child of that element. You can also use a D3 [selection](https://github.com/mbostock/d3/wiki/Selections#d3_select) |
|
||||
| `left` | Number | `undefined` | Sets the tooltip `x` absolute position instead of the mouse `x` position, relative to the `root` element |
|
||||
| `top` | Number | `undefined` | Sets the tooltip `y` absolute position instead of the mouse `y` position, relative to the `root` element |
|
||||
| `offset` | Object | `{left: 0, top: 0}` | Sets the distance, starting from the cursor position, until the tooltip is rendered. **Warning**: only applicable if you don't provide a `left` or `top` option |
|
||||
| Option | Type | Default | Description |
|
||||
| -------- | ------------------ | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `root` | DOM.Element | `body` | The tooltip will be added as a child of that element. You can also use a D3 [selection](https://github.com/mbostock/d3/wiki/Selections#d3_select). |
|
||||
| `left` | Number | `undefined` | Sets the tooltip `x` absolute position instead of the mouse `x` position, relative to the `root` element. |
|
||||
| `top` | Number | `undefined` | Sets the tooltip `y` absolute position instead of the mouse `y` position, relative to the `root` element. |
|
||||
| `offset` | Object | `{left: 0, top: 0}` | Sets the distance, starting from the cursor position, until the tooltip is rendered. **Warning**: only applicable if you don't provide a `left` or `top` option. |
|
||||
| `styles` | Object | `{}` | Sets the styles of the tooltip element. |
|
||||
| `text` | String or Function | `''` | Sets the text of the tooltip. Can be a constant `string` or a function that takes the datum and returns a `string`. |
|
||||
|
|
|
|||
|
|
@ -19,18 +19,16 @@
|
|||
"main": "lib/cjs/index.js",
|
||||
"module": "lib/esm/index.js",
|
||||
"types": "lib/types/index.d.ts",
|
||||
"unpkg": "lib/umd/d3tooltip.umd.js",
|
||||
"sideEffects": false,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/reduxjs/redux-devtools.git"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:umd",
|
||||
"build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types",
|
||||
"build:cjs": "babel src --extensions \".ts\" --out-dir lib/cjs",
|
||||
"build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts\" --out-dir lib/esm",
|
||||
"build:types": "tsc --emitDeclarationOnly",
|
||||
"build:umd": "rollup -c",
|
||||
"clean": "rimraf lib",
|
||||
"lint": "eslint . --ext .ts",
|
||||
"type-check": "tsc --noEmit",
|
||||
|
|
@ -38,36 +36,25 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"ramda": "^0.28.0"
|
||||
"@babel/runtime": "^7.20.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@rollup/plugin-babel": "^6.0.3",
|
||||
"@rollup/plugin-commonjs": "^23.0.2",
|
||||
"@rollup/plugin-node-resolve": "^15.0.1",
|
||||
"@rollup/plugin-terser": "^0.1.0",
|
||||
"@types/d3": "^3.5.47",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/ramda": "^0.28.20",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"d3": "^3.5.17",
|
||||
"eslint": "^8.28.0",
|
||||
"@types/d3": "^7.4.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"d3": "^7.8.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"rollup": "^3.5.0",
|
||||
"rollup-plugin-typescript2": "^0.34.1",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/d3": "^3.5.47",
|
||||
"d3": "^3.5.17"
|
||||
"@types/d3": "^7.4.0",
|
||||
"d3": "^7.8.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +0,0 @@
|
|||
import typescript from 'rollup-plugin-typescript2';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import babel from '@rollup/plugin-babel';
|
||||
import terser from '@rollup/plugin-terser';
|
||||
|
||||
const config = [
|
||||
{
|
||||
input: 'src/index.ts',
|
||||
output: {
|
||||
name: 'd3tooltip',
|
||||
file: 'lib/umd/d3tooltip.js',
|
||||
format: 'umd',
|
||||
},
|
||||
plugins: [
|
||||
typescript({
|
||||
tsconfigOverride: { compilerOptions: { declaration: false } },
|
||||
}),
|
||||
resolve(),
|
||||
commonjs(),
|
||||
babel({
|
||||
babelHelpers: 'runtime',
|
||||
extensions: ['.ts'],
|
||||
plugins: ['@babel/plugin-transform-runtime'],
|
||||
}),
|
||||
],
|
||||
},
|
||||
{
|
||||
input: 'src/index.ts',
|
||||
output: {
|
||||
name: 'd3tooltip',
|
||||
file: 'lib/umd/d3tooltip.min.js',
|
||||
format: 'umd',
|
||||
},
|
||||
plugins: [
|
||||
typescript({
|
||||
tsconfigOverride: { compilerOptions: { declaration: false } },
|
||||
}),
|
||||
resolve(),
|
||||
commonjs(),
|
||||
babel({
|
||||
babelHelpers: 'runtime',
|
||||
extensions: ['.ts'],
|
||||
plugins: ['@babel/plugin-transform-runtime'],
|
||||
}),
|
||||
terser(),
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default config;
|
||||
|
|
@ -1,161 +1,102 @@
|
|||
import d3Package, { Primitive, Selection } from 'd3';
|
||||
import { is } from 'ramda';
|
||||
import utils from './utils';
|
||||
const { prependClass, functor } = utils;
|
||||
import * as d3 from 'd3';
|
||||
import type { BaseType, Selection } from 'd3';
|
||||
|
||||
interface Options<Datum> {
|
||||
export type StyleValue = string | number | boolean;
|
||||
|
||||
interface Options<
|
||||
Datum,
|
||||
RootGElement extends BaseType,
|
||||
RootDatum,
|
||||
RootPElement extends BaseType,
|
||||
RootPDatum
|
||||
> {
|
||||
left: number | undefined;
|
||||
top: number | undefined;
|
||||
offset: {
|
||||
left: number;
|
||||
top: number;
|
||||
};
|
||||
root: Selection<Datum> | undefined;
|
||||
root:
|
||||
| Selection<RootGElement, RootDatum, RootPElement, RootPDatum>
|
||||
| undefined;
|
||||
styles: { [key: string]: StyleValue };
|
||||
text: string | ((datum: Datum) => string);
|
||||
}
|
||||
|
||||
const defaultOptions: Options<unknown> = {
|
||||
const defaultOptions: Options<unknown, BaseType, unknown, BaseType, unknown> = {
|
||||
left: undefined, // mouseX
|
||||
top: undefined, // mouseY
|
||||
offset: { left: 0, top: 0 },
|
||||
root: undefined,
|
||||
styles: {},
|
||||
text: '',
|
||||
};
|
||||
|
||||
interface Tip<Datum> {
|
||||
(selection: Selection<Datum>): void;
|
||||
attr: (
|
||||
this: this,
|
||||
d:
|
||||
| string
|
||||
| {
|
||||
[key: string]:
|
||||
| Primitive
|
||||
| ((datum: Datum, index: number, outerIndex: number) => Primitive);
|
||||
}
|
||||
) => this;
|
||||
style: (
|
||||
this: this,
|
||||
d:
|
||||
| string
|
||||
| {
|
||||
[key: string]:
|
||||
| Primitive
|
||||
| ((datum: Datum, index: number, outerIndex: number) => Primitive);
|
||||
}
|
||||
| undefined
|
||||
) => this;
|
||||
text: (
|
||||
this: this,
|
||||
d: string | ((datum: Datum, index?: number, outerIndex?: number) => string)
|
||||
) => this;
|
||||
}
|
||||
|
||||
export function tooltip<Datum>(
|
||||
d3: typeof d3Package,
|
||||
export function tooltip<
|
||||
GElement extends BaseType,
|
||||
Datum,
|
||||
PElement extends BaseType,
|
||||
PDatum,
|
||||
RootGElement extends BaseType,
|
||||
RootDatum,
|
||||
RootPElement extends BaseType,
|
||||
RootPDatum
|
||||
>(
|
||||
className = 'tooltip',
|
||||
options: Partial<Options<Datum>> = {}
|
||||
): Tip<Datum> {
|
||||
const { left, top, offset, root } = {
|
||||
options: Partial<
|
||||
Options<Datum, RootGElement, RootDatum, RootPElement, RootPDatum>
|
||||
> = {}
|
||||
) {
|
||||
const { left, top, offset, root, styles, text } = {
|
||||
...defaultOptions,
|
||||
...options,
|
||||
} as Options<Datum>;
|
||||
} as Options<Datum, RootGElement, RootDatum, RootPElement, RootPDatum>;
|
||||
|
||||
let attrs = { class: className };
|
||||
let text: (datum: Datum, index?: number, outerIndex?: number) => string = (
|
||||
node: Datum
|
||||
) => '';
|
||||
let styles = {};
|
||||
let el: Selection<HTMLDivElement, RootDatum, BaseType, unknown>;
|
||||
const anchor: Selection<
|
||||
RootGElement,
|
||||
RootDatum,
|
||||
RootPElement | HTMLElement,
|
||||
RootPDatum
|
||||
> = root || d3.select<RootGElement, RootDatum>('body');
|
||||
const rootNode = anchor.node()!;
|
||||
|
||||
let el: Selection<Datum>;
|
||||
const anchor = root || d3.select('body');
|
||||
const rootNode = anchor.node();
|
||||
|
||||
function tip(selection: Selection<Datum>) {
|
||||
selection.on('mouseover.tip', (node) => {
|
||||
const [mouseX, mouseY] = d3.mouse(rootNode);
|
||||
const [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top];
|
||||
return function tip(selection: Selection<GElement, Datum, PElement, PDatum>) {
|
||||
selection.on('mouseover.tip', (event, datum) => {
|
||||
const [pointerX, pointerY] = d3.pointer(event, rootNode);
|
||||
const [x, y] = [
|
||||
left || pointerX + offset.left,
|
||||
top || pointerY - offset.top,
|
||||
];
|
||||
|
||||
anchor.selectAll(`div.${className}`).remove();
|
||||
|
||||
el = anchor
|
||||
.append('div')
|
||||
.attr(prependClass(className)(attrs))
|
||||
.style({
|
||||
position: 'absolute',
|
||||
'z-index': 1001,
|
||||
left: `${x}px`,
|
||||
top: `${y}px`,
|
||||
...styles,
|
||||
})
|
||||
.html(() => text(node)) as Selection<Datum>;
|
||||
.attr('class', className)
|
||||
.style('position', 'absolute')
|
||||
.style('z-index', 1001)
|
||||
.style('left', `${x}px`)
|
||||
.style('top', `${y}px`)
|
||||
.html(typeof text === 'function' ? () => text(datum) : () => text);
|
||||
|
||||
for (const [key, value] of Object.entries(styles)) {
|
||||
el.style(key, value);
|
||||
}
|
||||
});
|
||||
|
||||
selection.on('mousemove.tip', (node) => {
|
||||
const [mouseX, mouseY] = d3.mouse(rootNode);
|
||||
const [x, y] = [left || mouseX + offset.left, top || mouseY - offset.top];
|
||||
selection.on('mousemove.tip', (event, datum) => {
|
||||
const [pointerX, pointerY] = d3.pointer(event, rootNode);
|
||||
const [x, y] = [
|
||||
left || pointerX + offset.left,
|
||||
top || pointerY - offset.top,
|
||||
];
|
||||
|
||||
el.style({
|
||||
left: `${x}px`,
|
||||
top: `${y}px`,
|
||||
}).html(() => text(node));
|
||||
el.style('left', `${x}px`)
|
||||
.style('top', `${y}px`)
|
||||
.html(typeof text === 'function' ? () => text(datum) : () => text);
|
||||
});
|
||||
|
||||
selection.on('mouseout.tip', () => el.remove());
|
||||
}
|
||||
|
||||
tip.attr = function setAttr(
|
||||
this: typeof tip,
|
||||
d:
|
||||
| string
|
||||
| {
|
||||
[key: string]:
|
||||
| Primitive
|
||||
| ((datum: Datum, index: number, outerIndex: number) => Primitive);
|
||||
}
|
||||
) {
|
||||
if (is(Object, d)) {
|
||||
attrs = {
|
||||
...attrs,
|
||||
...(d as {
|
||||
[key: string]:
|
||||
| Primitive
|
||||
| ((datum: Datum, index: number, outerIndex: number) => Primitive);
|
||||
}),
|
||||
};
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
tip.style = function setStyle(
|
||||
this: typeof tip,
|
||||
d:
|
||||
| string
|
||||
| {
|
||||
[key: string]:
|
||||
| Primitive
|
||||
| ((datum: Datum, index: number, outerIndex: number) => Primitive);
|
||||
}
|
||||
| undefined
|
||||
) {
|
||||
if (is(Object, d)) {
|
||||
styles = {
|
||||
...styles,
|
||||
...(d as {
|
||||
[key: string]:
|
||||
| Primitive
|
||||
| ((datum: Datum, index: number, outerIndex: number) => Primitive);
|
||||
}),
|
||||
};
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
tip.text = function setText(
|
||||
this: typeof tip,
|
||||
d: string | ((datum: Datum, index?: number, outerIndex?: number) => string)
|
||||
) {
|
||||
text = functor(d);
|
||||
return this;
|
||||
};
|
||||
|
||||
return tip;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
import { is } from 'ramda';
|
||||
import { Primitive } from 'd3';
|
||||
|
||||
export default function functor<Datum>(
|
||||
v: string | ((datum: Datum, index?: number, outerIndex?: number) => string)
|
||||
): (datum: Datum, index?: number, outerIndex?: number) => string;
|
||||
export default function functor<Datum>(
|
||||
v:
|
||||
| Primitive
|
||||
| ((datum: Datum, index: number, outerIndex?: number) => Primitive)
|
||||
): (datum: Datum, index?: number, outerIndex?: number) => Primitive;
|
||||
export default function functor<Datum>(
|
||||
v:
|
||||
| Primitive
|
||||
| ((datum: Datum, index: number, outerIndex?: number) => Primitive)
|
||||
): (datum: Datum, index: number, outerIndex?: number) => Primitive {
|
||||
return is(Function, v)
|
||||
? (v as (datum: Datum, index: number, outerIndex?: number) => Primitive)
|
||||
: () => v;
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import prependClass from './prependClass';
|
||||
import functor from './functor';
|
||||
|
||||
export default {
|
||||
prependClass,
|
||||
functor,
|
||||
};
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import { mapObjIndexed, join } from 'ramda';
|
||||
import functor from './functor';
|
||||
import { Primitive } from 'd3';
|
||||
|
||||
export default function prependClass<Datum>(className: string) {
|
||||
return mapObjIndexed(
|
||||
(
|
||||
value:
|
||||
| Primitive
|
||||
| ((datum: Datum, index: number, outerIndex?: number) => Primitive),
|
||||
key
|
||||
) => {
|
||||
if (key === 'class') {
|
||||
const fn = functor(value);
|
||||
|
||||
return (d: Datum, i: number) => {
|
||||
const classNames = fn(d, i);
|
||||
if (classNames !== className) {
|
||||
return join(' ', [className, classNames]);
|
||||
}
|
||||
return classNames;
|
||||
};
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
@ -22,18 +22,16 @@
|
|||
"main": "lib/cjs/index.js",
|
||||
"module": "lib/esm/index.js",
|
||||
"types": "lib/types/index.d.ts",
|
||||
"unpkg": "lib/umd/map2tree.umd.js",
|
||||
"sideEffects": false,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/reduxjs/redux-devtools.git"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:umd",
|
||||
"build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types",
|
||||
"build:cjs": "babel src --extensions \".ts\" --out-dir lib/cjs",
|
||||
"build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts\" --out-dir lib/esm",
|
||||
"build:types": "tsc --emitDeclarationOnly",
|
||||
"build:umd": "rollup -c",
|
||||
"clean": "rimraf lib",
|
||||
"test": "jest",
|
||||
"lint": "eslint . --ext .ts",
|
||||
|
|
@ -42,35 +40,26 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"lodash": "^4.17.21"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@rollup/plugin-babel": "^6.0.3",
|
||||
"@rollup/plugin-commonjs": "^23.0.2",
|
||||
"@rollup/plugin-node-resolve": "^15.0.1",
|
||||
"@rollup/plugin-terser": "^0.1.0",
|
||||
"@types/jest": "^29.2.3",
|
||||
"@types/lodash": "^4.14.190",
|
||||
"@types/node": "^18.11.9",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@types/jest": "^29.2.4",
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-jest": "^27.1.6",
|
||||
"eslint-plugin-jest": "^27.1.7",
|
||||
"immutable": "^4.1.0",
|
||||
"jest": "^29.3.1",
|
||||
"rimraf": "^3.0.2",
|
||||
"rollup": "^3.5.0",
|
||||
"rollup-plugin-typescript2": "^0.34.1",
|
||||
"ts-jest": "^29.0.3",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +0,0 @@
|
|||
import typescript from 'rollup-plugin-typescript2';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import babel from '@rollup/plugin-babel';
|
||||
import terser from '@rollup/plugin-terser';
|
||||
|
||||
const config = [
|
||||
{
|
||||
input: 'src/index.ts',
|
||||
output: {
|
||||
name: 'map2tree',
|
||||
file: 'lib/umd/map2tree.js',
|
||||
format: 'umd',
|
||||
},
|
||||
plugins: [
|
||||
typescript({
|
||||
tsconfigOverride: { compilerOptions: { declaration: false } },
|
||||
}),
|
||||
resolve(),
|
||||
commonjs(),
|
||||
babel({
|
||||
babelHelpers: 'runtime',
|
||||
extensions: ['.ts'],
|
||||
plugins: ['@babel/plugin-transform-runtime'],
|
||||
}),
|
||||
],
|
||||
},
|
||||
{
|
||||
input: 'src/index.ts',
|
||||
output: {
|
||||
name: 'map2tree',
|
||||
file: 'lib/umd/map2tree.min.js',
|
||||
format: 'umd',
|
||||
},
|
||||
plugins: [
|
||||
typescript({
|
||||
tsconfigOverride: { compilerOptions: { declaration: false } },
|
||||
}),
|
||||
resolve(),
|
||||
commonjs(),
|
||||
babel({
|
||||
babelHelpers: 'runtime',
|
||||
extensions: ['.ts'],
|
||||
plugins: ['@babel/plugin-transform-runtime'],
|
||||
}),
|
||||
terser(),
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default config;
|
||||
|
|
@ -4,7 +4,8 @@ import mapValues from 'lodash/mapValues';
|
|||
|
||||
export interface Node {
|
||||
name: string;
|
||||
children?: Node[] | null;
|
||||
children?: this[];
|
||||
object?: unknown;
|
||||
value?: unknown;
|
||||
}
|
||||
|
||||
|
|
@ -43,7 +44,6 @@ function getNode(tree: Node, key: string): Node | null {
|
|||
}
|
||||
|
||||
export function map2tree(
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
root: unknown,
|
||||
options: { key?: string; pushMethod?: 'push' | 'unshift' } = {},
|
||||
tree: Node = { name: options.key || 'state', children: [] }
|
||||
|
|
|
|||
|
|
@ -39,9 +39,9 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@types/base16": "^1.0.2",
|
||||
"@types/lodash": "^4.14.190",
|
||||
"@types/lodash": "^4.14.191",
|
||||
"base16": "^1.0.0",
|
||||
"color": "^4.2.3",
|
||||
"csstype": "^3.1.1",
|
||||
|
|
@ -49,23 +49,23 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@types/color": "^3.0.3",
|
||||
"@types/jest": "^29.2.3",
|
||||
"@types/jest": "^29.2.4",
|
||||
"@types/lodash.curry": "^4.1.7",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-jest": "^27.1.6",
|
||||
"eslint-plugin-jest": "^27.1.7",
|
||||
"jest": "^29.3.1",
|
||||
"jest-environment-jsdom": "^29.3.1",
|
||||
"rimraf": "^3.0.2",
|
||||
"ts-jest": "^29.0.3",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,36 +11,36 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-bootstrap": "^2.6.0",
|
||||
"react-bootstrap": "^2.7.0",
|
||||
"react-dock": "^0.6.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^4.6.0",
|
||||
"react-icons": "^4.7.1",
|
||||
"react-is": "^18.2.0",
|
||||
"styled-components": "^5.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/node": "^18.11.17",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@types/styled-components": "^5.1.26",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"babel-loader": "^9.1.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.13",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.14",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "~4.9.3",
|
||||
"typescript": "~4.9.4",
|
||||
"webpack": "^5.75.0",
|
||||
"webpack-cli": "^5.0.0",
|
||||
"webpack-cli": "^5.0.1",
|
||||
"webpack-dev-server": "^4.11.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,29 +39,29 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@types/lodash": "^4.14.190",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@types/jest": "^29.2.3",
|
||||
"@types/jest": "^29.2.4",
|
||||
"@types/lodash.debounce": "^4.0.7",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-test-renderer": "^18.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-jest": "^27.1.6",
|
||||
"eslint-plugin-jest": "^27.1.7",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"jest": "^29.3.1",
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
"react-test-renderer": "^18.2.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"ts-jest": "^29.0.3",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0",
|
||||
|
|
|
|||
|
|
@ -26,27 +26,27 @@
|
|||
"react-json-tree": "^0.17.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/node": "^18.11.17",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"babel-loader": "^9.1.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.13",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.14",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "~4.9.3",
|
||||
"typescript": "~4.9.4",
|
||||
"webpack": "^5.75.0",
|
||||
"webpack-cli": "^5.0.0",
|
||||
"webpack-cli": "^5.0.1",
|
||||
"webpack-dev-server": "^4.11.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,44 +45,44 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@types/lodash": "^4.14.190",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-base16-styling": "^0.9.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@rollup/plugin-babel": "^6.0.3",
|
||||
"@rollup/plugin-commonjs": "^23.0.2",
|
||||
"@rollup/plugin-commonjs": "^24.0.0",
|
||||
"@rollup/plugin-node-resolve": "^15.0.1",
|
||||
"@rollup/plugin-terser": "^0.1.0",
|
||||
"@types/jest": "^29.2.3",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/react": "^18.0.25",
|
||||
"@rollup/plugin-terser": "^0.2.1",
|
||||
"@types/jest": "^29.2.4",
|
||||
"@types/node": "^18.11.17",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-test-renderer": "^18.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-jest": "^27.1.6",
|
||||
"eslint-plugin-jest": "^27.1.7",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"jest": "^29.3.1",
|
||||
"react": "^18.2.0",
|
||||
"react-test-renderer": "^18.2.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"rollup": "^3.5.0",
|
||||
"rollup": "^3.7.5",
|
||||
"rollup-plugin-typescript2": "^0.34.1",
|
||||
"ts-jest": "^29.0.3",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
|
|
|
|||
|
|
@ -6,7 +6,10 @@ module.exports = {
|
|||
'\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
|
||||
},
|
||||
transform: {
|
||||
'^.+\\.jsx?$': 'babel-jest',
|
||||
'^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }],
|
||||
},
|
||||
resolver: '<rootDir>/jestResolver.js',
|
||||
transformIgnorePatterns: [
|
||||
'node_modules/(?!.pnpm|d3|dateformat|delaunator|nanoid|robust-predicates|uuid)',
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
module.exports = (path, options) => {
|
||||
return options.defaultResolver(path, {
|
||||
...options,
|
||||
packageFilter: (pkg) => {
|
||||
if (pkg.name === 'nanoid') {
|
||||
pkg.exports['.'].browser = pkg.exports['.'].require;
|
||||
}
|
||||
if (pkg.name === 'uuid' && pkg.version.startsWith('8.')) {
|
||||
delete pkg.exports;
|
||||
delete pkg.module;
|
||||
}
|
||||
return pkg;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@redux-devtools/chart-monitor": "^3.0.0",
|
||||
"@redux-devtools/core": "^3.13.0",
|
||||
"@redux-devtools/inspector-monitor": "^3.0.0",
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
"@redux-devtools/rtk-query-monitor": "^3.0.0",
|
||||
"@redux-devtools/slider-monitor": "^4.0.0",
|
||||
"@redux-devtools/ui": "^1.3.0",
|
||||
"@reduxjs/toolkit": "^1.9.0",
|
||||
"@reduxjs/toolkit": "^1.9.1",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"d3-state-visualizer": "^1.6.0",
|
||||
"javascript-stringify": "^2.1.0",
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
"localforage": "^1.10.0",
|
||||
"lodash": "^4.17.21",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-icons": "^4.6.0",
|
||||
"react-icons": "^4.7.1",
|
||||
"react-is": "^18.2.0",
|
||||
"react-redux": "^8.0.5",
|
||||
"redux": "^4.2.0",
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
|
|
@ -77,28 +77,28 @@
|
|||
"@rjsf/core": "^4.2.3",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@types/jest": "^29.2.3",
|
||||
"@types/jest": "^29.2.4",
|
||||
"@types/jsan": "^3.1.2",
|
||||
"@types/json-schema": "^7.0.11",
|
||||
"@types/lodash": "^4.14.190",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/node": "^18.11.17",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@types/socketcluster-client": "^16.0.0",
|
||||
"@types/styled-components": "^5.1.26",
|
||||
"@types/testing-library__jest-dom": "^5.14.5",
|
||||
"@types/webpack-env": "^1.18.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"babel-loader": "^9.1.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^6.7.2",
|
||||
"eslint": "^8.28.0",
|
||||
"css-loader": "^6.7.3",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-jest": "^27.1.6",
|
||||
"eslint-plugin-jest": "^27.1.7",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.13",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.14",
|
||||
"html-loader": "^4.2.0",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"jest": "^29.3.1",
|
||||
|
|
@ -110,9 +110,9 @@
|
|||
"styled-components": "^5.3.6",
|
||||
"ts-jest": "^29.0.3",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "~4.9.3",
|
||||
"typescript": "~4.9.4",
|
||||
"webpack": "^5.75.0",
|
||||
"webpack-cli": "^5.0.0",
|
||||
"webpack-cli": "^5.0.1",
|
||||
"webpack-dev-server": "^4.11.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,17 @@
|
|||
import React, { Component } from 'react';
|
||||
import { connect, ResolveThunks } from 'react-redux';
|
||||
import { ChartMonitor } from '@redux-devtools/chart-monitor';
|
||||
import { NodeWithId } from 'd3-state-visualizer';
|
||||
import type { HierarchyPointNode, Node } from 'd3-state-visualizer';
|
||||
import { selectMonitorWithState } from '../../actions';
|
||||
|
||||
export function getPath(obj: NodeWithId, inspectedStatePath: string[]) {
|
||||
export function getPath(
|
||||
obj: HierarchyPointNode<Node>,
|
||||
inspectedStatePath: string[]
|
||||
) {
|
||||
const parent = obj.parent;
|
||||
if (!parent) return;
|
||||
getPath(parent, inspectedStatePath);
|
||||
let name = obj.name;
|
||||
let name = obj.data.name;
|
||||
const item = /.+\[(\d+)]/.exec(name);
|
||||
if (item) name = item[1];
|
||||
inspectedStatePath.push(name);
|
||||
|
|
@ -20,7 +23,7 @@ type Props = DispatchProps;
|
|||
class ChartMonitorWrapper extends Component<Props> {
|
||||
static update = ChartMonitor.update;
|
||||
|
||||
onClickText = (data: NodeWithId) => {
|
||||
onClickText = (data: HierarchyPointNode<Node>) => {
|
||||
const inspectedStatePath: string[] = [];
|
||||
getPath(data, inspectedStatePath);
|
||||
this.props.selectMonitorWithState('InspectorMonitor', {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import React, { Component, RefCallback } from 'react';
|
||||
import { connect, ResolveThunks } from 'react-redux';
|
||||
import { withTheme } from 'styled-components';
|
||||
import { InputOptions, NodeWithId, tree } from 'd3-state-visualizer';
|
||||
import { tree } from 'd3-state-visualizer';
|
||||
import type { HierarchyPointNode, Node, Options } from 'd3-state-visualizer';
|
||||
import { getPath } from '../ChartMonitorWrapper';
|
||||
import { updateMonitorState } from '../../../actions';
|
||||
import { ThemeFromProvider } from '@redux-devtools/ui';
|
||||
|
|
@ -54,12 +55,12 @@ class ChartTab extends Component<Props> {
|
|||
this.renderChart(props.data as {} | null | undefined);
|
||||
}
|
||||
|
||||
getChartTheme(theme: ThemeFromProvider): Partial<InputOptions> {
|
||||
getChartTheme(theme: ThemeFromProvider): Partial<Options> {
|
||||
return {
|
||||
heightBetweenNodesCoeff: 1,
|
||||
widthBetweenNodesCoeff: 1.3,
|
||||
tooltipOptions: {
|
||||
style: {
|
||||
styles: {
|
||||
color: theme.base06,
|
||||
'background-color': theme.base01,
|
||||
opacity: '0.9',
|
||||
|
|
@ -69,29 +70,29 @@ class ChartTab extends Component<Props> {
|
|||
offset: { left: 30, top: 10 },
|
||||
indentationSize: 2,
|
||||
},
|
||||
style: {
|
||||
chartStyles: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
node: {
|
||||
colors: {
|
||||
default: theme.base0B,
|
||||
collapsed: theme.base0B,
|
||||
parent: theme.base0E,
|
||||
},
|
||||
radius: 7,
|
||||
} as unknown as string,
|
||||
text: {
|
||||
colors: {
|
||||
default: theme.base0D,
|
||||
hover: theme.base06,
|
||||
},
|
||||
} as unknown as string,
|
||||
},
|
||||
nodeStyleOptions: {
|
||||
colors: {
|
||||
default: theme.base0B,
|
||||
collapsed: theme.base0B,
|
||||
parent: theme.base0E,
|
||||
},
|
||||
radius: 7,
|
||||
},
|
||||
textStyleOptions: {
|
||||
colors: {
|
||||
default: theme.base0D,
|
||||
hover: theme.base06,
|
||||
},
|
||||
},
|
||||
onClickText: this.onClickText,
|
||||
};
|
||||
}
|
||||
|
||||
onClickText = (data: NodeWithId) => {
|
||||
onClickText = (data: HierarchyPointNode<Node>) => {
|
||||
const inspectedStatePath: string[] = [];
|
||||
getPath(data, inspectedStatePath);
|
||||
this.props.updateMonitorState({
|
||||
|
|
|
|||
|
|
@ -47,16 +47,18 @@ Consult the [`DockMonitor` README](https://github.com/reduxjs/redux-devtools/tre
|
|||
|
||||
You can read the React component [propTypes](https://github.com/reduxjs/redux-devtools/blob/master/packages/redux-devtools-chart-monitor/src/Chart.js#L11) in addition to the details below:
|
||||
|
||||
| Name | Description |
|
||||
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `defaultIsVisible` | By default, set to `true`. |
|
||||
| `transitionDuration` | By default, set to `750`, in milliseconds. |
|
||||
| `heightBetweenNodesCoeff` | By default, set to `1`. |
|
||||
| `widthBetweenNodesCoeff` | By default, set to `1.3`. |
|
||||
| `isSorted` | By default, set to `false`. |
|
||||
| `style` | {<br> width: '100%', height: '100%', // i.e fullscreen for [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor)<br> text: {<br> colors: {<br> 'default': `theme.base0D`,<br> hover: `theme.base06`<br> }<br> },<br> node: {<br> colors: {<br> 'default': `theme.base0B`,<br> collapsed: `theme.base0B`,<br> parent: `theme.base0E`<br> },<br> radius: 7<br> }<br>} |
|
||||
| `onClickText` | Function called with a reference to the clicked node as first argument when clicking on the text next to a node. |
|
||||
| `tooltipOptions` | {<br> disabled: false,<br> indentationSize: 2,<br> style: {<br> 'background-color': `theme.base06`,<br> 'opacity': '0.7',<br> 'border-radius': '5px',<br> 'padding': '5px'<br> }<br>}<br>[More info](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip#api). |
|
||||
| Name | Description |
|
||||
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| `defaultIsVisible` | By default, set to `true`. |
|
||||
| `transitionDuration` | By default, set to `750`, in milliseconds. |
|
||||
| `heightBetweenNodesCoeff` | By default, set to `1`. |
|
||||
| `widthBetweenNodesCoeff` | By default, set to `1.3`. |
|
||||
| `isSorted` | By default, set to `false`. |
|
||||
| `chartStyles` | {<br> width: '100%', height: '100%', // i.e fullscreen for [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor)<br>} |
|
||||
| `textStyleOptions` | {<br> colors: {<br> default: `theme.base0D`,<br> hover: `theme.base06`,<br> },<br>} |
|
||||
| `nodeStyleOptions` | {<br> colors: {<br> default: `theme.base0B`,<br> collapsed: `theme.base0B`,<br> parent: `theme.base0E`,<br> },<br> radius: 7,<br>} |
|
||||
| `onClickText` | Function called with a reference to the clicked node as first argument when clicking on the text next to a node. |
|
||||
| `tooltipOptions` | {<br> disabled: false,<br> indentationSize: 2,<br> styles: {<br> 'background-color': `theme.base06`,<br> 'opacity': '0.7',<br> 'border-radius': '5px',<br> 'padding': '5px',<br> },<br>}<br>[More info](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip#api). |
|
||||
|
||||
#### Redux DevTools props
|
||||
|
||||
|
|
|
|||
|
|
@ -39,34 +39,32 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@types/redux-devtools-themes": "^1.0.0",
|
||||
"d3-state-visualizer": "^1.6.0",
|
||||
"deepmerge": "^4.2.2",
|
||||
"prop-types": "^15.8.1",
|
||||
"redux-devtools-themes": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@redux-devtools/core": "^3.13.1",
|
||||
"@types/react": "^18.0.25",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@types/react": "^18.0.26",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"react": "^18.2.0",
|
||||
"redux": "^4.2.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@redux-devtools/core": "^3.13.1",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { Component, createRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { tree, NodeWithId, Primitive } from 'd3-state-visualizer';
|
||||
import { tree } from 'd3-state-visualizer';
|
||||
import type { Options } from 'd3-state-visualizer';
|
||||
import { Action, Dispatch } from 'redux';
|
||||
import { LiftedAction, LiftedState } from '@redux-devtools/core';
|
||||
import * as themes from 'redux-devtools-themes';
|
||||
|
|
@ -12,7 +12,8 @@ const wrapperStyle = {
|
|||
};
|
||||
|
||||
export interface Props<S, A extends Action<unknown>>
|
||||
extends LiftedState<S, A, ChartMonitorState> {
|
||||
extends LiftedState<S, A, ChartMonitorState>,
|
||||
Options {
|
||||
dispatch: Dispatch<LiftedAction<S, A, ChartMonitorState>>;
|
||||
preserveScrollTop: boolean;
|
||||
select: (state: S) => unknown;
|
||||
|
|
@ -20,76 +21,10 @@ export interface Props<S, A extends Action<unknown>>
|
|||
invertTheme: boolean;
|
||||
|
||||
state: S | null;
|
||||
isSorted: boolean;
|
||||
heightBetweenNodesCoeff: number;
|
||||
widthBetweenNodesCoeff: number;
|
||||
onClickText: (datum: NodeWithId) => void;
|
||||
tooltipOptions: {
|
||||
disabled: boolean;
|
||||
offset: {
|
||||
left: number;
|
||||
top: number;
|
||||
};
|
||||
indentationSize: number;
|
||||
style: { [key: string]: Primitive } | undefined;
|
||||
};
|
||||
style: { [key: string]: Primitive } | undefined;
|
||||
defaultIsVisible?: boolean;
|
||||
}
|
||||
|
||||
class Chart<S, A extends Action<unknown>> extends Component<Props<S, A>> {
|
||||
static propTypes = {
|
||||
state: PropTypes.object,
|
||||
rootKeyName: PropTypes.string,
|
||||
pushMethod: PropTypes.oneOf(['push', 'unshift']),
|
||||
tree: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
children: PropTypes.array,
|
||||
}),
|
||||
id: PropTypes.string,
|
||||
style: PropTypes.shape({
|
||||
node: PropTypes.shape({
|
||||
colors: PropTypes.shape({
|
||||
default: PropTypes.string,
|
||||
parent: PropTypes.string,
|
||||
collapsed: PropTypes.string,
|
||||
}),
|
||||
radius: PropTypes.number,
|
||||
}),
|
||||
text: PropTypes.shape({
|
||||
colors: PropTypes.shape({
|
||||
default: PropTypes.string,
|
||||
hover: PropTypes.string,
|
||||
}),
|
||||
}),
|
||||
link: PropTypes.object,
|
||||
}),
|
||||
size: PropTypes.number,
|
||||
aspectRatio: PropTypes.number,
|
||||
margin: PropTypes.shape({
|
||||
top: PropTypes.number,
|
||||
right: PropTypes.number,
|
||||
bottom: PropTypes.number,
|
||||
left: PropTypes.number,
|
||||
}),
|
||||
isSorted: PropTypes.bool,
|
||||
heightBetweenNodesCoeff: PropTypes.number,
|
||||
widthBetweenNodesCoeff: PropTypes.number,
|
||||
transitionDuration: PropTypes.number,
|
||||
onClickText: PropTypes.func,
|
||||
tooltipOptions: PropTypes.shape({
|
||||
disabled: PropTypes.bool,
|
||||
left: PropTypes.number,
|
||||
top: PropTypes.number,
|
||||
offset: PropTypes.shape({
|
||||
left: PropTypes.number,
|
||||
top: PropTypes.number,
|
||||
}),
|
||||
indentationSize: PropTypes.number,
|
||||
style: PropTypes.object,
|
||||
}),
|
||||
};
|
||||
|
||||
divRef = createRef<HTMLDivElement>();
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
renderChart?: (state?: {} | null | undefined) => void;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React, { CSSProperties, PureComponent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import * as themes from 'redux-devtools-themes';
|
||||
import {
|
||||
ActionCreators,
|
||||
|
|
@ -8,7 +7,7 @@ import {
|
|||
} from '@redux-devtools/core';
|
||||
import deepmerge from 'deepmerge';
|
||||
import { Action, Dispatch } from 'redux';
|
||||
import { NodeWithId, Primitive } from 'd3-state-visualizer';
|
||||
import type { Options } from 'd3-state-visualizer';
|
||||
|
||||
import reducer, { ChartMonitorState } from './reducers';
|
||||
import Chart, { Props } from './Chart';
|
||||
|
|
@ -41,37 +40,14 @@ function invertColors(theme: themes.Base16Theme) {
|
|||
}
|
||||
|
||||
export interface ChartMonitorProps<S, A extends Action<unknown>>
|
||||
extends LiftedState<S, A, ChartMonitorState> {
|
||||
extends LiftedState<S, A, ChartMonitorState>,
|
||||
Options {
|
||||
dispatch: Dispatch<LiftedAction<S, A, ChartMonitorState>>;
|
||||
preserveScrollTop: boolean;
|
||||
select: (state: S) => unknown;
|
||||
theme: keyof typeof themes | themes.Base16Theme;
|
||||
invertTheme: boolean;
|
||||
|
||||
state: S | null;
|
||||
isSorted: boolean;
|
||||
heightBetweenNodesCoeff: number;
|
||||
widthBetweenNodesCoeff: number;
|
||||
onClickText: (datum: NodeWithId) => void;
|
||||
tooltipOptions: unknown;
|
||||
style: {
|
||||
width: number;
|
||||
height: number;
|
||||
node: {
|
||||
colors: {
|
||||
default: string;
|
||||
collapsed: string;
|
||||
parent: string;
|
||||
};
|
||||
radius: number;
|
||||
};
|
||||
text: {
|
||||
colors: {
|
||||
default: string;
|
||||
hover: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
defaultIsVisible?: boolean;
|
||||
}
|
||||
|
||||
|
|
@ -80,23 +56,6 @@ class ChartMonitor<S, A extends Action<unknown>> extends PureComponent<
|
|||
> {
|
||||
static update = reducer;
|
||||
|
||||
static propTypes = {
|
||||
dispatch: PropTypes.func,
|
||||
computedStates: PropTypes.array,
|
||||
currentStateIndex: PropTypes.number,
|
||||
actionsById: PropTypes.object,
|
||||
stagedActionIds: PropTypes.array,
|
||||
skippedActionIds: PropTypes.array,
|
||||
monitorState: PropTypes.shape({
|
||||
initialScrollTop: PropTypes.number,
|
||||
}),
|
||||
|
||||
preserveScrollTop: PropTypes.bool,
|
||||
select: PropTypes.func.isRequired,
|
||||
theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
|
||||
invertTheme: PropTypes.bool,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
select: (state: unknown) => state,
|
||||
theme: 'nicinabox',
|
||||
|
|
@ -140,45 +99,10 @@ class ChartMonitor<S, A extends Action<unknown>> extends PureComponent<
|
|||
return invertTheme ? invertColors(themes.nicinabox) : themes.nicinabox;
|
||||
}
|
||||
|
||||
getChartStyle() {
|
||||
const theme = this.getTheme();
|
||||
|
||||
return {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
node: {
|
||||
colors: {
|
||||
default: theme.base0B,
|
||||
collapsed: theme.base0B,
|
||||
parent: theme.base0E,
|
||||
},
|
||||
radius: 7,
|
||||
},
|
||||
text: {
|
||||
colors: {
|
||||
default: theme.base0D,
|
||||
hover: theme.base06,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
getChartOptions(props = this.props): Props<S, A> {
|
||||
const { computedStates } = props;
|
||||
const theme = this.getTheme();
|
||||
|
||||
const tooltipOptions = {
|
||||
disabled: false,
|
||||
offset: { left: 30, top: 10 },
|
||||
indentationSize: 2,
|
||||
style: {
|
||||
'background-color': theme.base06,
|
||||
opacity: '0.7',
|
||||
'border-radius': '5px',
|
||||
padding: '5px',
|
||||
},
|
||||
};
|
||||
|
||||
const defaultOptions = {
|
||||
state: computedStates.length
|
||||
? computedStates[props.currentStateIndex].state
|
||||
|
|
@ -186,10 +110,35 @@ class ChartMonitor<S, A extends Action<unknown>> extends PureComponent<
|
|||
isSorted: false,
|
||||
heightBetweenNodesCoeff: 1,
|
||||
widthBetweenNodesCoeff: 1.3,
|
||||
tooltipOptions,
|
||||
style: this.getChartStyle() as unknown as
|
||||
| { [key: string]: Primitive }
|
||||
| undefined,
|
||||
tooltipOptions: {
|
||||
disabled: false,
|
||||
offset: { left: 30, top: 10 },
|
||||
indentationSize: 2,
|
||||
styles: {
|
||||
'background-color': theme.base06,
|
||||
opacity: '0.7',
|
||||
'border-radius': '5px',
|
||||
padding: '5px',
|
||||
},
|
||||
},
|
||||
chartStyles: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
nodeStyleOptions: {
|
||||
colors: {
|
||||
default: theme.base0B,
|
||||
collapsed: theme.base0B,
|
||||
parent: theme.base0E,
|
||||
},
|
||||
radius: 7,
|
||||
},
|
||||
textStyleOptions: {
|
||||
colors: {
|
||||
default: theme.base0D,
|
||||
hover: theme.base06,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return deepmerge(defaultOptions, props);
|
||||
|
|
@ -198,10 +147,9 @@ class ChartMonitor<S, A extends Action<unknown>> extends PureComponent<
|
|||
render() {
|
||||
const theme = this.getTheme();
|
||||
|
||||
const ChartAsAny = Chart as any;
|
||||
return (
|
||||
<div style={{ ...styles.container, backgroundColor: theme.base07 }}>
|
||||
<ChartAsAny {...this.getChartOptions()} />
|
||||
<Chart {...this.getChartOptions()} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,13 +41,13 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@redux-devtools/app": "^2.1.3",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/react": "^18.0.26",
|
||||
"apollo-server-express": "^3.11.1",
|
||||
"body-parser": "^1.20.1",
|
||||
"chalk": "^4.1.2",
|
||||
"cors": "^2.8.5",
|
||||
"cross-spawn": "^7.0.3",
|
||||
"electron": "^21.3.1",
|
||||
"electron": "^22.0.0",
|
||||
"express": "^4.18.2",
|
||||
"getport": "^0.1.0",
|
||||
"graphql": "^16.6.0",
|
||||
|
|
@ -61,37 +61,37 @@
|
|||
"react-is": "^18.2.0",
|
||||
"semver": "^7.3.8",
|
||||
"socketcluster-server": "^17.2.0",
|
||||
"sqlite3": "^5.1.2",
|
||||
"sqlite3": "^5.1.4",
|
||||
"styled-components": "^5.3.6",
|
||||
"uuid": "^9.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/body-parser": "^1.19.2",
|
||||
"@types/cors": "^2.8.12",
|
||||
"@types/cors": "^2.8.13",
|
||||
"@types/cross-spawn": "^6.0.2",
|
||||
"@types/express": "^4.17.14",
|
||||
"@types/jest": "^29.2.3",
|
||||
"@types/lodash": "^4.14.190",
|
||||
"@types/express": "^4.17.15",
|
||||
"@types/jest": "^29.2.4",
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/minimist": "^1.2.2",
|
||||
"@types/morgan": "^1.9.3",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/node": "^18.11.17",
|
||||
"@types/semver": "^7.3.13",
|
||||
"@types/socketcluster-client": "^16.0.0",
|
||||
"@types/socketcluster-server": "^16.1.0",
|
||||
"@types/styled-components": "^5.1.26",
|
||||
"@types/supertest": "^2.0.12",
|
||||
"@types/uuid": "^9.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-jest": "^27.1.6",
|
||||
"eslint-plugin-jest": "^27.1.7",
|
||||
"jest": "^29.3.1",
|
||||
"ncp": "^2.0.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"socketcluster-client": "^17.1.0",
|
||||
"supertest": "^6.3.1",
|
||||
"supertest": "^6.3.3",
|
||||
"ts-jest": "^29.0.3",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"parse-key": "^0.2.1",
|
||||
"prop-types": "^15.8.1",
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
|
|
@ -57,17 +57,17 @@
|
|||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@redux-devtools/core": "^3.13.1",
|
||||
"@types/parse-key": "^0.2.0",
|
||||
"@types/react": "^18.0.25",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@types/react": "^18.0.26",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"react": "^18.2.0",
|
||||
"redux": "^4.2.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@redux-devtools/core": "^3.13.1",
|
||||
|
|
|
|||
|
|
@ -29,23 +29,23 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"immutable": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"redux": "^4.2.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"redux": "^3.1.0 || ^4.0.0"
|
||||
|
|
|
|||
|
|
@ -21,39 +21,39 @@
|
|||
"react-dom": "^18.2.0",
|
||||
"react-is": "^18.2.0",
|
||||
"react-redux": "^8.0.5",
|
||||
"react-router-dom": "^6.4.3",
|
||||
"react-router-dom": "^6.6.0",
|
||||
"redux": "^4.2.0",
|
||||
"redux-logger": "^3.0.6",
|
||||
"styled-components": "^5.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@types/lodash.shuffle": "^4.2.7",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/node": "^18.11.17",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@types/redux-logger": "^3.0.9",
|
||||
"@types/styled-components": "^5.1.26",
|
||||
"@types/webpack-env": "^1.18.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"babel-loader": "^9.1.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^6.7.2",
|
||||
"eslint": "^8.28.0",
|
||||
"css-loader": "^6.7.3",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.13",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.14",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"style-loader": "^3.3.1",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "~4.9.3",
|
||||
"typescript": "~4.9.4",
|
||||
"webpack": "^5.75.0",
|
||||
"webpack-cli": "^5.0.0",
|
||||
"webpack-cli": "^5.0.1",
|
||||
"webpack-dev-server": "^4.11.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ module.exports = {
|
|||
'\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
|
||||
},
|
||||
transform: {
|
||||
'^.+\\.jsx?$': 'babel-jest',
|
||||
'^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }],
|
||||
},
|
||||
resolver: '<rootDir>/jestResolver.js',
|
||||
transformIgnorePatterns: ['node_modules/(?!.pnpm|nanoid)'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
module.exports = (path, options) => {
|
||||
return options.defaultResolver(path, {
|
||||
...options,
|
||||
packageFilter: (pkg) => {
|
||||
if (pkg.name === 'nanoid') {
|
||||
pkg.exports['.'].browser = pkg.exports['.'].require;
|
||||
}
|
||||
return pkg;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@redux-devtools/ui": "^1.3.0",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"es6template": "^1.0.5",
|
||||
|
|
@ -51,12 +51,12 @@
|
|||
"jsan": "^3.1.14",
|
||||
"object-path": "^0.11.8",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-icons": "^4.6.0",
|
||||
"react-icons": "^4.7.1",
|
||||
"simple-diff": "^1.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
|
|
@ -66,16 +66,16 @@
|
|||
"@redux-devtools/inspector-monitor": "^3.0.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@types/es6template": "^1.0.0",
|
||||
"@types/jest": "^29.2.3",
|
||||
"@types/jest": "^29.2.4",
|
||||
"@types/jsan": "^3.1.2",
|
||||
"@types/object-path": "^0.11.1",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/simple-diff": "^1.6.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-jest": "^27.1.6",
|
||||
"eslint-plugin-jest": "^27.1.7",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"jest": "^29.3.1",
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
"redux": "^4.2.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"ts-jest": "^29.0.3",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@redux-devtools/inspector-monitor": "^3.0.0",
|
||||
|
|
|
|||
|
|
@ -31,8 +31,8 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.18.6",
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@types/chrome": "^0.0.203",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@types/chrome": "^0.0.206",
|
||||
"anser": "^2.1.1",
|
||||
"html-entities": "^2.3.3",
|
||||
"path-browserify": "^1.0.1",
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
|
|
@ -52,17 +52,17 @@
|
|||
"@testing-library/react": "^13.4.0",
|
||||
"@types/babel__code-frame": "^7.0.3",
|
||||
"@types/html-entities": "^1.3.4",
|
||||
"@types/jest": "^29.2.3",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/jest": "^29.2.4",
|
||||
"@types/node": "^18.11.17",
|
||||
"@types/path-browserify": "^1.0.0",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/redux-devtools-themes": "^1.0.0",
|
||||
"@types/source-map": "0.5.2",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-jest": "^27.1.6",
|
||||
"eslint-plugin-jest": "^27.1.7",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"jest": "^29.3.1",
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
"redux": "^4.2.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"ts-jest": "^29.0.3",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@redux-devtools/inspector-monitor": "^3.0.0",
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
import typescript from 'rollup-plugin-typescript2';
|
||||
import babel from '@rollup/plugin-babel';
|
||||
import nodePolyfills from 'rollup-plugin-node-polyfills';
|
||||
|
||||
const config = [
|
||||
{
|
||||
input: 'src/StackTraceTab.tsx',
|
||||
output: [
|
||||
{
|
||||
file: 'dist/redux-devtools-inspector-monitor-trace-tab.cjs.js',
|
||||
format: 'cjs',
|
||||
},
|
||||
{
|
||||
file: 'dist/redux-devtools-inspector-monitor-trace-tab.esm.js',
|
||||
format: 'esm',
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
typescript(),
|
||||
babel({
|
||||
babelHelpers: 'runtime',
|
||||
extensions: ['.ts', '.tsx'],
|
||||
plugins: ['@babel/plugin-transform-runtime'],
|
||||
}),
|
||||
nodePolyfills(),
|
||||
],
|
||||
external: [
|
||||
/@babel\/runtime/,
|
||||
'react',
|
||||
'redux-devtools-themes',
|
||||
'source-map',
|
||||
'@babel/code-frame',
|
||||
'anser',
|
||||
'html-entities',
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default config;
|
||||
|
|
@ -17,39 +17,39 @@
|
|||
"immutable": "^4.1.0",
|
||||
"lodash.shuffle": "^4.2.0",
|
||||
"react": "^18.2.0",
|
||||
"react-bootstrap": "^2.6.0",
|
||||
"react-bootstrap": "^2.7.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-redux": "^8.0.5",
|
||||
"react-router-dom": "^6.4.3",
|
||||
"react-router-dom": "^6.6.0",
|
||||
"redux": "^4.2.0",
|
||||
"redux-logger": "^3.0.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@types/base16": "^1.0.2",
|
||||
"@types/lodash.shuffle": "^4.2.7",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/node": "^18.11.17",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@types/redux-logger": "^3.0.9",
|
||||
"@types/webpack-env": "^1.18.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"babel-loader": "^9.1.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.13",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.14",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "~4.9.3",
|
||||
"typescript": "~4.9.4",
|
||||
"webpack": "^5.75.0",
|
||||
"webpack-cli": "^5.0.0",
|
||||
"webpack-cli": "^5.0.1",
|
||||
"webpack-dev-server": "^4.11.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,11 +35,11 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@types/dragula": "^3.7.1",
|
||||
"@types/lodash": "^4.14.190",
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"dateformat": "^4.6.3",
|
||||
"dateformat": "^5.0.3",
|
||||
"hex-rgba": "^1.0.2",
|
||||
"immutable": "^4.1.0",
|
||||
"javascript-stringify": "^2.1.0",
|
||||
|
|
@ -55,30 +55,30 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@redux-devtools/core": "^3.13.1",
|
||||
"@types/dateformat": "^3.0.1",
|
||||
"@types/dateformat": "^5.0.0",
|
||||
"@types/hex-rgba": "^1.0.1",
|
||||
"@types/history": "^4.7.11",
|
||||
"@types/lodash.debounce": "^4.0.7",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dragula": "^1.1.0",
|
||||
"@types/redux-devtools-themes": "^1.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"react": "^18.2.0",
|
||||
"redux": "^4.2.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@redux-devtools/core": "^3.13.1",
|
||||
|
|
|
|||
|
|
@ -41,30 +41,30 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"lodash": "^4.17.21"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@types/jest": "^29.2.3",
|
||||
"@types/lodash": "^4.14.190",
|
||||
"@types/node": "^18.11.9",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@types/jest": "^29.2.4",
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/node": "^18.11.17",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-jest": "^27.1.6",
|
||||
"eslint-plugin-jest": "^27.1.7",
|
||||
"jest": "^29.3.1",
|
||||
"redux": "^4.2.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"rxjs": "^7.5.7",
|
||||
"rxjs": "^7.8.0",
|
||||
"ts-jest": "^29.0.3",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"redux": "^3.4.0 || ^4.0.0"
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@types/lodash.debounce": "^4.0.7",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"@types/redux-devtools-themes": "^1.0.0",
|
||||
|
|
@ -52,24 +52,24 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@redux-devtools/core": "^3.13.1",
|
||||
"@types/react": "^18.0.25",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@types/react": "^18.0.26",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"react": "^18.2.0",
|
||||
"redux": "^4.2.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@redux-devtools/core": "^3.13.1",
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@redux-devtools/instrument": "^2.1.0",
|
||||
"@redux-devtools/utils": "^2.0.0",
|
||||
"jsan": "^3.1.14",
|
||||
|
|
@ -51,22 +51,22 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@types/jsan": "^3.1.2",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/node": "^18.11.17",
|
||||
"@types/rn-host-detect": "^1.2.0",
|
||||
"@types/socketcluster-client": "^16.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"redux": "^4.2.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"redux": "^3.5.2 || ^4.0.0"
|
||||
|
|
|
|||
|
|
@ -10,53 +10,53 @@
|
|||
"type-check": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@chakra-ui/react": "^2.4.1",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@chakra-ui/react": "^2.4.4",
|
||||
"@emotion/react": "^11.10.5",
|
||||
"@emotion/styled": "^11.10.5",
|
||||
"@mswjs/data": "^0.11.0",
|
||||
"@redux-devtools/core": "^3.13.0",
|
||||
"@redux-devtools/dock-monitor": "^3.0.0",
|
||||
"@redux-devtools/rtk-query-monitor": "^3.1.0",
|
||||
"@reduxjs/toolkit": "^1.9.0",
|
||||
"framer-motion": "^7.6.12",
|
||||
"msw": "^0.49.0",
|
||||
"@reduxjs/toolkit": "^1.9.1",
|
||||
"framer-motion": "^8.0.1",
|
||||
"msw": "^0.49.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^4.6.0",
|
||||
"react-icons": "^4.7.1",
|
||||
"react-is": "^18.2.0",
|
||||
"react-redux": "^8.0.5",
|
||||
"react-router-dom": "^6.4.3",
|
||||
"react-router-dom": "^6.6.0",
|
||||
"styled-components": "^5.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@types/copy-webpack-plugin": "^8.0.1",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/node": "^18.11.17",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@types/styled-components": "^5.1.26",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"babel-loader": "^9.1.0",
|
||||
"copy-webpack-plugin": "^11.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^6.7.2",
|
||||
"eslint": "^8.28.0",
|
||||
"css-loader": "^6.7.3",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.13",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.14",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"style-loader": "^3.3.1",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "~4.9.3",
|
||||
"typescript": "~4.9.4",
|
||||
"webpack": "^5.75.0",
|
||||
"webpack-cli": "^5.0.0",
|
||||
"webpack-cli": "^5.0.1",
|
||||
"webpack-dev-server": "^4.11.1"
|
||||
},
|
||||
"msw": {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ module.exports = {
|
|||
'\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
|
||||
},
|
||||
transform: {
|
||||
'^.+\\.jsx?$': 'babel-jest',
|
||||
'^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }],
|
||||
},
|
||||
resolver: '<rootDir>/jestResolver.js',
|
||||
transformIgnorePatterns: ['node_modules/(?!.pnpm|nanoid)'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
module.exports = (path, options) => {
|
||||
return options.defaultResolver(path, {
|
||||
...options,
|
||||
packageFilter: (pkg) => {
|
||||
if (pkg.name === 'nanoid') {
|
||||
pkg.exports['.'].browser = pkg.exports['.'].require;
|
||||
}
|
||||
return pkg;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
|
@ -44,9 +44,9 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@redux-devtools/ui": "^1.3.0",
|
||||
"@types/lodash": "^4.14.190",
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"@types/redux-devtools-themes": "^1.0.0",
|
||||
"hex-rgba": "^1.0.2",
|
||||
|
|
@ -61,25 +61,25 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@redux-devtools/core": "^3.13.1",
|
||||
"@reduxjs/toolkit": "^1.9.0",
|
||||
"@reduxjs/toolkit": "^1.9.1",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@types/jest": "^29.2.3",
|
||||
"@types/jest": "^29.2.4",
|
||||
"@types/hex-rgba": "^1.0.1",
|
||||
"@types/lodash.debounce": "^4.0.7",
|
||||
"@types/react": "^18.0.25",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@types/react": "^18.0.26",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-jest": "^27.1.6",
|
||||
"eslint-plugin-jest": "^27.1.7",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"jest": "^29.3.1",
|
||||
|
|
@ -90,11 +90,11 @@
|
|||
"redux": "^4.2.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"ts-jest": "^29.0.3",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@redux-devtools/core": "^3.13.1",
|
||||
"@reduxjs/toolkit": "^1.9.0",
|
||||
"@reduxjs/toolkit": "^1.9.1",
|
||||
"@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0",
|
||||
"@types/styled-components": "^5.1.26",
|
||||
"react": "^16.3.0 || ^17.0.0 || ^18.0.0",
|
||||
|
|
|
|||
|
|
@ -37,28 +37,28 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"jsan": "^3.1.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@types/jest": "^29.2.3",
|
||||
"@types/jest": "^29.2.4",
|
||||
"@types/jsan": "^3.1.2",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-jest": "^27.1.6",
|
||||
"eslint-plugin-jest": "^27.1.7",
|
||||
"immutable": "^4.1.0",
|
||||
"jest": "^29.3.1",
|
||||
"rimraf": "^3.0.2",
|
||||
"ts-jest": "^29.0.3",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"immutable": "^4.1.0"
|
||||
|
|
|
|||
|
|
@ -30,33 +30,33 @@
|
|||
"todomvc-app-css": "^2.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@types/classnames": "^2.3.1",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/node": "^18.11.17",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@types/styled-components": "^5.1.26",
|
||||
"@types/webpack-env": "^1.18.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"babel-loader": "^9.1.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^6.7.2",
|
||||
"eslint": "^8.28.0",
|
||||
"css-loader": "^6.7.3",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.13",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.14",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"style-loader": "^3.3.1",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "~4.9.3",
|
||||
"typescript": "~4.9.4",
|
||||
"webpack": "^5.75.0",
|
||||
"webpack-cli": "^5.0.0",
|
||||
"webpack-cli": "^5.0.1",
|
||||
"webpack-dev-server": "^4.11.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@redux-devtools/ui": "^1.3.0",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"@types/redux-devtools-themes": "^1.0.0",
|
||||
|
|
@ -41,29 +41,24 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@redux-devtools/core": "^3.13.1",
|
||||
"@rollup/plugin-babel": "^6.0.3",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/react": "^18.0.25",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@types/node": "^18.11.17",
|
||||
"@types/react": "^18.0.26",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"react": "^18.2.0",
|
||||
"redux": "^4.2.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"rollup": "^3.5.0",
|
||||
"rollup-plugin-typescript2": "^0.34.1",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@redux-devtools/core": "^3.13.1",
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ module.exports = {
|
|||
'\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
|
||||
},
|
||||
transform: {
|
||||
'^.+\\.jsx?$': 'babel-jest',
|
||||
'^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }],
|
||||
},
|
||||
resolver: '<rootDir>/jestResolver.js',
|
||||
transformIgnorePatterns: ['node_modules/(?!.pnpm|nanoid)'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
module.exports = (path, options) => {
|
||||
return options.defaultResolver(path, {
|
||||
...options,
|
||||
packageFilter: (pkg) => {
|
||||
if (pkg.name === 'nanoid') {
|
||||
pkg.exports['.'].browser = pkg.exports['.'].require;
|
||||
}
|
||||
return pkg;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
"build": "pnpm run build:lib && pnpm run build:storybook",
|
||||
"build:lib": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:css",
|
||||
"build:cjs": "babel src --extensions \".ts,.tsx\" --out-dir lib/cjs",
|
||||
"build:esm": "babel src --config-file ./babel.config.esm.json --no-babelrc --extensions \".ts,.tsx\" --out-dir lib/esm",
|
||||
"build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts,.tsx\" --out-dir lib/esm",
|
||||
"build:types": "tsc --emitDeclarationOnly",
|
||||
"build:css": "ncp fonts lib/fonts",
|
||||
"clean": "rimraf lib storybook-static",
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@rjsf/core": "^4.2.3",
|
||||
"@types/base16": "^1.0.2",
|
||||
"@types/codemirror": "^5.60.5",
|
||||
|
|
@ -51,40 +51,40 @@
|
|||
"@types/redux-devtools-themes": "^1.0.0",
|
||||
"@types/simple-element-resize-detector": "^1.3.0",
|
||||
"base16": "^1.0.0",
|
||||
"codemirror": "^5.65.10",
|
||||
"codemirror": "^5.65.11",
|
||||
"color": "^4.2.3",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-icons": "^4.6.0",
|
||||
"react-select": "^5.6.1",
|
||||
"react-icons": "^4.7.1",
|
||||
"react-select": "^5.7.0",
|
||||
"redux-devtools-themes": "^1.0.0",
|
||||
"simple-element-resize-detector": "^1.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@storybook/addon-essentials": "^6.5.13",
|
||||
"@storybook/builder-webpack5": "^6.5.13",
|
||||
"@storybook/manager-webpack5": "^6.5.13",
|
||||
"@storybook/react": "^6.5.13",
|
||||
"@storybook/addon-essentials": "^6.5.15",
|
||||
"@storybook/builder-webpack5": "^6.5.15",
|
||||
"@storybook/manager-webpack5": "^6.5.15",
|
||||
"@storybook/react": "^6.5.15",
|
||||
"@testing-library/dom": "^8.19.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^14.4.3",
|
||||
"@types/color": "^3.0.3",
|
||||
"@types/jest": "^29.2.3",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/jest": "^29.2.4",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/styled-components": "^5.1.26",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"babel-loader": "^9.1.0",
|
||||
"csstype": "^3.1.1",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-jest": "^27.1.6",
|
||||
"eslint-plugin-jest": "^27.1.7",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"jest": "^29.3.1",
|
||||
|
|
@ -96,13 +96,13 @@
|
|||
"require-from-string": "^2.0.2",
|
||||
"rimraf": "^3.0.2",
|
||||
"styled-components": "^5.3.6",
|
||||
"stylelint": "^14.15.0",
|
||||
"stylelint": "^14.16.0",
|
||||
"stylelint-config-prettier": "^9.0.4",
|
||||
"stylelint-config-standard": "^29.0.0",
|
||||
"stylelint-config-styled-components": "^0.1.1",
|
||||
"stylelint-processor-styled-components": "^1.10.0",
|
||||
"ts-jest": "^29.0.3",
|
||||
"typescript": "~4.9.3",
|
||||
"typescript": "~4.9.4",
|
||||
"webpack": "^5.75.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
|
|
|||
|
|
@ -188,17 +188,17 @@ exports[`Form renders correctly 1`] = `
|
|||
class="css-1f43avz-a11yText-A11yText"
|
||||
/>
|
||||
<div
|
||||
class=" css-gdsksj-control"
|
||||
class=" css-10g0wlc-control"
|
||||
>
|
||||
<div
|
||||
class=" css-1dzc0nd-ValueContainer"
|
||||
class=" css-1gpx584-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class=" css-du77wi-placeholder"
|
||||
class=" css-1m6ztbo-placeholder"
|
||||
id="react-select-2-placeholder"
|
||||
/>
|
||||
<div
|
||||
class=" css-1xl7is7-Input"
|
||||
class=" css-mh08on-Input"
|
||||
data-value=""
|
||||
>
|
||||
<input
|
||||
|
|
@ -225,11 +225,11 @@ exports[`Form renders correctly 1`] = `
|
|||
class=" css-1hb7zxy-IndicatorsContainer"
|
||||
>
|
||||
<span
|
||||
class=" css-1urf5ax-indicatorSeparator"
|
||||
class=" css-19norqf-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-aazq4s-indicatorContainer"
|
||||
class=" css-17vo4tq-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
|
|
@ -538,17 +538,17 @@ exports[`Form renders with no button 1`] = `
|
|||
class="css-1f43avz-a11yText-A11yText"
|
||||
/>
|
||||
<div
|
||||
class=" css-gdsksj-control"
|
||||
class=" css-10g0wlc-control"
|
||||
>
|
||||
<div
|
||||
class=" css-1dzc0nd-ValueContainer"
|
||||
class=" css-1gpx584-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class=" css-du77wi-placeholder"
|
||||
class=" css-1m6ztbo-placeholder"
|
||||
id="react-select-4-placeholder"
|
||||
/>
|
||||
<div
|
||||
class=" css-1xl7is7-Input"
|
||||
class=" css-mh08on-Input"
|
||||
data-value=""
|
||||
>
|
||||
<input
|
||||
|
|
@ -575,11 +575,11 @@ exports[`Form renders with no button 1`] = `
|
|||
class=" css-1hb7zxy-IndicatorsContainer"
|
||||
>
|
||||
<span
|
||||
class=" css-1urf5ax-indicatorSeparator"
|
||||
class=" css-19norqf-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-aazq4s-indicatorContainer"
|
||||
class=" css-17vo4tq-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
|
|
@ -879,17 +879,17 @@ exports[`Form renders with primary button 1`] = `
|
|||
class="css-1f43avz-a11yText-A11yText"
|
||||
/>
|
||||
<div
|
||||
class=" css-gdsksj-control"
|
||||
class=" css-10g0wlc-control"
|
||||
>
|
||||
<div
|
||||
class=" css-1dzc0nd-ValueContainer"
|
||||
class=" css-1gpx584-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class=" css-du77wi-placeholder"
|
||||
class=" css-1m6ztbo-placeholder"
|
||||
id="react-select-3-placeholder"
|
||||
/>
|
||||
<div
|
||||
class=" css-1xl7is7-Input"
|
||||
class=" css-mh08on-Input"
|
||||
data-value=""
|
||||
>
|
||||
<input
|
||||
|
|
@ -916,11 +916,11 @@ exports[`Form renders with primary button 1`] = `
|
|||
class=" css-1hb7zxy-IndicatorsContainer"
|
||||
>
|
||||
<span
|
||||
class=" css-1urf5ax-indicatorSeparator"
|
||||
class=" css-19norqf-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-aazq4s-indicatorContainer"
|
||||
class=" css-17vo4tq-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -15,19 +15,19 @@ exports[`Select renders correctly 1`] = `
|
|||
class="css-1f43avz-a11yText-A11yText"
|
||||
/>
|
||||
<div
|
||||
class=" css-gdsksj-control"
|
||||
class=" css-10g0wlc-control"
|
||||
>
|
||||
<div
|
||||
class=" css-1dzc0nd-ValueContainer"
|
||||
class=" css-1gpx584-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class=" css-du77wi-placeholder"
|
||||
class=" css-1m6ztbo-placeholder"
|
||||
id="react-select-2-placeholder"
|
||||
>
|
||||
Select...
|
||||
</div>
|
||||
<div
|
||||
class=" css-1xl7is7-Input"
|
||||
class=" css-mh08on-Input"
|
||||
data-value=""
|
||||
>
|
||||
<input
|
||||
|
|
@ -53,11 +53,11 @@ exports[`Select renders correctly 1`] = `
|
|||
class=" css-1hb7zxy-IndicatorsContainer"
|
||||
>
|
||||
<span
|
||||
class=" css-1urf5ax-indicatorSeparator"
|
||||
class=" css-19norqf-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-aazq4s-indicatorContainer"
|
||||
class=" css-17vo4tq-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
|
|
@ -92,22 +92,22 @@ exports[`Select renders with props 1`] = `
|
|||
class="css-1f43avz-a11yText-A11yText"
|
||||
/>
|
||||
<div
|
||||
class=" css-gdsksj-control"
|
||||
class=" css-10g0wlc-control"
|
||||
>
|
||||
<div
|
||||
class=" css-be27w2-ValueContainer"
|
||||
class=" css-1ei5tw5-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class="css-168vvpw-multiValue"
|
||||
class=" css-7ef4eb-multiValue"
|
||||
>
|
||||
<div
|
||||
class="css-1m51f4l"
|
||||
class=" css-sro4fq-MultiValueGeneric"
|
||||
>
|
||||
One
|
||||
</div>
|
||||
<div
|
||||
aria-label="Remove One"
|
||||
class="css-1to589f"
|
||||
class=" css-1f177ni-MultiValueRemove"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
|
|
@ -143,7 +143,7 @@ exports[`Select renders with props 1`] = `
|
|||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-1gilzap-loadingIndicator"
|
||||
class=" css-1x631db-loadingIndicator"
|
||||
>
|
||||
<span
|
||||
class="css-1xtdfmb-LoadingDot"
|
||||
|
|
@ -156,11 +156,11 @@ exports[`Select renders with props 1`] = `
|
|||
/>
|
||||
</div>
|
||||
<span
|
||||
class=" css-1urf5ax-indicatorSeparator"
|
||||
class=" css-19norqf-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-aazq4s-indicatorContainer"
|
||||
class=" css-17vo4tq-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
|
|
@ -204,13 +204,13 @@ exports[`Select should select another option 1`] = `
|
|||
</span>
|
||||
</span>
|
||||
<div
|
||||
class=" css-1gv8qk2-control"
|
||||
class=" css-mjg7mv-control"
|
||||
>
|
||||
<div
|
||||
class=" css-1dzc0nd-ValueContainer"
|
||||
class=" css-1gpx584-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class=" css-e4ucyw-Input"
|
||||
class=" css-jpmdcb-Input"
|
||||
data-value="two"
|
||||
>
|
||||
<input
|
||||
|
|
@ -238,11 +238,11 @@ exports[`Select should select another option 1`] = `
|
|||
class=" css-1hb7zxy-IndicatorsContainer"
|
||||
>
|
||||
<span
|
||||
class=" css-1urf5ax-indicatorSeparator"
|
||||
class=" css-19norqf-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-aazq4s-indicatorContainer"
|
||||
class=" css-17vo4tq-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
|
|
@ -260,15 +260,15 @@ exports[`Select should select another option 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class=" css-17wpf85-menu"
|
||||
class=" css-sromc4-menu"
|
||||
id="react-select-4-listbox"
|
||||
>
|
||||
<div
|
||||
class=" css-87spde-MenuList"
|
||||
class=" css-hln2r9-MenuList"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
class=" css-1npzjqc-option"
|
||||
class=" css-1t6re7j-option"
|
||||
id="react-select-4-option-1"
|
||||
tabindex="-1"
|
||||
>
|
||||
|
|
@ -303,13 +303,13 @@ exports[`Select shouldn't find any results 1`] = `
|
|||
</span>
|
||||
</span>
|
||||
<div
|
||||
class=" css-1gv8qk2-control"
|
||||
class=" css-mjg7mv-control"
|
||||
>
|
||||
<div
|
||||
class=" css-1dzc0nd-ValueContainer"
|
||||
class=" css-1gpx584-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class=" css-e4ucyw-Input"
|
||||
class=" css-jpmdcb-Input"
|
||||
data-value="text"
|
||||
>
|
||||
<input
|
||||
|
|
@ -337,11 +337,11 @@ exports[`Select shouldn't find any results 1`] = `
|
|||
class=" css-1hb7zxy-IndicatorsContainer"
|
||||
>
|
||||
<span
|
||||
class=" css-1urf5ax-indicatorSeparator"
|
||||
class=" css-19norqf-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-aazq4s-indicatorContainer"
|
||||
class=" css-17vo4tq-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
|
|
@ -359,14 +359,14 @@ exports[`Select shouldn't find any results 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class=" css-17wpf85-menu"
|
||||
class=" css-sromc4-menu"
|
||||
id="react-select-5-listbox"
|
||||
>
|
||||
<div
|
||||
class=" css-87spde-MenuList"
|
||||
class=" css-hln2r9-MenuList"
|
||||
>
|
||||
<div
|
||||
class=" css-36co7-NoOptionsMessage"
|
||||
class=" css-v8tq8h-NoOptionsMessage"
|
||||
>
|
||||
No options
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@redux-devtools/core": "^3.13.1",
|
||||
"@redux-devtools/serialize": "^0.4.1",
|
||||
"@types/get-params": "^0.1.0",
|
||||
|
|
@ -40,25 +40,25 @@
|
|||
"immutable": "^4.1.0",
|
||||
"jsan": "^3.1.14",
|
||||
"lodash": "^4.17.21",
|
||||
"nanoid": "^3.3.4",
|
||||
"nanoid": "^4.0.0",
|
||||
"redux": "^4.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@types/jsan": "^3.1.2",
|
||||
"@types/lodash": "^4.14.190",
|
||||
"@types/node": "^18.11.9",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/node": "^18.11.17",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@redux-devtools/core": "^3.13.1",
|
||||
|
|
|
|||
|
|
@ -30,29 +30,29 @@
|
|||
"redux-thunk": "^2.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/node": "^18.11.17",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@types/webpack-env": "^1.18.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"babel-loader": "^9.1.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.13",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.14",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "~4.9.3",
|
||||
"typescript": "~4.9.4",
|
||||
"webpack": "^5.75.0",
|
||||
"webpack-cli": "^5.0.0",
|
||||
"webpack-cli": "^5.0.1",
|
||||
"webpack-dev-server": "^4.11.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,32 +43,32 @@
|
|||
"todomvc-app-css": "^2.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@types/classnames": "^2.3.1",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/node": "^18.11.17",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@types/webpack-env": "^1.18.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"babel-loader": "^9.1.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^6.7.2",
|
||||
"eslint": "^8.28.0",
|
||||
"css-loader": "^6.7.3",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.13",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.14",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"style-loader": "^3.3.1",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "~4.9.3",
|
||||
"typescript": "~4.9.4",
|
||||
"webpack": "^5.75.0",
|
||||
"webpack-cli": "^5.0.0",
|
||||
"webpack-cli": "^5.0.1",
|
||||
"webpack-dev-server": "^4.11.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
"prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@redux-devtools/instrument": "^2.1.0",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"lodash": "^4.17.21",
|
||||
|
|
@ -49,21 +49,21 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.19.3",
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/core": "^7.20.5",
|
||||
"@babel/eslint-parser": "^7.19.1",
|
||||
"@babel/plugin-transform-runtime": "^7.19.6",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@types/jest": "^29.2.3",
|
||||
"@types/lodash": "^4.14.190",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/react": "^18.0.25",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@types/jest": "^29.2.4",
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/node": "^18.11.17",
|
||||
"@types/react": "^18.0.26",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
||||
"@typescript-eslint/parser": "^5.47.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-jest": "^27.1.6",
|
||||
"eslint-plugin-jest": "^27.1.7",
|
||||
"eslint-plugin-react": "^7.31.11",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"jest": "^29.3.1",
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
"redux": "^4.2.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"ts-jest": "^29.0.3",
|
||||
"typescript": "~4.9.3"
|
||||
"typescript": "~4.9.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^0.14.9 || ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
|
||||
|
|
|
|||
6666
pnpm-lock.yaml
6666
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user