Merge pull request #306 from open-rpc/feat/json-schema-to-react-tree

feat: add json schema to react tree to better visualize json schema

Author: shanejonas

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 build
 coverage
+*.tgz

jest.config.js

@@ -6,5 +6,8 @@ module.exports = {
   "rootDir": "./src",
   "testEnvironment": "jsdom",
   "testPathIgnorePatterns": ["./build"],
-  "preset": "ts-jest"
-}
+  "preset": "ts-jest",
+  "moduleNameMapper": {
+    "\\.(css|less|sass|scss)$": "jest-transform-css"
+  }
+}

package-lock.json

@@ -5,17 +5,20 @@
   "main": "build/index.js",
   "scripts": {
     "lint": "tslint --fix -p .",
-    "build": "tsc",
+    "build": "tsc && cp src/ContentDescriptor/ContentDescriptor.css build/ContentDescriptor/",
     "test": "npm run lint && jest --coverage"
   },
   "author": "",
   "license": "Apache-2.0",
   "dependencies": {
-    "@material-ui/core": "^4.7.1",
-    "@material-ui/icons": "^4.5.1",
+    "@material-ui/core": "^4.9.8",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.47",
     "@material-ui/styles": "^4.7.1",
     "@open-rpc/examples": "^1.3.3",
+    "@xops.net/json-schema-to-react-tree": "^1.0.2",
     "hash-color-material": "^1.1.3",
+    "jest-transform-css": "^2.0.0",
     "json-schema": "^0.2.3",
     "lodash": "^4.17.15",
     "react": "^16.12.0",

package.json

@@ -0,0 +1,16 @@
+.MuiExpansionPanelSummary-expandIcon.Mui-expanded {
+  transform: rotate(0deg) !important;
+}
+.MuiExpansionPanelSummary-expandIcon {
+  order: -1;
+  transform: rotate(-90deg) !important;
+  margin-right: 0px !important;
+}
+
+.MuiExpansionPanelSummary-content {
+  align-items: center;
+}
+
+.MuiExpansionPanelSummary-root {
+  padding: 0 24px 0 0px !important;
+}

src/ContentDescriptor/ContentDescriptor.css

@@ -6,7 +6,9 @@ import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
 import JSONSchema from "../JSONSchema/JSONSchema";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import ReactMarkdown from "react-markdown";
+import JSONSchemaTree from "@xops.net/json-schema-to-react-tree";
 import { ContentDescriptorObject } from "@open-rpc/meta-schema";
+import "./ContentDescriptor.css";
 
 const styles = (theme: Theme) => ({
   description: {
@@ -47,7 +49,7 @@ class ContentDescriptor extends Component<IProps> {
         <ExpansionPanelSummary
           expandIcon={(!contentDescriptor.name || hideIcon) ? null : <ExpandMoreIcon />}
           style={{ justifyContent: "space-between" }}>
-          <div style={{ display: "flex", justifyContent: "space-between", width: "100%", height: "100%" }}>
+          <div style={{ display: "flex", justifyContent: "space-between", width: "100%", height: "100%", alignItems: "center" }}>
             <Typography className={classes.heading}>{contentDescriptor.name}</Typography>
             <Typography className={classes.secondaryHeading}>{contentDescriptor.summary}</Typography>
             {hideRequired ? null : <Typography className={classes.secondaryHeading}>
@@ -63,7 +65,7 @@ class ContentDescriptor extends Component<IProps> {
             {contentDescriptor.schema &&
               <>
                 <Typography variant="body1" color="primary">schema</Typography>
-                <JSONSchema schema={contentDescriptor.schema} />
+                <JSONSchemaTree schema={contentDescriptor.schema} />
               </>
             }
           </>

src/ContentDescriptor/ContentDescriptor.tsx

@@ -201,9 +201,7 @@ it("renders schema methods result", () => {
     ],
   };
   ReactDOM.render(<Methods schema={schema as any} disableTransitionProps={true} />, div);
-  expect(div.innerHTML.includes("name")).toBe(true);
-  expect(div.innerHTML.includes("tag")).toBe(true);
-  expect(div.innerHTML.includes("id")).toBe(true);
+  expect(div.innerHTML.includes("Object")).toBe(true);
   ReactDOM.unmountComponentAtNode(div);
 });
 
@@ -273,9 +271,6 @@ it("renders schema methods tags", () => {
     ],
   };
   ReactDOM.render(<Methods schema={schema as any} disableTransitionProps={true} />, div);
-  expect(div.innerHTML.includes("tag3")).toBe(true);
-  expect(div.innerHTML.includes("tag4")).toBe(true);
-  expect(div.innerHTML.includes("salad")).toBe(true);
-  expect(div.innerHTML.includes("mytag")).toBe(true);
+  expect(div.innerHTML.includes("Object")).toBe(true);
   ReactDOM.unmountComponentAtNode(div);
 });

src/Methods/Methods.test.tsx

@@ -16,7 +16,7 @@ const styles = (theme: Theme) => ({
     padding: theme.spacing(2),
   },
   tableEnd: {
-    paddingRight: `${theme.spacing(20)}px !important`,
+    paddingLeft: theme.spacing(3),
   },
   tableStart: {
     paddingLeft: theme.spacing(3),

src/Params/Params.tsx

@@ -4,7 +4,7 @@ import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 import ReactMarkdown from "react-markdown";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
-import { Typography, ExpansionPanelSummary, ExpansionPanelDetails, ExpansionPanel } from "@material-ui/core";
+import { Typography, ExpansionPanelSummary, ExpansionPanelDetails, ExpansionPanel, Grid } from "@material-ui/core";
 import { ServerObject } from "@open-rpc/meta-schema";
 import ReactJson from "react-json-view";
 import ExpansionTable from "../ExpansionTable/ExpansionTable";
@@ -54,11 +54,9 @@ class Servers extends Component<IProps> {
                     defaultExpanded={uiSchema && uiSchema.servers["ui:defaultExpanded"]} key={i}>
                     <ExpansionPanelSummary
                       style={{ justifyContent: "space-between" }} key="servers-header" expandIcon={<ExpandMoreIcon />}>
-                      <div style={{ display: "flex", justifyContent: "space-between", width: "100%", height: "100%" }}>
-                        <Typography className={classes.heading}>{server.name}</Typography>
-                        <Typography className={classes.secondaryHeading}>{server.url}</Typography>
-                        <Typography className={classes.secondaryHeading}>{server.summary}</Typography>
-                      </div>
+                      <Typography className={classes.heading}>{server.name}</Typography>
+                      <Typography className={classes.secondaryHeading}>{server.url}</Typography>
+                      <Typography className={classes.secondaryHeading}>{server.summary}</Typography>
                     </ExpansionPanelSummary>
                     <ExpansionPanelDetails style={{ display: "block" }} key="servers-body">
                       {server.description &&