A component library is one of the coolest things a web developer can make, but if you don't know how to make one, let me guide you a bit.
Before w...
For further actions, you may consider blocking this person and/or reporting abuse
Do be careful when creating a component library that is going to be used within a company. Some general tips: Make sure you follow React design patterns like composition and read up on the open/closed principle, otherwise you're going to create a lot of frustration for your fellow dev. If you're extending an existing UI component library, make sure you follow the same pattern and dont create black boxes for the components that you're extending.
Thanks for adding that!
Hi, at the time of posting this comment,
npx storybook --init
doesn't work and based on the documentation, it's because a project creation framework wasn't used. So simply usingnpx sb init
worked fine.Thanks for pointing that out!
Hey, thanks for putting this article together, I'm just looking into this now. I'm using CSS modules. It would've been good to have seen use of tsup with some css support as that appears to be one of its limiting factors and the documentation is a little thin around that area. Have you tried it in this context?
I haven't tried using CSS modules with tsup so I don't have much knowledge on that, however you can try using rollup, it has a wide range of plugins and more configurable, you will just have to spend a little more time on its config than tsup. You can look at one of my old projects: github.com/AviAvinav/aloria-ui, I have used CSS modules with rollup here, you should look into the docs if anything's changed, since the project is old.
Why do you strongly recommend typescript over JavaScript ?
Specifically for a component library, I would recommend using typescript because it provides sort of a built-in documentation.
Let's say the
Button
component that we used in the article also had asize
prop which is only supposed to accept values:lg
,md
, orsm
(standing for large, medium and small respectively), then I can just define my component's props like this:This way when the user actually uses our component inside their project if they put any other value for the
size
prop besideslg
,md
, orsm
, they will recieve a warning. If you would notice, I also added a comment above thesize
prop, this helps as sort of a documentation. You can see this happening in the image below:As you can see, my editor shows me there's a problem because
large
is not an acceptable value for thesize
prop. Also you can see when I hover over thesize
prop it shows me the acceptable values and the comment we wrote before.This also provides better intellisense as you can see in the image below:
By default all the props you give to your components (in typescript) will be complusory, to make them optional you can just add a
?
, like this:This makes the
onClick
prop optional so now it won't cause an error ifonClick
is not specified during usage, but if you don't specify thesize
prop or addchildren
during usage it will show a warning as they are compulsory (do not have a?
).An alternative to TypeScript is PropTypes npmjs.com/package/prop-types
I have heard of it but haven't tried it
thanks, it helps me a lot. Can I translate it into Chinese and share it to more people on juejin.im ?
Sure, go ahead, just mention the original article too. Let me know once you have done it. Thanks!
juejin.cn/post/7145001624288067615
Awesome! Thanks!
Hey, there's a typo in your article title. It should be 'Library' but you've written 'Librabry'
Thanks for pointing that out, I was so focused on looking at the body of the post that I forgot to check the typo in the title.
check out this - TSDX - Zero-config CLI for TypeScript package development tsdx.io/
I did know about it and have tried it in the past but from what I know it's no longer being maintained, so I wouldn't recommend using it.
oh..okay. make sense.
That was a nice read! Liked, bookmarked and followed, keep the good work! 🙌
Thanks!
This is good.
Thanks!
Nice article. I wrote a similar article recently
Btw, nx is also an option for managing monorepos
Haven't tried nx before, but will try it out
This guide looks pretty good! Thanks for sharing your knowledge!!
Glad you liked it!
I hope you like it. Please feel free to advise me on how I can improve.
web2worksonmymachine