Prop Descriptions

examples/typescript/components/Bar/Bar.tsx

@@ -1,9 +1,16 @@
 import React, { Component } from 'react';
 
 interface Props {
+  /** The color of the Bar component's text */
   color: 'red' | 'blue';
+  /**
+   * The count of schmeckles
+   * @default 42
+   */
+  count?: number;
 }
 
+/** A fancy component */
 export default class Bar extends Component<Props> {
   render() {
     const { color } = this.props;

examples/typescript/components/Foo/Foo.tsx

@@ -1,9 +1,19 @@
 import React, { Component } from 'react';
 
 interface Props {
-  color: 'red' | 'blue';
+  /**
+   * The color of the Foo components text
+   * @default 'red'
+   */
+  color?: 'red' | 'blue';
+  /**
+   * Do something special
+   * @default false
+   */
+  active?: boolean;
 }
 
+/** A basic component */
 export default class Foo extends Component<Props> {
   render() {
     const { color } = this.props;

lib/getStaticTypes.js

@@ -33,11 +33,16 @@ module.exports = async playroomConfig => {
     const files = await fastGlob(typeScriptFiles, { cwd });
     const types = parse(files);
     const typesByDisplayName = keyBy(types, 'displayName');
-    const parsedTypes = mapValues(typesByDisplayName, component =>
-      mapValues(filterProps(component.props || {}), prop =>
-        parsePropTypeName(prop.type.name)
-      )
-    );
+    const parsedTypes = mapValues(typesByDisplayName, component => ({
+      component_description: component,
+      ...mapValues(filterProps(component.props || {}), prop => ({
+        description: prop.description,
+        default: prop.defaultValue && prop.defaultValue.value,
+        required: prop.required,
+        type: prop.type.name.replace(/.\| undefined$/, ''),
+        values: parsePropTypeName(prop.type.name)
+      }))
+    }));
 
     return parsedTypes;
   } catch (err) {

package.json

@@ -78,7 +78,7 @@
     "mini-css-extract-plugin": "^0.4.3",
     "opn": "^5.4.0",
     "parse-prop-types": "^0.3.0",
-    "prettier": "^1.15.3",
+    "prettier": "^1.16.4",
     "prop-types": "^15.6.2",
     "query-string": "^6.1.0",
     "re-resizable": "^4.9.3",

src/Playroom/CodeMirror-JSX.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+import styles from './CodeMirror-JSX.less';
+
+// Convert attribute values to arrays that addon-xml can handle
+function prepareSchema(tags) {
+  return Object.keys(tags).reduce((all, key) => {
+    const tag = tags[key];
+
+    all[key] = {
+      ...tag,
+      attrs: Object.keys(tag.attrs).reduce((allAttrs, name) => {
+        if (name === 'component_description') {
+          return allAttrs;
+        }
+
+        const attr = tag.attrs[name];
+        allAttrs[name] = Array.isArray(attr) ? attr : attr.values;
+        return allAttrs;
+      }, {})
+    };
+
+    return all;
+  }, {});
+}
+
+function getTypeColor(data) {
+  if (data.type === 'boolean') {
+    return 'rebeccapurple';
+  }
+
+  if (data.type === 'string' || data.values.length > 0) {
+    return 'darkred';
+  }
+
+  if (data.type === 'number') {
+    return 'steelblue';
+  }
+
+  return null;
+}
+
+const Tooltip = ({ data }) => (
+  <div className={styles.tooltip}>
+    {data.required && <span className={styles.required}>ⓘ</span>}
+    <span>{data.description}</span>
+    {data.default !== null && typeof data.default !== 'undefined' && (
+      <div className={styles.default}>
+        <span className={styles.defaultLabel}>Default:</span>
+        <span style={{ color: getTypeColor(data) }}>{data.default}</span>
+      </div>
+    )}
+    {data.type !== null && typeof data.type !== 'undefined' && (
+      <div className={styles.default}>
+        <span className={styles.defaultLabel}>Type:</span>
+        <span>{data.type}</span>
+      </div>
+    )}
+  </div>
+);
+
+function getAttribute(cm, tags, data) {
+  const CodeMirror = cm.constructor;
+  const cur = cm.getCursor();
+  const token = cm.getTokenAt(cur);
+
+  if (token.end > cur.ch) {
+    token.end = cur.ch;
+    token.string = token.string.slice(0, cur.ch - token.start);
+  }
+
+  const inner = CodeMirror.innerMode(cm.getMode(), token.state);
+  let attr;
+
+  // Attribute
+  if (tags[inner.state.tagName]) {
+    attr = tags[inner.state.tagName].attrs[data];
+  }
+
+  // Tag
+  if (data.match(/<\S+/)) {
+    attr = tags[data.slice(1)].attrs.component_description;
+  }
+
+  return attr;
+}
+
+export default function getHints(cm, options) {
+  const CodeMirror = cm.constructor;
+  const tags = options && options.schemaInfo;
+  const hint = CodeMirror.hint.xml(
+    cm,
+    Object.assign({}, options, {
+      schemaInfo: prepareSchema(tags)
+    })
+  );
+
+  const container = document.createElement('div');
+
+  CodeMirror.on(hint, 'close', () => container.remove());
+  CodeMirror.on(hint, 'update', () => container.remove());
+  CodeMirror.on(hint, 'select', (data, node) => {
+    const attr = getAttribute(cm, tags, data);
+    container.remove();
+
+    if (attr && attr.description) {
+      const x =
+        node.parentNode.getBoundingClientRect().right + window.pageXOffset;
+      const y = node.getBoundingClientRect().top + window.pageYOffset;
+
+      container.style.left = `${x}px`;
+      container.style.top = `${y}px`;
+      container.className = styles.container;
+
+      ReactDom.render(<Tooltip data={attr} />, container);
+      document.body.appendChild(container);
+    }
+  });
+
+  return hint;
+}

src/Playroom/CodeMirror-JSX.less

@@ -0,0 +1,36 @@
+.container {
+  position: absolute;
+  z-index: 10;
+}
+
+.tooltip {
+  background: white;
+  border-radius: 3px;
+  font-family: monospace;
+  white-space: pre-wrap;
+  padding: 4px 8px;
+  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
+  border: 1px solid silver;
+  max-width: 25em;
+  margin-left: 5px;
+  white-space: initial;
+}
+
+.required {
+  color: red;
+  padding-right: 5px;
+}
+
+.default {
+  margin-top: 5px;
+}
+
+.default:first-of-type {
+  margin-top: 10px;
+}
+
+.defaultLabel {
+  margin-right: 8px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.7);
+}

src/Playroom/Playroom.js

@@ -21,7 +21,9 @@ import 'codemirror/mode/jsx/jsx';
 import 'codemirror/addon/edit/closetag';
 import 'codemirror/addon/edit/closebrackets';
 import 'codemirror/addon/hint/show-hint';
+
 import 'codemirror/addon/hint/xml-hint';
+import getHints from './CodeMirror-JSX';
 
 const themesImport = require('./themes');
 const componentsImport = require('./components');
@@ -45,7 +47,7 @@ const completeAfter = (cm, predicate) => {
   if (!predicate || predicate()) {
     setTimeout(() => {
       if (!cm.state.completionActive) {
-        cm.showHint({ completeSingle: false });
+        cm.showHint({ completeSingle: false, hint: getHints });
       }
     }, 100);
   }

yarn.lock

@@ -7941,10 +7941,10 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
-prettier@^1.15.3:
-  version "1.15.3"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.15.3.tgz#1feaac5bdd181237b54dbe65d874e02a1472786a"
-  integrity sha512-gAU9AGAPMaKb3NNSUUuhhFAS7SCO4ALTN4nRIn6PJ075Qd28Yn2Ig2ahEJWdJwJmlEBTUfC7mMUSFy8MwsOCfg==
+prettier@^1.16.4:
+  version "1.16.4"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.4.tgz#73e37e73e018ad2db9c76742e2647e21790c9717"
+  integrity sha512-ZzWuos7TI5CKUeQAtFd6Zhm2s6EpAD/ZLApIhsF9pRvRtM1RFo61dM/4MSRUA0SuLugA/zgrZD8m0BaY46Og7g==
 
 pretty-error@^2.1.1:
   version "2.1.1"