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 13, 2020 · 1bb1f24 · 1bb1f24
1 parent 80012da
commit 1bb1f24
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 =