Introduction

Naboar is a UI component library built for React apps using typescript.

Usage

install these peer deps.

"peerDependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "styled-components": "^4.1.3"
  }

Install the components

npm install --save naboar

Wrap app in Themer, and pass it an optional theme object with overrides to the default theme.

The default theme is found here

import { Themer } from 'naboar'

function App() {
  return (
    <Themer theme={yourTheme}>
      {/* your app here */}
    </Themer>
  )
}

Components

All of the components

Badge

src/components/Badge/Badge.tsx

Badge Component

Author: Daniel Serrano

Since: v1.0.0

Prop name	Type	Default	Description
`children`	any	Required	Text displayed inside of the badge
`canClose`	boolean		Toggle Badge close option
`className`	string		The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`disabled`	boolean		Toggle badge clickability
`onClose`	(e?: any) => void		On Close click
`theme`	ITheme		Theme

Badge

Button

src/components/Button/Button.tsx

Button Component

Author: Jonathan Currie

Since: v1.0.0

Prop name	Type	Default	Description
`children`	any	Required	component children
`className`	string		The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`disabled`	boolean		disabled attribute
`isActive`	boolean		active if Button value matches ButtonGroup activeValue
`name`	string		Name for javascript reference or form-data
`onClick`	(e: any) => void		onClick callback
`theme`	ITheme		Theme
`type`	ButtonTypes	`submit`	specify button type
`value`	string		value attribute

ButtonGroup

src/components/ButtonGroup/ButtonGroup.tsx

ButtonGroup Component

Author: Jonathan Currie

Since: v1.0.0

Prop name	Type	Default	Description
`activeValue`	string \| number	`null`
`children`	any	Required	Button Group Child
`className`	string		The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`theme`	ITheme		Theme

Checkbox

src/components/Checkbox/Checkbox.tsx

Checkbox Component

Author: Anthony Freda

Since: v1.0.0

Prop name	Type	Default	Description
`name`	string	Required	Name of form element
`checked`	boolean		whether or not the box is checked
`disabled`	boolean		toggle active state of input
`errorMessage`	string \| boolean		errorMessage
`label`	string		Text label
`onChange`	(newVal?: boolean, e?: ChangeEvent<HTMLInputElement>) => void		on click called with opposite of current val and event obj

Example:

Datalist

src/components/Datalist/Datalist.tsx

Datalist Component

Author: Jonathan Currie

Since: v1.0.0

Prop name	Type	Default	Description
`children`	any	Required	children - Option Array
`onChange`	(e: any) => void		onChange - same event handler as input

Example:

Datalist Example

error message here...

DatePicker

src/components/DatePicker/DatePicker.tsx

DatePicker Component

Author: Anthony Freda

Since: v1.0.0

Prop name	Type	Default	Description
`name`	string	Required	Name of form element
`onChange`	(since: Date, until?: Date) => void	Required	function called when any date is changed
`sinceName`	string	`since`	override default since name
`untilName`	string	`until`	override default until name
`className`	string		The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`errorMessage`	string \| boolean		errorMessage
`isRangePicker`	boolean		does it have a since and until
`isTimePicker`	boolean		Can the user select a time
`label`	string		Text label
`outline`	boolean		should inputs be outline
`since`	Date		Date object for since or single date
`sinceRequired`	boolean		is since required
`theme`	ITheme		Theme
`until`	Date		Date object for until
`untilRequired`	boolean		is until required

Example

DropdownButton

src/components/Dropdown/DropdownButton/DropdownButton.tsx

DropdownButton Component

Author: Tracey King

Since: v1.0.0

Prop name	Type	Default	Description
`name`	string	Required	Button name used for form
`onClick`	() => void	Required	Fired click event
`text`	string	Required	Button text
`className`	string		The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`disabled`	boolean		Disabled
`theme`	ITheme		Theme

Example

See Dropdown doc

DropdownItem

src/components/Dropdown/DropdownItem/DropdownItem.tsx

DropdownItem Component

Author: Tracey King

Since: v1.0.0

Prop name	Type	Description
`children`	any	Children
`className`	string	The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>	CSS styling using css from styled-components
`isActive`	boolean	Boolean identifying wheather the item is the active one
`isDisabled`	boolean	Boolean identifying wheather the item is disabled or not
`onClick`	() => void	Fired click event
`theme`	ITheme	Theme
`value`	string \| number	Value of item

