React UI Library Structure, Storybook and Tests

[@acidhauss7018]

My favorite React teacher - just when you think you've learned enough, there's always so much more to learn and improve on. Greetings from London :)

[@jubalm]

You are a life saver! This is just so timely as I was about to abandon the monorepo (pnpm) setup having failed to setup Storybook. Really love your style of teaching, please don't get tired creating content. Much ❤ from 🇵🇭

[@MohamedElmardi123]

Awesome!

[@marcoscarlomagno3065]

All your content is so clear and cool. Thank you for it. Im a 4 yrs exp. developer (I guess I'm just starting my career) and I see you as the person I want to be in the future. Calmed, nice and enjoying sw development. Taking care of yourself and the others. Btw, I think the first unit test is flaky tobethruty() will pass even when the array is empty

[@jerryzhang7022]

谢谢！

[@universecode1101]

Great video, React, Storybook and Test. Honestly the work you do is amazing, and I say it as a Developer and KZbinr, from the explanations to the animations. Thanks Jack

[@jherr]

Thank you!

[@CasiMaduro]

@@jherr please pleeeease could you explain how do you do unit testing with module federation?

[@jherr]

@@CasiMaduro Mocks. You mock the remote modules.

[@julianklumpers]

Good to see you are back! hope everything is fine.

[@jherr]

It’s improving and the trend looks good. Thanks for asking.

[@gabriellavoro1495]

You have a very nice way to explain things. It would have helped me a lot to have someone like yourself to teach advanced concepts in such an easy to understand way.

[@foo3268]

Although I didn't get hired yet, I'm finding myself more and more immerse into front end development. Your videos are absurdly useful and I feel like I can watch any of them without prior knowledge and just learn some cool shit. I even refactored stuff from older projects with some of the ideas you provide. Really innovative solutions too.

[@danieldiazgiraldo8337]

I am not a person who comments a lot on youtube, but there are cases in which it is impossible not to, your videos are very valuable, the way you explain is excellent and goes beyond the basics that other youtubers do, I can't wait for more FE stuff such as architecture, patterns... THANKS!

[@Fuzbo_]

Thanks so much! Recently found your channel and been loving your content. I know you mostly focus on React & Web dev (at least from what I’ve seen), but would love to hear your approach to putting together a cross-platform (React / React-Native) UI library. Thanks again for all the content!

[@alisonhj]

Thanks a lot! I've been in love with your videos since the 1st one I watched! Keep up with the excellent work!

[@jherr]

Thanks!

[@mmmikem]

Thanks so much for putting this together Jack!!! This is incredibly valuable knowledge right here.

[@Microman6502]

Thanks for the tutorial Jack, it popped up in my KZbin feed just when I needed it... spooky :)

[@ElijahManor]

Like how you use pnpm I like having all related things in their own folder as well (storybook, tests, styled-components, etc...). Ohh and I love MDX as well, yay Great video, nicely done!

[@leonardmanosa8774]

from your linkedin saw this post, as always, great content 👍

[@avi7278]

Pro tip: you're already creating stories with the correct or example props set. Instead of importing the component directly into your tests and addingprops there again, import the story component to avoid dupe code!

[@betelgeus2029]

Thanks Jack! You are doing wonderful!

[@permanar_]

wow, pretty cool. I usually go with this structure except I'm using styled components with emotion and TypeScript support! it really is amazing.

[@bythealphabet]

NICE, the video I asked for in Discord .😁 Awesome.

[@cryspypotato]

Great intro to storybook! I feel like a lot of devs tend to over-engineer the component libraries especially in smaller teams when they are trying to build something like bootstrap og material design while all they need is just a simple set of primitives. IMHO you don't always need a full blown styleguide.

[@omriterem6448]

Brilliant work Jack! Thanks for your videos especially in these difficult times. I really appreciate the time and effort you put into making content. Hope everything is getting better at home. Take care and get well soon to your wife 🙏🙏🙏

[@Soundbreakr1]

I use rollup manually but story book is great too it handles a lot for you

[@Chavez3d]

awesome thanks!! 🙏 for you and yours!

[@Sameer_Kumar]

Hi jack I think you can extend this amazing tutorial with a part containing proper guidance for build step as a npm package. I find there’s scarcity of quality materials on this topic. Rollup will be a good choice for you to demo with, unfortunately it’s pretty messed up especially for typescript.

[@oldbig1183]

Excellent video， 非常好的视频，谢谢作者。thank you。

[@jacob_dmn]

thank you so much 🌀

[@AmenAmenzo]

Amazing stuff as usual

[@DioArsya]

100000/100 of greatness

[@hakuna_matata_hakuna]

