From bcbccce0241f344fa4aaf0e00798f4cee0f24c9a Mon Sep 17 00:00:00 2001 From: thefringeninja Date: Wed, 7 Nov 2018 16:42:09 +0100 Subject: [PATCH] properly styling the json viewers --- package.json | 5 +- .../Viewer/HalViewer/StreamMessage.tsx | 174 +----------------- .../Viewer/HalViewer/StreamMetadata.tsx | 50 +---- .../Viewer/HalViewer/Unrecognized.tsx | 113 ++++++------ .../HalViewer/components/JsonViewer.tsx | 160 ++++++++++++++++ .../Viewer/HalViewer/components/index.ts | 1 + src/types/react-inspector.d.ts | 42 ----- src/utils/index.ts | 2 + src/utils/reactJsonTheme.ts | 25 +++ yarn.lock | 74 ++++++-- 10 files changed, 315 insertions(+), 331 deletions(-) create mode 100644 src/stream-store/Viewer/HalViewer/components/JsonViewer.tsx delete mode 100644 src/types/react-inspector.d.ts create mode 100644 src/utils/reactJsonTheme.ts diff --git a/package.json b/package.json index 0109d40..89c5087 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "private": false, "devDependencies": { "@types/array.prototype.flatmap": "^1.2.0", + "@types/base16": "^1.0.1", "@types/classnames": "^2.2.6", "@types/history": "^4.7.2", "@types/json-schema": "^7.0.1", @@ -39,14 +40,16 @@ "@material-ui/core": "3.2.1", "@material-ui/icons": "3.0.1", "array.prototype.flatmap": "1.2.1", + "base16": "1.0.0", "classnames": "2.2.6", "history": "4.7.2", "inflector-js": "1.0.1", + "invert-color": "1.5.0", "json-schema": "0.2.3", "jss": "9.4.0", "react": "16.5.2", "react-dom": "16.5.2", - "react-inspector": "2.3.0", + "react-json-view": "1.19.1", "react-remarkable": "1.1.3", "react-schema-form": "0.5.0", "react-tap-event-plugin": "3.0.2", diff --git a/src/stream-store/Viewer/HalViewer/StreamMessage.tsx b/src/stream-store/Viewer/HalViewer/StreamMessage.tsx index b615e8d..ebaba26 100644 --- a/src/stream-store/Viewer/HalViewer/StreamMessage.tsx +++ b/src/stream-store/Viewer/HalViewer/StreamMessage.tsx @@ -2,36 +2,18 @@ import { Card, CardActions, CardContent, - Drawer, Tab, Tabs, Typography, - WithStyles, - withStyles, } from '@material-ui/core'; -import React, { - ComponentType, - FormEvent, - PureComponent, - ReactNode, -} from 'react'; -import Inspector, { - NodeRendererProps, - ObjectLabel, - ObjectName, - ObjectRootLabel, -} from 'react-inspector'; +import React, { ComponentType, FormEvent, PureComponent } from 'react'; import { Observable as obs } from 'rxjs'; -import uriTemplate from 'uri-template'; -import { StreamBrowser } from '../../../components'; import { Notes, Settings } from '../../../components/Icons'; import { Table, TableBody } from '../../../components/StripeyTable'; import { connect, createState } from '../../../reactive'; -import { HalResource, NavigatableProps } from '../../../types'; -import { hal, http } from '../../../utils'; -import rels from '../../rels'; +import { HalResource } from '../../../types'; import store from '../../store'; -import { StreamHeader, StreamMessageDetails } from './components'; +import { JsonViewer, StreamHeader, StreamMessageDetails } from './components'; import { HalViewerProps } from './types'; const tryParseJson = (payload: string): object => { @@ -79,147 +61,6 @@ const state$ = createState( }), ); -const isPotentialStreamId = (data: any) => - typeof data === 'number' || typeof data === 'string'; - -const getStreamLinks = ({ _embedded }: HalResource): HalResource[] => - _embedded[rels.feed] || []; - -interface StreamMessageJsonState { - streams: HalResource[]; - loading: boolean; - open: boolean; -} - -const style = { - drawerPaper: { - width: 480, - }, - streamId: { - '&:hover': { - textDecoration: 'underline', - }, - }, -}; - -interface StreamMessageJsonProps { - json: object; -} - -const StreamMessageJson = withStyles(style)(class extends PureComponent< - StreamMessageJsonProps & - NavigatableProps & - HalResource & - WithStyles, - StreamMessageJsonState -> { - state: StreamMessageJsonState = { - loading: false, - open: false, - streams: [], - }; - - _handlePotentialStreamIdClick: ( - e: FormEvent, - pattern: string, - ) => Promise = async ({ currentTarget: anchorElement }, pattern) => { - const { authorization, _links } = this.props; - - this.setState({ - loading: true, - open: true, - }); - - if (!_links || !_links[rels.browse]) { - return; - } - - const template = uriTemplate.parse( - decodeURI(_links[rels.browse][0].href), - ); - - const responses = await Promise.all( - [...new Set([pattern, String(pattern).replace('-', '')])].map(p => - http.get({ - headers: { authorization }, - link: { - href: template.expand({ p, t: 'e' }), - }, - }), - ), - ); - - this.setState({ - loading: false, - streams: Object.values( - responses.flatMap(({ body }) => - getStreamLinks(hal.normalizeResource(body as HalResource)), - ), - ), - }); - }; - - _handlePotentialStreamIdClose = () => - this.setState({ - open: false, - }); - - _renderNode = ({ - depth, - name, - data, - isNonenumerable, - ...props - }: NodeRendererProps & { children?: ReactNode }) => - depth === 0 ? ( - - ) : isPotentialStreamId(data) ? ( - - - : - this._handlePotentialStreamIdClick(e, data)} - > - {data} - - - ) : ( - - ); - - render() { - const { json, classes } = this.props; - const { streams, loading, open } = this.state; - - return ( -
- - - - -
- ); - } -} as ComponentType); - interface StreamMessageTabsState { value: number; } @@ -231,7 +72,6 @@ interface StreamMessageTabsProps { }; } -// tslint:disable-next-line:max-classes-per-file class StreamMessageTabs extends PureComponent< StreamMessageTabsProps & HalResource, StreamMessageTabsState @@ -284,12 +124,8 @@ class StreamMessageTabs extends PureComponent< - {value === 0 && ( - - )} - {value === 1 && ( - - )} + {value === 0 && } + {value === 1 && } ); diff --git a/src/stream-store/Viewer/HalViewer/StreamMetadata.tsx b/src/stream-store/Viewer/HalViewer/StreamMetadata.tsx index 1fe296f..0c951d6 100644 --- a/src/stream-store/Viewer/HalViewer/StreamMetadata.tsx +++ b/src/stream-store/Viewer/HalViewer/StreamMetadata.tsx @@ -1,13 +1,6 @@ -import { - ExpansionPanel, - ExpansionPanelDetails, - ExpansionPanelSummary, - Typography, -} from '@material-ui/core'; -import React, { CSSProperties, PureComponent, StatelessComponent } from 'react'; +import React, { CSSProperties, StatelessComponent } from 'react'; import { Observable as obs } from 'rxjs'; import { Hyperlink } from '../../../components'; -import { Code } from '../../../components/Icons'; import { Table, TableBody, @@ -19,6 +12,7 @@ import { connect, createState } from '../../../reactive'; import { HalLinks, HalResource } from '../../../types'; import rels from '../../rels'; import store from '../../store'; +import { JsonViewer } from './components'; import { HalViewerProps } from './types'; const metadata$ = store.hal$.body$.map(metadata => metadata); @@ -81,44 +75,6 @@ const StreamMetadataDetails: StatelessComponent = ({ ); -interface StreamMetadataJsonProps { - metadataJson: any; -} - -interface StreamMetadataJsonState { - expanded: boolean; -} -class StreamMetadataJson extends PureComponent< - StreamMetadataJsonProps, - StreamMetadataJsonState -> { - state = { - expanded: true, - }; - - _handleClick = () => { - const { expanded } = this.state; - this.setState({ - expanded: !expanded, - }); - }; - - render() { - const { metadataJson } = this.props; - const { expanded } = this.state; - return ( - - }> - {'Metadata'} - - - 
{JSON.stringify(metadataJson, null, 4)}
- - - ); - } -} - const StreamMetadata: StatelessComponent< StreamMetadataState & HalViewerProps > = ({ metadata }) => ( @@ -131,7 +87,7 @@ const StreamMetadata: StatelessComponent< - + ); diff --git a/src/stream-store/Viewer/HalViewer/Unrecognized.tsx b/src/stream-store/Viewer/HalViewer/Unrecognized.tsx index d993dbe..0516316 100644 --- a/src/stream-store/Viewer/HalViewer/Unrecognized.tsx +++ b/src/stream-store/Viewer/HalViewer/Unrecognized.tsx @@ -1,80 +1,73 @@ -import React, { ComponentType } from 'react'; -import Inspector, { - NodeRendererProps, - ObjectLabel, - ObjectLabelProps, - ObjectName, - ObjectRootLabel, -} from 'react-inspector'; - +import { ColorScheme } from 'base16'; +import React from 'react'; +import ReactJson, { OnSelectProps } from 'react-json-view'; import { Observable as obs } from 'rxjs'; import { withNavigation } from '../../../components'; import { connect, createState } from '../../../reactive'; +import themes from '../../../themes'; import { NavigatableProps } from '../../../types'; -import { preventDefault } from '../../../utils'; +import { reactJsonTheme } from '../../../utils'; import store from '../../store'; import { HalViewerProps } from './types'; +const isHyperlink = ( + name: string | null, + namespace: Array, +): boolean => + name === 'href' && namespace.filter(n => n === '_links').length > 0; + interface UnrecognizedRelViewerState { - data: object; + src: object; + theme: ColorScheme; } const state$ = createState( - store.hal$.body$.map(data => ['data', () => data]), + obs.merge( + store.hal$.body$.map(src => ['src', () => src]), + themes.theme$.map(({ palette: { type } }) => [ + 'theme', + () => reactJsonTheme(type), + ]), + ), obs.of({ - data: {}, + src: {}, + theme: reactJsonTheme(), }), ); -const MaybeLinkLabel: ComponentType = withNavigation< - ObjectLabelProps +const UnrecognizedRelViewer = withNavigation< + UnrecognizedRelViewerState & HalViewerProps >()( - ({ - authorization, - name, - data, - onNavigate, - ...props - }: ObjectLabelProps & NavigatableProps) => - name === 'href' ? ( - - - : - - onNavigate({ href: data }, authorization), - )} - > - {data} - - - {data} - - ) : ( - - ), -); + class extends React.PureComponent< + UnrecognizedRelViewerState & HalViewerProps & NavigatableProps + > { + _handlePotentialNavigation = ({ + name, + value, + namespace, + }: OnSelectProps) => { + const { authorization, onNavigate } = this.props; + if (!isHyperlink(name, namespace)) { + return; + } -class UnrecognizedRelViewer extends React.PureComponent< - UnrecognizedRelViewerState & HalViewerProps -> { - _nodeRenderer = ({ depth, ...props }: NodeRendererProps) => - depth === 0 ? ( - - ) : ( - - ); + onNavigate( + { + href: value as string, + }, + authorization, + ); + }; - render() { - return ( - - ); - } -} + render() { + return ( + + ); + } + }, +); export default connect(state$)( UnrecognizedRelViewer, diff --git a/src/stream-store/Viewer/HalViewer/components/JsonViewer.tsx b/src/stream-store/Viewer/HalViewer/components/JsonViewer.tsx new file mode 100644 index 0000000..64d5c58 --- /dev/null +++ b/src/stream-store/Viewer/HalViewer/components/JsonViewer.tsx @@ -0,0 +1,160 @@ +import { Drawer, WithStyles, withStyles } from '@material-ui/core'; +import { ColorScheme } from 'base16'; +import React, { ComponentType, PureComponent } from 'react'; +import ReactJson from 'react-json-view'; +import { Observable } from 'rxjs'; +import uriTemplate from 'uri-template'; +import { StreamBrowser, withNavigation } from '../../../../components'; +import { connect, createState } from '../../../../reactive'; +import themes from '../../../../themes'; +import { HalResource, NavigatableProps } from '../../../../types'; +import { hal, http, reactJsonTheme } from '../../../../utils'; +import rels from '../../../rels'; + +const isPotentialStreamId = (data: any) => + typeof data === 'number' || typeof data === 'string'; + +const getStreamLinks = ({ _embedded }: HalResource): HalResource[] => + _embedded[rels.feed] || []; + +interface JsonViewerState { + streams: HalResource[]; + loading: boolean; + open: boolean; +} + +const style = { + drawerPaper: { + width: 480, + }, + streamId: { + '&:hover': { + textDecoration: 'underline', + }, + }, +}; + +interface JsonViewerProps { + json?: object; +} + +interface ThemedJsonViewerState { + theme: ColorScheme; +} + +class JsonViewer extends PureComponent< + JsonViewerProps & + ThemedJsonViewerState & + NavigatableProps & + HalResource & + WithStyles, + JsonViewerState +> { + state: JsonViewerState = { + loading: false, + open: false, + streams: [], + }; + + _handlePotentialStreamIdClick = async ({ + value: pattern, + }: { + value: object | string | number | boolean | null; + }): Promise => { + if (!isPotentialStreamId(pattern)) { + return; + } + + const { authorization, _links } = this.props; + + this.setState({ + loading: true, + open: true, + }); + + if (!_links || !_links[rels.browse]) { + return; + } + + const template = uriTemplate.parse( + decodeURI(_links[rels.browse][0].href), + ); + + const responses = await Promise.all( + [...new Set([pattern, String(pattern).replace('-', '')])].map(p => + http.get({ + headers: { authorization }, + link: { + href: template.expand({ p, t: 'e' }), + }, + }), + ), + ); + + this.setState({ + loading: false, + streams: Object.values( + responses.flatMap(({ body }) => + getStreamLinks(hal.normalizeResource(body as HalResource)), + ), + ), + }); + }; + + _handlePotentialStreamIdClose = () => + this.setState({ + open: false, + }); + + render() { + const { json, classes, theme } = this.props; + + if (!json) { + return null; + } + + const { streams, loading, open } = this.state; + + return ( +
+ + + + +
+ ); + } +} + +const state$ = createState( + themes.theme$.map(({ palette: { type } }) => [ + 'theme', + () => reactJsonTheme(type), + ]), + Observable.of({ + theme: reactJsonTheme(), + }), +); + +const ThemedJsonViewer = connect( + state$, +)(JsonViewer); + +export default withNavigation< + HalResource & JsonViewerProps & ThemedJsonViewerState +>()(withStyles(style)(ThemedJsonViewer) as ComponentType< + JsonViewerProps & ThemedJsonViewerState & NavigatableProps & HalResource +>) as ComponentType; diff --git a/src/stream-store/Viewer/HalViewer/components/index.ts b/src/stream-store/Viewer/HalViewer/components/index.ts index 7323c4e..75ca9e1 100644 --- a/src/stream-store/Viewer/HalViewer/components/index.ts +++ b/src/stream-store/Viewer/HalViewer/components/index.ts @@ -1,2 +1,3 @@ export { default as StreamHeader } from './StreamHeader'; export { default as StreamMessageDetails } from './StreamMessageDetails'; +export { default as JsonViewer } from './JsonViewer'; diff --git a/src/types/react-inspector.d.ts b/src/types/react-inspector.d.ts deleted file mode 100644 index 32dc3a1..0000000 --- a/src/types/react-inspector.d.ts +++ /dev/null @@ -1,42 +0,0 @@ -declare module 'react-inspector' { - import { ComponentType } from 'react'; - - export interface ObjectNameProps { - name: string; - dimmed?: boolean; - } - - export interface ObjectValueProps { - object: any; - } - - export interface ObjectLabelProps { - isNonenumerable: boolean; - name: string; - data?: any; - } - - export interface ObjectRootLabelProps { - name?: any; - data?: any; - } - - export interface NodeRendererProps extends ObjectLabelProps { - depth: number; - } - - export interface ObjectInspectorProps { - name?: string; - data?: any; - expandLevel: number; - nodeRenderer(props: NodeRendererProps): JSX.Element; - } - - export const ObjectName: ComponentType; - export const ObjectValue: ComponentType; - export const ObjectLabel: ComponentType; - export const ObjectRootLabel: ComponentType; - const Inspector: ComponentType; - - export default Inspector; -} diff --git a/src/utils/index.ts b/src/utils/index.ts index d3a94ab..548f39a 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -7,3 +7,5 @@ export { default as preventDefault } from './preventDefault'; export { default as mediaTypes } from './mediaTypes'; export { default as hal } from './hal'; + +export { default as reactJsonTheme } from './reactJsonTheme'; diff --git a/src/utils/reactJsonTheme.ts b/src/utils/reactJsonTheme.ts new file mode 100644 index 0000000..e879439 --- /dev/null +++ b/src/utils/reactJsonTheme.ts @@ -0,0 +1,25 @@ +import { PaletteType } from '@material-ui/core'; +import { bright, ColorScheme, isotope } from 'base16'; +import invertColor from 'invert-color'; +const invert = (scheme: ColorScheme): ColorScheme => + Object.keys(scheme).reduce( + (akk, key) => ({ + ...akk, + [key]: key.startsWith('base') + // @ts-ignore + ? invertColor(scheme[key]) + // @ts-ignore + : scheme[key], + }), + // tslint:disable-next-line:no-object-literal-type-assertion + {} as ColorScheme, + ); + +const base16Themes: { [key: string]: ColorScheme } = { + dark: { ...isotope, base00: '#00000000' }, + light: { ...invert(bright), base00: '#00000000' }, +}; + +const reactJsonTheme = (type: PaletteType = 'light') => base16Themes[type]; + +export default reactJsonTheme; diff --git a/yarn.lock b/yarn.lock index 4ad9058..9faf637 100644 --- a/yarn.lock +++ b/yarn.lock @@ -70,6 +70,10 @@ version "1.2.0" resolved "https://registry.yarnpkg.com/@types/array.prototype.flatmap/-/array.prototype.flatmap-1.2.0.tgz#e11283ae3bf9b432173756764064f2d8a7a377b1" +"@types/base16@^1.0.1": + version "1.0.1" + resolved "http://registry.npmjs.org/@types/base16/-/base16-1.0.1.tgz#76dc8630675e99d1d5be78dfef59307254831203" + "@types/classnames@^2.2.6": version "2.2.6" resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.6.tgz#dbe8a666156d556ed018e15a4c65f08937c3f628" @@ -1160,6 +1164,10 @@ balanced-match@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" +base16@1.0.0, base16@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/base16/-/base16-1.0.0.tgz#e297f60d7ec1014a7a971a39ebc8a98c0b681e70" + base64-js@^1.0.2: version "1.3.0" resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.0.tgz#cab1e6118f051095e58b5281aea8c1cd22bfc0e3" @@ -2821,7 +2829,13 @@ fb-watchman@^2.0.0: dependencies: bser "^2.0.0" -fbjs@^0.8.1, fbjs@^0.8.6: +fbemitter@^2.0.0: + version "2.1.1" + resolved "https://registry.yarnpkg.com/fbemitter/-/fbemitter-2.1.1.tgz#523e14fdaf5248805bb02f62efc33be703f51865" + dependencies: + fbjs "^0.8.4" + +fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.6: version "0.8.17" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" dependencies: @@ -2935,6 +2949,13 @@ flush-write-stream@^1.0.0: inherits "^2.0.1" readable-stream "^2.0.4" +flux@^3.1.3: + version "3.1.3" + resolved "https://registry.yarnpkg.com/flux/-/flux-3.1.3.tgz#d23bed515a79a22d933ab53ab4ada19d05b2f08a" + dependencies: + fbemitter "^2.0.0" + fbjs "^0.8.0" + follow-redirects@^1.0.0, follow-redirects@^1.3.0: version "1.5.9" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.9.tgz#c9ed9d748b814a39535716e531b9196a845d89c6" @@ -3583,6 +3604,10 @@ invariant@^2.2.1, invariant@^2.2.2: dependencies: loose-envify "^1.0.0" +invert-color@1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/invert-color/-/invert-color-1.5.0.tgz#d0cf98ec5a2d0e879c63d063ac9c33476c3b9bf2" + invert-kv@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6" @@ -3677,10 +3702,6 @@ is-directory@^0.3.1: version "0.3.1" resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1" -is-dom@^1.0.9: - version "1.0.9" - resolved "https://registry.yarnpkg.com/is-dom/-/is-dom-1.0.9.tgz#483832d52972073de12b9fe3f60320870da8370d" - is-dotfile@^1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1" @@ -4633,6 +4654,10 @@ lodash.camelcase@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6" +lodash.curry@^4.0.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170" + lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" @@ -4645,6 +4670,10 @@ lodash.endswith@^4.2.1: version "4.2.1" resolved "https://registry.yarnpkg.com/lodash.endswith/-/lodash.endswith-4.2.1.tgz#fed59ac1738ed3e236edd7064ec456448b37bc09" +lodash.flow@^3.3.0: + version "3.5.0" + resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a" + lodash.isfunction@^3.0.8: version "3.0.9" resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz#06de25df4db327ac931981d1bdb067e5af68d051" @@ -5988,6 +6017,10 @@ punycode@^2.1.0: version "2.1.1" resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec" +pure-color@^1.2.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e" + q@^1.1.2: version "1.5.1" resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" @@ -6080,6 +6113,15 @@ react-autowhatever@^10.1.2: react-themeable "^1.1.0" section-iterator "^2.0.0" +react-base16-styling@^0.6.0: + version "0.6.0" + resolved "https://registry.yarnpkg.com/react-base16-styling/-/react-base16-styling-0.6.0.tgz#ef2156d66cf4139695c8a167886cb69ea660792c" + dependencies: + base16 "^1.0.0" + lodash.curry "^4.0.1" + lodash.flow "^3.3.0" + pure-color "^1.2.0" + react-dev-utils@^5.0.2: version "5.0.3" resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-5.0.3.tgz#92f97668f03deb09d7fa11ea288832a8c756e35e" @@ -6124,17 +6166,19 @@ react-event-listener@^0.6.2: prop-types "^15.6.0" warning "^4.0.1" -react-inspector@2.3.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-2.3.0.tgz#fc9c1d38ab687fc0d190dcaf133ae40158968fc8" - dependencies: - babel-runtime "^6.26.0" - is-dom "^1.0.9" - react-is@^16.5.2: version "16.5.2" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.5.2.tgz#e2a7b7c3f5d48062eb769fcb123505eb928722e3" +react-json-view@1.19.1: + version "1.19.1" + resolved "https://registry.yarnpkg.com/react-json-view/-/react-json-view-1.19.1.tgz#95d8e59e024f08a25e5dc8f076ae304eed97cf5c" + dependencies: + flux "^3.1.3" + react-base16-styling "^0.6.0" + react-lifecycles-compat "^3.0.4" + react-textarea-autosize "^6.1.0" + react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" @@ -6220,6 +6264,12 @@ react-test-renderer@^16.4.2: react-is "^16.5.2" schedule "^0.5.0" +react-textarea-autosize@^6.1.0: + version "6.1.0" + resolved "http://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-6.1.0.tgz#df91387f8a8f22020b77e3833c09829d706a09a5" + dependencies: + prop-types "^15.6.0" + react-themeable@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/react-themeable/-/react-themeable-1.1.0.tgz#7d4466dd9b2b5fa75058727825e9f152ba379a0e"