@nu-art/thunderstorm-frontend 0.400.5

package/components/adapter/Adapter.d.ts

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import { ComponentType } from 'react';
+import { TS_Object } from '@nu-art/ts-common';
+import { _BaseNodeRenderer, NodeRendererProps } from './BaseRenderer.js';
+export type TreeNode = {
+    propKey: string;
+    item: any;
+    adapter: Adapter;
+    path: string;
+    expandToggler: (e: React.MouseEvent, expand?: boolean) => void;
+    expandFromNode: (exapnd?: boolean) => void;
+    expanded: boolean;
+};
+export type ListData<I> = I[];
+export type ListItem<I> = {
+    item: I;
+    _children?: ListItem<I>[];
+};
+export type NestedListItem<I> = {
+    item: I;
+    _children?: NestedListData<I>[];
+};
+export type NestedListData<I> = I | NestedListItem<I>;
+export type TreeData<I> = {
+    [k: string]: I | TreeData<I>;
+};
+type TreeItem<TreeMap> = {
+    [K in keyof TreeMap]: {
+        type: K;
+        item: TreeMap[K];
+        _children?: TreeItem<TreeMap>[];
+        alwaysExpanded?: boolean;
+    };
+}[keyof TreeMap];
+export type TreeType<TreeMap> = {
+    map: TreeMap;
+    action: {
+        [K in keyof TreeMap]: (item: TreeMap[K]) => Promise<any> | any;
+    };
+    nodeRenderer: {
+        [K in keyof TreeMap]: React.ComponentType<NodeRendererProps<TreeMap[K]>>;
+    };
+    renderer: {
+        [K in keyof TreeMap]: React.ComponentType<{
+            item: TreeMap[K];
+        }>;
+    };
+    rendererV3: {
+        [K in keyof TreeMap]: React.ComponentType<TreeMap[K]>;
+    };
+    nodeTypesMap: {
+        [K in keyof TreeMap]: {
+            type: K;
+            item: TreeMap[K];
+            _children?: TreeItem<TreeMap>[];
+        };
+    };
+    nodeType: TreeItem<TreeMap>;
+};
+type AdapterData<D> = D | (() => D);
+export declare class BaseAdapter<T = any> {
+    data: any;
+    childrenKey?: string;
+    constructor(data: any);
+    setData(data: object): this;
+    filter: <K = any>(obj: K, key: keyof K) => boolean;
+    isParent: (obj: any) => boolean;
+    hadChildren: (obj: any) => boolean;
+    getFilteredChildren<K extends TS_Object>(obj: K): (keyof K)[] | [];
+    adjust: ((obj: any) => {
+        data: any;
+        deltaPath: string;
+    });
+    clone(baseAdapter: this): this;
+}
+export declare class Adapter<T = any, I extends NodeRendererProps<T> = NodeRendererProps<T>> extends BaseAdapter<I> {
+    hideRoot: boolean;
+    treeNodeRenderer: _BaseNodeRenderer<any>;
+    setTreeNodeRenderer(renderer: any): this;
+    resolveRenderer(propKey: string): _BaseNodeRenderer<I>;
+}
+declare abstract class BaseAdapterBuilder<Data> {
+    data: Data;
+    treeNodeRenderer: ComponentType<NodeRendererProps>;
+    multiRenderer: boolean;
+    expandCollapseRenderer: ComponentType<NodeRendererProps>;
+    protected filter: <K = any>(obj: K, key: keyof K) => boolean;
+    childrenKey?: string;
+    constructor();
+    setData(data: Data): this;
+    setNodeRenderer(treeNodeRenderer: ComponentType<NodeRendererProps>): this;
+    setExpandCollapseRenderer(expandCollapseRenderer: ComponentType<NodeRendererProps>): this;
+    setChildrenKey: (childrenKey: string) => this;
+    setFilter(filter: <K = any>(obj: K, key: keyof K) => boolean): void;
+    protected defaultExpandCollapseRenderer: (props: NodeRendererProps) => import("react/jsx-runtime").JSX.Element;
+    protected defaultTreeNodeRenderer: (props: NodeRendererProps) => import("react/jsx-runtime").JSX.Element;
+    protected abstract resolveRenderer(type: string): _BaseNodeRenderer<any>;
+}
+declare class ListSingleAdapterBuilder<ItemType = any> extends BaseAdapterBuilder<AdapterData<ListData<ItemType>>> {
+    readonly renderer: _BaseNodeRenderer<ItemType>;
+    constructor(renderer: _BaseNodeRenderer<ItemType>);
+    protected resolveRenderer(type?: string): _BaseNodeRenderer<any>;
+    nested(): ListSingleAdapterBuilder<NestedListData<ItemType>>;
+    build(): Adapter<any, NodeRendererProps<any>>;
+}
+declare class MultiTypeAdapterBuilder<TreeMap extends TreeType<any>> extends BaseAdapterBuilder<TreeMap['nodeType']> {
+    readonly rendererMap: TreeMap['nodeRenderer'];
+    private _hideRoot;
+    constructor(rendererMap: TreeMap['nodeRenderer']);
+    protected resolveRenderer: (type?: string) => _BaseNodeRenderer<any>;
+    tree(): MultiTypeAdapterBuilder<TreeMap>;
+    hideRoot(): this;
+    build(): Adapter<any, NodeRendererProps<any>>;
+}
+declare class TreeSingleAdapterBuilder<RenderItemType = any> extends BaseAdapterBuilder<AdapterData<TreeData<RenderItemType>>> {
+    readonly renderer: _BaseNodeRenderer<RenderItemType>;
+    private _hideRoot;
+    constructor(renderer: _BaseNodeRenderer<RenderItemType>);
+    protected resolveRenderer(type?: string): _BaseNodeRenderer<any>;
+    hideRoot(): this;
+    build(): Adapter<any, NodeRendererProps<any>>;
+}
+declare class ListAdapterBuilder {
+    singleRender<Item>(renderer: _BaseNodeRenderer<Item>): ListSingleAdapterBuilder<Item>;
+    multiRender<TreeMap extends TreeType<any>>(rendererMap: TreeMap['nodeRenderer']): MultiTypeAdapterBuilder<TreeMap>;
+    multiRenderV3<TreeMap extends TreeType<any>>(rendererMap: TreeMap['nodeRenderer']): MultiTypeAdapterBuilder<TreeMap>;
+}
+declare class TreeAdapterBuilder {
+    singleRender<Item>(renderer: _BaseNodeRenderer<Item>): TreeSingleAdapterBuilder<Item>;
+    multiRender<TreeMap extends TreeType<any>>(rendererMap: TreeMap['nodeRenderer']): MultiTypeAdapterBuilder<TreeMap>;
+}
+declare class _AdapterBuilder {
+    list(): ListAdapterBuilder;
+    tree(): TreeAdapterBuilder;
+}
+export declare function AdapterBuilder(): _AdapterBuilder;
+export declare function SimpleTreeAdapter<T>(options: TreeData<T>, renderer: (node: NodeRendererProps<T>) => React.ReactElement): Adapter<any, NodeRendererProps<any>>;
+export declare function SimpleListAdapter<T>(options: T[], renderer: (node: NodeRendererProps<T>) => React.ReactElement): Adapter<any, NodeRendererProps<any>>;
+export {};

