moq-ui/README.md

Simple, customizable UI components built with React

# Moq UI

Moq UI is a set of simple and extensible user interface components built 
with [React](http://facebook.github.io/react/). 

It borrows from the [Material UI](http://material-ui.com/) project
in terms of code organization, but provides only a minimal theme and
a few components.

## Setup this project

    $ git clone https://bitbucket.org/miksula/moq-ui.git
    $ cd moq-ui/
    $ npm install

## Run tests

Run command line test suite with:

    $ npm test

## View examples

In order to run and view the examples `npm install serve -g`
and: 

    $ npm run examples

Now you can browse the `examples/` folder (this assumes the
`serve` command to be available globally.)

## Watch for changes 

To watch for (and build) changes:

    $ gulp watch

This is used to build the applications inside the `examples/`
directory.  

## Install from npm

    $ npm install moq-ui --save

## Include components

Once moq-ui is installed, you can include components easily:
```js
/** CustomButton.jsx */

var React = require('react'),
  moq = require('moq-ui'),
  Button = moq.Button;

var CustomButton = React.createClass({

  render: function() {
    return (
      <Button label="Click me!" />
    );
  }

});

module.exports = CustomButton;
```

In order to use non-default theme utilize the ThemeManager and
set the 'uiTheme' context type:
```js
var React = require('react'),
  moq = require('moq-ui'),
  Button = moq.Button,
  ThemeManager = moq.Styles.ThemeManager;

var CustomButton = React.createClass({

  childContextTypes: {
    uiTheme: React.PropTypes.object
  },

  getChildContext: function() {
    var type = ThemeManager.types['PURE'];

    return {
      uiTheme: new ThemeManager().setTheme(type)
    };
  },

  render: function() {
    return (
      <Button label="Hello world!" primary={true} />
    );
  }
 
});

module.exports = CustomButton;
```