@legalplace/wizardx-core 0.0.1-alpha.0

package/src/PluginLoader.tsx

@@ -0,0 +1,409 @@
+import React, { Props } from 'react';
+import { Action } from 'redux';
+import PropTypes from 'prop-types';
+import { LoadableComponent } from '@loadable/component';
+import { getConfig, loadConfig, isConfigReady } from './config';
+import * as connectorActions from './redux/actions';
+import { getStore } from './redux/store';
+import { getHistory } from './redux/routerHistory';
+import { EventsTracking } from './libs/EventsTracking';
+import { ComponentsConnectors } from './types/getConnectors.type';
+import { SelectorsType } from './types/getSelectors.type';
+import Globals from './Globals';
+import * as selectorsList from './redux/selectors';
+import * as connectorsList from './componentsConnectors';
+
+// This object will be used to contain all anchors
+const globalAnchors: Record<string, React.FC[]> = {};
+const reduxAnchors: Record<string, ((...args: any) => void)[]> = {};
+const actionOverrideAnchor: Record<string, actionOverrideFunction[]> = {};
+const replacers: Record<string, React.FC> = {};
+
+export type PluginAppStatesRegisterFunction = (
+  currentAppStates: string[]
+) => string[];
+export type PluginsPageAppStatesType = Record<string, string>;
+export type actionOverrideFunction = (action: Action) => Action;
+
+export interface IPluginsAppStatesComponents {
+  [key: string]: LoadableComponent<any>;
+}
+export interface PluginsAppStatesDeclarations {
+  register: PluginAppStatesRegisterFunction;
+  pageAppState: PluginsPageAppStatesType;
+  components: IPluginsAppStatesComponents;
+  additionalRoutes?: Record<string, ReactComponent<any>>[];
+}
+
+const PluginsAppStatesRegistrers: PluginAppStatesRegisterFunction[] = [];
+const PluginsPageAppStates: PluginsPageAppStatesType = {};
+const PluginsAppStatesComponents: IPluginsAppStatesComponents = {};
+const PluginAdditionRoutes: Record<string, ReactComponent<any>> = {};
+
+/**
+ * Declares plugins app state on plugin loading
+ * @param declaration Plugin app states declaration
+ */
+const pluginAppStates = (declaration: PluginsAppStatesDeclarations) => {
+  // Adding registration function
+  PluginsAppStatesRegistrers.push(declaration.register);
+
+  // Adding page app states
+  if (typeof declaration.pageAppState === 'object')
+    Object.keys(declaration.pageAppState).forEach((appState) => {
+      if (typeof declaration.pageAppState[appState] === 'string') {
+        const page = declaration.pageAppState[appState];
+
+        // Verifying if appState is already declared
+        if (
+          Object.prototype.hasOwnProperty.call(PluginsPageAppStates, appState)
+        ) {
+          throw new Error(`Plugins AppState "${appState}" already declared.`);
+        }
+
+        // Veryfing if page is already declared
+        const samePageAppStates = Object.keys(PluginsPageAppStates).filter(
+          (currentAppState) => PluginsPageAppStates[currentAppState] === page
+        );
+        if (samePageAppStates.length > 0)
+          throw new Error(`Plugins AppState page "${page}" already declared.`);
+
+        PluginsPageAppStates[appState] = page;
+      }
+    });
+
+  // Saving App States components
+  Object.keys(declaration.components).forEach((appState) => {
+    if (Object.prototype.hasOwnProperty.call(declaration, appState) === true)
+      throw new Error(
+        `Plugin's appState ${appState} already declared previously`
+      );
+
+    PluginsAppStatesComponents[appState] = declaration.components[appState];
+  });
+};
+
+/**
+ * Registers plugins app states
+ * @param currentAppStates Current app states
+ */
+export const registerPluginsAppStates: PluginAppStatesRegisterFunction = (
+  currentAppStates
+) => {
+  let appStates = [...currentAppStates];
+  PluginsAppStatesRegistrers.forEach((register) => {
+    appStates = register(appStates);
+  });
+  return appStates;
+};
+
+/**
+ * Loads plugin app states component
+ * @param name AppState Name
+ */
+export const loadPluginComponent = (name: string) => {
+  if (
+    Object.prototype.hasOwnProperty.call(PluginsAppStatesComponents, name) ===
+    false
+  ) {
+    return undefined;
+  }
+
+  return PluginsAppStatesComponents[name];
+};
+
+/**
+ * Checks page app states for plugins
+ * @param page Page
+ */
+export const pluginPageAppState = (page: string) => {
+  const appStates = Object.keys(PluginsPageAppStates).filter(
+    (appState) => PluginsPageAppStates[appState] === page
+  );
+  if (appStates.length === 1) return appStates[0];
+  if (appStates.length > 1)
+    throw new Error(
+      `Found multipled appStates when checking for plugins page name`
+    );
+  return false;
+};
+
+/**
+ * Returns a readyonly copy of PluginsPageAppStates
+ */
+export const getPluginsPageAppStates = (): Readonly<
+  typeof PluginsPageAppStates
+> => PluginsPageAppStates;
+
+const loadPluginFiles = async (
+  pluginsList: Record<string, string>,
+  connectorSelectors: SelectorsType,
+  connectors: ComponentsConnectors
+) => {
+  const plugins = Object.keys(pluginsList);
+  // We load all needed plugin first to continue in synchronous way
+  const pluginModules = await Promise.all(
+    plugins.map((plugin) => Globals.loadPlugin(plugin))
+  );
+
+  plugins.forEach((plugin, index) => {
+    const pluginModule = pluginModules[index];
+    const anchors = pluginModule.default;
+    const { loader } = pluginModule;
+
+    // Loading selectors if module has a loader function
+    if (loader !== undefined) {
+      loader(
+        connectorSelectors,
+        connectors,
+        getStore().dispatch,
+        connectorActions,
+        getHistory(),
+        getConfig(),
+        EventsTracking
+      );
+    }
+
+    // Looking for anchors inside the plugin
+    Object.keys(anchors).forEach((anchor) => {
+      if (anchor === 'replace') {
+        Object.keys(anchors[anchor]).forEach((replacer) => {
+          // Adding current replacer
+          replacers[replacer] = anchors[anchor][replacer];
+        });
+        return;
+      }
+
+      /**
+       * App States
+       */
+      if (anchor === 'appstates') {
+        pluginAppStates(anchors.appstates);
+      }
+
+      /**
+       * Redux Anchors
+       */
+      if (anchor === 'redux') {
+        Object.keys(anchors[anchor]).forEach((action) => {
+          if (reduxAnchors[action] === undefined) reduxAnchors[action] = [];
+          // Adding current action
+          reduxAnchors[action].push(anchors[anchor][action]);
+        });
+        return;
+      }
+
+      /**
+       * Action Override
+       */
+      if (anchor === 'actionOverride') {
+        Object.keys(anchors[anchor]).forEach((action) => {
+          if (actionOverrideAnchor[action] === undefined)
+            actionOverrideAnchor[action] = [];
+          // Adding current action
+          actionOverrideAnchor[action].push(anchors[anchor][action]);
+        });
+        return;
+      }
+
+      /**
+       * Additional route
+       */
+      if (anchor === 'additionalRoutes') {
+        Object.keys(anchors[anchor]).forEach((route) => {
+          PluginAdditionRoutes[anchors[anchor][route].path] =
+            anchors[anchor][route].component;
+        });
+        return;
+      }
+
+      // In case no plugin has yet plugged to the anchor
+      // we create the anchor
+      if (!Object.prototype.hasOwnProperty.call(globalAnchors, anchor))
+        globalAnchors[anchor] = [];
+
+      // Adding current anchor
+      globalAnchors[anchor].push(anchors[anchor]);
+    });
+  });
+};
+
+/**
+ * Getting the plugins list from the config file
+ */
+let pluginsLoadingDone = false;
+export const loadPlugins = async (plugins?: Record<string, string>) => {
+  let pluginsList;
+  if (!plugins) pluginsList = getConfig().plugins;
+  else pluginsList = plugins;
+
+  if (pluginsList === undefined) {
+    const config = isConfigReady() ? await loadConfig() : getConfig();
+    pluginsList = config.plugins;
+  }
+  // We need to make sure all plugins are loaded before going on
+  await loadPluginFiles(pluginsList, selectorsList, connectorsList);
+
+  pluginsLoadingDone = true;
+};
+
+/**
+ * Returns whether plugins are loaded or not
+ */
+export const pluginsLoaded = () => pluginsLoadingDone;
+
+// Plugin Loader props
+export interface PluginLoaderProps {
+  anchor: string[];
+  props?: Props<null>;
+}
+
+export type ReactComponent<T> = React.ComponentClass<T> | React.FC<T>;
+
+/**
+ * PluginLoader component
+ */
+export type TPluginLoader<T = {}> = React.FC<T & PluginLoaderProps>;
+export const PluginLoader: TPluginLoader = (props) => {
+  const { anchor } = props;
+  const anchorsList = !Array.isArray(anchor) ? [anchor] : anchor;
+  let Plugins: React.ReactNodeArray = [];
+
+  /**
+   * Looking for anchor
+   */
+  for (let i = 0; i < anchorsList.length; i += 1) {
+    const currentAnchor = anchorsList[i];
+    if (
+      Object.prototype.hasOwnProperty.call(globalAnchors, currentAnchor) &&
+      globalAnchors[currentAnchor].length > 0
+    ) {
+      const currentPlugins = globalAnchors[currentAnchor];
+
+      Plugins = [
+        ...Plugins,
+        ...currentPlugins.map((Plugin: React.FC) => (
+          <React.Suspense
+            key={`lpwp-${currentAnchor}-${Math.random()}`}
+            fallback={null}
+          >
+            <Plugin {...props.props} />
+          </React.Suspense>
+        )),
+      ];
+    }
+  }
+
+  /**
+   * Looking for the anchor
+   */
+  if (Plugins.length > 0) {
+    /**
+     * Maping plugins hooked to the anchor inside a Fragment
+     */
+    return <>{Plugins}</>;
+  }
+
+  // Returning null incase the anchor doesn't have any hooks
+  // or it doesn't exist
+  return null;
+};
+
+PluginLoader.propTypes = {
+  anchor: PropTypes.arrayOf<string>(PropTypes.string.isRequired).isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  props: PropTypes.object,
+};
+
+PluginLoader.defaultProps = {
+  props: {},
+};
+
+/**
+ *
+ * @param replacerName Replacer name
+ * @param OriginalComponent Original component name
+ */
+const cache: Record<string, React.MemoExoticComponent<any>> = {};
+export function ReplaceComponent<T = {}>(
+  replacerName: string | string[],
+  OriginalComponent: ReactComponent<T>,
+  componentName?: string
+) {
+  const displayName =
+    componentName ||
+    OriginalComponent.displayName ||
+    OriginalComponent.name ||
+    'Component';
+  const anchorsList = !Array.isArray(replacerName)
+    ? [replacerName]
+    : replacerName;
+  let Replacer: string | null = null;
+
+  const cacheKey =
+    anchorsList.reduce((a, b) => a + b) + OriginalComponent.toString();
+  if (Object.prototype.hasOwnProperty.call(cache, cacheKey)) {
+    return cache[cacheKey];
+  }
+
+  /**
+   * Looking for anchor
+   */
+  for (let i = 0; i < anchorsList.length; i += 1) {
+    const currentAnchor = anchorsList[i];
+    if (Object.prototype.hasOwnProperty.call(replacers, currentAnchor)) {
+      Replacer = currentAnchor;
+      break;
+    }
+  }
+
+  let FinalComponent: React.ComponentType<T>;
+  if (Replacer !== null) {
+    const ReplacerComponent: React.FC = replacers[Replacer];
+    const FinalReplacedComponent: React.FC<T> = (props) => (
+      <React.Suspense fallback={null}>
+        <ReplacerComponent {...props} OriginalComponent={OriginalComponent}>
+          {props.children}
+        </ReplacerComponent>
+      </React.Suspense>
+    );
+    FinalComponent = FinalReplacedComponent;
+    FinalComponent.displayName = `replacedComponent(${displayName})`;
+  } else {
+    FinalComponent = OriginalComponent;
+    FinalComponent.displayName = `originalComponent(${displayName})`;
+  }
+
+  cache[cacheKey] = React.memo(FinalComponent);
+  return cache[cacheKey];
+}
+
+export function RunActionAnchor(anchor: string, ...args: any[]) {
+  if (
+    Object.prototype.hasOwnProperty.call(reduxAnchors, anchor) &&
+    reduxAnchors[anchor].length > 0
+  ) {
+    reduxAnchors[anchor].forEach((currentFn) => {
+      currentFn.call(null, ...args);
+    });
+  }
+}
+
+export function RunOverrideActionAnchor(action: Action) {
+  let overridedAction = action;
+  if (
+    Object.prototype.hasOwnProperty.call(actionOverrideAnchor, action.type) &&
+    actionOverrideAnchor[action.type].length > 0
+  ) {
+    actionOverrideAnchor[action.type].forEach((currentFn) => {
+      overridedAction = currentFn.call(null, overridedAction);
+    });
+  }
+
+  return overridedAction;
+}
+
+/**
+ * Get PluginAdditional route object
+ */
+export const getPluginsAdditionalRoutes = () => PluginAdditionRoutes;

