jamespot-react-core 1.1.12 → 1.1.13

package/build/components/AppStateLoader.component.d.ts

@@ -0,0 +1,7 @@
+export declare type AppStateLoaderProps = {
+    appId: string;
+    children: JSX.Element;
+    loader?: JSX.Element;
+    initPromises: Promise<any>[];
+};
+export declare const AppStateLoader: (props: AppStateLoaderProps) => JSX.Element;

package/build/components/types.d.ts

@@ -1,2 +1,3 @@
 export { ExtensionProviderProps } from './ExtensionProvider.component';
 export { IfAppIsActivatedProps } from './IfAppIsActivated.component';
+export { AppStateLoaderProps } from './AppStateLoader.component';

package/build/displayer/DisplayForm.component.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { DisplayFormProps, DisplayFormRef } from './types';
+/****
+ * The jamespot model depend on the platform
+ * For example a user can have the size attribute only for a given platform
+ * The model specifics of a platform are stored in J.model
+ *
+ * This component display an array of attributes only if this attribute is activated on the platform
+ *
+ * @param props.object the object to display (ie the user)
+ * @param props.attributesName an array of string : the list of attributes we want to display
+ * @param props.componentsOverride we can override the default render of the attribute
+ * @param props.componentsOverride.render the whole component logic (we override @DisplayList or @DisplaySingleValue for exemple)
+ * @param props.componentsOverride.wrapper the attribute is wrapped inside an element. For a list it can be an UL
+ * @param props.componentsOverride.element the component just above the element value
+ * @param props.componentsOverride.input the component input
+ *  Note :If we override the "render" you can't override "wrapper" and "element" because the render rewrite everything
+ */
+export declare const DisplayForm: React.ForwardRefExoticComponent<DisplayFormProps & React.RefAttributes<DisplayFormRef>>;

package/build/displayer/Empty.d.ts

@@ -0,0 +1 @@
+export declare const Empty: () => JSX.Element;

package/build/displayer/components/DisplaySingleValue.component.d.ts

@@ -1,2 +1,3 @@
 import { RenderAttributeProps } from 'displayer/types';
 export declare const DisplaySingleValue: (props: RenderAttributeProps) => JSX.Element | null;
+export declare const DisplayDate: ({ object, attribute }: RenderAttributeProps) => JSX.Element;

package/build/displayer/list/formatter.d.ts

@@ -1,10 +1,25 @@
 import * as React from 'react';
-import { FieldConfiguration } from '../types';
-export declare function formatString<T extends string>(configuration: FieldConfiguration<T>): {
-    name: T;
-    label: string;
+import { DisplayInputComponentProps, FieldConfiguration } from '../types';
+export declare function formatDate<T extends string>(configuration: FieldConfiguration<T>): {
     accessor: T;
+    components: {
+        render: ({ object, attribute }: import("../types").RenderAttributeProps) => JSX.Element;
+        wrapper: ({ children }: {
+            children: React.FunctionComponent<any>;
+        }) => JSX.Element;
+        element: ({ children }: {
+            children: React.FunctionComponent<any>;
+        }) => JSX.Element;
+        input: (props: DisplayInputComponentProps) => JSX.Element;
+    };
+    label: string;
+    description?: string | undefined;
     widget: import("../types").Widget;
+    name: T;
+    mandatory: boolean;
+};
+export declare function formatString<T extends string>(configuration: FieldConfiguration<T>): {
+    accessor: T;
     components: {
         render: (props: import("../types").RenderAttributeProps) => JSX.Element | null;
         wrapper: ({ children }: {
@@ -13,13 +28,16 @@ export declare function formatString<T extends string>(configuration: FieldConfi
         element: ({ children }: {
             children: React.FunctionComponent<any>;
         }) => JSX.Element;
+        input: (props: DisplayInputComponentProps) => JSX.Element;
     };
+    label: string;
+    description?: string | undefined;
+    widget: import("../types").Widget;
+    name: T;
+    mandatory: boolean;
 };
 export declare function formatNumber<T extends string>(configuration: FieldConfiguration<T>): {
-    name: T;
-    label: string;
     accessor: T;
-    widget: import("../types").Widget;
     components: {
         render: (props: import("../types").RenderAttributeProps) => JSX.Element | null;
         wrapper: ({ children }: {
@@ -28,13 +46,34 @@ export declare function formatNumber<T extends string>(configuration: FieldConfi
         element: ({ children }: {
             children: React.FunctionComponent<any>;
         }) => JSX.Element;
+        input: (props: DisplayInputComponentProps) => JSX.Element;
     };
+    label: string;
+    description?: string | undefined;
+    widget: import("../types").Widget;
+    name: T;
+    mandatory: boolean;
 };
 export declare function formatTaxonomy<T extends string>(configuration: FieldConfiguration<T>): {
-    name: T;
-    label: string;
     accessor: T;
+    components: {
+        render: (props: import("../types").RenderAttributeProps) => JSX.Element | null;
+        wrapper: ({ children }: {
+            children: React.FunctionComponent<any>;
+        }) => JSX.Element;
+        element: ({ children }: {
+            children: React.FunctionComponent<any>;
+        }) => JSX.Element;
+        input: (props: DisplayInputComponentProps) => JSX.Element;
+    };
+    label: string;
+    description?: string | undefined;
     widget: import("../types").Widget;
+    name: T;
+    mandatory: boolean;
+};
+export declare function formatOrientedlinks<T extends string>(configuration: FieldConfiguration<T>): {
+    accessor: T;
     components: {
         render: (props: import("../types").RenderAttributeProps) => JSX.Element | null;
         wrapper: ({ children }: {
@@ -43,13 +82,70 @@ export declare function formatTaxonomy<T extends string>(configuration: FieldCon
         element: ({ children }: {
             children: React.FunctionComponent<any>;
         }) => JSX.Element;
+        input: ({ widget, ...props }: DisplayInputComponentProps) => JSX.Element;
     };
+    label: string;
+    description?: string | undefined;
+    widget: import("../types").Widget;
+    name: T;
+    mandatory: boolean;
 };
-export declare function formatDefault<T extends string>(configuration: FieldConfiguration<T>): {
+export declare function formatUri<T extends string>(configuration: FieldConfiguration<T>): {
+    accessor: T;
+    components: {
+        render: (props: import("../types").RenderAttributeProps) => JSX.Element | null;
+        wrapper: ({ children }: {
+            children: React.FunctionComponent<any>;
+        }) => JSX.Element;
+        element: ({ children }: {
+            children: React.FunctionComponent<any>;
+        }) => JSX.Element;
+        input: ({ widget, ...props }: DisplayInputComponentProps) => JSX.Element;
+    };
+    label: string;
+    description?: string | undefined;
+    widget: import("../types").Widget;
     name: T;
+    mandatory: boolean;
+};
+export declare function formatRadio<T extends string>(configuration: FieldConfiguration<T>): {
+    accessor: T;
+    components: {
+        render: (props: import("../types").RenderAttributeProps) => JSX.Element | null;
+        wrapper: ({ children }: {
+            children: React.FunctionComponent<any>;
+        }) => JSX.Element;
+        element: ({ children }: {
+            children: React.FunctionComponent<any>;
+        }) => JSX.Element;
+        input: ({ widget, ...props }: DisplayInputComponentProps) => JSX.Element;
+    };
     label: string;
+    description?: string | undefined;
+    widget: import("../types").Widget;
+    name: T;
+    mandatory: boolean;
+};
+export declare function formatCheckbox<T extends string>(configuration: FieldConfiguration<T>): {
     accessor: T;
+    components: {
+        render: (props: import("../types").RenderAttributeProps) => JSX.Element | null;
+        wrapper: ({ children }: {
+            children: React.FunctionComponent<any>;
+        }) => JSX.Element;
+        element: ({ children }: {
+            children: React.FunctionComponent<any>;
+        }) => JSX.Element;
+        input: ({ widget, ...props }: DisplayInputComponentProps) => JSX.Element;
+    };
+    label: string;
+    description?: string | undefined;
     widget: import("../types").Widget;
+    name: T;
+    mandatory: boolean;
+};
+export declare function formatDefault<T extends string>(configuration: FieldConfiguration<T>): {
+    accessor: T;
     components: {
         render: (props: import("../types").RenderAttributeProps) => JSX.Element | null;
         wrapper: ({ children }: {
@@ -58,5 +154,11 @@ export declare function formatDefault<T extends string>(configuration: FieldConf
         element: ({ children }: {
             children: React.FunctionComponent<any>;
         }) => JSX.Element;
+        input: (props: DisplayInputComponentProps) => JSX.Element;
     };
+    label: string;
+    description?: string | undefined;
+    widget: import("../types").Widget;
+    name: T;
+    mandatory: boolean;
 };

package/build/displayer/types.d.ts

@@ -1,3 +1,5 @@
+import * as React from 'react';
+import { UseFormReset } from 'react-hook-form';
 export declare type JObject<T extends string> = Record<T, any> & {
     title: string;
     id: string;
@@ -14,6 +16,9 @@ export declare type WidgetDate = {
     type: 'date';
     format: string;
 };
+export declare type WidgetDatetime = {
+    type: 'datetime';
+};
 export declare type WidgetSelect<U extends string = string> = {
     type: 'select';
     options: Record<U, string>;
@@ -35,6 +40,10 @@ export declare type WidgetUrl = {
 export declare type WidgetRefUser = {
     type: 'refUser';
 };
+export declare type WidgetRadio = {
+    type: 'radio';
+    options: Record<string, string>;
+};
 export declare type WidgetCheckbox = {
     type: 'checkbox';
     options: Record<string, string>;
@@ -45,22 +54,51 @@ export declare type WidgetTaxonomy = {
         idTaxonomy: string;
     };
 };
-export declare type Widget = WidgetText | WidgetNumber | WidgetDate | WidgetSelect | WidgetEmail | WidgetUrl | WidgetRefUser | WidgetCheckbox | WidgetTaxonomy;
+export declare type WidgetOrientedlinks = {
+    type: 'orientedlinks';
+    params: {
+        'jcomplete-multiple': '0' | '1';
+        showAdd: '0' | '1';
+        supportedTypes: Array<string>;
+    };
+};
+export declare type WidgetUri = {
+    type: 'uri';
+    params: {
+        class: string;
+        'jcomplete-url': string;
+        type: string;
+    };
+};
+export declare type Widget = WidgetText | WidgetNumber | WidgetDate | WidgetDatetime | WidgetSelect | WidgetEmail | WidgetUrl | WidgetRefUser | WidgetRadio | WidgetCheckbox | WidgetOrientedlinks | WidgetTaxonomy | WidgetUri;
 export declare type FieldConfiguration<T extends string> = {
     label: string;
+    description?: string;
     widget: Widget;
     name: T;
+    mandatory: boolean;
 };
 export declare type Configuration<T extends string> = FieldConfiguration<T>;
+export declare type DisplayInputComponentProps = {
+    control: any;
+    label: string;
+    description?: string;
+    name: string;
+    widget: Widget;
+    mandatory: boolean;
+};
 export declare type DisplayElementComponent = {
     render: React.FunctionComponent<RenderAttributeProps>;
     wrapper: React.FunctionComponent<any>;
     element: React.FunctionComponent<any>;
+    input: React.FunctionComponent<DisplayInputComponentProps>;
 };
 export declare type DisplayerElement = {
     name: string;
     label: string;
+    description?: string;
     accessor: string;
+    mandatory: boolean;
     widget: Widget;
     components: DisplayElementComponent;
 };
@@ -73,6 +111,8 @@ declare type DisplayAttributeComponentOverrideProps = {
     wrapper: React.FunctionComponent<any>;
 } | {
     element: React.FunctionComponent<any>;
+} | {
+    input: React.FunctionComponent<any>;
 };
 export declare type DisplayAttributesProps = {
     object: any;
@@ -83,5 +123,17 @@ export declare type RenderAttributeProps = {
     object: any;
     attribute: DisplayerElement;
 };
-export declare type Displayer = Array<DisplayerElement | undefined>;
+export declare type DisplayFormProps = {
+    object: any;
+    componentsOverride?: Record<string, DisplayAttributeComponentOverrideProps>;
+    attributesName: string[];
+    onSubmit: any;
+};
+export declare type DisplayFormRef = {
+    reset: UseFormReset<any>;
+};
+export declare type RenderInputProps = DisplayerElement & {
+    control: any;
+};
+export declare type Displayer = Array<DisplayerElement>;
 export {};

package/build/redux/slice/AppState.slice.d.ts

@@ -0,0 +1,29 @@
+import { PayloadAction } from '@reduxjs/toolkit';
+import { RootState } from '../store';
+declare type SliceState = {
+    [key: string]: {
+        isLoading: boolean;
+        error?: object;
+    };
+};
+export declare const appStateSlice: import("@reduxjs/toolkit").Slice<SliceState, {
+    setLoading: (state: SliceState, action: PayloadAction<string>) => void;
+    setLoaded: (state: SliceState, action: PayloadAction<string>) => void;
+    setError: (state: SliceState, action: PayloadAction<{
+        app: string;
+        error: object;
+    }>) => void;
+}, "appState">;
+export declare const appStateSelector: (state: RootState, appName: string) => {
+    isLoading: boolean;
+    error?: object | undefined;
+};
+export declare const appStateActions: import("@reduxjs/toolkit").CaseReducerActions<{
+    setLoading: (state: SliceState, action: PayloadAction<string>) => void;
+    setLoaded: (state: SliceState, action: PayloadAction<string>) => void;
+    setError: (state: SliceState, action: PayloadAction<{
+        app: string;
+        error: object;
+    }>) => void;
+}>;
+export {};

package/build/redux/slice/Application.slice.d.ts

@@ -30,6 +30,12 @@ export declare const applicationSelector: import("@reduxjs/toolkit").EntitySelec
         users: import("@reduxjs/toolkit").EntityState<import("./User.slice").User>;
         articles: import("@reduxjs/toolkit").EntityState<import("./Article.slice").Article>;
     }>;
+    appState: {
+        [key: string]: {
+            isLoading: boolean;
+            error?: object | undefined;
+        };
+    };
     form: import("redux-form").FormStateMap;
     toasts: import("@reduxjs/toolkit").EntityState<import("./Toast.slice").ToastEntity>;
 }>>;

package/build/redux/slice/Article.slice.d.ts

@@ -34,6 +34,12 @@ export declare const articlesSelector: import("@reduxjs/toolkit").EntitySelector
         users: import("@reduxjs/toolkit").EntityState<import("./User.slice").User>;
         articles: import("@reduxjs/toolkit").EntityState<Article>;
     }>;
+    appState: {
+        [key: string]: {
+            isLoading: boolean;
+            error?: object | undefined;
+        };
+    };
     form: import("redux-form").FormStateMap;
     toasts: import("@reduxjs/toolkit").EntityState<import("./Toast.slice").ToastEntity>;
 }>>;

package/build/redux/slice/Model.slice.d.ts

@@ -30,6 +30,12 @@ export declare const modelSelector: import("@reduxjs/toolkit").EntitySelectors<M
         users: import("@reduxjs/toolkit").EntityState<import("./User.slice").User>;
         articles: import("@reduxjs/toolkit").EntityState<import("./Article.slice").Article>;
     }>;
+    appState: {
+        [key: string]: {
+            isLoading: boolean;
+            error?: object | undefined;
+        };
+    };
     form: import("redux-form").FormStateMap;
     toasts: import("@reduxjs/toolkit").EntityState<import("./Toast.slice").ToastEntity>;
 }>>;

package/build/redux/slice/Toast.slice.d.ts

@@ -43,6 +43,12 @@ export declare const toastSelector: import("@reduxjs/toolkit").EntitySelectors<T
         users: import("@reduxjs/toolkit").EntityState<import("./User.slice").User>;
         articles: import("@reduxjs/toolkit").EntityState<import("./Article.slice").Article>;
     }>;
+    appState: {
+        [key: string]: {
+            isLoading: boolean;
+            error?: object | undefined;
+        };
+    };
     form: import("redux-form").FormStateMap;
     toasts: import("@reduxjs/toolkit").EntityState<ToastEntity>;
 }>>;

package/build/redux/slice/User.slice.d.ts

@@ -34,6 +34,12 @@ export declare const usersSelector: import("@reduxjs/toolkit").EntitySelectors<U
         users: import("@reduxjs/toolkit").EntityState<User>;
         articles: import("@reduxjs/toolkit").EntityState<import("./Article.slice").Article>;
     }>;
+    appState: {
+        [key: string]: {
+            isLoading: boolean;
+            error?: object | undefined;
+        };
+    };
     form: import("redux-form").FormStateMap;
     toasts: import("@reduxjs/toolkit").EntityState<import("./Toast.slice").ToastEntity>;
 }>>;

package/build/redux/store.d.ts

@@ -5,11 +5,11 @@ export interface JInjectStore extends ReturnType<typeof createStore> {
     add: (key: string, asyncReducer: Reducer) => void;
     selectors: any;
     actions: any;
+    useAppDispatch: any;
 }
 export interface AsyncReducers {
     [key: string]: Reducer;
 }
-export declare function makeStore(initialState: any): JInjectStore;
 declare function createStore(initialAsyncReducers: {}, initialState: any): import("@reduxjs/toolkit").EnhancedStore<import("redux").CombinedState<{
     entities: import("redux").CombinedState<{
         applications: import("@reduxjs/toolkit").EntityState<import("../utils/types").Application>;
@@ -17,6 +17,12 @@ declare function createStore(initialAsyncReducers: {}, initialState: any): impor
         users: import("@reduxjs/toolkit").EntityState<import("./slice/User.slice").User>;
         articles: import("@reduxjs/toolkit").EntityState<import("./slice/Article.slice").Article>;
     }>;
+    appState: {
+        [key: string]: {
+            isLoading: boolean;
+            error?: object | undefined;
+        };
+    };
     form: import("redux-form").FormStateMap;
     toasts: import("@reduxjs/toolkit").EntityState<import("./slice/Toast.slice").ToastEntity>;
 }>, import("redux").AnyAction, ((import("redux-thunk").ThunkMiddleware<{}, import("redux").AnyAction, undefined> & {
@@ -26,4 +32,5 @@ export declare type AppDispatch = ReturnType<typeof createStore>['dispatch'];
 export declare type RootState = ReturnType<ReturnType<typeof createStore>['getState']>;
 export declare const useAppDispatch: () => import("redux").Dispatch<import("redux").AnyAction>;
 export declare const useAppSelector: TypedUseSelectorHook<RootState>;
+export declare function makeStore(initialState: any): JInjectStore;
 export {};

package/build/utils/types.d.ts

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { ReactRegistry } from './registry';
 import { ReactTranslation, SupportedLanguages, TranslationKeys } from './translation';
-export { Configuration, DisplayAttributesProps } from '../displayer/types';
+export { Configuration, DisplayAttributesProps, DisplayFormProps } from '../displayer/types';
 export * from '../components/types';
 import { useDisplay } from '../displayer/useDisplay';
 import { Configuration } from '../displayer/types';
+import { useDebounce, useDidMountEffect, useTimeout } from 'jamespot-react-components';
 import { toasts } from '../redux/slice/Toast.slice';
-export declare type gabarit = 'core-1-cols' | 'core-2-cols' | 'core-3-cols' | 'content-1-cols' | 'content-2-cols' | 'content-3-cols' | 'app-1-cols' | 'app-2-cols' | 'empty';
+import { JInjectStore } from '../redux/store';
+export declare type Gabarit = 'core-1-cols' | 'core-2-cols' | 'core-3-cols' | 'content-1-cols' | 'content-2-cols' | 'content-3-cols' | 'app-1-cols' | 'app-2-cols' | 'empty';
 export interface ReactCore {
     extensions: ReactExtensions;
-    store: any;
+    store: JInjectStore;
     actions: object;
     registry: ReactRegistry;
     locale?: SupportedLanguages;
@@ -19,7 +21,7 @@ export interface ReactCore {
     require: (extensionName: string, args?: any) => void;
     extensionAdd: (extensionName: string, load: () => void) => void;
     toasts: typeof toasts;
-    routeAdd: (route: string, extensionName: string, idDiv: string, gabarit?: gabarit, gabaritOptions?: object) => void;
+    routeAdd: (route: string, extensionName: string, idDiv: string, gabarit?: Gabarit, gabaritOptions?: object) => void;
     transitionTo: (stateName: string, args: {}, options?: {
         reload: boolean;
         notify?: boolean;
@@ -96,6 +98,11 @@ export interface WindowJ {
     jamespotReactTheme: any;
     applications: Application[];
     models: Model<string>[];
+    hook: {
+        useTimeout: typeof useTimeout;
+        useDebounce: typeof useDebounce;
+        useDidMountEffect: typeof useDidMountEffect;
+    };
 }
 export interface Application {
     name: string;
@@ -138,10 +145,12 @@ export declare type IsAppActivateProps = {
 };
 export declare type ReactExtensionProps = {
     extensionName: string;
+    moduleName?: string;
     route?: string;
     idAnchor?: string;
     reducerName?: string;
-    gabarit?: gabarit;
+    gabarit?: Gabarit;
     apiDependency?: string;
 };
+export * from '../displayer/types';
 export { RootState } from '../redux/store';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jamespot-react-core",
-    "version": "1.1.12",
+    "version": "1.1.13",
     "description": "Jamespot React Core",
     "types": "./build/utils/types.d.ts",
     "scripts": {
@@ -32,8 +32,8 @@
         "@types/react-test-renderer": "^17.0.1",
         "@types/react-transition-group": "^4.4.1",
         "@types/redux-form": "^8.2.7",
-        "@types/styled-components": "^5.1.4",
         "@types/socket.io-client": "^3.0.0",
+        "@types/styled-components": "^5.1.4",
         "@typescript-eslint/eslint-plugin": "^5.4.0",
         "@typescript-eslint/parser": "^5.4.0",
         "babel-jest": "^27.3.1",
@@ -51,7 +51,7 @@
         "lint-staged": "^12.0.2",
         "mini-css-extract-plugin": "^0.10.0",
         "prettier": "^2.4.1",
-        "react-test-renderer": "^16.13.1",
+        "react-test-renderer": "^17.0.1",
         "source-map-loader": "^1.0.1",
         "ts-jest": "^27.0.7",
         "ts-loader": "^8.0.2",
@@ -62,11 +62,12 @@
         "worker-loader": "^3.0.8"
     },
     "dependencies": {
-        "jamespot-react-components": "file:../jamespot-react-components",
-        "jamespot-user-api": "file:../jamespot-user-api",
+        "jamespot-react-components": "^1.0.1",
+        "jamespot-user-api": "^1.0.2",
         "pkg.json": "^2.0.8",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-hook-form": "^7.25.0",
         "react-intl": "^5.8.6",
         "react-redux": "^7.2.3",
         "react-select": "^3.2.0",

package/src/App.tsx

@@ -1,5 +1,5 @@
 import { Theme, Resources } from 'jamespot-react-components';
-import { makeStore } from './redux/store';
+import { JInjectStore, makeStore } from './redux/store';
 import { ActionCreators } from './redux/actions/actions';
 import {
     ReactCore,
@@ -8,7 +8,7 @@ import {
     ReactExtensionContainer,
     WindowJ,
     ReactSocket,
-    gabarit,
+    Gabarit,
 } from './utils/types';
 import { Registry, ReactRegistry } from './utils/registry';
 import './components';
@@ -23,6 +23,8 @@ import { Toaster } from './enhencers/toast/Toaster';
 import { ExtensionProvider } from './components/ExtensionProvider.component';
 import { toasts } from './redux/slice/Toast.slice';
 
+import { useTimeout, useDebounce, useDidMountEffect } from 'jamespot-react-components';
+
 declare global {
     const J: WindowJ;
 }
@@ -31,7 +33,7 @@ const store = makeStore({});
 
 class App implements ReactCore {
     extensions: ReactExtensions = {};
-    store: any;
+    store: JInjectStore;
     actions: object;
     registry: ReactRegistry;
     useDisplay: typeof useDisplay;
@@ -75,17 +77,22 @@ class App implements ReactCore {
         this.extensions[extensionName] = load;
     }
 
-    public routeAdd(route: string, extensionName: string, idDiv: string, gabarit?: gabarit, gabaritOptions?: object) {
-        if (gabarit === undefined) {
-            gabarit = 'app-1-cols';
-        }
+    public routeAdd(
+        route: string,
+        extensionName: string,
+        idDiv: string,
+        gabarit: Gabarit = 'app-1-cols',
+        gabaritOptions?: object,
+    ) {
+        const jGabarit = gabarit === 'empty' ? '' : gabarit;
+
         J.ng.addState(extensionName, {
             abstract: true,
             templateUrl: '/?action=tpl&tpl=content&_=' + J.revision,
             controller: [
                 '$jTheme',
                 function ($jTheme: any) {
-                    $jTheme.setGabarit(gabarit, gabaritOptions);
+                    $jTheme.setGabarit(jGabarit, gabaritOptions);
                 },
             ],
         });
@@ -160,6 +167,26 @@ Registry.registerLib(
     import('./displayer/DisplayAttribute.component'),
 );
 
+Registry.registerLib(
+    [
+        {
+            name: 'DisplayForm',
+            module: 'DisplayForm',
+        },
+    ],
+    import('./displayer/DisplayForm.component'),
+);
+
+Registry.registerLib(
+    [
+        {
+            name: 'Empty',
+            module: 'Empty',
+        },
+    ],
+    import('./displayer/Empty'),
+);
+
 const AppDefault = new App(store, ActionCreators, Registry);
 
 AppDefault.locale = J.locale;
@@ -175,6 +202,12 @@ if (J.jUserLogged) {
     socket.init(J.jUserLogged.id);
 }
 
+J.hook = {
+    useTimeout,
+    useDebounce,
+    useDidMountEffect,
+};
+
 document.addEventListener('DOMContentLoaded', function () {
     const el = document.getElementById('react-toasts');
     if (el) {