@legalplace/wizardx-core 2.6.4 → 2.7.0

package/src/Globals.ts

@@ -1,69 +0,0 @@
-declare global {
-  interface Window {
-    dataLayer: any;
-    // eslint-disable-next-line camelcase
-    google_trackConversion: (...args: any[]) => any;
-    uetq: any;
-    fbq: (...args: any[]) => any;
-    mixpanel: any;
-    sendinblue: any;
-    ga: any;
-    hj: any;
-    wizardxLoadAfterLcp: ({ src: string } | Function)[];
-  }
-}
-
-export interface IGlobalParams {
-  [key: string]: any;
-  metadata?: Record<string, any>;
-  appEnv: string;
-  loadPlugin: (plugin: string) => Promise<any>;
-  loadTheme: (theme: string) => Promise<any>;
-}
-
-const globalParams: IGlobalParams = {
-  model: null,
-  instance: null,
-  meta: null,
-  user: null,
-  appEnv: "production",
-  version: null,
-  loadPlugin: async () => {},
-  loadTheme: async () => {},
-};
-
-export const setGlobals = (params: typeof globalParams) => {
-  Object.keys(globalParams).forEach((currentParam) => {
-    if (params[currentParam]) globalParams[currentParam] = params[currentParam];
-  });
-
-  // Setting env
-  globalParams.appEnv =
-    process.env.REACT_APP_ENV?.toString() ||
-    process.env.NODE_ENV?.toString() ||
-    "production";
-
-  // Setting version
-  globalParams.version = process.env.REACT_APP_VERSION || "0.0.0";
-
-  if (
-    globalParams.appEnv !== "production" &&
-    process.env.JEST_WORKER_ID === undefined
-  ) {
-    // eslint-disable-next-line no-console
-    console.log(
-      `%c[WZIARDX]: Current Environment: %c${globalParams.appEnv} (${globalParams.version})`,
-      "font-weight:bold",
-      "font-weight: bold; color: red"
-    );
-  }
-};
-
-/**
- * Wrapping global params object into a proxy
- * to avoid adding properties to it outside
- * this file
- */
-const Globals: Readonly<typeof globalParams> = globalParams;
-
-export default Globals;

package/src/Loader.tsx

@@ -1,8 +0,0 @@
-export const Loader = () => (
-  <div className="lps-container">
-    <div className="lds-ripple">
-      <div />
-      <div />
-    </div>
-  </div>
-);

package/src/PluginLoader.test.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-// @ts-ignore
-import ReactDOMServer from 'react-async-ssr';
-import '@testing-library/jest-dom/extend-expect';
-import { render, cleanup, waitFor } from '@testing-library/react';
-import loadable from '@loadable/component';
-import { ReplaceComponent } from './PluginLoader';
-
-jest.mock('react', () => {
-  const rct = jest.requireActual('react');
-  const Loadable = jest.requireActual('@loadable/component');
-  rct.lazy = Loadable.lazy;
-  return rct;
-});
-
-// Mocking config
-jest.mock('./config', () => ({
-  getConfig: () => ({
-    plugins: {
-      jestTestPlugin: '1.0.0',
-    },
-  }),
-}));
-
-jest.mock('./Globals', () => ({
-  loadPlugin: (plugin: string) => import(`./tests-misc/plugins/${plugin}`),
-}));
-
-const { loadPlugins, PluginLoader } = require('./PluginLoader');
-
-loadPlugins();
-
-describe('<PluginLoader />', () => {
-  it('Loads "after" hook', async () => {
-    const { container } = render(<PluginLoader anchor={['after']} />);
-    await waitFor(() =>
-      expect(container).toContainHTML(
-        '<div><div class="title">Hello world - AFTER</div></div>'
-      )
-    );
-  });
-
-  it('Loads "before" hook', async () => {
-    const { container } = render(<PluginLoader anchor={['before']} />);
-    await waitFor(() =>
-      expect(container).toContainHTML(
-        '<div><h1>Hello<b>world</b>!!!</h1></div>'
-      )
-    );
-  });
-
-  it('Tries to load non existing plugin', async () => {
-    const { container } = render(
-      <PluginLoader anchor={['myNonExistingPlugin']} />
-    );
-    await waitFor(() => expect(container).toContainHTML('<div></div>'));
-  });
-
-  it('Loads replacement module', async () => {
-    const Component = ReplaceComponent('TitleComponent', () => {
-      return <span>Original</span>;
-    });
-    const { container } = render(<Component>Replaced</Component>);
-    await waitFor(() =>
-      expect(container).toContainHTML(
-        '<div><h1 style="color: red;">Replaced</h1></div>'
-      )
-    );
-  });
-});

package/src/PluginLoader.tsx

@@ -1,407 +0,0 @@
-import React, { Props } from "react";
-import { Action } from "redux";
-import PropTypes from "prop-types";
-import { LoadableComponent } from "@loadable/component";
-import { getConfig } from "./config";
-import { getStore } from "./redux/store";
-import { getHistory } from "./redux/routerHistory";
-import { EventsTracking } from "./libs/EventsTracking";
-import Globals from "./Globals";
-
-// This object will be used to contain all anchors
-let globalAnchors: Record<string, React.FC[]> = {};
-let reduxAnchors: Record<string, ((...args: any) => void)[]> = {};
-let actionOverrideAnchor: Record<string, actionOverrideFunction[]> = {};
-let 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>>[];
-}
-
-let PluginsAppStatesRegistrers: PluginAppStatesRegisterFunction[] = [];
-let PluginsPageAppStates: PluginsPageAppStatesType = {};
-let PluginsAppStatesComponents: IPluginsAppStatesComponents = {};
-let 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>) => {
-  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(getStore().dispatch, 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) {
-    pluginsList = getConfig().plugins;
-  }
-  // We need to make sure all plugins are loaded before going on
-  await loadPluginFiles(pluginsList);
-
-  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
- */
-let 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;
-
-/**
- * Clears plugins
- */
-export const clearPlugins = () => {
-  globalAnchors = {};
-  reduxAnchors = {};
-  actionOverrideAnchor = {};
-  replacers = {};
-  PluginsAppStatesRegistrers = [];
-  PluginsPageAppStates = {};
-  PluginsAppStatesComponents = {};
-  PluginAdditionRoutes = {};
-  cache = {};
-  pluginsLoadingDone = false;
-};

package/src/Shimmer.tsx

@@ -1,108 +0,0 @@
-import React, { CSSProperties, useState } from "react";
-import { connect } from "react-redux";
-import { StateType } from "./types/State.type";
-import { addOnThemeLoadCallback, 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) => {
-  const [themeLoaded, setThemeloaded] = useState(false);
-
-  if (
-    props.fetchStatus === "succeeded" ||
-    props.fetchStatus === "nonBlocking"
-  ) {
-    return <>{props.children}</>;
-  }
-
-  addOnThemeLoadCallback(() => {
-    if (!themeLoaded) setThemeloaded(true);
-  });
-
-  if (!themeLoaded) return null;
-
-  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" && (
-            <div className="lds-ripple">
-              <div />
-              <div />
-            </div>
-          )}
-          {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"];
-} => ({
-  fetchStatus:
-    state.app.meta.fetchStatus === "succeeded"
-      ? "nonBlocking"
-      : state.app.meta.fetchStatus,
-  report: state.app.meta.report,
-});
-
-export default connect(mapStateToProps)(Shimmer);