React UI Library Structure, Storybook and Tests

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?

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

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 :/

I have 1 question, why do we even need index.ts inside AppShell?

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

Hey Jack, what Tool use you for screendrawing?

My guy, great to see you again! 🙏🏻😅

100000/100 of greatness

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 :)

谢谢！

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

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

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

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?

Good for me . Thx

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

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

pnpx I deprecated, use pnpm exec instead :)

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

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

Amazing!

What is the difference between pnpm and npm?

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

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

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?

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!

Amazing stuff as usual

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 🇵🇭

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.

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 🙏🙏🙏

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!

thanks for the continent, I pray for your family

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

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.

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!

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

Keep up with the excellent work!

Thanks Jack! You are doing wonderful!

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

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

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

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

How about SolidJS with Storybook next?

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 :)

NICE, the video I asked for in Discord .😁

Awesome.

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

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

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

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