Automatic Documentation System for TypeScript Components (#3554)

* Add react-docgen-typescript * Add react-docgen-typescript plugin * Use ts.createProgram * Hide errors for now * Omit id from HTML Attributes in accordion * Common props to beginning * Fixed issue with boolean props not generated * Changed React.Component to Component for props info * save Prop value as string * Use react for tsx and jsx in compiler option * Removed console.log * Save prop value as string * Added comment for children prop * CommonProps to the beginning * replace React. * Updated react-docgen-typescript * Fixed typo in package.json * Removed screenreader only prop used in docs * Relaced React. * Create program must use files from src-docs * increased uti.inspect maxlength * Updated export for flex_group * Removed issues with some files * Use spread operator * Replaced React * Removed logs used to test * Removed src-docs * Add comment to children node to flex grid * Add description for children node * Fixed issues with components in generating props * Omit onClick prop from html elements * Allow color title onClick * Removed color title onClick * Fixed issues with color and title * Support types from react-dnd * Fixed title prop in context_menu_panel * Fixed required issue in checkable card * Fixed issue with an if loop * Fixed issues with props not generating * Fixed issues with props not generating * tests passing; responsive prop default * Fix issue with overlay mask props * Fixed title not generated and props for overlaymask * Fixed wrong prop generated for children prop * get children prop from ast * get children prop from ast * removed filename usage * Fixed children prop issue with class components * playground input updates * Update src-docs/src/services/playground/props.js * Update src-docs/src/services/playground/props.js * use any HTML value instead of printing all html values * Replace some with every * Update src/components/toast/global_toast_list_item.tsx Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * Update src/components/title/title.tsx Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * Update src/components/tabs/tabs.tsx Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * Update src/components/steps/step.tsx Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * Update src/components/badge/notification_badge/badge_notification.tsx Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * Update src/components/resizable_container/resizable_panel.tsx Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * Removed babel plugin react docgen and props types from ts props * Apply suggestions from code review Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * Removed babel plugin react docgen * Fixed children prop * description must respect line breaks * Fixed issue with any * Fixed props types * Add more comments * Replaces ReactElement<any> * Replace ReactNode and ReactElement expanded string * Update src/components/accessibility/screen_reader.tsx Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * Fixed warnings from webpack * Fixed issue with facet button * Fixed issue with link * Fixed issue with link * Fixed issue with toggle * Fixed issue with ReactText * Fixed issue with link * Add ; back * Fixed prettier errors * Fex prettier problem * Add proptypes from ts props back * align test ouput * increase minified bundle build node memory limit * increase other prod-like build node memory limit Co-authored-by: Greg Thompson <thompson.glowe@gmail.com> Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
elastic · Aug 18, 2020 · 214cde1 · 214cde1
1 parent 348b4cb
commit 214cde1
Show file tree

Hide file tree

Showing 86 changed files with 882 additions and 527 deletions.
diff --git a/.babelrc.js b/.babelrc.js
@@ -24,13 +24,8 @@ module.exports = {
  "@babel/plugin-syntax-dynamic-import",
  "pegjs-inline-precompile",
  "./scripts/babel/proptypes-from-ts-props",
+ "./scripts/babel/react-docgen-typescript",
  "add-module-exports",
- [
- "react-docgen",
- {
- "resolver": "findAllExportedComponentDefinitions"
- }
- ],
  // stage 3
  "@babel/proposal-object-rest-spread",
  // stage 2

diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
  "test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.json",
  "test-a11y": "node ./scripts/a11y-testing",
  "test-staged": "yarn lint && node scripts/test-staged.js",
- "start-test-server": "BABEL_MODULES=false NODE_ENV=puppeteer webpack-dev-server --config src-docs/webpack.config.js --port 9999",
+ "start-test-server": "BABEL_MODULES=false NODE_ENV=puppeteer NODE_OPTIONS=--max-old-space-size=4096 webpack-dev-server --config src-docs/webpack.config.js --port 9999",
  "test-visual": "wdio test/wdio.conf.js",
  "yo-component": "yo ./generator-eui/app/component.js",
  "test-visual-tests": "node ./scripts/run-visual-tests.js",
@@ -128,7 +128,6 @@
  "babel-plugin-dynamic-import-node": "^2.2.0",
  "babel-plugin-inline-react-svg": "^1.0.1",
  "babel-plugin-pegjs-inline-precompile": "^0.1.0",
- "babel-plugin-react-docgen": "^3.1.0",
  "babel-template": "^6.26.0",
  "cache-loader": "^2.0.1",
  "chai": "^4.1.2",
@@ -191,6 +190,7 @@
  "puppeteer": "^2.0.0",
  "raw-loader": "^0.5.1",
  "react": "^16.12.0",
+ "react-docgen-typescript": "^1.17.1",
  "react-dom": "^16.12.0",
  "react-redux": "^5.1.2",
  "react-router": "^5.2.0",

diff --git a/scripts/babel/proptypes-from-ts-props/index.js b/scripts/babel/proptypes-from-ts-props/index.js
@@ -1,3 +1,23 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable new-cap */
 
 const fs = require('fs');
@@ -471,8 +491,7 @@ function getPropTypesForNode(node, optional, state) {
 
  if (
  types.isLiteral(propType) ||
- (types.isIdentifier(propType) &&
- propType.name === 'undefined')
+ (types.isIdentifier(propType) && propType.name === 'undefined')
  ) {
  // can't use a literal straight, wrap it with PropTypes.oneOf([ the_literal ])
  propType = convertLiteralToOneOf(types, propType);
@@ -511,7 +530,7 @@ function getPropTypesForNode(node, optional, state) {
  // translates intersections (Foo & Bar & Baz) to a shape with the types' members (Foo, Bar, Baz) merged together
  case 'TSIntersectionType':
  const usableNodes = [...node.types].filter(node => {
- let nodePropTypes = getPropTypesForNode(node, true, state);
+ const nodePropTypes = getPropTypesForNode(node, true, state);
 
  if (
  types.isMemberExpression(nodePropTypes) &&
@@ -526,7 +545,8 @@ function getPropTypesForNode(node, optional, state) {
  !types.isCallExpression(nodePropTypes) ||
  !types.isMemberExpression(nodePropTypes.callee) ||
  nodePropTypes.callee.object.name !== 'PropTypes' ||
- (nodePropTypes.callee.property.name !== 'shape' && nodePropTypes.callee.property.name !== 'oneOfType')
+ (nodePropTypes.callee.property.name !== 'shape' &&
+ nodePropTypes.callee.property.name !== 'oneOfType')
  ) {
  return false;
  }
@@ -712,9 +732,15 @@ function getPropTypesForNode(node, optional, state) {
  (types.isIdentifier(propertyPropType) &&
  propertyPropType.name === 'undefined')
  ) {
- propertyPropType = convertLiteralToOneOf(types, propertyPropType);
+ propertyPropType = convertLiteralToOneOf(
+ types,
+ propertyPropType
+ );
  if (!property.optional) {
- propertyPropType = makePropTypeRequired(types, propertyPropType);
+ propertyPropType = makePropTypeRequired(
+ types,
+ propertyPropType
+ );
  }
  }
 
@@ -1085,7 +1111,7 @@ const typeDefinitionExtractors = {
  return [];
  }
 
- const cacheKey = `${sourceFilename}_${resolvedPath}`
+ const cacheKey = `${sourceFilename}_${resolvedPath}`;
  if (importedDefinitionsCache.has(cacheKey)) {
  return importedDefinitionsCache.get(cacheKey);
  }
@@ -1562,8 +1588,7 @@ module.exports = function propTypesFromTypeScript({ types }) {
  types.isIdentifier(variableDeclarator.init.callee.object) &&
  variableDeclarator.init.callee.object.name === 'React' &&
  types.isIdentifier(variableDeclarator.init.callee.property) &&
- variableDeclarator.init.callee.property.name === 'forwardRef')
- )
+ variableDeclarator.init.callee.property.name === 'forwardRef'))
  ) {
  // props for the component come from the second argument to the type params
  const typeDefinition =