# @jll-tdim-emea-dev/web-ui

> React Components and Storage for web apps.

Latest version **2.0.0** (published 2019-04-02) · 0 weekly downloads

## Install

```sh
npm install @jll-tdim-emea-dev/web-ui
pnpm add @jll-tdim-emea-dev/web-ui
yarn add @jll-tdim-emea-dev/web-ui
bun add @jll-tdim-emea-dev/web-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2019-04-02 |
| First published | 2019-03-29 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 17 |
| Unpacked size | 71.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Oleksii Sorokin |
| Maintainers | ihor.verkhohliad, luis.garcia |

## Links

- npm: https://www.npmjs.com/package/@jll-tdim-emea-dev/web-ui
- npm.io page: https://npm.io/package/@jll-tdim-emea-dev/web-ui

## Dependencies (17)

- [react](https://npm.io/package/react.md) ^16.7.0-alpha.2
- [redux](https://npm.io/package/redux.md) ^4.0.1
- [history](https://npm.io/package/history.md) ^4.7.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.7.0-alpha.2
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.1
- [react-redux](https://npm.io/package/react-redux.md) ^6.0.0
- [redux-thunk](https://npm.io/package/redux-thunk.md) ^2.3.0
- [react-select](https://npm.io/package/react-select.md) ^1.2.1
- [react-scripts](https://npm.io/package/react-scripts.md) ^2.1.1
- [redux-actions](https://npm.io/package/redux-actions.md) ^2.6.4
- [webfontloader](https://npm.io/package/webfontloader.md) ^1.6.28
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^4.3.1
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^3.6.2
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^3.0.1
- [connected-react-router](https://npm.io/package/connected-react-router.md) ^6.0.0
- [redux-devtools-extension](https://npm.io/package/redux-devtools-extension.md) ^2.13.7

## Recent versions

- 2.0.0 (latest) — 2019-04-02
- 1.0.1-3 — 2019-03-29

## README

# 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

---
_Source: https://npm.io/package/@jll-tdim-emea-dev/web-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._