TELESTION-462 Make widgets configurable

[pklaschka]

Uses a context to make widgets configurable. While currently, configuration is only possible in the edit dashboard page, this context can, in the future, be used to also allow editing the configuration in other places, such as within the widget itself.

For convenience, components are provided for basic confiugration fields such as textfields and checkboxes. This makes configurability as easy as this:

{
	...
	configElement: (
		<WidgetConfigWrapper>
			<WidgetConfigCheckboxField label={'Bool value'} name={'bool'} />
			<WidgetConfigTextField label={'Test Text'} name={'text'} />
		</WidgetConfigWrapper>
	)
}

It is also possible to create custom configuration fields (using useConfigureWidgetField(name, validator)) or even fully custom configuration UIs (using useConfigureWidget()). Both of these hooks return both the current configuration and a function that works the same way a useState()-setter works. Note that any congiuration passed into or out of the confiuration controls automatically, controlled by the context, get validated using the widget's createConfig function.

Example of using the useConfiugreWidgetField() hook:

function WidgetConfigTextField(props: { label: string; name: string }) {
	const [value, setValue] = useConfigureWidgetField(props.name, s =>
		z.string().parse(s)
	);

	return (
		<FormGroup className={'mb-3'}>
			<FormLabel>{props.label}</FormLabel>
			<FormControl
				data-name={props.name}
				value={value}
				onChange={e => setValue(e.target.value)}
			/>
		</FormGroup>
	);
}

Everything related to widget configuration can be imported from @wuespace/telestion/widget.

Note that this also adjusts the user data to use a Record<string, jsonSchema> instead of a Record<string, unknown> as the widget instance configuration type. The jsonSchema implementation is taken from the zod documentation (README.md) wiwhere https://github.com/ggoodman is credited; thank you for this great implementation!

[pklaschka]

Current dependencies on/for this PR:

• main
  • PR TELESTION-443: Error Boundaries #411
    • PR Disallow widgets to resize based on their content #412
      • PR TELESTION-460 Dashboard layout editor #417
        • PR TELESTION-462 Make widgets configurable #418 👈
          • PR Deleting dashboards (TELESTION-458) and changing their names (TELESTION-459) #419
            • PR Improve the name for new dashboards #420

This stack of pull requests is managed by Graphite.

[fussel178]

LGTM 🏃

[pklaschka]

Merge activity

• Jan 26, 7:44 PM: Graphite rebased this pull request as part of a merge.
• Jan 26, 7:45 PM: @pklaschka merged this pull request with Graphite.