jamespot-react-core 1.1.12 → 1.1.13

package/src/components/AppStateLoader.component.tsx

@@ -0,0 +1,54 @@
+import { JRCCardProps, JRCLoaderProps } from 'jamespot-react-components';
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useSelector } from 'react-redux';
+import { appStateActions } from 'redux/slice/AppState.slice';
+
+const appStateAction = J.react.store.actions.appState;
+const Loader = J.react.registry.getLazyComponent<JRCLoaderProps>('Loader');
+const Card = J.react.registry.getLazyComponent<JRCCardProps>('Card');
+
+export type AppStateLoaderProps = {
+    appId: string;
+    children: JSX.Element;
+    loader?: JSX.Element;
+    initPromises: Promise<any>[];
+};
+
+export const AppStateLoader = (props: AppStateLoaderProps) => {
+    const dispatch = J.react.store.useAppDispatch();
+    const intl = useIntl();
+
+    const { appState } = useSelector((state: any) => {
+        return {
+            appState: J.react.store.selectors.appState(state, props.appId),
+        };
+    });
+
+    // Init Function
+    React.useEffect(() => {
+        if (props.initPromises) {
+            dispatch(appStateActions.setLoading(props.appId));
+            Promise.all(props.initPromises)
+                .then(() => dispatch(appStateAction.setLoaded(props.appId)))
+                .catch(() => {
+                    dispatch(
+                        appStateAction.setError({
+                            app: props.appId,
+                            error: { message: 'Error' },
+                        }),
+                    );
+                    dispatch(J.react.toasts.error({ label: intl.formatMessage({ id: 'GLOBAL_Error_occurred' }) }));
+                });
+        }
+    }, []);
+    if (appState && appState.error) {
+        return (
+            <Card variant="div" type="error">
+                <FormattedMessage id="GLOBAL_Error_occurred" />
+            </Card>
+        );
+    }
+
+    return <>{appState && appState.isLoading ? <Loader variant="skeleton" /> : <>{props.children}</>}</>;
+};

package/src/components/index.tsx

@@ -19,3 +19,13 @@ Registry.registerLib(
     ],
     import('./IfAppIsActivated.component'),
 );
+
+Registry.registerLib(
+    [
+        {
+            name: 'AppStateLoader',
+            module: 'AppStateLoader',
+        },
+    ],
+    import('./AppStateLoader.component'),
+);

package/src/components/types.ts

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

