@legalplace/wizardx-core 0.0.1-alpha.0

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@legalplace/wizardx-core",
+  "version": "0.0.1-alpha.0",
+  "author": "Moncef Hammou (moncef@legalplace.fr)",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "npx rimraf dist && npx tsc",
+    "start": "npx tsc-watch --noClear -p ./tsconfig.json",
+    "lint": "eslint --quiet $(git diff --diff-filter=d --name-only HEAD~1 | grep -E '^packages/wizardx-core/(.*)\\.(js|jsx|ts|tsx)$' | sed -E 's/^packages\\/wizardx-core\\///' | xargs)",
+    "lint:fix": "eslint --fix $(git diff --diff-filter=d --name-only HEAD~1 | grep -E '^packages/wizardx-core/(.*)\\.(js|jsx|ts|tsx)$' | sed -E 's/^packages\\/wizardx-core\\///' | xargs)",
+    "lint:all": "tsc --noEmit && eslint 'src/**/*.{js,jsx,ts,tsx}' --quiet",
+    "lint:fix:all": "tsc --noEmit && eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
+    "test": "npx jest",
+    "test:coverage": "npx jest test --coverage  --watchAll=false ",
+    "precommit": "test && lint:fix"
+  },
+  "dependencies": {
+    "@legalplace/lp-events": "^1.8.0",
+    "@legalplace/lplogic": "^2.1.6",
+    "@legalplace/model-healthcheck": "^1.1.5",
+    "@legalplace/referencesparser": "^1.7.0",
+    "@legalplace/storybook": "1.113.2",
+    "@loadable/component": "^5.15.0",
+    "@redux-saga/core": "^1.1.3",
+    "awesome-phonenumber": "^2.62.1",
+    "connected-react-router": "^6.8.0",
+    "crypto-js": "^4.1.1",
+    "history": "4.10.1",
+    "lodash": "^4.17.21",
+    "moment-business-days": "^1.2.0",
+    "mousetrap": "^1.6.5",
+    "prop-types": "^15.7.2",
+    "query-string": "^7.0.1",
+    "react": "^17.0.1",
+    "react-app-polyfill": "^2.0.0",
+    "react-dom": "^17.0.1",
+    "react-redux": "^7.2.5",
+    "react-router-dom": "^5.2.0",
+    "react-test-renderer": "^17.0.2",
+    "redux": "^4.1.1",
+    "redux-devtools-extension": "^2.13.9",
+    "redux-saga": "^1.1.3",
+    "universal-cookie": "^4.0.4",
+    "uuid": "^8.3.2",
+    "xss": "^1.0.9"
+  },
+  "devDependencies": {
+    "@legalplace/eslint-config": "^0.0.1-alpha.0",
+    "@legalplace/models-v3-types": "^3.6.0",
+    "@legalplace/prettier-config": "^0.0.1-alpha.0",
+    "@swc-node/jest": "^1.3.2",
+    "@swc/core": "^1.2.93",
+    "@swc/jest": "^0.2.4",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^12.1.2",
+    "@types/crypto-js": "^4.0.2",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/jest": "^27.0.2",
+    "@types/loadable__component": "^5.13.4",
+    "@types/lodash": "^4.14.175",
+    "@types/mousetrap": "^1.6.8",
+    "@types/react-router-dom": "^5.3.0",
+    "@types/react-test-renderer": "^17.0.1",
+    "@types/redux-mock-store": "^1.0.3",
+    "@types/uuid": "^8.3.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "jest": "^27.2.4",
+    "jest-fetch-mock": "^3.0.3",
+    "lodash": "^4.17.21",
+    "react-async-ssr": "^0.7.2",
+    "redux-mock-store": "^1.5.4",
+    "regenerator-runtime": "^0.13.9",
+    "rimraf": "^3.0.2",
+    "ts-jest": "^27.0.5",
+    "ts-node": "^10.2.1",
+    "tsc-watch": "^4.5.0"
+  },
+  "prettier": "@legalplace/prettier-config",
+  "eslintIgnore": [
+    "*.test.ts",
+    "*.test.tsx"
+  ],
+  "gitHead": "4343e5b2911bf3619dac8b9136b794d45f5f6289"
+}

package/src/App.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import { testModel } from './misc/test_model';
+
+jest.mock('react', () => {
+  const rect = jest.requireActual('react');
+  const Loadable = jest.requireActual('@loadable/component');
+  rect.lazy = Loadable.lazy;
+  return rect;
+});
+
+// Mocking config
+jest.mock('./config', () => ({
+  getConfig: () => ({
+    apiEndpoint: 'https://api.legalplace.eu/api/v1',
+    pluginsDir: 'plugins/',
+    router: {
+      wizardPath: '/:permalink/questionnaire/:page',
+      termsheetPath: '/:permalink/questionnaire/resume',
+    },
+    plugins: {},
+    theme: 'social',
+    appState: ['wizard', 'termsheet'],
+  }),
+}));
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(
+    <App
+      historyType="browser"
+      model={testModel.model}
+      meta={testModel.meta}
+      loadPlugin={async () => {}}
+      loadTheme={async () => {}}
+    />,
+    div
+  );
+  ReactDOM.unmountComponentAtNode(div);
+});

