[GSOC] Automatic Documentation System for TypeScript Components #3554

ashikmeerankutty · 2020-06-04T17:22:56Z

Summary

Replaced react-docgen with react-docgen-typescript
Custom babel plugin to inject doc info to components

Checklist

~~- [ ] Check against all themes for compatibility in both light and dark modes~~
- [ ] Checked in mobile
- [ ] Checked in IE11 and Firefox
- [ ] Props have proper autodocs
~~- [ ] Added documentation examples~~
- [ ] Added or updated jest tests
~~- [ ] Checked for breaking changes and labeled appropriately~~
~~- [ ] Checked for accessibility including keyboard-only and screenreader modes~~
~~- [ ] A changelog entry exists and is marked appropriately~~

Verifying Props

kibanamachine · 2020-06-04T17:22:58Z

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

thompsongl · 2020-06-23T21:43:04Z

Nice work making progress on all the checklist items!
Is there anything else you'll need to do after you've checked all the components, or will this be ready for a formal review?

ashikmeerankutty · 2020-06-24T05:34:05Z

I used that checklist for ensuring props are generated for all components. There are still some components that are missing some props. and also there are some issues regarding

There is some issue with the unchecked components as the props for them are not generated
children prop: if the children prop is given as required it's not shown as required by the parser also the type for children prop is found different.
I need to omit some props that are both in HtmlElement and component prop definition as they are removed as the parser removes props from HtmlElement.

Rest all seems fine and I also feel that there are some types that are not much readable like

ashikmeerankutty · 2020-06-24T16:05:24Z

@thompsongl There seems to be some issues with the tests of EuiLink can you please check that. It seems like they are flaky

thompsongl · 2020-06-24T16:08:17Z

There is some issue with the unchecked components as the props for them are not generated

Just EuiFlex?

children prop: if the children prop is given as required it's not shown as required by the parser also the type for children prop is found different.

Is it found different because children was not Omit-ed from the original HTML type?

ashikmeerankutty · 2020-06-24T16:14:22Z

Just EuiFlex?

The issue with EuiFlex is solved. Now props are generated for all the components although some props are missing in some components.

Is it found different because children was not Omit-ed from the original HTML type?

No, even if we omit the type from HTML type we are getting different outputs and the required is always false. When I dig in it was found to be an issue with react-docgen-typescript I will somehow try to fix it there (hopefully).

chandlerprall · 2020-08-11T21:58:46Z

EuiFieldPassword's props look good!

Remember when I asked you to remove the previous ./scripts/babel/proptypes-from-ts-props plugin? Turns out we still want to keep generating proptypes for our components 😅 Can you please re-add that plugin file & entry in the babel configuration? I don't expect it to conflict with the other changes here, but please let me know if it causes trouble and I'll help clean it up.

Sorry about that 🤦, I expect it to be the last piece of this PR! 🎉

ashikmeerankutty · 2020-08-12T07:57:50Z

I don't expect it to conflict with the other changes here, but please let me know if it causes trouble and I'll help clean it up.

There aren't any conflicts. But the test keeps failing since there is new lines are appended to the source file before

FooComponent.PropTypes = ...

and after

import PropTypes from 'proptypes'

thompsongl · 2020-08-12T15:05:28Z

I'll look at fixing the tests, @chandlerprall, if you haven't started yet

thompsongl · 2020-08-12T16:09:48Z

jenkins test this

kibanamachine · 2020-08-12T16:35:27Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3554/

chandlerprall

Awesome! Confirmed the changes (including re-enabling proptype generation) locally with running the dev server, successfully building the package, and successfully using the package in another project.

thompsongl · 2020-08-12T20:31:57Z

One last time

jenkins test this

thompsongl · 2020-08-12T21:23:21Z

JavaScript heap out of memory

jenkins test this

thompsongl · 2020-08-12T22:02:22Z

hmmm

JavaScript heap out of memory

again. Checking on whether something's up with Jenkins

thompsongl · 2020-08-12T22:32:32Z

JavaScript heap out of memory

happening locally, also. Looking into increasing memory limit

thompsongl · 2020-08-12T23:41:00Z

jenkins test this

kibanamachine · 2020-08-13T00:12:53Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3554/

thompsongl · 2020-08-13T13:23:37Z

Needed to increase the limit on the axe script, also. As such, I'm going to start work on #3801, but we can still move forward here and not block merging.

jenkins test this

kibanamachine · 2020-08-13T13:52:31Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3554/

thompsongl

Great work, @ashikmeerankutty! 🎉

* 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 <[email protected]> * Update src/components/title/title.tsx Co-authored-by: Chandler Prall <[email protected]> * Update src/components/tabs/tabs.tsx Co-authored-by: Chandler Prall <[email protected]> * Update src/components/steps/step.tsx Co-authored-by: Chandler Prall <[email protected]> * Update src/components/badge/notification_badge/badge_notification.tsx Co-authored-by: Chandler Prall <[email protected]> * Update src/components/resizable_container/resizable_panel.tsx Co-authored-by: Chandler Prall <[email protected]> * Removed babel plugin react docgen and props types from ts props * Apply suggestions from code review Co-authored-by: Chandler Prall <[email protected]> * 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 <[email protected]> * 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 <[email protected]> Co-authored-by: Chandler Prall <[email protected]>

