feat: Add a FunctionDefinition component and render the function def …

…for a method

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;

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);
+}

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),

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,
           };
         }),

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>
           )}