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 #feelix 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 #feelix Slack channel first if you wish to contribute/amend a component to align with others.

Technical details on contributing can be found here.

Contact

For more information, advise or help with publishing please contact one of our advocates.

Name	Crew	Location
Tim Weightman	Particle	Melbourne
Andrew Bail	Particle	Melbourne
Jon Price	Particle	Melbourne
Mike Trilford	Particle	Melbourne
Amy Dreise	Tardigrade	Sydney
Drew Schrauf	Tardigrade	Sydney
Richard Lopes	Rogue Squadron	Auckland

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 #feelix 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 >= 5.0.0
yarn works as well as a replacement for npm.
Any recent Node is acceptable for running the project locally and v9+ 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.

Getting Started

Visit the Feelix repo

git clone git@github.com:MYOB-Technology/Feelix.git

📦 Install & Bootstrap

Install lerna and bootstrap all package dependencies
Symlink together all Lerna packages that are dependencies of each other.

npm install && npm run bootstrap

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 developing locally on storybook

Builds and runs styles and widgets and watches for changes.
This runs the local Storybook website on http://localhost:9999
Additional stories can be created under /packages/myob-widgets/stories/.
New files must first be registered under /packages/myob-widgets/.storybook/config.js.
React widgets can be added/edited here /packages/myob-widgets/src/components/
Styles can be added/edited here /packages/myob-styles/vendor/assets/

npm run dev:storybook

💻 Development commands

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.

Run linting over widgets

npm run lint

To run tests. Monitor specs changes to run them again automatically

npm run test

Running the tests with npm run coverage generate code coverage metrics. You can find them inside the coverage folder in myob-widgets package.

npm run coverage

✔ Test your local component in your project

To use local myob_widgets / myob_styles code as dependency in your project to test the component:

Link the local myob-widgets / myob-styles packages

Note this will automatically run the prepublish scripts for widget and styles

npm run linklocal

In your other local project

npm link @myob/myob-styles && npm link @myob/myob-widgets

After this, changes to your local myob-widgets or myob-styles packages may require running prepublish from the Feelix monorepo.

npm run prepublish

🚀 Publish

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

We advise that publishing is done via one of our advocates, please ask in the slack channel #feelix or contact one of our advocates directly.

🏗 Prepublish all packages

To test build styles and widgets without publishing them to the NPM you can use the prepublish command.

Builds styles into the dist folder
Runs tests, coverage, builds widgets into the lib folder

npm run prepublish

🛠 Publish

Publishes both styles and widgets to respective npm packages.
Currently lerna is set to “independent” mode, meaning package versions are not synced.
Lerna will ask you the parameters: “patch”, “minor”, “major”, “prepatch”, “preminor”, “premajor”, “prerelease” and the version is bumped accordingly.

npm run publish

🚚 Deployment

Deployment is designed for widget and styles documentation in the form of feelix.myob.com and feelix.myob.com/storybook.

Both are build to public folders and then copied to gh-pages branch.

The deployment of Feelix.myob.com will require the setup of hugo. At the moment this deployment can be done by the Particle crew.

Feelix.myob.com hugo site is built to it’s public folder and then copied into the gh-pages branch.
Storybook is built to it’s public folder and then copied into the gh-pages branch.

npm run deploy

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: