feat(utils): replace react-docgen with typescript

[mnajdova]

RFC

This PR aims to replace react-docgen with alternative that will generate the info files for the components using the typescript interfaces. The PR introduces the react-docgen-typescript library, that out of the interfaces for the props of the component, generates json in the same format as the react-docgen library. I added one interface for the UIComponentProps with some common props that can be extended in the other component's props.

Example

For example, here is how the Button component prop section looks now, in comparison with the previous:

NOW

PREV

You can see that the types of the props are much descriptive with the new approach, but there are still some things that needs to be taken into account.
There is some bug I guess, because the types of the @params used inside the JSDoc are not picked up. I created issue for this on their github repo. In addition, the default value of the props are taken just if the value is some primitive type. However for the second, there is an alternative way of defining, by adding @default in the comment of the property.

Please share your feedback, so that we can make progress with this on the other components as well. @alinais @Bugaa92 @levithomason @kuzhelov @miroslavstastny @layershifter

Updated components

• Accordion
• Attachment
• Avatar
• Button
• Chat
• Divider
• Form
• Grid
• Header
• Icon
• Image
• Input
• ItemLayout
• Label
• Layout
• List
• Menu
• Popup
• Portal
• Provider
• Text
• Radio Group
• Segment
• Status
• Slot

[codecov]

Codecov Report

Merging #460 into master will increase coverage by 0.25%.
The diff coverage is 100%.

@@            Coverage Diff            @@
##           master    #460      +/-   ##
=========================================
+ Coverage   88.94%   89.2%   +0.25%     
=========================================
  Files          41      41              
  Lines        1384    1417      +33     
  Branches      202     202              
=========================================
+ Hits         1231    1264      +33     
  Misses        149     149              
  Partials        4       4

Impacted Files	Coverage Δ
src/components/Provider/ProviderConsumer.tsx	100% <ø> (ø)	⬆️
src/components/Label/Label.tsx	87.5% <ø> (+0.26%)	⬆️
src/components/Chat/Chat.tsx	91.66% <100%> (+0.36%)	⬆️
src/components/Avatar/Avatar.tsx	100% <100%> (ø)	⬆️
src/components/Accordion/AccordionTitle.tsx	65% <100%> (+1.84%)	⬆️
src/components/Button/Button.tsx	95.83% <100%> (+0.08%)	⬆️
src/components/Icon/Icon.tsx	84% <100%> (+0.66%)	⬆️
src/components/Text/Text.tsx	100% <100%> (ø)	⬆️
src/components/Header/Header.tsx	94.73% <100%> (+0.29%)	⬆️
src/components/Header/HeaderDescription.tsx	100% <100%> (ø)	⬆️
... and 27 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6493ae4...6d2bc87. Read the comment docs.

[layershifter]

It seems that we can drop recast from dependencies, too.

[layershifter]

We will also need to correct some types "before" | "after". However, it looks promising, nice job 👍

[layershifter]

Oops, this should be in devDependencies

[mnajdova]

Thanks for the catch! Moved.

[mnajdova]

I also noticed that some Component are missing some common properties:
AccordionContent

• styles, variables

AccordionTitle

• styles, variables

Attachment

• className

Popup (maybe these shouldn't even be added, but just in case...)

• as
• styles
• variables

Portal (maybe these shouldn't even be added, but just in case...)

• as
• className
• styles
• variabels

Segment

• children (it's not added in props, but it is actually used)

Slot

• children (it's not added in props, but it is actually used)

Text

• children (it's not added in props, but it is actually used)

Using some common interface for these would help us avoiding some of these mistake, plus we would have consistent description for the common properties without having to copy paste the same thing, or change it everywhere if we decide for better description.

[mnajdova]

Future work:

• Had to add the accessibility defaultProps everywhere with a @default - we have to find alternative to this
• Avatar – getInitials default value is not shown
• ItemLayout render*** (some bugs even on prod) - default value not shown
• Label accessibility was just added without description and default (didn't change anything there)
• Portal context default is not shown
• Popup content type has to be checked again
• Variables type is any - there is interface for this but is not shown.