DEV Community

Amazing
Amazing

Posted on

release 0.3 : patternfly-react

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 a framework with ready-to-go react components. Then I decide to sign up for issue- 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 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.

import "@patern-fly/"

Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)