kibanamachine · 2020-08-25T14:50:06Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3554/

ashikmeerankutty added 3 commits June 3, 2020 21:54

Add react-docgen-typescript

034039a

Add react-docgen-typescript plugin

b895f10

Use ts.createProgram

0a3b3ff

ashikmeerankutty added 16 commits June 4, 2020 23:13

Hide errors for now

1a8e5ca

Omit id from HTML Attributes in accordion

278c085

Common props to beginning

5bdbb1a

Fixed issue with boolean props not generated

c909ba0

Merge remote-tracking branch 'upstream/master' into autodocs

a3f7cb6

Changed React.Component to Component for props info

34953a3

save Prop value as string

63c08e3

Use react for tsx and jsx in compiler option

8cd8e43

Removed console.log

ef460a3

Save prop value as string

3245d60

Added comment for children prop

b283319

CommonProps to the beginning

8568111

replace React.

009857a

Updated react-docgen-typescript

b56b8f0

Fixed typo in package.json

0eeb689

Removed screenreader only prop used in docs

d48de0b

ashikmeerankutty added 5 commits June 24, 2020 11:08

Relaced React.

cfd0736

Create program must use files from src-docs

b84a7db

increased uti.inspect maxlength

fb22d6d

Updated export for flex_group

b96c9e7

Removed issues with some files

e3222f1

Add proptypes from ts props back

d8e1cb5

align test ouput

614b4be

chandlerprall approved these changes Aug 12, 2020

View reviewed changes

Merge branch 'master' into autodocs

de17f6f

Merge branch 'master' into autodocs

20c95fe

increase minified bundle build node memory limit

106e8c6

increase other prod-like build node memory limit

31edf89

chandlerprall approved these changes Aug 13, 2020

View reviewed changes

thompsongl approved these changes Aug 13, 2020

View reviewed changes

thompsongl merged commit 1bb1f24 into elastic:master Aug 13, 2020

thompsongl mentioned this pull request Aug 13, 2020

[GSoC] Automatic Documentation System for TypeScript Components #3056

Closed

ashikmeerankutty mentioned this pull request Aug 17, 2020

Fixed prop not displaying for EuiExpression #3929

Merged

1 task

This was referenced Aug 19, 2020

Add vertical scroll and text highlighting for functions #3918

Merged

[DOCS] Sort props in docs in ascending order #3944

Merged

ashikmeerankutty changed the title ~~Automatic Documentation System for TypeScript Components~~ [GSOC] Automatic Documentation System for TypeScript Components Aug 25, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[GSOC] Automatic Documentation System for TypeScript Components #3554

[GSOC] Automatic Documentation System for TypeScript Components #3554

ashikmeerankutty commented Jun 4, 2020 •

edited

Loading

kibanamachine commented Jun 4, 2020

thompsongl commented Jun 23, 2020

ashikmeerankutty commented Jun 24, 2020

ashikmeerankutty commented Jun 24, 2020

thompsongl commented Jun 24, 2020

ashikmeerankutty commented Jun 24, 2020 •

edited

Loading

chandlerprall commented Aug 11, 2020

ashikmeerankutty commented Aug 12, 2020

thompsongl commented Aug 12, 2020

thompsongl commented Aug 12, 2020

kibanamachine commented Aug 12, 2020

chandlerprall left a comment

thompsongl commented Aug 12, 2020

thompsongl commented Aug 12, 2020

thompsongl commented Aug 12, 2020

thompsongl commented Aug 12, 2020

thompsongl commented Aug 12, 2020

kibanamachine commented Aug 13, 2020

thompsongl commented Aug 13, 2020

kibanamachine commented Aug 13, 2020

thompsongl left a comment

kibanamachine commented Aug 25, 2020

[GSOC] Automatic Documentation System for TypeScript Components #3554

[GSOC] Automatic Documentation System for TypeScript Components #3554

Conversation

ashikmeerankutty commented Jun 4, 2020 • edited Loading

Summary

Checklist

Verifying Props

kibanamachine commented Jun 4, 2020

thompsongl commented Jun 23, 2020

ashikmeerankutty commented Jun 24, 2020

ashikmeerankutty commented Jun 24, 2020

thompsongl commented Jun 24, 2020

ashikmeerankutty commented Jun 24, 2020 • edited Loading

chandlerprall commented Aug 11, 2020

ashikmeerankutty commented Aug 12, 2020

thompsongl commented Aug 12, 2020

thompsongl commented Aug 12, 2020

kibanamachine commented Aug 12, 2020

chandlerprall left a comment

Choose a reason for hiding this comment

thompsongl commented Aug 12, 2020

thompsongl commented Aug 12, 2020

thompsongl commented Aug 12, 2020

thompsongl commented Aug 12, 2020

thompsongl commented Aug 12, 2020

kibanamachine commented Aug 13, 2020

thompsongl commented Aug 13, 2020

kibanamachine commented Aug 13, 2020

thompsongl left a comment

Choose a reason for hiding this comment

kibanamachine commented Aug 25, 2020

ashikmeerankutty commented Jun 4, 2020 •

edited

Loading

ashikmeerankutty commented Jun 24, 2020 •

edited

Loading