feat: improve existing button components

[anwarulislam]

We currently have two different components for Button. One is PrimaryButton and the other is SecondaryButton. It's better to combine them into one component and have props for stylings.

[Dev-SK01]

We currently have two different components for Button. One is PrimaryButton and the other is SecondaryButton. It's better to combine them into one component and have props for stylings.

Can you assign me this to improve button component

[AndrewBastin]

Hi @Dev-SK01

This issue is reserved for FOSS Hack Partner Projects Programme, can you confirm you have registered for the same ?

Ref: hoppscotch/hoppscotch#4131

[The-x-35]

Hi @AndrewBastin ,
I have registered for the FOSS Hack event and I also worked on an issue in the web extension of hoppscotch.
Can you assign this issue to me.
Approach to solve the issue, I would delete the secondary button component and rename the primary button as the main button and it already has props in it for styling.
Can you guide me on how can i setup the project?
Also please guide me if I have to do anything else?

[jamesgeorge007]

Hi, to setup the project locally:

• Ensure you've Node.js installed and pnpm available as the package manager.
• Obtain a fork of the repository since you'll have to raise a PR, and clone it locally. Open it in your code editor of choice and install the dependencies with pnpm i.
• You can find all the available components under ~/src/components.
• We use Histoire for authoring the component stories. You can spin up the dev server with pnpm dev and access the playground.
• That's pretty much it. In short, the general component update process involves making changes to the component source, creating a new variant under the story if one already exists to represent the new behaviour, or adding a new story corresponding to the component.

[The-x-35]

Hi @jamesgeorge007
I was able to setup the project, but I had one issue that when I run the project, I do not see components which are visible on the official site.
here I am attaching screenshots that I only see 1 Stories 16 Variants whereas the production site has 21 Stories 44 Variants


As you can see, It is not showing components in the dev environment, Please tell me how can I see that so that I start solving the issue.

[The-x-35]

Ok I solved the issue by pulling the code again and doing a fresh start, if still some components do not appear just refresh the local host