@legalplace/wizardx-core 0.0.1-alpha.0

package/src/componentsConnectors/connectVariable.tsx

@@ -0,0 +1,191 @@
+import type { VariableV3 } from '@legalplace/models-v3-types';
+import {
+  componentConnector,
+  ConnectorStateToProps,
+  ConnectorDispatchProps,
+  ConnectorMapSelectors,
+} from './connector/componentConnector';
+import { isStepAvailable } from '../redux/selectors/app';
+import {
+  parseRawWithVariables,
+  parseVariableLabel,
+} from '../helpers/outputsParsing';
+
+export type ConnectVariableOwnProps = {
+  id: number;
+  index: number;
+};
+export type ConnectVariableMapProps = {
+  id: number;
+  index: number;
+  label: string;
+  type: string;
+  value: string | number;
+  condition?: boolean;
+  validator?: boolean;
+  validatorMessage: string;
+  mandatoryValidated: boolean;
+  mandatoryIgnore: boolean;
+  display: boolean;
+  meta: VariableV3;
+};
+export type ConnectVariableDispatchProps = {
+  updateVariable: (value: string | number) => void;
+};
+
+/**
+ * canVariableDisplay
+ * ----------------
+ * This helper function checks whether an option
+ * can be displayed. It currently handle this cases:
+ * - Checks stepTwo options
+ * - Checks special grants options
+ * @param id Option's ID
+ * @param selectors StateToProps selectors
+ * @returns (boolean)
+ */
+const canVariableDisplay = (
+  id: number,
+  index: number,
+  selectors: ConnectorMapSelectors
+) => {
+  // Getting selectors
+  const { selectVariableReference, isLevelAccessibleForUser } = selectors;
+  const variable = selectVariableReference(id);
+
+  // Variable diplay
+  let display = isStepAvailable(variable.step);
+
+  // Checking if variable is hidden by model or smartscript on all indexes
+  display = display && !(variable.hidden === true);
+
+  // Checking if variable's index is hidden by smartscript
+  display =
+    display && !selectors.selectIsSmartscriptVariableIndexHidden(id, index);
+
+  // Grant
+  display = display && isLevelAccessibleForUser(variable.grantLevel || 'GUEST');
+
+  // Returning result
+  return display;
+};
+
+/**
+ * stateToProps
+ * ------------
+ * State to props function maps state to connected
+ * component's props
+ * @param selectors StateToProps selectors
+ */
+const stateToProps: ConnectorStateToProps<
+  ConnectVariableOwnProps,
+  ConnectVariableMapProps
+> = (selectors) => (state, ownProps) => {
+  // Getting selectors
+  const {
+    selectVariableReference,
+    selectVariableInputByIndex,
+    selectVariableConditionValue,
+    selectVariableValidatorConditionValue,
+    selectMandatoryVariableByIndex,
+  } = selectors;
+
+  // Extracting id & index from ownProps
+  const { id, index } = ownProps;
+
+  // Getting variable's reference
+  const variable = selectVariableReference(id);
+
+  // Getting & parsing label (if needed)
+  const label = parseVariableLabel(id, index);
+
+  // Variable diplay
+  const display = canVariableDisplay(id, index, selectors);
+
+  // Getting variable's value
+  const value = selectVariableInputByIndex(id, index) || '';
+
+  // Getting condition
+  const condition = selectVariableConditionValue(id, index);
+
+  // Getting validator
+  const validator = selectVariableValidatorConditionValue(id, index);
+
+  // Extracting label & type from reference
+  const { type } = variable;
+
+  // Getting mandatory validator
+  const mandatoryValidated = selectMandatoryVariableByIndex(id, index);
+
+  // Getting MandartoryIgnore
+  const mandatoryIgnore = selectors.selectMandatoryIgnore();
+
+  // Injecting variables into validator message
+  const validatorMessage =
+    typeof variable.validator?.message === 'string'
+      ? parseRawWithVariables(variable.validator.message)
+      : '';
+
+  // Parsing helper's variables
+  const helper = variable.helper
+    ? parseRawWithVariables(variable.helper, undefined, '________________')
+    : undefined;
+
+  // Parsing warning's variables
+  const warning = variable.warning
+    ? parseRawWithVariables(variable.warning, undefined, '________________')
+    : undefined;
+
+  return {
+    id,
+    index,
+    label,
+    type,
+    meta: {
+      ...variable,
+      helper,
+      warning,
+    },
+    value,
+    condition,
+    validator,
+    validatorMessage,
+    mandatoryValidated,
+    mandatoryIgnore,
+    display,
+  };
+};
+
+/**
+ * dispatchToProps
+ * ------------
+ * Dispatch to props function maps dispatch to connected
+ * component's props
+ * @param actions DispatchToProps actions
+ */
+const dispatchToProps: ConnectorDispatchProps<
+  ConnectVariableOwnProps,
+  ConnectVariableDispatchProps
+> = (actions) => (dispatch, ownProps) => ({
+  updateVariable: (value: string | number) =>
+    dispatch(actions.updateVariableAction(ownProps.id, value, ownProps.index)),
+});
+
+/**
+ * Creating our component connector
+ */
+export const connectVariable = componentConnector({
+  componentName: 'Variable',
+  stateToProps,
+  dispatchToProps,
+  additionnalHooks: (props, hookType) => {
+    const { tags, type } = props.meta;
+    const hooks: string[] = [`${hookType}VariableOfType(${type})`];
+    if (Array.isArray(tags)) {
+      tags.forEach((currentTag) => {
+        hooks.push(`${hookType}Tag{${currentTag}}`);
+      });
+    }
+    return hooks;
+  },
+});

