[FEATURE] Add page pages/search.js to Storybook

[RKC3000]

Description

Description

All React components and pages need to be added to Storybook (in the nextjs branch)

Note Each item listed below for component/page should be in a new Issue and PR

• [ ] pages/search.js

Screenshots

No response

Additional information

#1944 search component in the nextjs branch for storybook.

[github-actions[bot]]

It's great having you contribute to this project

Welcome to the community :nerd_face:

If you would like to continue contributing to open source and would like to do it with an awesome inclusive community, you should join our Discord chat and our GitHub Organisation - we help and encourage each other to contribute to open source little and often 🤓 . Any questions let us know.

[k99sharma]

Hey, Is this issue still open?

[RKC3000]

Yes, I am working on this You can select one from #1944

[k99sharma]

Sure

[ThePiyushAggarwal]

Is anyone working on this issue? I would like to take this up.

[gptkrsh]

There has not been any updates on this PR since a long time 🤔 You can go ahead @ThePiyushAggarwal

[ThePiyushAggarwal]

Thanks! I am taking up this issue. I saw that we are using Storybook 7 beta version now, so I am thinking of looking into that a bit and raise PR for this issue by Friday 17th

[ThePiyushAggarwal]

I am not able to make this work because there is a logger being used in the main page search.js

It is not allowing me to create a story based on the page.

Is there any other way to make use of the component in stories?

[Nanak360]

I see that pages/search.js have not been added to storybooks yet. As nobody is working on this issue, I can take it up and start working on it.

[SaraJaoude]

I see that pages/search.js have not been added to storybooks yet. As nobody is working on this issue, I can take it up and start working on it.

@Nanak360 I will assign this to you

[Nanak360]

I am not able to make this work because there is a logger being used in the main page search.js

It is not allowing me to create a story based on the page.

Is there any other way to make use of the component in stories?

I'm getting the same error. Did a lot of research to find a solution to this issue.

One possible solution is mentioned in this issue from pino. We'll have to add manual webpack congif and make sure that webpack uses the main package.json field instead of the browser field.

As mentioned [here](webpack to use the main package.json field instead of the browser field), there are ways to mock a import in storybook but it does not seem to work for this perticular case

[ThePiyushAggarwal]

When I started on this issue, I didn't read the description properly and just went into it. I raised a couple of PRs creating a story for the Search Input component not the whole page. At the end, I realized they want the whole page in storybook. I don't have much experience with storybook but I think storybook is used for managing and developing our components separately. Not the whole page. That is why I just unassigned myself. I may be wrong.

[Nanak360]

One possible solution for this issue is to divide the search page into child components

Page can be divided into 3 components (highlighted with yellow border)

• Tags
• Search bar
• RandomUsersGroup (optional)

We can have separate storybooks for each Component and if needed, one story with all 3 components combined to look like the stories page

[SaraJaoude]

We are looking to redesign the site so refactoring into components will happen at that stage - as a result I will close this Issue for now.