package/components/adapter/Adapter.js

@@ -0,0 +1,259 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { _keys, BadImplementationException, } from '@nu-art/ts-common';
+import { SimpleTreeNodeRenderer } from '../TS_Tree/SimpleTreeNodeRenderer.js';
+import { _className } from '../../utils/tools.js';
+export class BaseAdapter {
+    data;
+    childrenKey;
+    constructor(data) {
+        this.data = data;
+    }
+    setData(data) {
+        this.data = data;
+        return this;
+    }
+    filter = (obj, key) => true;
+    // by default all objects and arrays are parents
+    isParent = (obj) => {
+        if (obj === undefined || obj === null)
+            return false;
+        if (!this.childrenKey)
+            return Array.isArray(obj) || typeof obj === 'object';
+        return typeof obj === 'object' && obj['_isParent'] === true || Array.isArray(obj);
+    };
+    hadChildren = (obj) => {
+        if (!this.isParent(obj))
+            return false;
+        return obj['length'] > 0;
+    };
+    // this can be gone.. and builders must use the new filterChildren
+    getFilteredChildren(obj) {
+        if (obj === undefined || obj === null)
+            return [];
+        if (typeof obj !== 'object')
+            return [];
+        if (Array.isArray(obj))
+            return _keys(obj);
+        if (!this.childrenKey)
+            return _keys(obj).filter(k => this.filter(obj, k));
+        const objElement = obj[this.childrenKey];
+        if (!objElement)
+            return [];
+        return _keys(objElement);
+    }
+    // this to allow us to navigate and skip into nested items in an object without changing the object
+    // adjust = (obj: any): { data: any; deltaPath: string } => this.adjustImpl(obj, "_children");
+    adjust = (obj) => {
+        if (!this.childrenKey)
+            return ({ data: obj, deltaPath: '' });
+        if (!obj[this.childrenKey])
+            return { data: obj, deltaPath: '' };
+        const objElement = { ...obj[this.childrenKey], type: obj.type, item: obj.item, _isParent: true, length: obj[this.childrenKey].length, alwaysExpanded: obj.alwaysExpanded };
+        return { data: objElement, deltaPath: this.childrenKey || '' };
+    };
+    clone(baseAdapter) {
+        _keys(this).forEach(k => {
+            baseAdapter[k] = this[k];
+        });
+        return baseAdapter;
+    }
+}
+export class Adapter extends BaseAdapter {
+    hideRoot = false;
+    treeNodeRenderer = SimpleTreeNodeRenderer;
+    setTreeNodeRenderer(renderer) {
+        this.treeNodeRenderer = renderer;
+        return this;
+    }
+    resolveRenderer(propKey) {
+        return (pah) => null;
+    }
+}
+class BaseAdapterBuilder {
+    data;
+    treeNodeRenderer;
+    multiRenderer = false;
+    expandCollapseRenderer;
+    filter = (obj, key) => true;
+    childrenKey;
+    constructor() {
+        this.expandCollapseRenderer = this.defaultExpandCollapseRenderer;
+    }
+    setData(data) {
+        this.data = data;
+        return this;
+    }
+    setNodeRenderer(treeNodeRenderer) {
+        this.treeNodeRenderer = treeNodeRenderer;
+        return this;
+    }
+    setExpandCollapseRenderer(expandCollapseRenderer) {
+        this.expandCollapseRenderer = expandCollapseRenderer;
+        return this;
+    }
+    // Utility - move to builder
+    setChildrenKey = (childrenKey) => {
+        this.childrenKey = childrenKey;
+        return this;
+    };
+    setFilter(filter) {
+        this.filter = filter;
+    }
+    defaultExpandCollapseRenderer = (props) => {
+        function resolveSymbol() {
+            if (typeof props.item !== 'object')
+                return '';
+            if (Object.keys(props.item).length === 0)
+                return '';
+            if (props.node.adapter.isParent(props.item)) {
+                if (props.node.expanded)
+                    return '-';
+                return '+';
+            }
+            return '';
+        }
+        const className = _className('node-icon', props.node.expanded ? 'expanded' : undefined);
+        return _jsx("div", { className: className, style: { minWidth: '12px' }, children: resolveSymbol() });
+    };
+    defaultTreeNodeRenderer = (props) => {
+        const _Renderer = this.resolveRenderer(props.item.type);
+        return (_jsxs("div", { className: "ll_h_c clickable", onClick: props.node.expandToggler, children: [_jsx(this.expandCollapseRenderer, { ...props }), _jsx(_Renderer, { item: this.multiRenderer ? props.item.item : props.item, node: props.node })] }));
+    };
+}
+class ListSingleAdapterBuilder extends BaseAdapterBuilder {
+    renderer;
+    constructor(renderer) {
+        super();
+        this.renderer = renderer;
+        this.treeNodeRenderer = (props) => {
+            const _Renderer = this.resolveRenderer();
+            return _jsx(_Renderer, { item: props.item, node: props.node });
+        };
+    }
+    resolveRenderer(type) {
+        return this.renderer;
+    }
+    nested() {
+        this.childrenKey = '_children';
+        this.treeNodeRenderer = (props) => {
+            const _Renderer = this.renderer;
+            return _jsx(_Renderer, { ...props });
+        };
+        return this;
+    }
+    build() {
+        const adapter = new Adapter(this.data);
+        adapter.hideRoot = true;
+        adapter.treeNodeRenderer = this.treeNodeRenderer;
+        adapter.childrenKey = this.childrenKey;
+        adapter.isParent = (obj) => obj === this.data;
+        // @ts-ignore
+        adapter.itemRenderer = this.renderer;
+        return adapter;
+    }
+}
+class MultiTypeAdapterBuilder extends BaseAdapterBuilder {
+    rendererMap;
+    _hideRoot = true;
+    constructor(rendererMap) {
+        super();
+        this.multiRenderer = true;
+        this.rendererMap = rendererMap;
+        this.childrenKey = '_children';
+        this.treeNodeRenderer = (props) => {
+            const _Renderer = this.resolveRenderer(props.item.type);
+            return _jsx(_Renderer, { item: props.item.item, node: props.node });
+        };
+    }
+    resolveRenderer = (type) => {
+        if (!type)
+            throw new BadImplementationException('multi renderer adapter items must have a type to resolve renderer');
+        const renderer = this.rendererMap[type];
+        if (!renderer)
+            throw new BadImplementationException(`renderer of type ${type} doesn't exists, in rendererMap found keys: ${JSON.stringify(_keys(this.rendererMap))}`);
+        return renderer;
+    };
+    tree() {
+        this.treeNodeRenderer = this.defaultTreeNodeRenderer;
+        this._hideRoot = false;
+        return this;
+    }
+    hideRoot() {
+        this._hideRoot = true;
+        return this;
+    }
+    build() {
+        const adapter = new Adapter(this.data);
+        adapter.hideRoot = this._hideRoot;
+        adapter.treeNodeRenderer = this.treeNodeRenderer;
+        adapter.resolveRenderer = this.resolveRenderer;
+        adapter.childrenKey = this.childrenKey;
+        return adapter;
+    }
+}
+class TreeSingleAdapterBuilder extends BaseAdapterBuilder {
+    renderer;
+    _hideRoot = false;
+    constructor(renderer) {
+        super();
+        this.renderer = renderer;
+        this.treeNodeRenderer = this.defaultTreeNodeRenderer;
+    }
+    resolveRenderer(type) {
+        return this.renderer;
+    }
+    hideRoot() {
+        this._hideRoot = true;
+        return this;
+    }
+    build() {
+        const adapter = new Adapter(this.data);
+        adapter.treeNodeRenderer = this.treeNodeRenderer;
+        adapter.hideRoot = this._hideRoot;
+        return adapter;
+    }
+}
+class ListAdapterBuilder {
+    singleRender(renderer) {
+        return new ListSingleAdapterBuilder(renderer);
+    }
+    multiRender(rendererMap) {
+        return new MultiTypeAdapterBuilder(rendererMap);
+    }
+    multiRenderV3(rendererMap) {
+        return new MultiTypeAdapterBuilder(rendererMap);
+    }
+}
+class TreeAdapterBuilder {
+    singleRender(renderer) {
+        return new TreeSingleAdapterBuilder(renderer);
+    }
+    multiRender(rendererMap) {
+        return new MultiTypeAdapterBuilder(rendererMap).tree();
+    }
+}
+class _AdapterBuilder {
+    list() {
+        return new ListAdapterBuilder();
+    }
+    tree() {
+        return new TreeAdapterBuilder();
+    }
+}
+export function AdapterBuilder() {
+    return new _AdapterBuilder();
+}
+export function SimpleTreeAdapter(options, renderer) {
+    return AdapterBuilder()
+        .tree()
+        .singleRender(renderer)
+        .setData(options)
+        .build();
+}
+export function SimpleListAdapter(options, renderer) {
+    return AdapterBuilder()
+        .list()
+        .singleRender(renderer)
+        .setData(options)
+        .build();
+}