package/src/componentsConnectors/connectWizardWrapper.tsx

@@ -0,0 +1,30 @@
+import {
+  componentConnector,
+  ConnectorDispatchProps,
+} from './connector/componentConnector';
+
+export type ConnectWizardWrapperDispatchProps = {
+  openPreview: () => void;
+  closePreview: () => void;
+};
+export type ConnectWizardWrapperOwnProps = {};
+
+/**
+ * dispatchToProps
+ * ------------
+ * Dispatch to props function maps dispatch to connected
+ * component's props
+ * @param actions DispatchToProps actions
+ */
+const dispatchToProps: ConnectorDispatchProps<
+  ConnectWizardWrapperOwnProps,
+  ConnectWizardWrapperDispatchProps
+> = () => (dispatch) => ({
+  openPreview: () => dispatch({ type: 'OPEN_PREVIEW' }),
+  closePreview: () => dispatch({ type: 'CLOSE_PREVIEW' }),
+});
+
+export const connectWizardWrapper = componentConnector({
+  componentName: 'WizardWrapper',
+  dispatchToProps,
+});

package/src/componentsConnectors/connector/componentConnector.tsx

@@ -0,0 +1,217 @@
+import { Dispatch, Store } from 'redux';
+import { connect } from 'react-redux';
+import React, { ComponentType } from 'react';
+import { PluginLoader, ReplaceComponent } from '../../PluginLoader';
+import { StateType } from '../../types/State.type';
+import * as connectorActions from '../../redux/actions';
+import * as connectorSelectors from '../../redux/selectors';
+
+// Connector exportable types
+export type AdditionnalHooksFunction<P> = (
+  props: P,
+  hookType: string
+) => string[];
+export type ConnectorDispatchProps<
+  OwnProps,
+  DispatchProps,
+  OwnPropsWithStore = OwnProps & { store?: Store }
+> = (
+  actions: Readonly<typeof connectorActions>,
+  selectors: Readonly<typeof connectorSelectors>
+) => (dispatch: Dispatch, ownProps: OwnPropsWithStore) => DispatchProps;
+export type ConnectorStateToProps<
+  OwnProps,
+  MapProps,
+  OwnPropsWithStore = OwnProps & { store?: Store }
+> =
+  | ((
+      selectors: Readonly<typeof connectorSelectors>
+    ) => (state: StateType, ownProps: OwnPropsWithStore) => MapProps)
+  | undefined;
+export type ConnectorAdditionnalHooks<InjectedProps> = (
+  props: InjectedProps,
+  hookType: string
+) => string[];
+export type ConnectorMapSelectors = typeof connectorSelectors;
+
+// Connector self types
+type ConnectorHoocFunction = <P = {}>(
+  Component: ComponentType<P>,
+  componentName: string,
+  additionnalHooks?: AdditionnalHooksFunction<P>
+) => any;
+type AnchorsHooksFunction = <P = {}>(
+  props: P,
+  componentName: string,
+  additionnalHooks?: AdditionnalHooksFunction<P>
+) => {
+  beforeAnchors: string[];
+  afterAnchors: string[];
+  replaceAnchors: string[];
+};
+type PluginWrapperFunction = <P = {}>(props: P, anchors: string[]) => React.FC;
+type InferProps<C extends ComponentType<any>> = C extends ComponentType<infer P>
+  ? P
+  : {};
+
+/**
+ * Anchors hooks generator helper
+ * @param props Component's props
+ * @param componentName Component's name
+ * @param additionnalHooks Optional additionnal hooks function
+ */
+const AnchorsHooks: AnchorsHooksFunction = (
+  props,
+  componentName,
+  additionnalHooks?
+) => {
+  // Setting up anchors
+  let beforeAnchors = [`before(${componentName})`];
+  let afterAnchors = [`after(${componentName})`];
+  let replaceAnchors = [`${componentName}`];
+
+  // Adding additionnal hooks
+  if (typeof additionnalHooks === 'function') {
+    beforeAnchors = [...beforeAnchors, ...additionnalHooks(props, 'before')];
+    afterAnchors = [...afterAnchors, ...additionnalHooks(props, 'after')];
+    replaceAnchors = [...replaceAnchors, ...additionnalHooks(props, 'replace')];
+  }
+
+  return {
+    beforeAnchors,
+    afterAnchors,
+    replaceAnchors,
+  };
+};
+
+/**
+ * Plugin Wrapper
+ * @param Component
+ * @param componentName
+ * @param additionnalHooks
+ */
+const PluginWrapper: PluginWrapperFunction = (props, anchors) => {
+  const WrappedPlugin = () => <PluginLoader anchor={anchors} props={props} />;
+  WrappedPlugin.displayName = `Plugin(${anchors
+    .join(', ')
+    .replace(/\(/g, '[')
+    .replace(/\)/g, ']')})`.trim();
+  return WrappedPlugin;
+};
+
+/**
+ * # Component's connector Higher-Order-Component
+ * This HOOC is responsible for adding hooks & replacers
+ * for plugins & passing props to them
+ * @param Component Original Theme's component
+ * @param componentName Hook's base name
+ * @param additionnalHooks Additional hooks function, recieves props as
+ *  first argument & the hookType as second (before, after, replace) and
+ *  returns a string array with the hooks you want to add
+ */
+const ConnectorHooc: ConnectorHoocFunction = (
+  Component,
+  componentName,
+  additionnalHooks?
+) => {
+  const ConnectedComponent = (props: InferProps<typeof Component>) => {
+    // Setting up anchors
+    const { beforeAnchors, afterAnchors, replaceAnchors } = AnchorsHooks(
+      props,
+      componentName,
+      additionnalHooks
+    );
+
+    // Replacing Component
+    const FinalComponent = ReplaceComponent<InferProps<typeof Component>>(
+      replaceAnchors,
+      Component,
+      componentName
+    );
+
+    const BeforePlugings = PluginWrapper(props, beforeAnchors);
+    const AfterPlugings = PluginWrapper(props, afterAnchors);
+
+    // Returning composed component
+    return (
+      <>
+        <BeforePlugings />
+        <FinalComponent {...props} />
+        <AfterPlugings />
+      </>
+    );
+  };
+  ConnectedComponent.displayName = `connectedComponent(${componentName})`;
+  return ConnectedComponent;
+};
+
+/**
+ * ConnectorConnect
+ * ----------------
+ * Executes first layer functions for stateToProps & dispatchToProps
+ * and returns a connect with the according MapStateToProps & DispatchStateToProps
+ * @param options {stateToProp?, dispatchToProp?}
+ */
+function ConnectorConnect<
+  OwnProps = {},
+  MapProps = {},
+  DispatchProps = {}
+>(options: {
+  stateToProps?: ConnectorStateToProps<OwnProps, MapProps> | undefined;
+  dispatchToProps?: ConnectorDispatchProps<OwnProps, DispatchProps> | undefined;
+}) {
+  const { stateToProps, dispatchToProps } = options;
+
+  // Executing first function layer with selectors for stateToProps if it's defined
+  const mapStateToProps = stateToProps
+    ? stateToProps(connectorSelectors)
+    : undefined;
+
+  // Executing first function layer with actions for dispatchToProps if it's defined
+  const mapDispatchToProps = dispatchToProps
+    ? dispatchToProps(connectorActions, connectorSelectors)
+    : undefined;
+
+  return connect(mapStateToProps, mapDispatchToProps);
+}
+
+/**
+ * Components connectors
+ * Recieves an object containing the componentName, a stateProp
+ * @param options
+ */
+export function componentConnector<
+  OwnProps = {},
+  MapProps = {},
+  DispatchProps = {},
+  OwnPropsWithStore = OwnProps & { store?: Store },
+  InjectedProps = OwnPropsWithStore & MapProps & DispatchProps
+>(options: {
+  componentName: string;
+  stateToProps?: ConnectorStateToProps<OwnPropsWithStore, MapProps> | undefined;
+  dispatchToProps?:
+    | ConnectorDispatchProps<OwnPropsWithStore, DispatchProps>
+    | undefined;
+  additionnalHooks?: AdditionnalHooksFunction<InjectedProps>;
+}) {
+  return function Connector<AdditionnalProps = {}>(
+    Component: ComponentType<InjectedProps & AdditionnalProps>
+  ) {
+    const { componentName, stateToProps, dispatchToProps, additionnalHooks } =
+      options;
+
+    // Executing our Hooc connector with InjectedProps, recieved component
+    // and additionnalHooks function
+    const hooc = ConnectorHooc<InjectedProps & AdditionnalProps>(
+      Component,
+      componentName,
+      additionnalHooks
+    );
+
+    // Composing everything (That's magical)
+    return ConnectorConnect<OwnPropsWithStore & AdditionnalProps>({
+      stateToProps,
+      dispatchToProps,
+    })(hooc);
+  };
+}

