c5-ts-ui

These are the components that we currently support

• Button
• Calendar
• CirclularProgressBar
• CodeDisplay
• MultiSelect
• OutlineButton
• Password Strength Meter
• RippleButton
• SelectField
• TextField
• ToggleSwitch
• Tooltip

components

Button

name	optional	datatype	description
label	[ ]	string	The text to appear on the button
style	✅	CSSProperties	any additional css styles
onClick	✅	MouseEvent	Callback for button click
disabled	✅	boolean	used to disable the button
type	✅	'normal', 'green', 'purple', 'danger', 'info', 'success', 'error'	different behaviors for the buttoon
size	✅	'small', 'medium', 'large'	size of the button

RippleButton

name	optional	datatype	description
text	[]	string	the test to appear on the button
onClick	✅	MouseEvent	the callback for the button click event
color	✅	string	the color scheme for the button
textColor	✅	string	the color of the text
hoverColor	✅	string	the hover color
style	✅	CSSProperties	any additional css styles
type	✅	'green', 'purple', 'danger', 'success', 'info'	the style of the button

OutlineButton

name	optional	datatype	description
text	[ ]	string	test for the button
onClick	[ ]	MouseEvent	callback for the button click event
type	[ ]	'success','dark','info','error','warning','danger','default'	type of button schema
style	✅	CSSProperties	any additional styling

TextField

name	optional	datatype	description
id	[ ]	string	unique id
name	[ ]	string	name of the button
label	[ ]	string	label text associated with the button
onChange	[ ]	ChangeEvent	event when the text changes
type	[ ]	'text', 'number'	type of input for the textfield
placeholder	✅	string	placeholder text for empty inputfield
value	[ ]	'string', 'number'	value to assign to the field
error	✅	string	error message to display under the field
readOnly	✅	boolean	used to disable the field
autocomplete	✅	'on', 'off', string	used to disable auto completes
theme	✅	'light', 'dark'	theme for the background

SelectField

name	optional	datatype	description
id	[ ]	string	unique id
name	[ ]	string	name of the field
label	[ ]	string	label associated with the field
onChange	[ ]	ChangeEvent	event when the option changes
valueField	[ ]	Field from data	field to assign to the value from the data
displayField	[ ]	Field from data	field to display as the option from the data
error	✅	string	error to display under the field
emptyMsg	[ ]	string	default value when the component loads
data	[ ]	data	data to assign to the field
theme	✅	'light', 'dark'	theme for the background

CodeDisplay

all booleans default to true

name	optional	datatype	description
code	[ ]	string	the code to process
showLineNumbers	✅	boolean	defaults to true to show line numbers
format	✅	boolean	whether to format the code with prettier
parserType	✅	'babel', 'css', 'json', 'flow', 'babel-flow', 'babel-ts', 'typescript', 'json', 'markdown', 'html'	format to use for prettier
colorInterfaceContents	✅	boolean	anything seperated by a color
interfaceKey	✅	color	color of the left hand assignment
interfaceValue	✅	color	color of the right hand assignment
enableDestructured	✅	boolean	color destructured props
destructured	✅	color	color of destructured props
curlyBracesColor	✅	color	color of curly braces
enableCurlyBracesColor	✅	boolean	enable or disable the coloring
codeStr	✅	color	anything between quotes
enableCodeStr	✅	boolean	enable or disable the coloring
codeQuote	✅	color	color of quotation marks
enableCodeQuote	✅	boolean	enable or disable the coloring
betweenSingleQuotes	✅	color	anything between single quotes
enableBetweenSingleQuotes	✅	boolean	enable or disable coloring
codeSingle	✅	color	color of single quotes
enableCodeSingle	✅	boolean	enable or disable the coloring
insideParens	✅	color	anything between parenthesis
enableInsideParens	✅	boolean	enable or disable the coloring
parens	✅	color	color of parenthesis
enableParens	✅	boolean	enable or disable the coloring
codElem	✅	color	anything between < and >
enableCodeElem	✅	boolean	enable or disable the coloring
reserved	✅	color	color of reserved words
enableReserved	✅	boolean	enable or disable the coloring
appColor	✅	color	color of app related words
enableAppColor	✅	boolean	enable or disable the coloring
defaultColor	✅	color	color of default words
enableDefault	✅	boolean	enable or disable the coloring
alternates	✅	color	color of alternate words
enableAlternates	✅	boolean	enable or disable the coloring
customReservedWords	✅	string array	your list of reserved words
customAppWords	✅	string array	your list of app words
customDefaults	✅	string array	your list of default words
customAlternatives	✅	string array	your list of alternate words
enableOperatorColor	✅	boolean	enable or disable coloring
operatorColor	✅	color	color of operators

ToggleSwitch

name	optional	datatype	description
id	[ ]	string	the id to associate with this instance
handleClick	[ ]	id=string, checked=boolean	this returns void
active	[ ]	boolean	state of the button display
disabled	✅	boolean	disable clicking of the component

CircularProgressBar

name	optional	datatype	description
size	✅	number	size of the progress bar
progress	[ ]	number	percentage of progress
strokeWidth	✅	number	thickness of the outer circle
circleStrokeOne	✅	color	background color of stroke
showPercent	✅	boolean	whether to show the number of percentage in the center
mode	✅	'light', 'dark'	theme for progress bars text color

Tooltip

name	optional	datatype	description
position?	✅	'top', 'left', right', 'bottom'	where to position the tooltip relative to the children
children	[ ]	React Component	any React component to use for displaying the tooltip
message	[ ]	string	the message to display inside of the tooltip
style	✅	Css Properties	additional styling to add to the tooltip
theme	✅	'light', 'dark'	theme to use for the tooltip
messageStyle?	✅	Css Properties	additional styles to add to the message

MultiSelect

name	optional	datatype	description
data	[ ]	array of data T[]	any array of data
defaultOption	[ ]	string	the text to display in the select field
keyDescriptor	[ ]	string	description to use for the key
optionValue	[ ]	keyof T	used to store the string in the checked array
optionText	[ ]	keytof T	the field to use to display in the checkbox
checkedItems	[ ] string[]	array to use to store the checked items
setCheckedItems	[ ]	function	function used to handle checking items
id	✅	string	id to use for the component
selectBoxId	✅	string	id of the default item
backgroundColor	✅	string	color to use for the portal background
selectId	✅	string	id to use for the select field
inputId	✅	string	id of the input field

Password Strength Meter

name	optional	datatype	description
userid	[ ]	number	userid to associate with the password
confirmPasswordChange	[ ]	function	function to use when submitting the new password. returns new password

Calendar

name	optional	datatype	description
onChange	[ ]	function takes date	the event to fire when a date has been clicked
date	✅	string	the default date to make active on the calendar
events	✅	CalendarEvent[]	an array of CalendarEvents

This calendar is capable of handling events in the props now

export interface CalendarEvent {
  id: number;
  date: Date;
  title: string;
  description: string;
  start?: string;
  end?: string;
}