Merge pull request #121 from newrelic/cayla/constants

Add constants section

src/components/ConstantReference.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Markdown from 'react-markdown';
+import PropTypes from 'prop-types';
+import styles from './ConstantReference.module.scss';
+
+const ConstantReference = ({ constant }) => {
+  const { name, values, type } = constant;
+  return (
+    <div className={styles.container}>
+      <div className={styles.name}>{name}</div>
+      <div>{type === 'array' ? '[' : '{'}</div>
+      <div className={styles.constantContainer}>
+        {values.map((value, i) => (
+          <Markdown key={i} source={value} />
+        ))}
+      </div>
+      <div>{type === 'array' ? ']' : '}'}</div>
+    </div>
+  );
+};
+
+ConstantReference.propTypes = {
+  constant: PropTypes.shape({
+    type: PropTypes.string,
+    name: PropTypes.string,
+    values: PropTypes.array,
+  }),
+};
+
+export default ConstantReference;

src/components/ConstantReference.module.scss

@@ -0,0 +1,22 @@
+.container {
+  color: var(--color-neutrals-500);
+  font-family: var(--code-font);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  margin-top: 2rem;
+}
+
+.name {
+  font-size: 1rem;
+  font-family: var(--primary-font-family);
+  color: var(--color-neutrals-800);
+  margin-bottom: 0.5rem;
+}
+
+.block {
+  margin-left: 0.5rem;
+}
+
+.constantContainer {
+  margin: 0 0 1rem 1.5rem;
+}

src/hooks/useApiDoc.js

@@ -60,10 +60,32 @@ const useApiDoc = (name) => {
       return structuredTypeDefs;
     };
 
+    const getConstants = (api) => {
+      return Object.getOwnPropertyNames(api)
+        .filter(
+          (member) =>
+            !IGNORED_METHODS.includes(member) &&
+            typeof api[member] !== 'function'
+        )
+        .map((member) => {
+          return {
+            name: `${name}.${member}`,
+            type: api[member] instanceof Array ? 'array' : typeof api[member],
+            values:
+              api[member] instanceof Array
+                ? api[member].map((el) => JSON.stringify(el))
+                : Object.getOwnPropertyNames(api[member]).map(
+                    (key) => `${key}: ${JSON.stringify(api[member][key])}`
+                  ),
+          };
+        });
+    };
+
     return {
       description: apiDocs?.text,
       usage: `import { ${name} } from 'nr1'`,
       typeDefs: getTypeDefs(api),
+      constants: getConstants(api),
       methods: Object.getOwnPropertyNames(api)
         .filter(
           (member) =>

src/templates/ApiReferenceTemplate.js

@@ -8,6 +8,7 @@ import Container from '../components/Container';
 import Layout from '../components/Layout';
 import MethodReference from '../components/MethodReference';
 import TypeDefReference from '../components/TypeDefReference';
+import ConstantReference from '../components/ConstantReference';
 import Sidebar from '../components/Sidebar';
 import SEO from '../components/Seo';
 import pages from '../data/sidenav.json';
@@ -24,6 +25,7 @@ const ApiReferenceTemplate = ({ data }) => {
     methods = [],
     usage = '',
     typeDefs = [],
+    constants = [],
   } = useApiDoc(api) ?? {};
 
   return (
@@ -67,6 +69,15 @@ const ApiReferenceTemplate = ({ data }) => {
               ))}
             </section>
           )}
+
+          {constants.length > 0 && (
+            <section className={templateStyles.section}>
+              <h2>Constants</h2>
+              {constants.map((constant, i) => (
+                <ConstantReference key={i} constant={constant} />
+              ))}
+            </section>
+          )}
         </main>
       </Container>
     </Layout>