npm package: @lolaihung/mh-ui-library
Description: MH UI library for NPM or Github Packages
Author: Lo Lai Hung
Latest version: 2.1.1

# MH-UI-LIBRARY

The objective of MH-UI-Library is to serve as a common component library to be consumed in all the admin portal projects.

Key benefits of this library :

1. **Efficieny** : speed up development as it is now easily import as a library and ready to used
2. **Consistency** : standardize all the components designs as per in figma
3. **Centralized Changes** : Any updates on the components will need to be made on this library only

The library is adopting the <span style="font-size:15px; font-weight: bold; color: orange">Atomic Design methodology</span>. This apporach will help in creating more modular, maintainable, and scalable components.

1. **Atoms** : Basic components like input field, button, label etc
2. **Molecules** : A group of atoms functioning together to build functionality. Eg, a form input with label and button
3. **Organisms** : More complex components that are composed of molecules and/or atoms. Eg, navigation bar

## Pre-requisites for Development

- Node.js installed (version 18.x or higher)
- npm account and npm CLI installed

## Quick Start on Library Development

### A. Setting up in your local

1. Get the latest source code from Github and run `pnpm i`
2. Execute `pnpm storybook` to view all the available components

### B. Development Best Practises

1. Make sure the components are flexible and customizable (eg, prepare className prop to enable customization)
2. Make sure the components are behaving the same and have the same design as per the design figma
3. Make sure every compoent has its own story to showcase in storybook
4. Make sure the story created covers all the props and behaviours that would explain how it works, and how it is to be consumed

### C. How to test in your local

There are 2 ways of testing in your local :

1. Publish your package via NPM. This requires you to go through all the steps in [How to publish your package](#how-to-publish-your-package), which is **NOT recommended** as you will need to merge your changes into `main` branch first
2. Link your library and consumer project in locally :

- Executes `pnpm build` in mh-ui-library
- Make sure the output in the `dist` folder of mh-ui-library is updated with the latest changes
- Go to the `package.json` of your consumer project and update the mh-ui-library package with `link:../mh-ui-library`
- Eg,
  `"@lolaihung/mh-ui-library": "link:../mh-ui-library",` depending on the directory level, in this example case, the consumer project and mh-ui-library folders located in the same level
- Executes `pnpm i` in the consumer project (might need to remove node_modules sometimes before executing the command)
- Make sure the mh-ui-library in the node_modules of consumer project is updated with the latest changes in the library
- You may use/test the components in your consumer project!

### D. How to publish your package

1. Please take note that the best practise is to always publish a beta/stable version based on the `main` branch
2. Meaning to say, you will have to merge your changes into `main` branch before you can publish the package
3. Bump the version, depending on the changes made

-

4. It's very easy to publish manually, just get latest of the `main` branch, execute `pnpm build`, then after that run `pnpm publish`
5. If the above commands failed, make sure you are logged-in in your terminal. Execute `pnpm login` if needed.

## How to consume the library

1. Treat it as just a normal dependency/library/framework that you are installing via NPM
2. Go to the terminal and executed `pnpm i @lolaihung/mh-ui-library@latest`
3. And you can enjoy all the available components now!