budibase/packages/standard-components/components.json

{
	"_lib": "./dist/index.js",
	"_templates" : {
		"saveRecordButton" : {
			"description": "Save record button",
			"component": "button"
		}
	},
	"button" : {
		"name": "Button",
		"description": "an html <button />",
		"props": {
			"contentText": { "type": "string", "default": "Button" },
			"className": "string",
			"disabled": "bool",
			"onClick": "event",
			"background": "string",
			"color": "string",
			"border": "string",
			"padding": "string",
			"hoverColor": "string",
			"hoverBackground": "string",
			"hoverBorder": "string"
		},
		"tags": ["layout"],
		"presets": {
			"primary": {
				"contentText": "Primary Button Preset",
				"color": "papayawhip", 
				"padding": "20px",
				"background": "blue"
			},
			"secondary": {
				"contentText": "Secondary Button Preset",
				"color": "rebeccapurple", 
				"padding": "10px",
				"background": "#fff",
				"border": "1px solid red"
			},
			"error": {
				"contentText": "ERROR",
				"color": "red", 
				"padding": "10px",
				"border": "1px solid red"
			}
		} 
	}, 
	"login" : {
		"name": "Login Control",
		"description": "A control that accepts username, password an also handles password resets",
		"props" : {
			"logo": "asset",
			"loginRedirect": "string",
			"usernameLabel": {"type":"string", "default": "Username"},
			"passwordLabel": {"type":"string", "default": "Password"},
			"loginButtonLabel": {"type":"string", "default": "Login"},
			"buttonClass": "string",
			"inputClass": "string"
		},
		"tags": ["login", "credentials", "password", "logon"]
	},
	"input" : {
		"name": "Input",
		"description": "An HTML input",
		"props" : {
			"value": "string",
			"type": {
				"type":"options", 
				"options":[
					"text", "password", "checkbox", "color", 
					"date", "datetime-local", "email", 
					"file", "hidden", "image", "month", "number",
					"radio", "range", "reset", "search", "submit",
					"tel", "time", "week"],
				"default":"text"
			},
			"onChange": "event",
			"className": "string"
		},
		"tags": ["form"]
	},
	"select" : {
		"name": "Select",
		"description": "An HTML <select> (dropdown)",
		"props" : {
			"value": "string",
			"className": "string"
		}
	},
	"option" : {
		"name": "Option",
		"description": "An HTML <option>, to be used with <select>",
		"children": false,
		"props" : {
			"value": "string",
			"text": "string"
		}
	},
	"text": {
		"name": "Text",
		"description": "stylable block of text",
		"children": false,
		"props" : {
			"text": "string",
			"font": "string",
			"fontSize": "string",
			"color": "string",
			"textAlign": {
				"type": "options", 
				"default":"inline", 
				"options": [
					"left", "center", "right"
				]
			},
			"verticalAlign": {
				"type": "options", 
				"default":"inline", 
				"options": [
					"top", "middle", "bottom"
				]
			},
			"formattingTag": {
				"type": "options", 
				"default":"none", 
				"options": [
					"none",
					"<b> - bold",
					"<strong> - important",
					"<i> - italic",
					"<em> - emphasized",
					"<mark> - marked text",
					"<small> - small",
					"<del> - deleted",
					"<ins> - inserted",
					"<sub> - subscript",
					"<sup> - superscript"
				]
			}
		},
		"tags": ["div", "container"]
	},
	"textfield": {
		"name": "Textfield",
		"description": "A component that allows the user to input text.",
		"props": {
			"label": "string",
			"value": "string",
			"onchange": "event"
		}
	},
	"checkbox": {
		"name": "Checkbox",
		"description": "A selectable checkbox component",
		"props": {
			"label": "string",
			"checked": "bool",
			"value": "string",
			"onchange": "event"
		}
	},
	"radiobutton": {
		"name": "Radiobutton",
		"description": "A selectable radiobutton component",
		"props": {
			"label": "string",
			"checked": "bool",
			"value": "string",
			"onchange": "event"
		}	
	},
	"icon": {
		"description": "A HTML icon tag",
		"props": {
			"icon": "string",
			"fontSize": "string" 
		}
	},
	"link": {
		"description": "an HTML anchor <a> tag",
		"props": {
			"url": "string",
			"openInNewTab": "bool",
			"text": "string",
			"color": "string",
			"hoverColor": "string",
			"underline": "bool",
			"fontSize": "string"
		}
	},
	"image": {
		"description": "an HTML <img> tag",
		"props": {
			"url": "string",
			"className": "string",
			"description": "string",
			"height": "string",
			"width": "string"
		}
	},
	"container": {
		"name": "Container",
		"description": "An element that contains and lays out other elements. e.g. <div>, <header> etc",
		"props" : {
			"className":"string",
			"onLoad": "event",
			"type": {
				"type": "options", 
				"options": [
					"article",
					"aside",
					"details",
					"div",
					"firgure",
					"figcaption",
					"footer",
					"header",
					"main",
					"mark",
					"nav",
					"paragraph",
					"summary"
				],
				"default": "div"
			},
			"backgroundColor": "string",
			"color": "string",
			"borderWidth": "string",
			"borderColor": "string",
			"borderStyle": {
				"type":"options",
				"options": [
					"none",
					"solid",
					"dotted",
					"dashed",
					"double",
					"groove",
					"ridge",
					"inset",
					"outset"
				],
				"default": "none"
			}

		},
		"container": true,
		"tags": ["div", "container", "layout"]
	},
	"heading": {
		"name": "Heading",
		"description": "An HTML H1 - H6 tag",
		"props" : {
			"className":"string",
			"text": "string",
			"type": {
				"type": "options",
				"default": "h1",
				"options": ["h1","h2","h3","h4","h5","h6"]
			}
		},
		"tags": []
	},
	"thead": {
		"name": "TableHead",
		"description": "an HTML <thead> tab",
		"props" : {
			"className":"string"
		}
	},
	"tbody": {
		"name": "TableBody",
		"description": "an HTML <tbody> tab",
		"props" : {
			"className":"string"
		}
	}
}