Intro...

This week, I worked on my third commit to a public open source repository. After last week's full UI redesign, and the prior week's small fix, I felt comfortable to hit my goal of contributing to a larger scale application. I was able to find a project called Onlook, which is an application that allows users to create React apps and modify the components as if they were designing with Figma.

The issue ...

The issue I worked on pertained to adding a hint of text to a textArea field where a user can enter the tailwind classes for an object. The field should say "enter to apply" with an icon of an arrow when the textArea is within focus, and that hint should disappear when out of focus.

The issue I contributed to can be found here:
https://github.com/onlook-dev/onlook/issues/549

The fix ...

To prepare the fix I had to setup the environment of the project. It was easy and documented extremely well within their README.md of the repo.

The steps I took were as follows:

Reviewed the issue

Created a fork to ensure it was something I was familiar with

Set up the project

Looked where the fix was supposed to be located and ensured I would be good to fix this.

Asked and waited for approval

Ran the server / application

Begun implementation

In order to prepare and actually make the fix, I wanted to first make sure that this fix was actually something I am comfortable working on because it was from a larger scale application. I forked and pulled from the repo, looked into the file where the fix would take place, and decided this was a good fix for me. I then awaited approval and when complete began my work on the issue.

Code ...

The code for my fix was more than I expected to be honest. I thought it would be a simple setting of a variable with a React state and using that to decide if the text would show on focus or not. That ended up being the easy part, the hard part was the margin of the text and the content of the textArea. As I described to the maintainers, the hint had some overlap with the content when a user would resize the textArea as per their textArea being resizable. In order to curb this fix I had to use React's useRef to get the size of the content area and apply auto resizing to the textArea to the size of the content + another 20px for margin. It looked pretty good, and I had a nice review discussion with the maintainers.

Code of TailwindInput.tsx before the fix:

Code of TailwindInput.tsx after the fix:

In the new code you can see that I had to stray a bit from their implementation style as this was a harder fix than initially thought, and after I had sent my PR for approval, the maintainers acknowledged this.

They did however tell me that what I did was a good idea, and then made their own commits before merging to ensure that the variable names I had given were more suited to what they were looking for, and replaced my img tag with their icon custom component that I was not aware of at the time of making my fix. I appreciate that they were able to clean up some of my code and accept it in a respectful manner.

Final code after adding their changes to my fix:

Difficulties ...

This project did not cause me any prior research and/or major difficulties as I am familiar with React and Tailwind CSS. However I did struggle to match their code style properly, and I think that is something I am still learning to get better at. Only with time and practice will I be able to more effectively, efficiently, and properly implement coding solutions to a project.

Maintainers ...

Overall I had a lot of interactions with the maintainer(s). It was a large scale repository and the maintainer I had interactions with wasn't the one who opened the original issue. I really enjoyed working on this fix especially with it being such a large scale project, and I can say that the maintainers were nothing but nice, respectful, and helpful during this feature implementation.

PR ...

My pull request for this week's post can be found here:
https://github.com/onlook-dev/onlook/pull/572

Hacktoberfest week 3