package/src/componentsConnectors/connector/connectorSelectors.ts

@@ -0,0 +1,19 @@
+import * as appSelectors from '../../redux/selectors/app';
+import * as conditionsSelectors from '../../redux/selectors/conditions';
+import * as inputsSelectors from '../../redux/selectors/inputs';
+import * as referencesSelectors from '../../redux/selectors/references';
+import * as userSelectors from '../../redux/selectors/user';
+import * as mandatoriesSelectors from '../../redux/selectors/mandatories';
+import * as smartscriptSelectors from '../../redux/selectors/smartscript';
+
+const connectorSelectors = {
+  ...appSelectors,
+  ...conditionsSelectors,
+  ...inputsSelectors,
+  ...referencesSelectors,
+  ...userSelectors,
+  ...mandatoriesSelectors,
+  ...smartscriptSelectors,
+};
+
+export default connectorSelectors;

package/src/componentsConnectors/index.ts

@@ -0,0 +1,16 @@
+export * from './connectOption';
+export * from './connectBox';
+export * from './connectDocument';
+export * from './connectPagination';
+export * from './connectMetaTitle';
+export * from './connectProgress';
+export * from './connectRootOption';
+export * from './connectSection';
+export * from './connectSummary';
+export * from './connectSummaryItem';
+export * from './connectPreview';
+export * from './connectTermsheet';
+export * from './connectVariable';
+export * from './connectWizardWrapper';
+export * from './connectHeader';
+export * from './connector/componentConnector';