package/components/adapter/BaseRenderer.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { HTMLAttributes } from 'react';
+import { TreeNode } from './Adapter.js';
+export type ItemRendererProps<Item = any> = {
+    item: Item;
+};
+export type _BaseItemRenderer<ItemType> = React.ComponentType<ItemRendererProps<ItemType>>;
+export declare abstract class BaseItemRenderer<ItemType, S extends {} = {}> extends React.Component<ItemRendererProps<ItemType>, S> {
+    render(): React.ReactNode;
+    protected abstract renderItem(item: ItemType): React.ReactNode;
+}
+export type NodeRendererProps<Item = any> = {
+    item: Item;
+    node: TreeNode;
+};
+export type _BaseNodeRenderer<ItemType> = React.ComponentType<NodeRendererProps<ItemType> & HTMLAttributes<HTMLDivElement>>;
+export declare abstract class BaseNodeRenderer<ItemType, S extends {} = {}> extends React.Component<NodeRendererProps<ItemType>, S> {
+    render(): React.ReactNode;
+    protected abstract renderItem(item: ItemType): React.ReactNode;
+}
+export type BaseRendererMap<R extends React.ComponentType<any>> = {
+    [k: string]: R;
+};
+export type TreeRendererMap = BaseRendererMap<_BaseNodeRenderer<any>>;

