const ClockWidget = {
		  id : 'clock', 
		  Component : Clock, 
		}

// unique identifier for widget ,
// if you'll repeat id then components with same id will overlap each-other
// you can create widgets using same component with different ids
id : string // Required

// if you want to pass parameters to your component, for some special behaviour,
// you can just wrap it inside function like,. () => <Clock digital />
// It is useful when you want to create different widgets from one component based
// on passed parameters
Component : object // Required

// background color of widget container (In case of transparancy or underflow)
// default = no-color/transparant
backgroundColor : string

// It is interval by which widget will get refreshed by dashboard.
// You need to use (refreshHook)* inside your component 
// for using this feature
refreshInterval = number (in milli-seconds / 10e-3 seconds )

// as name says, prefered x position from left
// default = 0 
preferedX = number (units*)

// prefered y position from top
// default = 0 
preferedY = number (units*)

// minimum width of the widget
// default = MULTIPLIER (**)
minWidth = number (units*)

// maximum width of the widget
// default = INFINITE (**)
maxWidth = number (units*)

// minimum height of the widget
// default = MULTIPLIER (**)
minHeight = number (units*)

// maximum height of the widget
// default = INFINITE (**)
maxHeight = number (units*)

// array of widgets( take a look at create widget section )
widgets = array of object // Required

// css for dashboard
// default = {}
dashboardStyle = object

// background color for css
// default = 'pink'
backgroundColor = string 

// background color for widget container
// default = ''
widgetBackgroundColorGeneral = string

// you can specify fixed Height for dashboard
// default = 0 means adaptive height
// under development
fixedHeight = number

// This flag is for gravity of dashboard 
// default = false , means no gravity - widgets will float on dashboard
// gravity defines widgets flow direction  
// default = false
enableGravity = number,

// you can specify flow direction here
// default = false , means widgets will flow in top direction
// if true widget will flow in left to right direction
// default = false
leftGravity = boolean

// following are margins and paddings ( in pixels ) for dashboard and widgets
// default = 10px (for all)
widgetMarginLeftRight = number
widgetMarginTopBottom = number
dashboardLeftPadding = number
dashboardTopPadding = number

// this property refers to behaviour of widgets 
// when user drags widget and it passes through 
// another widget, true means other widgets will not move 
// for create space for holded widget
// default = false
preventCollision = boolean

// Unique identifier for dashboard
// it will be used for store dashboard state into 
// localStorage, if storage functions are not passed
id  = string 

// It is function which should return jsx to render button
// Using this you can inject your own button component 
// withing this component to match your application theme
// default = it will render simple html button in case of undefined / error	
EditButton = function // () => { return (jsx for button)}

// You can pass function which will be called 
// when dashboard need to save state
// default = it will try to store state in localStorage	
saveLayoutState = function // ( id , state ) => { }

// You can pass function which will be used to retrieve state of layout
// default = it will try to fetch state from localStorage
retrieveLayoutState = function // ( id ) => { return state }

// It is function which should return jsx to render button
// Using this you can inject your own button component within 
// this component to match your application theme
// default = it will render simple html button in case of undefined or any error	
EditButton = function // () => { return (jsx for button)}

// It is function which should return jsx to render button
// Using this you can inject your own button component within 
// this component to match your application theme
// default = it will render simple html button in case of undefined or any error
AddButton: PropTypes.func

// It is function which should return jsx to render button
// Using this you can inject your own button component within
// this component to match your application theme
// default = it will render simple html button in case of undefined or any error
SaveButton: PropTypes.func

// It is function which should return jsx to render button
// Using this you can inject your own container within 
// this component to show widgets e.g. drawer / modal
// default = it will render simple html div in case of undefined or any error
WidgetMenuContainer: PropTypes.func

// style for widget menu if not passed WidgetMenuContainer
widgetMenuStyle = object

// Which widgets should be rendered initially
initialWidgetIds: array of widget ids // Required
	
// You can pass function which will be called 
// when dashboard need to save state
// default = it will try to store state in localStorage	
saveLayoutState = function // ( id , state ) => { }

// You can pass function which will be used to retrieve state of layout
// default = it will try to fetch state from localStorage
retrieveLayoutState = function // ( id ) => { return state }

// layout for widget on dashboard
// this is state of the dashboard all the lifetime of the dashboard
// you can set it externally from anywhere
layoutsState = object // Required

// pair of layoutsState and setLayoutsState should be passed for 
// responsive functionality
// function to set layoutState
setLayoutsState = function // Required   // ( state ) => { }

// It specify , if dashboard is editable or not
// default = false
editable  = boolean

// If you pass this function, it'll get called on close event of widget
// it will provide you host widget as parameter
onRemoveWidget = function // ( widget ) => { }