From 29e70b7e5c729a516f6cd2a639bf5da9608b5c30 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Wed, 3 Jun 2020 15:10:13 -0700
Subject: [PATCH 1/8] feat: Add AccountsQuery component

---
 src/data/sidenav.json                            | 4 ++++
 src/markdown-pages/components/accounts-query.mdx | 7 +++++++
 2 files changed, 11 insertions(+)
 create mode 100644 src/markdown-pages/components/accounts-query.mdx

diff --git a/src/data/sidenav.json b/src/data/sidenav.json
index c449a3c38..0c93e02e0 100644
--- a/src/data/sidenav.json
+++ b/src/data/sidenav.json
@@ -115,6 +115,10 @@
         "displayName": "AccountStorageMutation",
         "url": "/components/account-storage-mutation"
       },
+      {
+        "displayName": "AccountsQuery",
+        "url": "/components/accounts-query"
+      },
       {
         "displayName": "NerdGraphQuery",
         "url": "/components/nerd-graph-query"
diff --git a/src/markdown-pages/components/accounts-query.mdx b/src/markdown-pages/components/accounts-query.mdx
new file mode 100644
index 000000000..7a0ac5744
--- /dev/null
+++ b/src/markdown-pages/components/accounts-query.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/accounts-query'
+title: 'AccountsQuery'
+description: 'A AccountsQuery component!'
+component: 'AccountsQuery'
+template: 'ReferenceTemplate'
+---

From e3fc8636578b2a511c64b157fbb0308ac15c0f81 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Wed, 3 Jun 2020 15:52:01 -0700
Subject: [PATCH 2/8] feat: Add a useComponentDoc hook. Update
 ReferenceTemplate to use it

---
 src/hooks/useComponentDoc.js       | 30 ++++++++++++++++++
 src/templates/ReferenceTemplate.js | 50 +++++++++++++-----------------
 2 files changed, 52 insertions(+), 28 deletions(-)
 create mode 100644 src/hooks/useComponentDoc.js

diff --git a/src/hooks/useComponentDoc.js b/src/hooks/useComponentDoc.js
new file mode 100644
index 000000000..45369a939
--- /dev/null
+++ b/src/hooks/useComponentDoc.js
@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+
+const IGNORED_METHODS = [
+  'prototype',
+  'length',
+  'name',
+  'propTypes',
+  'getDerivedStateFromProps',
+  'defaultProps',
+];
+
+const useComponentDoc = (componentName) => {
+  if (typeof window === 'undefined') global.window = {};
+
+  return useMemo(() => {
+    const component = window?.__NR1_SDK__?.default?.[componentName];
+
+    return {
+      description: component?.__docs__.text,
+      examples: component?.__docs__.tags.examples ?? [],
+      methods: Object.getOwnPropertyNames(component).filter(
+        (member) =>
+          !IGNORED_METHODS.includes(member) &&
+          typeof component[member] === 'function'
+      ),
+    };
+  }, [componentName, window?.__NR1_SDK__]);
+};
+
+export default useComponentDoc;
diff --git a/src/templates/ReferenceTemplate.js b/src/templates/ReferenceTemplate.js
index a7d723661..4f85c8aec 100644
--- a/src/templates/ReferenceTemplate.js
+++ b/src/templates/ReferenceTemplate.js
@@ -8,10 +8,9 @@ import ComponentExample from '../components/ComponentExample';
 import Layout from '../components/Layout';
 import Sidebar from '../components/Sidebar';
 import SEO from '../components/Seo';
-
 import pages from '../data/sidenav.json';
-
 import styles from './ReferenceTemplate.module.scss';
+import useComponentDoc from '../hooks/useComponentDoc';
 
 const previewStyles = {
   Spinner: {
@@ -24,10 +23,9 @@ const ReferenceTemplate = ({ data }) => {
   const { mdx } = data;
   const { frontmatter } = mdx;
   const { title, description, component } = frontmatter;
-
-  if (typeof window === 'undefined') global.window = {};
-  const componentData = window?.__NR1_SDK__?.default?.[component];
-  const examples = componentData?.__docs__.tags.examples || [];
+  const { examples, description: componentDescription } = useComponentDoc(
+    component
+  );
 
   return (
     <Layout>
@@ -42,28 +40,24 @@ const ReferenceTemplate = ({ data }) => {
         <main className={styles.content}>
           <h1>{component}</h1>
 
-          {componentData && componentData.__docs__ && (
-            <>
-              <section className={cx(styles.section, styles.description)}>
-                <ReactMarkdown source={componentData.__docs__.text} />
-              </section>
-              {examples.length > 0 && (
-                <section className={styles.section}>
-                  <h2>Examples</h2>
-                  <div>
-                    {examples.map((example, i) => (
-                      <ComponentExample
-                        key={i}
-                        useToastManager={component === 'Toast'}
-                        className={styles.componentExample}
-                        example={example}
-                        previewStyle={previewStyles[component]}
-                      />
-                    ))}
-                  </div>
-                </section>
-              )}
-            </>
+          <section className={cx(styles.section, styles.description)}>
+            <ReactMarkdown source={componentDescription} />
+          </section>
+          {examples.length > 0 && (
+            <section className={styles.section}>
+              <h2>Examples</h2>
+              <div>
+                {examples.map((example, i) => (
+                  <ComponentExample
+                    key={i}
+                    useToastManager={component === 'Toast'}
+                    className={styles.componentExample}
+                    example={example}
+                    previewStyle={previewStyles[component]}
+                  />
+                ))}
+              </div>
+            </section>
           )}
         </main>
       </Container>

From d4d0180b24267465647a5598750a6ca5f2fda796 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Wed, 3 Jun 2020 16:26:28 -0700
Subject: [PATCH 3/8] feat: Add method definitions and data to useComponentDoc

---
 src/hooks/useComponentDoc.js       | 34 +++++++++++++++++++++++-------
 src/templates/ReferenceTemplate.js | 16 +++++++++++---
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/src/hooks/useComponentDoc.js b/src/hooks/useComponentDoc.js
index 45369a939..07907e50d 100644
--- 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
index 4f85c8aec..7b9b9500d 100644
--- 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>

From 9c7674de9885ab7d194419bb2e5c21407e93978c Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Wed, 3 Jun 2020 17:40:02 -0700
Subject: [PATCH 4/8] feat: Add a FunctionDefinition component and render the
 function def for a method

---
 src/components/FunctionDefinition.js          | 54 +++++++++++++++++++
 src/components/FunctionDefinition.module.scss | 35 ++++++++++++
 src/components/styles.scss                    | 11 ++++
 src/hooks/useComponentDoc.js                  |  2 +-
 src/templates/ReferenceTemplate.js            | 12 ++++-
 5 files changed, 111 insertions(+), 3 deletions(-)
 create mode 100644 src/components/FunctionDefinition.js
 create mode 100644 src/components/FunctionDefinition.module.scss

diff --git a/src/components/FunctionDefinition.js b/src/components/FunctionDefinition.js
new file mode 100644
index 000000000..e5ef1d7ef
--- /dev/null
+++ b/src/components/FunctionDefinition.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Markdown from 'react-markdown';
+import styles from './FunctionDefinition.module.scss';
+
+const ParamDescription = ({ children, ...props }) => (
+  <span {...props} className={styles.paramDescription}>
+    // {children}
+  </span>
+);
+
+ParamDescription.propTypes = {
+  children: PropTypes.node,
+};
+
+const FunctionDefinition = ({ params, returnValue }) => {
+  return (
+    <div className={styles.container}>
+      <span className={styles.keyword}>
+        {params.length > 0 ? 'function (' : 'function ()'}
+      </span>
+      {params.map((param, i) => (
+        <div key={i} className={styles.param}>
+          <span className={styles.paramName}>{param.name}: </span>
+          <span className={styles.type}>{param.type} </span>
+          <Markdown
+            source={param.description}
+            renderers={{
+              root: ParamDescription,
+            }}
+          />
+        </div>
+      ))}
+      {params.length > 0 && <span className={styles.keyword}>) </span>}
+      <span className={styles.keyword}>=> </span>
+      <span className={styles.type}>{returnValue.type}</span>
+    </div>
+  );
+};
+
+FunctionDefinition.propTypes = {
+  params: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      type: PropTypes.string,
+      description: PropTypes.string,
+    })
+  ),
+  returnValue: PropTypes.shape({
+    type: PropTypes.string.isRequired,
+  }),
+};
+
+export default FunctionDefinition;
diff --git a/src/components/FunctionDefinition.module.scss b/src/components/FunctionDefinition.module.scss
new file mode 100644
index 000000000..77a55047d
--- /dev/null
+++ b/src/components/FunctionDefinition.module.scss
@@ -0,0 +1,35 @@
+.container {
+  font-family: 'Menlo', 'Consolas', monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.line:not(:last-child) {
+  margin-bottom: 0.5rem;
+}
+
+.param {
+  margin-left: 1rem;
+}
+
+.paramName {
+  color: var(--color-neutrals-700);
+}
+
+.paramDescription {
+  color: var(--color-neutrals-500);
+
+  > p {
+    color: inherit;
+    display: inline;
+  }
+}
+
+.keyword {
+  color: var(--color-neutrals-600);
+}
+
+.type {
+  color: var(--color-green-6);
+  background: var(--color-green-1);
+}
diff --git a/src/components/styles.scss b/src/components/styles.scss
index 761195d09..89b4365dd 100644
--- a/src/components/styles.scss
+++ b/src/components/styles.scss
@@ -35,6 +35,17 @@
   --color-red-800: #390000;
   --color-red-900: #1b0000;
 
+  --color-green-1: #f1fdf2;
+  --color-green-2: #d1f7d9;
+  --color-green-3: #7fe898;
+  --color-green-4: #22e749;
+  --color-green-5: #00d100;
+  --color-green-6: #00a500;
+  --color-green-7: #008200;
+  --color-green-8: #004d00;
+  --color-green-9: #0d290a;
+  --color-green-10: #021200;
+
   --boxshadow: 0px 2.76726px 2.21381px rgba(0, 85, 90, 0.0168687),
     0px 6.6501px 5.32008px rgba(0, 85, 90, 0.0242336),
     0px 12.5216px 10.0172px rgba(0, 85, 90, 0.03),
diff --git a/src/hooks/useComponentDoc.js b/src/hooks/useComponentDoc.js
index 07907e50d..3e39bdfc7 100644
--- a/src/hooks/useComponentDoc.js
+++ b/src/hooks/useComponentDoc.js
@@ -37,7 +37,7 @@ const useComponentDoc = (componentName) => {
           return {
             name: `${componentName}.${member}`,
             description: methodDocs?.text,
-            returnValue: methodDocs?.tags.return,
+            returnValue: methodDocs?.tags.return?.[0] ?? { type: 'undefined' },
             params: methodDocs?.tags.param,
           };
         }),
diff --git a/src/templates/ReferenceTemplate.js b/src/templates/ReferenceTemplate.js
index 7b9b9500d..ffd9fa578 100644
--- a/src/templates/ReferenceTemplate.js
+++ b/src/templates/ReferenceTemplate.js
@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import cx from 'classnames';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import ReactMarkdown from 'react-markdown';
 import Container from '../components/Container';
 import ComponentExample from '../components/ComponentExample';
+import FunctionDefinition from '../components/FunctionDefinition';
 import Layout from '../components/Layout';
 import Sidebar from '../components/Sidebar';
 import SEO from '../components/Seo';
@@ -65,7 +66,14 @@ const ReferenceTemplate = ({ data }) => {
             <section className={styles.section}>
               <h2>Methods</h2>
               {methods.map((method, i) => (
-                <h3 key={i}>{method.name}</h3>
+                <Fragment key={i}>
+                  <h3>{method.name}</h3>
+                  <ReactMarkdown source={method.description} />
+                  <FunctionDefinition
+                    params={method.params}
+                    returnValue={method.returnValue}
+                  />
+                </Fragment>
               ))}
             </section>
           )}

From 6529f3fcc33da26c79bdf61ca91cee24d7507644 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Wed, 3 Jun 2020 17:47:18 -0700
Subject: [PATCH 5/8] feat: Style the method name and description

---
 src/components/FunctionDefinition.module.scss |  4 +--
 src/components/styles.scss                    | 31 +++++++++++++------
 src/templates/ReferenceTemplate.js            |  7 +++--
 src/templates/ReferenceTemplate.module.scss   | 12 +++++++
 4 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/src/components/FunctionDefinition.module.scss b/src/components/FunctionDefinition.module.scss
index 77a55047d..bf7751adc 100644
--- a/src/components/FunctionDefinition.module.scss
+++ b/src/components/FunctionDefinition.module.scss
@@ -30,6 +30,6 @@
 }
 
 .type {
-  color: var(--color-green-6);
-  background: var(--color-green-1);
+  color: var(--color-green-500);
+  background: var(--color-green-050);
 }
diff --git a/src/components/styles.scss b/src/components/styles.scss
index 89b4365dd..7fe6580af 100644
--- a/src/components/styles.scss
+++ b/src/components/styles.scss
@@ -35,16 +35,27 @@
   --color-red-800: #390000;
   --color-red-900: #1b0000;
 
-  --color-green-1: #f1fdf2;
-  --color-green-2: #d1f7d9;
-  --color-green-3: #7fe898;
-  --color-green-4: #22e749;
-  --color-green-5: #00d100;
-  --color-green-6: #00a500;
-  --color-green-7: #008200;
-  --color-green-8: #004d00;
-  --color-green-9: #0d290a;
-  --color-green-10: #021200;
+  --color-green-050: #f1fdf2;
+  --color-green-100: #d1f7d9;
+  --color-green-200: #7fe898;
+  --color-green-300: #22e749;
+  --color-green-400: #00d100;
+  --color-green-500: #00a500;
+  --color-green-600: #008200;
+  --color-green-700: #004d00;
+  --color-green-800: #0d290a;
+  --color-green-900: #021200;
+
+  --color-teal-050: #f1fbfc;
+  --color-teal-100: #d2f3f6;
+  --color-teal-200: #85e0e7;
+  --color-teal-300: #70ccd3;
+  --color-teal-400: #00b3c3;
+  --color-teal-500: #008c99;
+  --color-teal-600: #006c75;
+  --color-teal-700: #00484e;
+  --color-teal-800: #003539;
+  --color-teal-900: #002123;
 
   --boxshadow: 0px 2.76726px 2.21381px rgba(0, 85, 90, 0.0168687),
     0px 6.6501px 5.32008px rgba(0, 85, 90, 0.0242336),
diff --git a/src/templates/ReferenceTemplate.js b/src/templates/ReferenceTemplate.js
index ffd9fa578..f83351367 100644
--- a/src/templates/ReferenceTemplate.js
+++ b/src/templates/ReferenceTemplate.js
@@ -67,8 +67,11 @@ const ReferenceTemplate = ({ data }) => {
               <h2>Methods</h2>
               {methods.map((method, i) => (
                 <Fragment key={i}>
-                  <h3>{method.name}</h3>
-                  <ReactMarkdown source={method.description} />
+                  <h3 className={styles.methodName}>{method.name}</h3>
+                  <ReactMarkdown
+                    className={styles.methodDescription}
+                    source={method.description}
+                  />
                   <FunctionDefinition
                     params={method.params}
                     returnValue={method.returnValue}
diff --git a/src/templates/ReferenceTemplate.module.scss b/src/templates/ReferenceTemplate.module.scss
index 1e21bd266..2279cec8d 100644
--- a/src/templates/ReferenceTemplate.module.scss
+++ b/src/templates/ReferenceTemplate.module.scss
@@ -53,3 +53,15 @@
   z-index: 200;
   min-height: 9999px;
 }
+
+.methodDescription {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.methodName {
+  padding: 0.125rem 0.25rem;
+  display: inline;
+  color: var(--color-teal-500);
+  background: var(--color-teal-050);
+}

From 58fdaa268672a9c41c6434403739d2fb8b39b369 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Wed, 3 Jun 2020 17:49:33 -0700
Subject: [PATCH 6/8] chore: Fix lint warning

---
 src/components/FunctionDefinition.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FunctionDefinition.js b/src/components/FunctionDefinition.js
index e5ef1d7ef..cee1ea8ab 100644
--- a/src/components/FunctionDefinition.js
+++ b/src/components/FunctionDefinition.js
@@ -5,7 +5,7 @@ import styles from './FunctionDefinition.module.scss';
 
 const ParamDescription = ({ children, ...props }) => (
   <span {...props} className={styles.paramDescription}>
-    // {children}
+    {'//'} {children}
   </span>
 );
 

From 4397c34a909d837647ba850a44921f225cdabf0e Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Wed, 3 Jun 2020 18:06:39 -0700
Subject: [PATCH 7/8] refactor: Move usage into useComponentDoc

---
 src/hooks/useComponentDoc.js       | 1 +
 src/templates/ReferenceTemplate.js | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useComponentDoc.js b/src/hooks/useComponentDoc.js
index 3e39bdfc7..83a688473 100644
--- a/src/hooks/useComponentDoc.js
+++ b/src/hooks/useComponentDoc.js
@@ -25,6 +25,7 @@ const useComponentDoc = (componentName) => {
     return {
       description: componentDocs?.text,
       examples: componentDocs?.tags.examples ?? [],
+      usage: `import { ${componentName} } from 'nr1'`,
       methods: Object.getOwnPropertyNames(component)
         .filter(
           (member) =>
diff --git a/src/templates/ReferenceTemplate.js b/src/templates/ReferenceTemplate.js
index d7f0a2db3..d26327446 100644
--- a/src/templates/ReferenceTemplate.js
+++ b/src/templates/ReferenceTemplate.js
@@ -29,6 +29,7 @@ const ReferenceTemplate = ({ data }) => {
     examples,
     description: componentDescription,
     methods,
+    usage,
   } = useComponentDoc(component);
 
   return (
@@ -48,7 +49,7 @@ const ReferenceTemplate = ({ data }) => {
           </section>
           <section className={styles.section}>
             <h2>Usage</h2>
-            <InlineCodeSnippet language="js">{`import { ${component} } from 'nr1'`}</InlineCodeSnippet>
+            <InlineCodeSnippet language="js">{usage}</InlineCodeSnippet>
           </section>
           {examples.length > 0 && (
             <section className={styles.section}>

From aad5354b757c5fbd0af13042f200a67c6256f0f0 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Wed, 3 Jun 2020 18:17:48 -0700
Subject: [PATCH 8/8] fix: Fix rendering when there is no component

---
 src/templates/ReferenceTemplate.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/templates/ReferenceTemplate.js b/src/templates/ReferenceTemplate.js
index d26327446..08ee6d316 100644
--- a/src/templates/ReferenceTemplate.js
+++ b/src/templates/ReferenceTemplate.js
@@ -25,12 +25,14 @@ const ReferenceTemplate = ({ data }) => {
   const { mdx } = data;
   const { frontmatter } = mdx;
   const { title, description, component } = frontmatter;
+  const componentDoc = useComponentDoc(component);
+
   const {
-    examples,
+    examples = [],
     description: componentDescription,
-    methods,
-    usage,
-  } = useComponentDoc(component);
+    methods = [],
+    usage = '',
+  } = componentDoc ?? {};
 
   return (
     <Layout>