Crash Course: Making a React Component Library with Storybook and NPM

[@ricardosmith5753]

brother you have brought me back from the DEAD. I tried to create a component library for so long and followed other tutorials but none went correctly. Thank you so much man, I gave a like and subscribed and will look forward to more of your content!

[@ProgressiveDev]

Timestamps: 1:42 - Why Use Component Libraries 4:12 - Project Demo (Storybook) 10:56 - Code Introduction 12:55 - Bootstrapping the Project 16:10 - Clean files and Start Coding 17:05 - Creating First Component 31:29 - Centralized Hosting of Global Styles 35:23 - Centralized Hosting of Icons 40:25 - Publishing to NPM 59:22 - Consuming the NPM package in another project 01:02:45 - Conclusion

[@emmanuelanthonyfermin7853]

Can you please paste this on top? :D thanks!

[@codemorphism]

Unbelievably simple way to explain how to create a component library using react and why certain things are the way they need to be. Kudos

[@mustafapanjiwala]

This got to be the perfect tutorial you can ever have for building and deploying storybook components.

[@aniljaiswal]

The most informative tutorial out there on creating a well maintained React component library. You covered everything and more. Thank you so much for all the efforts. Kudos!

[@nulnow]

That is one of the best explanations I ever seen. Really like the way you write code :)

[@ProgressiveDev]

Thank you Andrey!

[@jl7610]

Yeah would love to see the "functionality based component library" vid :)

[@djarithmitic]

Very straightforward and precise! Thank you for the effort!

[@edvardsniedre583]

As you mentioned about functionality based libraries. I would love to see you making that video.

[@ProgressiveDev]

Thanks for the feedback! I am putting it in my backlog!

[@emmanuelstephen4575]

Awesome tutorial. Would love to see the functionality based component library... Thanks for the efforts

[@lucienchu9649]

I made a lib from the company few months ago, with react, storybook and rolljs. Everything works fine until recently I decided to have the lib with typescript support. It turns out I need to mess around with the configs again, thanks for your explanation, a pretty good guide for me.

[@edvardsniedre583]

I appreciate thorough explanation! Thanks for sharing!!!

[@jl7610]

GOOD tutorial, helped me. For windows 10 users, the npm scripts solution I used: "prebuild": "if exist lib rd /s /q lib", "postbuild": "npm run copyassets", "prepack": "npm run build", (edit updated), old: "prebuild": "rd /s /q lib", "postbuild": "npm run copyfiles", "prepublish": "npm run build",

[@jl7610]

rd = remove directory

[@jl7610]

UPDATE npm WARN prepublish-on-install As of npm@5, `prepublish` scripts are deprecated. npm WARN prepublish-on-install Use `prepare` for build steps and `prepublishOnly` for upload-only.

[@jl7610]

UPDATED working: Prepublish is ran during 'npm i' + it is deprecated, so changed to prepack. prebuild also works much better now (add if exist) "prebuild": "if exist lib rd /s /q lib", "postbuild": "npm run copyassets", "prepack": "npm run build",

[@itzsrikanth]

Eye opener under various categories

[@ivanfranciscoj]

Man, I don't know how to say this, but, I love you. That was a pretty good tutorial, great job

[@herbertpimentel]

This knowledge is much required, but even on yt we have a little lack of that. Keep going... specially why you use some approuchs when creating components. also abord usability on your components we all miss that everywhere.

[@oscar_cornejo]

What is the advantage of using lerna to create a component library?

[@zlatkoiliev8927]

Awesome tutorial mate! Really Really helpful, I was looking for this for so long time, the only thing I could not find here is how can I use custom font. I really like Proxima Nova, and I want to add it somehow globally to the component library, you know similar to other component libraries that when you add they change your font styles as well. Please please tell me how can I do that if possible?

[@ProgressiveDev]

Thanks for watching. At 32:25 I am explaining how to host custom fonts in the library.

[@hk_build]

Greate content thanks for making this video You have used styled-components for styling will that force consuming applications have to have styled component styling...? Or we can use normal CSS styles our application (where we use these lib components) ??

[@ProgressiveDev]

Good question. For client only apps you can start using it along with your regular css files. However, if you're planning to use SSR, most probably you will need to have additional setup depending on SSR framework.

