@leav/ui 0.0.1-alpha-1 → 0.0.1-alpha-2

package/src/components/RecordEdition/EditRecord/uiElements/TreeField/TreeField.tsx

@@ -0,0 +1,349 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import {ICommonFieldsSettings} from '@leav/utils';
+import {List, Popover, theme} from 'antd';
+import {GlobalToken} from 'antd/lib/theme/interface';
+import Paragraph from 'antd/lib/typography/Paragraph';
+import {Reducer, useContext, useEffect, useReducer} from 'react';
+import styled from 'styled-components';
+import {themeVars} from '_ui/antdTheme';
+import Dimmer from '_ui/components/Dimmer';
+import ErrorMessage from '_ui/components/ErrorMessage';
+import CreationErrorContext from '_ui/components/RecordEdition/EditRecordModal/creationErrorContext';
+import {EditRecordReducerActionsTypes} from '_ui/components/RecordEdition/editRecordModalReducer/editRecordModalReducer';
+import {useEditRecordModalReducer} from '_ui/components/RecordEdition/editRecordModalReducer/useEditRecordModalReducer';
+import {RecordFormElementsValueTreeValue} from '_ui/hooks/useGetRecordForm/useGetRecordForm';
+import {useRefreshFieldValues} from '_ui/hooks/useRefreshFieldValues';
+import {ITreeNodeWithRecord} from '_ui/types/trees';
+import {RecordFormAttributeTreeAttributeFragment} from '_ui/_gqlTypes';
+import {IRecordPropertyTree} from '_ui/_queries/records/getRecordPropertiesQuery';
+import {arrayValueVersionToObject} from '_ui/_utils';
+import getActiveFieldValues from '../../helpers/getActiveFieldValues';
+import {useRecordEditionContext} from '../../hooks/useRecordEditionContext';
+import linkFieldReducer, {
+    computeInitialState,
+    ILinkFieldState,
+    LinkFieldReducerActions,
+    LinkFieldReducerActionsType
+} from '../../reducers/linkFieldReducer/linkFieldReducer';
+import AddValueBtn from '../../shared/AddValueBtn';
+import DeleteAllValuesBtn from '../../shared/DeleteAllValuesBtn';
+import FieldFooter from '../../shared/FieldFooter';
+import InheritedFieldLabel from '../../shared/InheritedFieldLabel';
+import NoValue from '../../shared/NoValue';
+import UpdatedFieldIcon from '../../shared/UpdatedFieldIcon';
+import ValueDetailsBtn from '../../shared/ValueDetailsBtn';
+import ValuesVersionBtn from '../../shared/ValuesVersionBtn';
+import ValuesVersionIndicator from '../../shared/ValuesVersionIndicator';
+import {APICallStatus, FieldScope, IFormElementProps} from '../../_types';
+import TreeFieldValue from './TreeFieldValue';
+import ValuesAdd from './ValuesAdd';
+
+const Wrapper = styled.div<{$isValuesAddVisible: boolean; $themeToken: GlobalToken}>`
+    position: relative;
+    border: 1px solid ${themeVars.borderColor};
+    margin-bottom: 1.5em;
+    border-radius: ${p => p.$themeToken.borderRadius}px;
+    background: ${themeVars.defaultBg};
+    z-index: ${p => (p.$isValuesAddVisible ? 1 : 'auto')};
+
+    .ant-list-items {
+        max-height: 320px;
+        overflow-y: auto;
+    }
+
+    .ant-list-footer {
+        padding: 0;
+        border-radius: ${p => p.$themeToken.borderRadius}px;
+    }
+`;
+
+const FieldLabel = styled(Paragraph)`
+    && {
+        top: calc(50% - 0.9em);
+        font-size: 0.9em;
+        padding: 0 0.5em;
+        color: ${themeVars.secondaryTextColor};
+        z-index: 1;
+        margin-bottom: 0;
+    }
+`;
+
+type TreeFieldReducerState = ILinkFieldState<RecordFormElementsValueTreeValue>;
+type TreeFieldReducerAction = LinkFieldReducerActions<RecordFormElementsValueTreeValue>;
+
+function TreeField({
+    element,
+    onValueSubmit,
+    onValueDelete,
+    onDeleteMultipleValues
+}: IFormElementProps<ICommonFieldsSettings>): JSX.Element {
+    const {token} = theme.useToken();
+    const {state: editRecordModalState, dispatch: editRecordModalDispatch} = useEditRecordModalReducer();
+    const {readOnly: isRecordReadOnly, record} = useRecordEditionContext();
+
+    const creationErrors = useContext(CreationErrorContext);
+    const isInCreationMode = record === null;
+
+    const [state, dispatch] = useReducer<Reducer<TreeFieldReducerState, TreeFieldReducerAction>>(
+        linkFieldReducer,
+        computeInitialState({
+            element,
+            formVersion: editRecordModalState.valuesVersion,
+            isRecordReadOnly,
+            record
+        })
+    );
+
+    const {fetchValues} = useRefreshFieldValues(record?.library?.id, state.attribute.id, record?.id);
+
+    const attribute = state.attribute as RecordFormAttributeTreeAttributeFragment;
+    const isReadOnly = attribute?.readonly || isRecordReadOnly || !attribute.permissions.edit_value;
+    const activeValues = getActiveFieldValues(state);
+    const activeVersion = state.values[state.activeScope]?.version;
+
+    const data = activeValues.map(val => ({
+        ...val,
+        key: val.id_value
+    }));
+
+    // Cancel value editing if value details panel is closed
+    useEffect(() => {
+        if (editRecordModalState.activeValue === null && state.isValuesAddVisible) {
+            _handleCloseValuesAdd();
+        }
+    }, [editRecordModalState.activeValue]);
+
+    useEffect(() => {
+        if (creationErrors[attribute.id]) {
+            dispatch({
+                type: LinkFieldReducerActionsType.SET_ERROR_MESSAGE,
+                errorMessage: creationErrors[attribute.id].map(err => err.message).join(' ')
+            });
+        }
+    }, [creationErrors, attribute.id]);
+
+    const renderItem = (value: IRecordPropertyTree) => {
+        const _handleDelete = async () => {
+            const deleteRes = await onValueDelete({id_value: value.id_value}, attribute.id);
+
+            if (deleteRes.status === APICallStatus.SUCCESS) {
+                dispatch({
+                    type: LinkFieldReducerActionsType.DELETE_VALUE,
+                    idValue: value.id_value
+                });
+
+                if (!isInCreationMode) {
+                    const freshValues = await fetchValues(state.values[state.activeScope].version);
+
+                    dispatch({
+                        type: LinkFieldReducerActionsType.REFRESH_VALUES,
+                        formVersion: editRecordModalState.valuesVersion,
+                        values: freshValues as RecordFormElementsValueTreeValue[]
+                    });
+                }
+
+                return;
+            }
+        };
+
+        return (
+            <>
+                {attribute.versions_conf?.versionable && <ValuesVersionIndicator activeScope={state.activeScope} />}
+                <TreeFieldValue value={value} attribute={attribute} onDelete={_handleDelete} isReadOnly={isReadOnly} />
+            </>
+        );
+    };
+
+    const canAddValue = !isReadOnly && (attribute.multiple_values || !activeValues.length);
+
+    const _handleAddValue = () => {
+        editRecordModalDispatch({
+            type: EditRecordReducerActionsTypes.SET_ACTIVE_VALUE,
+            value: {
+                attribute,
+                value: null
+            }
+        });
+
+        dispatch({
+            type: LinkFieldReducerActionsType.SET_IS_VALUES_ADD_VISIBLE,
+            isValuesAddVisible: true
+        });
+    };
+
+    const _handleSubmitSelectTreeNodeModal = async (treeNodes: ITreeNodeWithRecord[]) => {
+        const valuesToSave = treeNodes.map(node => ({
+            attribute,
+            idValue: null,
+            value: node
+        }));
+
+        const res = await onValueSubmit(valuesToSave, activeVersion);
+
+        if (res.status === APICallStatus.ERROR) {
+            dispatch({
+                type: LinkFieldReducerActionsType.SET_ERROR_MESSAGE,
+                errorMessage: res.error
+            });
+        } else if (res.values) {
+            const formattedValues: RecordFormElementsValueTreeValue[] = res.values.map(v => ({
+                ...v,
+                version: arrayValueVersionToObject(v.version),
+                metadata: v.metadata?.map(metadata => ({
+                    ...metadata,
+                    value: {
+                        ...metadata.value,
+                        version: arrayValueVersionToObject(metadata.value.version ?? [])
+                    }
+                }))
+            }));
+
+            dispatch({
+                type: LinkFieldReducerActionsType.ADD_VALUES,
+                values: formattedValues
+            });
+        }
+
+        if (res?.errors?.length) {
+            const selectedNodesById = treeNodes.reduce((acc, cur) => ({...acc, [cur.id]: cur}), {});
+
+            const errorsMessage = res.errors.map(err => {
+                const linkedRecordLabel = selectedNodesById[err.input].title || selectedNodesById[err.input].id;
+
+                return `${linkedRecordLabel}: ${err.message}`;
+            });
+            dispatch({
+                type: LinkFieldReducerActionsType.SET_ERROR_MESSAGE,
+                errorMessage: errorsMessage
+            });
+        } else {
+            dispatch({
+                type: LinkFieldReducerActionsType.SET_IS_VALUES_ADD_VISIBLE,
+                isValuesAddVisible: false
+            });
+        }
+    };
+
+    const _handleDeleteAllValues = async () => {
+        const deleteRes = await onDeleteMultipleValues(attribute.id, activeValues, activeVersion);
+
+        if (deleteRes.status === APICallStatus.SUCCESS) {
+            dispatch({
+                type: LinkFieldReducerActionsType.DELETE_ALL_VALUES
+            });
+
+            if (!isInCreationMode) {
+                const freshValues = await fetchValues(state.values[state.activeScope].version);
+
+                dispatch({
+                    type: LinkFieldReducerActionsType.REFRESH_VALUES,
+                    formVersion: editRecordModalState.valuesVersion,
+                    values: freshValues as RecordFormElementsValueTreeValue[]
+                });
+            }
+        }
+
+        if (deleteRes?.errors?.length) {
+            dispatch({
+                type: LinkFieldReducerActionsType.SET_ERROR_MESSAGE,
+                errorMessage: deleteRes.errors.map(err => err.message)
+            });
+        }
+    };
+
+    const _handleScopeChange = (scope: FieldScope) => {
+        dispatch({
+            type: LinkFieldReducerActionsType.CHANGE_ACTIVE_SCOPE,
+            scope
+        });
+    };
+
+    const versions = {
+        [FieldScope.CURRENT]: state.values[FieldScope.CURRENT]?.version ?? null,
+        [FieldScope.INHERITED]: state.values[FieldScope.INHERITED]?.version ?? null
+    };
+    const ListFooter = (
+        <FieldFooter>
+            <div>
+                {attribute?.versions_conf?.versionable && (
+                    <ValuesVersionBtn
+                        versions={versions}
+                        activeScope={state.activeScope}
+                        onScopeChange={_handleScopeChange}
+                        basic
+                    />
+                )}
+                {!isReadOnly && !!activeValues.length && <DeleteAllValuesBtn onDelete={_handleDeleteAllValues} />}
+                <ValueDetailsBtn attribute={attribute} value={null} size="small" basic />
+            </div>
+            {!!activeValues.length && canAddValue && (
+                <AddValueBtn
+                    activeScope={state.activeScope}
+                    onClick={_handleAddValue}
+                    disabled={state.isValuesAddVisible}
+                    linkField
+                />
+            )}
+        </FieldFooter>
+    );
+
+    const _handleCloseValuesAdd = () => {
+        dispatch({
+            type: LinkFieldReducerActionsType.SET_IS_VALUES_ADD_VISIBLE,
+            isValuesAddVisible: false
+        });
+
+        editRecordModalDispatch({
+            type: EditRecordReducerActionsTypes.SET_ACTIVE_VALUE,
+            value: null
+        });
+    };
+
+    const _handleCloseError = () => {
+        dispatch({
+            type: LinkFieldReducerActionsType.CLEAR_ERROR_MESSAGE
+        });
+    };
+
+    return (
+        <>
+            {state.isValuesAddVisible && <Dimmer onClick={_handleCloseValuesAdd} />}
+            <Wrapper $isValuesAddVisible={state.isValuesAddVisible} $themeToken={token}>
+                <FieldLabel ellipsis={{rows: 1, tooltip: true}}>
+                    {element.settings.label}
+                    {editRecordModalState.externalUpdate.updatedValues[attribute?.id] && <UpdatedFieldIcon />}
+                    {state.activeScope === FieldScope.INHERITED && (
+                        <InheritedFieldLabel version={state.values[FieldScope.INHERITED].version} />
+                    )}
+                </FieldLabel>
+                <List
+                    dataSource={data}
+                    renderItem={renderItem}
+                    split
+                    locale={{
+                        emptyText: <NoValue canAddValue={canAddValue} onAddValue={_handleAddValue} linkField />
+                    }}
+                    footer={ListFooter}
+                />
+                {state.isValuesAddVisible && (
+                    <ValuesAdd
+                        attribute={attribute}
+                        onAdd={_handleSubmitSelectTreeNodeModal}
+                        onClose={_handleCloseValuesAdd}
+                    />
+                )}
+            </Wrapper>
+            {state.errorMessage && (
+                <Popover
+                    placement="bottomLeft"
+                    open={!!state.errorMessage}
+                    content={<ErrorMessage error={state.errorMessage} onClose={_handleCloseError} />}
+                ></Popover>
+            )}
+        </>
+    );
+}
+
+export default TreeField;

package/src/components/RecordEdition/EditRecord/uiElements/TreeField/TreeFieldValue/TreeFieldValue.tsx

@@ -0,0 +1,68 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import styled from 'styled-components';
+import {themeVars} from '_ui/antdTheme';
+import {FloatingMenu, FloatingMenuAction, RecordCard} from '_ui/components';
+import DeleteValueBtn from '_ui/components/RecordEdition/EditRecord/shared/DeleteValueBtn';
+import ValueDetailsBtn from '_ui/components/RecordEdition/EditRecord/shared/ValueDetailsBtn';
+import EditRecordBtn from '_ui/components/RecordEdition/EditRecordBtn';
+import {PreviewSize} from '_ui/constants';
+import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
+import {RecordFormAttributeTreeAttributeFragment} from '_ui/_gqlTypes';
+import {IRecordPropertyTree} from '_ui/_queries/records/getRecordPropertiesQuery';
+
+interface ITreeFieldValueProps {
+    value: IRecordPropertyTree;
+    attribute: RecordFormAttributeTreeAttributeFragment;
+    onDelete: () => void;
+    isReadOnly: boolean;
+}
+
+const ListItem = styled.div`
+    padding: 0.5em 0;
+    position: relative;
+    &:not(:last-child) {
+        border-bottom: 1px solid ${themeVars.borderColor};
+    }
+
+    &:not(:hover) .floating-menu {
+        display: none;
+    }
+
+    & .floating-menu {
+        right: 30px;
+    }
+`;
+
+function TreeFieldValue({value, attribute, onDelete, isReadOnly}: ITreeFieldValueProps): JSX.Element {
+    const {t} = useSharedTranslation();
+    const _handleDelete = async () => onDelete();
+
+    const valueMenuActions: FloatingMenuAction[] = [
+        {
+            title: t('record_edition.edit_record'),
+            button: <EditRecordBtn record={value.treeValue.record.whoAmI} />
+        },
+        {
+            title: t('record_edition.value_details'),
+            button: <ValueDetailsBtn value={value} attribute={attribute} />
+        }
+    ];
+
+    if (!isReadOnly) {
+        valueMenuActions.push({
+            title: t('global.delete'),
+            button: <DeleteValueBtn onDelete={_handleDelete} />
+        });
+    }
+
+    return (
+        <ListItem>
+            <RecordCard record={value.treeValue.record.whoAmI} size={PreviewSize.small} />
+            <FloatingMenu actions={valueMenuActions} />
+        </ListItem>
+    );
+}
+
+export default TreeFieldValue;

package/src/components/RecordEdition/EditRecord/uiElements/TreeField/TreeFieldValue/index.ts

@@ -0,0 +1,5 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import TreeFieldValue from './TreeFieldValue';
+export default TreeFieldValue;

package/src/components/RecordEdition/EditRecord/uiElements/TreeField/ValuesAdd/ValuesAdd.tsx

@@ -0,0 +1,198 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import {localizedTranslation} from '@leav/utils';
+import {Breadcrumb, Button, Divider, Space} from 'antd';
+import {useEffect, useRef, useState} from 'react';
+import styled from 'styled-components';
+import {themeVars} from '_ui/antdTheme';
+import {RecordCard} from '_ui/components';
+import List from '_ui/components/List';
+import {SelectTreeNode} from '_ui/components/SelectTreeNode';
+import {PreviewSize} from '_ui/constants';
+import useLang from '_ui/hooks/useLang';
+import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
+import {ITreeNodeWithRecord} from '_ui/types/trees';
+import {RecordFormAttributeTreeAttributeFragment, ValueDetailsTreeValueFragment} from '_ui/_gqlTypes';
+import {getTreeRecordKey} from '_ui/_utils';
+
+interface IValuesAddProps {
+    attribute: RecordFormAttributeTreeAttributeFragment;
+    onAdd: (values: ITreeNodeWithRecord[]) => void;
+    onClose: () => void;
+}
+
+const Wrapper = styled.div`
+    background-color: ${themeVars.defaultBg};
+    z-index: 1;
+    position: relative;
+`;
+
+const SelectionWrapper = styled.div`
+    padding: 1em;
+    max-height: 350px;
+    overflow: auto;
+`;
+
+const FooterWrapper = styled.div`
+    padding: 0.5em 1em;
+    display: flex;
+    justify-content: flex-end;
+    background: ${themeVars.lightBg};
+`;
+
+const BreadcrumbWrapper = styled.div`
+    & .record-card .label {
+        font-weight: normal;
+    }
+`;
+
+const BreadcrumbRoot = styled(Breadcrumb)`
+    display: flex;
+    align-items: center;
+`;
+
+type ValueFromList = ValueDetailsTreeValueFragment['treeValue'];
+
+function ValuesAdd({attribute, onAdd, onClose}: IValuesAddProps): JSX.Element {
+    const {t} = useSharedTranslation();
+    const {lang} = useLang();
+    const valuesList = attribute?.treeValuesList?.enable ? attribute?.treeValuesList?.values ?? [] : [];
+    const wrapperRef = useRef<HTMLDivElement>();
+
+    const [selectedValuesFromTree, setSelectedValuesFromTree] = useState<ITreeNodeWithRecord[]>([]);
+    const [selectedValuesFromList, setSelectedValuesFromList] = useState<ValueFromList[]>([]);
+
+    useEffect(() => {
+        wrapperRef.current.scrollIntoView({block: 'nearest'});
+    }, []);
+
+    const _handleSelectionChange = (selection: ValueFromList[]) => setSelectedValuesFromList(selection);
+
+    const _handleSelect = (node: ITreeNodeWithRecord, selected: boolean) => {
+        if (selected) {
+            onAdd([node]);
+        }
+    };
+
+    const _handleCheck = (selectedNodes: ITreeNodeWithRecord[]) => setSelectedValuesFromTree(selectedNodes);
+
+    const _handleClose = () => onClose();
+
+    const _handleItemClick = (valueListItem: ValueFromList) => {
+        const recordKey = valueListItem.id;
+        onAdd([
+            {
+                record: valueListItem.record,
+                key: recordKey,
+                id: recordKey,
+                title: valueListItem.record.whoAmI.label,
+                children: null
+            }
+        ]);
+    };
+
+    const _handleSubmit = () => {
+        const selection: ITreeNodeWithRecord[] = [
+            ...selectedValuesFromList.map(selectedVal => {
+                const recordKey = getTreeRecordKey(selectedVal.record);
+                return {
+                    record: selectedVal.record,
+                    id: recordKey,
+                    key: recordKey,
+                    title: selectedVal.record.whoAmI.label,
+                    children: null
+                };
+            }),
+            ...selectedValuesFromTree
+        ];
+
+        onAdd(selection);
+    };
+
+    const _renderListItem = (item: ValueFromList) => {
+        const pathToDisplay = item.ancestors;
+
+        const parents = pathToDisplay.slice(0, -1);
+        const element = pathToDisplay.slice(-1)[0];
+        const recordCardSettings = {withLibrary: false, withPreview: false};
+
+        const breadcrumbItems = parents.map(ancestor => {
+            return {
+                key: ancestor.record.id,
+                title: <RecordCard record={ancestor.record.whoAmI} size={PreviewSize.small} {...recordCardSettings} />
+            };
+        });
+
+        breadcrumbItems.push({
+            key: element.record.id,
+            title: <RecordCard record={element.record.whoAmI} size={PreviewSize.small} {...recordCardSettings} />
+        });
+
+        return (
+            <BreadcrumbWrapper>
+                <BreadcrumbRoot items={breadcrumbItems} separator=">" />
+                {/* {parents.map(ancestor => {
+                        return (
+                            <BreadcrumbItem key={ancestor.record.id}>
+                                <RecordCard
+                                    record={ancestor.record.whoAmI}
+                                    size={PreviewSize.small}
+                                    {...recordCardSettings}
+                                />
+                                <Breadcrumb.Separator>{'>'}</Breadcrumb.Separator>
+                            </BreadcrumbItem>
+                        );
+                    })}
+                    <BreadcrumbItem key={element.record.id}>
+                        <RecordCard record={element.record.whoAmI} size={PreviewSize.small} {...recordCardSettings} />
+                    </BreadcrumbItem>
+                </BreadcrumbRoot> */}
+            </BreadcrumbWrapper>
+        );
+    };
+
+    return (
+        <>
+            <Wrapper data-testid="values-add" ref={wrapperRef}>
+                <SelectionWrapper>
+                    {!!valuesList.length && (
+                        <>
+                            <Divider orientation="left">{t('record_edition.values_list')}</Divider>
+                            <List
+                                dataSource={valuesList}
+                                onItemClick={_handleItemClick}
+                                renderItemContent={_renderListItem}
+                                selectable={attribute.multiple_values}
+                                selectedItems={selectedValuesFromList}
+                                onSelectionChange={_handleSelectionChange}
+                                pagination={false}
+                            />
+                        </>
+                    )}
+                    <Divider orientation="left">{localizedTranslation(attribute.linked_tree.label, lang)}</Divider>
+                    <SelectTreeNode
+                        tree={attribute.linked_tree}
+                        onSelect={_handleSelect}
+                        onCheck={_handleCheck}
+                        multiple={attribute.multiple_values}
+                    />
+                </SelectionWrapper>
+                {attribute.multiple_values && (
+                    <FooterWrapper>
+                        <Space>
+                            <Button size="small" onClick={_handleClose}>
+                                {t('global.cancel')}
+                            </Button>
+                            <Button type="primary" size="small" onClick={_handleSubmit}>
+                                {t('global.submit')}
+                            </Button>
+                        </Space>
+                    </FooterWrapper>
+                )}
+            </Wrapper>
+        </>
+    );
+}
+
+export default ValuesAdd;

package/src/components/RecordEdition/EditRecord/uiElements/TreeField/ValuesAdd/index.ts

@@ -0,0 +1,5 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import ValuesAdd from './ValuesAdd';
+export default ValuesAdd;

package/src/components/RecordEdition/EditRecord/uiElements/TreeField/index.ts

@@ -0,0 +1,5 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import TreeField from './TreeField';
+export default TreeField;

package/src/components/RecordEdition/EditRecord/uiElements/index.tsx

@@ -0,0 +1,27 @@
+// Copyright LEAV Solutions 2017
+// This file is released under LGPL V3
+// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
+import {FormFieldTypes, FormUIElementTypes} from '@leav/utils';
+import {IFormElementProps} from '../_types';
+import Container from './Container';
+import FormDivider from './FormDivider';
+import FormTabs from './FormTabs';
+import LinkField from './LinkField';
+import StandardField from './StandardField';
+import TextBlock from './TextBlock';
+import TreeField from './TreeField';
+
+export const formComponents: {
+    [type in FormUIElementTypes & FormFieldTypes]: (props: IFormElementProps<any>) => JSX.Element;
+} = {
+    [FormUIElementTypes.FIELDS_CONTAINER]: Container,
+    [FormFieldTypes.TEXT_INPUT]: StandardField,
+    [FormFieldTypes.DATE]: StandardField,
+    [FormFieldTypes.CHECKBOX]: StandardField,
+    [FormFieldTypes.ENCRYPTED]: StandardField,
+    [FormFieldTypes.LINK]: LinkField,
+    [FormFieldTypes.TREE]: TreeField,
+    [FormUIElementTypes.TABS]: FormTabs,
+    [FormUIElementTypes.TEXT_BLOCK]: TextBlock,
+    [FormUIElementTypes.DIVIDER]: FormDivider
+};