This project comprises all styles, behaviour and interfaces for mozilla/payments
Watching for file changes in development.
We're using webpack to build a JS bundle
If you're using payments-env to have the complete payments-ui you'll want to use
grunt start to watch for file changes.
If you're running things standalone then
grunt service runs the webpack dev-server.
enabling eslint (see below for how to configure vim + syntastic). Alternatively
just run the
grunt eslint command which is self-contained.
Eslint Vim settings (Syntastic)
You'll need the packages listed below installed globally:
npm install -g eslint babel-eslint eslint-plugin-react
Using syntastic, the following snippet turns on eslint selectively for projects with a .eslintrc.
To run the tests run:
Dependency installation and updates
Install grunt-cli globally with
npm install -g grunt-cli
npm install to install the local deps.
npm deps only
We're aiming to only use npm packaged deps rather than bower. This is to be able to
track dep versions in one place.
Libraries + external deps
Normally built artifacts aren't committed. However, to manage dep changes more
tightly libs (JS, CSS + fonts) are committed to the tree.
JS libs are committed from node_modules as webpack knows how to find deps in
Whilst this creates noise it does help ensure deps in the browser
are identical and can't get mangled by a broken deps installation.
Note: the styleguide is in need of an update since the switch to react
The styleguide is based on the styles and templates that live in the tree.
It can be build statically with the
grunt build-docs command.
The styleguide is published here: http://mozilla.github.io/payments-ui/
Updating the styleguide
We're using grunt-i18n-abide to run the extraction commands.
Because we're using React we need to operate on the compiled JS file. This also means we aren't running extraction
on un-used code.
To run an extraction do the following:
npm install grunt webpack abideExtract