jamespot-react-core 1.1.1

package/src/App.tsx

@@ -0,0 +1,190 @@
+import { Theme, Resources } from 'jamespot-react-components';
+import { makeStore } from './redux/store';
+import { ActionCreators } from './redux/actions/actions';
+import {
+    ReactCore,
+    ReactExtension,
+    ReactExtensions,
+    ReactExtensionContainer,
+    WindowJ,
+    ReactSocket,
+    gabarit,
+} from './utils/types';
+import { Registry, ReactRegistry } from './utils/registry';
+import './components';
+import { Translation, ReactTranslation, SupportedLanguages } from './utils/translation';
+import socket from './utils/socket';
+
+import jComponentList from '../ext-component-list.json';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { useDisplay } from './displayer/useDisplay';
+import { Toaster } from './enhencers/toast/Toaster';
+import { ExtensionProvider } from './components/ExtensionProvider.component';
+import { toasts } from './redux/slice/Toast.slice';
+
+declare global {
+    const J: WindowJ;
+}
+
+const store = makeStore({});
+
+class App implements ReactCore {
+    extensions: ReactExtensions = {};
+    store: any;
+    actions: object;
+    registry: ReactRegistry;
+    useDisplay: typeof useDisplay;
+    locale?: SupportedLanguages;
+    translation?: ReactTranslation;
+    theme: any;
+    socket?: ReactSocket;
+    toasts: typeof toasts;
+
+    constructor(store: any, ActionCreators: object, registry: ReactRegistry) {
+        this.store = store;
+        this.actions = ActionCreators;
+        this.registry = registry;
+        this.useDisplay = useDisplay;
+        this.toasts = toasts;
+    }
+
+    public require = (extensionName: string, args: any) => {
+        if (this.extensions[extensionName]) {
+            // eslint-disable-next-line @typescript-eslint/no-this-alias
+            const self = this;
+            const loadModule = () => {
+                return new Promise((resolve) => {
+                    self.extensions[extensionName]().then((module: ReactExtensionContainer) => {
+                        const m: ReactExtension = module.default;
+                        resolve(m);
+                    });
+                });
+            };
+
+            Promise.all([loadModule()]).then((results: any[]) => {
+                const m: ReactExtension = results[0];
+                if (m.initExtension) {
+                    m.initExtension(args);
+                }
+            });
+        }
+    };
+
+    public extensionAdd(extensionName: string, load: () => void) {
+        this.extensions[extensionName] = load;
+    }
+
+    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(gabarit, gabaritOptions);
+                },
+            ],
+        });
+        J.ng.addState(extensionName + '.app', {
+            template: '',
+            url: '/r/' + route,
+            controller: [
+                '$scope',
+                '$rootScope',
+                '$timeout',
+                function ($scope: any, $rootScope: any, $timeout: any) {
+                    $scope.appId = idDiv;
+                    $timeout(function () {
+                        J.react.require(extensionName);
+                    });
+
+                    const stateChangeStart = $rootScope.$on('$stateChangeStart', function () {
+                        const el = document.getElementById(idDiv);
+                        if (el) {
+                            ReactDOM.unmountComponentAtNode(el);
+                        }
+                    });
+                    $scope.$on('$destroy', function () {
+                        stateChangeStart();
+                    });
+                },
+            ],
+        });
+    }
+
+    public transitionTo(
+        stateName: string,
+        args: {},
+        options: {
+            reload: boolean;
+            notify?: boolean;
+            callback?: () => void;
+            event?: React.MouseEvent<HTMLElement>;
+        } = { reload: false, notify: false },
+    ) {
+        const { reload, notify, callback, event } = options;
+        J.ng.transitionTo(stateName + '.app', args, {
+            reload,
+            notify,
+            ...(callback && { callback: callback }),
+            ...(event && (event.ctrlKey || event.metaKey) && { event: event }),
+        });
+    }
+
+    public changeWindowLocation(targetUrl: string, event: React.MouseEvent<HTMLElement>, enableWindowOpen = false) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (enableWindowOpen || event.ctrlKey || event.metaKey) {
+            window.open(targetUrl, '_blank')?.focus();
+        } else {
+            window.location.href = targetUrl;
+        }
+    }
+}
+
+if (jComponentList && Array.isArray(jComponentList)) {
+    Registry.registerLib(jComponentList, import('jamespot-react-components'));
+}
+
+Registry.registerLib(
+    [
+        {
+            name: 'DisplayAttributes',
+            module: 'DisplayAttributes',
+        },
+    ],
+    import('./displayer/DisplayAttribute.component'),
+);
+
+const AppDefault = new App(store, ActionCreators, Registry);
+
+AppDefault.locale = J.locale;
+Theme.initTheme(J.jamespotReactTheme);
+AppDefault.theme = Theme.get();
+
+AppDefault.translation = Translation;
+AppDefault.translation?.initResources(Resources);
+AppDefault.translation?.addResources({ [J.locale]: J.resources });
+
+AppDefault.socket = socket;
+if (J.jUserLogged) {
+    socket.init(J.jUserLogged.id);
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    const el = document.getElementById('react-toasts');
+    if (el) {
+        ReactDOM.render(
+            <ExtensionProvider>
+                <Toaster />
+            </ExtensionProvider>,
+            el,
+        );
+    }
+});
+
+export default AppDefault;