package/src/displayer/DisplayAttribute.component.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FunctionComponent } from 'react';
 import { DisplayAttributesProps, RenderAttributeProps } from './types';
 
 /***
@@ -7,7 +6,7 @@ import { DisplayAttributesProps, RenderAttributeProps } from './types';
  */
 const RenderAttribute = (props: RenderAttributeProps) => {
     const { attribute } = props;
-    const RenderComponent: FunctionComponent<RenderAttributeProps> = attribute.components.render;
+    const RenderComponent: React.FunctionComponent<RenderAttributeProps> = attribute.components.render;
     const WrapperComponent: React.FunctionComponent<any> = attribute.components.wrapper;
 
     return (

package/src/displayer/DisplayForm.component.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { DisplayFormProps, DisplayFormRef, RenderInputProps } from './types';
+import { useForm } from 'react-hook-form';
+import type { JRCButtonProps } from 'jamespot-react-components';
+import { useIntl } from 'react-intl';
+
+/***
+ * Choose the component to render according to the type of the object
+ */
+const RenderInput = (props: RenderInputProps) => <props.components.input {...props} />;
+
+/****
+ * 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 const DisplayForm = React.forwardRef<DisplayFormRef, DisplayFormProps>((props, ref) => {
+    const intl = useIntl();
+
+    const formRef = React.useRef<HTMLFormElement>(null);
+
+    const { attributesName, object, componentsOverride } = props;
+    const formConfig = J.react.useDisplay(attributesName || [], object.type);
+    const ValidationButton = J.react.registry.getLazyComponent<JRCButtonProps>('ValidationButton');
+
+    const { handleSubmit, control, reset } = useForm({
+        defaultValues: {
+            // initialize with empty array of checkbox, empty string otherwise
+            ...(Object as any).fromEntries(
+                formConfig.map((inputConfig) => [
+                    inputConfig.accessor,
+                    inputConfig.widget.type === 'checkbox' ? [] : '',
+                ]),
+            ),
+        },
+        criteriaMode: 'all',
+    });
+
+    React.useImperativeHandle(
+        ref,
+        () => ({
+            reset: () => {
+                // in case the form is scrollable
+                formRef?.current?.scrollTo(0, 0);
+                // reset react-hook-form form
+                reset();
+            },
+        }),
+        [],
+    );
+
+    return (
+        <form onSubmit={handleSubmit(props.onSubmit)} ref={formRef}>
+            {formConfig.map((inputConfig, index) => {
+                inputConfig.components = {
+                    ...inputConfig.components,
+                    ...componentsOverride?.[inputConfig.name],
+                };
+                return <RenderInput key={index} control={control} {...inputConfig} />;
+            })}
+
+            <ValidationButton type="submit">
+                {intl.formatMessage({ id: 'APP_ASEI_Modal_Creation_Title' })}
+            </ValidationButton>
+        </form>
+    );
+});

package/src/displayer/Empty.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+
+// FIXME move to j-react-components + display error if dev mode
+export const Empty = () => <></>;

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

@@ -1,5 +1,6 @@
 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;
@@ -8,3 +9,8 @@ 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,63 +1,231 @@
 import { DisplayList } from 'displayer/components/DisplayList.component';
-import { DisplaySingleValue } from 'displayer/components/DisplaySingleValue.component';
+import { DisplayDate, DisplaySingleValue } from 'displayer/components/DisplaySingleValue.component';
 import * as React from 'react';
-import { FieldConfiguration } from '../types';
+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';
 
 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 {
-        name: configuration.name,
-        label: configuration.label,
+        ...configuration,
         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 {
-        name: configuration.name,
-        label: configuration.label,
+        ...configuration,
         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 {
-        name: configuration.name,
-        label: configuration.label,
+        ...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,
         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 {
-        name: configuration.name,
-        label: configuration.label,
+        ...configuration,
         accessor: configuration.name,
-        widget: configuration.widget,
         components: {
             render: DisplaySingleValue,
             wrapper: DefaultWrapper,
             element: DefaultElement,
+            input: DefaultInput,
         },
     };
 }

package/src/displayer/types.ts

@@ -1,3 +1,6 @@
+import * as React from 'react';
+import { UseFormReset } from 'react-hook-form';
+
 export type JObject<T extends string> = Record<T, any> & {
     title: string;
     id: string;
@@ -11,6 +14,7 @@ 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>;
@@ -19,38 +23,73 @@ 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
-    | WidgetTaxonomy;
+    | WidgetOrientedlinks
+    | WidgetTaxonomy
+    | WidgetUri;
 
 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;
 };
@@ -70,6 +109,10 @@ 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 = {
@@ -83,4 +126,19 @@ export type RenderAttributeProps = {
     attribute: DisplayerElement;
 };
 
-export type Displayer = Array<DisplayerElement | undefined>;
+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>;

package/src/displayer/useDisplay.ts

@@ -1,5 +1,5 @@
 import * as ListFormatter from './list/formatter';
-import { Fields, Displayer } from './types';
+import { Fields, Displayer, Configuration } from './types';
 import { useSelector } from 'react-redux';
 import { Model } from '../utils/types';
 
@@ -14,19 +14,36 @@ export function useDisplay<T extends string>(fields: Fields<T>, type: string): D
     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);
-        }
-    });
+    return (
+        fields
+            .map((field) => {
+                return configuration.find((conf) => conf.name === field);
+            })
+            .filter((fieldConfiguration) => !!fieldConfiguration) as Array<Configuration<T>>
+    )
+        .map((fieldConfiguration) => {
+            switch (fieldConfiguration.widget.type) {
+                case 'date':
+                case 'datetime':
+                    return ListFormatter.formatDate(fieldConfiguration);
+                case 'text':
+                    return ListFormatter.formatString(fieldConfiguration);
+                case 'number':
+                    return ListFormatter.formatNumber(fieldConfiguration);
+                case 'taxonomy':
+                    return ListFormatter.formatTaxonomy(fieldConfiguration);
+                case 'orientedlinks':
+                    return ListFormatter.formatOrientedlinks(fieldConfiguration);
+                case 'uri':
+                    return ListFormatter.formatUri(fieldConfiguration);
+                case 'radio':
+                    return ListFormatter.formatRadio(fieldConfiguration);
+                case 'checkbox':
+                    return ListFormatter.formatCheckbox(fieldConfiguration);
+                default:
+                    return ListFormatter.formatDefault(fieldConfiguration);
+            }
+        })
+        .filter((v) => !!v);
 }

package/src/redux/slice/AppState.slice.ts

@@ -0,0 +1,25 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { RootState } from '../store';
+
+type SliceState = { [key: string]: { isLoading: boolean; error?: object } };
+
+const initialState: SliceState = {};
+
+export const appStateSlice = createSlice({
+    name: 'appState',
+    initialState,
+    reducers: {
+        setLoading: (state: SliceState, action: PayloadAction<string>) => {
+            state[action.payload] = { isLoading: true };
+        },
+        setLoaded: (state: SliceState, action: PayloadAction<string>) => {
+            state[action.payload] = { isLoading: false };
+        },
+        setError: (state: SliceState, action: PayloadAction<{ app: string; error: object }>) => {
+            state[action.payload.app].error = action.payload.error;
+        },
+    },
+});
+
+export const appStateSelector = (state: RootState, appName: string) => state.appState[appName];
+export const appStateActions = appStateSlice.actions;