feat(frontend): Ag grid styling (#2565)

* feat(frontend): Add AG Grid styling

* feat(frontend): Fix documentation link

* feat(frontend): Fix padding issues

frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte

@@ -3,7 +3,7 @@
 	import { isObject } from '$lib/utils'
 	import { getContext } from 'svelte'
 	import type { AppInput } from '../../../inputType'
-	import type { AppViewerContext, RichConfigurations } from '../../../types'
+	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../../types'
 	import RunnableWrapper from '../../helpers/RunnableWrapper.svelte'
 
 	import { initConfig, initOutput } from '$lib/components/apps/editor/appUtils'
@@ -15,6 +15,8 @@
 	import 'ag-grid-community/styles/ag-grid.css'
 	import 'ag-grid-community/styles/ag-theme-alpine.css'
 	import { Loader2 } from 'lucide-svelte'
+	import { twMerge } from 'tailwind-merge'
+	import { initCss } from '$lib/components/apps/utils'
 	// import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
 
 	export let id: string
@@ -22,6 +24,12 @@
 	export let configuration: RichConfigurations
 	export let initializing: boolean | undefined = undefined
 	export let render: boolean
+	export let customCss: ComponentCustomCSS<'aggridcomponent'> | undefined = undefined
+
+	const { app, worldStore, selectedComponent, componentControl, darkMode } =
+		getContext<AppViewerContext>('AppViewerContext')
+
+	let css = initCss($app.css?.aggridcomponent, customCss)
 
 	let result: any[] | undefined = undefined
 
@@ -47,12 +55,8 @@
 		if (!loaded) {
 			loaded = true
 		}
-		console.log(resolvedConfig?.extraConfig)
 	}
 
