feat(unstable): add user ctx, add monaco

src/lib/unstable/core/index.ts

@@ -9,4 +9,5 @@ export {
     type UseSchemaRendererReturn,
     useSchemaRenderer,
     useSchemaRendererMutators,
+    useUserContext,
 } from './useSchemaRenderer';

src/lib/unstable/core/useSchemaRenderer/constants.ts

@@ -1 +1,2 @@
 export const ENTITY_SERVICE_FIELD = 'ENTITY_SERVICE_FIELD';
+export const USER_CONTEXT_SERVICE_FIELD = 'USER_CONTEXT_SERVICE_FIELD';

src/lib/unstable/core/useSchemaRenderer/hooks/index.ts

@@ -1,2 +1,3 @@
 export {useEntitiesState} from './useEntitiesState';
 export {useSchemaRendererMutators} from './useSchemaRendererMutators';
+export {useUserContext} from './useUserContext';

src/lib/unstable/core/useSchemaRenderer/hooks/useSchemaRendererMutators.ts

@@ -1,45 +1,55 @@
 import {useForm} from 'react-final-form';
 
 import type {
+    RemoveAndSetExternalErrorsMutator,
     RemoveAndSetSchemaMutatorsMutator,
     RemoveExternalErrorsMutator,
     RemoveSchemaMutatorsMutator,
     SetAsyncValidationCacheMutator,
     SetAsyncValidationWaitersMutator,
     SetExternalErrorsMutator,
     SetSchemaMutatorsMutator,
+    SetUserContextMutator,
     TriggerFieldsMutator,
 } from '../mutators';
 
-export const useSchemaRendererMutators = () => {
+export const useSchemaRendererMutators = <
+    Context extends Record<string, unknown> = Record<string, unknown>,
+>() => {
     const {
+        removeAndSetExternalErrors,
         removeAndSetSchemaMutators,
         removeExternalErrors,
         removeSchemaMutators,
         setAsyncValidationCache,
         setAsyncValidationWaiters,
         setExternalErrors,
         setSchemaMutators,
+        setUserContext,
         triggerFields,
     } = useForm().mutators as {
+        removeAndSetExternalErrors: RemoveAndSetExternalErrorsMutator | undefined;
         removeAndSetSchemaMutators: RemoveAndSetSchemaMutatorsMutator | undefined;
         removeExternalErrors: RemoveExternalErrorsMutator | undefined;
         removeSchemaMutators: RemoveSchemaMutatorsMutator | undefined;
         setAsyncValidationCache: SetAsyncValidationCacheMutator | undefined;
         setAsyncValidationWaiters: SetAsyncValidationWaitersMutator | undefined;
         setExternalErrors: SetExternalErrorsMutator | undefined;
         setSchemaMutators: SetSchemaMutatorsMutator | undefined;
+        setUserContext: SetUserContextMutator<Context> | undefined;
         triggerFields: TriggerFieldsMutator | undefined;
     };
 
     return {
+        removeAndSetExternalErrors,
         removeAndSetSchemaMutators,
         removeExternalErrors,
         removeSchemaMutators,
         setAsyncValidationCache,
         setAsyncValidationWaiters,
         setExternalErrors,
         setSchemaMutators,
+        setUserContext,
         triggerFields,
     };
 };

src/lib/unstable/core/useSchemaRenderer/hooks/useUserContext.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import {useField, useForm} from 'react-final-form';
+
+import {USER_CONTEXT_SERVICE_FIELD} from '../constants';
+import type {UserContextState} from '../mutators';
+import {guessHeadName} from '../utils';
+
+export const useUserContext = <Context extends Record<string, unknown> = Record<string, unknown>>(
+    name: string,
+): UserContextState<Partial<Context>> => {
+    const form = useForm();
+
+    const headName = React.useMemo(
+        () => guessHeadName(form.getRegisteredFields(), name),
+        [form, name],
+    );
+
+    const field = useField(`${USER_CONTEXT_SERVICE_FIELD}.${headName}`, {
+        subscription: {data: true},
+    });
+
+    const userContext = (field.meta.data || {}) as UserContextState<Partial<Context>>;
+
+    return userContext;
+};

src/lib/unstable/core/useSchemaRenderer/index.ts

@@ -1,4 +1,4 @@
-export {useEntitiesState, useSchemaRendererMutators} from './hooks';
+export {useEntitiesState, useSchemaRendererMutators, useUserContext} from './hooks';
 export {schemaRendererMutators} from './mutators';
 export {
     type UseSchemaRendererParams,

src/lib/unstable/core/useSchemaRenderer/mutators/external-errors/external-errors.ts

@@ -3,7 +3,11 @@ import omit from 'lodash/omit';
 import {ENTITY_SERVICE_FIELD} from '../../constants';
 import {guessHeadName} from '../../utils';
 
-import type {RemoveExternalErrorsFunction, SetExternalErrorsFunction} from './types';
+import type {
+    RemoveAndSetExternalErrorsFunction,
+    RemoveExternalErrorsFunction,
+    SetExternalErrorsFunction,
+} from './types';
 
 export const setExternalErrors: SetExternalErrorsFunction = (
     [{priorityErrors, regularErrors}],
@@ -92,3 +96,12 @@ export const removeExternalErrors: RemoveExternalErrorsFunction = (
         });
     }
 };
