npm package: @jll-tdim-emea-dev/web-ui
Description: React Components and Storage for web apps.
Author: Oleksii Sorokin
Latest version: 2.0.0

# JLL Web User Interface (WUI) 
React Components and Storage for web apps.

## Install WUI
You need to have installed [Node.js](https://nodejs.org/en/) >= v8.11.1 and [npm](https://docs.npmjs.com/getting-started/what-is-npm) >=5.4.0 

NPM packages is private, to get package you will need use Access Token or login with password. 

```sh
cd project_folder
yarn add @jll-tdim-emea/web-ui
```
or
```sh
cd project_folder
npm i -P @jll-tdim-emea/web-ui
```

##Usage
Here is a quick example to get you started, it's all you need:

#####With Store
```jsx
import React from 'react';
import { render } from 'react-dom';
import ThemeProviderWithStore from '@jll-tdim-emea/web-ui/components/ThemeProvider';
import Button from 'material-ui/Button';

const reduces = { ... }; //stores

function App() {
  return (
    <ThemeProviderWithStore stores={rootReduces}>
      <Button variant="raised" color="primary">
        Hello World
      </Button>
    </ThemeProviderWithStore>
  );
}

render(<App />, document.querySelector('#app'));
```

#####Without Store
```jsx
import React from 'react';
import { render } from 'react-dom';
import { ThemeProvider } from '@jll-tdim-emea/web-ui/components/ThemeProvider';
import Button from 'material-ui/Button';

function App() {
  return (
    <ThemeProvider>
      <Button variant="raised" color="primary">
        Hello World
      </Button>
    </ThemeProvider>
  );
}
render(<App />, document.querySelector('#app'));
```

#####Basic Usage any Component
```jsx
import React from 'react';
import { render } from 'react-dom';
import ButtonProgress from '@jll-tdim-emea/web-ui/components/ButtonProgress';

function App() {
  return (
     <ButtonProgress progress variant="raised" color="primary">
       Hello World
     </ButtonProgress>
  );
}

render(<App />, document.querySelector('#app'));
```

The most important components are ThemeProvider and ThemeProviderWithStore.

ThemeProvider - provide styling configuration.<br>
ThemeProviderWithStore - provide styling configuration with creating stores(Redux).

You can create stores(Redux) without styling using StoreProvider component.

## Available Scripts

####!!Before publish application you need to update version in `package.json`!!
In the project directory, you can run:


### `yarn start` or `npm start`

Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.<br>
You will also see any lint errors in the console.

### `yarn build-lib` or `npm run build-lib`

Builds the app for npm relese to the `build` folder.<br>
Your app is ready to be deployed!

### `yarn lint:js` or `npm run lint:js`
Will check and try to fix errors with [ESLint](https://eslint.org/), [Prettier](https://prettier.io/) in `src` folder.

## Publish to NPM


### `npm publish ./build`
Publish new version to [npmjs.com](https://www.npmjs.com/)

##Components
OKTA has a lot of different components to cover all parts of authorization needs.
Because authorization and routing is very closely one to other this package include
 components with routing.

- [ThemeProvider](#themeprovider)
  - [ThemeProviderWithStore](#themeproviderwithstore)
- [StoreProvider](#storeprovider)
- [Section](#section)
- [ProgressFixed](#progressfixed)
- [ProgressComponent](#progresscomponent)
- [LoadingComponent](#loadingcomponent)
- [NavLinkWithTheme](#navlinkwiththeme)
- [ButtonProgress](#buttonprogress)
- [AlertConfirmBase](#alertconfirmbase)

##ThemeProvider
Basic Style Provider component

    import { ThemeProvider } from '@jll-tdim-emea/web-ui/components/ThemeProvider';

- `portals` - Array of React Component render list of components.
 Use ONLY for render components as react portals.
- `theme` - Function for creating theme [createMuiTheme](https://material-ui-next.com/customization/themes/) and overwrite basic theme.
- `cssNormalize` - Boolean use Normalize from [material-ui](https://material-ui-next.com/style/css-baseline/).
  Default ```true```
- `font` - Object Font will used in hole application, below default font.
  Default font will be used by default.
  ```js
  const font = {
        name: 'Source Sans Pro',
        fallback: 'Arial, sans-serif',
        families: ['Source Sans Pro', 'Source Sans Pro:300,400,600,700'],
      }
  ```

##StoreProvider
Provider for reducers/stores

    import StoreProvider from '@jll-tdim-emea/web-ui/components/StoreProvider';

- `stores`* - Object with reducers/stores

##ThemeProviderWithStore
Wrapper for [ThemeProvider](#themeprovider) and [StoreProvider](#storeprovider)
  get all props for both. Will provide theme plus stores.

    import ThemeProviderWithStore from '@jll-tdim-emea/web-ui/components/ThemeProvider';
    
##Section
Provider for reducers/stores

    import Section from '@jll-tdim-emea/web-ui/components/Section';

- `title` - React Component or String. For page title
- `variant` - String. Style variant for title from [](https://material-ui-next.com/style/typography/)
- `component` - String. With tag name for content, default ```section```
 
##ProgressFixed
Fixed global loader with material ui loader and main brand color based on [ThemeProvider](#themeprovider)

    import ProgressFixed from '@jll-tdim-emea/web-ui/components/ProgressFixed';


##ProgressComponent
Local(in block section) loader with material ui loader and main brand color based on [ThemeProvider](#themeprovider)

    import ProgressComponent from '@jll-tdim-emea/web-ui/components/ProgressComponent';

##LoadingComponent
Component for fetching data from server or waiting some operation.
It has loading state and states with no data or error message.

    import LoadingComponent from '@jll-tdim-emea/web-ui/components/LoadingComponent';

- `fetching`* - Boolean loading state
- `isEmpty` - Boolean if is empty component and fetching is finished
- `errorMessage` - String if need to show error
- `emptyMessage` - String if no data after fetch to show some empty data message

##NavLinkWithTheme
Wrapper for [NavLink](https://reacttraining.com/react-router/web/api/NavLink) with theme colors.

    import NavLinkWithTheme from '@jll-tdim-emea/web-ui/components/NavLinkWithTheme';

- `to`* - only Object loading state. [NavLink](https://reacttraining.com/react-router/web/api/NavLink)
- `variant` - String ```primary``` or ```secondary```

##ButtonProgress
Wrapper for [material-ui button](https://material-ui-next.com/demos/buttons/) with loader inside

    import ButtonProgress from '@jll-tdim-emea/web-ui/components/ButtonProgress';

- `progress` - Boolean


##AlertConfirmBase
Wrapper for [material-ui button](https://material-ui-next.com/demos/buttons/) with loader inside

    import AlertConfirmBase from '@jll-tdim-emea/web-ui/components/AlertConfirmBase';

- `agreeLabel` - String text in Button apply
- `cancelLabel` - String text in Button cancel
- `apply` - Function in Button apply
- `cancel` - Function in Button cancel
- `title` - String for Dialog title 
- `description` - String for Dialog description