- 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.
- 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.
Mondra Web UI Storybook - Variaty of UI components, style guide is documented with live examples in here.
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
npm i @mondra/ui-components --save
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'))Mondra team members can contribute to development of new components or modify existing components.
- Clone components project from here - ProArchITSolutions@dev.azure.com/ProArchITSolutions/Mondra/_git/Mondra.UIComponents
-
npm installin the root directoy -
npm run storybook:watch-cssto see the all the components in action in local enviroment
- Checkout to your own branch
feature/<branch-name>orbug/<branch-name>from main or master branch - What are you waiting for 😄 , go ahead and do some JSX, update any component or add new component to
src/componentsdirectory - Write stories for the respective component in
*.stories.js|tsfile - Add tests
- Update CHANGELOG.md
- Bump the version appropriately in
package.jsonX.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
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
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
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
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.
- 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
See in LICENSE.md