MVF PRODUCT COMPONENTS

Package that contains all internal MVF product react components

Changelog

• v16 changelog

Local Install

1. First, run git clone [email protected]:mvfglobal/mvf-localstack.git and set it up using setup instructions of the project.

2. Then, run git clone [email protected]:mvfglobal/mvf-product-components.git.

3. Run make setup to initialise and start the project.

   • make setup must be run the first time, it does a bunch of one of things, e.g. build image.
   • if you just want to start / restart project run make, it is much faster!

4. Find development storybook deployed at http://mvf-product-components.localhost:2000/

5. Find production storybook deployed at https://mvf-product-components.mvfglobal.com/

Creating Components

Please install and use Folder Templates vscode extension to create components. This extension allows us to create a templated folder with all necessary component files in the right structure. The Component template is already created in the .fttemplates/React Component folder you DO NOT have to make your own. To create a templated folder simply right click on the folder where you want to create a component, e.g. Atoms folder, and select "Create New Templated Folder", You will see a text field appear, enter component name using PascalCase convention then press enter to create new component folder.

Coding Standards

We are mostly using Airbnb JavaScript Style Guide with a few exceptions.

Exceptions:

• 6.1 Use single quotes '' for strings. eslint: quotes
• 10.3 And do not export directly from an import.
• 11.2 Don’t use generators for now; This rule only matters in browsers, also, we use redux sagas so this is not really possible.
• 17.2 Don't use selection operators in place of control statements; We tend to use this within jsx code but not in standard js code.
• 19.7 Leave a blank line after blocks and before the next statement; We follow this mostly with a few exceptions.
• 26 jQuery; Just don't use it.
• 27 ECMAScript 5 Compatibility; transpilers handle compatibility issues.

The code base is written in typescript so there are a few exceptions but for the most part you can apply javascript rules to typescript without interpretation.

After merging

After you have merged a PR to master, you need to rebuild and publish the components to npm. Currently we are publishing the next branch, which has a later version of mui installed than master branch.

You will need to have node and typescript installed locally for this command to work, please ensure that your local version matches what is listed in the project.

1. Ensure your npm account is listed under the mvf organisation and that you are a maintainer of the project @mvf/product-components.
2. Log in to npm on command line with npm login and follow the prompts, including using your 2FA npm password.
3. Checkout the next branch git checkout next && git pull
4. Use one of the following make publish commands to publish changes, please use semantic versioning:
   • make publish kind=patch - Use this if your change is a bug fix and is backwards compatible.
   • make publish kind=minor - Use this if your change adds new functionality and is backwards compatible.
   • make publish kind=major - Use this if your change is not backwards compatible.
5. This command will create a commit and publish a new version of the npm package, which you can then use where required