Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Add] Docgen auto generation of docs scripts #3136

Conversation

khushal87
Copy link
Member

@khushal87 khushal87 commented Jul 9, 2021

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
Copy link

codecov bot commented Jul 9, 2021

Codecov Report

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

Impacted file tree graph

@@           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.

@khushal87 khushal87 marked this pull request as ready for review July 11, 2021 09:48
@@ -20,4 +20,4 @@ const styles = StyleSheet.create({
},
});

CardDivider.displayName = 'CardDivider';
CardDivider.displayName = 'Card.Divider';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not CardDivider

Copy link
Member Author

@khushal87 khushal87 Jul 13, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@khushal87 khushal87 marked this pull request as draft July 14, 2021 11:53
@khushal87 khushal87 marked this pull request as ready for review July 14, 2021 12:13
@flyingcircle flyingcircle merged commit 687c699 into react-native-elements:next Jul 15, 2021
@khushal87 khushal87 deleted the khushal87-docs-autogen-scripts-2 branch August 14, 2021 06:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants