@gravity-ui/dynamic-forms 1.0.0 → 1.0.1

package/build/esm/lib/core/components/Form/hooks/useField.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import _ from 'lodash';
+import { isArraySpec, isObjectSpec } from '../../../helpers';
+import { OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, REMOVED_ITEM } from '../constants';
+import { isArrayItem, transformArrIn, transformArrOut } from '../helpers';
+export const useField = ({ name, spec, initialValue, validate: propsValidate, tools, parentOnChange, }) => {
+    const firstRenderRef = React.useRef(true);
+    const validate = React.useCallback((value) => {
+        if (value === REMOVED_ITEM) {
+            return;
+        }
+        return propsValidate === null || propsValidate === void 0 ? void 0 : propsValidate(transformArrOut(value));
+    }, [propsValidate]);
+    const [state, setState] = React.useState(() => {
+        let value = _.cloneDeep(initialValue);
+        if (_.isNil(value)) {
+            if (spec.defaultValue) {
+                value = transformArrIn(spec.defaultValue);
+            }
+            // if the spec with type array or object, and this spec has "required === true",
+            // we immediately exclude empty value
+            else if (spec.required) {
+                if (isArraySpec(spec)) {
+                    value = { [OBJECT_ARRAY_FLAG]: true, [OBJECT_ARRAY_CNT]: 0 };
+                }
+                else if (isObjectSpec(spec)) {
+                    value = {};
+                }
+            }
+        }
+        const error = validate === null || validate === void 0 ? void 0 : validate(value);
+        return {
+            active: false,
+            dirty: false,
+            error,
+            invalid: Boolean(error),
+            modified: false,
+            pristine: false,
+            touched: false,
+            valid: !error,
+            value,
+            visited: false,
+            childErrors: {},
+        };
+    });
+    const { onChange, onDrop } = React.useMemo(() => {
+        const onChange = (valOrSetter, childErrors) => {
+            setState((state) => {
+                const _value = _.isFunction(valOrSetter) ? valOrSetter(state.value) : valOrSetter;
+                const error = validate === null || validate === void 0 ? void 0 : validate(_value);
+                const value = transformArrIn(_value);
+                return Object.assign(Object.assign({}, state), { dirty: !_.isEqual(value, initialValue), error, invalid: Boolean(error), modified: true, pristine: value === initialValue, touched: true, valid: !error, value, visited: true, childErrors: Object.assign(Object.assign({}, state.childErrors), (childErrors || {})) });
+            });
+        };
+        const onDrop = () => {
+            if (isArrayItem(name)) {
+                onChange(REMOVED_ITEM);
+            }
+            else {
+                onChange(undefined);
+            }
+        };
+        return { onChange, onDrop };
+    }, [initialValue, setState, name, validate]);
+    const onBlur = React.useCallback(() => {
+        setState((state) => (Object.assign(Object.assign({}, state), { active: false, touched: true })));
+    }, [setState]);
+    const onFocus = React.useCallback(() => {
+        setState((state) => (Object.assign(Object.assign({}, state), { active: true, visited: true })));
+    }, [setState]);
+    const renderProps = React.useMemo(() => {
+        const onItemAdd = (_value) => {
+            const stateValue = (state.value || {
+                [OBJECT_ARRAY_FLAG]: true,
+                [OBJECT_ARRAY_CNT]: 0,
+            });
+            const value = Object.assign(Object.assign({}, stateValue), { [`<${stateValue[OBJECT_ARRAY_CNT]}>`]: transformArrIn(_value), [OBJECT_ARRAY_CNT]: stateValue[OBJECT_ARRAY_CNT] + 1 });
+            const error = validate === null || validate === void 0 ? void 0 : validate(value);
+            setState((state) => (Object.assign(Object.assign({}, state), { dirty: !_.isEqual(value, initialValue), error, invalid: Boolean(error), modified: true, pristine: value === initialValue, touched: true, valid: !error, value, visited: true })));
+        };
+        const onItemRemove = (idx) => {
+            const value = Object.assign(Object.assign({}, state.value), { [`<${idx}>`]: REMOVED_ITEM });
+            const error = validate === null || validate === void 0 ? void 0 : validate(value);
+            setState((state) => (Object.assign(Object.assign({}, state), { dirty: !_.isEqual(value, initialValue), error, invalid: Boolean(error), modified: true, pristine: value === initialValue, touched: true, valid: !error, value, visited: true })));
+        };
+        return {
+            input: {
+                name,
+                value: state.value,
+                onChange,
+                onBlur,
+                onFocus,
+                onDrop,
+            },
+            arrayInput: {
+                name,
+                value: state.value,
+                onItemAdd,
+                onItemRemove,
+                onDrop,
+            },
+            meta: Object.assign(Object.assign({}, _.omit(state, 'value')), { submitFailed: tools.submitFailed }),
+        };
+    }, [
+        state,
+        setState,
+        validate,
+        name,
+        initialValue,
+        tools.submitFailed,
+        onChange,
+        onBlur,
+        onFocus,
+        onDrop,
+    ]);
+    React.useEffect(() => {
+        if (!firstRenderRef.current || !_.isEqual(initialValue, state.value)) {
+            (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, Object.assign(Object.assign({}, state.childErrors), { [name]: state.error }));
+        }
+    }, [state.value]);
+    React.useEffect(() => {
+        firstRenderRef.current = false;
+        return () => {
+            tools.onUnmount(name);
+        };
+    }, []);
+    return renderProps;
+};

package/build/esm/lib/core/components/Form/hooks/useMonaco.d.ts

@@ -0,0 +1 @@
+export declare const useMonaco: () => import("react").ComponentType<import("react-monaco-editor").MonacoEditorProps> | undefined;

package/build/esm/lib/core/components/Form/hooks/useMonaco.js

@@ -0,0 +1,2 @@
+import { useDynamicFormsCtx } from './useDynamicFormsCtx';
+export const useMonaco = () => useDynamicFormsCtx().Monaco;

package/build/esm/lib/core/components/Form/hooks/useRender.d.ts

@@ -0,0 +1,9 @@
+import { Spec } from '../../../types';
+import { FieldRenderProps, FieldValue, IndependentInputEntity, InputEntity, LayoutType } from '../types';
+export interface UseRenderParams<Value extends FieldValue, SpecType extends Spec> {
+    name: string;
+    spec: SpecType;
+    inputEntity?: InputEntity<Value, SpecType> | IndependentInputEntity<Value, SpecType>;
+    Layout?: LayoutType<Value, SpecType>;
+}
+export declare const useRender: <Value extends FieldValue, SpecType extends Spec>({ name, spec, inputEntity, Layout, }: UseRenderParams<Value, SpecType>) => (props: FieldRenderProps<Value>) => JSX.Element | null;

package/build/esm/lib/core/components/Form/hooks/useRender.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import _ from 'lodash';
+import { isCorrectSpec } from '../../../helpers';
+export const useRender = ({ name, spec, inputEntity, Layout, }) => {
+    const render = React.useCallback((props) => {
+        if (inputEntity && isCorrectSpec(spec) && _.isString(name)) {
+            if (inputEntity.independent) {
+                const InputComponent = inputEntity.Component;
+                return React.createElement(InputComponent, Object.assign({ spec: spec, name: name, Layout: Layout }, props));
+            }
+            const InputComponent = inputEntity.Component;
+            const input = React.createElement(InputComponent, Object.assign({ spec: spec, name: name }, props));
+            if (Layout) {
+                return (React.createElement(Layout, Object.assign({ spec: spec, name: name }, props), input));
+            }
+            return input;
+        }
+        return null;
+    }, [spec, name, inputEntity, Layout]);
+    return render;
+};

package/build/esm/lib/core/components/Form/hooks/useStore.d.ts

@@ -0,0 +1,16 @@
+import { FieldObjectValue, FieldValue, ValidateError } from '../types';
+export interface DynamicFieldStore {
+    name: string;
+    initialValue: FieldObjectValue;
+    values: FieldObjectValue;
+    errors: Record<string, ValidateError>;
+}
+export declare const useStore: (name: string) => {
+    tools: {
+        initialValue: FieldObjectValue;
+        onChange: (name: string, value: FieldValue, errors?: Record<string, ValidateError>) => void;
+        onUnmount: (name: string) => void;
+        submitFailed: boolean;
+    };
+    watcher: JSX.Element;
+};

package/build/esm/lib/core/components/Form/hooks/useStore.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import _ from 'lodash';
+import { Field as FinalFormField, useForm } from 'react-final-form';
+import { REMOVED_ITEM } from '../constants';
+import { transformArrIn, transformArrOut } from '../helpers';
+export const useStore = (name) => {
+    const form = useForm();
+    const firstRenderRef = React.useRef(true);
+    const [store, setStore] = React.useState(() => {
+        const initialValue = transformArrIn({
+            [name]: _.get(form.getState().values, name),
+        });
+        return {
+            name,
+            initialValue,
+            values: _.cloneDeep(initialValue),
+            errors: {},
+        };
+    });
+    const submitFailed = form.getState().submitFailed;
+    const watcher = React.useMemo(() => {
+        const props = {
+            name: store.name,
+            render: () => null,
+            subscription: {},
+            validate: () => {
+                const asyncErrors = [];
+                let error;
+                _.values(store.errors).forEach((err) => {
+                    if (err) {
+                        if (_.isFunction(err === null || err === void 0 ? void 0 : err.then)) {
+                            asyncErrors.push(err);
+                        }
+                        else {
+                            error = err;
+                        }
+                    }
+                });
+                if (asyncErrors.length) {
+                    return Promise.all(asyncErrors).then((r) => r[0]);
+                }
+                return error;
+            },
+        };
+        return React.createElement(FinalFormField, Object.assign({}, props));
+    }, [store.name, store.errors]);
+    const tools = React.useMemo(() => ({
+        initialValue: store.initialValue,
+        onChange: (name, value, errors) => setStore((store) => (Object.assign(Object.assign({}, store), { values: _.set(Object.assign({}, store.values), name, value), errors: Object.assign(Object.assign({}, store.errors), (errors || {})) }))),
+        onUnmount: (name) => setStore((store) => {
+            const value = _.get(store.values, name);
+            const values = value && value !== REMOVED_ITEM
+                ? Object.assign({}, _.set(store.values, name, undefined)) : store.values;
+            return Object.assign(Object.assign({}, store), { values, errors: Object.assign({}, _.omit(store.errors, Object.keys(store.errors).filter((key) => key.startsWith(name)))) });
+        }),
+        submitFailed,
+    }), [store.initialValue, setStore, submitFailed]);
+    const change = React.useCallback(_.debounce((value) => {
+        form.change(store.name, _.get(transformArrOut(value), store.name));
+    }, 100), [form.change, store.name]);
+    React.useEffect(() => {
+        change(store.values);
+    }, [store.values]);
+    React.useEffect(() => {
+        if (!firstRenderRef.current) {
+            const initialValue = transformArrIn({
+                [name]: _.get(form.getState().values, name),
+            });
+            setStore({
+                name: name,
+                initialValue,
+                values: _.cloneDeep(initialValue),
+                errors: {},
+            });
+        }
+    }, [name]);
+    React.useEffect(() => {
+        firstRenderRef.current = false;
+    }, []);
+    return { tools, watcher };
+};

package/build/esm/lib/core/components/Form/hooks/useValidate.d.ts

@@ -0,0 +1,3 @@
+import { FormValue, Spec } from '../../../types';
+import { FieldValue } from '../types';
+export declare const useValidate: <DirtyValue extends FieldValue, Value extends FormValue, SpecType extends Spec>(spec: SpecType) => ((value?: Value | undefined) => import("../types").ValidateError) | undefined;

package/build/esm/lib/core/components/Form/hooks/useValidate.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import _ from 'lodash';
+import { isCorrectSpec } from '../../../helpers';
+import { isCorrectConfig } from '../helpers';
+import { useDynamicFormsCtx } from './';
+export const useValidate = (spec) => {
+    const { config } = useDynamicFormsCtx();
+    const { validators } = React.useMemo(() => {
+        if (isCorrectConfig(config) && isCorrectSpec(spec)) {
+            return config[spec.type];
+        }
+        return {};
+    }, [config, spec]);
+    const validate = React.useMemo(() => {
+        if (validators) {
+            if ((!_.isString(spec.validator) || !spec.validator.length) &&
+                _.isFunction(validators.base)) {
+                return (value) => validators.base(spec, value);
+            }
+            if (_.isString(spec.validator) && _.isFunction(validators[spec.validator])) {
+                return (value) => validators[spec.validator](spec, value);
+            }
+        }
+        return;
+    }, [validators, spec]);
+    return validate;
+};

package/build/esm/lib/core/components/Form/index.d.ts

@@ -0,0 +1,5 @@
+export * from './constants';
+export * from './Controller';
+export * from './DynamicField';
+export * from './helpers';
+export * from './types';

package/build/esm/lib/core/components/Form/index.js

@@ -0,0 +1,5 @@
+export * from './constants';
+export * from './Controller';
+export * from './DynamicField';
+export * from './helpers';
+export * from './types';

package/build/esm/lib/core/components/Form/types/array.d.ts

@@ -0,0 +1,14 @@
+import { ArraySpec, ArrayValue } from '../../../types';
+import { FieldArrayValue, IndependentInputEntity, IndependentInputProps, IndependentInputType, InputEntity, InputProps, InputType, InputsMap, LayoutProps, LayoutType, LayoutsMap, TypeConfig, ValidatorsMap } from './';
+export type ArrayInputProps = InputProps<FieldArrayValue, ArraySpec>;
+export type ArrayIndependentInputProps = IndependentInputProps<FieldArrayValue, ArraySpec>;
+export type ArrayLayoutProps = LayoutProps<FieldArrayValue, ArraySpec>;
+export type ArrayInput = InputType<FieldArrayValue, ArraySpec>;
+export type ArrayIndependentInput = IndependentInputType<FieldArrayValue, ArraySpec>;
+export type ArrayLayout = LayoutType<FieldArrayValue, ArraySpec>;
+export type ArrayInputEntity = InputEntity<FieldArrayValue, ArraySpec>;
+export type ArrayIndependentInputEntity = IndependentInputEntity<FieldArrayValue, ArraySpec>;
+export type ArrayInputsMap = InputsMap<FieldArrayValue, ArraySpec>;
+export type ArrayLayoutsMap = LayoutsMap<FieldArrayValue, ArraySpec>;
+export type ArrayValidatorsMap = ValidatorsMap<ArrayValue, ArraySpec>;
+export type ArrayConfig = TypeConfig<FieldArrayValue, ArrayValue, ArraySpec>;

package/build/esm/lib/core/components/Form/types/array.js

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

package/build/esm/lib/core/components/Form/types/boolean.d.ts

@@ -0,0 +1,14 @@
+import { BooleanSpec } from '../../../types';
+import { IndependentInputEntity, IndependentInputProps, IndependentInputType, InputEntity, InputProps, InputType, InputsMap, LayoutProps, LayoutType, LayoutsMap, TypeConfig, ValidatorsMap } from './';
+export type BooleanInputProps = InputProps<boolean, BooleanSpec>;
+export type BooleanIndependentInputProps = IndependentInputProps<boolean, BooleanSpec>;
+export type BooleanLayoutProps = LayoutProps<boolean, BooleanSpec>;
+export type BooleanInput = InputType<boolean, BooleanSpec>;
+export type BooleanIndependentInput = IndependentInputType<boolean, BooleanSpec>;
+export type BooleanLayout = LayoutType<boolean, BooleanSpec>;
+export type BooleanInputEntity = InputEntity<boolean, BooleanSpec>;
+export type BooleanIndependentInputEntity = IndependentInputEntity<boolean, BooleanSpec>;
+export type BooleanInputsMap = InputsMap<boolean, BooleanSpec>;
+export type BooleanLayoutsMap = LayoutsMap<boolean, BooleanSpec>;
+export type BooleanValidatorsMap = ValidatorsMap<boolean, BooleanSpec>;
+export type BooleanConfig = TypeConfig<boolean, boolean, BooleanSpec>;

package/build/esm/lib/core/components/Form/types/boolean.js

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

package/build/esm/lib/core/components/Form/types/config.d.ts

@@ -0,0 +1,14 @@
+import { FormValue, Spec } from '../../../types';
+import { ArrayConfig, BooleanConfig, FieldValue, InputsMap, LayoutsMap, NumberConfig, ObjectConfig, StringConfig, ValidatorsMap } from './';
+export interface TypeConfig<DirtyValue extends FieldValue, Value extends FormValue, SpecType extends Spec> {
+    inputs: InputsMap<DirtyValue, SpecType>;
+    layouts: LayoutsMap<DirtyValue, SpecType>;
+    validators: ValidatorsMap<Value, SpecType>;
+}
+export interface DynamicFormConfig {
+    array: ArrayConfig;
+    boolean: BooleanConfig;
+    number: NumberConfig;
+    object: ObjectConfig;
+    string: StringConfig;
+}

package/build/esm/lib/core/components/Form/types/config.js

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

