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 Atomic Design methodology. 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, 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!