This approach would break things in next13 , you need multiple entry points to avoid components with hooks getting imported together ina server component

[@ray-lee]

Like before watching 😁

[@sergeykahnwald6640]

Storybook is a cool package) But there are some cases when we don’t need all the power of storybook, but just a simple “test page” with all our components where we can play with its props. There is one package that works just fine for this, called storybox-react

[@Stoney_Eagle]

Making it pretty is our task peeps 😂😂 Maybe you can do a video on localization with i18next, it's fairly simple to setup but I don't see anyone implementing it. I implemented it from the start and adding new translations is just adding a new key value pair to the json, I love it!

[@none0n]

Another beautiful video as always. I noticed that you didn't test the Storybook code, is that possible or needed?

[@Blue-bb9ro]

Love your videos

[@carlosclaro114]

Great video! In your component folder structure would you have a types file in the same place?

[@jherr]

That is one way to do it. But this video offers organization by component as opposed to by file type.

[@captnoplan3926]

Great video! What's the link for video you mentioned at the beginning for this Movies project? Is it the 'Micro front-end - Shared State' video?

[@jherr]

Yeah, the most recent one.

[@sinilyou]

Good for me . Thx

[@phuocquang2314]

Hi sir, thank you so much for the video, but I think it'll be great if you put the starter and the finish code on the repo I think it's now only the completed code, a little bit hard to follow step by step Sorry for my bad English Thank you very much for the video, I learned from you a lot

[@somewonderfulguy]

Very interesting, I noticed Cyrillic letters on your screen :)

[@jherr]

At what time? I’m kinda curious now.

[@somewonderfulguy]

@@jherr 1:23. And those letters are: ж, д, б

[@jherr]

@@somewonderfulguy oh yeah. Warp was giving me Cyrillic characters there for a bit. I think it might have been my font.

[@user-ux3cp4kr6r]

Jack, how are you? Thank you for the video!

[@jherr]

I’m hanging in there. Thanks for asking! FWIW, this video was shot before all this happened.

[@paulbitner9986]

Hi Mr. Herrington, can you please explain the concept you spoke about at 21:55? So as I understand, it's not really necessary to perform testing/create a storybook on every component you create - just do it for the "bigger" components that render out the smaller ones, like the header, hero, shopping cart, etc?

[@abderrahmandouara9973]

As of the release of React 17, there's no need to import React in react components anymore, for reference, look for: Introducing the New JSX Transform on the official react blog

[@jherr]

If you use TS and you want to reference something like React.FC then you still need to include it.

[@rand0mtv660]

15:20 won't this check toBeTruthy always pass since queryAllByText will always at least return an empty array, which is truthy? Might be better to do queryByText("Hello").toBeInDocument() or something like that?

[@jherr]

Yeah, that's true. Whoops.

[@abderrahmandouara9973]

Amazing! What is the difference between pnpm and npm?

[@jherr]

pnpm is slightly faster and has some offline caching functionality.

[@Fitzpa14]

Just tried running npx storybook init in the packages/ui directory and it didn't blow up! Looks like that fixed that.

[@igor_cojocaru]

How about atomic design? How would you structure the library? Will you separate it in folders (atoms, molecules, organisms) or just keep the file structure the same and separate it visually in the Storybook with "title: 'Organisms/Card" for example? Thank you Jack!

[@jherr]

I would have one library of the atoms, and possibly commonly used molecules. Then I would have other libraries for the un-common molecules and organisms. I'd possibly have a dedicated storybook project that would including all the stories from all the libraries.

[@iriel492ki]

If you are using a monorepo architecture with module federation, would a UI library like this also be exposed via module federation? Or would the UI library components be built/versioned and then imported as npm modules by the main application.

[@jherr]

It wouldn't. In this particular setup there are other libraries that are shared via Module Federation so that you get both live updating and fallback on a compile-time version if the lazy loading fails.

[@cristhiangutierrez7996]

What about the tree shaking when you build the UI? it will bring all components exported in index.ts on first JS load ?

[@jherr]

If it's a hard npm linkage then it's up to your bundler to do final build tree shaking.

[@vpetryniak]

pnpx I deprecated, use pnpm exec instead :)

[@ThEldeRS]

At 15:14 - testing an array to be truthy will always return true, wouldn't it? Better to do queryByText or to check the length again if you choose queryAllByText

[@jherr]

You are correct. My bad on that one.

[@John-Dennehy]

I notice you still use React.FC type instead of letting Typescript infer it as a JSX element. I recall there being a difference with how those types handle the children prop, but otherwise is there a benefit to explicitly typing the component? Great video though. was just about to create something similar.

[@jherr]

React.FC or React.FunctionComponent just give you a children prop by default, which we don't use here, so we could remove that. They also set the return type which is nice because it ensures that every return path returns something valid... which is cool.

[@eizen8774]

@@jherr In react@18 React.FC does not give a children prop anymore

[@jherr]

@@eizen8774 oh, right 18 took that out.

[@aakashkathait8328]

Can you please make a video on fetching data in next js from express server with a db

[@andrepadez]

Great! Now, how do we publish a UI Library from this to NPM? Thanks

[@myway9602]

Can you tell me what plugin you used to get hints when writing the code?

[@carlosricardoziegler2650]

So nice Video :) thanks for sharing. I am usina vitest nos, if is possível can you creste a vídeo with Vitest? Thanks Jack :)

[@tkroll]

How about SolidJS with Storybook next?

[@Foreversun33]

Hey Jack, what Tool use you for screendrawing?

[@jamelljones122]

Do you guys prefer Jest over Testing-library?

[@jessedeleon1195]

Is it possible to keep storybook in its own separate package, and keep stories colocated with their respective components in other packages?

[@jherr]

I've seen it done, yes.

[@alansantos9661]

I did clone the repo and run pnpm test, but I'm getting the follow error: Test suite failed to run Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax. Anyone could help me pls?

[@danialakabani2771]

Man I wish I can be half cool as you when I work, what’s this highlighter tool you are using with a pen I would very much like to have one =D

[@jherr]

I use ScreenBrush plus a commodity drawing tablet from Gaomon. I've tried the more well known (and expensive) brand of tablet but they install driver software that routinely crashed my Mac. Gaomon doesn't install a driver and it works great.

[@danialakabani2771]

@@jherr many thanks sir!

[@techknowledgebase4504]

Are styles if we import by import './style.css' nextjs throwing error? How you handle that?

[@jherr]

There are a bunch of different ways to handle CSS. You could use a CSS-in-JS solution (my preferred) or you could do CSS files and then bundle the CSS and include it in dist on build and dev and then bring that into the host app via an import and let Webpack bundle it.

[@techknowledgebase4504]

@@jherr Thanks. We are using CSS-in-js but some of 3rd party need to import css that's time we are put that in global.css and bundle with webpack mini extract css. Nextjs otherwise giving error. What is the best approach? your saying everything one folder all components related things

[@jherr]

@@techknowledgebase4504 Feel free to ask this question on my Discord server discord.gg/sae4SWPAFN . Please follow the #rules before posting. It would be good to have a codesandbox or stackblitz example that demonstrates the issue so that folks can more easily help you.

[@abderrahmandouara9973]

I am having a problem when I wrap my components with React.memo, the props and component name don't get to set correctly, any ideas?

[@WikiPeoples]

Jack, are you retired? How do you have the time to research all of these videos, produce them, etc... Seems like a lot of work on top of a day job!

[@jherr]

I'm not retired. I just choose to use my free time to help educate folks through a KZbin channel.

[@WikiPeoples]

@@jherr That's awesome. 👏 I often wonder if I'm just lazy or if other people have more time. I appreciate your answer as it gives me a kick to do more with my time!

[@dazecm]

I'm having gnarly problems getting Storybook working with a Next.js 13 project with pnpm or npm. It only seems to be less gnarly when using Yarn. As a web dev noob these paint-points are super annoying :/

[@jherr]

I haven't looked into that. Thanks for the heads up. Storybook is fantastic and it's a bummer that NextJS isn't getting along with it.

[@dazecm]

FYI. I eventually got things working with pnpm. The solve came with the pnpm version 8.1.1 upgrade. With that version you can use the Storybook init with the command pnpm dlx sb@next init. All is well in the world 🙂

[@dgcp354]

thanks for the continent, I pray for your family

[@ts3798]

watching this makes me feel like a complete beginner. Haha...

[@claus4tw]

Why are you ignoring all these missing peer deps and why does it still work?

[@julioalmeida4645]

Amazing vídeo. But its an overkill in my opinion

[@jherr]

Yeah, this is like the "industrial grade" version, but for smaller projects it is overkill.

[@monuxt]

Hi sir please help please give your content I have some problem please fixed it's 😔

[@tamlselvan9072]

This stuff is cool and how is your wife now?

[@jherr]

She is a fighter. We are taking it day by day but the trend is good. :) Thanks for asking.

[@adityatyagi4430]

@@jherr All the good wishes to you and your wife! Keep fighting!

[@lukmanblemka3652]

Hey jack,hope you are doing okey,how is your wife doing ?

[@jherr]

Thanks for asking. She is improving, but this first part of the treatment is rough.