package/src/App.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { Route, Switch, Redirect } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { ConnectedRouter } from 'connected-react-router';
+import type { ModelV3 } from '@legalplace/models-v3-types';
+import { getStore, createAppStore } from './redux/store';
+import { getHistory } from './redux/routerHistory';
+import { StateType } from './types/State.type';
+import { setGlobals, IGlobalParams } from './Globals';
+import { getConfig } from './config';
+import { fetchModelPrerequisitesAction } from './redux/actions/sagas/model';
+import ViewComponent from './components/View';
+import SmartScriptComponent from './components/SmartScript';
+import { PluginRoute } from './components/PluginRoute';
+
+// App components props interface
+export interface AppProps {
+  historyType: 'browser' | 'memory';
+  model?: ModelV3;
+  meta?: StateType.App.Meta;
+  instance?: StateType.App.Instance;
+  user?: StateType.User;
+  loadPlugin: (plugin: string) => Promise<any>;
+  loadTheme: (theme: string) => Promise<any>;
+}
+
+class WizardXCore extends React.Component<AppProps, { loaded: boolean }> {
+  constructor(props: AppProps) {
+    super(props);
+
+    // Creating the history
+    const historyType =
+      typeof props.historyType === 'string' ? props.historyType : 'browser';
+
+    const params: IGlobalParams = {
+      model: null,
+      meta: null,
+      instance: null,
+      user: null,
+      loadTheme: props.loadTheme,
+      loadPlugin: props.loadPlugin,
+    };
+    // Checking model
+    if (props.model) {
+      params.model = props.model;
+    }
+
+    // Checking meta
+    if (props.meta) {
+      params.meta = props.meta;
+    }
+
+    // Checking instance
+    if (props.instance) {
+      params.instance = props.instance;
+    }
+
+    // Checking user
+    if (props.user) {
+      params.user = props.user;
+    }
+    setGlobals(params);
+
+    // Creating the store
+    createAppStore(historyType);
+  }
+
+  componentDidMount(): void {
+    // Fetching model
+    const { dispatch, getState } = getStore();
+    const state = getState();
+    dispatch(
+      fetchModelPrerequisitesAction(
+        state.app.meta.permalink,
+        state.app.meta.prefix || ''
+      )
+    );
+  }
+
+  render(): JSX.Element {
+    return (
+      <Provider store={getStore()}>
+        <ConnectedRouter history={getHistory()}>
+          <Switch>
+            {/* Plugins additional routes */}
+            <Route path="/p/:path" component={PluginRoute} />
+            <Route
+              path={getConfig().router.wizardInstancePath}
+              component={ViewComponent}
+            />
+            <Route
+              path={getConfig().router.wizardPath}
+              component={ViewComponent}
+            />
+
+            {/* SmartScript Frame */}
+            <Route
+              path="/contrats/:permalink/smartscript/:uniqid?"
+              component={SmartScriptComponent}
+            />
+
+            {/* NOT FOUND REDIRECTION */}
+            <Route
+              path="/not_found"
+              render={() => {
+                window.location.href = getConfig().router.notFoundUrl;
+                return null;
+              }}
+            />
+            <Redirect to={getConfig().router.notFoundPath || '/not_found'} />
+          </Switch>
+        </ConnectedRouter>
+      </Provider>
+    );
+  }
+}
+
+export default WizardXCore;

package/src/Globals.ts

@@ -0,0 +1,64 @@
+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;
+  }
+}
+
+export interface IGlobalParams {
+  [key: string]: any;
+  loadPlugin: (plugin: string) => Promise<any>;
+  loadTheme: (theme: string) => Promise<any>;
+}
+
+const globalParams: IGlobalParams = {
+  model: null,
+  instance: null,
+  meta: null,
+  user: null,
+  env: null,
+  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.env =
+    process.env.REACT_APP_ENV || process.env.NODE_ENV || 'production';
+
+  // Setting version
+  globalParams.version = process.env.REACT_APP_VERSION || '0.0.0';
+
+  if (
+    globalParams.env !== 'production' &&
+    process.env.JEST_WORKER_ID === undefined
+  ) {
+    // eslint-disable-next-line no-console
+    console.log(
+      `%c[WZIARDX]: Current Environment: %c${globalParams.env} (${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/PluginLoader.test.tsx

@@ -0,0 +1,70 @@
+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>'
+      )
+    );
+  });
+});