uiconfig-blueprint 0.0.1

package/src/bpComponents/BPColorInputComponent.tsx

@@ -0,0 +1,138 @@
+import React, {createRef} from "react";
+import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
+import {Button, Icon, InputGroup, Popover} from "@blueprintjs/core";
+import {BPValueComponent, BPValueComponentState} from "./BPValueComponent";
+import {HexColorPicker} from "react-colorful";
+import {FormGroupComponent} from "../components/FormGroupComponent";
+import {getOrCall} from 'ts-browser-helpers'
+import type {Color, ColorRepresentation} from "three"
+
+export type BPColorComponentState = BPValueComponentState<string> & {
+    mode: 'number' | 'string' | 'Color', lastValue?: ColorRepresentation,
+    srgbConvert: boolean
+}
+
+
+export class BPColorInputComponent extends BPValueComponent<ColorRepresentation, BPColorComponentState, string> {
+    private _inputRef = createRef<HTMLInputElement>()
+    private _tempColor: Color
+
+    constructor(props: BPComponentProps<ColorRepresentation>, context: UiConfigRendererContextType) {
+        super(props, context, {
+            label: 'Color',
+            value: "#000000",
+            mode: 'number',
+            srgbConvert: false,
+        });
+        if(!context.THREE?.Color) throw new Error('BPColorInputComponent requires THREE.Color to be available in context')
+        if(!this._tempColor) this._tempColor = new context.THREE.Color()
+    }
+
+    convertValueToState(val: ColorRepresentation, state: BPColorComponentState): BPColorComponentState {
+        if(!this._tempColor) this._tempColor = new this.context.THREE!.Color()
+        let mode: BPColorComponentState['mode'] = state.mode
+        const srgbConvert = getOrCall(this.props.config.srgb) === true
+        if (typeof val === 'string') mode = 'string'
+        else if (typeof val === 'number') mode = 'number';
+        else if (val.isColor)
+            mode = 'Color'
+        else console.error('not supported color', val)
+        this._tempColor.set(val)
+        if (srgbConvert) this._tempColor.convertLinearToSRGB()
+        const value = '#' + this._tempColor.getHexString()
+        // console.log('color', mode, value, val)
+        return {...state, mode, value, lastValue: val, srgbConvert} // default config.srgb = false
+    }
+
+    async convertStateToValue(state: BPColorComponentState): Promise<ColorRepresentation> {
+        if(!this._tempColor) this._tempColor = new this.context.THREE!.Color()
+        let val: ColorRepresentation = state.lastValue || 0
+        this._tempColor.set(state.value)
+        if (state.srgbConvert) this._tempColor.convertSRGBToLinear()
+        if (state.mode === 'number') {
+            val = this._tempColor.getHex()
+        } else if (state.mode === 'string') {
+            val = '#' + this._tempColor.getHexString();
+        } else if (state.mode === 'Color') {
+            val = ((state.lastValue as Color) ?? new this.context.THREE!.Color()).copy(this._tempColor)
+        }
+        return val;
+    }
+
+    forceOnChange: boolean = true
+
+    doesNeedRefresh(state: BPColorComponentState, _?: boolean): boolean {
+        const eq = !super.doesNeedRefresh(state);
+        return ((state.value as any as Color)?.isColor && eq) ? true : !eq
+    }
+
+    private _mouseButtons = 0
+
+    componentDidMount() {
+        super.componentDidMount();
+        document.addEventListener('mousemove', this._mouseMove)
+    }
+
+    private _mouseMove = (ev: MouseEvent) => {
+        this._mouseButtons = ev.buttons
+        if (!this._mouseButtons && this._hasMouseUp) this._mouseUp()
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('mousemove', this._mouseMove)
+        this._mouseButtons = 0
+        super.componentWillUnmount();
+    }
+
+    private _hasMouseUp = false
+    private _mouseUp = () => {
+        document.removeEventListener('mouseup', this._mouseMove)
+        if (!this._hasMouseUp) return
+        this._hasMouseUp = false
+        this.setValue(this._inputRef.current!.value, true)
+
+        if (this._hasMouseUp) return
+        document.addEventListener('mouseup', this._mouseUp)
+    }
+
+    render() {
+        return !this.state.hidden ? (
+            <FormGroupComponent label={this.state.label}>
+                <InputGroup inputRef={this._inputRef}
+                            disabled={this.state.disabled} readOnly={this.state.readOnly}
+                            leftElement={(
+                    <Popover
+                        popoverClassName={'color-picker-popover'}
+                        usePortal={false}
+                        minimal={false}
+                        content={
+                        <HexColorPicker color={this.state.value}
+                                        onChange={(c) => {
+                                            if(this.state.readOnly || this.state.disabled) return
+                            this._tempColor.set(c)
+                            const v = '#' + this._tempColor.getHexString().toUpperCase()
+                            this.setValue(v, false)
+                            this._inputRef.current!.value = v
+
+                            if (this._hasMouseUp) return
+                            this._hasMouseUp = true
+                            document.addEventListener('mouseup', this._mouseUp)
+                        }
+                        }/>
+                    }
+                >
+                    <Button
+                        disabled={this.state.disabled || this.state.readOnly}
+                        icon={<Icon icon="full-circle" color={this.state.value}/>}
+                        text="" minimal
+                    />
+                </Popover>
+            )} key={this.props.config.uuid} defaultValue={this.state.value} onChange={(e) => {
+                const isHex = /^([A-Fa-f\d]+)$/.exec(e.target.value) // if someone pastes a color hex without #
+                this._tempColor.set((isHex ? '#' : '') + e.target.value)
+                this.setValue('#' + this._tempColor.getHexString().toUpperCase())
+            }}/>
+            </FormGroupComponent>
+        ) : null
+    }
+}

