[docs] Replace react-inspect with custom TreeView implementation

docs/package.json

@@ -98,7 +98,6 @@
     "react-draggable": "^3.0.5",
     "react-final-form": "^6.3.0",
     "react-frame-component": "^4.1.1",
-    "react-inspector": "^3.0.2",
     "react-number-format": "^4.0.8",
     "react-redux": "^7.1.1",
     "react-router": "^5.0.0",

docs/src/pages/customization/default-theme/DefaultTheme.js

@@ -2,11 +2,150 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import url from 'url';
-import Inspector from 'react-inspector';
-import { withStyles, createMuiTheme, useTheme } from '@material-ui/core/styles';
+import ExpandIcon from '@material-ui/icons/ExpandMore';
+import CollapseIcon from '@material-ui/icons/ChevronRight';
+import TreeView from '@material-ui/lab/TreeView';
+import TreeItem from '@material-ui/lab/TreeItem';
+import clsx from 'clsx';
+import { makeStyles, withStyles, createMuiTheme, useTheme } from '@material-ui/core/styles';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 
+/**
+ * @type {React.Context<keyof object>}
+ */
+const ObjectContext = React.createContext('$ROOT');
+
+/**
+ * @param {unknown} value
+ */
+function useType(value) {
+  if (Array.isArray(value)) {
+    return 'array';
+  }
+  if (value === null) {
+    return 'null';
+  }
+
+  return typeof value;
+}
+
+/**
+ *
+ * @param {unknown} value
+ * @param {ReturnType<typeof useType>} type
+ */
+function useLabel(value, type) {
+  switch (type) {
+    case 'array':
+      return `Array(${value.length})`;
+    case 'null':
+      return 'null';
+    case 'undefined':
+      return 'undefined';
+    case 'function':
+      return `f ${value.name}()`;
+    case 'object':
+      return 'Object';
+    case 'string':
+      return `"${value}"`;
+    case 'symbol':
+      return `Symbol(${String(value)})`;
+    case 'bigint':
+    case 'boolean':
+    case 'number':
+    default:
+      return String(value);
+  }
+}
+
+const useTreeLabelStyles = makeStyles({
+  objectKey: {
+    color: 'rgb(227, 110, 236)',
+  },
+  objectValue: {},
+  'type-function': {
+    fontStyle: 'italic',
+  },
+  'type-string': {
+    color: 'rgb(233, 63, 59)',
+  },
+  'type-boolean': {
+    color: 'rgb(153, 128, 255);',
+  },
+  'type-number': {
+    color: 'rgb(153, 128, 255);',
+  },
+});
+
+function TreeLabel({ objectKey, objectValue }) {
+  const type = useType(objectValue);
+  const label = useLabel(objectValue, type);
+  const classes = useTreeLabelStyles();
+
+  return (
+    <React.Fragment>
+      <span className={classes.objectKey}>{objectKey}: </span>
+      <span className={clsx(classes.objectValue, classes[`type-${type}`])}>{label}</span>
+    </React.Fragment>
+  );
+}
+TreeLabel.propTypes = { objectKey: PropTypes.any, objectValue: PropTypes.any };
+
+function ObjectTreeItem(props) {
+  const { objectKey, objectValue } = props;
+
+  const keyPrefix = React.useContext(ObjectContext);
+
+  if (
+    (objectValue !== null && typeof objectValue === 'object') ||
+    typeof objectValue === 'function'
+  ) {
+    const children = Object.keys(objectValue).map(key => {
+      return <ObjectTreeItem key={key} objectKey={key} objectValue={objectValue[key]} />;
+    });
+
+    if (objectKey === undefined) {
+      return (
+        <TreeView defaultCollapseIcon={<ExpandIcon />} defaultExpandIcon={<CollapseIcon />}>
+          {children}
+        </TreeView>
+      );
+    }
+
+    return (
+      <TreeItem
+        nodeId={`${keyPrefix}-${objectKey}`}
+        label={<TreeLabel objectKey={objectKey} objectValue={objectValue} />}
+      >
+        <ObjectContext.Provider value={`${keyPrefix}-${objectKey}`}>
+          {children}
+        </ObjectContext.Provider>
+      </TreeItem>
+    );
+  }
+
+  return (
+    <TreeItem
+      nodeId={`${keyPrefix}-${objectKey}`}
+      label={<TreeLabel objectKey={objectKey} objectValue={objectValue} />}
+    />
+  );
+}
+ObjectTreeItem.propTypes = { objectKey: PropTypes.any, objectValue: PropTypes.any };
+
+function Inspector(props) {
+  const { data } = props;
+
+  return <ObjectTreeItem objectValue={data} />;
+}
+
+Inspector.propTypes = {
+  data: PropTypes.any,
+  /* expandLevel: PropTypes.number,
+  expandPaths: PropTypes.arrayOf(PropTypes.string), */
+};
+
 const styles = theme => ({
   root: {
     padding: theme.spacing(2),

yarn.lock

@@ -8151,11 +8151,6 @@ is-directory@^0.3.1:
   resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
   integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
 
-is-dom@^1.0.9:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/is-dom/-/is-dom-1.0.9.tgz#483832d52972073de12b9fe3f60320870da8370d"
-  integrity sha1-SDgy1SlyBz3hK5/j9gMghw2oNw0=
-
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -11815,7 +11810,7 @@ [email protected]:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -12183,15 +12178,6 @@ react-input-autosize@^2.2.1:
   dependencies:
     prop-types "^15.5.8"
 
-react-inspector@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-3.0.2.tgz#c530a06101f562475537e47df428e1d7aff16ed8"
-  integrity sha512-PSR8xDoGFN8R3LKmq1NT+hBBwhxjd9Qwz8yKY+5NXY/CHpxXHm01CVabxzI7zFwFav/M3JoC/Z0Ro2kSX6Ef2Q==
-  dependencies:
-    babel-runtime "^6.26.0"
-    is-dom "^1.0.9"
-    prop-types "^15.6.1"
-
 [email protected]:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"