package/src/Shimmer.tsx

@@ -0,0 +1,97 @@
+import React, { CSSProperties } from 'react';
+import { connect } from 'react-redux';
+import { Loader } from '@legalplace/storybook';
+import { StateType } from './types/State.type';
+import { getThemeShimmer } from './ThemeLoader';
+import { PluginLoader } from './PluginLoader';
+import UserLockedComponent from './components/UserLocked/UserLockedComponent';
+
+const Shimmer: React.FC<{
+  fetchStatus: StateType.App.Meta['fetchStatus'];
+  report: StateType.App.Meta['report'];
+}> = (props) => {
+  if (
+    props.fetchStatus === 'succeeded' ||
+    props.fetchStatus === 'nonBlocking'
+  ) {
+    return <>{props.children}</>;
+  }
+  const ThemeShimmer = getThemeShimmer();
+
+  const style: CSSProperties = {
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    transform: 'translate(-50%, -50%)',
+    color: '#AAA',
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+    fontSize: '12px',
+    userSelect: 'none',
+  };
+
+  const unhealthyStyle: CSSProperties = {
+    color: '#AAA',
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+    fontSize: '24px',
+    width: '700px',
+    margin: 'auto',
+    textAlign: 'center',
+    padding: '20px',
+  };
+
+  const unhealthyStylePre: CSSProperties = {
+    background: '#FDDCD0',
+    textAlign: 'left',
+    fontSize: '12px',
+    color: '#6B0435',
+    padding: '10px',
+    borderRadius: '4px',
+  };
+  if (ThemeShimmer !== null && props.fetchStatus === 'waiting') {
+    return <ThemeShimmer />;
+  }
+  return (
+    <>
+      {['waiting', 'failed'].includes(props.fetchStatus) && (
+        <div style={style}>
+          {props.fetchStatus === 'waiting' && <Loader />}
+          {props.fetchStatus === 'failed' &&
+            'Une erreur a eu lieu pendant le chargement du questionnaire'}
+        </div>
+      )}
+
+      {props.fetchStatus === 'userLocked' && (
+        <>
+          <PluginLoader anchor={[`userLockedScreen`]} props={props} />
+          <UserLockedComponent unhealthyStyle={unhealthyStyle} />
+        </>
+      )}
+
+      {props.fetchStatus === 'unhealthy' && (
+        <div style={unhealthyStyle}>
+          Le modèle semble contenir des erreurs
+          <pre style={unhealthyStylePre}>{props.report?.raw}</pre>
+        </div>
+      )}
+    </>
+  );
+};
+
+const mapStateToProps = (
+  state: StateType
+): {
+  fetchStatus: StateType.App.Meta['fetchStatus'];
+  report: StateType.App.Meta['report'];
+} => {
+  return {
+    fetchStatus:
+      state.app.meta.fetchStatus === 'succeeded'
+        ? 'nonBlocking'
+        : state.app.meta.fetchStatus,
+    report: state.app.meta.report,
+  };
+};
+
+export default connect(mapStateToProps)(Shimmer);