package/src/bpComponents/BPComponent.tsx

@@ -0,0 +1,93 @@
+import React, {createContext} from "react";
+import type {UiConfigRendererBlueprint} from '../UiConfigRendererBlueprint'
+import {UiObjectConfig} from 'uiconfig.js'
+import {getOrCall} from 'ts-browser-helpers'
+
+export type BPComponentProps<T> = {
+    config: UiObjectConfig<T>,
+    level?: number
+}
+export type BPComponentState = {
+    hidden?: boolean
+    disabled?: boolean
+    readOnly?: boolean // same as disabled(for most inputs)
+}
+export const UiConfigRendererContext = createContext<UiConfigRendererBlueprint>(null as any)
+export type UiConfigRendererContextType = React.ContextType<typeof UiConfigRendererContext>
+export abstract class BPComponent<TValue, TState, TProps extends BPComponentProps<TValue> = BPComponentProps<TValue>> extends React.Component<TProps, TState> {
+    static contextType = UiConfigRendererContext
+    context!: UiConfigRendererContextType
+
+    protected constructor(props: TProps, context: UiConfigRendererContextType, state: TState) {
+        super(props, context);
+        this.state = this.getUpdatedState(state)
+        // this.state = state
+    }
+
+    /**
+     * Set the state(and rerender), then return a promise that resolves when the state is set
+     * @param state
+     */
+    setStatePromise(state: TState) {
+        return new Promise<void>(resolve => this.setState(state, resolve))
+    }
+
+    /**
+     * This is called to get the updated state from the config, copy any values/properties from the config to the state here
+     * @param state - the current state
+     */
+    getUpdatedState(state: TState): TState{
+        return {
+            ...state,
+            hidden: getOrCall(this.props.config.hidden) ?? false,
+            disabled: getOrCall(this.props.config.disabled) ?? false,
+            readOnly: getOrCall(this.props.config.readOnly) ?? false,
+        }
+    }
+
+    private _refreshing = false;
+
+    /**
+     * Refreshes the state from the config
+     *
+     * This is called by the ui component when the value is changed and from uiRefresh from the config
+     * @param state - optional state to refresh from, if not provided, the current state is used
+     */
+    async refreshConfigState(state?: TState) {
+        if (!this.props.config) return;
+        if (this._refreshing) return;
+        this._refreshing = true
+        const s = this.getUpdatedState(state || this.state)
+        // console.log('set state', s)
+        await this.setStatePromise(s)
+        // todo debug refresh frequency etc
+        // console.log('refreshing', this.props.config.label, this.props.config.type, this.state)
+        this._refreshing = false
+    }
+
+    /**
+     * Add reference to this to uiRef and set uiRefresh to the config to refresh this component
+     *
+     * also refreshes the config once which re-renders (todo: check if this is required)
+     */
+    componentDidMount() {
+        super.componentDidMount?.();
+        this.props.config.uiRef = this
+        this.props.config.uiRefresh = (deep = false, mode = 'postFrame', delay = 0) => {
+            // console.log('refresh', this.props.config.label, this.props.config.type)
+            this.context.addToRefreshQueue(mode, this.props.config, deep, delay)
+        }
+        // console.log('mount', this.props.config.label, this.props.config.type, this.props.config)
+        this.props.config.uiRefresh()
+    }
+
+    componentWillUnmount() {
+        // console.log('unmount', this.props.config.label, this.props.config.type, this.props.config)
+        this.props.config.uiRef = undefined
+        this.props.config.uiRefresh = undefined
+        super.componentWillUnmount?.();
+    }
+
+    // abstract updateStateValue(state: TState): Promise<void>;
+
+}

