jamespot-react-core 1.1.1

package/src/redux/slice/Generic.actions.ts

@@ -0,0 +1,31 @@
+import { User, userActions } from './User.slice';
+import { Article, articleActions } from './Article.slice';
+
+const actions = {
+    user: userActions,
+    article: articleActions,
+};
+
+type Entries = 'user' | 'article';
+
+type Accumulator = {
+    [key in Entries]: (User | Article)[];
+};
+
+/**
+ * Add any data into corresponding entity stores
+ */
+export const genericActions = {
+    addMany: (data: (User | Article)[]) => async (dispatch: any) => {
+        const clusteredData = data.reduce((acc, d) => {
+            if (d.type in acc) acc[d.type].push(d);
+            else acc[d.type] = [d];
+            return acc;
+        }, {} as Accumulator);
+        Object.entries(clusteredData).forEach(([type, data]) => {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            dispatch(actions[type as Entries].addMany(data));
+        });
+    },
+};

package/src/redux/slice/Model.slice.ts

@@ -0,0 +1,28 @@
+import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';
+import { Model } from 'utils/types';
+import { RootState } from '../store';
+
+export const modelAdapter = createEntityAdapter<Model<string>>({
+    selectId: (model) => model.type,
+    sortComparer: (a, b) => a.label.localeCompare(b.label),
+});
+
+const modelsCloned = JSON.parse(JSON.stringify(J.models));
+
+const emptyInitialState = modelAdapter.getInitialState();
+
+const initialState = modelAdapter.upsertMany(emptyInitialState, modelsCloned);
+
+export const modelSlice = createSlice({
+    name: 'models',
+    initialState: initialState,
+    reducers: {
+        addOne: modelAdapter.addOne,
+        addMany: modelAdapter.addMany,
+        setAll: modelAdapter.setAll,
+    },
+});
+
+export const modelSelector = modelAdapter.getSelectors<RootState>((state) => state.entities.models);
+
+export const modelActions = modelSlice.actions;

package/src/redux/slice/Toast.slice.ts

@@ -0,0 +1,55 @@
+import { createEntityAdapter, createSlice, Dispatch } from '@reduxjs/toolkit';
+import { RootState } from '../store';
+import type { AlertType } from 'jamespot-react-components';
+
+export type Toast = {
+    id?: string;
+    label: string;
+    description?: string;
+};
+
+export type ToastEntity = {
+    id: string;
+    label: string;
+    description?: string;
+    timeout: number;
+    type: AlertType;
+};
+
+export const toastAdapter = createEntityAdapter<ToastEntity>({
+    selectId: (toast) => toast.id,
+});
+
+export const toastSlice = createSlice({
+    name: 'toasts',
+    initialState: toastAdapter.getInitialState(),
+    reducers: {
+        addOne: toastAdapter.addOne,
+        removeOne: toastAdapter.removeOne,
+    },
+});
+
+const randomId = () => Math.random().toString(16).slice(2);
+
+function addMessage({ id = randomId(), ...toast }: Toast, type = 'success' as AlertType, timeout = 3000) {
+    return (dispatch: Dispatch) => {
+        dispatch(addOne({ id, ...toast, timeout, type }));
+
+        setTimeout(() => {
+            dispatch(removeOne(id));
+        }, timeout);
+
+        return id;
+    };
+}
+
+export const toasts = {
+    addMessage,
+    success: (toast: Toast, timeout?: number) => addMessage(toast, 'success', timeout),
+    warning: (toast: Toast, timeout?: number) => addMessage(toast, 'warning', timeout),
+    error: (toast: Toast, timeout?: number) => addMessage(toast, 'error', timeout),
+};
+
+export const toastSelector = toastAdapter.getSelectors<RootState>((state) => state.toasts);
+
+export const { addOne, removeOne } = toastSlice.actions;

package/src/redux/slice/User.slice.ts