package/src/config.test.ts

@@ -0,0 +1,30 @@
+import { getConfig, loadConfig } from './config';
+
+// Mocking wizardParams
+jest.mock('./wizard-params', () => ({
+  apiEndpoint: 'some-endpoint/',
+  plugins: {
+    jestTestPlugin: '1.0.0',
+  },
+  theme: {
+    name: 'test',
+    params: {},
+  },
+}));
+
+describe('Config loader', () => {
+  it('Loads config', async () => {
+    await loadConfig();
+    const config = getConfig();
+    expect(config).toStrictEqual({
+      apiEndpoint: 'some-endpoint/',
+      plugins: {
+        jestTestPlugin: '1.0.0',
+      },
+      theme: {
+        name: 'test',
+        params: {},
+      },
+    });
+  });
+});

package/src/config.ts

@@ -0,0 +1,17 @@
+import config from './wizard-params';
+import type { IWizardParams } from './types/config.type';
+
+let updatedConfig: IWizardParams = config;
+export const getConfig = (): IWizardParams => updatedConfig;
+
+export const updateConfig = (newConfig: IWizardParams) => {
+  updatedConfig = newConfig;
+};
+
+export const isConfigReady = () => {
+  return getConfig().fixedConfig && getConfig().fixedConfig === true;
+};
+
+export const loadConfig = async () => {
+  return getConfig();
+};

package/src/constants/emailValidation.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line
+export const EMAIL_REGEX = /^(?:[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+\.)*[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+@(?:(?:(?:[a-zA-Z0-9_](?:[a-zA-Z0-9_\-](?!\.)){0,61}[a-zA-Z0-9_-]?\.)+[a-zA-Z0-9_](?:[a-zA-Z0-9_\-](?!$)){0,61}[a-zA-Z0-9_]?)|(?:\[(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\]))$/;

package/src/constants/index.ts

@@ -0,0 +1 @@
+export * from './emailValidation';

package/src/definitions/path.join.d.ts

@@ -0,0 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+declare module 'path.join' {
+  export default (...args: string[]) => {};
+}

package/src/helpers/index.ts

@@ -0,0 +1,2 @@
+export * from './outputsParsing';
+export * from './sendinblueHelper';