package/src/bpComponents/BPContainerComponent.tsx

@@ -0,0 +1,57 @@
+import {BPLabelledComponent, BPLabelledComponentState} from './BPLabelledComponent'
+import {BPComponentProps, UiConfigRendererContextType} from './BPComponent'
+import {PanelActions} from '@blueprintjs/core/lib/esm/components/panel-stack2/panelTypes'
+import {UiObjectConfig} from 'uiconfig.js'
+import {getOrCall} from 'ts-browser-helpers'
+
+export type BPContainerComponentState = BPLabelledComponentState & {
+    children: UiObjectConfig[]
+    expanded: boolean
+}
+export class BPContainerComponent<TState extends BPContainerComponentState=BPContainerComponentState> extends BPLabelledComponent<void, TState, BPComponentProps<void> & PanelActions> {
+
+    protected _childParentOnChange: UiObjectConfig['parentOnChange'] = (ev, ...args) => {
+        console.warn('child change', ev, this.props.config)
+        this.context.methods.dispatchOnChangeSync(this.props.config, {...ev}, ...args)
+    }
+
+    protected _registerChild(child: UiObjectConfig) {
+        child.parentOnChange = this._childParentOnChange
+    }
+
+    protected _unregisterChild(child: UiObjectConfig) {
+        if (child.parentOnChange !== this._childParentOnChange)
+            child.parentOnChange = undefined
+    }
+
+    constructor(props: BPComponentProps<void> & PanelActions, context: UiConfigRendererContextType, state: TState) {
+        super(props, context, state);
+    }
+
+    getUpdatedState(state: TState) {
+        const oldChildren = state.children
+        const newChildren = this.context.methods.getChildren(this.props.config)
+        const removed = oldChildren.filter(c => !newChildren.includes(c))
+        const added = newChildren.filter(c => !oldChildren.includes(c))
+        // console.warn(this, this._registerChild, this._childParentOnChange, added, removed)
+        removed.forEach(c => this._unregisterChild(c))
+        added.forEach(c => this._registerChild(c))
+        return {
+            ...super.getUpdatedState(state),
+            // children: (this.props.config.children || []).map(c => getOrCall(c) || {}).flat(2),
+            children: newChildren,
+            expanded: getOrCall(this.props.config.expanded) ?? false,
+        }
+    }
+
+    componentDidMount() {
+        super.componentDidMount?.();
+        this.state.children.forEach(c => this._registerChild(c))
+    }
+
+    componentWillUnmount() {
+        super.componentWillUnmount?.();
+        this.state.children.forEach(c => this._unregisterChild(c))
+    }
+
+}

