### Installation Go to demo spin.webkom.co/react

1. Make sure you have NodeJS >= 6.0.0 installed on your machine.
2. Go to folder with app `/SPIN-React`
3. Run `npm install` to install nescessary NPM dependecies

##### Usage

- `npm start` - start development mode with Hot Reloading enabled
- `npm run deploy:prod` - compile source to the `dist` directory

### Plugins Used Libraries

##### General

- React ^15.0.0 - Cornerstone rendering engine for the application
- React Bootstrap ^0.30.7 - Port of Bootstrap 3 for React
- Font Awesome ^4.6.3 - Large set of various icons
- React Router ^2.2.0 - Provides routing within the application
- Redux ^3.0.0 - Used for application state management
- Velocity Animate ^1.2.3 - Provides a solid animation system for some components
- React Image Holder ^2.0.1 - Adds placeholder support for the Image component
- IsMobile ^0.4.0 - Detects the device on which the application is running, so some components can adjust to the environment
- Moment ^2.13.0 - Used for time modification and parsing
- Numeral ^1.5.3 - Provides formatting for number types
- PerfectScrollbar ^0.6.13 - Wrapped in a component, which adds styled scrollbars when nescessary
- Pace 1.0.2 - Page loading indicator used mainly when a Webpack Code Split needs to be loaded
- TinyColor ^1.4.1 - Fast color mixing library used in some components
- Underscore ^1.8.3 - Flexible functional data manegement library

##### Charts

- React Highcharts ^8.3.3 - Provides Highcharts support.
- React Sparklines ^1.5.2 - Adds small charts called Sparklines. It is extended by a custom component for additional features.
- React Chartist ^0.10.2 - Adds Chartist support.

##### Build

- Koa ^2.0.0-alpha.3 - Web Server used for serving the application.
- Webpack ^1.12.14 - Advanced system used for modules management. It is backed by a multitude of smaller loaders which add nescessary functionalities.
- Sass Loader ^3.0.0 - Webpack loader which allows the usage of SCSS modules.
- Babel ^6.3.19 - Provides support for ES2015+ and JSX

##### Demo

These libraries are used to generate random data state trees to use in Containers for demonstration purposes.

- Faker ^3.1.0 - Generate fake demo data
- deep-assign ^2.0.0 - Recursive `Object.assign()` - helps building complex data trees

### Reusable Components 1.0

#### Layout

It is the main parent of the application. Provides interaction between child elements, and handles visual styling for them.

- `navbarEnabled<bool>` - Is the Navbar visible (Default: true)
- `navbarFixed<bool>` - Should the Navbar stick to the top edge of the screen (Default: false)
- `sidebarEnabled<bool>` - Is the Sidebar visible (Default: true)
- `sidebarStyle<string>` - (Available options: `default`, `slim`, `bigicons`). Style of the Sidebar (Default: `default`)
- `sidebarFixed<bool>` - Should the Sidebar stick to the top edge of the screen (Default: false)
- `sidebarAside<bool>` - Should the Sidebar be in “Aside mode” - full height of the viewport (Default: false)
- `contentView<string>` - (Available oprions: `static`, `fluid`, `boxed`) How the content should be displayed (Default: `fluid`)
- `footerEnabled<bool>` - Is the Footer visible (Default: true)
- `footerFixed<bool>` - Should the Footer stick to the bottom edge of the screen (Default: false)
- `rightSidebarEnabled<bool>` - Is the Right Sidebar visible (Default: true)
- `headerEnabled<bool>` - Is the Content Header visible (Default: true)
- `headerStyle<string>` - (Available options: `simple`, `breadcrumbs`) `simple` - shows only the current page title; `breadcrumbs` - additionally shows nested breadcrumbs (Default: ‘breadcrumbs’)
- `skinColor<string>` - (Available options: `primary`, `success`, `info`, `warning`, `danger`) - The theme color which is used in the `Sidebar` and `Navbar`
- `sidebarSkin<string>` - (Available options: `dark`, `light`, `color`) - Determines the skin of the Sidebar (Default: `dark`)
- `navbarSkin<string>` - (Available options: `dark`, `light`, `color`) - Determines the skin of the Navbar (Default: `dark`)

