npm package: @manageiq/react-ui-components
Description: React based ui components for ManageIQ project.
Latest version: 0.11.71

# React UI Components for ManageIQ
[![Build Status](https://travis-ci.org/ManageIQ/react-ui-components.svg?branch=master)](https://travis-ci.org/ManageIQ/react-ui-components)
[![Chat](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ManageIQ/manageiq/ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

Documentation (Storybook): [react-ui-components.surge.sh](https://react-ui-components.surge.sh)

## Technologies

Most components are using these libraries:
* [React](https://github.com/facebook/react)
* [ReactDOM](https://github.com/facebook/react/tree/master/packages/react-dom)
* [PropTypes](https://github.com/facebook/prop-types)
* [Redux](https://github.com/reactjs/redux)
* [ReactRedux](https://github.com/reactjs/react-redux)

### Build process

Build process is using [webpack](https://github.com/webpack/webpack) which is set to extract
[external](https://webpack.js.org/configuration/externals/) libraries so the final library is as small as possible.

Webpack is used to build [library](https://webpack.js.org/guides/author-libraries/#expose-the-library) so the final
files can be imported into any other application. Library target is set to [umd](https://github.com/umdjs/umd).

#### List of external libraries
* React
* ReactDOM
* PropTypes
* Redux
* ReactRedux
* ReactSelect
* PFReact
* Lodash

Settings of these externals can be found in [constants.js](/scripts/constants.js). Importing any of these libraries will
not make final file bigger, but importing such file needs to ensure, that libraries used in this component are loaded.

## Architecture
## Development Environment
This library uses LTS of Node environment, to start coding you have to run
```bash
$ [npm|yarn] install
```

No matter what tool you choose to develop with you have to run to load external dependencies.
```bash
$ [npm|yarn] run vendor
```

### Development tools
To create new set of components you can create new folder inside `src/` folder with `index.js` as entrypoint to your new
components, where you will export [components|reducers|actions] for other application to use. To create custom styles for
your components, create `[style|styles|index].scss` next to `index.js` as entrypoint to your styles.

To properly use storybook and tests you have to create two folders inside your component's folder.

1. `stories` for storybook
2. `tests` for jest tests

### Local development
You can choose from three ways of how to code and test your application on local machine.

#### 1. `[npm|yarn] start`

It will automatically watch your files and store final files into `dist` folder.

This way you can create some components, use [yarn link](https://yarnpkg.com/en/docs/cli/link) to create a symlink and use `yarn link @manageiq/react-ui-components` inside your server application to include these components and debug them inside your environment.

#### 2. `[npm|yarn] run server`

It will automatically watch your files, run [webpack-dev-server](https://github.com/webpack/webpack-dev-server) and
serve your new components in demo app. To use your newly created components feel free to change `demo/demo-app.jsx` to include
your components and you can debug them in node server environment.

The server will run at http://localhost:8080.

#### 3. `[npm|yarn] run storybook`
It will automatically watch your files and presents them using [storybook](https://storybook.js.org/), if you want
to use your new components, edit stories inside [stories/index.stories.js](/stories/index.stories.js) and debug them in
nice storybook UI.

The storybook server will run at http://localhost:6006.

#### Binding `this` to methods
You have two ways how to create methods inside classes. One is based on babel using [preset-stage-0](https://babeljs.io/docs/plugins/preset-stage-0/), the other is based on decorators using
[autobind-decorator](https://github.com/andreypopp/autobind-decorator)

1. Babel based method
```javascript 1.8
import * as React from 'react';

export class ExampleClass extends React.Component {
  someMethod = () => {
    //some work with this, which is component's this
  }
}
```

2. Decorator based method
```javascript 1.8
import * as React from 'react';
import autobind from 'autobind-decorator';

export class ExampleClass extends React.Component {
  @autobind
  someMethod() {
    //some work with this, which is component's this
  }
}
```

## License

The gem is available as open source under the terms of the [Apache License 2.0](https://opensource.org/licenses/apache-2.0).