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.
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.
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.
Our React and HTML components are designed to work as intended in the following browsers:
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!
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.
node
and npm
are accessible from the command line and NPM version is >= 3.0.0yarn
works as well as a replacement for npm
.npm login --registry=https://npm.addevcloudservices.com.au --scope=@myob
npm install
(or sometimes sudo npm install
)npm update
once a day to stay up to date with latest dependencies versions per package.json
file.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 Storybooknpm test
to run tests. Monitor specs changes to run them again automaticallynpm run coverage
to run tests with code coverage.npm run build
to build the project for distributionRELEASE=patch npm run release
to test, tag and publish to the NPM repository a production version of the projectReact 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"
Running the tests with npm run coverage
generate code coverage metrics.
You can find them inside the coverage
folder.
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 patchnpm run minor-release
to release a minor versionnpm run major-release
to release a major versionKeep the CHANGELOG.md
file according to these common sense recommendations: http://keepachangelog.com/
If you’re new to React and the other technologies used with our components, please check out the following links: