feat(frontend): Add divider app component (#1209)

* feat(frontend): Add divider app component

* fix(frontend): Separate horizontal and vertical

* fix(frontend): Update aligments

* fix(frontend): Remove unused static value

frontend/src/lib/components/apps/components/AppDivider.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { AppInput } from '../inputType'
+	import type { HorizontalAlignment, VerticalAlignment } from '../types'
+	import AlignWrapper from './helpers/AlignWrapper.svelte'
+	import InputValue from './helpers/InputValue.svelte'
+
+	export let id: string
+	export let configuration: Record<string, AppInput>
+	export let horizontalAlignment: HorizontalAlignment | undefined = undefined
+	export let verticalAlignment: VerticalAlignment | undefined = undefined
+	export let position: 'horizontal' | 'vertical'
+	let size = 2
+	let color = '#00000060'
+</script>
+
+<InputValue {id} input={configuration.size} bind:value={size} />
+<InputValue {id} input={configuration.color} bind:value={color} />
+
+<AlignWrapper {horizontalAlignment} {verticalAlignment} class="h-full">
+	<div
+		class="rounded-full {position === 'horizontal' ? 'w-full' : 'h-full'}"
+		style="{position === 'horizontal' ? 'height' : 'width'}: {size}px; background-color: {color}"
+	></div>
+</AlignWrapper>

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

@@ -1,30 +1,29 @@
 <script lang="ts">
 	import { classNames } from '$lib/utils'
+	import type { HorizontalAlignment, VerticalAlignment } from '../../types'
 
-	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
-	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
+	export let horizontalAlignment: HorizontalAlignment | undefined = undefined
+	export let verticalAlignment: VerticalAlignment | undefined = undefined
 	export let noWFull = false
 
-	function tailwindHorizontalAlignment(horizontalAlignment) {
-		switch (horizontalAlignment) {
-			case 'left':
-				return 'justify-start'
-			case 'center':
-				return 'justify-center'
-			case 'right':
-				return 'justify-end'
+	function tailwindHorizontalAlignment(alignment?: HorizontalAlignment) {
+		if(!alignment) return '';
+		const classes: Record<HorizontalAlignment, string> = {
+			left: 'justify-start',
+			center: 'justify-center',
+			right: 'justify-end',
 		}
+		return classes[alignment]
 	}
 
-	function tailwindVerticalAlignment(verticalAlignment) {
-		switch (verticalAlignment) {
-			case 'top':
-				return 'items-start'
-			case 'center':
-				return 'items-center'
-			case 'bottom':
-				return 'items-end'
+	function tailwindVerticalAlignment(alignment?: VerticalAlignment) {
+		if(!alignment) return '';
+		const classes: Record<VerticalAlignment, string> = {
+			top: 'items-start',
+			center: 'items-center',
+			bottom: 'items-end',
 		}
+		return classes[alignment]
 	}
 
 	$: classes = classNames(
@@ -32,7 +31,8 @@
 		noWFull ? '' : 'w-full',
 		tailwindHorizontalAlignment(horizontalAlignment),
 		tailwindVerticalAlignment(verticalAlignment),
-		verticalAlignment ? 'h-full' : ''
+		verticalAlignment ? 'h-full' : '',
+		$$props.class || ''
 	)
 </script>
 

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

@@ -17,7 +17,9 @@
 		Code2,
 		SlidersHorizontal,
 		PlusSquare,
-		DollarSign
+		DollarSign,
+		SeparatorHorizontal,
+		SeparatorVertical
 	} from 'lucide-svelte'
 	import type { Size } from 'svelte-grid'
 
@@ -68,6 +70,8 @@
 	export type SelectComponent = BaseComponent<'selectcomponent'>
 	export type CheckboxComponent = BaseComponent<'checkboxcomponent'>
 	export type RadioComponent = BaseComponent<'radiocomponent'>
+	export type HorizontalDividerComponent = BaseComponent<'horizontaldividercomponent'>
+	export type VerticalDividerComponent = BaseComponent<'verticaldividercomponent'>
 
 	export type AppComponent = BaseAppComponent &
 		(
@@ -94,6 +98,8 @@
 			| FormButtonComponent
 			| VegaLiteComponent
 			| PlotlyComponent
+			| HorizontalDividerComponent
+			| VerticalDividerComponent
 		)
 
 	// Dimensions key formula: <mobile width>:<mobile height>-<desktop width>:<desktop height>
@@ -918,7 +924,59 @@
 				},
 				card: false
 			}
-		}
+		},
+		horizontaldividercomponent: {
+			name: 'Divider X',
+			icon: SeparatorHorizontal,
+			dims: '3:1-12:1',
+			data: {
+				verticalAlignment: 'center',
+				id: '',
+				type: 'horizontaldividercomponent',
+				componentInput: undefined,
+				configuration: {
+					size: {
+						type: 'static',
+						value: 2,
+						fieldType: 'number',
+						onlyStatic: true,
+					},
+					color: {
+						type: 'static',
+						value: '#00000060',
+						fieldType: 'text',
+						onlyStatic: true,
+					},
+				},
+				card: false
+			}
+		},
+		verticaldividercomponent: {
+			name: 'Divider Y',
+			icon: SeparatorVertical,
+			dims: '1:4-1:6',
+			data: {
+				horizontalAlignment: 'center',
+				id: '',
+				type: 'verticaldividercomponent',
+				componentInput: undefined,
+				configuration: {
+					size: {
+						type: 'static',
+						value: 2,
+						fieldType: 'number',
+						onlyStatic: true,
+					},
+					color: {
+						type: 'static',
+						value: '#00000060',
+						fieldType: 'text',
+						onlyStatic: true,
+					},
+				},
+				card: false
+			}
+		},
 	}
 
 	const inputs: ComponentSet = {
@@ -953,7 +1011,9 @@
 			'barchartcomponent',
 			'scatterchartcomponent',
 			'timeseriescomponent',
-			'displaycomponent'
+			'displaycomponent',
+			'horizontaldividercomponent',
+			'verticaldividercomponent',
 		]
 	}
 
