diff --git a/packages/web/package.json b/packages/web/package.json index ede9291b..72b2a3b6 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -3,7 +3,6 @@ "version": "0.1.0", "description": "> TODO: description", "dependencies": { - "@alenaksu/json-viewer": "^1.0.0", "@apollo/client": "^3.4.15", "@automatisch/types": "0.1.0", "@emotion/react": "^11.4.1", @@ -30,6 +29,7 @@ "react-dom": "^17.0.2", "react-hook-form": "^7.17.2", "react-intl": "^5.20.12", + "react-json-tree": "^0.16.2", "react-router-dom": "^6.0.2", "react-scripts": "5.0.0", "slate": "^0.72.8", diff --git a/packages/web/src/components/JSONViewer/index.tsx b/packages/web/src/components/JSONViewer/index.tsx index 34d3e566..320acd83 100644 --- a/packages/web/src/components/JSONViewer/index.tsx +++ b/packages/web/src/components/JSONViewer/index.tsx @@ -1,31 +1,44 @@ import * as React from 'react'; -import '@alenaksu/json-viewer'; - +import { JSONTree } from 'react-json-tree'; import type { IJSONObject } from '@automatisch/types'; -import { jsonViewerStyles } from './style'; type JSONViewerProps = { data: IJSONObject; } + +const theme = { + scheme: 'inspector', + author: 'Alexander Kuznetsov (alexkuz@gmail.com)', + base00: '#181818', + base01: '#282828', + base02: '#383838', + base03: '#585858', + base04: '#b8b8b8', + base05: '#d8d8d8', + base06: '#e8e8e8', + base07: '#FFFFFF', + base08: '#E92F28', + base09: '#dc9656', + base0A: '#f7ca88', + base0B: '#65AD00', + base0C: '#86c1b9', + base0D: '#347BD9', + base0E: '#EC31C0', + base0F: '#a16946', +}; + function JSONViewer(props: JSONViewerProps) { const { data } = props; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const viewerRef = React.useRef(null); - - React.useEffect(() => { - if (viewerRef.current){ - viewerRef.current.data = data; - } - }, [data]); return ( -
- {jsonViewerStyles} - - -
+ true} + invertTheme={true} + theme={theme} + /> ); } - export default JSONViewer; diff --git a/packages/web/src/components/TestSubstep/index.tsx b/packages/web/src/components/TestSubstep/index.tsx index 1738eef3..ea65a20a 100644 --- a/packages/web/src/components/TestSubstep/index.tsx +++ b/packages/web/src/components/TestSubstep/index.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { useMutation } from '@apollo/client'; +import Box from '@mui/material/Box'; import Collapse from '@mui/material/Collapse'; import ListItem from '@mui/material/ListItem'; import Button from '@mui/material/Button'; @@ -59,7 +60,9 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement { {response && ( - + + + )}