package/src/components/ExtensionProvider.component.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IntlProvider } from 'react-intl';
+import { Provider } from 'react-redux';
+import { JRCThemeProvider } from 'jamespot-react-components';
+
+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) : {};
+    return (
+        <Provider store={store}>
+            <IntlProvider locale={locale} messages={messages}>
+                <JRCThemeProvider>{props.children}</JRCThemeProvider>
+            </IntlProvider>
+        </Provider>
+    );
+};

package/src/components/IfAppIsActivated.component.tsx

@@ -0,0 +1,15 @@
+import { useSelector } from 'react-redux';
+
+export type IfAppIsActivatedProps = {
+    dependency: string;
+    children: JSX.Element;
+};
+
+export const IfAppIsActivated = (props: IfAppIsActivatedProps) => {
+    const { isDependencyActivated } = useSelector((state: any) => {
+        return {
+            isDependencyActivated: J.react.store.selectors.application.selectById(state, props.dependency),
+        };
+    });
+    return isDependencyActivated ? props.children : null;
+};

package/src/components/index.tsx

@@ -0,0 +1,21 @@
+import { Registry } from '../utils/registry';
+
+Registry.registerLib(
+    [
+        {
+            name: 'ExtensionProvider',
+            module: 'ExtensionProvider',
+        },
+    ],
+    import('./ExtensionProvider.component'),
+);
+
+Registry.registerLib(
+    [
+        {
+            name: 'IfAppIsActivated',
+            module: 'IfAppIsActivated',
+        },
+    ],
+    import('./IfAppIsActivated.component'),
+);

package/src/components/types.ts

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

package/src/displayer/DisplayAttribute.component.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { FunctionComponent } from 'react';
+import { DisplayAttributesProps, RenderAttributeProps } from './types';
+
+/***
+ * Choose the component to render according to the type of the object
+ */
+const RenderAttribute = (props: RenderAttributeProps) => {
+    const { attribute } = props;
+    const RenderComponent: FunctionComponent<RenderAttributeProps> = attribute.components.render;
+    const WrapperComponent: React.FunctionComponent<any> = attribute.components.wrapper;
+
+    return (
+        <WrapperComponent>
+            <RenderComponent {...props} />
+        </WrapperComponent>
+    );
+};
+
+/****
+ * 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
+ *  Note :If we override the "render" you can't override "wrapper" and "element" because the render rewrite everything
+ */
+export const DisplayAttributes = (props: DisplayAttributesProps) => {
+    const { attributesName, object, componentsOverride } = props;
+    const config = J.react.useDisplay(attributesName || [], object.type);
+
+    return config.map((attributeProps) => {
+        if (!attributeProps) return;
+        attributeProps.components = {
+            ...attributeProps.components,
+            ...(componentsOverride && componentsOverride[attributeProps.name]),
+        };
+        return <RenderAttribute attribute={attributeProps} object={object} />;
+    });
+};

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