package/components/adapter/BaseRenderer.js

@@ -0,0 +1,31 @@
+/*
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as React from 'react';
+export class BaseItemRenderer extends React.Component {
+    render() {
+        return this.renderItem(this.props.item);
+    }
+}
+export class BaseNodeRenderer extends React.Component {
+    render() {
+        return this.renderItem(this.props.item);
+    }
+}

package/components/ats-group.d.ts

@@ -0,0 +1,2 @@
+import { AppToolsScreen } from './TS_AppTools/index.js';
+export declare const ATSGroup_ThunderstormComponents: AppToolsScreen[];

package/components/ats-group.js

@@ -0,0 +1,14 @@
+import { ATS_Printable } from '../_ats/ATS_Printables/ATS_Printable.js';
+import { ATS_Button } from './Button/ATS_Button.js';
+import { ATS_Label } from './Label/ATS_Label.js';
+import { ATS_CheckboxV2 } from './TS_Checkbox/ATS_CheckboxV2.js';
+import { ATS_CheckboxGroup } from './TS_CheckboxGroup/ATS_CheckboxGroup.js';
+import { ATS_CollapsableContainerV2 } from './TS_CollapsableContainerV2/index.js';
+export const ATSGroup_ThunderstormComponents = [
+    ATS_Button.Screen,
+    ATS_CheckboxGroup.Screen,
+    ATS_Label.Screen,
+    ATS_Printable.Screen,
+    ATS_CollapsableContainerV2,
+    ATS_CheckboxV2,
+];

package/components/form/Form.d.ts

@@ -0,0 +1,24 @@
+import { Form, FormRenderer } from './types.js';
+import * as React from 'react';
+import { TS_Object, TypeValidator } from '@nu-art/ts-common';
+export type FormProps<T extends TS_Object = object> = {
+    form: Form<T>;
+    renderer: FormRenderer<T>;
+    value: Partial<T>;
+    validator?: TypeValidator<T>;
+    className?: string;
+    onAccept: (value: T) => void;
+};
+type Props<T extends TS_Object = object> = FormProps<T> & {
+    showErrors: boolean;
+};
+type State<T extends TS_Object = object> = {
+    value: Partial<T>;
+};
+export declare class Component_Form<T extends TS_Object = TS_Object> extends React.Component<Props<T>, State<T>> {
+    constructor(p: Props<T>);
+    render(): import("react/jsx-runtime").JSX.Element;
+    private renderField;
+    private onValueChanged;
+}
+export {};

package/components/form/Form.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { _keys } from '@nu-art/ts-common';
+export class Component_Form extends React.Component {
+    constructor(p) {
+        super(p);
+        this.state = { value: p.value };
+    }
+    render() {
+        const data = this.state.value;
+        return (_jsx("div", { className: `ll_v_c ${this.props.className}`, style: { justifyContent: 'space-evenly' }, children: _keys(this.props.form).map(key => this.renderField(data, key)) }));
+    }
+    renderField(data, key) {
+        const field = this.props.form[key];
+        const fieldProps = {
+            key,
+            field,
+            value: data[key],
+            onChange: this.onValueChanged,
+            showErrors: this.props.showErrors,
+            validator: this.props.validator?.[key],
+            onAccept: () => {
+                this.props.onAccept(this.state.value);
+            }
+        };
+        return this.props.renderer[key](fieldProps);
+    }
+    onValueChanged = (value, id) => {
+        this.setState(state => {
+            state.value[id] = value;
+            return state;
+        });
+    };
+}

package/components/form/types.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { TS_Object, ValidatorTypeResolver } from '@nu-art/ts-common';
+export type InputField<T, K extends keyof T = keyof T> = {
+    type: 'text' | 'number' | 'password';
+    label: string;
+    className?: string;
+    hint?: string;
+};
+export type Form<T extends TS_Object> = {
+    [K in keyof T]: InputField<T, K>;
+};
+export type FormRenderer<T extends TS_Object> = {
+    [K in keyof T]: (value: Form_FieldProps<T, K>) => React.ReactNode;
+};
+export type Form_FieldProps<T extends TS_Object = TS_Object, K extends keyof T = keyof T> = {
+    key: K;
+    showErrors: boolean;
+    field: InputField<T, K>;
+    value?: T[K];
+    validator?: ValidatorTypeResolver<T[K]>;
+    onChange: (value: any, id: K) => void;
+    onAccept: () => void;
+};

package/components/form/types.js

@@ -0,0 +1,21 @@
+/*
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export {};

package/components/formv3/FormV3.d.ts

@@ -0,0 +1,25 @@
+import { ComponentType } from 'react';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { EditableItem, UIProps_EditableItem } from '../../utils/EditableItem.js';
+import { EditableRef } from '../../editable-item.js';
+export type Props_FormV3<T> = {
+    className?: string;
+    editable: EditableItem<T>;
+    renderers: {
+        [K in keyof T]?: {
+            label: string;
+            editor: ComponentType<UIProps_EditableItem<any, any, T[K]>>;
+        };
+    };
+};
+type State_FormV3<T> = {
+    editable: EditableItem<T>;
+};
+export declare class Component_FormV3<T> extends ComponentSync<Props_FormV3<T>, State_FormV3<T>> {
+    static defaultProps: {};
+    constructor(p: Props_FormV3<T>);
+    protected deriveStateFromProps(nextProps: Props_FormV3<T>, state?: Partial<EditableRef<T>>): (EditableRef<T>);
+    render(): import("react/jsx-runtime").JSX.Element;
+    private renderField;
+}
+export {};

package/components/formv3/FormV3.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { _keys } from '@nu-art/ts-common';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { TS_PropRenderer } from '../TS_PropRenderer/index.js';
+export class Component_FormV3 extends ComponentSync {
+    static defaultProps = {};
+    constructor(p) {
+        super(p);
+    }
+    deriveStateFromProps(nextProps, state) {
+        const _state = (state || {});
+        _state.editable = nextProps.editable;
+        return _state;
+    }
+    render() {
+        return (_jsx("div", { className: `ll_v_c ${this.props.className}`, style: { justifyContent: 'space-evenly' }, children: _keys(this.props.renderers).map(key => this.renderField(this.state.editable, key)) }));
+    }
+    renderField(editable, prop) {
+        const renderer = this.props.renderers[prop];
+        const Editor = renderer.editor;
+        return _jsx(TS_PropRenderer.Vertical, { label: renderer.label, children: _jsx(Editor, { editable: editable, prop: prop }) });
+    }
+}

package/components/formv3/types.d.ts

@@ -0,0 +1,29 @@
+import { ValidatorTypeResolver } from '@nu-art/ts-common';
+import * as React from 'react';
+export type ObjectProp<Def extends ObjectPropDef<any, any>> = {
+    prop: Def['prop'];
+    showErrors: boolean;
+    value?: Def['valueType'];
+    defaultValue?: Def['valueType'];
+    validator?: Def['validator'];
+    onChange: (value: Def['valueType'], id: Def['prop']) => void;
+    onAccept: (value: Def['valueType'], id: Def['prop']) => Promise<void>;
+};
+type ObjectPropDef<EnclosingType, Prop extends keyof EnclosingType, EditingType = EnclosingType[Prop]> = {
+    enclosingType: EnclosingType;
+    prop: Prop;
+    valueType: EditingType;
+    validator: ValidatorTypeResolver<EditingType>;
+    renderer: (value: ObjectProp<ObjectPropDef<EnclosingType, Prop>>) => React.ReactNode;
+};
+export type FormV3<EditingType> = {
+    editingType: EditingType;
+    validator: ValidatorTypeResolver<EditingType>;
+    properties: {
+        [K in keyof EditingType]: ObjectPropDef<EditingType, K>;
+    };
+};
+export type FormRendererV2<Form extends FormV3<any>> = {
+    [K in keyof Form["editingType"]]: (value: ObjectProp<Form["properties"][K]>) => React.ReactNode;
+};
+export {};

package/components/formv3/types.js

@@ -0,0 +1 @@
+export {};

package/components/treeicons.d.ts

@@ -0,0 +1,10 @@
+export declare const Expanded: (props: {
+    style: {
+        [k: string]: any;
+    };
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Collapsed: (props: {
+    style: {
+        [k: string]: any;
+    };
+}) => import("react/jsx-runtime").JSX.Element;

package/components/treeicons.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Expanded = (props) => _jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "currentColor", style: props.style, children: _jsx("path", { d: "M0 5l6 6 6-6z" }) });
+export const Collapsed = (props) => _jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "currentColor", style: props.style, children: _jsx("path", { d: "M0 14l6-6-6-6z" }) });