For my external project PR, I continued working with Grommet Community which I contributed on my release 0.2. After my first contribution on release 0.2, I decided dive more into the similar issue. It was organizing the stories based on its component types.
As I worked before with this community, the set up had already been done. The first PR I made was organizing Header/stories by type of its component which is Layout. The task was similar like I did for release 0.2: export the components, access them form separate file and define a layout.
As a result, I thought about organizing another story and sending another PR. I chose Layer/stories for my second PR. After a while working on it, I realized how different it was comparing to others. So far all I had to do was exporting the component and put them inside specific layout. But for this one, I dealt with these new issues and learned how to do them:
- Rename the component
- Pass a Parameter while exporting with set value
- Use one component in 3 different ways with different name
To rename the component, I can use name options of story:
export const CenterLayer = () => {...}
CenterLayer.story = { name: 'Center' }To pass a parameter with set value, I can use parameters options and followed by the parameter name I want to pass. To set the value of the desired parameter, assign the value while passing it:
CenterLayer.story = {
parameters: {
chromatic: {
disable: true },},};The last one is the trickiest one. I had one component name MarginLayer. This needs to display in 3 different ways: full, center, Top center. Now there is only one component, but you need to display it in 3 different ways. I was puzzled for a moment as I had zero to none previous work experience with React. After researching I figured out that I can pass a prop while using the component. Depending on the prop, the same component can be displayed in several ways. Also, I made 3 different functions for each to use the component with different props and set distinct name. Here is the code:
Both of my PR got merged 😍 I am glad I decided to contribute more on the same issue, otherwise, I would still be unaware about how to handle these scenarios. This issue taught me the famous phrase: Don’t judge the book by its cover.