+
+export const removeAndSetExternalErrors: RemoveAndSetExternalErrorsFunction = (
+    [{priorityErrors, removeFunctionOrNames, regularErrors}],
+    mutableState,
+    tools,
+) => {
+    removeExternalErrors([{removeFunctionOrNames}], mutableState, tools);
+    setExternalErrors([{priorityErrors, regularErrors}], mutableState, tools);
+};

src/lib/unstable/core/useSchemaRenderer/mutators/external-errors/types.ts

@@ -47,3 +47,18 @@ export type RemoveExternalErrorsFunction<
 ) => void;
 
 export type RemoveExternalErrorsMutator = (params: RemoveExternalErrorsParams) => void;
+
+export interface RemoveAndSetExternalErrorsParams
+    extends RemoveExternalErrorsParams,
+        SetExternalErrorsParams {}
+
+export type RemoveAndSetExternalErrorsFunction<
+    FormValues = object,
+    InitialFormValues = Partial<FormValues>,
+> = (
+    args: [RemoveAndSetExternalErrorsParams],
+    state: MutableState<FormValues, InitialFormValues>,
+    tools: Tools<FormValues, InitialFormValues>,
+) => void;
+
+export type RemoveAndSetExternalErrorsMutator = (params: RemoveAndSetExternalErrorsParams) => void;

src/lib/unstable/core/useSchemaRenderer/mutators/index.ts

@@ -1,24 +1,32 @@
 import {setAsyncValidationCache, setAsyncValidationWaiters} from './async-validation';
-import {removeExternalErrors, setExternalErrors} from './external-errors';
+import {
+    removeAndSetExternalErrors,
+    removeExternalErrors,
+    setExternalErrors,
+} from './external-errors';
 import {
     removeAndSetSchemaMutators,
     removeSchemaMutators,
     setSchemaMutators,
 } from './schema-mutators';
 import {triggerFields} from './trigger-fields';
+import {setUserContext} from './user-context';
 
 export type * from './async-validation';
 export type * from './external-errors';
 export type * from './schema-mutators';
 export type * from './trigger-fields';
+export type * from './user-context';
 
 export const schemaRendererMutators = {
+    removeAndSetExternalErrors,
     removeAndSetSchemaMutators,
     removeExternalErrors,
     removeSchemaMutators,
     setAsyncValidationCache,
     setAsyncValidationWaiters,
     setExternalErrors,
     setSchemaMutators,
+    setUserContext,
     triggerFields,
 };

src/lib/unstable/core/useSchemaRenderer/mutators/schema-mutators/schema-mutators.ts

@@ -2,6 +2,7 @@ import type {MutableState} from 'final-form';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
+import set from 'lodash/set';
 
 import type {EntityState} from '../../../Entity';
 import {getSchemaPath, getValuePaths, parseSchemaPath, smartSet} from '../../../utils';
@@ -18,9 +19,11 @@ import type {
 const applyMutators = ({
     mutableState,
     mutators,
+    replace = false,
 }: {
     mutableState: MutableState<object, object>;
     mutators: SetSchemaMutatorsParams['mutators'];
+    replace?: boolean;
 }) => {
     const registeredFields = Object.keys(mutableState.fields);
 
@@ -36,7 +39,11 @@ const applyMutators = ({
                 const schemaPath = getSchemaPath(m.name, headName, mutatedSchema);
 
                 if (schemaPath) {
-                    smartSet(mutatedSchema, schemaPath, m.schema);
+                    if (replace) {
+                        set(mutatedSchema, schemaPath, m.schema);
+                    } else {
+                        smartSet(mutatedSchema, schemaPath, m.schema);
+                    }
 
                     const schemaField = mutableState.fields[m.name];
 
@@ -114,6 +121,7 @@ export const removeSchemaMutators: RemoveSchemaMutatorsFunction = (
                                     : {},
                             };
                         }),
+                        replace: true,
                     });
 
                     headField.data.mutators = [];

src/lib/unstable/core/useSchemaRenderer/mutators/user-context/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './user-context';

src/lib/unstable/core/useSchemaRenderer/mutators/user-context/types.ts

@@ -0,0 +1,26 @@
+import type {MutableState, Tools} from 'final-form';
+import type {MonacoEditorProps} from 'react-monaco-editor/lib/types';
+
+export type UserContextState<Context extends Record<string, unknown> = Record<string, unknown>> =
+    Context & {headName: string; MonacoEditor?: React.ComponentType<MonacoEditorProps>};
+
+export interface SetUserContextParams<
+    Context extends Record<string, unknown> = Record<string, unknown>,
+> {
+    name: string;
+    userContext:
+        | Partial<Omit<UserContextState<Context>, 'headName'>>
+        | ((
+              userContext: Omit<UserContextState<Context>, 'headName'>,
+          ) => Partial<Omit<UserContextState<Context>, 'headName'>>);
+}
+
+export type SetUserContextFunction<FormValues = object, InitialFormValues = Partial<FormValues>> = (
+    args: [SetUserContextParams],
+    state: MutableState<FormValues, InitialFormValues>,
+    tools: Tools<FormValues, InitialFormValues>,
+) => void;
+
+export type SetUserContextMutator<
+    Context extends Record<string, unknown> = Record<string, unknown>,
+> = (params: SetUserContextParams<Context>) => void;

src/lib/unstable/core/useSchemaRenderer/mutators/user-context/user-context.ts

@@ -0,0 +1,26 @@
+import omit from 'lodash/omit';
+
+import {USER_CONTEXT_SERVICE_FIELD} from '../../constants';
+import {guessHeadName} from '../../utils';
+
+import type {SetUserContextFunction, UserContextState} from './types';
+
+export const setUserContext: SetUserContextFunction = ([{name, userContext}], mutableState) => {
+    const registeredFields = Object.keys(mutableState.fields);
+    const headName = guessHeadName(registeredFields, name);
+
+    if (headName) {
+        const field = mutableState.fields[`${USER_CONTEXT_SERVICE_FIELD}.${headName}`];
+
+        if (field) {
+            const currentUserContext = field.data as UserContextState;
+
+            field.data = {
+                ...(typeof userContext === 'function'
+                    ? userContext(omit(currentUserContext, 'headName'))
+                    : {...currentUserContext, ...userContext}),
+                headName,
+            };
+        }
+    }
+};

src/lib/unstable/core/useSchemaRenderer/useSchemaRenderer.ts

@@ -14,8 +14,9 @@ import type {
     SyncValidateError,
 } from '../types';
 
-import {ENTITY_SERVICE_FIELD} from './constants';
+import {ENTITY_SERVICE_FIELD, USER_CONTEXT_SERVICE_FIELD} from './constants';
 import {useSchemaRendererMutators} from './hooks';
+import type {UserContextState} from './mutators';
 import {getValidate} from './utils';
 
 export interface UseSchemaRendererParams {
@@ -40,6 +41,7 @@ export interface UseSchemaRendererParams {
      */
     name: string;
     schema: JsonSchema;
+    userContext?: Omit<UserContextState, 'headName'>;
 }
 
 export type UseSchemaRendererReturn = {
@@ -54,6 +56,7 @@ export const useSchemaRenderer = ({
     mode,
     name,
     schema: originalSchema,
+    userContext,
 }: UseSchemaRendererParams) => {
     const form = useForm();
     const {setAsyncValidationCache, setAsyncValidationWaiters, triggerFields} =
@@ -154,6 +157,18 @@ export const useSchemaRenderer = ({
         return () => unsubscribe();
     }, [config, form, mode, name]);
 
+    React.useLayoutEffect(() => {
+        const data = {...userContext, headName: name};
+        const unsubscribe = form.registerField(
+            `${USER_CONTEXT_SERVICE_FIELD}.${name}`,
+            noop,
+            EMPTY_OBJECT,
+            {data},
+        );
+
+        return () => unsubscribe();
+    }, [form, name, userContext]);
+
     React.useLayoutEffect(() => {
         if (fieldsToTrigger.length) {
             triggerFields?.({fields: fieldsToTrigger});

src/lib/unstable/kit/constants/config.ts

@@ -11,6 +11,7 @@ import {
     FewOfNested,
     FileInput,
     Label,
+    Monaco,
     MultiSelect,
     NumberBase,
     NumberWithScale,
@@ -118,6 +119,7 @@ export const untypedConfig = {
             label: {Component: Label},
             alert: {Component: Alert},
             string_number_with_scale: {Component: StringNumberWithScale},
+            monaco: {Component: Monaco},
         },
         views: {},
         wrappers: {

src/lib/unstable/kit/controls/Monaco/Monaco.scss

@@ -0,0 +1,39 @@
+@import '../../styles/functions.scss';
+@import '../../styles/variables.scss';
+
+.#{$ns}monaco {
+    &_error {
+        .#{$ns}monaco__container {
+            border-color: var(--g-color-text-danger);
+        }
+    }
+
+    &__container {
+        position: relative;
+        border: 1px solid var(--g-color-line-generic);
+        border-radius: 6px;
+        overflow: hidden;
+    }
+
+    &__header {
+        padding: spacing(1.5) spacing(4);
+        border-bottom: 1px solid var(--g-color-line-generic);
+        background-color: var(--g-color-base-float-hover);
+    }
+
+    &__control {
+        position: relative;
+    }
+
+    &__control-inner {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    &__dialog-body {
+        padding: spacing(4);
+    }
+}