From 6e98be606c76e9bb33ae9fd4a5c3a3d1506ea0ff Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Thu, 24 Nov 2022 00:08:56 +0100
Subject: [PATCH] fix(frontend): add checkbox component + fix alignment (#941)

---
 .../components/common/TextComponent.svelte    |  6 ++--
 .../components/helpers/AlignWrapper.svelte    | 18 +++++-----
 .../select/CheckboxComponent.svelte           | 36 +++++++++++++++++++
 .../apps/editor/ComponentEditor.svelte        |  3 ++
 .../apps/editor/componentsPanel/data.ts       | 16 ++++++++-
 frontend/src/lib/components/apps/utils.ts     |  4 +++
 6 files changed, 69 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/lib/components/apps/components/select/CheckboxComponent.svelte

diff --git a/frontend/src/lib/components/apps/components/common/TextComponent.svelte b/frontend/src/lib/components/apps/components/common/TextComponent.svelte
index 68fc99c8c9..f81ecf0907 100644
--- a/frontend/src/lib/components/apps/components/common/TextComponent.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/apps/components/helpers/AlignWrapper.svelte b/frontend/src/lib/components/apps/components/helpers/AlignWrapper.svelte
index d75c105d83..cee2e61b9d 100644
--- a/frontend/src/lib/components/apps/components/helpers/AlignWrapper.svelte
+++ b/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>
 
diff --git a/frontend/src/lib/components/apps/components/select/CheckboxComponent.svelte b/frontend/src/lib/components/apps/components/select/CheckboxComponent.svelte
new file mode 100644
index 0000000000..0ede81bc53
--- /dev/null
+++ b/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>
diff --git a/frontend/src/lib/components/apps/editor/ComponentEditor.svelte b/frontend/src/lib/components/apps/editor/ComponentEditor.svelte
index 03e63168ee..4c1d70ed0c 100644
--- a/frontend/src/lib/components/apps/editor/ComponentEditor.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/data.ts b/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
index b687973a12..482ea2c214 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
+++ b/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'
+				}
+			}
 		}
 	]
 }
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index e4176d3940..2970c067b5 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -71,6 +71,10 @@ export const displayData = {
 	tablecomponent: {
 		name: 'Table',
 		icon: faBarChart
+	},
+	checkboxcomponent: {
+		name: 'Checkbox',
+		icon: faBarChart
 	}
 }