feat: Add method definitions and data to useComponentDoc

newrelic · Jun 3, 2020 · d4d0180 · d4d0180
1 parent e3fc863
commit d4d0180
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 11 deletions.
diff --git a/src/hooks/useComponentDoc.js b/src/hooks/useComponentDoc.js
@@ -13,16 +13,34 @@ const useComponentDoc = (componentName) => {
   if (typeof window === 'undefined') global.window = {};
 
   return useMemo(() => {
-    const component = window?.__NR1_SDK__?.default?.[componentName];
+    const sdk = window.__NR1_SDK__?.default ?? {};
+    const component = sdk[componentName];
+
+    if (!component) {
+      return null;
+    }
+
+    const componentDocs = component?.__docs__;
 
     return {
-      description: component?.__docs__.text,
-      examples: component?.__docs__.tags.examples ?? [],
-      methods: Object.getOwnPropertyNames(component).filter(
-        (member) =>
-          !IGNORED_METHODS.includes(member) &&
-          typeof component[member] === 'function'
-      ),
+      description: componentDocs?.text,
+      examples: componentDocs?.tags.examples ?? [],
+      methods: Object.getOwnPropertyNames(component)
+        .filter(
+          (member) =>
+            !IGNORED_METHODS.includes(member) &&
+            typeof component[member] === 'function'
+        )
+        .map((member) => {
+          const methodDocs = component[member].__docs__;
+
+          return {
+            name: `${componentName}.${member}`,
+            description: methodDocs?.text,
+            returnValue: methodDocs?.tags.return,
+            params: methodDocs?.tags.param,
+          };
+        }),
     };
   }, [componentName, window?.__NR1_SDK__]);
 };

diff --git a/src/templates/ReferenceTemplate.js b/src/templates/ReferenceTemplate.js
@@ -23,9 +23,11 @@ const ReferenceTemplate = ({ data }) => {
   const { mdx } = data;
   const { frontmatter } = mdx;
   const { title, description, component } = frontmatter;
-  const { examples, description: componentDescription } = useComponentDoc(
-    component
-  );
+  const {
+    examples,
+    description: componentDescription,
+    methods,
+  } = useComponentDoc(component);
 
   return (
     <Layout>
@@ -59,6 +61,14 @@ const ReferenceTemplate = ({ data }) => {
               </div>
             </section>
           )}
+          {methods.length > 0 && (
+            <section className={styles.section}>
+              <h2>Methods</h2>
+              {methods.map((method, i) => (
+                <h3 key={i}>{method.name}</h3>
+              ))}
+            </section>
+          )}
         </main>
       </Container>
     </Layout>