package/src/ThemeLoader.test.tsx

@@ -0,0 +1,81 @@
+import 'regenerator-runtime/runtime';
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, cleanup, waitFor } from '@testing-library/react';
+
+afterEach(cleanup);
+
+// Mocking config
+jest.mock('./config', () => ({
+  __esModule: true,
+  getConfig: () => ({
+    theme: { name: 'jestTestTheme' },
+    plugins: {},
+  }),
+  loadConfig: async (): Promise<Record<string, any>> => ({
+    theme: { name: 'jestTestTheme' },
+    plugins: {},
+  }),
+  isConfigReady: () => true,
+}));
+
+jest.mock('./Globals', () => ({
+  loadTheme: (theme: string) => import(`./tests-misc/themes/${theme}`),
+}));
+
+let loadThemeComponent: any;
+let loadTheme: any;
+describe('<ThemeLoader />', () => {
+  beforeEach(() => {
+    // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+    loadThemeComponent = require('./ThemeLoader').loadThemeComponent;
+    // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+    loadTheme = require('./ThemeLoader').loadTheme;
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  it('Loads WizardComponent properly', async () => {
+    const WizardComponent = loadThemeComponent('WizardComponent');
+    const { container } = render(<WizardComponent />);
+    await waitFor(() =>
+      expect(container).toContainHTML(
+        '<div><h1>Wizard test theme, WizardComponent</h1></div>'
+      )
+    );
+  });
+
+  it('Loads TermsheetComponent properly', async () => {
+    const TermsheetComponent = loadThemeComponent('TermsheetComponent');
+    const { container } = render(<TermsheetComponent />);
+    await waitFor(() =>
+      expect(container).toContainHTML(
+        '<div><h1>Wizard test theme, TermsheetComponent</h1></div>'
+      )
+    );
+  });
+});
+
+describe('loadTheme', () => {
+  it("loadTheme reloads theme properly if it's not yet loaded", async () => {
+    expect(loadTheme(undefined, true)).resolves.toEqual(undefined);
+  });
+  it('loadTheme throws an error if theme param is invalid', async () => {
+    expect(loadTheme('madeUpTheme')).rejects.toEqual(
+      new Error(
+        'We are unable to load the theme, please make sure the theme param is valid'
+      )
+    );
+  });
+  it('loadTheme throws an error if theme param is invalid', async () => {
+    expect(loadTheme('jestTestTheme/faltyIndexLoader')).rejects.toEqual(
+      new Error(
+        'We are unable to load the theme, please make sure the theme param is valid'
+      )
+    );
+  });
+  it('loadTheme throws an error if loader result is invalid', async () => {
+    expect(loadTheme('jestTestTheme/faltyIndex')).rejects.toEqual(
+      new Error('Theme loader function did not return components object')
+    );
+  });
+});

package/src/ThemeLoader.tsx

@@ -0,0 +1,111 @@
+import loadable, { LoadableComponent } from '@loadable/component';
+import { getConfig, loadConfig, isConfigReady, updateConfig } from './config';
+import { IWizardParamsTheme } from './types/config.type';
+/**
+ * Connectors
+ */
+import * as connectorSelectors from './redux/selectors';
+import * as connectors from './componentsConnectors';
+import { SelectorsType } from './types/getSelectors.type';
+import Globals from './Globals';
+
+// Getting current theme from config
+let wizardTheme: string;
+let themeParams: IWizardParamsTheme['params'];
+
+// This variable will store our theme's index
+let themeIndex: Record<string, LoadableComponent<unknown>>;
+
+/**
+ * Theme loading function
+ */
+export const loadTheme = async (theme?: string, force?: boolean) => {
+  let currentTheme;
+
+  if (theme === undefined) {
+    currentTheme = force ? theme : wizardTheme;
+  } else {
+    currentTheme = theme;
+  }
+
+  // Double checking theme from config
+  if (currentTheme === undefined) {
+    const config = isConfigReady() ? await loadConfig() : getConfig();
+    wizardTheme = config.theme.name;
+    themeParams = config.theme.params;
+    currentTheme = wizardTheme;
+  }
+
+  // Importing theme's loader function
+  let themeLoader: {
+    loader?:
+      | ((
+          p: any,
+          c: typeof connectors,
+          s: SelectorsType
+        ) => Record<string, LoadableComponent<unknown>>)
+      | undefined;
+    default?: Record<string, LoadableComponent<unknown>>;
+  } = {
+    loader: undefined,
+  };
+
+  try {
+    themeLoader = await Globals.loadTheme(currentTheme);
+  } catch (e) {
+    throw new Error(
+      'We are unable to load the theme, please make sure the theme param is valid'
+    );
+  }
+
+  // Extracting loader & default
+  const { loader, default: themeDefault } = themeLoader;
+
+  // Making sure loader function exists
+  if (typeof loader !== 'function' && typeof themeDefault === 'undefined')
+    throw new Error('Theme loader function not found');
+
+  if (typeof loader === 'function')
+    themeIndex = loader(themeParams, connectors, connectorSelectors);
+  else if (typeof themeDefault !== 'undefined') themeIndex = themeDefault;
+  else throw new Error('Unable to retrieve theme index');
+
+  // In case the theme still didn't load we throw an error
+  if (typeof themeIndex !== 'object')
+    throw new Error('Theme loader function did not return components object');
+};
+
+/**
+ * Theme component's loader
+ */
+const importThemeComponent = async (
+  name: string
+): Promise<LoadableComponent<any>> => {
+  if (typeof themeIndex !== 'object') await loadTheme();
+  return themeIndex[name];
+};
+/**
+ * Theme component's loader
+ */
+export const getThemeShimmer = () => {
+  return getConfig().theme?.shimmer === true
+    ? loadable(() => importThemeComponent('ShimmerComponent'))
+    : null;
+};
+
+export const setWizardTheme = async (theme: IWizardParamsTheme) => {
+  const { name, params } = theme;
+  wizardTheme = name;
+  if (params) themeParams = params;
+  await loadTheme();
+  const previousConfig = getConfig();
+  updateConfig({
+    ...previousConfig,
+    theme,
+  });
+};
+
+export const getThemeParams = () => themeParams;
+
+export const loadThemeComponent = (name: string) =>
+  loadable(() => importThemeComponent(name));