package/build/esm/lib/core/components/Form/types/context.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
+import { DynamicFormConfig, FieldObjectValue, FieldValue, ValidateError } from './';
+export interface DynamicFormsContext {
+    config: DynamicFormConfig;
+    Monaco?: React.ComponentType<MonacoEditorProps>;
+    tools: {
+        initialValue: FieldObjectValue;
+        onChange: (name: string, value: FieldValue, errors?: Record<string, ValidateError>) => void;
+        onUnmount: (name: string) => void;
+        submitFailed: boolean;
+    };
+}

package/build/esm/lib/core/components/Form/types/context.js

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

package/build/esm/lib/core/components/Form/types/field.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { FieldValue, ValidateError } from './';
+export interface FieldRenderProps<Value extends FieldValue> {
+    input: {
+        name: string;
+        value: Value;
+        onBlur: (event?: React.FocusEvent<HTMLElement>) => void;
+        onChange: (value: Value | ((currentValue: Value) => Value), childErrors?: Record<string, ValidateError>) => void;
+        onFocus: (event?: React.FocusEvent<HTMLElement>) => void;
+        onDrop: () => void;
+    };
+    arrayInput: {
+        name: string;
+        value: Value;
+        onItemAdd: (value?: FieldValue) => void;
+        onItemRemove: (name: string) => void;
+        onDrop: () => void;
+    };
+    meta: {
+        active: boolean;
+        dirty: boolean;
+        error: ValidateError;
+        invalid: boolean;
+        modified: boolean;
+        pristine: boolean;
+        touched: boolean;
+        valid: boolean;
+        visited: boolean;
+        submitFailed: boolean;
+    };
+}

package/build/esm/lib/core/components/Form/types/field.js

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

package/build/esm/lib/core/components/Form/types/index.d.ts

@@ -0,0 +1,12 @@
+export * from './array';
+export * from './boolean';
+export * from './config';
+export * from './context';
+export * from './field';
+export * from './input';
+export * from './layout';
+export * from './number';
+export * from './object';
+export * from './string';
+export * from './validators';
+export * from './value';

package/build/esm/lib/core/components/Form/types/index.js

@@ -0,0 +1,12 @@
+export * from './array';
+export * from './boolean';
+export * from './config';
+export * from './context';
+export * from './field';
+export * from './input';
+export * from './layout';
+export * from './number';
+export * from './object';
+export * from './string';
+export * from './validators';
+export * from './value';

package/build/esm/lib/core/components/Form/types/input.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Spec } from '../../../types';
+import { FieldRenderProps, FieldValue, LayoutType } from './';
+export type InputProps<Value extends FieldValue, SpecType extends Spec> = {
+    spec: SpecType;
+    name: string;
+} & FieldRenderProps<Value>;
+export type IndependentInputProps<Value extends FieldValue, SpecType extends Spec> = {
+    Layout: LayoutType<Value, SpecType> | undefined;
+} & InputProps<Value, SpecType>;
+export type InputType<Value extends FieldValue, SpecType extends Spec> = (props: InputProps<Value, SpecType>) => React.ReactElement | null;
+export type IndependentInputType<Value extends FieldValue, SpecType extends Spec> = (props: IndependentInputProps<Value, SpecType>) => React.ReactElement | null;
+export type InputEntity<Value extends FieldValue, SpecType extends Spec> = {
+    Component: InputType<Value, SpecType>;
+    independent?: false;
+};
+export type IndependentInputEntity<Value extends FieldValue, SpecType extends Spec> = {
+    Component: IndependentInputType<Value, SpecType>;
+    independent: true;
+};
+export type InputsMap<Value extends FieldValue, SpecType extends Spec> = Record<string, InputEntity<Value, SpecType> | IndependentInputEntity<Value, SpecType> | undefined>;

package/build/esm/lib/core/components/Form/types/input.js

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

package/build/esm/lib/core/components/Form/types/layout.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Spec } from '../../../types';
+import { FieldValue, InputProps } from './';
+export type LayoutProps<Value extends FieldValue, SpecType extends Spec> = {
+    children: React.ReactElement;
+} & InputProps<Value, SpecType>;
+export type LayoutType<Value extends FieldValue, SpecType extends Spec> = (props: LayoutProps<Value, SpecType>) => React.ReactElement | null;
+export type LayoutsMap<Value extends FieldValue, SpecType extends Spec> = Record<string, LayoutType<Value, SpecType> | undefined>;

package/build/esm/lib/core/components/Form/types/layout.js

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

