https://www.youtube.com/watch?v=btVwaMWuhtc

Summarized by Adam Davarel Nostradatito.

Prepare & Build the project

• Initialize the project using Vite. Run command “npm create vite@latest” . In this case, we are using TypeScript for type checking. After creation, don’t forget to run “npm install” to install the dependency.

  

• Install the Tailwind CSS, please follow steps below cause we gonna do slight different things than the steps explained on the Tailwind CSS Documentation. Here are the steps:

  • run command below to install Tailwind CSS :

    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p
    

  • Configure your template paths, Add the paths to all of your template files in your tailwind.config.js file on content field.

    export default {
    	content: ["./lib/**/*.{js,ts,jsx,tsx}"],
    	theme: {
    		extend: {},
    	},
    	plugins: [],
    };
    
    

  • Add the @tailwind directives for each of Tailwind’s layers to your ./lib/index.css file, create one if you don’t have the file.

    // lib/index.css
    
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    

  • Import the index.css on the main file, in this case is ./lib/main.tsx , create one if you don’t have the file

  // lib/main.tsx
  
  import "./index.css"
  
  export { default as Button } from './components/atoms/Button'
  

  • Tailwind CSS is ready to use.

• Modify the vite.config.ts to be like this.

  import { defineConfig } from "vite";
  import react from "@vitejs/plugin-react";
  
  // <https://vitejs.dev/config/>
  export default defineConfig({
  	plugins: [react()],
  	build: {
  		// library entry and output settings
  		lib: {
  			entry: "./lib/main.tsx",
  			name: "aigen-ui",
  			fileName: "aigen-ui",
  		},
  		// bundler options
  		// externalize react-related imports
  		rollupOptions: {
  			external: ["react", "react-dom", "react/jsx-runtime"],
  			output: {
  				globals: {
  					react: "React",
  					"react-dom": "ReactDOM",
  					"react/jsx-runtime": "react/jsx-runtime",
  				},
  			},
  		},
  	},
  });
  

• Create components under ./lib folder. Implement the atomic design folder structure so it’ll be easy to maintain the components when we develop our library later. Please read the Best practice for atomice design methodology if you are not familiar enough to atomic design.

  Okay, let’s create simple Button component. Don’t forget to styling it with Tailwind CSS, to ensure the implementation of Tailwind CSS is correct later after we push it to NPM Package and use it on another project.

  // lib/components/atoms/Button/index.tsx
  
  import React, { ReactNode } from "react";
  
  interface ButtonProps {
  	children: ReactNode;
  }
  
  const Button = ({ children }: ButtonProps): ReactNode => {
  	return <button className="bg-[red]">{children}</button>;
  };
  
  export default Button;
  
  

• And then create the ./lib/main.tsx file where we import the Tailwind CSS and the components.

  // ./lib/main.tsx
  import "./index.css";
  
  export { default as Button } from './lib/components/atoms/Button'
  

• Modify the package.json. Define the files , main , module, exports on it.

  • files is used to specify which files and directories should be included when the package is published to a registry like npm. We will set it to ["dist"] since the build result will be stored there.

  • main used to specify the main file path that will be loaded first when another project with Node.js or environments that expect a CommonJS module, importing this project ( Component Library ). We will set it to ./dist/aigen-ui.umd.cjs since the build result will be stored there.

  • module used to specify the main file path that will be loaded when another project with modern bundlers (e.g., webpack, Rollup, or Vite) that support ES module format., importing this project ( Component Library ). We will set it to ./dist/vite-aigen-ui.js since the build result will be stored there.

  • exports define which files are exposed to consumers of your package. We will set it like this :

    "exports": {
    		".": {
    			"import": "./dist/aigen-ui.js",
    			"export": "./dist/aigen-ui.umd.cjs"
    		},
    		"./dist/style.css": "./dist/style.css"
    },
    

• Build the project with command “npm run build” , then the dist folder will be generated

Test the Component Library Locally

• Navigate to Component Library Project Directory and run command “npm link” , then your component library is linked globally on your local npm.

• Navigate to your main project directory where you want to use the Component Library Package. run command “npm link ${packageName}”, in this example case, the command will look like this “npm link aigen-ui”. Then the package will registered to the Main Project, on node_modules folder, ready to use.