package/src/bpComponents/BPDropdownInputComponent.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
+import {Button, MenuItem} from "@blueprintjs/core";
+import {BPInputComponent} from "./BPInputComponent";
+import {BPValueComponentState} from "./BPValueComponent";
+import {ItemRenderer, Select} from "@blueprintjs/select";
+
+export interface DropdownItem{
+    label: string,
+    value: string|number,
+}
+
+export type BPDropdownComponentState = BPValueComponentState<string|number> & {
+    options: DropdownItem[]
+}
+const renderDropdownItem: ItemRenderer<DropdownItem> = (item, { handleClick, handleFocus, modifiers }) => {
+    if (!modifiers.matchesPredicate) {
+        return null;
+    }
+    return (
+        <MenuItem
+            text={item.label}
+            label={''}
+            roleStructure="listoption"
+            active={modifiers.active}
+            key={item.value}
+            onClick={handleClick}
+            onFocus={handleFocus}
+        />
+    );
+};
+
+export class BPDropdownInputComponent extends BPInputComponent<string|number, BPDropdownComponentState> {
+    constructor(props: BPComponentProps<string|number>, context: UiConfigRendererContextType) {
+        super(props, context, {
+            value: '0',
+            label: 'Dropdown',
+            options: [{label: 'none', value: ''}]
+        });
+    }
+
+    getUpdatedState(state: BPDropdownComponentState): BPDropdownComponentState {
+        const children = this.context.methods.getChildren(this.props.config)
+        const options: DropdownItem[] = children.map(value => {
+            const label = this.context.methods.getLabel(value)
+            return {label, value: value!.value ?? label}
+        })
+
+        // const selected = options.find(o=>o.value===val)||options[0]
+        return super.getUpdatedState({
+            ...state, options
+        });
+    }
+
+    renderInput() {
+        const item = this.state.options.find(o=>o.value===this.state.value)||this.state.options[0]
+        return (
+            <Select<DropdownItem>
+                filterable={false}
+                activeItem={item}
+                key={this.props.config.uuid}
+                disabled={this.state.disabled}
+                popoverProps={{
+                    minimal: true
+                }}
+                noResults={<MenuItem disabled={true} text="No results."  roleStructure="listoption" />}
+                items={this.state.options}
+                onItemSelect={(item)=> {
+                    if(this.state.readOnly) return
+                    this.setValue(item.value)
+                }}
+                itemRenderer={renderDropdownItem}
+            >
+                {/* children become the popover target; render value here */}
+                <Button rightIcon="double-caret-vertical" small={true}
+                        style={{whiteSpace: 'nowrap', textOverflow: "ellipsis"}}>{item.label}</Button>
+            </Select>
+        )
+    }
+}

package/src/bpComponents/BPFileComponent.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import {FileComponent} from "../components/FileComponent";
+import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
+import {BPValueComponent, BPValueComponentState} from "./BPValueComponent";
+import {FormGroupComponent} from "../components/FormGroupComponent";
+
+type StateValue = string | File | null
+type FileImportType = any
+export type BPFileComponentState = BPValueComponentState<StateValue> & {
+    mode: 'url'|'file',
+}
+
+type BPFileComponentExtras = {fileLoader?: {load: (v: string|File|{path: string, file: File|Blob})=>Promise<FileImportType>}}
+type BPFileComponentContextType = UiConfigRendererContextType & BPFileComponentExtras
+
+export class BPFileComponent extends BPValueComponent<FileImportType | null, BPFileComponentState, StateValue> {
+    context!: BPFileComponentContextType
+    props!: BPComponentProps<FileImportType | null> & BPFileComponentExtras
+    constructor(props: BPComponentProps<FileImportType | null> & BPFileComponentExtras, context: BPFileComponentContextType) {
+        super(props, context, {
+            mode: 'file',
+            value: null,
+            label: 'File'
+        });
+        if(!context.fileLoader && !props.fileLoader) throw new Error('BPFileComponent requires fileLoader to be available in context')
+    }
+
+    convertValueToState(val: FileImportType | null, state: BPFileComponentState): BPFileComponentState {
+        let mode: BPFileComponentState['mode'] = state.mode
+        let value = state.value
+        if (val) { // todo: move to subclass in threepipe
+            if (val.userData) {
+                if (val.userData.__sourceBlob) {
+                    value = val.userData.__sourceBlob
+                    mode = 'file'
+                } else if (val.userData.rootPath?.length) {
+                    value = val.userData.rootPath
+                    mode = 'url'
+                }
+            }
+        }
+        return {...state, mode, value}
+    }
+
+    async convertStateToValue(state: BPFileComponentState): Promise<FileImportType|null> {
+        const value = state.value
+        let val: any
+        if (value === null) {
+            val = null
+        } else if (typeof value === 'string') {
+            val = await (this.context.fileLoader ?? this.props.fileLoader)!.load(value);
+        } else {
+            // todo handle blob with no name
+            val = await (this.context.fileLoader ?? this.props.fileLoader)!.load({path: value.name || 'file', file: value});
+        }
+        // console.log(val)
+        return val;
+    }
+
+    // doesNeedRefresh(state: BPFileComponentState): boolean {
+    //     return super.doesNeedRefresh(state);
+    // }
+
+    render() {
+        return !this.state.hidden ? (
+            <FormGroupComponent label={this.state.label} flexBasis={"100%"} disabled={this.state.disabled}>
+                <FileComponent state={this.state} onChange={(s) => {
+                    this.updateStateValue({...this.state, ...s}); // todo: set loading while this promise is happening.
+                }} key={this.props.config.uuid}/>
+            </FormGroupComponent>
+        ) : null
+    }
+}