@@ -0,0 +1,22 @@
+import { RenderAttributeProps } from 'displayer/types';
+import * as React from 'react';
+
+export const DisplayList = (props: RenderAttributeProps) => {
+    const { object, attribute } = props;
+    const list = object[attribute.accessor];
+
+    if (!attribute || !Array.isArray(list) || list.length === 0) return null;
+
+    const ElementComponent: React.FunctionComponent<any> = attribute.components.element;
+    return (
+        <>
+            {list.map((element: any, index: number) => {
+                <ElementComponent key={index}>
+                    {element.title}
+                    {list.length > 1 && index !== list.length && ', '}
+                    {list.length > 1 && index === list.length && '...'}
+                </ElementComponent>;
+            })}
+        </>
+    );
+};

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

@@ -0,0 +1,10 @@
+import { RenderAttributeProps } from 'displayer/types';
+import * as React from 'react';
+
+export const DisplaySingleValue = (props: RenderAttributeProps) => {
+    const { object, attribute } = props;
+    if (!attribute || !object[attribute.accessor]) return null;
+    const ElementComponent: React.FunctionComponent<any> = attribute.components.element;
+
+    return <ElementComponent>{object[attribute.accessor]}</ElementComponent>;
+};

package/src/displayer/list/formatter.tsx

@@ -0,0 +1,63 @@
+import { DisplayList } from 'displayer/components/DisplayList.component';
+import { DisplaySingleValue } from 'displayer/components/DisplaySingleValue.component';
+import * as React from 'react';
+import { FieldConfiguration } from '../types';
+
+const DefaultWrapper = ({ children }: { children: React.FunctionComponent<any> }) => <div>{children}</div>;
+const DefaultElement = ({ children }: { children: React.FunctionComponent<any> }) => <>{children}</>;
+
+export function formatString<T extends string>(configuration: FieldConfiguration<T>) {
+    return {
+        name: configuration.name,
+        label: configuration.label,
+        accessor: configuration.name,
+        widget: configuration.widget,
+        components: {
+            render: DisplaySingleValue,
+            wrapper: DefaultWrapper,
+            element: DefaultElement,
+        },
+    };
+}
+
+export function formatNumber<T extends string>(configuration: FieldConfiguration<T>) {
+    return {
+        name: configuration.name,
+        label: configuration.label,
+        accessor: configuration.name,
+        widget: configuration.widget,
+        components: {
+            render: DisplaySingleValue,
+            wrapper: DefaultWrapper,
+            element: DefaultElement,
+        },
+    };
+}
+
+export function formatTaxonomy<T extends string>(configuration: FieldConfiguration<T>) {
+    return {
+        name: configuration.name,
+        label: configuration.label,
+        accessor: configuration.name,
+        widget: configuration.widget,
+        components: {
+            render: DisplayList,
+            wrapper: DefaultWrapper,
+            element: DefaultElement,
+        },
+    };
+}
+
+export function formatDefault<T extends string>(configuration: FieldConfiguration<T>) {
+    return {
+        name: configuration.name,
+        label: configuration.label,
+        accessor: configuration.name,
+        widget: configuration.widget,
+        components: {
+            render: DisplaySingleValue,
+            wrapper: DefaultWrapper,
+            element: DefaultElement,
+        },
+    };
+}

package/src/displayer/types.ts

