feat: add shared store to context (#238)

Author: bocembocem

src/lib/core/components/Form/DynamicField.tsx

@@ -14,6 +14,7 @@ import {
     useCreateContext,
     useCreateSearchContext,
     useDynamicFieldMirror,
+    useFormSharedStore,
     useIntegrationFF,
     useMutators,
     useSearchStore,
@@ -53,6 +54,7 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
     const watcher = useIntegrationFF(store, withoutInsertFFDebounce, destroyOnUnregister);
     const {mutatorsStore, mutateDFState} = useMutators(externalMutators);
     const {store: searchStore, setField, removeField, isHiddenField} = useSearchStore();
+    const shared = useFormSharedStore();
 
     const context = React.useMemo(
         () => ({
@@ -61,10 +63,21 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
             generateRandomValue,
             tools: {...tools, mutateDFState},
             store,
+            shared,
             mutatorsStore,
             __mirror,
         }),
-        [tools, config, Monaco, __mirror, generateRandomValue, mutatorsStore, mutateDFState, store],
+        [
+            tools,
+            shared,
+            config,
+            Monaco,
+            __mirror,
+            generateRandomValue,
+            mutatorsStore,
+            mutateDFState,
+            store,
+        ],
     );
 
     const searchContext = React.useMemo(

src/lib/core/components/Form/hooks/index.tsx

@@ -2,6 +2,8 @@ export * from './useControllerMirror';
 export * from './useCreateContext';
 export * from './useDynamicFieldMirror';
 export * from './useDynamicFormsCtx';
+export * from './useFormShared';
+export * from './useFormSharedStore';
 export * from './useGenerateRandomValue';
 export * from './useIntegrationFF';
 export * from './useMutateDFState';

src/lib/core/components/Form/hooks/useFormShared.tsx

@@ -0,0 +1,10 @@
+import {useDynamicFormsCtx} from './useDynamicFormsCtx';
+
+export const useFormShared = <SharedStore extends Record<string, any>>() =>
+    useDynamicFormsCtx().shared as {
+        store: SharedStore;
+        onChangeShared: <Name extends keyof SharedStore, Value extends SharedStore[Name]>(
+            name: Name,
+            value: Value,
+        ) => void;
+    };

src/lib/core/components/Form/hooks/useFormSharedStore.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const useFormSharedStore = () => {
+    const [store, setStore] = React.useState({});
+
+    const onChangeShared = React.useCallback(
+        (name: string, value: any) => setStore((s) => ({...s, [name]: value})),
+        [setStore],
+    );
+
+    return {store, onChangeShared};
+};

src/lib/core/components/Form/index.ts

@@ -1,6 +1,6 @@
 export * from './constants';
 export * from './Controller';
 export * from './DynamicField';
-export {useMutateDFState, useStoreValue} from './hooks';
+export {useMutateDFState, useStoreValue, useFormShared} from './hooks';
 export * from './types';
 export * from './utils';

src/lib/core/components/Form/types/context.ts

@@ -26,6 +26,10 @@ export interface DynamicFormsContext {
         mutateDFState: (mutators: DynamicFormMutators) => void;
     };
     store: DynamicFieldStore;
+    shared: {
+        store: Record<string, any>;
+        onChangeShared: (name: string, value: any) => void;
+    };
     mutatorsStore: DynamicFormMutatorsStore;
     __mirror?: WonderMirror;
 }

src/lib/core/components/View/DynamicView.tsx

@@ -8,7 +8,7 @@ import {FormValue, Spec} from '../../types';
 
 import {ViewController} from './ViewController';
 import {isCorrectViewConfig} from './helpers';
-import {useCreateContext} from './hooks';
+import {useCreateContext, useViewSharedStore} from './hooks';
 import {DynamicViewConfig} from './types';
 
 export interface DynamicViewProps {
@@ -32,6 +32,7 @@ export const DynamicView = ({
     showLayoutDescription,
 }: DynamicViewProps) => {
     const DynamicFormsCtx = useCreateContext();
+    const shared = useViewSharedStore();
 
     const context = React.useMemo(
         () => ({
@@ -40,8 +41,9 @@ export const DynamicView = ({
             showLayoutDescription,
             Link,
             Monaco: isValidElementType(Monaco) ? Monaco : undefined,
+            shared,
         }),
-        [config, value, Link, Monaco, showLayoutDescription],
+        [config, value, Link, Monaco, showLayoutDescription, shared],
     );
 
     if (isCorrectSpec(spec) && isCorrectViewConfig(config)) {

src/lib/core/components/View/hooks/index.tsx

@@ -3,3 +3,5 @@ export * from './useCreateContext';
 export * from './useDynamicFormsCtx';
 export * from './useRender';
 export * from './useMonaco';
+export * from './useViewShared';
+export * from './useViewSharedStore';

src/lib/core/components/View/hooks/useViewShared.tsx

@@ -0,0 +1,10 @@
+import {useDynamicFormsCtx} from './useDynamicFormsCtx';
+
+export const useViewShared = <SharedStore extends Record<string, any>>() =>
+    useDynamicFormsCtx().shared as {
+        store: SharedStore;
+        onChangeShared: <Name extends keyof SharedStore, Value extends SharedStore[Name]>(
+            name: Name,
+            value: Value,
+        ) => void;
+    };

src/lib/core/components/View/hooks/useViewSharedStore.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const useViewSharedStore = () => {
+    const [store, setStore] = React.useState({});
+
+    const onChangeShared = React.useCallback(
+        (name: string, value: any) => setStore((s) => ({...s, [name]: value})),
+        [setStore],
+    );
+
+    return {store, onChangeShared};
+};