@@ -1316,6 +1376,7 @@
 	import { defaultAlignement } from './componentsPanel/componentDefaultProps'
 	import AppRangeInput from '../components/numberInputs/AppRangeInput.svelte'
 	import AppCurrencyInput from '../components/numberInputs/AppCurrencyInput.svelte'
+	import AppDivider from '../components/AppDivider.svelte'
 
 	export let component: AppComponent
 	export let selected: boolean
@@ -1468,6 +1529,10 @@
 			<AppCurrencyInput {...component} bind:staticOutputs={$staticOutputs[component.id]} />
 		{:else if component.type === 'slidercomponent'}
 			<AppSliderInputs {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+		{:else if component.type === 'horizontaldividercomponent'}
+			<AppDivider {...component} position="horizontal" />
+		{:else if component.type === 'verticaldividercomponent'}
+			<AppDivider {...component} position="vertical" />
 		{:else if component.type === 'rangecomponent'}
 			<AppRangeInput {...component} bind:staticOutputs={$staticOutputs[component.id]} />
 		{/if}

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

@@ -10,5 +10,4 @@ export const staticValues = {
 	textStyleOptions: ['Title', 'Subtitle', 'Body', 'Label', 'Caption'],
 	currencyOptions: ['USD', 'EUR', 'GBP', 'CAD', 'AUD', 'JPY', 'CNY', 'INR', 'BRL'],
 	localeOptions: ['en-US', 'en-GB', 'en-IE', 'de-DE', 'fr-FR', 'br-FR', 'ja-JP', 'pt-TL', 'fr-CA', 'en-CA']
-
 } as const

frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte

@@ -14,45 +14,43 @@
 	export let component: AppComponent
 </script>
 
-{#if component.verticalAlignment !== undefined}
-	<PanelSection title="Alignment">
-		<div class="flex flex-wrap gap-2">
-			{#if component.horizontalAlignment}
-				<div class="flex flex-col gap-0.5">
-					<div class="text-xs font-semibold">Horizontal</div>
-					<div>
-						<ToggleButtonGroup bind:selected={component.horizontalAlignment}>
-							<ToggleButton position="left" value="left" size="xs">
-								<AlignStartVertical size={16} />
-							</ToggleButton>
-							<ToggleButton position="center" value="center" size="xs">
-								<AlignCenterVertical size={16} />
-							</ToggleButton>
-							<ToggleButton position="right" value="right" size="xs">
-								<AlignEndVertical size={16} />
-							</ToggleButton>
-						</ToggleButtonGroup>
-					</div>
+<PanelSection title="Alignment">
+	<div class="flex flex-wrap gap-2">
+		{#if component.horizontalAlignment}
+			<div class="flex flex-col gap-0.5">
+				<div class="text-xs font-semibold">Horizontal</div>
+				<div>
+					<ToggleButtonGroup bind:selected={component.horizontalAlignment}>
+						<ToggleButton position="left" value="left" size="xs">
+							<AlignStartVertical size={16} />
+						</ToggleButton>
+						<ToggleButton position="center" value="center" size="xs">
+							<AlignCenterVertical size={16} />
+						</ToggleButton>
+						<ToggleButton position="right" value="right" size="xs">
+							<AlignEndVertical size={16} />
+						</ToggleButton>
+					</ToggleButtonGroup>
 				</div>
-			{/if}
-			{#if component.type !== 'formcomponent' && component.verticalAlignment}
-				<div class="flex flex-col gap-0.5">
-					<div class="text-xs font-semibold">Vertical</div>
-					<div>
-						<ToggleButtonGroup bind:selected={component.verticalAlignment}>
-							<ToggleButton position="left" value="top" size="xs">
-								<AlignStartHorizontal size={16} />
-							</ToggleButton>
-							<ToggleButton position="center" value="center" size="xs">
-								<AlignCenterHorizontal size={16} />
-							</ToggleButton>
-							<ToggleButton position="right" value="bottom" size="xs">
-								<AlignEndHorizontal size={16} />
-							</ToggleButton>
-						</ToggleButtonGroup>
-					</div>
+			</div>
+		{/if}
+		{#if component.type !== 'formcomponent' && component.verticalAlignment}
+			<div class="flex flex-col gap-0.5">
+				<div class="text-xs font-semibold">Vertical</div>
+				<div>
+					<ToggleButtonGroup bind:selected={component.verticalAlignment}>
+						<ToggleButton position="left" value="top" size="xs">
+							<AlignStartHorizontal size={16} />
+						</ToggleButton>
+						<ToggleButton position="center" value="center" size="xs">
+							<AlignCenterHorizontal size={16} />
+						</ToggleButton>
+						<ToggleButton position="right" value="bottom" size="xs">
+							<AlignEndHorizontal size={16} />
+						</ToggleButton>
+					</ToggleButtonGroup>
 				</div>
-			{/if}
-		</div>
-	</PanelSection>
-{/if}
+			</div>
+		{/if}
+	</div>
+</PanelSection>