@@ -0,0 +1,86 @@
+export type JObject<T extends string> = Record<T, any> & {
+    title: string;
+    id: string;
+    type: string;
+
+    /* all object types goes here */
+};
+
+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 WidgetSelect<U extends string = string> = {
+    type: 'select';
+    options: Record<U, string>;
+    params?: { data?: string; defaultValue?: U; explain?: 1 };
+};
+export type WidgetEmail = { type: 'email' };
+export type WidgetUrl = { type: 'url'; params: { target?: '_blank' } };
+export type WidgetRefUser = { type: 'refUser' };
+export type WidgetCheckbox = { type: 'checkbox'; options: Record<string, string> };
+export type WidgetTaxonomy = { type: 'taxonomy'; params: { idTaxonomy: string } };
+
+export type Widget =
+    | WidgetText
+    | WidgetNumber
+    | WidgetDate
+    | WidgetSelect
+    | WidgetEmail
+    | WidgetUrl
+    | WidgetRefUser
+    | WidgetCheckbox
+    | WidgetTaxonomy;
+
+export type FieldConfiguration<T extends string> = {
+    label: string;
+    widget: Widget;
+    name: T;
+};
+
+export type Configuration<T extends string> = FieldConfiguration<T>;
+
+export type DisplayElementComponent = {
+    render: React.FunctionComponent<RenderAttributeProps>;
+    wrapper: React.FunctionComponent<any>;
+    element: React.FunctionComponent<any>;
+};
+
+export type DisplayerElement = {
+    name: string;
+    label: string;
+    accessor: string;
+    widget: Widget;
+    components: DisplayElementComponent;
+};
+
+type DisplayAttributeComponentOverrideProps =
+    | { render: React.FunctionComponent<RenderAttributeProps> }
+    | {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          wrapper: React.FunctionComponent<any>;
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          element: React.FunctionComponent<any>;
+      }
+    | {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          wrapper: React.FunctionComponent<any>;
+      }
+    | {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          element: React.FunctionComponent<any>;
+      };
+
+export type DisplayAttributesProps = {
+    object: any;
+    componentsOverride?: Record<string, DisplayAttributeComponentOverrideProps>;
+    attributesName: string[];
+};
+
+export type RenderAttributeProps = {
+    object: any;
+    attribute: DisplayerElement;
+};
+
+export type Displayer = Array<DisplayerElement | undefined>;

package/src/displayer/useDisplay.ts

@@ -0,0 +1,32 @@
+import * as ListFormatter from './list/formatter';
+import { Fields, Displayer } from './types';
+import { useSelector } from 'react-redux';
+import { Model } from '../utils/types';
+
+/**
+ *
+ * @param fields - fields that we want to display (firstname, name, age...)
+ * @param type - model type (user, article, spot...)
+ */
+export function useDisplay<T extends string>(fields: Fields<T>, type: string): Displayer {
+    const model: Model<string> = useSelector((state: any) => J.react.store.selectors.model.selectById(state, type));
+
+    if (!model || !model.fields) return [];
+
+    const configuration = Object.values(model.fields);
+    return fields.map((field) => {
+        const fieldConfiguration = configuration.find((conf) => conf.name === field);
+        if (!fieldConfiguration) return;
+
+        switch (fieldConfiguration.widget.type) {
+            case 'text':
+                return ListFormatter.formatString(fieldConfiguration);
+            case 'number':
+                return ListFormatter.formatNumber(fieldConfiguration);
+            case 'taxonomy':
+                return ListFormatter.formatTaxonomy(fieldConfiguration);
+            default:
+                return ListFormatter.formatDefault(fieldConfiguration);
+        }
+    });
+}

