<NME> styleguide.config.js
<BEF> // @format
const path = require("path");

const babelFlowConfig = require("./babel.flow.config");
const babelTypescriptConfig = require("./babel.typescript.config");
var {
  title: "nteract components",
  mergeDefaultAliases
} = require("./packages/webpack-configurator");

module.exports = {
  title: "nteract components",
  defaultExample: false,
          (word) => word.charAt(0).toUpperCase() + word.substr(1).toLowerCase()
        )
        .join("");
    const name = path.basename(componentPath, ".tsx");
    const from = componentPath
      .replace(/^packages\//, "@nteract/")
      .replace(/\.tsx?$/, "");
    return `import ${toPascalCase(name)} from '${from}';`;
  },
  sections: [
    {
      name: "Introduction",
      content: "styleguide-components/intro.md",
    },
    },
    {
      name: "Binder Hosts and Kernels",
      components: "packages/host-cache/src/components/*.ts"
    },
    {
      name: "Directory Listing",
  ],
  // For overriding the components styleguidist uses
  styleguideComponents: {
    LogoRenderer: path.join(__dirname, "styleguide-components", "logo.tsx"),
  },
  compilerConfig: {
    // Allow us to use {...props}
    objectAssign: "Object.assign",
    transforms: {
      // whether template strings get transpiled (we don't want it to, so that we can use the native functionality)
      templateString: false,
    },
  },
  template: {
    body: {
      raw: `
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-129108362-2"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'UA-129108362-2');
        </script>`,
    },
  },
  webpackConfig: {
    node: {
      fs: "empty",
      child_process: "empty",
      net: "empty",
      canvas: "empty",
    },
    resolve: {
      extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
    },
    externals: ["canvas"],
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: "ts-loader",
          options: {
            compilerOptions: {
              strict: true,
              jsx: "react",
              composite: true,
            },
            projectReferences: true,
            transpileOnly: true,
          },
        },
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"],
        },
      ],
    },
  },
};

<MSG> bring in react-docgen-typescript to parse props

<DFF> @@ -1,6 +1,11 @@
 // @format
+
 const path = require("path");
 
