JLL Web User Interface (WUI)

React Components and Storage for web apps.

Install WUI

You need to have installed Node.js >= v8.11.1 and npm >=5.4.0

NPM packages is private, to get package you will need use Access Token or login with password.

cd project_folder
yarn add @jll-tdim-emea/web-ui

or

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

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

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

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. 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. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. 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. Your app is ready to be deployed!

yarn lint:js or npm run lint:js

Will check and try to fix errors with ESLint, Prettier in src folder.

Publish to NPM

npm publish ./build

Publish new version to 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
  • ThemeProviderWithStore
• StoreProvider
• Section
• ProgressFixed
• ProgressComponent
• LoadingComponent
• NavLinkWithTheme
• ButtonProgress
• 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 and overwrite basic theme.
• cssNormalize - Boolean use Normalize from material-ui. Default true
• font - Object Font will used in hole application, below default font. Default font will be used by default.

  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 and 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
• component - String. With tag name for content, default section

##ProgressFixed Fixed global loader with material ui loader and main brand color based on 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

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 with theme colors.

import NavLinkWithTheme from '@jll-tdim-emea/web-ui/components/NavLinkWithTheme';

• to* - only Object loading state. NavLink
• variant - String primary or secondary

##ButtonProgress Wrapper for material-ui button with loader inside

import ButtonProgress from '@jll-tdim-emea/web-ui/components/ButtonProgress';

• progress - Boolean

##AlertConfirmBase Wrapper for material-ui button 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