@@ -0,0 +1,27 @@
+import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';
+import { RootState } from '../store';
+
+export interface User {
+    uri: string;
+    title: string;
+    type: 'user';
+}
+
+export const userAdapter = createEntityAdapter<User>({
+    selectId: (user) => user.uri,
+    sortComparer: (a, b) => a.title.localeCompare(b.title),
+});
+
+export const userSlice = createSlice({
+    name: 'users',
+    initialState: userAdapter.getInitialState(),
+    reducers: {
+        addOne: userAdapter.addOne,
+        addMany: userAdapter.addMany,
+        setAll: userAdapter.setAll,
+    },
+});
+
+export const usersSelector = userAdapter.getSelectors<RootState>((state) => state.entities.users);
+
+export const userActions = userSlice.actions;

package/src/redux/store.tsx

@@ -0,0 +1,95 @@
+import { thunk, logger } from './middleware';
+import { reducer as formReducer } from 'redux-form';
+import { configureStore, combineReducers, Reducer } from '@reduxjs/toolkit';
+import { userSlice, userActions, usersSelector } from './slice/User.slice';
+import { articleActions, articleSlice, articlesSelector } from './slice/Article.slice';
+import { genericActions } from './slice/Generic.actions';
+import { applicationActions, applicationSelector, applicationSlice } from './slice/Application.slice';
+import { modelActions, modelSelector, modelSlice } from './slice/Model.slice';
+import { toastSlice } from './slice/Toast.slice';
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+
+export interface JInjectStore extends ReturnType<typeof createStore> {
+    asyncReducers: AsyncReducers;
+    add: (key: string, asyncReducer: Reducer) => void;
+    selectors: any;
+    actions: any;
+}
+
+export interface AsyncReducers {
+    [key: string]: Reducer;
+}
+
+// Define the Reducers that will always be present in the application
+const staticReducers = {
+    entities: combineReducers({
+        applications: applicationSlice.reducer,
+        models: modelSlice.reducer,
+        users: userSlice.reducer,
+        articles: articleSlice.reducer,
+    }),
+    form: formReducer,
+    toasts: toastSlice.reducer,
+};
+
+// Configure the store
+export function makeStore(initialState: any) {
+    const initialAsyncReducers = {};
+
+    const store = createStore(initialAsyncReducers, initialState);
+
+    const jStore: JInjectStore = {
+        ...store,
+        asyncReducers: initialAsyncReducers,
+        add: (key: string, asyncReducer: Reducer, relatedAppId?: string): void => {
+            let isRelatedAppActivate = false;
+            if (relatedAppId) {
+                const curState = jStore.getState();
+                isRelatedAppActivate = typeof curState?.entities?.applications?.entities[relatedAppId] !== 'undefined';
+            }
+            const mustBeAddToReducer = !relatedAppId ? true : isRelatedAppActivate;
+
+            if (!key || jStore.asyncReducers[key] || mustBeAddToReducer === false) {
+                return;
+            }
+            jStore.asyncReducers[key] = asyncReducer;
+            jStore.replaceReducer(createReducer(jStore.asyncReducers));
+        },
+        selectors: {
+            article: articlesSelector,
+            application: applicationSelector,
+            model: modelSelector,
+            user: usersSelector,
+        },
+        actions: {
+            article: articleActions,
+            application: applicationActions,
+            model: modelActions,
+            user: userActions,
+            generic: genericActions,
+        },
+    };
+
+    return jStore;
+}
+
+function createReducer(asyncReducers: AsyncReducers) {
+    return combineReducers({
+        ...staticReducers,
+        ...asyncReducers,
+    });
+}
+
+function createStore(initialAsyncReducers: {}, initialState: any) {
+    return configureStore({
+        reducer: createReducer(initialAsyncReducers),
+        preloadedState: initialState,
+        middleware: [thunk, logger],
+    });
+}
+
+export type AppDispatch = ReturnType<typeof createStore>['dispatch'];
+export type RootState = ReturnType<ReturnType<typeof createStore>['getState']>;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

package/src/utils/registry.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { JComponent } from './types';
+
+export interface RegistryComponents {
+    [key: string]: any;
+}
+
+export class ReactRegistry {
+    list: RegistryComponents = {};
+    listLazy: RegistryComponents = {};
+
+    public getComponent(name: string): any {
+        if (!this.list[name]) {
+            return;
+        }
+        return this.list[name];
+    }
+
+    public registerLazyComponent(name: string, promise: React.LazyExoticComponent<React.ComponentType<any>>) {
+        this.list[name] = promise;
+    }
+
+    // Register all components of a lib
+    // with webpack the libname must be specified explicitly
+    // import('jamespot-react-components') => ok
+    // const lib = 'jamespot-react-components'; import(lib); => KO
+    // Error : Critical dependency: the request of a dependency is an expression
+    // that's why we must use an importPromine here
+
+    public registerLib(componentList: JComponent[], importPromise: any) {
+        if (componentList && Array.isArray(componentList)) {
+            componentList.forEach((component: JComponent) => {
+                Registry.registerLazyComponent(
+                    component.name,
+                    React.lazy(() =>
+                        importPromise.then((module: any) => {
+                            return {
+                                default: module[component.module],
+                            };
+                        }),
+                    ),
+                );
+            });
+        }
+    }
+
+    public getLazyComponent<T>(name: string): React.LazyExoticComponent<React.ComponentType<T>> {
+        if (!this.list[name]) {
+            if (process.env.NODE_ENV !== 'production')
+                console.error(`/!\\ COMPONENT ${name} NOT EXPORTED IN THE CORE BUNDLE /!\\`.repeat(100));
+            return this.list['empty'];
+        }
+        return this.list[name];
+    }
+}
+
+const Registry = new ReactRegistry();
+
+export { Registry };

package/src/utils/socket.sharedworker.ts

@@ -0,0 +1,91 @@
+import {
+    SocketSharedWorker,
+    SocketOptions,
+    SocketError,
+    SocketEventData,
+    SharedWorkerEvent,
+    SharedWorkerEventData,
+} from './types';
+import io from 'socket.io-client';
+
+const worker: SharedWorker = self as any;
+
+/**
+ * SocketSharedWorker
+ */
+const socketSharedWorker: SocketSharedWorker = {
+    user: undefined,
+    ports: [],
+    call: (type, event, data) => {
+        socketSharedWorker.ports.forEach((port) => {
+            const e: SharedWorkerEventData = { type: type, event: event, data: data };
+            port.postMessage(e);
+        });
+    },
+};
+
+/**
+ * IO Socket
+ */
+const socketOptions: SocketOptions = {
+    path: '/socket.io4',
+    transports: ['websocket'],
+    upgrade: false,
+};
+
+const url = new URL(self.location.origin);
+const ioSocket = io('wss://' + url.host, socketOptions);
+
+ioSocket.io.on('error', (error: SocketError) => {
+    socketSharedWorker.call('socket', 'error', error.message);
+});
+ioSocket.io.on('reconnect_error', (error: SocketError) => {
+    socketSharedWorker.call('socket', 'reconnect_error', error.message);
+});
+ioSocket.io.on('reconnect_attempt', (attempt: number) => {
+    socketSharedWorker.call('socket', 'reconnect_attempt', attempt);
+});
+
+ioSocket.on('connect', () => {
+    socketSharedWorker.call('socket', 'connect');
+});
+
+ioSocket.on('disconnect', (reason: string) => {
+    socketSharedWorker.call('socket', 'disconnect', reason);
+});
+
+ioSocket.on('message', (m: SocketEventData) => {
+    socketSharedWorker.call('socket', 'message', m);
+});
+
+/**
+ * Worker listen
+ */
+worker.addEventListener('connect', (event: any) => {
+    const port = event.ports[0];
+    socketSharedWorker.ports.push(port);
+
+    port.onmessage = (event: SharedWorkerEvent) => {
+        const data = event.data;
+
+        switch (data.type) {
+            case 'ping':
+                port.postMessage('pong');
+                break;
+
+            case 'connection':
+                if (socketSharedWorker.user !== null && socketSharedWorker.user?.idUser !== data.data.idUser) {
+                    ioSocket.disconnect();
+                    ioSocket.connect();
+                }
+                if (socketSharedWorker.user === null || socketSharedWorker.user?.idUser !== data.data.idUser) {
+                    socketSharedWorker.user = data.data;
+                }
+                break;
+        }
+    };
+
+    port.start();
+});
+
+export default null as any;

