Storybook Env setup for writing stories for existing components

[Abhijay007]

It is a feature request related to the environment setup of the storybook in the project edu-client.

Let me first explain what storybook UI is?

Storybook UI is an open-source tool for developing UI components in isolation for React. read more about it here

what does it mean by isolation

By isolation, it means that it doesn't affect the flow of the project means we have a separate env within a project which has nothing to do with react workflow all we do is to write stories for its components.

Now, what is a story?

In most simple words a story is referred to as the UI representation of a component.

why it is important or why do we need this in this project?

• It makes the project scalable like for ex: If A mentor is representing the project at any conference or something then if there are some people who don't know about the project that much or they want to know about project components means how different components are working, etc. So they can see the UI representation of the project's components which provides them a better picture of the project.

• It will be helpful for first-time contributors as well like if someone wants to contribute to in project and he/she doesn't know how to start with the project or how these comments are working then it will help them to learn about the project.

• As writing a story need creativity and good knowledge of component and it takes time as the codebase getting bigger with time and more components will be added with time so we can raise separate issues for writing stories which may help the beginner to contribute in the project as it doesn't require that much tech stack to write a story. we can also set up milestones to achieve this with the project. As it is very hard to write stories for all components for one individual so as we raise issues that may help different contributors, to work together.

why do we need this right now

As for now, the project is at the very beginning stage so it will be good to implement it right from the beginning.

[Abhijay007]

@KeenWarrior @kunal-kushwaha @Abhishek-kumar09 sir what are your thoughts on this?

[Abhijay007]

One thing more that the storybook is not limited to just UI representation it also has some amazing features which will be very helpful throughout the project.

[Abhishek-kumar09]

1. It kind of looks good to me, but we are already using Material-UI for designing components,and I I don't know if there are performance difference too. Whenever we are automatic things for making process simpler for creator, it comes out as a tradeoff for performance.

2. And can't understand the term that it could be be made in isolation of react.

3. Do you have any repo and website that shows it in action?

[Abhijay007]

1. It kind of looks good to me, but we are already using Material-UI for designing components,and I I don't know if there are performance difference too. Whenever we are automatic things for making process simpler for creator, it comes out as a tradeoff for performance.
2. And can't understand the term that it could be be made in isolation of react.
3. Do you have any repo and website that shows it in action?

@Abhishek-kumar09 Sir, it is not a frontend framework like material UI it is very different from that. Sir check out this repo to see this in action and checkout this (official site) link also

Sir by isolation I mean that our main react workflow didn't get affected like we use material UI for the frontend part of our application and it is something we can use for components UI like it is not shown in our application front-end we need to run different env to see this in action.

[KeenWarrior]

Sounds Good.

Two questions?

1. What is the time expense of implementing it.
2. How easy it would be to remove it at a later stage if needed.

[Abhijay007]

Sounds Good.

Two questions?

1. What is the time expense of implementing it?
2. How easy it would be to remove it at a later stage if needed.

@KeenWarrior sir it is a simple package it hardly takes 1 hour to set up but the main process is writing stories which can be implemented throughout the project as the codebase grows with time new components will be introduced in the project so we need to write stories for those components time to time. Means time expense varies with the project time span.

2. As it works in isolation it wouldn't affect the main react application so if we don't find it fruitful enough then we just need to uninstall the package and remove the storybook folder from the repo nothing else, no workflow will be affected.

[KeenWarrior]

We can take this forward

[Abhijay007]

@KeenWarrior sir thanks for assigning me this I will soon open a PR for this !!