package/src/enhencers/toast/Toaster.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { toastSelector } from '../../redux/slice/Toast.slice';
+import styled from 'styled-components';
+import { JRCAlert } from 'jamespot-react-components';
+
+const ToastContainer = styled.div`
+    position: absolute;
+    z-index: 6;
+    top: calc(var(--header-height, 91px) + 10px);
+    right: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    overflow: hidden;
+`;
+
+export const Toaster = () => {
+    const toasts = useSelector(toastSelector.selectAll);
+
+    return (
+        <ToastContainer>
+            {toasts.map((toast) => {
+                return (
+                    <JRCAlert
+                        key={toast.id}
+                        label={toast.label}
+                        description={toast.description}
+                        type={toast.type}
+                        timeout={toast.timeout}
+                        hasLoader={true}
+                    />
+                );
+            })}
+        </ToastContainer>
+    );
+};

package/src/redux/actions/Articles.actions.tsx

@@ -0,0 +1,8 @@
+import { ARTICLE_ADD } from './Articles.types';
+
+export function articleAdd(article: string) {
+    return {
+        type: ARTICLE_ADD,
+        article: article,
+    };
+}

package/src/redux/actions/Articles.types.tsx

@@ -0,0 +1 @@
+export const ARTICLE_ADD = 'ARTICLE_ADD';

package/src/redux/actions/Users.actions.tsx

@@ -0,0 +1,8 @@
+import { USER_ADD } from './Users.types';
+
+export function userAdd(user: string) {
+    return {
+        type: USER_ADD,
+        user, // action payload
+    };
+}

package/src/redux/actions/Users.types.tsx

@@ -0,0 +1 @@
+export const USER_ADD = 'USER_ADD';

package/src/redux/actions/actions.tsx

@@ -0,0 +1,4 @@
+import * as UserActions from './Users.actions';
+import * as ArticleActions from './Articles.actions';
+
+export const ActionCreators: object = Object.assign({}, UserActions, ArticleActions);

package/src/redux/middleware/index.tsx

@@ -0,0 +1,2 @@
+export * from './logger';
+export { default as thunk } from 'redux-thunk';

package/src/redux/middleware/logger.tsx

@@ -0,0 +1,10 @@
+import { Middleware } from 'redux';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const logger: Middleware = (store) => (next) => (action) => {
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.log(action);
+    }
+    return next(action);
+};

package/src/redux/slice/Application.slice.ts

@@ -0,0 +1,28 @@
+import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';
+import { Application } from 'utils/types';
+import { RootState } from '../store';
+
+export const applicationAdapter = createEntityAdapter<Application>({
+    selectId: (app) => app.name,
+    sortComparer: (a, b) => a.label.localeCompare(b.label),
+});
+
+const applicationsCloned = JSON.parse(JSON.stringify(J.applications));
+
+const emptyInitialState = applicationAdapter.getInitialState();
+
+const initialState = applicationAdapter.upsertMany(emptyInitialState, applicationsCloned);
+
+export const applicationSlice = createSlice({
+    name: 'applications',
+    initialState: initialState,
+    reducers: {
+        addOne: applicationAdapter.addOne,
+        addMany: applicationAdapter.addMany,
+        setAll: applicationAdapter.setAll,
+    },
+});
+
+export const applicationSelector = applicationAdapter.getSelectors<RootState>((state) => state.entities.applications);
+
+export const applicationActions = applicationSlice.actions;

package/src/redux/slice/Article.slice.ts

@@ -0,0 +1,27 @@
+import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';
+import { RootState } from '../store';
+
+export interface Article {
+    uri: string;
+    title: string;
+    type: 'article';
+}
+
+export const articleAdapter = createEntityAdapter<Article>({
+    selectId: (article) => article.uri,
+    sortComparer: (a, b) => a.title.localeCompare(b.title),
+});
+
+export const articleSlice = createSlice({
+    name: 'articles',
+    initialState: articleAdapter.getInitialState(),
+    reducers: {
+        addOne: articleAdapter.addOne,
+        addMany: articleAdapter.addMany,
+        setAll: articleAdapter.setAll,
+    },
+});
+
+export const articlesSelector = articleAdapter.getSelectors<RootState>((state) => state.entities.articles);
+
+export const articleActions = articleSlice.actions;