# principles-ui-components

Supporting UI controller for Tizen TV web application, which developed base on React Framework.

## Installation

```shell
npm install --save principles-ui-components
```

## Importing

```js
e.g.
import { BasicButton, ToolTip } from 'principles-ui-components'; // ES6

## Usage

Based on JSX, provides syntactic sugar for the React.Component.
Here is an example of using BasicButton with a React component, which also
documents the different validators provided:

```jsx
import { BasicButton, ToolTip } from 'principles-ui-components';

class MyComponent extends React.Component {
  render() {
    return (<BasicButton />);
  }
}

## How to Depend on This Package?

For apps, we recommend putting it in `dependencies` with a caret range.
For example:

```js
  "dependencies": {
    "principles-ui-components": "^1.1.0"
  }

And apps should configure babel-loader for this package.

module: {
        loaders: [
			{
				test: /\.js$/,
				loader: 'babel-loader',
			}
        ]
}

## image resource issue?

This package inculde images, like controller background, loading and progress circle icon. To move the path 'images' from 'node_modules/principles-ui-components' to apps root path, at the same path with 'index.html'.


## Issue list:
1. 	// ImmutableJS data structures like List and Map imparts the immutability feature to only the level-1 members of the List/Map. (inside is still a standard JavaScript object)
	// So, if objects inside arrays or arrays inside objects and want them too to be immutable, the choice is Immutable.fromJS.
	import { is, Map, fromJS } from 'immutable';     
	"!(is(Map(nextProps), Map(this.props)));" change to "!(is(fromJS(nextProps), 
	fromJS(this.props)));"
2.	// Since the release of React v15.5.0 React.PropTypes is deprecated and has moved to another library.  
	//"npm install prop-types"
	"import { PropTypes } from 'react';" change to "import PropTypes from 
	'prop-types';"
3.	//expect(...).to.be(...) is a syntax used by Enzyme(which is Chai), Jest uses a different Expect library.
	//so expect(...).to is undefined, hence to.equal is calling equal on undefined. change it to expect(...).toEqual(...) https://facebook.github.io/jest/docs/expect.html
	"expect(...).to.be(...)" change to " expect(...).toEqual(...)"
4. 	//remove "!(is(fromJS(nextState), fromJS(this.state)))" from "shouldComponentUpdate" when components have no state, for improve unit test branches coverage.
5.	//Jest processor that prevents CSS module parse errors: -> //https://github.com/justinsisley/Jest-CSS-Modules
	npm install --save-dev jest-css-modules
	//Update your package.json file's jest configuration:
	{
	  "jest": {
		"moduleNameMapper": {
		  "\\.(css)$": "<rootDir>/node_modules/jest-css-modules"
		}
	}