Example

See Dropdown doc

DropdownMenu

src/components/Dropdown/DropdownMenu/DropdownMenu.tsx

DropdownMenu Component

Author: Tracey King

Since: v1.0.0

Prop name	Type	Description
`children`	any	Children
`className`	string	The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>	CSS styling using css from styled-components
`isActive`	boolean	Boolean identifying wheather the item is the active one
`isDisabled`	boolean	Boolean identifying wheather the item is disabled or not
`theme`	ITheme	Theme
`value`	string \| number	Value of item

Example

See Dropdown doc

DropdownNode

src/components/Dropdown/DropdownNode/DropdownNode.tsx

Prop name	Type	Description
`children`	any	Children
`className`	string	The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>	CSS styling using css from styled-components
`isActive`	boolean	Boolean identifying wheather the item is the active one
`isDisabled`	boolean	Boolean identifying wheather the item is disabled or not
`onClick`	() => void	Fired click event
`theme`	ITheme	Theme
`value`	string \| number	Value of item

Example

See Dropdown doc

ErrorModal

src/components/ErrorModal/ErrorModal.tsx

ErrorModal Component

Author: Daniel Serrano

Since: v1.0.0

Prop name	Type	Default	Description
`message`	string	Required	Message of ErrorModal
`title`	string	Required	Title of ErrorModal
`onClick`	(e?: any) => void		On Click for ErrorModal button

FormElementError

src/components/FormElementError/FormElementError.tsx

FormElementError Component

Author: Tracey King

Since: v1.0.0

Prop name	Type	Default	Description
`error`	string \| boolean	Required	Text for label
`className`	string		The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`theme`	ITheme		Theme

IconIOS

src/components/Icon/IconIOS/IconIOS.tsx

Icon IOS Component

Author: Tracey King

Since: v1.0.0

Prop name	Type	Default	Description
`name`	iOS	Required	Ionicon icon name
`className`	string		The class name
`color`	string		Color of icon
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`onClick`	(e: any) => void		Event fired on click
`size`	number		Size of font in px
`theme`	ITheme		Theme

IconLogo

src/components/Icon/IconLogo/IconLogo.tsx

Icon Logo Component

Author: Tracey King

Since: v1.0.0

Prop name	Type	Default	Description
`name`	logo	Required	Ionicon icon name
`className`	string		The class name
`color`	string		Color of icon
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`onClick`	(e: any) => void		Event fired on click
`size`	number		Size of font in px
`theme`	ITheme		Theme

IconMD

src/components/Icon/IconMD/IconMD.tsx

Icon Material Component

Author: Tracey King

Since: v1.0.0

Prop name	Type	Default	Description
`name`	md	Required	Ionicon icon name
`className`	string		The class name
`color`	string		Color of icon
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`onClick`	(e: any) => void		Event fired on click
`size`	number		Size of font in px
`theme`	ITheme		Theme

Input

src/components/Input/Input.tsx

Input Component

Author: Tracey King

Since: v1.0.0

Prop name	Type	Default	Description
`name`	string	Required	Name of form element
`autoFocus`	boolean		Toggles input Focus
`canClear`	boolean		Toggle input clear option
`className`	string		The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`disabled`	boolean		Toggle input clickability
`errorMessage`	string \| boolean		errorMessage
`iconName`	iOS		Name of left icon
`label`	string		Text label
`list`	string		Target datalist with same id
`max`	number		Maximum value for number input
`min`	number		Minimum value for number input
`onChange`	(value: any) => void		On Change callback
`onClear`	() => void		On Clear click
`onClick`	(e?: any) => void		On Click callback
`outline`	boolean		Should the input be of the outline variant
`required`	boolean		is this input required
`theme`	ITheme		Theme
`type`	string		Type of input field
`value`	string		Value of input field

Email Address

Please enter an email address

Label

src/components/Label/Label.tsx

Label Component

Author: Tracey King

Since: v1.0.0

Prop name	Type	Default	Description
`htmlFor`	string	Required	For attribute for input targeting
`text`	string	Required	Text for label
`className`	string		The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`theme`	ITheme		Theme

Example Label

Message

src/components/Message/Message.tsx

Message Component

Author: Daniel Serrano

Since: v1.0.0

Prop name	Type	Default	Description
`message`	string	Required	Message of Message
`onClose`	(e?: any) => void		On Click for Message button

