Using MYOB Components

Our components are a collection of front-end interface elements that can be reused across the MYOB browser-based products.

We offer two variations of components — React components and HTML variations where applicable. If your project can utilise React components then it is recommended to use these going forward. Using React components in your project enables MYOB to adhere to a consistent interactive experience that will scale over time and help reduce technical debt throughout our web-based product lines.

React widgets

Our MYOB widget repository contains the common React widgets used by our web-based products. You will need private Github access to this repository to begin working with MYOB widgets at this stage. Please contact someone in the #ex-myob-widgets MYOB Slack channel to enable this or your dev manager.

Please note — not all our React widgets from Github are synched on the Feelix website (yet!) so always visit the Github repository for latest updates.

Our widgets are seeded and use Facebook Create React App under the hood.

Contributing to our React widgets

We encourage all MYOB developers to contribute to our React widget library. Always ask on the #ex-myob-widgets Slack channel first if you wish to contribute/amend a component to align with others.

Technical details on contributing can be found here.

Browser support

Our React and HTML components are designed to work as intended in the following browsers:

Internet Explorer 10
(or later)
Chrome
(latest two versions)
Firefox
(latest two versions)
Safari
(latest two versions)

Our components are not optimised to work responsively at this stage (although most are fluid) so if you would like to help make them respond better in the browser, please ask on the #ex-myob-widgets or #ex-myob-styles Slack channel. Contributions are most welcome!

Third party installation of this project

The project is available as an NPM package and deployed in our private NPM registry: https://npm.addevcloudservices.com.au/

For information about how to access our NPM registry, look here: https://myobconfluence.atlassian.net/wiki/display/ADPD/Internal+NPM+registry

npm install @myob/myob-widgets

The dist directory contains the pre-packaged distributable files.

Requirements

Latest NodeJS (http://nodejs.org/) - Make sure node and npm are accessible from the command line and NPM version is >= 3.0.0
yarn works as well as a replacement for npm.
Any recent Node is acceptable for running the project locally and v4+ is preferred.

Install NPM dependencies

Make sure you add MYOB private NPM regitry to download your packages: npm login --registry=https://npm.addevcloudservices.com.au --scope=@myob
npm install (or sometimes sudo npm install)

Refresh your NPM dependencies once a day

npm update once a day to stay up to date with latest dependencies versions per package.json file.

Development/Production

This project is written in Javascript ES2015 and uses Babel (http://babeljs.io/) to transpile future standard compliant syntax to today’s browser Javascript. NPM is used to run the different commands of the build pipeline, and Webpack (http://webpack.github.io/) is used under the scenes to build the project.

npm start to run the storybook (http://localhost:9001/)
npm run storybook to run React Storybook
npm test to run tests. Monitor specs changes to run them again automatically
npm run coverage to run tests with code coverage.
npm run build to build the project for distribution
RELEASE=patch npm run release to test, tag and publish to the NPM repository a production version of the project

React Storybook

React Storybook is a framework for testing and developing UI components in isolation. A story defines a use case for a component. They typically take the form:

storiesOf('Button', module)
  .add('Primary', () => (
    <Button type="primary" onClick={action('click')}>Click me</Button>
  ))

Start the storybook by running npm start and access it at http://localhost:9001/. Additional stories can be created under /stories. New files must first be registered under /.storybook/config.

You can view the MYOB widget storybook examples here.

Run npm run lib
In your project package.json, specify local path for myob_widget package.

"@myob/myob-widgets": "/#{local_path}/myob_widgets"

Code coverage

Running the tests with npm run coverage generate code coverage metrics. You can find them inside the coverage folder.

This project uses semantic versioning

When changes happen to the project and you want to publish those changes (until CI does it), please follow semantic versioning for numbering. NPM relies on it. Head to http://semver.org to learn more. A summary to get you started quickly can be found on this page: https://docs.npmjs.com/getting-started/semantic-versioning

Version is bumped and tagged automatically when running RELEASE=patch npm run release. Your Git local repository must be clean (everything is committed) before trying to release. The version is bumped according one of those parameters: “patch”, “minor”, “major”, “prepatch”, “preminor”, “premajor”, “prerelease”. Example: RELEASE=minor npm run release

Release shortcuts for convenience:

npm run patch-release to release a patch
npm run minor-release to release a minor version
npm run major-release to release a major version

Keep the CHANGELOG.md file according to these common sense recommendations: http://keepachangelog.com/

Learning React, React Router, Flux, Webpack, Jasmine and ES6

If you’re new to React and the other technologies used with our components, please check out the following links:

Getting Started