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

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

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

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

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

Extended Tabs from ReactBootstrap.

Additional Props:

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

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.

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

Extended Breadcrumb from ReactBootstrap.

Additional Props:

• noBackground<bool> - Background is disabled

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

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

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)

Bottom part of the main layout.

Props:

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

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)

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

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.

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)

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

Sidebar element which can contain Sidebar.Menu for navigation and Sidebar.Addons 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 Overlayed 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.AddOnContents which are being enabled/disabled accordingly to the current sidebar style.

Props:

• children - List of AddOnContents

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

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)

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

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)

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.Items 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.Items. May group entries by date i.e. today, yesterday etc. The text should be placed as a child of this component.

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 Navigation component which consists of TreeNavigation.Branches 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 Links. 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])

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

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

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 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