@arquimedes.co/eureka-forms 2.0.32-test → 2.0.34-test

package/src/Utils/MaterialProviders.tsx

@@ -0,0 +1,42 @@
+import {
+    StylesProvider,
+    ThemeProvider,
+    createGenerateClassName,
+    createTheme,
+} from '@material-ui/core';
+import React from 'react';
+import DateFnsUtils from '@date-io/date-fns';
+import { MuiPickersUtilsProvider } from '@material-ui/pickers';
+import { SEED } from '../constants/MaterialClassNameSeed';
+import { getLocale } from '../Form/Form';
+
+const muiTheme = createTheme({
+    typography: {
+        fontFamily: 'inherit',
+    },
+});
+const generateClassName = createGenerateClassName({
+    seed: SEED,
+    productionPrefix: 'efjss',
+});
+
+interface MaterialProvidersProps {
+    children: React.ReactNode;
+}
+
+function MaterialProviders({ children }: MaterialProvidersProps): JSX.Element {
+    return (
+        <StylesProvider generateClassName={generateClassName}>
+            <ThemeProvider theme={muiTheme}>
+                <MuiPickersUtilsProvider
+                    utils={DateFnsUtils}
+                    locale={getLocale()}
+                >
+                    {children}
+                </MuiPickersUtilsProvider>
+            </ThemeProvider>
+        </StylesProvider>
+    );
+}
+
+export default MaterialProviders;

package/src/Utils/TestUtils.tsx