...THIS IS A STOCK MESSAGE... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum sapien non fringilla mattis.

...THIS IS A ERROR MESSAGE... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum sapien non fringilla mattis.

....THIS IS A MAIN MESSAGE.... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum sapien non fringilla mattis.

...THIS IS A SUCCESS MESSAGE... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum sapien non fringilla mattis.

...THIS IS A WARNING MESSAGE... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum sapien non fringilla mattis.

NavBarDivider

src/components/NavBar/NavBarDivider.tsx

NavBarDivider Component

Author: Tracey King

Since: v1.0.0

Prop name	Type	Description
`className`	string	The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>	CSS styling using css from styled-components
`theme`	ITheme	Theme

NavBarHeader

src/components/NavBar/NavBarHeader.tsx

NavBarHeader Component

Author: Tracey King

Since: v1.0.0

Prop name	Type	Default	Description
`title`	string	Required	Header text
`className`	string		The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`disabled`	boolean		Toggle input clickability
`onClick`	(e?: any) => void		On Click callback
`theme`	ITheme		Theme

NavBarLink

src/components/NavBar/NavBarLink.tsx

NavBarLink Component

Author: Tracey King

Since: v1.0.0

Prop name	Type	Default	Description
`onClick`	(e?: any) => void	Required	On Click callback
`children`	any		Children
`className`	string		The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`isActive`	boolean		Is active link
`theme`	ITheme		Theme
`title`	string		Header text

NavDrawer

src/components/NavDrawer/NavDrawer.tsx

NavDrawer Component

Author: Tracey King

Since: v1.0.0

Error: Invariant failed

NavDrawerDivider

src/components/NavDrawer/NavDrawerDivider.tsx

NavDrawerDivider Component

Author: Tracey King

Since: v1.0.0

Prop name	Type	Description
`className`	string	The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>	CSS styling using css from styled-components
`theme`	ITheme	Theme

Error: Invariant failed

NavDrawerHeader

src/components/NavDrawer/NavDrawerHeader.tsx

NavDrawerHeader Component

Author: Tracey King

Since: v1.0.0

Prop name	Type	Default	Description
`expandTo`	number	Required	Amount to be expanded in pixels
`isExpanded`	boolean	Required	Is used to animate link
`linkRoute`	string	Required	Location when link is clicked
`title`	string	Required	Header text
`className`	string		The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`disabled`	boolean		Toggle input clickability
`iconName`	iOS		Name of left icon
`onIconClick`	(e?: any) => void
`theme`	ITheme		Theme

Error: Invariant failed

NavDrawerLink

src/components/NavDrawer/NavDrawerLink.tsx

NavDrawerLink Component

Author: Tracey King

Since: v1.0.0

Prop name	Type	Default	Description
`expandTo`	number	Required	Amount to be expanded in pixels
`linkRoute`	string	Required	Location when link is clicked
`title`	string	Required	Header text
`className`	string		The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`disabled`	boolean		Toggle input clickability
`iconName`	md		Name of left icon
`iconSize`	number		Size of icon
`isExpanded`	boolean		Is used to animate link
`onIconClick`	(e?: any) => void		On Click event for Icon
`theme`	ITheme		Theme

Error: Invariant failed

Notifications

src/components/Notifications/Notifications.tsx

Notifications Component

Ask for push notifications permission
If permission granted use native notifications
If not use a custom in browser solution ones

Author: Anthony Freda

Since: v1.0.0

Prop name	Type	Default	Description
`notifications`	INotification[]	Required	Array of INotification[]
`native`	boolean		Use Native push notifs
`onClick`	(e?: any, i?: number) => void		Called when notif is clicked
`onClose`	(e?: any, i?: number) => void		Called when close button is clicked
`onError`	(e?: Event) => void		Called when error making notif

Example

Pagination

src/components/Pagination/Pagination.tsx

Pagination Component

Used for long lists and tables

Author: Anthony Freda

Since: v1.0.0

Prop name	Type	Default	Description
`onClick`	(page?: number, e?: any) => void	Required	called with selected page and event
`page`	number	`1`	current page
`pageCount`	number	`1`	amount of pages to control
`palette`	"outline" \| "fill"	`undefined`	predefined theming for pagination components
`firstText`	ReactNode	`First`	text for first control
`lastText`	ReactNode	`Last`	text for last control
`maintainSkipWidth`	boolean		maintain the amount of pages on both sides
`nextText`	ReactNode		text for next control
`pageSkip`	number	`1`	amount of pages displayed
`prevText`	ReactNode		text for previous control
`showEllipses`	boolean	`false`	should ellipses be rendered for long amounts
`showFirst`	boolean	`false`	should first page num always be rendered
`showLast`	boolean	`false`	should last page num always be rendered