[@kulilazhetpisbaeva6961]

Молодец ,все доходчиво объясняет

[@sohamshah2127]

This was super super useful! Thanks

[@pranavdhamanage]

excellent explanation keep it up!!!

[@superfunnyvideos7366]

Very useful, thanks a lot man!

[@axyLms]

This video is too good. Thanks!

[@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

[@darshangurubaxani6587]

This approach downloads all the code which resides inside polished-design-system. Can you please suggest how can I implement tree shaking like import {LogIn} from ' polished-design-system/LogIn'

[@IshfaqMuhammad-f6i]

Hi I am bit confused about consuming component in app. How I retrieve value of email and password in login component and logic of proceed button. Could you please implement login component in consumer app? Your quick response will be appreciated thanks

[@Jahangirkhan-ig1wj]

Great video

[@sariksiddiqui6059]

How to use storybook components without publishing to npm in my react app?Can they be run side by side if only developer is working on both of them?

[@ProgressiveDev]

Definitely! Just install it into your existing project and use as prescribed in the docs.

[@aatifbandey2009]

Doesnt work well with next js throws an error /node_modules/polished-design-system/lib/config/fonts/styles.css Global CSS cannot be imported from within node_modules.

[@CanuckianMusician]

You mentioned you don't want to export all of the icons...if I was installing this into another project how would I import things on a per icon basis?

[@ProgressiveDev]

Because we keep icons as separate components, and do not import all of them in the file in our component library, they are never going to your final project bundle unless you import them explicitly. If you need to use an icon in the project, just import it directly from the library using 'import User from "polished-design system/lib/User";

[@CanuckianMusician]

@@ProgressiveDev Thank you and thanks for the great video!

[@deletedaccount4034]

first time i see single & used in js. I couldnt find what does it return. i know it is bitwise AND, if both bits 1 sets 1 . But what does it mean when you use in js code like here you used ?, thank you for great content

[@chetan9533]

It's a typescript thing and different from the && operator you are mentioning. In simple terms, it is used to combine 2 types. You can google for a better explanation though 😅

[@quickfingers5982]

how can i package scss/css files to be shared on consumer? The reason I'm asking is because i am not using styled components.

[@ProgressiveDev]

Good question! If you have css/scss files, you can reference them in a "src/config/global.styles.ts" file the same way we reference "./fonts/styles.css", i.e. using webpack css loader.

[@quickfingers5982]

@@ProgressiveDev thank you! the config folder is that something i will need to follow? i was thinking more of a shared folder. something like shared/fonts, shared/icons, shared/styles..

[@quickfingers5982]

My other question is I am not using typescript and when i build the css or scss files is not compiled.

[@ProgressiveDev]

@@quickfingers5982 yes, they are never compiled, but because you are using css loader, webpack will create the css output file for you.

[@quickfingers5982]

@@ProgressiveDev where does the weback.config go? inside .storybook?

[@principe.borodin]

Fantastic

[@zhanelyazhanahmetova4101]

Thanks a lot, that was very helpful. But do you know how to create pkg, without publishing in npm, but which can be used through github? p.s. are you kazakh? )

[@ProgressiveDev]

You can definitely make a node modules package reference the GitHib project. In the package.json, instead of the npm version put the link of the GitHub repo. Yes I am Kazakh 😉

[@arshwy]

👍

[@bojanchurlinov1385]

Hey m8, really great tutorial, much appreciated. When I try to import your library in Next.js I am getting the following error: error - ./node_modules/polished-design-system/lib/config/fonts/styles.css Global CSS cannot be imported from within node_modules. Read more: err.sh/next.js/css-npm Is there a way around this since I am trying to build a components library myself and this will be a big issue for me obviously. Everything works well when I import the components in React.js app. Any help is much appreciated. Thanks.

[@ProgressiveDev]

Hey Artanis, thanks for trying out the tutorial! The error happens because Next.js simply refuses to import modules that have inner css imports. Next.js proposes importing css file separately from the component library. The fix is to remove css file import from the Polished system modules and import it directly into your own project.

[@alexeyilin1527]

Лукас

[@ayvicky]

going back and fourth, no proper flow