package/src/bpComponents/BPFolderComponent.scss

@@ -0,0 +1,107 @@
+@import "~@blueprintjs/core/lib/scss/variables.scss";
+
+// todo: style for bp5-disabled
+
+.folder-children {
+  gap: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  align-items: flex-start;
+
+  > div {
+    display: contents;
+  }
+}
+
+.folder-card {
+  user-select: none;
+  width: 100%;
+  //padding-top: $pt-grid-size !important;
+  //padding-bottom: $pt-grid-size !important;
+  padding: 0 !important;
+  //border-top: 1px solid #444 !important;
+  //border-bottom: 1px solid #444 !important;
+  display: flex;
+  flex-direction: column;
+  background-color: $light-gray4 !important;
+}
+.bp5-dark .folder-card {
+  background-color: $dark-gray3 !important;
+}
+
+
+//.folder-head-label{
+//  margin-bottom: 0;
+//  user-select: none;
+//  //line-height: $pt-input-height !important;
+//  padding: $pt-grid-size !important;
+//  width: auto;
+//  cursor: pointer;
+//}
+
+
+.folder-trigger-button {
+  margin-top: 1px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: background-color 0.1s ease-in-out;
+  background-color: $light-gray5 !important;
+
+  &:hover {
+    background-color: $light-gray3 !important;
+  }
+
+  &:active {
+    background-color: $gray4 !important;
+  }
+}
+.bp5-dark .folder-trigger-button {
+  background-color: $dark-gray1 !important;
+
+  &:hover {
+      background-color: $dark-gray3 !important;
+  }
+
+  &:active {
+      background-color: $dark-gray5 !important;
+  }
+}
+
+//.folder-trigger-button:focus{
+//  outline: none !important;
+//}
+
+
+.folder-head-card-minimal {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-direction: row;
+
+  > .folder-trigger-button {
+    margin-right: $pt-grid-size;
+  }
+}
+
+.folder-head-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  box-shadow: 0 1px $pt-divider-black;
+  z-index: 1;
+
+  > button {
+    border-radius: 0;
+  }
+
+  .bp5-dark & {
+    box-shadow: 0 1px $pt-dark-divider-white;
+    //background-color: $dark-gray1;
+  }
+}
+

package/src/bpComponents/BPFolderComponent.tsx