Example

Radial

src/components/Radial/Radial/Radial.tsx

Radial Menu Component

Takes children of type <RadialMenuItem />

Author: Anthony Freda

Since: v1.0.0

Prop name	Type	Default	Description
`children`	ReactElement<IItemProps, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<any, any, any>)>[] \| ... 6 more ... \| (ReactPortal & ReactElement<...>[])	Required	Array of Radial Items
`coords`	{ left?: number; top?: number; bottom?: number; right?: number; }		Css position obj
`defaultActive`	boolean		Is it open by default
`onClick`	() => void		Called on button click
`onClose`	() => void		Called on button click to close
`onOpen`	() => void		Called on button click to open

Example

RadialMenuItem

src/components/Radial/RadialMenuItem/RadialMenuItem.tsx

Radial Menu Item Component

To be implmented as a child of <Radial />

Author: Anthony Freda

Since: v1.0.0

Prop name	Type	Default	Description
`iconName`	iOS	Required	IOS icon name to be displayed in button
`title`	string	Required	Title displayed on hover
`onClick`	(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void		Event fired on click of button

Example

See Radial doc

Radio

src/components/Radio/Radio.tsx

Radio Component

Author: Anthony Freda

Since: v1.0.0

Prop name	Type	Default	Description
`name`	string	Required	Name of form element
`value`	string \| number	Required	value
`checked`	boolean		whether or not the box is checked
`disabled`	boolean		toggle active state of input
`errorMessage`	string \| boolean		errorMessage
`label`	string		Text label
`onChange`	(value?: string \| number, e?: ChangeEvent<HTMLInputElement>) => void		on click called with value

Example:

Select

src/components/Select/Select.tsx

Select Component

Author: Tracey King

Since: v1.0.0

Prop name	Type	Default	Description
`name`	string	Required	Name of form element
`children`	any[]		Children must be HTMLOptionElements
`className`	string		The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`errorMessage`	string \| boolean		errorMessage
`label`	string		Text label
`onChange`	(e?: any) => void
`onClick`	() => void		Fired on click
`outline`	boolean		should outline variant
`theme`	ITheme		Theme
`value`	string \| number		called when input changes

Slider

src/components/Slider/Slider.tsx

Slider Component

Author: Anthony Freda

Since: v1.0.0

Prop name	Type	Default	Description
`name`	string	Required	Name of form element
`onChange`	(val: number) => void	Required	Called with new value of slider
`value`	number	`0`	Value of slider
`errorMessage`	string \| boolean		errorMessage
`label`	string		Text label
`max`	number	`100`	Maximum possible value of slider
`min`	number	`0`	Minimum possible value of slider
`step`	number	`1`	Skip amount of slide

Example

Value: 0

Spinner

src/components/Spinner/Spinner.tsx

Datalist Component

Author: Jonathan Currie

Since: v1.0.0

Prop name	Type	Description
`className`	string	The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>	CSS styling using css from styled-components
`theme`	ITheme	Theme

Switch

src/components/Switch/Switch.tsx

Message Component

Author: Daniel Serrano

Since: v1.0.0

Prop name	Type	Default	Description
`isOn`	boolean	Required	Is On for Switch
`onClick`	(e?: any) => void		On Click for Switch

Table

src/components/Table/Table.tsx

Table Component

Author: Anthony Freda

Since: v1.0.0

Prop name	Type	Default	Description
`columns`	ICell[]	Required	List of columns, either strings or cells with config options. Documented below
`onSelectChange`	(e?: any) => void	Required	called when custom select option is clicked
`canClearSearch`	boolean		boolean can clear seach
`controlsCss`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		controls container css
`data`	IObj[] \| []		An array of objects all containing keys that match up to the defined columns
`limit`	ReactText		current limit
`onAllCheckboxes`	() => void		called when top level checkbox is clicked
`onCheckbox`	(val: boolean, cellIndex: number) => void		called when checkbox cell is changed
`onClearSearch`	(value: null) => void		called when search input is cleared
`onDateChange`	(since: Date, until: Date) => void		called on date change
`onLimitChange`	(limit: ReactText) => void		called when limit is updated
`onRowClick`	(cell?: IObj, cellIndex?: number) => void		called when cell is clicked
`onSearchChange`	(e: any) => void		called when search input is updated
`onSort`	(key?: string, order?: "asc" \| "desc") => void		called with key and order
`onUpdatePage`	(page: number) => void		called on page number click
`order`	"asc" \| "desc"		order to sort key by
`page`	number		current page
`pageCount`	number		total number of pages
`paginationCss`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		pagination container css
`paginationTheme`	"outline" \| "fill"		theme for pagination components
`searchPlaceholder`	string		search field placeholder
`selectLabel`	string		custom select label
`selectList`	{ key?: string; text: string; value: string; }[]		dropdown list
`selectValue`	any		value shown in select dropdown
`showCustomSelect`	boolean		whether or not to show a custom select filter
`showDatePicker`	boolean		whether or not to render datepicker component
`showLimit`	boolean		whether or not to show limit selection
`showPagination`	boolean		whether or not to render the pagination component
`showSearch`	boolean		whether or not to render search input
`showToolbarLabels`	boolean	`true`	show toolbar labels
`since`	Date		current since value
`sort`	string		key to sort by
`term`	string		search input current value
`toolbarTheme`	"outline" \| "fill"	`fill`	toolbar theming
`until`	Date		current until vlue

IObj

interface IObj {
  [key: string]: any
}

ICell

interface ICell {
  key: string
  heading?: string
  /** Function that returns your own custom <Th /> */
  renderHeading?: (
    heading: string,
    index?: number,
    col?: ICell,
  ) => ReactElement<any>
  /** Function that returns your own custom <Td /> */
  renderCell?: (
    cell: string,
    index?: number,
    data?: Obj[],
    col?: ICell,
  ) => ReactElement<any>
  onClick?: (...args: any[]) => void
  isChecked?: boolean | null | undefined
  isSortable?: boolean
}

Example

Basic Usage:

headerTest	headerTest	headerTest	headerTest	headerTest	headerTest	headerTest
test	test	test	test	test	test	test
test	test	test	test	test	test	test
test	test	test	test	test	test	test
test	test	test	test	test	test	test

With Controls:

Date

Show

Custom List

headerTest	headerTest	headerTest	headerTest	headerTest	headerTest	headerTest
test	test	test	test	test	test	test
test	test	test	test	test	test	test
test	test	test	test	test	test	test
test	test	test	test	test	test	test

TabItem

src/components/Tabs/TabItem/TabItem.tsx

TabItem Component

Author: Anthony Freda

Since: v1.0.0

Prop name	Type	Default	Description
`children`	ReactNode	Required	Tab content
`key`	string	Required	unique identifier for TabItem
`title`	string	Required	Title of tab
`isDisabled`	boolean		Is this tab disabled

Example

See Tabs doc

Tabs

src/components/Tabs/Tabs/Tabs.tsx

Tabs Component

Takes children of type <TabItem />

Author: Anthony Freda

Since: v1.0.0

Prop name	Type	Default	Description
`children`	ReactElement<ITabItemProps, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<any, any, any>)>[]	Required	Tab content
`activeKey`	string		Active key
`className`	string		The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`onChange`	(key: string) => void		Function called with new key
`theme`	ITheme		Theme

