budibase/packages/standard-components/components.json

{
	"_lib": "./dist/index.js",
	"_generators": {
		"_lib": "./dist/generators.js",
		"app": {
			"name": "App",
			"description": "Generate app based on your backend"
		},
		"forms": {
			"name": "Forms",
			"description": "Generate forms, based on your records"
		},
		"buttons": {
			"name": "Buttons",
			"description": "Generate some styled buttons"
		},
		"headers": {
			"name": "Headers",
			"description": "Generate some styled headings"
		},
		"nav": {
			"name": "Nav bar",
			"description": "Generate a nav bar, based n your root records"
		},
		"indexTables": {
			"name": "Nav bar",
			"description": "Generate a table based on an index"
		}
	},
	"button" : {
		"importPath": "button",
		"name": "Button",
		"description": "an html <button />",
		"props": {
			"contentText": { "type": "string", "default": "Button" },
			"contentComponent": "component",
			"className": {"type": "string", "default": "default"},
			"disabled": "bool",
			"onClick": "event",
			"background": "string",
			"color": "string",
			"border": "string",
			"padding": "string",
			"hoverColor": "string",
			"hoverBackground": "string",
			"hoverBorder": "string"
		},
		"tags": ["button"]
	}, 
	"login" : {
		"importPath": "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"]
	},
	"form" : {
		"importPath": "Form",
		"name": "Form",
		"description": "A form - allgned fields with labels",
		"props" : {
			"containerClass": "string",
			"formControls": {
				"type":"array",
				"elementDefinition": {
					"label": "string",
					"control":"component"
				}
			}
		},
		"tags": ["form"]
	},
	"textbox" : {
		"importPath": "Textbox",
		"name": "Textbox",
		"description": "An input type=text or password",
		"props" : {
			"value": "string",
			"hideValue": "bool",
			"className": {"type": "string", "default": "default"}
		},
		"tags": ["form"]
	},
	"input" : {
		"importPath": "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"
			},
			"className": {"type": "string", "default": "default"}
		},
		"tags": ["form"]
	},
	"select" : {
		"importPath": "Input",
		"name": "Input",
		"description": "An HTML input",
		"props" : {
			"value": "string",
			"options": {
				"type" : "array",
				"elementDefinition" : {
					"id":"string",
					"value":"string"
				}
			},
			"className": {"type": "string", "default": "default"}
		},
		"tags": ["form"]
	},
	"stackpanel": {
		"importPath": "StackPanel",
		"name": "StackPanel",
		"description": "Layout elements in a stack, either horizontally or vertically",
		"props" : {
			"direction": {
				"type": "options", 
				"options": ["horizontal", "vertical"],
				"default":"horizontal"
			},
			"children": {
				"type":"array",
				"elementDefinition": {
					"control":"component"
				}
			},
			"width": {"type":"string","default":"auto"},
			"height": {"type":"string","default":"auto"},
			"containerClass":"string",
			"itemContainerClass":"string",
			"data": "state",
			"dataItemComponent": "component",
			"onLoad": "event"
		},
		"tags": ["div", "container", "layout", "panel"]
	},
	"grid": {
		"importPath": "Grid",
		"name": "Grid",
		"description": "CSS Grid layout ",
		"props" : {
			"gridTemplateRows": "string",
			"gridTemplateColumns": "string",
			"children": {
				"type":"array",
				"elementDefinition": {
					"control":"component",
					"gridColumn":"string",
					"gridRow":"string",
					"gridColumnStart":"string",
					"gridColumnEnd":"string",
					"gridRowStart":"string",
					"gridRowEnd":"string"
				}
			},
			"width": {"type":"string","default":"auto"},
			"height": {"type":"string","default":"auto"},
			"containerClass":"string",
			"itemContainerClass":"string"
		},
		"tags": ["div", "container", "layout", "panel", "grid"]
	},
	"text": {
		"importPath": "Text",
		"name": "Text",
		"description": "stylable block of text",
		"props" : {
			"value": "string",
			"containerClass": "string",
			"font": "string",
			"color": "string",
			"textAlign": {
				"type": "options", 
				"default":"inline", 
				"options": [
					"left", "center", "right"
				]
			},
			"verticalAlign": {
				"type": "options", 
				"default":"inline", 
				"options": [
					"top", "middle", "bottom"
				]
			},
			"display": {
				"type": "options", 
				"default":"inline", 
				"options": [
					"inline", "block", "inline-block"
				]
			}
		},
		"tags": ["div", "container"]
	},
	"panel": {
		"importPath": "Panel",
		"name": "Panel",
		"description": "A stylable div with a component inside",
		"props" : {
			"text": "string",
			"component": "component",
			"containerClass": "string",
			"background": "string",
			"border": "string",
			"borderRadius":"string",
			"font": "string",
			"color": "string",
			"padding": "string",
			"margin": "string",
			"hoverColor": "string",
			"hoverBackground": "string",
			"height":"string",
			"width":"string",
			"onClick": "event",
			"display": {
				"type": "options", 
				"default":"inline", 
				"options": [
					"inline", "block", "inline-block"
				]
			}
		},
		"tags": ["div", "container"]
	},
	"nav": {
		"importPath": "Nav",
		"name": "Nav",
		"description": "A nav - a side bar of buttons that control the currently active component",
		"props" : {
			"navBarBackground": {"type" :"string", "default":"silver"},
			"navBarBorder": "string",
			"navBarColor": {"type" :"string", "default":"black"},
			"selectedItemBackground": {"type" :"string", "default":"white"},
			"selectedItemColor": {"type" :"string", "default":"black"},
			"selectedItemBorder": "string",
			"itemHoverBackground": {"type" :"string", "default":"gainsboro"},
			"itemHoverColor": {"type" :"string", "default":"black"},
			"items": {
				"type": "array",
				"elementDefinition" : {
					"title": "string",
					"component": "component"
				}
			},
			"selectedItem":"string",
			"hideNavBar":"bool"

		},
		"tags": ["nav", "navigation", "sidebar"]
	},
	"table": {
		"importPath": "Table",
		"name": "Table",
		"description": "An HTML table",
		"props" : {
			"data": "state",
			"columns": {
				"type": "array",
				"elementDefinition" : {
					"title": "string",
					"value": "string"
				}
			},
			"onRowClick":"event",
			"tableClass": {"type":"string", "default":"table-default"},
			"theadClass": {"type":"string", "default":"thead-default"},
			"tbodyClass": {"type":"string", "default":"tbody-default"},
			"trClass": {"type":"string", "default":"tr-default"},
			"thClass": {"type":"string", "default":"th-default"}
		},
		"tags": ["table"]
	},
	"div": {
		"importPath": "Div",
		"name": "Div",
		"description": "An HTML div tag",
		"props" : {
			"children": {
				"type":"array",
				"elementDefinition": {
					"component":"component"
				}
			},
			"className":"string",
			"data": "state",
			"dataItemComponent": "component",
			"onLoad": "event"
		},
		"tags": ["div", "container", "layout"]
	},
	"h1": {
		"importPath": "h1",
		"name": "H1",
		"description": "An HTML H1 tag",
		"props" : {
			"text": "string",
			"className":"string"
		},
		"tags": []
	},
	"h2": {
		"importPath": "h2",
		"name": "H2",
		"description": "An HTML H2 tag",
		"props" : {
			"text": "string",
			"className":"string"
		},
		"tags": []
	},
	"h3": {
		"importPath": "h3",
		"name": "H3",
		"description": "An HTML H3 tag",
		"props" : {
			"text": "string",
			"className":"string"
		},
		"tags": []
	},
	"h4": {
		"importPath": "h4",
		"name": "H4",
		"description": "An HTML H4 tag",
		"props" : {
			"text": "string",
			"className":"string"
		},
		"tags": []
	},
	"h5": {
		"importPath": "h5",
		"name": "H5",
		"description": "An HTML H5 tag",
		"props" : {
			"text": "string",
			"className":"string"
		},
		"tags": ["div", "container", "layout"]
	},
	"h6": {
		"importPath": "h6",
		"name": "H6",
		"description": "An HTML H6 tag",
		"props" : {
			"text": "string",
			"className":"string"
		},
		"tags": []
	}
}