@@ -0,0 +1,91 @@
+import React, {DOMAttributes} from "react";
+import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
+import {Button, Collapse, Icon, Intent} from "@blueprintjs/core";
+import {ConfigObject} from "../ConfigObject";
+import {PanelActions} from "@blueprintjs/core/lib/esm/components/panel-stack2/panelTypes";
+import {safeSetProperty} from 'ts-browser-helpers'
+import {BPContainerComponent, BPContainerComponentState} from './BPContainerComponent'
+
+export type BPFolderComponentState = BPContainerComponentState & {
+}
+
+export class BPFolderComponent extends BPContainerComponent<BPFolderComponentState> {
+    constructor(props: BPComponentProps<void>&PanelActions, context: UiConfigRendererContextType) {
+        super(props, context, {children: [], expanded: false, label: 'Folder'});
+    }
+
+    render() {
+        const setExpanded = (e: boolean) => {
+            if (e === this.state.expanded) return
+            this.setState({...this.state, expanded: e})
+            safeSetProperty(this.props.config, "expanded", e, true)
+            // if (e) this.state.children.forEach(c => Array.isArray(c) ? null : c.uiRefresh?.("postFrame", true, 1)) // todo: handle array and functions
+        }
+
+        return !this.state.hidden ? (
+            <FolderHeadCard
+                key={this.props.config.uuid}
+                open={this.state.expanded}
+                disabled={this.state.disabled}
+                minimal={(this.props.level ?? 0) > 0}
+                onClick={() => {
+                    if(this.state.readOnly) return
+                    setExpanded(!this.state.expanded)
+                }}
+                label={this.state.label}
+            >
+                <Collapse isOpen={this.state.expanded} keepChildrenMounted={false}>
+                    <div className="folder-children" style={{listStyleType: "none", paddingLeft: "0"}}>
+                        {this.state.children.map((c, i) => <ConfigObject key={'c' + i} {...this.props} config={c}
+                                                                         level={(this.props.level ?? 0) + 1}/>)}
+                    </div>
+                </Collapse>
+            </FolderHeadCard>
+        ) : null
+    }
+}
+
+export const FolderHeadCard: React.FC<React.PropsWithChildren<{ open: boolean, label: string, minimal: boolean, disabled?: boolean, onClick: DOMAttributes<HTMLElement>['onClick'] }>> = (props) => {
+    return (
+        <div
+            // interactive={!props.open}
+            className="folder-card"
+            // elevation={props.open ? 3 : undefined}
+        >
+            <div className={props.minimal ? 'folder-head-card-minimal' : 'folder-head-card'}>
+                {/*<H6 className="folder-head-label"*/}
+                {/*    onClick={props.onClick}>{props.label}</H6>*/}
+                {/*<Icon icon="chevron-right" style={{*/}
+                {/*    rotate: props.open ? "90deg" : "0deg",*/}
+                {/*    transition: "rotate 0.25s ease-in-out"*/}
+                {/*}} className="folder-head-label-icon"/>*/}
+
+                {/*<Button className="folder-trigger-button" onClick={props.onClick}*/}
+                {/*        fill={true} minimal={true}*/}
+                {/*        rightIcon={(*/}
+                {/*            <Icon icon="chevron-right" style={{*/}
+                {/*                rotate: props.open ? "90deg" : "0deg",*/}
+                {/*                transition: "rotate 0.25s ease-in-out"*/}
+                {/*            }} className="folder-head-label-icon"/>*/}
+                {/*        )}>{props.label}*/}
+                {/*</Button>*/}
+
+                <Button
+                    className="folder-trigger-button" fill={!props.minimal} onClick={props.onClick}
+                    minimal={true}
+                    disabled={props.disabled}
+                    small={props.minimal}
+                    style={props.minimal ? {} : {fontSize: "0.95rem", paddingTop: "8px", paddingBottom: "8px"}}
+                    intent={props.open ? Intent.PRIMARY : Intent.NONE}
+                    rightIcon={(
+                        <Icon icon="chevron-right" style={{
+                            rotate: props.open ? "90deg" : "0deg",
+                            transition: "rotate 0.25s ease-in-out"
+                        }}/>
+                    )}>{props.label}
+                </Button>
+            </div>
+            {props.children}
+        </div>
+    )
+}

package/src/bpComponents/BPInputComponent.tsx

@@ -0,0 +1,33 @@
+import {BPValueComponent, BPValueComponentState} from "./BPValueComponent";
+import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
+import React, {ReactNode} from "react";
+import {FormGroupComponent} from "../components/FormGroupComponent";
+
+export abstract class BPInputComponent<
+    TStateValue, TState extends BPValueComponentState<TStateValue> = BPValueComponentState<TStateValue>>
+    extends BPValueComponent<TStateValue, TState, TStateValue> {
+
+    protected constructor(props: BPComponentProps<TStateValue>, context: UiConfigRendererContextType, state: TState) {
+        super(props, context, state);
+    }
+
+    convertValueToState(value: TStateValue, state: TState): TState {
+        return {...state, value}
+    }
+
+    async convertStateToValue(state: TState): Promise<TStateValue> {
+        return state.value;
+    }
+
+    abstract renderInput(): ReactNode;
+
+    protected flexBasis = "100%"
+
+    render() {
+        return !this.state.hidden ? (
+            <FormGroupComponent disabled={this.state.disabled} label={this.state.label} flexBasis={this.flexBasis}>
+                {this.renderInput()}
+            </FormGroupComponent>
+        ) : null
+    }
+}