Merge pull request #1208 from Adslot/docs-add-methods-table

docs: add documentation for component methods
Adslot · Oct 4, 2021 · 17bed00 · 17bed00
2 parents 71a5b03 + 3b59438
commit 17bed00
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 0 deletions.
diff --git a/www/containers/Props.jsx b/www/containers/Props.jsx
@@ -59,6 +59,75 @@ const Props = ({ componentName, customMapper }) => {
             </tbody>
           </table>
         </div>
+        {componentProps.methods && componentProps.methods.length > 0 && (
+          <>
+            <h3>Methods</h3>
+            {_.map(componentProps.methods, (method) => {
+              return (
+                <div key={method.name} className="aui--docs-method-block">
+                  <section className="aui--docs-method-details">
+                    <h4>
+                      <code>
+                        <strong>{HtmlParser(_.get(method, 'name'), '')}</strong> (
+                        {method.params.map((param, i) => (
+                          <span key={param.name}>
+                            {param.name}
+                            {param.optional && '?'}
+                            {param.type?.name && `: ${HtmlParser(_.get(param, 'type.name'), '')}}`}
+                            {i !== method.params.length - 1 && ', '}
+                          </span>
+                        ))}
+                        ){method.returns?.type && ` => ${HtmlParser(_.get(method, 'returns.type.name'), '')}`}
+                      </code>
+                    </h4>
+                    {method.description && (
+                      <p>
+                        <strong>Description </strong>
+                        {HtmlParser(method.description)}
+                      </p>
+                    )}
+                    {method.returns && (
+                      <p>
+                        <strong>Returns </strong>
+                        <code>{HtmlParser(_.get(method, 'returns.type.name'), '')}</code>
+                        {_.get(method, 'returns.description') &&
+                          ` - ${HtmlParser(_.get(method, 'returns.description'), '')}`}
+                      </p>
+                    )}
+                  </section>
+                  {method.params && method.params.length > 0 && (
+                    <>
+                      <table className="table table-striped">
+                        <thead>
+                          <tr>
+                            <th>Param</th>
+                            <th>Required</th>
+                            <th>Type</th>
+                            <th>Description</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {_.map(method.params, (param) => (
+                            <tr key={param.name}>
+                              <td>
+                                <code>{HtmlParser(_.get(param, 'name'), '')}</code>
+                              </td>
+                              <td>
+                                <code>{!param.optional && 'true'}</code>
+                              </td>
+                              <td>{param.type && <code>{HtmlParser(_.get(param, 'type.name'), '')}</code>}</td>
+                              <td>{param.description && HtmlParser(_.get(param, 'description'), '')}</td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </>
+                  )}
+                </div>
+              );
+            })}
+          </>
+        )}
       </React.Fragment>
     );
   }

diff --git a/www/containers/styles.scss b/www/containers/styles.scss
@@ -96,6 +96,19 @@ body {
     margin-top: 10px;
   }
 
+  .aui--docs-method-block {
+    border: 1px solid $color-gray-lighter;
+    margin-bottom: 20px;
+
+    .aui--docs-method-details {
+      padding: 10px;
+    }
+
+    .table {
+      margin-bottom: 0;
+    }
+  }
+
   .aui--docs-note-panel {
     .text {
       &-blue {