release 0.3 : patternfly-react

Tags: opensource, programming, react, javascript
Published: 2021-11-23 21:56:33


## About the issue

This time I tell myself let look for a small issue but in an even bigger project and see how much I can learn from it. so I come accross [patternfly-react](https://www.patternfly.org/v4/) a framework with ready-to-go react components. Then I decide to sign up for [issue- 6494](https://github.com/patternfly/patternfly-react/issues/6494), where I'm passing the prop for the `FocusTrap` to be made inactive

## Approaching to the project

At first, I would read through the `CONTRIBUTTING.md` file to make sure I did not miss anything and learn how to set up my environment. Even though being a big project, the precedure of setting up the environment and running test did not present clearly to me at first.

My first attempt into the project would be running `npm install` to install all the required dependacies for the project. Upon completion, I try to run `npm test` or `yarn test` but there was 416 unit test failed and that is when I know something was wrong with my set up. 

I did speak to Duke again after spending time deleting `node_modules` and keep installing it over again, and searching for the error on the internet but I got no luck. Then after speaking for a while, I regconize they using `yarn` as an package manager which I did not have a chance to work with it before so when I come into the project and see `yarn.lock`, I just ignore it but that is where causing me troubles. Instead of using `npm install` to installing all the package I will have to use `yarn` so as to install required packages for all the `mono-repo`.

Here come the interesting part, I heard about `mono-repo` before but never understand or know how to visualize it in real life untill I start working on this project. So every small repo need their own `node_modules` that was the reason why when I check out the general `package_lock.json` I did not see a lot of packages listed under the dependacies.  

I use `yarn` and try to run the `yarn test` again but it still showing the same troubles. It come to my realize that I also need to delete all the `node_modules` installed by `npm install`. This time it will be time consuming if I have to go check and delete each of the `node_modules` manually like I usually did. So I try out [npkill](https://www.npmjs.com/package/npkill?activeTab=dependencies) which I have a chance to work with it during WEB422 and unistalled all the previous `node_modules` from the project. 

I ran the `yarn test` again, this time more test have been passed but those test which have these `import` statement could not resolve there path.

```jest
import "@patern-fly/"

``` 
 
After spending time searching for it, I regconize the `import` statements are importing a `build` version of the repo not only the path to it. So I run `yarn build` and all the test went smoothly. 

## Adding the feature

To make `FocusTrap` to be made inactive is quite easy for me. where I just need to declared the prop and use it for FocusTrap but the linting always complain but I did not be able to run `yarn lint` or `yarn lint:ts` on my machine and I did try to communicate with the team and have not hear from them back but it was quite an excited learning journey for me with a big project like this.  
You can check out my [PR](https://github.com/patternfly/patternfly-react/pull/6638)