[docs] Generate proptypes from typescript demos

docs/scripts/formattedTSDemos.js

@@ -17,6 +17,9 @@ const path = require('path');
 const babel = require('@babel/core');
 const prettier = require('prettier');
 const os = require('os');
+const typescriptToProptypes = require('typescript-to-proptypes');
+
+const tsConfig = typescriptToProptypes.loadConfig(path.resolve(__dirname, '../tsconfig.json'));
 
 const babelConfig = {
   presets: ['@babel/preset-typescript'],
@@ -77,7 +80,7 @@ const TranspileResult = {
   Failed: 2,
 };
 
-async function transpileFile(tsxPath, ignoreCache = false) {
+async function transpileFile(tsxPath, program, ignoreCache = false) {
   const jsPath = tsxPath.replace('.tsx', '.js');
   try {
     if (!cacheDisabled && !ignoreCache && (await fse.exists(jsPath))) {
@@ -89,24 +92,42 @@ async function transpileFile(tsxPath, ignoreCache = false) {
     }
 
     const { code } = await babel.transformFileAsync(tsxPath, babelConfig);
-    const prettified = prettier.format(code, { ...prettierConfig, filepath: tsxPath });
+
+    if (/import \w* from 'prop-types'/.test(code)) {
+      throw new Error('TypeScript demo contains prop-types, please remove them');
+    }
+
+    const propTypesAST = typescriptToProptypes.parseFromProgram(tsxPath, program, {
+      shouldResolveObject: ({ name }) => {
+        if (name === 'classes') {
+          return false;
+        }
+
+        return undefined;
+      },
+    });
+    const codeWithPropTypes = typescriptToProptypes.inject(propTypesAST, code);
+
+    const prettified = prettier.format(codeWithPropTypes, { ...prettierConfig, filepath: tsxPath });
     const formatted = fixBabelGeneratorIssues(prettified);
 
     await fse.writeFile(jsPath, formatted);
     return TranspileResult.Success;
   } catch (err) {
-    console.error(err);
+    console.error('Something went wrong transpiling %s\n%s\n', tsxPath, err);
     return TranspileResult.Failed;
   }
 }
 
 (async () => {
   const tsxFiles = await getFiles(path.join(workspaceRoot, 'docs/src/pages'));
 
+  const program = typescriptToProptypes.createProgram(tsxFiles, tsConfig);
+
   let successful = 0;
   let failed = 0;
   let skipped = 0;
-  (await Promise.all(tsxFiles.map(file => transpileFile(file)))).forEach(result => {
+  (await Promise.all(tsxFiles.map(file => transpileFile(file, program)))).forEach(result => {
     switch (result) {
       case TranspileResult.Success: {
         successful += 1;
@@ -147,7 +168,7 @@ async function transpileFile(tsxPath, ignoreCache = false) {
 
   tsxFiles.forEach(filePath => {
     fse.watchFile(filePath, { interval: 500 }, async () => {
-      if ((await transpileFile(filePath, true)) === 0) {
+      if ((await transpileFile(filePath, program, true)) === 0) {
         console.log('Success - %s', filePath);
       }
     });

docs/src/pages/components/app-bar/ElevateAppBar.js

@@ -25,9 +25,11 @@ function ElevationScroll(props) {
 }
 
 ElevationScroll.propTypes = {
-  children: PropTypes.node.isRequired,
-  // Injected by the documentation to work in an iframe.
-  // You won't need it on your project.
+  children: PropTypes.element.isRequired,
+  /**
+   * Injected by the documentation to work in an iframe.
+   * You won't need it on your project.
+   */
   window: PropTypes.func,
 };
 

docs/src/pages/components/app-bar/ElevateAppBar.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
@@ -9,6 +8,10 @@ import Box from '@material-ui/core/Box';
 import Container from '@material-ui/core/Container';
 
 interface Props {
+  /**
+   * Injected by the documentation to work in an iframe.
+   * You won't need it on your project.
+   */
   window?: () => Window;
   children: React.ReactElement;
 }
@@ -29,13 +32,6 @@ function ElevationScroll(props: Props) {
   });
 }
 
-ElevationScroll.propTypes = {
-  children: PropTypes.node.isRequired,
-  // Injected by the documentation to work in an iframe.
-  // You won't need it on your project.
-  window: PropTypes.func,
-};
-
 export default function ElevateAppBar(props: Props) {
   return (
     <React.Fragment>

docs/src/pages/components/app-bar/HideAppBar.js

@@ -24,9 +24,11 @@ function HideOnScroll(props) {
 }
 
 HideOnScroll.propTypes = {
-  children: PropTypes.node.isRequired,
-  // Injected by the documentation to work in an iframe.
-  // You won't need it on your project.
+  children: PropTypes.element.isRequired,
+  /**
+   * Injected by the documentation to work in an iframe.
+   * You won't need it on your project.
+   */
   window: PropTypes.func,
 };
 

docs/src/pages/components/app-bar/HideAppBar.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
@@ -10,6 +9,10 @@ import Container from '@material-ui/core/Container';
 import Slide from '@material-ui/core/Slide';
 
 interface Props {
+  /**
+   * Injected by the documentation to work in an iframe.
+   * You won't need it on your project.
+   */
   window?: () => Window;
   children: React.ReactElement;
 }
@@ -28,13 +31,6 @@ function HideOnScroll(props: Props) {
   );
 }
 
-HideOnScroll.propTypes = {
-  children: PropTypes.node.isRequired,
-  // Injected by the documentation to work in an iframe.
-  // You won't need it on your project.
-  window: PropTypes.func,
-};
-
 export default function HideAppBar(props: Props) {
   return (
     <React.Fragment>

docs/src/pages/components/autocomplete/IntegrationDownshift.js

@@ -64,6 +64,11 @@ function renderInput(inputProps) {
   );
 }
 
+renderInput.propTypes = {
+  classes: PropTypes.object.isRequired,
+  InputProps: PropTypes.object,
+};
+
 function renderSuggestion(suggestionProps) {
   const { suggestion, index, itemProps, highlightedIndex, selectedItem } = suggestionProps;
   const isHighlighted = highlightedIndex === index;
@@ -83,12 +88,15 @@ function renderSuggestion(suggestionProps) {
     </MenuItem>
   );
 }
+
 renderSuggestion.propTypes = {
-  highlightedIndex: PropTypes.number,
-  index: PropTypes.number,
-  itemProps: PropTypes.object,
-  selectedItem: PropTypes.string,
-  suggestion: PropTypes.shape({ label: PropTypes.string }).isRequired,
+  highlightedIndex: PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number]).isRequired,
+  index: PropTypes.number.isRequired,
+  itemProps: PropTypes.object.isRequired,
+  selectedItem: PropTypes.string.isRequired,
+  suggestion: PropTypes.shape({
+    label: PropTypes.string.isRequired,
+  }).isRequired,
 };
 
 function getSuggestions(value, { showEmpty = false } = {}) {

docs/src/pages/components/autocomplete/IntegrationDownshift.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import deburr from 'lodash/deburr';
 import Downshift from 'downshift';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
@@ -100,13 +99,6 @@ function renderSuggestion(suggestionProps: RenderSuggestionProps) {
     </MenuItem>
   );
 }
-renderSuggestion.propTypes = {
-  highlightedIndex: PropTypes.number,
-  index: PropTypes.number,
-  itemProps: PropTypes.object,
-  selectedItem: PropTypes.string,
-  suggestion: PropTypes.shape({ label: PropTypes.string }).isRequired,
-};
 
 function getSuggestions(value: string, { showEmpty = false } = {}) {
   const inputValue = deburr(value.trim()).toLowerCase();
@@ -227,10 +219,6 @@ function DownshiftMultiple(props: DownshiftMultipleProps) {
   );
 }
 
-DownshiftMultiple.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {