jamespot-react-core 1.1.13 → 1.1.20

package/src/App.tsx

@@ -1,5 +1,5 @@
 import { Theme, Resources } from 'jamespot-react-components';
-import { JInjectStore, makeStore } from './redux/store';
+import { makeStore } from './redux/store';
 import { ActionCreators } from './redux/actions/actions';
 import {
     ReactCore,
@@ -8,13 +8,14 @@ import {
     ReactExtensionContainer,
     WindowJ,
     ReactSocket,
-    Gabarit,
+    gabarit,
+    ReactExtensionProps,
+    Model,
 } from './utils/types';
 import { Registry, ReactRegistry } from './utils/registry';
-import './components';
 import { Translation, ReactTranslation, SupportedLanguages } from './utils/translation';
 import socket from './utils/socket';
-
+import JRCore from 'App';
 import jComponentList from '../ext-component-list.json';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -22,8 +23,9 @@ import { useDisplay } from './displayer/useDisplay';
 import { Toaster } from './enhencers/toast/Toaster';
 import { ExtensionProvider } from './components/ExtensionProvider.component';
 import { toasts } from './redux/slice/Toast.slice';
+import { IfAppIsActivated } from 'components/IfAppIsActivated.component';
 
-import { useTimeout, useDebounce, useDidMountEffect } from 'jamespot-react-components';
+import Router, { ReactRouter } from './utils/router';
 
 declare global {
     const J: WindowJ;
@@ -33,7 +35,7 @@ const store = makeStore({});
 
 class App implements ReactCore {
     extensions: ReactExtensions = {};
-    store: JInjectStore;
+    store: any;
     actions: object;
     registry: ReactRegistry;
     useDisplay: typeof useDisplay;
@@ -41,6 +43,7 @@ class App implements ReactCore {
     translation?: ReactTranslation;
     theme: any;
     socket?: ReactSocket;
+    router: ReactRouter = Router;
     toasts: typeof toasts;
 
     constructor(store: any, ActionCreators: object, registry: ReactRegistry) {
@@ -51,7 +54,7 @@ class App implements ReactCore {
         this.toasts = toasts;
     }
 
-    public require = (extensionName: string, args: any) => {
+    public require = (extensionName: string, args?: any) => {
         if (this.extensions[extensionName]) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             const self = this;
@@ -77,28 +80,24 @@ class App implements ReactCore {
         this.extensions[extensionName] = load;
     }
 
-    public routeAdd(
-        route: string,
-        extensionName: string,
-        idDiv: string,
-        gabarit: Gabarit = 'app-1-cols',
-        gabaritOptions?: object,
-    ) {
-        const jGabarit = gabarit === 'empty' ? '' : gabarit;
-
+    public routeAdd(route: string, extensionName: string, idDiv: string, gabarit?: gabarit, gabaritOptions?: object) {
+        if (gabarit === undefined) {
+            gabarit = 'app-1-cols';
+        }
         J.ng.addState(extensionName, {
             abstract: true,
             templateUrl: '/?action=tpl&tpl=content&_=' + J.revision,
             controller: [
                 '$jTheme',
                 function ($jTheme: any) {
-                    $jTheme.setGabarit(jGabarit, gabaritOptions);
+                    $jTheme.setGabarit(gabarit, gabaritOptions);
                 },
             ],
         });
         J.ng.addState(extensionName + '.app', {
             template: '',
             url: '/r/' + route,
+            reloadOnSearch: false,
             controller: [
                 '$scope',
                 '$rootScope',
@@ -106,7 +105,7 @@ class App implements ReactCore {
                 function ($scope: any, $rootScope: any, $timeout: any) {
                     $scope.appId = idDiv;
                     $timeout(function () {
-                        J.react.require(extensionName);
+                        JRCore.require(extensionName);
                     });
 
                     const stateChangeStart = $rootScope.$on('$stateChangeStart', function () {
@@ -157,36 +156,6 @@ if (jComponentList && Array.isArray(jComponentList)) {
     Registry.registerLib(jComponentList, import('jamespot-react-components'));
 }
 
-Registry.registerLib(
-    [
-        {
-            name: 'DisplayAttributes',
-            module: 'DisplayAttributes',
-        },
-    ],
-    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;
@@ -202,12 +171,28 @@ if (J.jUserLogged) {
     socket.init(J.jUserLogged.id);
 }
 
-J.hook = {
-    useTimeout,
-    useDebounce,
-    useDidMountEffect,
-};
-
+J.ng.addState('reactRouter', {
+    template: '<div id="app-react" style="width:100%"></div>',
+    url: '/rr/*path',
+    reloadOnSearch: false,
+    controller: [
+        '$scope',
+        '$rootScope',
+        function ($scope: any, $rootScope: any) {
+            J.react.router.init('app-react');
+
+            const stateChangeStart = $rootScope.$on('$stateChangeStart', function () {
+                const el = document.getElementById('app-react');
+                if (el) {
+                    ReactDOM.unmountComponentAtNode(el);
+                }
+            });
+            $scope.$on('$destroy', function () {
+                stateChangeStart();
+            });
+        },
+    ],
+});
 document.addEventListener('DOMContentLoaded', function () {
     const el = document.getElementById('react-toasts');
     if (el) {
@@ -221,3 +206,5 @@ document.addEventListener('DOMContentLoaded', function () {
 });
 
 export default AppDefault;
+
+export { ReactExtension, ReactExtensionProps, ExtensionProvider, WindowJ, IfAppIsActivated, Model };

package/src/components/ExtensionProvider.component.tsx

@@ -3,14 +3,16 @@ import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
 import { JRCThemeProvider } from 'jamespot-react-components';
 
+import JRCore from 'App';
+
 export type ExtensionProviderProps = {
     children: React.ReactNode;
 };
 
 export const ExtensionProvider = (props: ExtensionProviderProps) => {
-    const store = J.react.store;
-    const locale = J.react.locale ? J.react.locale : 'en';
-    const messages = J.react.translation ? J.react.translation.get(locale) : {};
+    const store = JRCore.store;
+    const locale = JRCore.locale ? JRCore.locale : 'en';
+    const messages = JRCore.translation ? JRCore.translation.get(locale) : {};
     return (
         <Provider store={store}>
             <IntlProvider locale={locale} messages={messages}>

package/src/components/IfAppIsActivated.component.tsx

@@ -1,4 +1,5 @@
 import { useSelector } from 'react-redux';
+import JRCore from 'App';
 
 export type IfAppIsActivatedProps = {
     dependency: string;
@@ -8,7 +9,7 @@ export type IfAppIsActivatedProps = {
 export const IfAppIsActivated = (props: IfAppIsActivatedProps) => {
     const { isDependencyActivated } = useSelector((state: any) => {
         return {
-            isDependencyActivated: J.react.store.selectors.application.selectById(state, props.dependency),
+            isDependencyActivated: JRCore.store.selectors.application.selectById(state, props.dependency),
         };
     });
     return isDependencyActivated ? props.children : null;

package/src/components/NoMatch.component.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export const NoMatch = () => {
+    return <div>404 Page not found</div>;
+};

package/src/components/types.ts

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

package/src/displayer/DisplayAttribute.component.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
+import { FunctionComponent } from 'react';
 import { DisplayAttributesProps, RenderAttributeProps } from './types';
+import JRCore from 'App';
 
 /***
  * Choose the component to render according to the type of the object
  */
 const RenderAttribute = (props: RenderAttributeProps) => {
     const { attribute } = props;
-    const RenderComponent: React.FunctionComponent<RenderAttributeProps> = attribute.components.render;
+    const RenderComponent: FunctionComponent<RenderAttributeProps> = attribute.components.render;
     const WrapperComponent: React.FunctionComponent<any> = attribute.components.wrapper;
 
     return (
@@ -33,7 +35,7 @@ const RenderAttribute = (props: RenderAttributeProps) => {
  */
 export const DisplayAttributes = (props: DisplayAttributesProps) => {
     const { attributesName, object, componentsOverride } = props;
-    const config = J.react.useDisplay(attributesName || [], object.type);
+    const config = JRCore.useDisplay(attributesName || [], object.type);
 
     return config.map((attributeProps) => {
         if (!attributeProps) return;

package/src/displayer/components/DisplaySingleValue.component.tsx

@@ -1,6 +1,5 @@
 import { RenderAttributeProps } from 'displayer/types';
 import * as React from 'react';
-import { JRCDateProps } from 'jamespot-react-components';
 
 export const DisplaySingleValue = (props: RenderAttributeProps) => {
     const { object, attribute } = props;
@@ -9,8 +8,3 @@ export const DisplaySingleValue = (props: RenderAttributeProps) => {
 
     return <ElementComponent>{object[attribute.accessor]}</ElementComponent>;
 };
-
-export const DisplayDate = ({ object, attribute }: RenderAttributeProps) => {
-    const Date = J.react.registry.getLazyComponent<JRCDateProps>('Date');
-    return <Date date={object[attribute.name]} />;
-};

package/src/displayer/list/formatter.tsx

@@ -1,231 +1,63 @@
 import { DisplayList } from 'displayer/components/DisplayList.component';
-import { DisplayDate, DisplaySingleValue } from 'displayer/components/DisplaySingleValue.component';
+import { DisplaySingleValue } from 'displayer/components/DisplaySingleValue.component';
 import * as React from 'react';
-import {
-    DisplayInputComponentProps,
-    FieldConfiguration,
-    WidgetCheckbox,
-    WidgetOrientedlinks,
-    WidgetUri,
-} from '../types';
-import jamespot from 'jamespot-user-api';
-import { Model } from '../../utils/types';
-import { useSelector } from 'react-redux';
-import { JRCAutocompleteProps, JRCInputCheckboxProps, JRCInputFieldProps } from 'jamespot-react-components';
+import { FieldConfiguration } from '../types';
 
 const DefaultWrapper = ({ children }: { children: React.FunctionComponent<any> }) => <div>{children}</div>;
 const DefaultElement = ({ children }: { children: React.FunctionComponent<any> }) => <>{children}</>;
 
-const RadioInput =
-    (checkboxMode: 'radio' | 'checkbox', options: Array<{ value: string; label: string }>) =>
-    ({ widget, ...props }: DisplayInputComponentProps) => {
-        const InputCheckbox = J.react.registry.getLazyComponent<JRCInputCheckboxProps<any>>('InputCheckbox');
-
-        const direction = options.length > 3 ? 'column' : 'row';
-
-        // {/* TODO multiple */}
-        return (
-            <>
-                {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-                {/* @ts-ignore */}
-                <InputCheckbox
-                    {...props}
-                    checkboxMode={checkboxMode}
-                    options={options}
-                    direction={direction}
-                    rules={{ required: props.mandatory }}
-                />
-            </>
-        );
-    };
-
-const LinkInput =
-    (type = 'article') =>
-    ({ widget, ...props }: DisplayInputComponentProps) => {
-        const InputAutocomplete = J.react.registry.getLazyComponent<JRCAutocompleteProps<any>>('InputAutocomplete');
-
-        // {/* TODO multiple */}
-        // const multiple = (widget as WidgetOrientedlinks).params["jcomplete-multiple"] === "1"
-        const required = props.mandatory;
-        const model: Model<string> = useSelector((state: any) => J.react.store.selectors.model.selectById(state, type));
-        const mainType = model?.mainType;
-
-        if (!mainType) return <></>;
-
-        const orientedLinksApis = {
-            article: (inputValue: string) =>
-                jamespot.article
-                    .list({
-                        type: (widget as WidgetOrientedlinks).params.supportedTypes[0],
-                        format: 'raw-view',
-                        query: inputValue,
-                    })
-                    .then((res: any) => {
-                        return res?.result?.data;
-                    }),
-            user: (inputValue: string) =>
-                jamespot.user
-                    .autocomplete(inputValue)
-                    .then((res: any) => res.map((jUser: any) => ({ ...jUser.record, id: jUser.id }))),
-        };
-
-        const autocomplete = (inputValue: string) =>
-            Object.keys(orientedLinksApis).includes(mainType)
-                ? orientedLinksApis[mainType as 'user' | 'article'](inputValue)
-                : Promise.resolve([]);
-
-        return (
-            <InputAutocomplete
-                label={props.label}
-                description={props.description}
-                name={props.name}
-                control={props.control}
-                rules={{ required }}
-                searchable
-                // multiple={multiple}
-                asyncPromise={autocomplete}
-            />
-        );
-    };
-
-const DefaultInput = (props: DisplayInputComponentProps) => {
-    const InputText = J.react.registry.getLazyComponent<JRCInputFieldProps<any>>('InputText');
-    return (
-        <InputText
-            label={props.label}
-            description={props.description}
-            name={props.name}
-            control={props.control}
-            rules={{ required: props.mandatory }}
-        />
-    );
-};
-
-export function formatDate<T extends string>(configuration: FieldConfiguration<T>) {
-    return {
-        ...configuration,
-        accessor: configuration.name,
-        components: {
-            render: DisplayDate,
-            wrapper: DefaultWrapper,
-            element: DefaultElement,
-            input: DefaultInput,
-        },
-    };
-}
-
 export function formatString<T extends string>(configuration: FieldConfiguration<T>) {
     return {
-        ...configuration,
+        name: configuration.name,
+        label: configuration.label,
         accessor: configuration.name,
+        widget: configuration.widget,
         components: {
             render: DisplaySingleValue,
             wrapper: DefaultWrapper,
             element: DefaultElement,
-            input: DefaultInput,
         },
     };
 }
 
 export function formatNumber<T extends string>(configuration: FieldConfiguration<T>) {
     return {
-        ...configuration,
+        name: configuration.name,
+        label: configuration.label,
         accessor: configuration.name,
+        widget: configuration.widget,
         components: {
             render: DisplaySingleValue,
             wrapper: DefaultWrapper,
             element: DefaultElement,
-            input: DefaultInput,
         },
     };
 }
 
 export function formatTaxonomy<T extends string>(configuration: FieldConfiguration<T>) {
     return {
-        ...configuration,
-        accessor: configuration.name,
-        components: {
-            render: DisplayList,
-            wrapper: DefaultWrapper,
-            element: DefaultElement,
-            input: DefaultInput,
-        },
-    };
-}
-
-export function formatOrientedlinks<T extends string>(configuration: FieldConfiguration<T>) {
-    return {
-        ...configuration,
-        accessor: configuration.name,
-        components: {
-            render: DisplayList,
-            wrapper: DefaultWrapper,
-            element: DefaultElement,
-            input: LinkInput((configuration.widget as WidgetOrientedlinks).params.supportedTypes?.[0]),
-        },
-    };
-}
-
-export function formatUri<T extends string>(configuration: FieldConfiguration<T>) {
-    return {
-        ...configuration,
-        accessor: configuration.name,
-        components: {
-            render: DisplayList,
-            wrapper: DefaultWrapper,
-            element: DefaultElement,
-            input: LinkInput((configuration.widget as WidgetUri).params.type),
-        },
-    };
-}
-
-export function formatRadio<T extends string>(configuration: FieldConfiguration<T>) {
-    return {
-        ...configuration,
-        accessor: configuration.name,
-        components: {
-            render: DisplayList,
-            wrapper: DefaultWrapper,
-            element: DefaultElement,
-            input: RadioInput(
-                'radio',
-                Object.entries((configuration.widget as WidgetCheckbox).options).map(([k, v]) => ({
-                    label: v,
-                    value: k,
-                })),
-            ),
-        },
-    };
-}
-
-export function formatCheckbox<T extends string>(configuration: FieldConfiguration<T>) {
-    return {
-        ...configuration,
+        name: configuration.name,
+        label: configuration.label,
         accessor: configuration.name,
+        widget: configuration.widget,
         components: {
             render: DisplayList,
             wrapper: DefaultWrapper,
             element: DefaultElement,
-            input: RadioInput(
-                'checkbox',
-                Object.entries((configuration.widget as WidgetCheckbox).options).map(([k, v]) => ({
-                    label: v,
-                    value: k,
-                })),
-            ),
         },
     };
 }
 
 export function formatDefault<T extends string>(configuration: FieldConfiguration<T>) {
     return {
-        ...configuration,
+        name: configuration.name,
+        label: configuration.label,
         accessor: configuration.name,
+        widget: configuration.widget,
         components: {
             render: DisplaySingleValue,
             wrapper: DefaultWrapper,
             element: DefaultElement,
-            input: DefaultInput,
         },
     };
 }

package/src/displayer/types.ts

@@ -1,6 +1,3 @@
-import * as React from 'react';
-import { UseFormReset } from 'react-hook-form';
-
 export type JObject<T extends string> = Record<T, any> & {
     title: string;
     id: string;
@@ -14,7 +11,6 @@ export type Fields<T extends string> = ReadonlyArray<T>;
 export type WidgetText = { type: 'text' };
 export type WidgetNumber = { type: 'number' };
 export type WidgetDate = { type: 'date'; format: string };
-export type WidgetDatetime = { type: 'datetime' };
 export type WidgetSelect<U extends string = string> = {
     type: 'select';
     options: Record<U, string>;
@@ -23,73 +19,38 @@ export type WidgetSelect<U extends string = string> = {
 export type WidgetEmail = { type: 'email' };
 export type WidgetUrl = { type: 'url'; params: { target?: '_blank' } };
 export type WidgetRefUser = { type: 'refUser' };
-export type WidgetRadio = { type: 'radio'; options: Record<string, string> };
 export type WidgetCheckbox = { type: 'checkbox'; options: Record<string, string> };
 export type WidgetTaxonomy = { type: 'taxonomy'; params: { idTaxonomy: string } };
-export type WidgetOrientedlinks = {
-    type: 'orientedlinks';
-    params: {
-        'jcomplete-multiple': '0' | '1';
-        showAdd: '0' | '1';
-        supportedTypes: Array<string>;
-    };
-};
-export type WidgetUri = {
-    type: 'uri';
-    params: {
-        class: string;
-        'jcomplete-url': string;
-        type: string;
-    };
-};
 
 export type Widget =
     | WidgetText
     | WidgetNumber
     | WidgetDate
-    | WidgetDatetime
     | WidgetSelect
     | WidgetEmail
     | WidgetUrl
     | WidgetRefUser
-    | WidgetRadio
     | WidgetCheckbox
-    | WidgetOrientedlinks
-    | WidgetTaxonomy
-    | WidgetUri;
+    | WidgetTaxonomy;
 
 export type FieldConfiguration<T extends string> = {
     label: string;
-    description?: string;
     widget: Widget;
     name: T;
-    mandatory: boolean;
 };
 
 export type Configuration<T extends string> = FieldConfiguration<T>;
 
-export type DisplayInputComponentProps = {
-    control: any;
-    label: string;
-    description?: string;
-    name: string;
-    widget: Widget;
-    mandatory: boolean;
-};
-
 export type DisplayElementComponent = {
     render: React.FunctionComponent<RenderAttributeProps>;
     wrapper: React.FunctionComponent<any>;
     element: React.FunctionComponent<any>;
-    input: React.FunctionComponent<DisplayInputComponentProps>;
 };
 
 export type DisplayerElement = {
     name: string;
     label: string;
-    description?: string;
     accessor: string;
-    mandatory: boolean;
     widget: Widget;
     components: DisplayElementComponent;
 };
@@ -109,10 +70,6 @@ type DisplayAttributeComponentOverrideProps =
     | {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           element: React.FunctionComponent<any>;
-      }
-    | {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          input: React.FunctionComponent<any>;
       };
 
 export type DisplayAttributesProps = {
@@ -126,19 +83,4 @@ export type RenderAttributeProps = {
     attribute: DisplayerElement;
 };
 
-export type DisplayFormProps = {
-    object: any;
-    componentsOverride?: Record<string, DisplayAttributeComponentOverrideProps>;
-    attributesName: string[];
-    onSubmit: any;
-};
-
-export type DisplayFormRef = {
-    reset: UseFormReset<any>;
-};
-
-export type RenderInputProps = DisplayerElement & {
-    control: any;
-};
-
-export type Displayer = Array<DisplayerElement>;
+export type Displayer = Array<DisplayerElement | undefined>;