Google Summer of Code’21 — Khushal Agarwal

5 min readAug 31, 2021

This summer, I was pleased to get selected for Google Summer of Code’21 under the organization [React Native Elements](https://github.com/react-native-elements). Working under the organization, my project was to **generate documentation automatically out of the UI components and present it in the Docusaurus website**.

https://media.giphy.com/media/ZcKASxMYMKA9SQnhIl/giphy.gif

The purpose of creating this repository is to maintain a report summary of my GSoC work and this may also serve as a guide for future GSoC aspirants and a reference to the developers and contributors to the project.

## Project idea

#### [Automatically generate documentation out of React/React Native Component](https://summerofcode.withgoogle.com/projects/#5690075263795200)

## 📙 Abstract

[React Native Elements](https://www.npmjs.com/package/react-native-elements) is a cross-platform UI toolkit built on/for React Native. With a weekly download by 90k+ users and backed by a huge community, it provides UI components that can be used in your native application for the platform of Android/iOS/Web.

The documentation of the project was maintained manually previously i.e., suppose I want to change/add/remove a prop or a new component to the project the markdown file had to be changed manually. The process is tiring and new contributors may often forget to do so. So, during the summers I took the change this process and make a workflow such that the generation is automatic. This should be **fast and maintainable**.

## 📝 Deliverables

The deliverables of the project are as follows:

- [x] Efficient Development Setup
- [x] Re-structure and Refactor code to have a common pattern.
- [x] Maintain the Usage/Examples of the component as they are needed to be updated manually.
- [x] Refactor and rename the directory structure such that Autogen is successful.
— Convert the code-base to have all the functional components.
- [x] Commenting on all the components and props.
— Adding descriptions.
— Adding prop descriptions.
— Ensuring a common pattern is followed.
- [x] Writing **scripts to extract data out**(in JS/TS) of it in the form of JSON.
- [x] Converting the JSON data to Markdown.
- [x] Automating the process such that the workflow works automatically whenever there is a change in the prop/definition or component code.

All of the listed deliverables were completed within the GSoC period. 🎉

## 📦 Working product

The work can be found here — [Official Website of React native elements](https://reactnativeelements.com/docs/next/). Please refer to the component docs.

**I have also written a blog on how it works attached [here](https://reactnativeelements.com/blog/2021/08/12/auto-generation-of-docs).**

## 🚀 Contributions

### Pull requests

| PR Link | Description | Status |
| — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — | — — — — — — — — — — — — — — — — — — — — — — — — — — — — | — — — — — |
| [#3071](https://github.com/react-native-elements/react-native-elements/pull/3071) | [Refactor] Documentation directory structure | Merged ✅ |
| [#3081](https://github.com/react-native-elements/react-native-elements/pull/3081) | [Refactor] Directory structure of components | Merged ✅ |
| [#3112](https://github.com/react-native-elements/react-native-elements/pull/3112) | [Add] props description, descriptions to the component. | Merged ✅ |
| [#3126](https://github.com/react-native-elements/react-native-elements/pull/3126) | [Docs] Added demos and snack for the documentation | Merged ✅ |
| [#3136](https://github.com/react-native-elements/react-native-elements/pull/3136) | [Add] Docgen auto generation of docs scripts | Merged ✅ |
| [#3142](https://github.com/react-native-elements/react-native-elements/pull/3142) | [Docs] Added generate-markdown scripts | Merged ✅ |
| [#3143](https://github.com/react-native-elements/react-native-elements/pull/3143), [#3144](https://github.com/react-native-elements/react-native-elements/pull/3144) | [Fix] Issues related to auto-generation of documentation | Merged ✅ |
| [#3145](https://github.com/react-native-elements/react-native-elements/pull/3145) | [Fix, Improve] Doc-gen issues and automation | Merged ✅ |

### Issues

| Issue link | Description |
| — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — | — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — |
| [#3171](https://github.com/react-native-elements/react-native-elements/issues/3171) | [Docs] Auto-generation of documentation for class based components |

Apart from these contributions, I have contributed to other React native elements projects. They can be summarized as:

- [Pull requests](https://github.com/pulls?q=is:pr+org:react-native-elements+author:khushal87)
- [Issues](https://github.com/issues?q=is:issue+org:react-native-elements+author:khushal87)

| Project | Reference |
| — — — — — — — — — — — — — — — — — | — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — |
| React Native Elements — main repo | [Pull requests](https://github.com/react-native-elements/react-native-elements/pulls?q=is%3Apr+author%3Akhushal87+) |
| React Native Elements App | [Pull requests](https://github.com/react-native-elements/react-native-elements-app/pulls?q=is%3Apr+author%3Akhushal87+is%3Aclosed) |
| Playground | [Pull requests](https://github.com/react-native-elements/playground/pulls?q=is%3Apr+author%3Akhushal87+is%3Aclosed) |

## 👨 Mentors

I would like to thank my mentors for helping me reach this milestone. 😄😄

I have not only learned about the Open Source culture and how to write good code but also, learned how the industry works and the import

- **Dhruvdutt Jadhav** — [GitHub](https://github.com/dhruvdutt). [LinkedIn](https://www.linkedin.com/in/dhruvdutt-jadhav/)
- **Pranshu Chittora** — [GitHub](https://github.com/pranshuchittora). [LinkedIn](https://www.linkedin.com/in/pranshuchittora/)
- **Jeremy Hamilton** — [GitHub](https://github.com/flyingcircle). [LinkedIn](https://www.linkedin.com/in/jeremy-hamilton-19b6217b/)

I would also like to thank [Arpit Bhalla](https://github.com/arpitBhalla) for being an amazing partner in this amazing journey.

## 🔗 Links

</div>

Google Summer of Code’21 — Khushal Agarwal

Written by Khushal Agarwal

No responses yet