@@ -0,0 +1,74 @@
+import React, { PropsWithChildren } from 'react';
+import { render } from '@testing-library/react';
+import type { RenderOptions } from '@testing-library/react';
+import { configureStore, nanoid } from '@reduxjs/toolkit';
+import { Provider } from 'react-redux';
+
+// As a basic setup, import your same slice reducers
+import { AppStore, EurekaFormsReducer } from './store';
+import { RenderHookOptions, renderHook } from '@testing-library/react-hooks';
+import { IdFormContext } from '../App/App';
+import { StoreContext } from '../hooks';
+
+// This type interface extends the default options for render from RTL, as well
+// as allows the user to specify other things such as initialState, store.
+interface ExtendedRenderOptions extends Omit<RenderOptions, 'queries'> {
+    store?: AppStore;
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function renderWithProviders(
+    ui: React.ReactElement,
+    {
+        // Automatically create a store instance if no store was passed in
+        store = configureStore({
+            reducer: EurekaFormsReducer,
+        }),
+        ...renderOptions
+    }: ExtendedRenderOptions = {}
+) {
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    function Wrapper({ children }: PropsWithChildren<{}>): JSX.Element {
+        return <Provider store={store}>{children}</Provider>;
+    }
+
+    // Return an object with the store and all of RTL's query functions
+    return { store, ...render(ui, { wrapper: Wrapper, ...renderOptions }) };
+}
+
+interface ExtendedRenderHookOptions<TProps>
+    extends Omit<RenderHookOptions<TProps>, 'wrapper'> {
+    store?: AppStore;
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function renderHookWithProviders<TProps, TResult>(
+    callback: (props: TProps) => TResult,
+    {
+        store = configureStore({
+            reducer: EurekaFormsReducer,
+        }),
+        ...renderHookOptions
+    }: ExtendedRenderHookOptions<TProps> = {}
+) {
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    function Wrapper({ children }: PropsWithChildren<TProps>): JSX.Element {
+        const [idForm] = React.useState<string>(nanoid(6));
+        return (
+            <IdFormContext.Provider value={idForm}>
+                <Provider store={store} context={StoreContext}>
+                    {children}
+                </Provider>
+            </IdFormContext.Provider>
+        );
+    }
+
+    // Return an object with the store and all of RTL's query functions
+    return {
+        store,
+        ...renderHook<TProps, TResult>(callback, {
+            wrapper: Wrapper as any,
+            ...renderHookOptions,
+        }),
+    };
+}

package/src/Utils/store.ts

@@ -0,0 +1,56 @@
+import {
+    AnyAction,
+    combineReducers,
+    configureStore,
+    createAsyncThunk,
+} from '@reduxjs/toolkit';
+import GlobalSlice, { GlobalState } from '../States/GlobalSlice';
+import SiteSlice, { SiteState } from '../States/SiteSlice';
+import WidthStatsSlice from '../States/WidthStatsSlice';
+import { WidthStats } from '../Form/Form';
+
+export interface RootState {
+    global: GlobalState;
+    site: SiteState;
+    widthStats: WidthStats;
+}
+
+export const defaultRootState: RootState = {
+    global: GlobalSlice.getInitialState(),
+    site: SiteSlice.getInitialState(),
+    widthStats: WidthStatsSlice.getInitialState(),
+};
+
+export type EurekaFormsState = Record<string, RootState>;
+
+const FormReducer = combineReducers({
+    global: GlobalSlice.reducer,
+    site: SiteSlice.reducer,
+    widthStats: WidthStatsSlice.reducer,
+});
+
+export function EurekaFormsReducer(
+    state: EurekaFormsState = {},
+    action: AnyAction
+): EurekaFormsState {
+    const idForm = action.meta?.idForm;
+    if (!idForm) return state;
+    if (action.type === 'CLEAR') {
+        return { ...state, [idForm]: undefined };
+    }
+    return { ...state, [idForm]: FormReducer(state[idForm], action) };
+}
+
+export const store = configureStore({
+    reducer: EurekaFormsReducer,
+});
+
+export type AppDispatch = typeof store.dispatch;
+export type AppStore = typeof store;
+
+export const getAppState = createAsyncThunk(
+    'get/state',
+    async ({ idForm }: { idForm: string }, thunkAPI) => {
+        return (thunkAPI.getState() as EurekaFormsState)[idForm] as RootState;
+    }
+);

package/src/Widget.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App, { AppProps } from './App/App';
+
+const scripts = document.getElementsByTagName('script');
+const lastScript = scripts[scripts.length - 1];
+console.log('LAST', lastScript.getAttribute('data-id'));
+console.log('ATT', document.currentScript?.getAttribute('data-id'));
+const WIDGET_ID =
+    document.currentScript?.getAttribute('data-id') ?? 'widget:eureka';
+
+const element = document.getElementById(WIDGET_ID);
+const props: AppProps = {};
+if (element) {
+    const url = element.getAttribute('data-formurl');
+    if (url) {
+        const splitUrl = url.split('/');
+        if (splitUrl.length > 0) {
+            props.apiKey = splitUrl[splitUrl.length - 1];
+        }
+        const domain = /:\/\/([^/]+)/.exec(url)?.[1];
+        if (domain) {
+            const splitDomain = domain.split('.');
+            if (splitDomain.length > 0 && splitDomain[0] !== 'forms') {
+                props.idOrganization = splitDomain[0];
+            }
+        }
+    }
+    const formDataString = element.getAttribute('data-formdata');
+    if (formDataString) {
+        props.formData = JSON.parse(formDataString);
+    }
+    const valuesString = element.getAttribute('data-values');
+    if (valuesString) {
+        props.valuesData = JSON.parse(valuesString);
+    }
+    const internal = element.getAttribute('data-internal');
+    if (internal) {
+        props.internal = true;
+    }
+    const postview = element.getAttribute('data-postview');
+    if (postview) {
+        props.postview = true;
+    }
+    const preview = element.getAttribute('data-preview');
+    if (preview) {
+        props.preview = true;
+    }
+    const partial = element.getAttribute('data-partial');
+    if (partial) {
+        props.partial = true;
+    }
+}
+
+ReactDOM.render(
+    <App isWidget={true} {...props} />,
+    document.getElementById(WIDGET_ID)
+);

package/src/__mocks__/axios.ts

@@ -0,0 +1,2 @@
+import mockAxios from 'jest-mock-axios';
+export default mockAxios;

package/src/constants/AYFFormStepTypes.ts

@@ -0,0 +1,10 @@
+export enum AYFFormStepTypes {
+    AYF_START_MONTH = 'AYF_START_MONTH',
+    AYF_END_MONTH = 'AYF_END_MONTH',
+    AYF_YEAR = 'AYF_YEAR',
+    AYF_BILL_NUM = 'AYF_BILL_NUM',
+    AYF_CUT_OFF_DATE = 'AYF_CUT_OFF_DATE',
+    AYF_ICA_CITY = 'AYF_ICA_CITY',
+}
+
+export default AYFFormStepTypes;

package/src/constants/CBRFormStepTypes.ts

@@ -0,0 +1,21 @@
+enum CBRFormStepTypes {
+    CBR_MACRO_PROYECTO = 'CBR_MACRO_PROYECTO',
+    CBR_POSTVENTA = 'CBR_POSTVENTA',
+    CBR_FIRST_NAME = 'CBR_FIRST_NAME',
+    CBR_MIDDLE_NAME = 'CBR_MIDDLE_NAME',
+    CBR_LAST_NAME = 'CBR_LAST_NAME',
+    CBR_SECOND_LAST_NAME = 'CBR_SECOND_LAST_NAME',
+    CBR_DOC = 'CBR_DOC',
+    CBR_CEL = 'CBR_CEL',
+    CBR_PHONE = 'CBR_PHONE',
+    CBR_EMAIL = 'CBR_EMAIL',
+    CBR_PROYECTO = 'CBR_PROYECTO',
+    CBR_TIPO_DOC = 'CBR_TIPO_DOC',
+    CBR_TIPO_SOLICITANTE = 'CBR_TIPO_SOLICITANTE',
+    CBR_INMUEBLE = 'CBR_INMUEBLE',
+    CBR_TIPO_ESPACIO = 'CBR_TIPO_ESPACIO',
+    CBR_LOCATIVAS = 'CBR_LOCATIVAS',
+    CBR_INCIDENCIAS = 'CBR_INCIDENCIAS',
+    CBR_COMENTARIO = 'CBR_COMENTARIO',
+}
+export default CBRFormStepTypes;

package/src/constants/Files/FileExtensions.ts

@@ -0,0 +1,70 @@
+export const getAcceptedExtensions = (): string => {
+    let extensionString = extensions.reduce(
+        (acc: string, current: string): string => acc + ',.' + current
+    );
+    extensionString = '.' + extensionString;
+    return extensionString;
+};
+const extensions = [
+    'aif',
+    'cda',
+    'mid',
+    'midi',
+    'mp3',
+    'mpa',
+    'ogg',
+    'wav',
+    'wma',
+    'wpl',
+    'ai',
+    'bmp',
+    'gif',
+    'ico',
+    'jpeg',
+    'jpg',
+    'png',
+    'ps',
+    'psd',
+    'svg',
+    'tif',
+    'tiff',
+    'key',
+    'odp',
+    'pps',
+    'ppt',
+    'pptx',
+    'ods',
+    'xls',
+    'xlsm',
+    'xlsx',
+    '3g2',
+    '3gp',
+    'avi',
+    'flv',
+    'h264',
+    'm4v',
+    'mkv',
+    'mov',
+    'mp4',
+    'mpg',
+    'mpeg',
+    'rm',
+    'swf',
+    'vob',
+    'wmv',
+    'doc',
+    'docx',
+    'docm',
+    'odt',
+    'pdf',
+    'rtf',
+    'tex',
+    'txt',
+    'wpd',
+    'csv',
+    'tex',
+    'msg',
+    'zip',
+    'rar',
+];
+export default extensions;

package/src/constants/Files/FileMaxSize.ts

@@ -0,0 +1,2 @@
+const maxSize = 31457280;
+export default maxSize;

package/src/constants/FormStepTypes.ts

@@ -0,0 +1,70 @@
+export enum FormTypes {
+    STEPPER = 'STEPPER',
+    COLUMN = 'COLUMN',
+}
+
+export enum FormStyleTypes {
+    MATERIAL = 'MATERIAL',
+}
+
+export enum StepTypes {
+    TITLE = 'TITLE',
+    RATING = 'RATING',
+    CHECKBOX = 'CHECKBOX',
+    TEXTAREA = 'TEXTAREA',
+    DATEPICKER = 'DATEPICKER',
+    FILEUPLOAD = 'FILEUPLOAD',
+    TEXTINPUT = 'TEXTINPUT',
+    SEPARATOR = 'SEPARATOR',
+    SELECTOR = 'SELECTOR',
+    CLASSIFIER_SELECTOR = 'CLASSIFIER_SELECTOR',
+    COLLAPSIBLE = 'COLLAPSIBLE',
+    MAPPER = 'MAPPER',
+    ENTITYVALUEPICKER = 'ENTITYVALUEPICKER',
+    API_SELECTOR = 'API_SELECTOR',
+}
+
+export enum OptionTypes {
+    DEFAULT = 'DEFAULT',
+    NESTED = 'NESTED',
+    ADD_SECTION = 'ADD_SECTION',
+}
+
+export enum ClassifierOptionTypes {
+    HIDE = 'CLASSIFIER_HIDE',
+    NESTED = 'CLASSIFIER_NESTED',
+}
+
+export enum EntityValueOptionTypes {
+    HIDE = 'ENTITY_VALUE_HIDE',
+    NESTED = 'ENTITY_VALUE_NESTED',
+}
+
+export enum ApiSelectorOptionTypes {
+    HIDE = 'API_SELECTOR_HIDE',
+    NESTED = 'API_SELECTOR_NESTED',
+}
+
+export enum RatingTypes {
+    SCALE = 'SCALE',
+    SATISFACTION = 'SATISFACTION',
+    LIKE = 'LIKE',
+}
+
+export default StepTypes;
+
+export enum MapperStyleTypes {
+    PILL = 'PILL',
+    LIST = 'LIST',
+    INLINE = 'INLINE',
+}
+
+export enum EntityValueDataTypes {
+    STEP = 'STEP',
+    VALUE = 'VALUE',
+}
+
+export enum ApiSelectorParamTypes {
+    STEP = 'STEP',
+    VALUE = 'VALUE',
+}

package/src/constants/IconTypes.ts

@@ -0,0 +1,12 @@
+export enum IconTypes {
+    PROJECT = 'PROJECT',
+    PROPERTY = 'PROPERTY',
+    SPACE = 'SPACE',
+    LEAK = 'LEAK',
+    DOCUMENT = 'DOCUMENT',
+    HANDSHAKE = 'HANDSHAKE',
+    CHECKLIST = 'CHECKLIST',
+    SUPPLIER = 'SUPPLIER',
+    GENERIC = 'GENERIC',
+}
+export default IconTypes;

package/src/constants/InternalFormStyle.ts

@@ -0,0 +1,18 @@
+import { MaterialStyle } from '../@Types/Form';
+import { FormStyleTypes } from './FormStepTypes';
+
+const InternalFormStyle: MaterialStyle = {
+    type: FormStyleTypes.MATERIAL,
+    standAloneBackgroundColor: '#ffffff',
+    backgroundColor: '#ffffff',
+    stepBackgroundColor: '#ffffff',
+    primaryColor: '#3d5a7f',
+    secondaryColor: '#98c1d9',
+    primaryContrastColor: '#ffffff',
+    secondaryContrastColor: '#ee6c4d',
+    errorColor: '#cc2936',
+    textColor: '#293241',
+    outlineColor: '#b8b8b8',
+    descriptionTextColor: '#989898',
+};
+export default InternalFormStyle;

package/src/constants/MaterialClassNameSeed.ts

@@ -0,0 +1 @@
+export const SEED = 'EF';

package/src/hooks.ts

@@ -0,0 +1,47 @@
+import { createDispatchHook, createSelectorHook } from 'react-redux';
+import type { TypedUseSelectorHook } from 'react-redux';
+import {
+    type RootState,
+    type AppDispatch,
+    type EurekaFormsState,
+    defaultRootState,
+} from './Utils/store';
+import { AnyAction } from '@reduxjs/toolkit';
+import { useContext } from 'react';
+import { IdFormContext } from './App/App';
+import React from 'react';
+
+export const StoreContext = React.createContext<any>({});
+
+const useSelector = createSelectorHook(StoreContext);
+
+const useDispatch = createDispatchHook(StoreContext);
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+
+export const useAppDispatch: () => AppDispatch = (): AppDispatch => {
+    const idForm = useContext(IdFormContext);
+    const dispatch = useDispatch();
+
+    const appDispatch = (action: AnyAction): AnyAction => {
+        action.meta = { idForm };
+        return dispatch(action);
+    };
+
+    return appDispatch as AppDispatch;
+};
+
+export const useAppSelector: TypedUseSelectorHook<RootState> = (
+    selector: any,
+    options: any
+) => {
+    const idForm = useContext(IdFormContext);
+    return useSelector(
+        (state: EurekaFormsState) =>
+            selector(state[idForm] ?? defaultRootState),
+        options
+    );
+};
+
+export const selectBreakPoint = (state: RootState): number =>
+    state.widthStats.currentBreakPoint;

package/src/index.lib.ts

@@ -0,0 +1,7 @@
+import EurekaForm, { AppProps as EurekaFormProps } from './App/App';
+import { StepProps } from './FormSteps/Step';
+import * as StepFunctions from './FormSteps/StepFunctions';
+export type { StepProps, EurekaFormProps };
+export { EurekaForm, StepFunctions };
+export default EurekaForm;
+export { default as ReactFromModule } from 'react';

package/src/index.module.css

@@ -0,0 +1,14 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');
+
+body {
+    font-family: 'Nunito';
+}
+
+.eurekaForm {
+    min-height: 100vh;
+    width: 100%;
+    scroll-behavior: smooth;
+    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: auto;
+}

package/src/index.tsx

@@ -0,0 +1,28 @@
+import * as ReactDOM from 'react-dom';
+import App from './App/App';
+import styles from './index.module.css';
+const urlParams = new URLSearchParams(window.location.search);
+const values = urlParams.get('data-values');
+let dataValues = undefined;
+if (values) {
+    try {
+        dataValues = JSON.parse(decodeURIComponent(values));
+    } catch (error) {
+        console.error('Invalid data-values JSON', error);
+    }
+}
+ReactDOM.render(
+    <div className={styles.eurekaForm}>
+        <App
+            isWidget={false}
+            apiKey={window.location.pathname.replace('/', '')}
+            valuesData={dataValues}
+            scrollToTop={() => {
+                location.href = '#';
+                location.href = '#eureka-root';
+                location.href = '#';
+            }}
+        />
+    </div>,
+    document.getElementById('eureka-root')
+);

package/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

package/src/types.d.ts

@@ -0,0 +1 @@
+declare module '*.css';