Mozart UI Library

React UI Libaries

To use mozart ui library for your current project

Webpack config

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:

Step 1:

Make sure all Mozart components accumilate all logics that the one it replacing currently implemented.

Step 2:

Go into nextgenbha and do then needful ( Switch out the old components with mozart components )

Step 3:

Only delete the old components if they are not being used anywhere else ( any other repos )

Create new components

To create a new component.

Branching

• 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

Naming convention

• 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)

Styling

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

Coding style

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).

Recommend read https://drboolean.gitbooks.io/mostly-adequate-guide-old/content/ch1.html

Local Development

• If old component having scss file. Remove scss file and move everything to styled components.
• Add the components into App.js
• Run 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:[email protected]/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