[Add] Docgen auto generation of docs scripts

[khushal87]

What kind of change does this PR introduce?

This PR introduces adding scripts to generate docs automatically. It uses react-docgen-typescript to achieve the same.

Did you add tests for your changes?

No. React docgen Typescript, for now, has its own tests and we can rely on them as they are stable. We can add tests to our code in the future. I plan to add them if needed in the future with a single PR.

If relevant, did you update the documentation?

Will be done later with a single PR.

Summary

To run the scripts for now and generate the documentation run the command:

yarn build:docs

This will trigger scripts/docgen/index.tsx script. It calls the function getAndStoreComponentDocs which calls getComponentFiles which is a utility to get all the file paths of the components in the form of an array. This is served as input to the generateComponentDocs which generate the component docs using react-docgen-typescript. The result is stored inside the .docgen directory in the respective folders.
The scripts have the respective files:

• componentMap.ts - This is a mapping of all the components including compound and non-compound components and is served as an input to get the array of all files paths. This will be removed later once we add regex or automate the process.
• docgenParser.ts - This file adds configurations to the react-docgen-typescript and according to the configurations, the props are filtered.
• generateComponentDocs.ts - This calls the docgen parser passing the array of files paths as input. This also sorts the props in sorted order of the key. Finally, a global object of all the component docs is returned.
• getComponentFiles.ts - Converts the mapped object of files in componentMap.ts to a single array of files having all the component file paths.

Does this PR introduce a breaking change?
No.

Other information
Disclaimer: These are the initial scripts to generate JSON just to make sure that the data is received for every prop type and descriptions are fetched. There will be changes in future PRs once the Markdown is generated.

Tags
#gsoc #docs-autogen #khushal87

[codecov]

Codecov Report

Merging #3136 (a8d16ff) into next (7e90dac) will not change coverage.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##             next    #3136   +/-   ##
=======================================
  Coverage   83.85%   83.85%           
=======================================
  Files          78       78           
  Lines        1685     1685           
  Branches      664      664           
=======================================
  Hits         1413     1413           
  Misses        268      268           
  Partials        4        4           

Impacted Files	Coverage Δ
src/Avatar/index.tsx	100.00% <ø> (ø)
src/BottomSheet/BottomSheet.tsx	100.00% <ø> (ø)
src/Card/index.tsx	100.00% <ø> (ø)
src/Dialog/index.tsx	100.00% <ø> (ø)
src/ListItem/index.tsx	100.00% <ø> (ø)
src/Tab/index.tsx	100.00% <ø> (ø)
src/TabView/index.tsx	100.00% <ø> (ø)
src/Avatar/Avatar.Accessory.tsx	30.00% <100.00%> (ø)
src/Avatar/Avatar.tsx	100.00% <100.00%> (ø)
src/Card/Card.Divider.tsx	75.00% <100.00%> (ø)
... 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 7e90dac...a8d16ff. Read the comment docs.

[pranshuchittora]

Why not CardDivider

[khushal87]

The name should be the same as the use-case, therefore I have changed it. As users are going to use it as Card.Divider. Also, this will help detect the parent directory by splitting using the '.'. The first part would be the Base component dir and the 2nd part will be the children.