package/build/esm/lib/core/components/Form/types/number.d.ts

@@ -0,0 +1,14 @@
+import { NumberSpec } from '../../../types';
+import { IndependentInputEntity, IndependentInputProps, IndependentInputType, InputEntity, InputProps, InputType, InputsMap, LayoutProps, LayoutType, LayoutsMap, TypeConfig, ValidatorsMap } from './';
+export type NumberInputProps = InputProps<number, NumberSpec>;
+export type NumberIndependentInputProps = IndependentInputProps<number, NumberSpec>;
+export type NumberLayoutProps = LayoutProps<number, NumberSpec>;
+export type NumberInput = InputType<number, NumberSpec>;
+export type NumberIndependentInput = IndependentInputType<number, NumberSpec>;
+export type NumberLayout = LayoutType<number, NumberSpec>;
+export type NumberInputEntity = InputEntity<number, NumberSpec>;
+export type NumberIndependentInputEntity = IndependentInputEntity<number, NumberSpec>;
+export type NumberInputsMap = InputsMap<number, NumberSpec>;
+export type NumberLayoutsMap = LayoutsMap<number, NumberSpec>;
+export type NumberValidatorsMap = ValidatorsMap<number, NumberSpec>;
+export type NumberConfig = TypeConfig<number, number, NumberSpec>;

package/build/esm/lib/core/components/Form/types/number.js

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

package/build/esm/lib/core/components/Form/types/object.d.ts

@@ -0,0 +1,14 @@
+import { ObjectSpec, ObjectValue } from '../../../types';
+import { FieldObjectValue, IndependentInputEntity, IndependentInputProps, IndependentInputType, InputEntity, InputProps, InputType, InputsMap, LayoutProps, LayoutType, LayoutsMap, TypeConfig, ValidatorsMap } from './';
+export type ObjectInputProps = InputProps<FieldObjectValue, ObjectSpec>;
+export type ObjectIndependentInputProps = IndependentInputProps<FieldObjectValue, ObjectSpec>;
+export type ObjectLayoutProps = LayoutProps<FieldObjectValue, ObjectSpec>;
+export type ObjectInput = InputType<FieldObjectValue, ObjectSpec>;
+export type ObjectIndependentInput = IndependentInputType<FieldObjectValue, ObjectSpec>;
+export type ObjectLayout = LayoutType<FieldObjectValue, ObjectSpec>;
+export type ObjectInputEntity = InputEntity<FieldObjectValue, ObjectSpec>;
+export type ObjectIndependentInputEntity = IndependentInputEntity<FieldObjectValue, ObjectSpec>;
+export type ObjectInputsMap = InputsMap<FieldObjectValue, ObjectSpec>;
+export type ObjectLayoutsMap = LayoutsMap<FieldObjectValue, ObjectSpec>;
+export type ObjectValidatorsMap = ValidatorsMap<ObjectValue, ObjectSpec>;
+export type ObjectConfig = TypeConfig<FieldObjectValue, ObjectValue, ObjectSpec>;

package/build/esm/lib/core/components/Form/types/object.js

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

package/build/esm/lib/core/components/Form/types/string.d.ts

@@ -0,0 +1,14 @@
+import { StringSpec } from '../../../types';
+import { IndependentInputEntity, IndependentInputProps, IndependentInputType, InputEntity, InputProps, InputType, InputsMap, LayoutProps, LayoutType, LayoutsMap, TypeConfig, ValidatorsMap } from './';
+export type StringInputProps = InputProps<string, StringSpec>;
+export type StringIndependentInputProps = IndependentInputProps<string, StringSpec>;
+export type StringLayoutProps = LayoutProps<string, StringSpec>;
+export type StringInput = InputType<string, StringSpec>;
+export type StringIndependentInput = IndependentInputType<string, StringSpec>;
+export type StringLayout = LayoutType<string, StringSpec>;
+export type StringInputEntity = InputEntity<string, StringSpec>;
+export type StringIndependentInputEntity = IndependentInputEntity<string, StringSpec>;
+export type StringInputsMap = InputsMap<string, StringSpec>;
+export type StringLayoutsMap = LayoutsMap<string, StringSpec>;
+export type StringValidatorsMap = ValidatorsMap<string, StringSpec>;
+export type StringConfig = TypeConfig<string, string, StringSpec>;

package/build/esm/lib/core/components/Form/types/string.js

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