+const reactDocgenTypescript = require("react-docgen-typescript").withCustomConfig(
+  "./tsconfig.base.json"
+);
+
 const babelFlowConfig = require("./babel.flow.config");
 const babelTypescriptConfig = require("./babel.typescript.config");
 var {
@@ -8,6 +13,8 @@ var {
   mergeDefaultAliases
 } = require("./packages/webpack-configurator");
 
+const typescriptPropsParser = reactDocgenTypescript.parse;
+
 module.exports = {
   title: "nteract components",
   defaultExample: false,
@@ -28,7 +35,8 @@ module.exports = {
     },
     {
       name: "Binder Hosts and Kernels",
-      components: "packages/host-cache/src/components/*.ts"
+      components: "packages/host-cache/src/components/*.ts",
+      propsParser: typescriptPropsParser
     },
     {
       name: "Directory Listing",

{'commit': 'diff --git a/package.json b/package.json\nindex 3c2add781..9c6574502 100644\n--- a/package.json\n+++ b/package.json\n@@ -174,6 +174,7 @@\n     "prettier": "^1.11.0",\n     "raf": "^3.4.0",\n     "react": "^16.3.2",\n+    "react-docgen-typescript": "^1.12.0",\n     "react-dom": "^16.3.2",\n     "react-notification-system": "^0.2.16",\n     "react-redux": "^5.0.7",\ndiff --git a/styleguide.config.js b/styleguide.config.js\nindex 0cdce6270..2a7902c4d 100644\n--- a/styleguide.config.js\n+++ b/styleguide.config.js\n@@ -1,6 +1,11 @@\n // @format\n+\n const path = require("path");\n \n+const reactDocgenTypescript = require("react-docgen-typescript").withCustomConfig(\n+  "./tsconfig.base.json"\n+);\n+\n const babelFlowConfig = require("./babel.flow.config");\n const babelTypescriptConfig = require("./babel.typescript.config");\n var {\n@@ -8,6 +13,8 @@ var {\n   mergeDefaultAliases\n } = require("./packages/webpack-configurator");\n \n+const typescriptPropsParser = reactDocgenTypescript.parse;\n+\n module.exports = {\n   title: "nteract components",\n   defaultExample: false,\n@@ -28,7 +35,8 @@ module.exports = {\n     },\n     {\n       name: "Binder Hosts and Kernels",\n-      components: "packages/host-cache/src/components/*.ts"\n+      components: "packages/host-cache/src/components/*.ts",\n+      propsParser: typescriptPropsParser\n     },\n     {\n       name: "Directory Listing",\ndiff --git a/yarn.lock b/yarn.lock\nindex 8d6c8fe9d..7cad1d564 100644\n--- a/yarn.lock\n+++ b/yarn.lock\n@@ -11355,6 +11355,11 @@ react-docgen-displayname-handler@^2.1.0:\n   dependencies:\n     ast-types "0.11.5"\n \n+react-docgen-typescript@^1.12.0:\n+  version "1.12.0"\n+  resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-1.12.0.tgz#be25d3604e05676f05a1248952f8d5823d7a216a"\n+  integrity sha512-EAb2W5UNTTR75zTWm8bbn9iQmh+W/9DvnCazIdzDb+TnzvpcxEFCjRia+Rhpkx4FRRS3AYyJrw5Ar3zX51gJfQ==\n+\n react-docgen@3.0.0-beta12:\n   version "3.0.0-beta12"\n   resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-3.0.0-beta12.tgz#1285839296d6b616715b75c9d57f08d17c500be9"\n', 'commit_subject': 'bring in react-docgen-typescript to parse props', 'repo_name': 'nteract/nteract', 'committer': {'name': 'Kyle Kelley', 'email': '8f4465e9c13a0a249a1929943e8a22f20baa98fb@gmail.com', 'time_sec': '1541964792', 'tz_offset': '-480', 'date': {'seconds': '1541964792'}}, 'commit_tree': 'd14b15d327684155ed00ccc001b6247b72eefb9e', 'commit_message': 'bring in react-docgen-typescript to parse props\n', 'language_name': 'Python', 'license': 'bsd-3-clause', 'hunks': '@@ -1,6 +1,11 @@\n // @format\n+\n const path = require("path");\n \n+const reactDocgenTypescript = require("react-docgen-typescript").withCustomConfig(\n+  "./tsconfig.base.json"\n+);\n+\n const babelFlowConfig = require("./babel.flow.config");\n const babelTypescriptConfig = require("./babel.typescript.config");\n var {\n@@ -8,6 +13,8 @@ var {\n   mergeDefaultAliases\n } = require("./packages/webpack-configurator");\n \n+const typescriptPropsParser = reactDocgenTypescript.parse;\n+\n module.exports = {\n   title: "nteract components",\n   defaultExample: false,\n@@ -28,7 +35,8 @@ module.exports = {\n     },\n     {\n       name: "Binder Hosts and Kernels",\n-      components: "packages/host-cache/src/components/*.ts"\n+      components: "packages/host-cache/src/components/*.ts",\n+      propsParser: typescriptPropsParser\n     },\n     {\n       name: "Directory Listing",\n', 'addition_count': 9, 'deletion_count': 1, 'src_file': 'a/styleguide.config.js', 'tgt_file': 'b/styleguide.config.js', 'file_extension': '.js', 'before_file': '// @format\nconst path = require("path");\n\nconst babelFlowConfig = require("./babel.flow.config");\nconst babelTypescriptConfig = require("./babel.typescript.config");\nvar {\n  title: "nteract components",\n  mergeDefaultAliases\n} = require("./packages/webpack-configurator");\n\nmodule.exports = {\n  title: "nteract components",\n  defaultExample: false,\n          (word) => word.charAt(0).toUpperCase() + word.substr(1).toLowerCase()\n        )\n        .join("");\n    const name = path.basename(componentPath, ".tsx");\n    const from = componentPath\n      .replace(/^packages\\//, "@nteract/")\n      .replace(/\\.tsx?$/, "");\n    return `import ${toPascalCase(name)} from \'${from}\';`;\n  },\n  sections: [\n    {\n      name: "Introduction",\n      content: "styleguide-components/intro.md",\n    },\n    },\n    {\n      name: "Binder Hosts and Kernels",\n      components: "packages/host-cache/src/components/*.ts"\n    },\n    {\n      name: "Directory Listing",\n  ],\n  // For overriding the components styleguidist uses\n  styleguideComponents: {\n    LogoRenderer: path.join(__dirname, "styleguide-components", "logo.tsx"),\n  },\n  compilerConfig: {\n    // Allow us to use {...props}\n    objectAssign: "Object.assign",\n    transforms: {\n      // whether template strings get transpiled (we don\'t want it to, so that we can use the native functionality)\n      templateString: false,\n    },\n  },\n  template: {\n    body: {\n      raw: `\n        <!-- Global site tag (gtag.js) - Google Analytics -->\n        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-129108362-2"></script>\n        <script>\n          window.dataLayer = window.dataLayer || [];\n          function gtag(){dataLayer.push(arguments);}\n          gtag(\'js\', new Date());\n          gtag(\'config\', \'UA-129108362-2\');\n        </script>`,\n    },\n  },\n  webpackConfig: {\n    node: {\n      fs: "empty",\n      child_process: "empty",\n      net: "empty",\n      canvas: "empty",\n    },\n    resolve: {\n      extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],\n    },\n    externals: ["canvas"],\n    module: {\n      rules: [\n        {\n          test: /\\.tsx?$/,\n          loader: "ts-loader",\n          options: {\n            compilerOptions: {\n              strict: true,\n              jsx: "react",\n              composite: true,\n            },\n            projectReferences: true,\n            transpileOnly: true,\n          },\n        },\n        {\n          test: /\\.css$/,\n          use: ["style-loader", "css-loader"],\n        },\n      ],\n    },\n  },\n};\n', 'message': 'bring in react-docgen-typescript to parse props\n', 'author_name': 'Kyle Kelley', 'lang': 'config'}