Snippets

README.md

@@ -61,6 +61,15 @@ module.exports = {
       Hello World!
     </Button>
   `,
+  // Press Ctrl+Space or Cmd+Space to choose from predefined snippets
+  snippets: {
+    Link: '<Link to="">Go Somewhere</Link>',
+    Button: `
+      <Button>
+        Hello World!
+      </Button>
+    `
+  },
   webpackConfig: () => ({
     // Custom webpack config goes here...
   })

cypress/integration/smokeTest.spec.js

@@ -18,4 +18,11 @@ describe('Smoke test', () => {
     assertFrameContains('Foo');
     assertTextareaContains('<Foo color="blue" />');
   });
+
+  it('snippets', () => {
+    typeCode('{ctrl} ');
+    typeCode('{downarrow}{enter}');
+    assertFrameContains('Bar');
+    assertTextareaContains('<div>Bar</div>');
+  });
 });

cypress/projects/basic/playroom.config.js

@@ -1,5 +1,10 @@
 module.exports = {
   components: './components',
   outputPath: './dist',
-  openBrowser: false
+  openBrowser: false,
+  snippets: {
+    Foo: '<div>Foo</div>',
+    Bar: '<div>Bar</div>',
+    Baz: '<div>Baz</div>'
+  }
 };

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;

examples/typescript/playroom.config.js

@@ -1,6 +1,12 @@
 module.exports = {
   components: './components/index.ts',
   outputPath: './dist',
+
+  snippets: {
+    Foo: `<Foo color='red'>I am foo</Foo>`,
+    Bar: `<Bar color='blue'>I am Bar</Bar>`
+  },
+
   webpackConfig: () => ({
     module: {
       rules: [

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/extra-tooltip.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+import styles from './extra-tooltip.less';
+
+// Render a tooltip when getData returns something
+const extraTooltip = (cm, hint, Component, getData) => {
+  const CodeMirror = cm.constructor;
+  const container = document.createElement('div');
+
+  CodeMirror.on(hint, 'close', () => container.remove());
+  CodeMirror.on(hint, 'update', () => container.remove());
+  CodeMirror.on(hint, 'select', (token, node) => {
+    const data = getData(token, node);
+    container.remove();
+
+    if (data) {
+      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;
+
+      document.body.appendChild(container);
+      ReactDom.render(<Component data={data} cm={cm} />, container);
+    }
+  });
+
+  return hint;
+};
+
+export default extraTooltip;

src/Playroom/CodeMirror/extra-tooltip.less

@@ -0,0 +1,14 @@
+.container {
+  position: absolute;
+  z-index: 10;
+  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;
+}

src/Playroom/CodeMirror/prop-descriptions.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import styles from './prop-descriptions.less';
+import extraTooltip from './extra-tooltip';
+
+// 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>
+    {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)
+    })
+  );
+
+  return extraTooltip(cm, hint, Tooltip, token => {
+    const data = getAttribute(cm, tags, token);
+
+    if (Array.isArray(data) || (data && !data.description)) {
+      return null;
+    }
+
+    return data;
+  });
+}

src/Playroom/CodeMirror/prop-descriptions.less

@@ -0,0 +1,18 @@
+.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);
+}