Working on grommet
Published: 2021-11-01 02:39:43

## Context
For my second contribution towards Hacktoberfest 2021, I stumbled upon [grommet](https://v2.grommet.io/) which is a react-based framework that provides accessibility, modularity, responsiveness, and theming. I decided to work on [#5735](https://github.com/grommet/grommet/issues/5735) to enhance the stories components to allow theming.

## Grommet: Enhance Stories to Use Storybook Theming Functionality
Storybook is used to document and explore the components in an isolated environment and recently, an ability to view the storybook stories in multiple themes through a `Theme` button was added to the top bar in grommet storybook:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1fblusqw4h7867h9209v.png)
The user can now use the options using the `Theme` button to switch the theme of the component. However, there are a total of 60 stories in the grommet storybook and only 1 was refactored when the `Theme` functionality was added. Thus, the issue asked for help with the other 59 stories so that they could also use the new theming functionality. 

So, for my second contribution, I decided that I would work on a few stories and add theming functionality to them.

## Working with grommet storybook
Setting up the project was quite straightforward after going through the setup and contribution guide. The project seemed complicated at first, but once I started storybook and explored it a bit I was able to get a basic understanding of how it worked. I narrowed down to 3 components that I would work on:
- Anchor
- DropButton
- Menu

Each component further had multiple stories within it that needed to be enhanced. For instance, `Anchor` contained:
```
Color.js
Default.js
Gap.js
Inline.js
Size.js
Weight.js
```
The reason why theming wasn't working was because all the components were using the default `grommet` theme which now needed to be removed:
```js
  <Grommet theme={grommet}>
    ...
  </Grommet >
```

So, I went into each story for these components and removed the Grommet wrapper and the imports. For some stories, this messed up the layout of the component so I had to go in and add a `<Box>` wrapper to center them as required.

Also, some stories used custom themes instead of `theme={grommet}`. This was highlighted in the issue description, and in these cases I moved them to a `/CustomThemed` folder inside the component and changed their export title so that storybook would render them in a subfolder called `Custom Themed`. For example:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2gkjpzr155c64qwtqrp.png)

After doing this for each component, I tested to ensure that the `Theme` could now be switched between `base`, `grommet` and `hpe`. I also tested that there were no layout discrepancies introduced with my changes. A quick run of tests through `jest`, I was now ready to push my changes and create a pull request.

*Link to the pull request: [Allow theming for Anchor, DropButton and Menu stories - Issue 5735](https://github.com/grommet/grommet/pull/5737)

## Pull request
After creating my pull request, I left a comment on the main issue to highlight the pr. It was then reviewed and the developer said it looked good. However, there was an issue with how the Menu story behaved. This was due to Grommet missing a `full` prop and the developer created a pull request to fix that issue:

*Add ability to specify Grommet full with themed storybook - https://github.com/grommet/grommet/pull/5737*

My pr was now waiting on this fix to be merged and since I wasn't sure how long it was going to take, I asked the developer to consider adding a `hacktoberfest-accepted` on the pr, **which they did!** 

While I was a little disappointed that it couldn't be merged, I was still excited  as I had learnt and explored another new project and this marked my second contribution towards hacktoberfest!