##### Layout.Navigation

Parent of the main navigation items - `Navbar` and `Sidebar`

##### Layout.Content

The content of the page should be rendered here

#### AffixWrap

Watches the scroll position and applies affix classes to the provided child

Props:

- `offset<number>` - Offset from top when the Affix should be activated
- `affixAdditionalClass<string>` - Class next to `affix` which will be added to the child if Affixed
- `affixTopAdditionalClass<string>` - Class next to `affix-top` which will be added tot he child if not Affixed

#### Avatars

General Props:

- `size<string>` - (Available options: `large`, `default`, `small`) Size of the Avatar
- `type<string>` - (Available options: `circle`, `rounded`) Shape of the Avatar
- `showStatus<bool>` - Should the status icon be shown
- `statusColor<string>` - Color of the status icon
- `statusBorderColor<string>` - Border color of the status icon (Default: gray-darker)
- `statusPlacement<string>` - (Available options: `top`, `bottom`) Placement of the status icon
- `info<node>` - The info element, should be a `Badge` or a `Label`

##### Child Components (use these)

`AvatarImage` - Embedds an Avatar with an Image provided in `src` property. If the `src` param won’t be valid or there while loading the file - a configurable placeholder will be rendered.

Props:

- `src<string>` - Source Image URL
- `placeholder<node>` - Placeholder item which will be displayed if the Image fails to load. (Default: `<i className='fa fa-user'></i>`)
- `phColor<string>` - Color of the Placeholder (Default: Colors.grayLight)
- `phBackgroundColor<string>` - Background COlor of the Placeholder (Default: Colors.grayDark)

`AvatarText` - Embedds an Avatar with a Text or Icon inside.

Props:

- `backgroundColor<string>` - Background Color (Default: Colors.brandPrimary)
- `color<string>` - Font Color (Default: white)
- `children<node>` - Text to display inside the Avatar

`AvatarIcon` - Embedds an Avatar with an Icon inside

Props:

- `backgroundColor<string>` - Background Color (Default: Colors.brandPrimary)
- `color<string>` - Icon Color (Default: white)
- `children<node>` - Icon to display inside the Avatar

#### Tabs

Extended Tabs from ReactBootstrap.

Additional Props:

- `bsStyle<string>` - (Available options: `default`, `highlight`) defines the style of the Tabs

#### Alerts

Extended Alert from ReactBootstrap.

Additional Props:

- `noBackground<bool>` - Setting to true will make the Alert box without background, with a border accent on the Left side. Accent color will be set accordingly to the `bsStyle` prop.

#### Badges

Extended Badge from ReactBootstrap.

Additional Props:

- `outline<bool>` - Creates an outline version of the Badge
- `withIcon<bool>` - Adjusts the Badge position so that it can be placed next to an FontAwesome icon
- `bsStyle<string>` - (Available options: `primary`, `success`, `info`, `warning`, `danger`) Adds color to the badge

#### Breadcrumbs

Extended Breadcrumb from ReactBootstrap.

Additional Props:

- `noBackground<bool>` - Background is disabled

#### Buttons

Extended Button from ReactBootstrap.

Additional Props:

- `outline<bool>` - the button can be in an outline only style with transparent background (Default: false)
- `bsStyle<string>` - now can accepts `custom`, which will apply the custom color
- `customColor<string>` - color to apply when `bsStyle` is set to `custom`

#### Dividers

Creates a section separator with a Header inside. _Note: Might have issues when used on a non-standard background. _

Props:

- `textPosition<string>` - (Available options: `left`<d>, `center`, `right`) Determines where the header should be placed horizonatly within the line.
- `componentClass<string>` - Determines which HTML element should be used for the header. Default: `h6`

#### Favorite Star

Renders a two-state(on/off) Favorite Star, with hint `Tooltip` attached, and “Favorited” event handler.

Additional Props:

- `favorited<bool>` - Determines if the Star is On
- `onFavorited<func>` - Basically a click event handler
- `tooltipTextActive<string>` - Text which will be visible in the tooltip if the component is in On state (Default: `Remove from favorites`)
- `tooltipTextInActive<string>` - Text which will be visible in the tooltip if the component is in Off state (Default: `Add to favorites`)
- `tooltipPlacement<string>` - (Available options: `top`, `bottom`, `left`, `right`) On which side of the Star the Tooltip should be rendered (Default: `top`)