-	const { worldStore, selectedComponent, componentControl, darkMode } =
-		getContext<AppViewerContext>('AppViewerContext')
-
 	let resolvedConfig = initConfig(
 		components['aggridcomponent'].initialData.configuration,
 		configuration
@@ -139,7 +143,12 @@
 	{#if Array.isArray(value) && value.every(isObject)}
 		{#if Array.isArray(resolvedConfig.columnDefs) && resolvedConfig.columnDefs.every(isObject)}
 			<div
-				class="border shadow-sm divide-y flex flex-col h-full"
+				class={twMerge(
+					'border shadow-sm divide-y flex flex-col h-full',
+					css?.container?.class,
+					'wm-aggrid-container'
+				)}
+				style={css?.container?.style}
 				bind:clientHeight
 				bind:clientWidth
 			>

frontend/src/lib/components/apps/components/display/table/AppAggridTableEe.svelte

@@ -4,7 +4,7 @@
 <script lang="ts">
 	import AppAggridTable from './AppAggridTable.svelte'
 	import type { AppInput } from '$lib/components/apps/inputType'
-	import type { RichConfigurations } from '$lib/components/apps/types'
+	import type { ComponentCustomCSS, RichConfigurations } from '$lib/components/apps/types'
 
 	import 'ag-grid-community/styles/ag-grid.css'
 	import 'ag-grid-community/styles/ag-theme-alpine.css'
@@ -16,6 +16,7 @@
 	export let configuration: RichConfigurations
 	export let initializing: boolean | undefined = undefined
 	export let render: boolean
+	export let customCss: ComponentCustomCSS<'aggridcomponent'> | undefined = undefined
 
 	let loaded = false
 	async function load() {
@@ -30,7 +31,7 @@
 </script>
 
 {#if loaded}
-	<AppAggridTable {id} {componentInput} {configuration} {initializing} {render} />
+	<AppAggridTable {id} {componentInput} {configuration} {initializing} {render} {customCss} />
 {:else}
 	<Loader2 class="animate-spin" />
 {/if}

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

@@ -300,6 +300,7 @@
 				configuration={component.configuration}
 				bind:initializing
 				componentInput={component.componentInput}
+				customCss={component.customCss}
 				{render}
 			/>
 		{:else if component.type === 'aggridcomponentee'}
@@ -309,6 +310,7 @@
 				configuration={component.configuration}
 				bind:initializing
 				componentInput={component.componentInput}
+				customCss={component.customCss}
 				{render}
 			/>
 		{:else if component.type === 'textcomponent'}

frontend/src/lib/components/apps/editor/component/components.ts

@@ -499,7 +499,9 @@ const aggridcomponentconst = {
 	icon: Table2,
 	documentationLink: `${documentationBaseUrl}/aggrid_table`,
 	dims: '3:10-6:10' as AppComponentDimensions,
-	customCss: {},
+	customCss: {
+		container: { class: '', style: '' }
+	},
 	initialData: {
 		configuration: {
 			columnDefs: {

frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte

@@ -114,7 +114,7 @@
 								</Tab>
 							{/if}
 							<div slot="content" class="h-full">
-								<TabContent value="selectors" class="h-full mt-2">
+								<TabContent value="selectors" class="h-full mt-2 ">
 									<DataTable size="sm">
 										<Head>
 											<tr>
@@ -155,7 +155,6 @@
 												<Cell head first>Variable</Cell>
 												<Cell head>Default value</Cell>
 												<Cell head>Comment</Cell>
-
 												<Cell head last />
 											</tr>
 										</Head>
@@ -169,11 +168,21 @@
 												</Cell>
 												<Cell>
 													{#if comment}
-														<div class="max-w-24 whitespace-pre-wrap">{comment}</div>
+														<div class="w-80 whitespace-pre-wrap">{comment}</div>
 													{/if}
 												</Cell>
-												<Cell>
-													<Button size="xs2" color="light">
+												<Cell sticky>
+													<Button
+														size="xs2"
+														color="light"
+														on:click={() => {
+															dispatch(
+																'insertSelector',
+																`${customisation.root} { ${variable}: ${value};}`
+															)
+														}}
+														wrapperClasses="px-2 py-3.5 bg-surface"
+													>
 														<ArrowUpSquare size={16} />
 													</Button>
 												</Cell>

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

@@ -127,6 +127,7 @@ interface Customisation {
 	variables: Variable[]
 	link?: string | undefined
 	variablesTooltip?: string
+	root?: string
 }
 
 export const customisationByComponent: Customisation[] = [
@@ -307,6 +308,7 @@ export const customisationByComponent: Customisation[] = [
 			},
 			{ variable: '--range-float-text', value: 'white', comment: 'text color on floating label' }
 		],
+		root: '.rangeSlider',
 		link: 'https://simeydotme.github.io/svelte-range-slider-pips/#styling'
 	},
 	{
@@ -380,6 +382,32 @@ export const customisationByComponent: Customisation[] = [
 		],
 		variables: []
 	},
+	{
+		components: ['aggridcomponent', 'aggridcomponentee'],
+		selectors: [
+			{ selector: '.wm-aggrid-container', comment: 'Ag grid container', customCssKey: 'container' }
+		],
+		variables: [
+			{
+				variable: '--ag-alpine-active-color',
+				value: '#4a40d4',
+				comment:
+					'Accent colour used for checked checkboxes, range selections, row hover, row selections, selected tab underlines, and input focus outlines in the Alpine theme'
+			},
+			{
+				variable: '--ag-foreground-color',
+				value: '#ffffff',
+				comment: 'Colour of text and icons in primary UI elements like menus'
+			},
+			{
+				variable: '--ag-background-color',
+				value: '#1e1f20',
+				comment: 'Background colour of the grid'
+			}
+		],
+		link: 'https://www.ag-grid.com/javascript-data-grid/global-style-customisation-variables/',
+		root: '.ag-theme-alpine'
+	},
 	{
 		components: ['steppercomponent'],
 		selectors: [
@@ -775,7 +803,8 @@ export const customisationByComponent: Customisation[] = [
 				value: '#b8b8b8',
 				comment: 'Text color of disabled option in the dropdown list.'
 			}
-		]
+		],
+		root: '.multiselect'
 	}
 ]
 

frontend/src/lib/components/table/Cell.svelte

@@ -9,6 +9,8 @@
 	export let head: boolean = false
 	export let shouldStopPropagation: boolean = false
 
+	export let sticky: boolean = false
+
 	let Tag = head ? 'th' : 'td'
 
 	const { size } = getContext<DatatableContext>('datatable')
@@ -22,7 +24,7 @@
 		if (shouldStopPropagation) e.stopPropagation()
 	}}
 	class={twMerge(
-		'px-2 py-3.5 text-left text-xs text-primary font-normal whitespace-nowrap',
+		'text-left text-xs text-primary font-normal whitespace-nowrap',
 		first ? 'sm:pl-6' : '',
 		last ? 'sm:pr-6' : '',
 
@@ -34,8 +36,15 @@
 		$$restProps.class,
 		size === 'sm' ? 'px-1.5 py-2.5' : '',
 		size === 'lg' ? 'px-3 py-4' : '',
-		size === 'xs' ? 'px-1 py-1.5' : ''
+		size === 'xs' ? 'px-1 py-1.5' : '',
+		sticky ? `!p-0 sticky ${first ? 'left-0' : 'right-0'}` : 'px-2 py-3.5'
 	)}
 >
-	<slot />
+	{#if sticky}
+		<div class={twMerge(first ? 'border-r' : ' border-l ')}>
+			<slot />
+		</div>
+	{:else}
+		<slot />
+	{/if}
 </svelte:element>