Mondra Visual / UI Components

• The motive of this project is to keep all Mondra branded Web UI elements and patterns together in single place and reduce the third party dependencies for each project under mondra umbrella.
• Which helps to maintain and scale easily across different projects.
• This helps each project to align with brand guidelines.
• This also helps to deliver new applications at much faster pace.

Pillers & Inspiration

• This project is primarily built using React, Typescript, Webpack, Pro - Tailwind CSS utitlity framework & Tailwind UI Component designs.
• However we as a team decided not to reinvent the wheel to create accessible web elements from scracth, well not everything but planned to built on top of tailwind org sponsored project called Headeless UI. This project is maintained under Tailwind labs and here is the link for the same Accessible React UI Components.
• Most of the components are custom built based on the best practices and follows the ux from Tailwind UI components.
• Each component is unit tested visually using Storybooks, Jest & React Testing library, which ensures code quality and consistency.
• This project also export default theme to outside world so that the consumers can extend the CSS framework based on the needs
• Yet to do theme enablement in future, We believe that is not too complex to include as we have got good back up from Tailwind CSS framework community.
• However we are not limited to the above UI component library, but always review the famous npm modules and include in this project and consume in actual web development.

Showcase - Play Ground

Mondra Web UI Storybook - Variaty of UI components, style guide is documented with live examples in here.

Design - UI / UX

The entire designs are custom made for mondra brand. All designs & style guides are available in figma web design tool. Below are some reference and there is huge chances that each page in figma rapidly changes :).

• https://www.figma.com/files/project/32463286/Foundation?fuid=770605902857213879
• https://www.figma.com/file/fsbeOpaGB7IIvboz2g1niG/Style-Guide
• https://www.figma.com/file/US1KZwqcRcjHnaZNSVjBcA/Product-Demo
• https://www.figma.com/file/bLCOy7YDStJJUbwlDdB7Ak/V2-Clac

Installation

npm i @mondra/ui-components --save

Usage

Here is a quick example to get you started, it's all you need:

import * as React from 'react'
import ReactDOM from 'react-dom'
import { Input } from '@mondra/ui-components'

function App() {
    return <Input placeholder="Sample mondra text input" />
}

ReactDOM.render(<App />, document.querySelector('#app'))

Contribute

Mondra team members can contribute to development of new components or modify existing components.

Problem Statement: Component library's react version must be upgraded to v18 which will introduce breaking changes for CorP [v17]

Why we need to increase react version in Library, because some other dependencies strictly wanted the latest version of the library and SaaS is already on the latest version. Solution: Upgrade Library and Keep Supporting CorP until we are ready to migrate to all latest tech stack.

Steps:

• Created a branch call v2.x.x-legacy to support any hotfixes or minor features for CorP
• We will continue to use our main branch is the latest version, lets say package version is v3.x.x. - We have lot of design changes or upcoming latest components or configurations, even other dependencies can be upgraded.
• SaaS will use v3.x.x package - any features or bug fixes will go into main branch as PR like we do currently.
• CorP or anyother project which is not ready to use v3.x.x and require fix or feature - we checkout to v2.x.x-legacy branch and create a PR
  • Remove the node_modules
  • Install the node_modules as this branch has different package-lock.json
  • If any other library updated or installed new package then make sure package-lock.json is committed
  • Bump the minor or patch version under v2.x.x
  • Once the PR is completed
  • Build the project and do the npm publish --tag legacy

This way we support two lines of major versions of the library.

Develop

• Clone components project from here - [email protected]/ProArchITSolutions/Mondra/_git/Mondra.UIComponents
• npm install in the root directoy
• npm run storybook:watch-css to see the all the components in action in local enviroment

• Checkout to your own branch feature/<branch-name> or bug/<branch-name> from main or master branch
• What are you waiting for :smile: , go ahead and do some JSX, update any component or add new component to src/components directory
• Write stories for the respective component in *.stories.js|ts file
• Add tests
• Update CHANGELOG.md
• Bump the version appropriately in package.json X.X.X - Major.Minor.Patch
• Once changes are commit & complete the PR with title matching above version number. Also include storybook screenshot related to changes

Build

Now master branch is upto date as per latest features or bug fixes

• npm run build -- Build the binaries
• npm publish -- This will publish the latest version of the library into npmjs.com or
• npm run publish-lib -- which will do same as above

Publishing a Beta Version

To publish a beta version of your package, follow these steps:

1. Update the Version: Ensure your package.json includes a version with a -beta suffix (or similar). For example:

   {
       "version": "1.0.0-beta.1"
   }

2. Publish the Beta Version: Use the following command to publish the package under the beta tag:

   npm publish --tag beta

   This ensures that the beta version will not be installed by default when users run npm install, unless they explicitly request it.

3. Verify the Published Version: After publishing, you can verify the published version using:

   npm info @mondra/ui-components

4. Additional notes:

• To update the beta version, increment the version number (e.g., 1.0.0-beta.2) and run the npm publish --tag beta command again.
• Once you're ready to release the stable version, simply publish without the --tag flag:

  npm publish

Test

Each component must have set of unit tests to confirm the user experience & behaviour. Unit tests are run using Jest runner & @testing-library/react is used for tests which has gread dom testing utils API and also by extends jest API.

• npm run test -- Verifies all unit test cases
• npm run test:watch -- To run tests while development mode

Code smells & formatting

Each typescript, react component file is being validated or formatted before the git commit. EsLint & Prettier are doing their job to keep code validated, formatted uniform across development team. Husky adds more features on top of git commands to achieve this.

• git commit -am "Check what happens" -- This runs both eslint & prettier formatting before commiting changes

Lint

This project uses @mondra/code-format-config library which defines some set of rules in ESLint and Prettier. These rules should be passed before you can commit any code.

Developer can use rvest.vs-code-prettier-eslint extension in VS-Code which will auto-format the file and fix most of the list related issues automatically.

Potential issues while developing apps

• Issues with hooks when lib used in the react app, could be because of the multiple react instances running when we use npm link. This needs to be addressed

License

See in LICENSE.md