#### Footer

Bottom part of the main layout.

Props:

- `fluid<bool>` - Should there be a `fluid` container inside

#### Images

Advanced Image component with support for Placeholders. If `src` prop is blank, invalid or the Image has failed to load, a desired Placeholder will be rendered. Supports Icons or HolderJs

Props:

- `src<string>` - URL of the image to be rendered
- `phIcon<node>` - A placeholder icon element (i.e. `FontAwesome`). Will be rendered if image has failed to load, if none provided, HolderJs will be attached
- `phForegroundColor<string>` - Foreground color of the Placeholder (Default: `Colors.grayLight`)
- `phBackgroundColor<string>` - Background color of the Placeholder (Default: `#fff`)
- `alt<string>` - The alt description which will be attached to the image
- `shape<string>` - (Available options: `default`<d>, `rounded`, `circle`) Rounds the corner of the image or transforms it into a circle
- `width<string/number>` - Width of the image, can be a CSS value `string` (i.e. `75px`, `100%`) or a `number` in pixels
- `height<string/number>` - Height of the image, can be a CSS value `string` (i.e. `75px`, `100%`) or a `number` in pixels (Default: `100px`)
- `block<bool>` - Should the image be rendered as a block element (Default: false)

#### Labels

Extended Label from ReactBootstrap.

Additional Props:

- `outline<bool>` - Creates an outline version of the Label
- `withIcon<bool>` - Adjusts the Label position so that it can be placed next to an FontAwesome icon
- `pill<bool>` - Makes the Label Pill shaped
- `customColor<string>` - Accepts a color definition. Available only if `bsStyle` is set to `custom`

#### Modals

Extended Modal from ReactBootstrap.

Additional Props:

- `bsStyle<string>` - (Available options: `primary`, `success`, `info`, `warning`, `danger`) Adds a colored border to the modal, indicating the modal purpose.

#### Navbars

Standard Navbar from ReactBootstrap, extended by couple of SubComponents.

##### Navbar.Menu

Full-width navigation Menu. Has to have `Navbar.MenuSection` components inside which correspond to `/routes/routesStructure.js` using the `slug` property. Has to be placed in a `Nav`.

Props:

- `title<string>` - Title of the `Nav` Button (Default: `Menu`)
- `currentPath<string>` - current URL, should be connected with React Router

##### Navbar.MenuSection

Renders a section in the menu, with a title and links inside.

Props:

- `slug<string>` - Slug of the section from `/routes/routesStructure.js`

##### Navbar.DropdownList

A special Nav Dropdown which is build of a header, list and a footer.

Props:

- `header<node>` - Element which will be placed at the beginning of the Dropdown, `flex spece-between` will be applied automatically to separate the title from potential options
- `footer<node/string>` - Text or element rendered at the end of the list
- `footerUrl<string>` - Optional URL wrapping the Footer
- `listHeight<number/string>` - Maximum height of the list (Default: `250` (px))
- `width<number/string>` - Width of the list on devices greater than XS (Default: `350` (px))

##### OutsideClick

Fires the provided `EventHandler` when User clicks outside of the provided child element.

Props:

- `onClickOutside<func>` - `EventHandler` called when clicked outside
- `excludedElements<array>` - Array of elements which will be ommited from the click-test. Mostly usable for trigger buttons
- `active<bool>` - Is the detection mechanism active (Default: true)

#### Panels

Extended Panel from ReactBootstrap.

Additional Props:

- `flexHeader<bool>` - Header children will be moved to the edges of the Panel (Applies flex space-between no-wrap)

- `maxHeight<number>` - When provided, the Body’s `max-height` will be set to this value, additionally a custom scroll will be initialized inside the Panel Body

- `flexHeader<bool>`- Body and Footer will fill the whole Panel space, omitting the parent’s padding

- `fullBody<bool>` - Removes the internal padding

- `background<string>` - (Available options: `null`, `light`, `gray`) Sets the panel background, set to `null` if no background should be applied. (Default: `null`)

