RBX UI Components

Rockabox's UI components, built using AngularJS, PostCSS, SUIT CSS and webpack.

View them at http://rbxuicomponents.s3-website-eu-west-1.amazonaws.com.

Getting Started

1. Install Node.js.

2. Install global packages (Bower, Grunt, Webpack and Webpack-dev-server):

   npm install -g bower grunt-cli webpack webpack-dev-server

3. Install dependencies:

   npm install && bower install

4. Run the dev server:

   npm start

5. Browse to http://localhost:7000/.

Running Unit Tests

Run with:

grunt unit

Do not run unit tests directly with Karma; the grunt tasks are required to set the timezone correctly for PhantomJS.

Release Process

1. Ensure all pull requests intended for next version have been merged to master
2. Determine semantic version number (MAJOR.MINOR.PATCH)
3. Create release branch (as MAJOR.MINOR.PATCH) from master
4. Open pull request from release branch to master
5. Bump version in bower.json and package.json on release branch
6. Update Changelog on release branch
7. Approve and merge, but keep release branch
8. Create release
9. Delete release branch
10. 🎉

Guidelines For Making New Components

Use the rb-component Yeoman generator when starting a new component.

Keep the structure and design pattern of new components consistent with those that have come before.

Angular Directive Guidelines

• Use attributes to pass modifiers and single line contents (titles, labels etc.) into an isolated scope. For an example, look at the header attribute in rb-data-summary-item
• Use transclusion where the main content of a directive needs to be flexible enough to handle an unknown structure. For an example, see the transclusion in rb-data-summary-item.
• Follow a wrapper & item pattern for components that need multiple transclusion. For an example see the rb-data-summary and rb-data-summary-item directives.
• Split large functions (like link functions) into separate Webpack modules to keep things simple. For an example see rb-currency-display-link.js
• Provide a component demo that shows all combinations of different modifiers and settings.