chore(debug-plugin): migrate to a new maintained JSON Viewer (#9566)

Co-authored-by: Joey Clover <joey@popos.local>

packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx

@@ -6,53 +6,41 @@
  */
 
 import React from 'react';
-import BrowserOnly from '@docusaurus/BrowserOnly';
+import {JsonView} from 'react-json-view-lite';
 import type {Props} from '@theme/DebugJsonView';
-import type {ReactJsonViewProps} from '@microlink/react-json-view';
+import styles from './styles.module.css';
 
-// Avoids "react-json-view" displaying "root"
-const RootName = null;
-
-// Seems ReactJson does not work with SSR
-// https://github.com/mac-s-g/react-json-view/issues/121
-function BrowserOnlyReactJson(props: ReactJsonViewProps) {
-  return (
-    <BrowserOnly>
-      {() => {
-        const {default: ReactJson} =
-          // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
-          require('@microlink/react-json-view') as typeof import('@microlink/react-json-view');
-        return <ReactJson {...props} />;
-      }}
-    </BrowserOnly>
-  );
-}
+const paraisoStyles = {
+  container: styles.containerParaiso!,
+  basicChildStyle: styles.basicElementParaiso!,
+  label: styles.labelParaiso!,
+  nullValue: styles.nullValueParaiso!,
+  undefinedValue: styles.undefinedValueParaiso!,
+  stringValue: styles.stringValueParaiso!,
+  booleanValue: styles.booleanValueParaiso!,
+  numberValue: styles.numberValueParaiso!,
+  otherValue: styles.otherValueParaiso!,
+  punctuation: styles.punctuationParaiso!,
+  collapseIcon: styles.collapseIconParaiso!,
+  expandIcon: styles.expandIconParaiso!,
+  collapsedContent: styles.collapseContentParaiso!,
+};
 
 export default function DebugJsonView({
   src,
   collapseDepth,
 }: Props): JSX.Element {
   return (
-    <BrowserOnlyReactJson
-      src={src as object}
-      style={{
-        marginTop: '10px',
-        padding: '10px',
-        borderRadius: '4px',
-        backgroundColor: '#292a2b',
+    <JsonView
+      data={src as object}
+      shouldExpandNode={(idx, value) => {
+        if (Array.isArray(value)) {
+          return value.length < 5;
+        }
+
+        return collapseDepth !== undefined && idx < collapseDepth;
       }}
-      name={RootName}
-      theme="paraiso"
-      shouldCollapse={(field) =>
-        // By default, we collapse the json for performance reasons
-        // See https://github.com/mac-s-g/react-json-view/issues/235
-        // Non-root elements that are larger than 50 fields are collapsed
-        field.name !== RootName && Object.keys(field.src).length > 50
-      }
-      collapsed={collapseDepth}
-      groupArraysAfterLength={5}
-      enableClipboard={false}
-      displayDataTypes={false}
+      style={paraisoStyles}
     />
   );
 }

packages/docusaurus-plugin-debug/src/theme/DebugJsonView/styles.module.css

@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.containerParaiso {
+  font-family: monospace;
+  cursor: default;
+  background-color: rgb(41 42 43);
+  position: relative;
+  margin-top: 10px;
+  padding: 10px;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.basicElementParaiso {
+  color: white;
+  padding: 3px 5px 3px 20px;
+  border-left: 1px solid rgb(79 66 76);
+}
+
+.labelParaiso {
+  color: rgb(231 233 219);
+  letter-spacing: 0.5px;
+  margin-right: 3px;
+}
+
+.nullValueParaiso {
+  display: inline-block;
+  color: rgb(254 196 24);
+  font-size: 11px;
+  font-weight: bold;
+  background-color: rgb(79 66 76);
+  padding: 1px 2px;
+  border-radius: 3px;
+  text-transform: uppercase;
+}
+
+.undefinedValueParaiso {
+  color: rgb(141 134 135);
+}
+
+.stringValueParaiso {
+  color: rgb(249 155 21);
+}
+
+.booleanValueParaiso {
+  color: rgb(129 91 164);
+}
+
+.numberValueParaiso {
+  color: rgb(233 107 168);
+}
+
+.otherValueParaiso {
+  color: white;
+}
+
+.punctuationParaiso {
+  color: white;
+}
+
+.expandIconParaiso {
+  display: inline-block;
+  color: rgb(129 91 164);
+  font-size: 22px;
+  vertical-align: baseline;
+  margin-right: 3px;
+  line-height: 10px;
+}
+
+.collapseIconParaiso::after {
+  content: '\25BE';
+}
+
+.collapseIconParaiso {
+  display: inline-block;
+  color: rgb(6 182 239);
+  font-size: 22px;
+  vertical-align: baseline;
+  margin-right: 3px;
+  line-height: 10px;
+}
+
+.expandIconParaiso::after {
+  content: '\25B8';
+}
+
+.collapseContentParaiso {
+  color: rgb(249 155 21);
+  font-size: 18px;
+  line-height: 10px;
+  cursor: pointer;
+}
+
+.collapseContentParaiso::after {
+  content: '...';
+}