From f4d3023b282fc7820a99608b2da823d5110df4d7 Mon Sep 17 00:00:00 2001
From: Levi Thomason <me@levithomason.com>
Date: Fri, 20 Jan 2017 01:24:57 -0800
Subject: [PATCH] docs(ComponentProps): show func signatures (#1194)

---
 .../Components/ComponentDoc/ComponentProps.js | 31 ++++++++++++++++++-
 docs/app/index.ejs                            |  4 +--
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/docs/app/Components/ComponentDoc/ComponentProps.js b/docs/app/Components/ComponentDoc/ComponentProps.js
index 5077bd1222..b323808a97 100644
--- a/docs/app/Components/ComponentDoc/ComponentProps.js
+++ b/docs/app/Components/ComponentDoc/ComponentProps.js
@@ -40,6 +40,31 @@ export default class ComponentProps extends Component {
     )
   }
 
+  renderFunctionSignature = (item) => {
+    if (item.type !== '{func}') return
+
+    const params = _.filter(item.tags, { title: 'param' })
+    const paramSignature = params
+      .map(param => `${param.name}: ${param.type.name}`)
+      .join(', ')
+
+    const paramDescriptions = params.map(param => (
+      <div style={{ color: '#888' }}>
+        <strong>{param.name}</strong> - {param.description}
+      </div>
+    ))
+
+    const signature = <pre><code>{item.name}({paramSignature})</code></pre>
+
+    return (
+      <div>
+        <strong>Signature:</strong>
+        {signature}
+        {paramDescriptions}
+      </div>
+    )
+  }
+
   render() {
     const { props: propsDefinition } = this.props
     const content = _.sortBy(_.map(propsDefinition, (config, name) => {
@@ -56,6 +81,7 @@ export default class ComponentProps extends Component {
         name,
         type,
         value,
+        tags: _.get(config, 'docBlock.tags'),
         required: config.required,
         defaultValue: config.defaultValue,
         description: description && description.split('\n').map(l => ([l, <br key={l} />])),
@@ -80,7 +106,10 @@ export default class ComponentProps extends Component {
               <Table.Cell>{this.requiredRenderer(item)}</Table.Cell>
               <Table.Cell>{item.type}</Table.Cell>
               <Table.Cell>{this.renderDefaultValue(item.defaultValue)}</Table.Cell>
-              <Table.Cell>{item.description && <p>{item.description}</p>}</Table.Cell>
+              <Table.Cell>
+                {item.description && <p>{item.description}</p>}
+                {this.renderFunctionSignature(item)}
+              </Table.Cell>
             </Table.Row>
           ))}
         </Table.Body>
diff --git a/docs/app/index.ejs b/docs/app/index.ejs
index 7c65081d8e..9b425f0781 100644
--- a/docs/app/index.ejs
+++ b/docs/app/index.ejs
@@ -111,10 +111,10 @@
 
     code:not(.hljs) {
       padding: 0;
-      padding-top: 0.2em;
+      padding-top: 0.1em;
       padding-bottom: 0.2em;
       margin: 0;
-      font-size: 85%;
+      font-size: 87.5%;
       background-color: rgba(0, 0, 0, 0.04);
       border-radius: 3px;
     }