Mozart UI Library
React UI Libaries
To use mozart ui library for your current project
You need a seperated configuration for vendor css if you don't have react-bootstrap css included
-> Create a scss and import the app.scss @import './../../node_modules/mozart-ui/lib/style/app.scss'; -> Create a webpack.vendor.js and use the above scss as entry
New Design for nextgenbha
The new design project alone is a big one and It is a great chance to refactor and improve our code.
If you get request to create a new component for the new design. Or just a tweak for current component, It is ideal to create a new separated component. But make sure put it inside Mozart folder so that in the future we know which one from which.
Once we have built enough components to switch out most of Mozart screen. Our plan is:
Make sure all Mozart components accumilate all logics that the one it replacing currently implemented.
Go into nextgenbha and do then needful ( Switch out the old components with mozart components )
Only delete the old components if they are not being used anywhere else ( any other repos )
Create new components
To create a new component.
- Create new branch (feature branch) Example: SOCIAL-23467
- Once done merge into dev
- When ready for qa team to test so a Pull request into prerelease branch so that others can review
- Others review and merge into prerelease
- Before release to production the admin will review again all changes that go into master that will be deployed as the new version of mozart-ui library
- If it is a Mozart specific ( meaning new design ), make sure you name it as such Mozart..... (Example MozartPopup, MozartTextBox ...). We already had a folder Mozart for this purpose
- If it is generic ( meaning just a style component css only no logic or bare minimum ), make sure you it doesn't duplicate and placed inside Style folder. (Example Grid, Row, Col)
We are using styled-components so there is no need for separated css file. Also no need for lengthy classname or switching files to write css. I am lazy. https://github.com/styled-components/styled-components
We trying to follow strict stateless funtional component. No longer using class to create react component. It will be just functions and functions. No need to worry about this, bind... I am lazy. And no state so keep it pure. If somehow you need to use state to manage logic for the components, make it as a prop so that it will be handled from higher level components. If you must use state for your components, just use es6 class (some cases).
- If old component having scss file. Remove scss file and move everything to styled components.
- Add the components into App.js
yarn run start
- Open the app from web browser to test
If you need to test your development from another repo that using mozart-ui
In package.json of the other repo, create a script as below:
mozart-ui-local": "yarn remove mozart-ui && yarn add https://github.com/binaryfountain/mozart_ui.git#prerelease
mozart-ui": "yarn remove mozart-ui && $(echo yarn add git+https://$GIT_ACCESS_TOKEN:firstname.lastname@example.org/binaryfountain/mozart_ui.git#$MOZART_UI_BRANCH)
You can specify which branch to install. Just change the branch from prerelease to the branch you used to develop and run
npm run mozart-ui