Making a UI Library in an NPM Package with React & TypeScript

it is time for a new project and in this project we're going to use a ui library that we're going to make and we're going to publish on the npm package repository it's going to be open source it's going to be written using react and typescript let's see how it works fresh new project first thing we need to do is do npm init and we're going to call this thing cradian ui because that's the project i'm working on add a short description there's no git repository quite yet but we'll set this up later and for all my creation projects i'm going to be using the agpl 3.0 license and i think that looks pretty good so what npm init does is it adds a package.json into your project which for now looks something like this now the next thing we need is we need react and typescript inside of the root of our repository we're going to add a ts config.json file for now we're going to completely empty this a rule that i like to live by if somebody else has already done the work for you and you're able to use it just use it and for ts config files there's already a repository called ts config and it has a few bases one of them that we'll be using is called the recommended base and you can install it just like this and then in our ts config.json file we can just put the extends keyword and add the recommended template to tsconfig.json file although this is a great start for ts config it is a good idea to take a look at all the different options choose the ones that you think is our best for your project so the first thing we're going to change is the compiler option and we're going to set jsx to preserve typescript ships with three jsx modes preserve react and react native and you can see the way that the input and output works in my case because i'm making a library that's gonna be used somewhere else i want to set the mode to preserve in other words i don't want to convert this jsx into this next i'm going to create a source directory make an index.ts file and a buttontypescript.jsx file and create a basic component that does absolutely nothing and export that component from my index.ts file now the next thing i need is some sort of way of styling these components styling these components styled components styled components are just a library that uses sas like syntax to generate react components it's something that i've used frequently and i have definitely enjoyed using it so i'm going to install styled components and install the type libraries for both styled components and react so i replace my button functional component with this styled component syntax for a button at the moment though this styled button component doesn't really do anything different than this code below style components gets much more powerful when you start actually putting the css into this and here i can put anything that sas supports in this case i'm just gonna make a simple example and just make the background color green like so now believe it or not we've created our first ui library you and me together hey but of course a ui library isn't really something that is usable until you actually make a package out of it first thing we're going to do is change this main field to look inside the source directory and it's an index.ts file and the second thing is we want to tell it what we should pack so here we have a glob pattern that will include everything inside the source directory next thing we do is to run the npm pack command and this will zip everything up into a file and this will be the thing that people receive when they do an npm install on your package so this is inside the generated tar zip file and inside that we have our package and we can see that although we have a few more things inside of our repository the only things that are actually packed is the source directory and the package.json file and that is because we said only pack the things that are in the source directory there are a few things that are always included by default like the package.json and a readme we don't have a readme so let's let's add one now this is a read read me read me and then when i run the npm pack command again i can see inside the package there's now a readme file this is a remove now let's say you wanted to test your new package without actually going through the process of publishing this to the npm package repository now this is where the npm link command comes in handy and inside your package you want to run npm link and inside the project that is going to use your package you run that again but this time with the name of the package the name of the package is whatever the name is in your package.json file so over in the command line we'll do npm link it might give you a different output because i've already done this so it's going to say up to date and in my other project i can do npm link caridian ui and inside our project node modules folder you can see we have a new folder called keradian and it has a bin file called you on and now the package can be imported just like this and i have an icon button here that is extending that button using the styled component syntax and now when i run npm run dev i get the ui i'm working on and look the buttons are green there's no way it's that easy believe it or not it is a lot of people look at a library like material ui and see oh my goodness there's all these files and their pic package.json is huge with so many dependencies i mean look at that it's 222 lines long and they're using babel and lerna and rollup and typescript and webpack and a lot of people think it's crazy to create your own package that it's incredibly difficult well here's an example of it working with a fraction of the complexity arguably almost no complex it's so simple it's almost suspicious but that's the thing is that material ui and all these other libraries need to support a large range of environments what we need to do is only support one environment which is react typescript and we're deferring all the responsibility of how we're going to manipulate and transform and transpile these files we're giving that to our projects to handle and in your case you might need to add something like compiling from typescript or using babel or using webpack or using rollup or any one of the other packages that are out there but for me and what i need for my projects is exactly this in the next episode we're going to take a look at how we actually publish this package the npm package repository as well as automating it through a github action bye

Channel: Bayan Bennett

Views: 1,210

Keywords:

Id: vSxoV1KUF-A

Length: 6min 3sec (363 seconds)

Published: Thu Sep 09 2021