fix(frontend): add checkbox component + fix alignment (#941)

frontend/src/lib/components/apps/components/common/TextComponent.svelte

@@ -5,8 +5,8 @@
 	import InputValue from '../helpers/InputValue.svelte'
 
 	export let componentInputs: ComponentInputsSpec
-	export let horizontalAlignement: 'left' | 'center' | 'right' | undefined = undefined
-	export let verticalAlignement: 'top' | 'center' | 'bottom' | undefined = undefined
+	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
+	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 
 	export const staticOutputs: string[] = []
 
@@ -15,6 +15,6 @@
 
 <InputValue input={componentInputs.content} bind:value={contentValue} />
 
-<AlignWrapper {horizontalAlignement} {verticalAlignement}>
+<AlignWrapper {horizontalAlignment} {verticalAlignment}>
 	<SvelteMarkdown source={String(contentValue)} />
 </AlignWrapper>

frontend/src/lib/components/apps/components/helpers/AlignWrapper.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
 	import { classNames } from '$lib/utils'
 
-	export let horizontalAlignement: 'left' | 'center' | 'right' | undefined
-	export let verticalAlignement: 'top' | 'center' | 'bottom' | undefined
+	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined
+	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined
 
-	function tailwindHorizontalAlignement(
-		horizontalAlignement: 'left' | 'center' | 'right' | undefined
-	) {
-		switch (horizontalAlignement) {
+	function tailwindHorizontalAlignment(horizontalAlignment) {
+		switch (horizontalAlignment) {
 			case 'left':
 				return 'justify-start'
 			case 'center':
@@ -17,8 +15,8 @@
 		}
 	}
 
-	function tailwindVerticalAlignement(verticalAlignement: 'top' | 'center' | 'bottom' | undefined) {
-		switch (verticalAlignement) {
+	function tailwindVerticalAlignment(verticalAlignment) {
+		switch (verticalAlignment) {
 			case 'top':
 				return 'items-start'
 			case 'center':
@@ -30,8 +28,8 @@
 
 	$: classes = classNames(
 		'flex w-full h-full flex-col',
-		tailwindHorizontalAlignement(horizontalAlignement),
-		tailwindVerticalAlignement(verticalAlignement)
+		tailwindHorizontalAlignment(horizontalAlignment),
+		tailwindVerticalAlignment(verticalAlignment)
 	)
 </script>
 

frontend/src/lib/components/apps/components/select/CheckboxComponent.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import Toggle from '$lib/components/Toggle.svelte'
+	import { getContext } from 'svelte'
+	import type { Output } from '../../rx'
+	import type { AppEditorContext, ComponentInputsSpec } from '../../types'
+	import AlignWrapper from '../helpers/AlignWrapper.svelte'
+	import InputValue from '../helpers/InputValue.svelte'
+
+	export let id: string
+	export let componentInputs: ComponentInputsSpec
+	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
+	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
+
+	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
+
+	export const staticOutputs: string[] = ['result']
+
+	let labelValue: string = 'Default label'
+	let value: boolean = false
+
+	$: outputs = $worldStore?.outputsById[id] as {
+		result: Output<boolean>
+	}
+</script>
+
+<InputValue input={componentInputs.label} bind:value={labelValue} />
+
+<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+	<Toggle
+		bind:value
+		options={{ right: labelValue }}
+		on:change={(e) => {
+			outputs.result.set(e.detail)
+		}}
+	/>
+</AlignWrapper>

frontend/src/lib/components/apps/editor/ComponentEditor.svelte

@@ -9,6 +9,7 @@
 	import { displayData } from '../utils'
 	import ButtonComponent from '../components/common/ButtonComponent.svelte'
 	import PieChartComponent from '../components/charts/PieChartComponent.svelte'
+	import CheckboxComponent from '../components/select/CheckboxComponent.svelte'
 
 	export let component: AppComponent
 	export let selected: boolean
@@ -59,6 +60,8 @@
 			<TextComponent {...component} />
 		{:else if component.type === 'buttoncomponent'}
 			<ButtonComponent {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+		{:else if component.type === 'checkboxcomponent'}
+			<CheckboxComponent {...component} bind:staticOutputs={$staticOutputs[component.id]} />
 		{/if}
 	</div>
 </div>

frontend/src/lib/components/apps/editor/componentsPanel/data.ts

@@ -53,10 +53,24 @@ const plainComponents: ComponentSet = {
 					type: 'static',
 					visible: true,
 					value: 'blue',
-					optionValuesKey: 'buttonColorOptions',
+					optionValuesKey: 'buttonColorOptions'
 				}
 			},
 			runnable: true
+		},
+		{
+			...defaultProps,
+			...defaultAlignement,
+			id: 'checkboxcomponent',
+			type: 'checkboxcomponent',
+			componentInputs: {
+				label: {
+					type: 'static',
+					visible: true,
+					value: 'Lorem ipsum',
+					fieldType: 'textarea'
+				}
+			}
 		}
 	]
 }

frontend/src/lib/components/apps/utils.ts

@@ -71,6 +71,10 @@ export const displayData = {
 	tablecomponent: {
 		name: 'Table',
 		icon: faBarChart
+	},
+	checkboxcomponent: {
+		name: 'Checkbox',
+		icon: faBarChart
 	}
 }