Storybook 7 Crash Course - React Typescript 

Can you make full tutorial from scratch including testing , build a full storybook like for a company with best coding? using vitejs, reactjs, javascript, tailwind-css. All latest versions. please? 🙏 & explaining everything.

@md.lutfullahillabib the fundamentals are all here, and the testing follow up is linked above, I don’t really see what else there would be to cover. Creating a “full” storybook would just be reiterating the same patterns

Please share github repo link.

@rajatguptanarwana it’s not really worth cloning, there’s very little code written. I suggest running the storybook init in your own project, it will come with much better examples to play around with.

Thank you Jacquit!

Thank you 🙏

Thank you!

Thank you! Glad you are enjoying the channel

Do you recommend this video too? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-qSkHRVLcj6U.html

Thanks man!

Hey! Thank you so much 🙏

Totally, thanks for the comment!

You’re welcome!

Thank you! 🙌

posted! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Lg-hT0O2F7E.html

posted! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Lg-hT0O2F7E.html

That’s kind of the point of args, you can set an initial prop but the controls allows you dynamically update. The core idea is it’s like documentation that isn’t static, you can play around with it

There is no restriction on how “small” but the point is that you start with small and those components you should be able to compose into larger components which those could have stories as well

Thanks!

Nah I play around with CSS until it looks right just like most people haha. As for the “cons” of storybook it’s really mostly the added code to write stories, but it’s up to you how much you utilize it. In my mind a lot of the benefits definitely outweighs a little extra code but definitely it also depends on your workflow

Sorry not sure I understand your question. Creating stories itself is one of the development workflows. Build components and use them as usual.

Thank you! I don’t at this time but will think about it

In newer versions of storybook if you use their upgrade command it typically will auto migrate some changes for you.

The Ark browser! Check it out it’s pretty cool

@@mariusespejo Thanks! It seems like I'm not cool enough to get access to it yet though ;)

I was on the waitlist for maybe a week or two, it shouldn’t take long!

@@mariusespejo Got it today :D what did you do to get that topbar isntead of the sidebar? if you don't mind me asking.

I think it automatically does that for localhost but for any other site you can click on the little info icon next to the url and set it to developer mode. It’s on a per site basis unfortunately

😄

I can think about it! Was there something specific that you thought was missing in the video?

@@mariusespejo I received an internship offer for a really nice company which they asked me to look at Storybook and this video was amazing from someone who never coded in my life hahaha Probably I would like to know more how it is used in a professional environment with examples etc

Ah I see, to a degree the fundamentals are all here. It honestly is mostly about isolated development, documentation, and testing. I do have a video on storybook interaction testing. You also can find a bunch of public company storybooks you can use to see how others are using it. Most people would use it to build design systems, component libraries, etc. Will think about other video topics for this space. Anyways good luck on your internship!

import React from "react"; import { StoryObj, Meta } from "@storybook/react"; import Button from "./Button"; export default { title: "Components/Button", component: Button, } as Meta; // type individual stories type Story = StoryObj; export const Base: Story = { args: {}, }; export const Another: Story = { args: { label = "Button", }, render: (args) => , }; i am create same as your tutorial but strill getting error 'Button' refers to a value, but is being used as a type here. Did you mean 'typeof Button'?

Need to import the css in the preview.js storybook.js.org/recipes/bootstrap

Hey there, there’s nothing special about using context in storybook. Just as usual you just need to have a provider to your stories, e.g. to provide mock data. Basically just follow typical usage as shown in react docs

@@mariusespejoReally thanks

Here’s an example of where you can add decorators wrapping your stories, you can place providers in there storybook.js.org/docs/writing-stories/decorators#story-decorators

@@mariusespejoThank you very much.

You can use tools like rollup to bundle your code, the rest of how to publish I suggest reading npm docs

Are you sure you’re importing with the right path?

@@mariusespejo Just figured it out, I just had to restart StoryBook. For some reason, it was giving me errors over an old component I had already deleted..but it didnt register until restarting StoryBook. Thanks man

It’s not in a repo at the moment, I recommend just coding along with the video, there’s not much code written

You need a tool designed for doing those kinds of builds, take a look at tsdx as an example or you can use rollup if you want to configure it yourself

@@mariusespejo I think tsdx is too outdated now. Have you used it recently?

i don’t know that i would call it outdated, it still solves the same problem although perhaps just not being actively maintained. There is a fork of it called dts-cli that you can perhaps consider. Again also if you’re concerned then you can configure tools like rollup yourself, tsdx is just the zero config get started quickly path to that

@@mariusespejo just FYR Tried tsdx, lot of errors due to internal roll-up version conflicts. As you've suggested, using vite + roll-up config. It's working fine now. Thanks

It’s not on a repo. Honestly if you watch the video it’s literally just running two commands (vite & storybook) and writing the two files… it would take you 5min to write

What do you mean?