Example

I am a tab 1

I am a tab 2

I am a tab 3

I am a tab 4

Textarea

src/components/Textarea/Textarea.tsx

Textarea Component

Author: Tracey King

Since: v1.0.0

Prop name	Type	Default	Description
`name`	string	Required	Name of form element
`className`	string		The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`errorMessage`	string \| boolean		errorMessage
`label`	string		Text label
`onChange`	(e?: any) => void		Fired onChange event
`rows`	number
`theme`	ITheme		Theme
`value`	string
`variant`	"primary" \| "secondary" \| "tertiary"

Description

Please enter a description

src/components/Tooltip/Tooltip.tsx

Tooltip Component

Author: Tracey King

Since: v1.0.0

Prop name	Type	Default	Description
`position`	"top" \| "bottom" \| "left" \| "right"	Required
`className`	string		The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`text`	string
`theme`	ITheme		Theme

Wizard

src/components/Wizard/Wizard/Wizard.tsx

Wizard Component

Author: Anthony Freda

Since: v1.0.0

Prop name	Type	Default	Description
`children`	ReactElement<IStepProps, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<any, any, any>)>[] \| ... 6 more ... \| (ReactPortal & ReactElement<...>[])		Children of type `<WizardStep />`
`className`	string		The class name
`completeText`	string	`Complete`	Text in complete button
`controls`	string \| number \| boolean \| {} \| ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<any, any, any>)> \| ReactNodeArray \| ReactPortal \| ReactNode[]		Content displayed in bottom left of wizard
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`nextText`	string	`Next`	Text in next button
`onComplete`	() => void	`null`	function called when wizard is completed
`onNext`	() => void	`null`	function called when index increases
`onPrevious`	() => void	`null`	function called when index decreases
`previousText`	string	`Previous`	Text in previous button
`shouldShowTimeline`	boolean	`true`	should the timeline be displayed
`theme`	ITheme		Theme
`validation`	{ [key: string]: boolean[]; }	`{}`	objects keyed with the names of steps, array of boolean vals