package/build/esm/lib/core/components/Form/types/validators.d.ts

@@ -0,0 +1,8 @@
+import { FormValue, Spec } from '../../../types';
+export type BaseValidateError = string | boolean | undefined;
+export type AsyncValidateError = Promise<BaseValidateError>;
+export type ValidateError = BaseValidateError | AsyncValidateError;
+export type ValidatorType<Value extends FormValue, SpecType extends Spec> = (spec: SpecType, value?: Value) => ValidateError;
+export type ValidatorsMap<Value extends FormValue, SpecType extends Spec> = {
+    base: ValidatorType<Value, SpecType>;
+} & Record<string, ValidatorType<Value, SpecType> | undefined>;

package/build/esm/lib/core/components/Form/types/validators.js

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

package/build/esm/lib/core/components/Form/types/value.d.ts

@@ -0,0 +1,8 @@
+import { OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG } from '../constants';
+export interface FieldArrayValue extends Record<string, FieldValue> {
+    [OBJECT_ARRAY_FLAG]: true;
+    [OBJECT_ARRAY_CNT]: number;
+}
+export interface FieldObjectValue extends Record<string, FieldValue> {
+}
+export type FieldValue = number | boolean | string | FieldArrayValue | FieldObjectValue | null | undefined;

package/build/esm/lib/core/components/Form/types/value.js

@@ -0,0 +1 @@
+import { OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG } from '../constants';

package/build/esm/lib/core/components/View/DynamicView.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
+import { AnyObject, FormValue, Spec } from '../../types';
+import { DynamicViewConfig } from './types';
+export interface DynamicViewProps {
+    value: AnyObject;
+    spec: Spec;
+    config: DynamicViewConfig;
+    Link?: React.ComponentType<{
+        value: FormValue;
+        link: Spec['viewSpec']['link'];
+    }>;
+    Monaco?: React.ComponentType<MonacoEditorProps>;
+}
+export declare const DynamicView: ({ value, spec, config, Link, Monaco }: DynamicViewProps) => JSX.Element | null;

package/build/esm/lib/core/components/View/DynamicView.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import _ from 'lodash';
+import { isValidElementType } from 'react-is';
+import { isCorrectSpec } from '../../helpers';
+import { ViewController } from './ViewController';
+import { isCorrectViewConfig } from './helpers';
+import { useCreateContext } from './hooks';
+export const DynamicView = ({ value, spec, config, Link, Monaco }) => {
+    const DynamicFormsCtx = useCreateContext();
+    const context = React.useMemo(() => ({ config, value, Link, Monaco: isValidElementType(Monaco) ? Monaco : undefined }), [config, value, Link, Monaco]);
+    if (_.isObjectLike(value) && isCorrectSpec(spec) && isCorrectViewConfig(config)) {
+        return (React.createElement(DynamicFormsCtx.Provider, { value: context },
+            React.createElement(ViewController, { spec: spec, name: "" })));
+    }
+    return null;
+};

package/build/esm/lib/core/components/View/ViewController.d.ts

@@ -0,0 +1,6 @@
+import { Spec } from '../../types';
+export interface ViewControllerProps<SpecType extends Spec> {
+    spec: SpecType;
+    name: string;
+}
+export declare const ViewController: <SpecType extends Spec>({ spec, name, }: ViewControllerProps<SpecType>) => JSX.Element;

package/build/esm/lib/core/components/View/ViewController.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { useComponents, useDynamicFormsCtx, useRender } from './hooks';
+export const ViewController = ({ spec, name, }) => {
+    const { value, Link } = useDynamicFormsCtx();
+    const { viewEntity, Layout } = useComponents(spec);
+    const render = useRender({ name, value, spec, viewEntity, Layout, Link });
+    return React.createElement(React.Fragment, null, render);
+};

package/build/esm/lib/core/components/View/helpers.d.ts

@@ -0,0 +1 @@
+export declare const isCorrectViewConfig: (candidate: any) => boolean;

package/build/esm/lib/core/components/View/helpers.js

@@ -0,0 +1,6 @@
+import _ from 'lodash';
+import { SpecTypes } from '../../constants';
+export const isCorrectViewConfig = (candidate) => Object.values(SpecTypes).every((type) => _.isObjectLike(candidate) &&
+    _.isObjectLike(candidate[type]) &&
+    _.isObjectLike(candidate[type].views) &&
+    _.isObjectLike(candidate[type].layouts));