support custom components

packages/app/constants/settings/account.jsx

@@ -5,7 +5,7 @@ export default [
     {
         "id": "username",
         "group": "account.basicInfo",
-        "type": "Button",
+        "component": "Button",
         "icon": "AtSign",
         "title": "Username",
         "description": "Your username is the name you use to log in to your account.",
@@ -17,7 +17,7 @@ export default [
     {
         "id": "fullName",
         "group": "account.basicInfo",
-        "type": "Input",
+        "component": "Input",
         "icon": "Edit3",
         "title": "Name",
         "description": "Change your public name",
@@ -57,7 +57,7 @@ export default [
     {
         "id": "email",
         "group": "account.basicInfo",
-        "type": "Input",
+        "component": "Input",
         "icon": "Mail",
         "title": "Email",
         "description": "Change your email address",
@@ -87,7 +87,7 @@ export default [
     {
         "id": "avatar",
         "group": "account.profile",
-        "type": "ImageUpload",
+        "component": "ImageUpload",
         "icon": "Image",
         "title": "Avatar",
         "description": "Change your avatar",
@@ -95,7 +95,7 @@ export default [
     {
         "id": "cover",
         "group": "account.profile",
-        "type": "ImageUpload",
+        "component": "ImageUpload",
         "icon": "Image",
         "title": "Cover",
         "description": "Change your cover",
@@ -103,7 +103,7 @@ export default [
     {
         "id": "primaryBadge",
         "group": "account.profile",
-        "type": "Select",
+        "component": "Select",
         "icon": "Tag",
         "title": "Primary badge",
         "description": "Change your primary badge",
@@ -111,7 +111,7 @@ export default [
     {
         "id": "description",
         "group": "account.profile",
-        "type": "TextArea",
+        "component": "TextArea",
         "icon": "Edit3",
         "title": "Description",
         "description": "Change your description for your profile",
@@ -141,7 +141,7 @@ export default [
     {
         "id": "logout",
         "footer": true,
-        "type": "Button",
+        "component": "Button",
         "icon": "LogOut",
         "title": "Logout",
         "emitEvent": "session.logout",

packages/app/constants/settings/app.jsx

@@ -7,7 +7,7 @@ export default [
         "id": "language",
         "storaged": true,
         "group": "general",
-        "type": "Select",
+        "component": "Select",
         "icon": "MdTranslate",
         "title": "Language",
         "description": "Choose a language for the application",
@@ -22,7 +22,7 @@ export default [
         "id": "forceMobileMode",
         "storaged": true,
         "group": "general",
-        "type": "Switch",
+        "component": "Switch",
         "icon": "MdSmartphone",
         "title": "Force Mobile Mode",
         "description": "Force the application to run in mobile mode.",
@@ -32,7 +32,7 @@ export default [
         "id": "haptic_feedback",
         "storaged": true,
         "group": "general",
-        "type": "Switch",
+        "component": "Switch",
         "icon": "MdVibration",
         "title": "Haptic Feedback",
         "description": "Enable haptic feedback on touch events.",
@@ -41,7 +41,7 @@ export default [
         "id": "selection_longPress_timeout",
         "storaged": true,
         "group": "general",
-        "type": "Slider",
+        "component": "Slider",
         "icon": "MdTimer",
         "title": "Selection press delay",
         "description": "Set the delay before the selection trigger is activated.",
@@ -62,7 +62,7 @@ export default [
         "id": "notifications_sound",
         "storaged": true,
         "group": "notifications",
-        "type": "Switch",
+        "component": "Switch",
         "icon": "MdVolumeUp",
         "title": "Notifications Sound",
         "description": "Play a sound when a notification is received.",
@@ -71,7 +71,7 @@ export default [
         "id": "notifications_vibrate",
         "storaged": true,
         "group": "notifications",
-        "type": "Switch",
+        "component": "Switch",
         "icon": "MdVibration",
         "title": "Vibration",
         "description": "Vibrate the device when a notification is received.",
@@ -81,7 +81,7 @@ export default [
         "id": "notifications_sound_volume",
         "storaged": true,
         "group": "notifications",
-        "type": "Slider",
+        "component": "Slider",
         "icon": "MdVolumeUp",
         "title": "Sound Volume",
         "description": "Set the volume of the sound when a notification is received.",
@@ -96,7 +96,7 @@ export default [
         "id": "edit_sidebar",
         "storaged": true,
         "group": "sidebar",
-        "type": "Button",
+        "component": "Button",
         "icon": "Edit",
         "title": "Edit Sidebar",
         "emitEvent": "edit_sidebar",
@@ -106,7 +106,7 @@ export default [
         "id": "collapseOnLooseFocus",
         "storaged": true,
         "group": "sidebar",
-        "type": "Switch",
+        "component": "Switch",
         "icon": "Columns",
         "title": "Auto Collapse",
         "description": "Collapse the sidebar when loose focus",
@@ -116,7 +116,7 @@ export default [
         "id": "autoCollapseDelay",
         "storaged": true,
         "group": "sidebar",
-        "type": "Slider",
+        "component": "Slider",
         "icon": "Wh",
         "dependsOn": {
             "collapseOnLooseFocus": true

packages/app/constants/settings/apparence.jsx

@@ -5,7 +5,7 @@ export default [
         "id": "reduceAnimations",
         "storaged": true,
         "group": "aspect",
-        "type": "Switch",
+        "component": "Switch",
         "icon": "MdOutlineAnimation",
         "title": "Reduce animation",
         "experimental": true
@@ -15,7 +15,7 @@ export default [
         "id": "darkMode",
         "storaged": true,
         "group": "aspect",
-        "type": "Switch",
+        "component": "Switch",
         "icon": "Moon",
         "title": "Dark mode",
         "emitEvent": "theme.applyVariant",
@@ -27,7 +27,7 @@ export default [
         "id": "primaryColor",
         "storaged": true,
         "group": "aspect",
-        "type": "SliderColorPicker",
+        "component": "SliderColorPicker",
         "title": "Primary color",
         "description": "Change primary color of the application.",
         "emitEvent": "modifyTheme",
@@ -42,7 +42,7 @@ export default [
         "id": "resetTheme",
         "storaged": true,
         "group": "aspect",
-        "type": "Button",
+        "component": "Button",
         "title": "Reset theme",
         "props": {
             "children": "Default Theme"

packages/app/src/components/Settings/index.jsx

@@ -28,16 +28,15 @@ const ItemTypes = {
 
 const SettingItem = (props) => {
 	let { item } = props
+
 	const [loading, setLoading] = React.useState(true)
 	const [value, setValue] = React.useState(item.defaultValue ?? false)
 	const [delayedValue, setDelayedValue] = React.useState(null)
 
-	if (!item.type) {
-		console.error(`Item [${item.id}] has no an type!`)
-		return null
-	}
-	if (typeof ItemTypes[item.type] === "undefined") {
-		console.error(`Item [${item.id}] has an invalid type: ${item.type}`)
+	let SettingComponent = item.component
+
+	if (!SettingComponent) {
+		console.error(`Item [${item.id}] has no an component!`)
 		return null
 	}
 
@@ -142,54 +141,67 @@ const SettingItem = (props) => {
 		settingInitialization()
 	}, [])
 
-	switch (item.type.toLowerCase()) {
-		case "slidercolorpicker": {
-			item.props.onChange = (color) => {
-				item.props.color = color.hex
-			}
-			item.props.onChangeComplete = (color) => {
-				onUpdateItem(color.hex)
-			}
 
-			item.props.color = value
+	if (typeof SettingComponent === "string") {
+		if (typeof ItemTypes[SettingComponent] === "undefined") {
+			console.error(`Item [${item.id}] has an invalid component: ${item.component}`)
+			return null
+		}
 
-			break
-		}
-		case "textarea": {
-			item.props.defaultValue = value
-			item.props.onPressEnter = (event) => dispatchUpdate(event.target.value)
-			item.props.onChange = (event) => onUpdateItem(event.target.value)
-			break
-		}
-		case "input": {
-			item.props.defaultValue = value
-			item.props.onPressEnter = (event) => dispatchUpdate(event.target.value)
-			item.props.onChange = (event) => onUpdateItem(event.target.value)
-			break
-		}
-		case "switch": {
-			item.props.checked = value
-			item.props.onClick = (event) => onUpdateItem(event)
-			break
-		}
-		case "select": {
-			item.props.onChange = (value) => onUpdateItem(value)
-			item.props.defaultValue = value
-			break
-		}
-		case "slider": {
-			item.props.defaultValue = value
-			item.props.onAfterChange = (value) => onUpdateItem(value)
-			break
-		}
-		default: {
-			if (!item.props.children) {
-				item.props.children = item.title ?? item.id
+		// fix props
+
+		switch (SettingComponent.toLowerCase()) {
+			case "slidercolorpicker": {
+				item.props.onChange = (color) => {
+					item.props.color = color.hex
+				}
+				item.props.onChangeComplete = (color) => {
+					onUpdateItem(color.hex)
+				}
+
+				item.props.color = value
+
+				break
+			}
+			case "textarea": {
+				item.props.defaultValue = value
+				item.props.onPressEnter = (event) => dispatchUpdate(event.target.value)
+				item.props.onChange = (event) => onUpdateItem(event.target.value)
+				break
+			}
+			case "input": {
+				item.props.defaultValue = value
+				item.props.onPressEnter = (event) => dispatchUpdate(event.target.value)
+				item.props.onChange = (event) => onUpdateItem(event.target.value)
+				break
+			}
+			case "switch": {
+				item.props.checked = value
+				item.props.onClick = (event) => onUpdateItem(event)
+				break
+			}
+			case "select": {
+				item.props.onChange = (value) => onUpdateItem(value)
+				item.props.defaultValue = value
+				break
+			}
+			case "slider": {
+				item.props.defaultValue = value
+				item.props.onAfterChange = (value) => onUpdateItem(value)
+				break
+			}
+			default: {
+				if (!item.props.children) {
+					item.props.children = item.title ?? item.id
+				}
+				item.props.value = item.defaultValue
+				item.props.onClick = (event) => onUpdateItem(event)
+				break
 			}
-			item.props.value = item.defaultValue
-			item.props.onClick = (event) => onUpdateItem(event)
-			break
 		}
+
+		// override with default item component
+		SettingComponent = ItemTypes[SettingComponent]
 	}
 
 	return <div key={item.id} className="settingItem">
@@ -230,7 +242,7 @@ const SettingItem = (props) => {
 		</div>
 		<div className="component">
 			<div>
-				{loading ? <div> Loading... </div> : React.createElement(ItemTypes[item.type], item.props)}
+				{loading ? <div> Loading... </div> : React.createElement(SettingComponent, item.props)}
 			</div>
 
 			{delayedValue && <div>