API: Enable MDX descriptions inside Function tags

This is surely going to fail in some edge cases, but I'd rather not mess with it any more than necessary right now.

Author: rdw-software

src/components/API/API.jsx

@@ -4,17 +4,18 @@ import styles from "./styles.module.css";
 
 class Description extends React.Component {
   render() {
-    const item = this.props.for || "Whoops";
-    const placeholderTitle = `${item}: There's nothing here yet :(`;
-    const fallback = <Placeholder title={placeholderTitle} />;
+    const fallback = (
+      <>
+        <div className={styles.descriptionBox}></div>
+      </>
+    );
 
-    const children = this.props.childre;
+    const children = this.props.children;
     if (!this.props.children) return fallback;
-    if (this.props.children) return fallback;
 
-    const hasMultipleChildren = children instanceof Array;
+    const hasMultipleChildren =
+      children instanceof Array && children.length > 0;
     const content = hasMultipleChildren ? children : [children];
-
     const description = (
       <>
         <div className={styles.descriptionBox}>{content}</div>
@@ -25,9 +26,28 @@ class Description extends React.Component {
 }
 
 class Function extends React.Component {
+  mdxTypeToPlaceholderComponent(mdxType) {
+    const placeholdersByType = {
+      Description: <Description for={mdxType} />,
+      Parameters: <Description for={mdxType} />,
+      Returns: <Description for={mdxType} />,
+      Structures: <Description for={mdxType} />,
+    };
+    return placeholdersByType[mdxType];
+  }
+  findFirstChildByType(mdxType) {
+    const fallback = this.mdxTypeToPlaceholderComponent(mdxType);
+    const children =
+      this.props.children instanceof Array ? this.props.children : [];
+    if (!children || children.length === 0) return fallback;
+    return children.find((child) => child.props.mdxType == mdxType) || fallback;
+  }
   render() {
     const since = this.props.since;
-    const children = this.props.children;
+    const description = this.findFirstChildByType("Description");
+    const parameters = this.findFirstChildByType("Parameters");
+    const returnValues = this.findFirstChildByType("Returns");
+    const structs = this.findFirstChildByType("Structures");
 
     const isRunningInDevelopmentMode = process.env.NODE_ENV !== "production";
     if (isRunningInDevelopmentMode) {
@@ -57,12 +77,26 @@ class Function extends React.Component {
     return (
       <>
         {sinceBlock}
-        <div className={styles.function}>{children}</div>
+        <div className={styles.flexColumn}>
+          <div className={styles.flexRow}>{description}</div>
+          <div className={styles.flexRow}>
+            {parameters}
+            {returnValues}
+          </div>
+          {structs}
+        </div>
+        <hr />
       </>
     );
   }
 }
 
+class Structures extends React.Component {
+  render() {
+    return <>{this.props.children}</>;
+  }
+}
+
 class NilableInfo extends React.Component {
   render() {
     return <>?</>;
@@ -417,4 +451,5 @@ export {
   Placeholder,
   Blocking,
   Description,
+  Structures,
 };

src/components/API/styles.module.css

@@ -136,7 +136,8 @@ body {
 }
 
 .descriptionBox {
-  padding: 1rem 1rem;
+  padding: 0rem 1rem;
+  margin-top: 1rem;
 }
 .sinceBlock {
   border: 1px solid var(--ifm-color-primary-darkest);