- `borderStyle` - (Available options: `thin`, `normal`, `thick`). Sets the border width to `1px`, `2px` and `3px` sequentially. (Default: 'normal`)

- `bsStyle<string>` - Provides context color to the panel

- `type<string>` - Applies one of 6 panel visual types (Default: null)

  Available options:

  - `color-border-full` - whole panel border in context color
  - `color-border-left` - left panel border in context color
  - `color-border-top` - top panel border in context color
  - `color-border-heading` - bottom header border in context color
  - `color-title` - header background in context color
  - `color-title-border` - header background and whole panel border in context color

##### CollapsablePanel

A Panel (see above) which can be collapsed (Body and Footer collapsing with animation) or disabled via additional options in the Panel Header.

Props:

- `collapsed<bool>` - Determines if the Body and Footer are collapsed (Default: false)
- `title<string>` - Panel Title placed in the header
- `footer<node>` - Element placed in the Panel’s footer
- `fill<bool>` - Makes the Panel Body render without padding
- `onCollapse<func>` - Callback fired when the Panel starts collapsing
- `onClose<func>` - Callback fired when the Disable Option is clicked

##### RightSidebar

Right Sidebar for some less important content available at any time.

Props:

- `active<bool>` - Should the sidebar be visible (Default: false)
- `affixOffset<number>` - Offset on which the sidebar should be affixed (sticky) (Default: `0`)
- `children<node>` - Content of the Right Sidebar

##### RightSidebar.OverlayContent

Additional container which can be overlayed over the RightSidebar. Use `RightSidebar.OverlayContentParent` for appropriate position adjustment.

Props:

- `active<bool>` - Should the overlay be visible (Default: false)
- `children<node>` The actual content

##### RightSidebar.OverlayContentParent

The parent of the content. `RightSidebar.OverlayContent` will be relative to this Component.

Props:

- `children<node>` - Mixed HTML with `RightSidebar.OverlayContent`

#### Sidebars

Sidebar element which can contain `Sidebar.Menu` for navigation and `Sidebar.Addon`s which are extra content elements adjustable for different sidebar styles: `default`, `slim`, `big-icons`.

Props:

- `affixOffset<number>` - Offset on which the sidebar should be affixed (sticky) (Default: `0`)
- `header<node>` - Header elements shown on `Overlay`ed version on mobile
- `overlay<bool>` - Should the sidebar be an overlay, Typically this would be set when Screen Size is `XS` (Default: false)
- `overlayVisible<bool>` - When Overlay Mode is on, should the Sidebar be shown (Default: `false`)
- `overlayAnimationDuration<number> - How long the show/hide animation should be (Default: 300)
- `overlayAnimationEasingOpen<string>` - (Available: `CSS3 easings`) Easing type used for the opening animation
- `overlayAnimationEasingClose<string>` - (Available: `CSS3 easings`) Easing type used for the closing animation
- `onOverlayClosed<func>` - Callback triggered when the Overlay will finish closing
- `onHeightChange<func>` - Callback triggered when the Menus inside will open or close. Additional height (more than default Sidebar Height) is passed in the `first argument`

##### Sidebar.Menu

Navigation in the sidebar. Gets all the available routes from `/routes/routesStructure`.

Props:

- `currentUrl<string>` - Current page URL, should be attached to `ReactRouter`
- `animationDuration<number>` - Open/close node animation duration
- `animationEasing<string>` - (Available: CSS3 easings) Open/close node animation easing

##### Sidebar.AddOn

Additional content element which can be placed within the Sidebar. It should be composed of `Sidebar.AddOnContent`s which are being enabled/disabled accordingly to the current sidebar style.

Props:

- `children` - List of `AddOnContent`s

##### Sidebar.AddOnContent

The content of the AddOn which will be displayed when current Sidebar Style matches the `supportedStyle` prop.

Props:

- `supportedStyle<array/string>` - (Available: `default`, `slim`, `big-icons`) On which SidebarStyle this container should be visible

#### Star Rating

Rating component which can be used for showing rating with Star Icons, aswell as returning Rating from user click.

Props:

- `max<number>` - Determines how many Stars are there total (Default: `5`)
- `at<number>` - Determines what is the current rating, which renders highlighted stars (Default: `0`)
- `starColor<string>` - Color of the active stars (Default: `Colors.brandWarning`)
- `onSelect<func>` - When provided, it will be called when a user click on any of the star. Attached argument indicates which star in order was clicked (1 - max)

#### Progress Bars

Alternative version of React Bootstrap ProgressBar with 3 different heights available.

Props:

- `size<string>` - (Available options: `small`<d>, `medium`, `large`) Size of the Bar - respectively: `3px`, `6px` and `9px`

#### Scroll Bar Container

Adds a container with PerfectScrollbar attached. Initializes only when not on OSX nor mobile device.

Props:

- `notRelative<bool>` - Prevents adding `position: relative` to the container which is needed by PerfectScrollbar. Use when the container has to be `position:absolute` (Default: false)
- `componentClass<string>` - What kind of HTML element should be used for the container (Default: ‘div’)
- `noXScrollBar<bool>` - Disables the horizontal Scroll Bar (Default: false)
- `noYScrollBar<bool>` - Disables the vertical Scroll Bar (Default: false)
- `dynamicChildren<bool>` - Adds a mutation observer for children changes. If a change is detected, the Scroll Bars will be updated. Set this option if there are components inside which frequently modify their size, in other situations keep it disabled for avoiding unnescessary overhead (Default: false)

#### Timeline

Renders a Timeline sequence using provided child components. Use `Timeline.Item` and ‘Timeline.Date’ as direct children of this component for adding entries.

Props:

- `itemAlignment<string>` - (Available options: `vertical`, `horizontal`<d>) Describes in which fashion should the `Timeline.Item`s render

##### Timeline.Item

Represents a single entry in the `Timeline`. Should be composed of a `Timeline.ItemHeader` and `Timeline.ItemBody`.

Props:

- `date<string/number/object>` - Entry date information which will be parsed by momentjs and displayed within the `Timeline.Item`
- `dateFormat<string>` - Date format string which will be used for displaying the date (Default: `DD MMM YYYY[\n]h:mm a`)
- `icon<node>` - Small icon which serves as a bullet for each entry (Default: `<i className='fa fa-circle-o'></i>`)
- `color<string>` - Color of the above icon (Default: Colors.brandPrimary)

##### Timeline.ItemBody

Contains the content of the Timeline entry.

#### Timeline.ItemHeader

Header of the `Timline.Item`. Renders an Icon/Avatar in a combination with primary/secondary text.

Props:

- `avatar<node>` - Graphic representation of the entry. May be `AvatarImage`, `AvatarIcon` or `AvatarText`
- `primaryText<node/string>` - Main text element of the header
- `secondaryText<node/string>` - Additional text element of the header

##### Timeline.Date

Used as a separator of `Timeline.Item`s. May group entries by date i.e. `today`, `yesterday` etc. The text should be placed as a child of this component.

#### Tooltips

Extended Tooltip from ReactBootstrap.

Additional Props:

- `bsStyle<string>` - (Available options: `primary`, `success`, `info`, `warning`, `danger`) Adds appropriate background color to the Tooltip
- `customColor<string>` - Accepts a color definition. Available only if `bsStyle` is set to `custom`

#### Tree Navigator

Tree Navigation component which consists of `TreeNavigation.Branch`es populated with React Routers `Link` components.

Props:

- `currentPath<string>` - Current site URL, typically this will be connected to React Router’s current path.
- `activeEventKey<string>` - Key of the branch which will be opened by default

##### TreeNavigator.Branch

Component grouping `Link`s. Place the links inside of the Branch. There can be only one branch opened at a time.

Props:

- `title<string>` - Title of the branch
- `eventKey<string>` - Key of the branch, very optional use only in combination of `activeEventKey` from the parent (Default: [random key])

### Charts

A set of Charts Components which can be used in various ways discribed below:

#### Chartist

A Proxy of ReactChartist. Check the Project’s site for available props.

#### Highcharts & Highstock HighchartBase, HighchartBasicLine, HighchartBasicLine, HighchartBasicColumn, HighStock

Wrap of Highcharts charts. Use the `HighchartBase` for making a Highchart chart from scratch providing the configuration in the `config` prop. `HighchartBasicLine`, `HighchartBasicLine`, `HighchartBasicColumn` have initial configurations for achieving the basic feel of each chart. All of these components have a theme connected which matches the dashboard style.

Props:

- `config<object>` - Highcharts configuration object. Will be deeply merged with the theme and/or initial chart configuration.
- `dynamicUpdate<bool>` - If set to `true` it will watch for changes in `series` data and inject only the freshly added points. Use for efficient rendering of streams of data. (Default: false)

##### AsyncChart

Asynchronous Highcharts loader. Can be used when a chart needs to load a large amount of data. Place a `Highchart` chart as direct child of this component. While the data loads there will be a loader rendered.

Props:

- `children<element>` - `Highchart` Component which will be injected with data
- `getConfig<func>` - Callback function which will be called when `data` will be available. Should return a config object merged with `data` from the first argument
- `getJson<func>` - Callback which should make an `async request` or `async Webpack require`. Should call the callback from the first argumnet when the request is complete

#### Sparklines

Sparklines are typically small charts which fit well as inline/table charts. There are four types that you can use:

##### SparklineLine

Typical Line Chart look.

Props:

- `data<array<number>>` - Array of values to display the chart
- `color<string>` - Color string which represents the chart line (Default: `Colors.brandPrimary`)
- `width<number>` - Chart width in `px`
- `height<number>` - Chart height in `px`
- `limit<number>` - Total points which will be rendered in the Chart
- `block<bool>` - If set to true will make the Chart a `display: block` element, `inline-block` othwerwise (Default: false)
- `chartStyle<object>` - Additional style object for some custom SVG modifications
- `fullWidth<bool>` - Adjusts the Chart Container to fill the Parent space

##### SparklineBar

Bar Chart representation

Props:

- `data<array<number>>` - Array of values to display the chart
- `color<string>` - Color string which represents the chart line (Default: `Colors.brandPrimary`)
- `width<number>` - Chart width in `px` (Default: 32)
- `height<number>` - Chart height in `px` (Default: 16)
- `chartStyle<object>` - Additional style object for some custom SVG modifications

##### SparklineBar

Bar Chart representation

Props:

- `data<array<number>>` - Array of values to display the chart
- `color<string>` - Color string which represents the chart line (Default: `Colors.brandPrimary`)
- `width<number>` - Chart width in `px` (Default: 32)
- `height<number>` - Chart height in `px` (Default: 16)
- `chartStyle<object>` - Additional style object for some custom SVG modifications

##### SparklineDonut

Donut / Gauge Chart representation

Props:

- `data<array<number>>` - Values of each slice sequentially
- `value<number>` - Single value for Gauge, when provided data wil be omited
- `radius<number>` - Radius of the donut in `px` (Default: `30px`)
- `innerRadius<number/string>` - Size of the inner ring can be in `px` or `%` (Default: `%`)
- `colors<array<string>>` - Array of sequential colors which will be used for `data` (Default: `[Colors.brandPrimary, Colors.brandInfo, Colors.brandWarning, Colors.brandDanger, Colors.brandSuccess])`
- `color<string>` - Color used for single Value (Default: `Colors.brandPrimary`)
- `animated<bool>` - Should the donut be animated on initial render (Default: false)
- `animationDuration<number>` - Duration of the initial render animation

##### SparklinePie

Pie/Gauge Chart representation.

Props:

- `data<array<number>>` - Values of each slice sequentially
- `value<number>` - Single value for Gauge, when provided data wil be omited
- `radius<number>` - Radius of the donut in `px` (Default: `30px`)
- `innerRadius<number/string>` - Size of the inner ring can be in `px` or `%` (Default: `%`)
- `colors<array<string>>` - Array of sequential colors which will be used for `data` (Default: `[Colors.brandPrimary, Colors.brandInfo, Colors.brandWarning, Colors.brandDanger, Colors.brandSuccess])`
- `color<string>` - Color used for single Value (Default: `Colors.brandPrimary`)
- `animated<bool>` - Should the donut be animated on initial render (Default: false)
- `animationDuration<number>` - Duration of the initial render animation