feat: Add syntax highlighting for constants

newrelic · Jun 16, 2020 · b15f120 · b15f120
1 parent b0ecdfc
commit b15f120
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 19 deletions.
diff --git a/src/components/ConstantReference.js b/src/components/ConstantReference.js
@@ -1,33 +1,85 @@
-import React from 'react';
-import Markdown from 'react-markdown';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import CodeDef from './CodeDef';
 import styles from './ConstantReference.module.scss';
 
+const Value = ({ value }) => {
+  const type = typeof value;
+
+  if (Array.isArray(value)) {
+    return (
+      <>
+        <CodeDef.Bracket>[</CodeDef.Bracket>
+        <CodeDef.Block>
+          {value.map((item, idx) => (
+            <div key={idx}>
+              <Value value={item} />
+              {idx !== value.length - 1 && ','}
+            </div>
+          ))}
+        </CodeDef.Block>
+        <CodeDef.Bracket>]</CodeDef.Bracket>
+      </>
+    );
+  }
+
+  if (value == null) {
+    return <CodeDef.Keyword>{String(value)}</CodeDef.Keyword>;
+  }
+
+  console.log({ value, type });
+
+  switch (type) {
+    case 'object':
+      return (
+        <>
+          <CodeDef.Bracket>{'{ '}</CodeDef.Bracket>
+          <CodeDef.Block>
+            {Object.entries(value).map(([key, value], idx, arr) => (
+              <div key={key}>
+                <CodeDef.Identifier>{key}: </CodeDef.Identifier>
+                <Value value={value} />
+                {idx !== arr.length - 1 && ', '}
+              </div>
+            ))}
+          </CodeDef.Block>
+          <CodeDef.Bracket>{' }'}</CodeDef.Bracket>
+        </>
+      );
+    case 'string':
+      return <CodeDef.String value={value} />;
+    case 'number':
+      return <CodeDef.Number value={value} />;
+    default:
+      return value;
+  }
+};
+
+Value.propTypes = {
+  value: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.array,
+    PropTypes.string,
+  ]),
+};
+
 const ConstantReference = ({ constant }) => {
-  const { name, values, type } = constant;
+  const { name, value } = constant;
 
   return (
     <CodeDef className={styles.container}>
       <h3 className={styles.name}>
         <code>{name}</code>
       </h3>
-      <CodeDef.Bracket>{type === 'array' ? '[' : '{'}</CodeDef.Bracket>
-      <CodeDef.Block>
-        {values.map((value, i) => (
-          <Markdown key={i} source={value} />
-        ))}
-      </CodeDef.Block>
-      <CodeDef.Bracket>{type === 'array' ? ']' : '}'}</CodeDef.Bracket>
+      <Value value={value} />
     </CodeDef>
   );
 };
 
 ConstantReference.propTypes = {
   constant: PropTypes.shape({
-    type: PropTypes.string,
     name: PropTypes.string,
-    values: PropTypes.any,
+    value: PropTypes.any,
   }),
 };
 

diff --git a/src/components/ConstantReference.module.scss b/src/components/ConstantReference.module.scss
@@ -1,4 +1,5 @@
 .container {
+  color: var(--color-neutrals-600);
   font-size: 0.875rem;
 
   &:not(:last-child) {

diff --git a/src/hooks/useApiDoc.js b/src/hooks/useApiDoc.js
@@ -48,13 +48,7 @@ const useApiDoc = (name) => {
         .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])}`
-                  ),
+            value: api[member],
           };
         });
     };