Do some stuff 1

Do some stuff 2

Review

Do some stuff 1

Do some stuff 2

Value 1:
Value 2:

WizardStep

src/components/Wizard/WizardStep/WizardStep.tsx

Wizard Step Component

Expacted child of <Wizard />

Author: Anthony Freda

Since: v1.0.0

Prop name	Type	Default	Description
`children`	ReactNode	Required	Can be anything
`name`	string	Required	key for validation
`title`	string	Required	Title to be displayed on pane
`hideTitle`	boolean		Should the title be displayed on the pane
`timelineTitle`	string		Title to be displayed on top bar

Example

See Wizard doc

Effects

Animation components

Expand

src/effects/Expand/Expand.tsx

Expand Component transition from width || height px to px

Author: Anthony Freda

Since: v1.0.0

Prop name	Type	Default	Description
`children`	ReactNode	Required	One or more elements
`from`	number	Required	width or height(px)
`to`	number	Required	width or height(px)
`className`	string		The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`isExpanded`	boolean		Whether or not the component is at full width/height
`theme`	ITheme		Theme
`vertical`	boolean		Should it expand in height

Example

Hello

Fade

src/effects/Fade/Fade.tsx

Fade Component Fades in a component

Author: Anthony Freda

Since: v1.0.0

Prop name	Type	Default	Description
`children`	ReactNode	Required	One or more elements
`distance`	number	Required	How far off is the component
`from`	foo	Required	The direction it fades from
`className`	string		The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`shouldShow`	boolean		Whether or not the component is at full width/height
`theme`	ITheme		Theme

Example

From Left

From Right

src/effects/Modal/Modal.tsx

Modal Component Fades in from bottom

Author: Anthony Freda

Since: v1.0.0

Prop name	Type	Default	Description
`children`	ReactNode	Required	One or more elements
`onOuterClick`	() => void	Required	What happens when you click the outside
`className`	string		The class name
`css`	FlattenSimpleInterpolation \| FlattenInterpolation<any>		CSS styling using css from styled-components
`shouldShow`	boolean		Whether or not the component is at full width/height
`theme`	ITheme		Theme

Example

Visualization

Data viz components

BulletChart

src/viz/BulletChart/BulletChart.tsx

BulletChart Component

Bullet Chart

Author: Anthony Freda

Since: v1.0.0

Prop name	Type	Default	Description
`max`	number	`100`	maximum number for chart
`scale`	{ color: string; amount: number; borderColor?: string; }[]	Required	Array of objects that dictate the sections and colors of the chart
`amount`	number		value used to render center bar of chart
`amountColor`	string	`white`	color of amount bar
`label`	ReactNode		label for right side of chart
`metric`	string		metric for chart(%, ft, yards)
`scaleTicks`	number	`5`	how many ticks should be rendered
`target`	number		target number, rendered as vertical line in chart
`targetColor`	string	`white`	color of target line

Example:

Awesome% of awesome

020406080100

Amount: 90Target: 85

Rainbowcolors

020406080100

Amount: 90

GreyscaleBrightness

020406080100120140160180200

Amount: 130

Example:

Example:

Example

Example

Example

Example

Example

Dun goofed

Example

Example

Example

Example

Example:

Example

IObj

ICell

Example

Basic Usage:

With Controls:

Example

Example

Do some stuff 1

Do some stuff 2

Example

Example

Hello

Hello

Example

From Left

From Right

Example

Hello

Example:

Style-Guide