feat: add method plugin + fix dark theme descriptions

Author: shanejonas

package-lock.json

@@ -16,7 +16,7 @@
     "@open-rpc/examples": "^1.3.3",
     "hash-color-material": "^1.1.3",
     "json-schema": "^0.2.3",
-    "lodash": "^4.17.11",
+    "lodash": "^4.17.15",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-json-view": "^1.19.1",
@@ -28,6 +28,7 @@
     "@types/json-schema": "^7.0.3",
     "@types/lodash": "^4.14.123",
     "@types/node": "^12.0.2",
+    "@types/react": "^16.9.2",
     "@types/react-dom": "^16.8.3",
     "jest": "^24.5.0",
     "json-schema-ref-parser": "^7.0.1",

package.json

@@ -9,6 +9,9 @@ import ReactMarkdown from "react-markdown";
 import { ContentDescriptorObject } from "@open-rpc/meta-schema";
 
 const styles = (theme: Theme) => ({
+  description: {
+    color: theme.palette.text.primary,
+  },
   heading: {
     flexBasis: "33.33%",
     flexShrink: 0,
@@ -52,7 +55,9 @@ class ContentDescriptor extends Component<IProps> {
         </ExpansionPanelSummary>
         <ExpansionPanelDetails style={{ display: "block" }}>
           <div>
-            {contentDescriptor.description && <ReactMarkdown source={contentDescriptor.description} />}
+            {contentDescriptor.description &&
+              <ReactMarkdown source={contentDescriptor.description} className={classes.description} />
+            }
             {contentDescriptor.schema &&
               <>
                 <Typography variant="body1" color="primary">schema</Typography>

src/ContentDescriptor/ContentDescriptor.tsx

@@ -1,14 +1,15 @@
 import React from "react";
 import Info from "./Info/Info";
 import Servers from "./Servers/Servers";
-import Methods from "./Methods/Methods";
+import Methods, { IMethodPluginProps } from "./Methods/Methods";
 import ContentDescriptors from "./ContentDescriptors/ContentDescriptors";
 import { OpenRPC } from "@open-rpc/meta-schema";
 
 interface IProps {
   schema: OpenRPC;
   uiSchema?: any;
   reactJsonOptions?: any;
+  methodPlugins?: Array<React.FC<IMethodPluginProps>>;
 }
 
 export default class Documentation extends React.Component<IProps> {
@@ -24,7 +25,12 @@ export default class Documentation extends React.Component<IProps> {
       <>
         <Info schema={schema} />
         <Servers servers={schema.servers} reactJsonOptions={reactJsonOptions} />
-        <Methods schema={schema} uiSchema={uiSchema} reactJsonOptions={reactJsonOptions} />
+        <Methods
+          schema={schema}
+          uiSchema={uiSchema}
+          reactJsonOptions={reactJsonOptions}
+          methodPlugins={this.props.methodPlugins}
+        />
         <ContentDescriptors schema={schema} uiSchema={uiSchema}></ContentDescriptors>
       </>
     );

src/Documentation.tsx

@@ -1,20 +1,26 @@
 import React, { Component } from "react";
 import Grid from "@material-ui/core/Grid";
-import { Card, CardContent } from "@material-ui/core";
+import { Card, CardContent, Theme, withStyles, WithStyles } from "@material-ui/core";
 import ReactJson from "react-json-view";
 import ReactMarkdown from "react-markdown";
 import { MethodObject, ExampleObject, ExamplePairingObject } from "@open-rpc/meta-schema";
 import _ from "lodash";
 
-interface IProps {
+interface IProps extends WithStyles<typeof styles> {
   examplePosition?: number;
   method?: MethodObject;
   reactJsonOptions?: any;
 }
 
-export default class ExamplePairing extends Component<IProps, {}> {
+const styles = (theme: Theme) => ({
+  description: {
+    color: theme.palette.text.primary,
+  },
+});
+
+class ExamplePairing extends Component<IProps, {}> {
   public render() {
-    const { examplePosition, method } = this.props;
+    const { examplePosition, method, classes } = this.props;
     if (_.isUndefined(examplePosition)) {
       return null;
     }
@@ -28,7 +34,7 @@ export default class ExamplePairing extends Component<IProps, {}> {
     return (
       <Grid container spacing={24}>
         <Grid item xs={12}>
-          <ReactMarkdown source={example.description} />
+          <ReactMarkdown source={example.description} className={classes.description}/>
         </Grid>
         <Grid item xs={6}>
           <Card>
@@ -57,3 +63,5 @@ export default class ExamplePairing extends Component<IProps, {}> {
     );
   }
 }
+
+export default withStyles(styles)(ExamplePairing);

src/ExamplePairing/ExamplePairing.tsx

@@ -14,6 +14,7 @@ const styles = (theme: Theme) => ({
     margin: theme.spacing.unit,
   },
   description: {
+    color: theme.palette.text.primary,
     padding: `${theme.spacing.unit}px 0 ${theme.spacing.unit}px 0`,
   },
 });
@@ -41,7 +42,7 @@ class Info extends Component<IProps> {
             clickable
             color="primary"
             label={info.license.name} />}
-        {info.description && <ReactMarkdown source={info.description}/>}
+        {info.description && <ReactMarkdown className={classes.description} source={info.description}/>}
         {info.termsOfService &&
           <Button className={classes.button} variant="contained" href={info.termsOfService}>Terms Of Service</Button>}
         {info.contact &&

src/Info/Info.tsx

@@ -17,6 +17,9 @@ import Servers from "../Servers/Servers";
 import ReactJson from "react-json-view";
 
 const styles = (theme: Theme) => ({
+  description: {
+    color: theme.palette.text.primary,
+  },
   heading: {
     flexBasis: "33.33%",
     flexShrink: 0,
@@ -58,7 +61,7 @@ class Links extends Component<IProps> {
                     </div>
                   </ExpansionPanelSummary>
                   <ExpansionPanelDetails style={{ display: "block" }} key="links-body">
-                    {link.description && <ReactMarkdown source={link.description} />}
+                    {link.description && <ReactMarkdown source={link.description} className={classes.description} />}
                     {link.params && <Typography variant="h6" gutterBottom>Params</Typography>}
                     {link.params && <ReactJson src={link.params} {...reactJsonOptions} />}
                     {link.server &&

src/Links/Links.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import Methods from "./Methods";
+import Methods, { IMethodPluginProps } from "./Methods";
 import { OpenRPC } from "@open-rpc/meta-schema";
 
 it("renders without crashing", () => {
@@ -44,6 +44,29 @@ it("renders schema methods name", () => {
   ReactDOM.unmountComponentAtNode(div);
 });
 
+it("renders schema plugin", () => {
+  const div = document.createElement("div");
+  const schema = {
+    methods: [
+      {
+        name: "get_pet",
+      },
+    ],
+  };
+  const TestComponent: React.FC<IMethodPluginProps> = (props) => {
+    return (
+      <div>
+        Plugin Test
+      </div>
+    );
+  };
+
+  ReactDOM.render(<Methods schema={schema as any} methodPlugins={[TestComponent]}/>, div);
+  expect(div.innerHTML.includes("get_pet")).toBe(true);
+  expect(div.innerHTML.includes("Plugin Test")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
 it("renders schema methods summary", () => {
   const div = document.createElement("div");
   const schema = {

src/Methods/Methods.test.tsx

@@ -22,6 +22,9 @@ import Links from "../Links/Links";
 import Tags from "../Tags/Tags";
 
 const styles = (theme: Theme) => ({
+  description: {
+    color: theme.palette.text.primary,
+  },
   heading: {
     flexBasis: "33.33%",
     flexShrink: 0,
@@ -38,10 +41,15 @@ const styles = (theme: Theme) => ({
   },
 });
 
+export interface IMethodPluginProps {
+  openrpcMethodObject: MethodObject;
+}
+
 interface IProps extends WithStyles<typeof styles> {
   schema?: OpenRPC;
   uiSchema?: any;
   reactJsonOptions?: object;
+  methodPlugins?: Array<React.FC<IMethodPluginProps>>;
 }
 
 class Methods extends Component<IProps> {
@@ -70,7 +78,7 @@ class Methods extends Component<IProps> {
             }
             {method.description &&
               <ExpansionPanelDetails key="description">
-                <ReactMarkdown source={method.description} />
+                <ReactMarkdown source={method.description} className={classes.description}/>
               </ExpansionPanelDetails>
             }
             {method.params && method.params.length > 0 &&
@@ -118,6 +126,15 @@ class Methods extends Component<IProps> {
                 <Links links={method.links} reactJsonOptions={this.props.reactJsonOptions} />
               </ExpansionPanelDetails>
             }
+            {this.props.methodPlugins && this.props.methodPlugins.length > 0 &&
+              <ExpansionPanelDetails key="method-plugins">
+                {this.props.methodPlugins.map((CompDef: any) => {
+                  return (
+                    <CompDef openrpcMethodObject={method} />
+                  );
+                })}
+              </ExpansionPanelDetails>
+            }
           </ExpansionPanel>
         ))}
       </div>

src/Methods/Methods.tsx

@@ -10,6 +10,9 @@ import ReactJson from "react-json-view";
 import ExpansionTable from "../ExpansionTable/ExpansionTable";
 
 const styles = (theme: Theme) => ({
+  description: {
+    color: theme.palette.text.primary,
+  },
   heading: {
     flexBasis: "33.33%",
     flexShrink: 0,
@@ -58,7 +61,9 @@ class Servers extends Component<IProps> {
                       </div>
                     </ExpansionPanelSummary>
                     <ExpansionPanelDetails style={{ display: "block" }} key="servers-body">
-                      {server.description && <ReactMarkdown source={server.description} />}
+                      {server.description &&
+                        <ReactMarkdown source={server.description} className={classes.description} />
+                      }
                       {server.variables &&
                         <Typography variant="h6" gutterBottom className={classes.paramsMargin}>Variables</Typography>}
                       {server.variables && <ReactJson src={server.variables} {...reactJsonOptions} />}