package/src/utils/socket.ts

@@ -0,0 +1,98 @@
+import { ReactSocket, ReactSocketEvents, SocketEventData, SharedWorkerEvent, SocketError } from './types';
+import SocketSharedWorker from './socket.sharedworker.ts';
+import io from 'socket.io-client';
+
+type SocketOptions = { path: string; transports?: string[]; upgrade?: boolean };
+
+class Socket implements ReactSocket {
+    io: any = null;
+    supportSharedWorker?: Boolean;
+    events: ReactSocketEvents = {};
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    constructor() {}
+    init = (idUser: number) => {
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-this-alias
+            const self = this;
+            this.supportSharedWorker = typeof SharedWorker !== 'undefined';
+            if (!this.supportSharedWorker) {
+                const socketOptions: SocketOptions = {
+                    path: '/socket.io4',
+                    transports: ['websocket'],
+                    upgrade: false,
+                };
+                this.io = io('//' + window.location.host, socketOptions);
+
+                this.io.io.on('error', (error: SocketError) => {
+                    self.callEvent('error', error.message);
+                });
+                this.io.io.on('reconnect_error', (error: SocketError) => {
+                    self.callEvent('reconnect_error', error.message);
+                });
+                this.io.io.on('reconnect_attempt', (attempt: number) => {
+                    self.callEvent('reconnect_attempt', attempt);
+                });
+
+                this.io.on('connect', () => {
+                    self.callEvent('connect', null);
+                });
+                this.io.on('disconnect', (reason: string) => {
+                    self.callEvent('disconnect', reason);
+                });
+                this.io.on('message', (m: SocketEventData) => {
+                    self.callEvent('message', m);
+                });
+            } else {
+                const worker: any = new SocketSharedWorker();
+                worker.port.addEventListener(
+                    'message',
+                    function (event: SharedWorkerEvent) {
+                        const data = event.data;
+                        switch (data.type) {
+                            case 'socket':
+                                self.callEvent(data.event || '', data.data);
+                                break;
+                        }
+                    },
+                    false,
+                );
+                worker.port.start();
+                worker.port.postMessage({
+                    type: 'connection',
+                    data: { idUser: idUser },
+                });
+            }
+        } catch (ex) {
+            console.error('Socket.ts error : ', ex);
+        }
+    };
+    on = (type: string, callback: () => void) => {
+        if (!this.events[type]) {
+            this.events[type] = [];
+        }
+        this.events[type].push(callback);
+    };
+    off = (type: string, callback: () => void) => {
+        if (this.events[type]) {
+            for (let i = this.events[type].length - 1; i >= 0; i--) {
+                if (this.events[type][i] === callback) {
+                    this.events[type].splice(i, 1);
+                }
+            }
+        }
+    };
+    removeListener = (type: string, callback: () => void) => {
+        this.off(type, callback);
+    };
+    callEvent = (type: string, data: any) => {
+        if (socket.events[type]) {
+            socket.events[type].forEach((callback) => {
+                callback(data);
+            });
+        }
+    };
+}
+
+const socket = new Socket();
+
+export default socket;

package/src/utils/translation.tsx

@@ -0,0 +1,36 @@
+export type SupportedLanguages = 'fl' | 'nl' | 'en' | 'fr' | 'de' | 'it' | 'pl' | 'pt' | 'ro' | 'es' | 'tr';
+
+export type TranslationKeys = { [key: string]: string };
+
+export type LangJsonFile = {
+    [key in SupportedLanguages]?: TranslationKeys;
+};
+
+export class ReactTranslation {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    resources: LangJsonFile;
+
+    public get(lang: SupportedLanguages) {
+        return {
+            ...this.resources['en'],
+            ...this.resources[lang],
+        };
+    }
+
+    public initResources(resources: LangJsonFile) {
+        this.resources = resources;
+    }
+
+    public addResources(lang: LangJsonFile) {
+        Object.entries(lang).forEach(([lang, translationKeys]) => {
+            this.resources[lang as SupportedLanguages] = {
+                ...this.resources[lang as SupportedLanguages],
+                ...translationKeys,
+            };
+        });
+    }
+}
+
+const Translation = new ReactTranslation();
+export { Translation };

package/src/utils/types.ts

@@ -0,0 +1,176 @@
+import * as React from 'react';
+import { ReactRegistry } from './registry';
+import { ReactTranslation, SupportedLanguages, TranslationKeys } from './translation';
+export { Configuration, DisplayAttributesProps } from '../displayer/types';
+export * from '../components/types';
+import { useDisplay } from '../displayer/useDisplay';
+import { Configuration } from '../displayer/types';
+import { toasts } from '../redux/slice/Toast.slice';
+
+export 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;
+    actions: object;
+    registry: ReactRegistry;
+    locale?: SupportedLanguages;
+    translation?: ReactTranslation;
+    theme: any;
+    socket?: ReactSocket;
+    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;
+    transitionTo: (
+        stateName: string,
+        args: {},
+        options?: {
+            reload: boolean;
+            notify?: boolean;
+            callback?: () => void;
+            event?: React.MouseEvent<HTMLElement>;
+        },
+    ) => void;
+    changeWindowLocation: (targetUrl: string, event: React.MouseEvent<HTMLElement>, enableWindowOpen: boolean) => void;
+    useDisplay: typeof useDisplay;
+}
+
+export interface ReactExtensions {
+    [key: string]: any;
+}
+
+export interface ReactExtension {
+    initExtension: (args?: any) => void;
+}
+
+export interface ReactExtensionContainer {
+    default: ReactExtension;
+}
+
+export interface ReactSocket {
+    io: any;
+    supportSharedWorker?: Boolean;
+    events: ReactSocketEvents;
+    init: (idUser: number) => void;
+    on: (type: string, callback: () => void) => void;
+    off: (type: string, callback: () => void) => void;
+    removeListener: (type: string, callback: () => void) => void;
+    callEvent: (type: string, data: any) => void;
+}
+
+export type SocketSharedWorker = {
+    user?: { idUser: number };
+    ports: any[];
+    call: (type: string, event: string, data?: any) => void;
+};
+
+export type SocketOptions = {
+    path: string;
+    transports?: string[];
+    upgrade?: boolean;
+};
+
+export type SocketError = { message: string };
+
+export type ReactSocketEvents = {
+    [key: string]: { (data: SocketEventData): void }[];
+};
+
+export interface SocketEventData {
+    function: string;
+    namespace: string;
+    [key: string]: any;
+}
+
+export interface SharedWorkerEvent {
+    data: SharedWorkerEventData;
+}
+export interface SharedWorkerEventData {
+    type: string;
+    event?: string;
+    data: any;
+}
+
+export interface JComponent {
+    name: string;
+    module: string;
+}
+
+export interface WindowJ {
+    react: ReactCore;
+    revision: string;
+    ng: any;
+    locale: SupportedLanguages;
+    resources: TranslationKeys;
+    jUserLogged: JUser;
+    jamespotReactComponentList: [JComponent];
+    jamespotReactTheme: any;
+    applications: Application[];
+    models: Model<string>[];
+}
+
+export interface Application {
+    name: string;
+    label: string;
+    icon: string;
+    img: string;
+    url: string;
+    description: string;
+    color?: string;
+    sref?: string;
+    type?: string;
+}
+
+export interface Model<T extends string> {
+    type: string;
+    mainType: string;
+    label: string;
+    fields: Record<T, Configuration<T>>;
+    icon: string;
+    color: string;
+}
+
+export interface JObject {
+    id: number;
+    type: string;
+    mainType: string;
+    _cssColor: string;
+    _cssClass: string;
+    uri: string;
+}
+
+export interface JUser extends JObject {
+    title: string;
+    firstname: string;
+    lastname: string;
+    mail: string;
+    _url: string;
+    dateModified: string;
+}
+
+export type IsAppActivateProps = {
+    dependency: string;
+    children: JSX.Element;
+};
+
+export type ReactExtensionProps = {
+    extensionName: string;
+    route?: string;
+    idAnchor?: string;
+    reducerName?: string;
+    gabarit?: gabarit;
+    apiDependency?: string;
+};
+
+export { RootState } from '../redux/store';