impaktapps-ui-builder 0.0.382460 → 1.0.0

package/declarations.d.ts

@@ -0,0 +1,8 @@
+// declarations.d.ts
+declare module '*.svg' {
+    import React from 'react';
+    import { SvgProps } from 'react-native-svg';
+    const content: React.FC<SvgProps>;
+    export default content;
+  }
+  

package/eslint.config.mjs

@@ -0,0 +1,13 @@
+import js from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+import { defineConfig } from "eslint/config";
+
+
+export default defineConfig([
+  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"], plugins: { js }, extends: ["js/recommended"] },
+  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"], languageOptions: { globals: globals.browser } },
+  tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+]);

package/hooks/fixComponentsUtils/container.ts

@@ -0,0 +1,20 @@
+import { ComponentTreeNode } from "@/redux/currentApp/components/componentsState"
+
+
+export const fixedContainerComponent = (component: ComponentTreeNode) => {
+  let linkedWidget
+  if (component.props) {
+    linkedWidget =
+      component.props.linkWidgetDisplayName !== undefined &&
+        typeof component.props.linkWidgetDisplayName === "string"
+        ? [component.props.linkWidgetDisplayName]
+        : component.props.linkWidgetDisplayName
+  }
+  return {
+    ...component,
+    props: {
+      ...component.props,
+      linkWidgetDisplayName: linkedWidget,
+    },
+  }
+}

package/hooks/fixComponentsUtils/likeInput.ts

@@ -0,0 +1,15 @@
+import { ComponentTreeNode } from "@/redux/currentApp/components/componentsState"
+
+
+export const fixedLikeInputComponentDefaultValue = (
+  component: ComponentTreeNode,
+) => {
+  return {
+    ...component,
+    props: {
+      ...component.props,
+      value: undefined,
+      defaultValue: component.props?.defaultValue || "",
+    },
+  }
+}

package/hooks/fixedAction.ts

@@ -0,0 +1,196 @@
+import { INIT_ACTION_ADVANCED_CONFIG, INIT_ACTION_MOCK_CONFIG } from "@/page/App/components/publicConfig/action"
+import { ACTION_RUN_TIME, ActionContent, ActionItem } from "@/redux/currentApp/action/interface"
+import { klona } from "klona/json"
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+export const fixedActionToNewAction = (
+  actions?: ActionItem<ActionContent>[],
+) => {
+  return (
+    actions?.map((action) => {
+      if (action.actionType === "transformer") {
+        return action
+      }
+      const advancedConfig = klona(INIT_ACTION_ADVANCED_CONFIG)
+      if (action.triggerMode === "automate") {
+        advancedConfig.runtime = ACTION_RUN_TIME.APP_LOADED
+      }
+      return {
+        ...action,
+        config: {
+          ...action.config,
+          public: !!action.config?.public,
+          advancedConfig: action.config?.advancedConfig ?? advancedConfig,
+          mockConfig: action.config?.mockConfig ?? INIT_ACTION_MOCK_CONFIG,
+        },
+      }
+    }) ?? []
+  )
+}
+
+
+// async (store, dynamicData, userValue, body) => {
+
+
+//   if (store?.ctx?.core?.data?.Actions === 'Submit All' || store?.ctx?.core?.data?.Actions === 'Reject All') {
+
+//     return true;
+
+//   }
+
+//   store?.setNotify({ FailMessage: "Please select all fields", Fail: true });
+//   return false
+// };
+
+// async (store, dynamicData, userValue, body) => {
+//   if (store?.ctx?.core?.data?.Actions === 'Submit' || store?.ctx?.core?.data?.Actions === 'Reject') {
+//     const find = store?.ctx?.core?.data?.pending_report.find((e) => e.Select)
+//     if (find) {
+//       return true
+//     } else {
+//       store?.setNotify({ FailMessage: "Please Select Row", Fail: true });
+//     }
+
+//   }else{
+//       store?.setNotify({ FailMessage: "Please select all fields", Fail: true });
+//   }
+
+// };   
+
+
+async (
+  store,
+  dynamicData,
+  userValue,
+  parentEventOutput,
+  service,
+  componentName
+) => {
+  // Get and parse local storage data
+  // const localData = JSON.parse(localStorage.getItem("rowData"));
+  // const localData = JSON.parse(await AsyncStorage.getItem("rowData"));
+  const data = await AsyncStorage.getItem("rowData");
+  const localData = JSON.parse(data);
+  // Extract all required fields from localData
+  const {
+    status,
+    invoiceNo,
+    invoice_id,
+    month,
+    source_state,
+    source_gstn,
+    amount,
+    invoice_date,
+    destination_state,
+    destination_gstn,
+    cgst,
+    sgst,
+    igst,
+    total_invoice_value,
+    total_gross_amount,
+    gst_applicable,
+    programId
+  } = localData;
+  let invoiceDate = invoice_date;
+  if (invoiceDate) {
+    const dateObj = new Date(invoiceDate);
+    const formattedInvoiceDate = dateObj.toISOString();
+    invoiceDate = formattedInvoiceDate;
+  }
+  const disable = !(status === "I" || status === "Initial");
+
+  const dataDemo1 = {
+    invoice_id,
+    month,
+    source_state,
+    source_gstn,
+    amount,
+    destination_state,
+    cgst,
+    sgst,
+    igst,
+    total_invoice_value,
+    total_gross_amount,
+    gst_applicable,
+    programId
+  }
+  if (invoiceNo && destination_gstn && invoiceDate) {
+    store.setFormdata((prev) => ({ ...prev, ...dataDemo1, invoice_date: invoiceDate, destination_gstn, invoiceNo }));
+  } else if (invoiceDate) {
+    store.setFormdata((prev) => ({ ...prev, ...dataDemo1, invoice_date: invoiceDate }));
+  }
+  else {
+    store.setFormdata((prev) => ({ ...prev, ...dataDemo1 }));
+  }
+
+  store.setSchema((prev) => ({
+    ...prev,
+    properties: {
+      signedInvoiceUpload: {
+        ...prev.properties?.signedInvoiceUpload,
+        disabled: disable,
+      },
+      submit: {
+        ...prev.properties?.submit,
+        disabled: disable,
+      },
+      invoiceStatus: {
+        ...prev.properties?.invoiceStatus,
+        disabled: true,
+      },
+      Save: {
+        ...prev.properties?.Save,
+        disabled: disable
+      },
+      invoiceNo: {
+        ...prev.properties?.invoiceNo,
+        disabled: disable
+      },
+      month: {
+        ...prev.properties?.month,
+        disabled: true
+      },
+      source_state: {
+        ...prev.properties?.source_state,
+        disabled: true
+      },
+      source_gstn: {
+        ...prev.properties?.source_gstn,
+        disabled: true
+      },
+      amount: {
+        ...prev.properties?.amount,
+        disabled: true
+      },
+      total_gross_amount: {
+        ...prev.properties?.total_gross_amount,
+        disabled: true
+      },
+      cgst: {
+        ...prev.properties?.cgst,
+        disabled: true
+      },
+      sgst: {
+        ...prev.properties?.sgst,
+        disabled: true
+      },
+      igst: {
+        ...prev.properties?.igst,
+        disabled: true
+      },
+      destination_state: {
+        ...prev.properties?.destination_state,
+        disabled: true
+      },
+      destination_gstn: {
+        ...prev.properties?.destination_gstn,
+        disabled: disable
+      },
+      total_invoice_value: {
+        ...prev.properties?.total_invoice_value,
+        disabled: true
+      },
+    },
+  }));
+
+};

package/hooks/fixedComponents.ts

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { fixedContainerComponent } from "./fixComponentsUtils/container"
+import { fixedLikeInputComponentDefaultValue } from "./fixComponentsUtils/likeInput"
+
+export const fixedComponentsToNewComponents = (
+  componentsTree: any,
+) => {
+  const newComponentsTree = componentsTree ?? {}
+  if (Array.isArray(newComponentsTree.childrenNode)) {
+    newComponentsTree.childrenNode =
+      newComponentsTree.childrenNode?.map((component) => {
+        switch (component.type) {
+          case "CONTAINER_WIDGET":
+            return fixedContainerComponent(component)
+          case "JSON_EDITOR_WIDGET":
+          case "SLIDER_WIDGET":
+          case "TEXTAREA_INPUT_WIDGET":
+          case "EDITABLE_TEXT_WIDGET":
+          case "NUMBER_INPUT_WIDGET":
+          case "INPUT_WIDGET": {
+            return fixedLikeInputComponentDefaultValue(component)
+          }
+          default: {
+            return fixedComponentsToNewComponents(component)
+          }
+        }
+      }) || []
+  }
+
+  return newComponentsTree
+}

package/hooks/useColorScheme.ts

@@ -0,0 +1 @@
+export { useColorScheme } from 'react-native';

package/hooks/useColorScheme.web.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import { useColorScheme as useRNColorScheme } from 'react-native';
+
+/**
+ * To support static rendering, this value needs to be re-calculated on the client side for web
+ */
+export function useColorScheme() {
+  const [hasHydrated, setHasHydrated] = useState(false);
+
+  useEffect(() => {
+    setHasHydrated(true);
+  }, []);
+
+  const colorScheme = useRNColorScheme();
+
+  if (hasHydrated) {
+    return colorScheme;
+  }
+
+  return 'light';
+}

package/hooks/useDestroyExecutationTree.ts

@@ -0,0 +1,32 @@
+import { useEffect } from "react"
+import { useDispatch } from "react-redux"
+// import { useParams } from "react-router-dom"
+import { configActions } from "@/redux/config/configSlice"
+import { actionActions } from "@/redux/currentApp/action/actionSlice"
+import { cursorActions } from "@/redux/currentApp/cursor/cursorSlice"
+import { componentsActions } from "@/redux/currentApp/components/componentsSlice"
+import { destroyExecutionTree } from "@/redux/currentApp/executionTree/executionListener"
+import { executionActions } from "@/redux/currentApp/executionTree/executionSlice"
+import { removeAllActionPeriod } from "@/utils/action/runAction"
+import IMPAKTAPPSUndoRedoManager from "@/utils/undoRedo/undo"
+
+export const useDestroyApp = () => {
+  const dispatch = useDispatch()
+
+  // const { appId } = useParams()
+  const  appId  = ""
+
+  useEffect(() => {
+    return () => {
+      dispatch(executionActions.resetExecutionResultReducer())
+      dispatch(configActions.resetConfig())
+      dispatch(actionActions.resetActionReducer())
+      dispatch(componentsActions.resetComponentsReducer())
+      dispatch(cursorActions.resetCursorReducer())
+
+      destroyExecutionTree()
+      removeAllActionPeriod()
+      IMPAKTAPPSUndoRedoManager.destroy()
+    }
+  }, [dispatch, appId])
+}

package/hooks/useInitApp.tsx

@@ -0,0 +1,238 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useCallback, useEffect, useState } from "react";
+import { useDispatch, useSelector, useStore } from "react-redux";
+// import { useParams } from "react-router-dom";
+import { getIsOnline } from "@/redux/config/configSelector";
+import { configActions } from "@/redux/config/configSlice";
+import { ImpaktMode } from "@/redux/config/configState";
+import { actionActions } from "@/redux/currentApp/action/actionSlice";
+import { componentsActions } from "@/redux/currentApp/components/componentsSlice";
+import { executionActions } from "@/redux/currentApp/executionTree/executionSlice";
+
+import { DisplayNameGenerator } from "@/utils/generators/generateDisplayName";
+// import { flatTreeToMap } from "../utils/componentNode/flatTree";
+import {
+  ComponentsState,
+  // ComponentTreeNode,
+} from "@/redux/currentApp/components/componentsState";
+import { ActionContent, ActionItem } from "@/redux/currentApp/action/interface";
+import { DependenciesState } from "@/redux/currentApp/executionTree/executionState";
+// import { fixedComponentsToNewComponents } from "./fixedComponents";
+import { fixedActionToNewAction } from "./fixedAction";
+import { fixedComponentsToNewComponents } from "./fixedComponents";
+import { flatTreeToMap } from "@/redux/utils";
+// import _ from "lodash";
+// import { styleActions } from "@/redux/currentApp/style/cursorSlice";
+import { StyleState } from "@/redux/currentApp/style/styleState";
+import { ControllerActions } from "@/redux/currentApp/executionController/controllerSlice";
+import _ from "lodash";
+import { useDestroyApp } from "./useDestroyExecutationTree";
+import { ImpaktProps } from "@/lib";
+import { styleActions } from "@/redux/currentApp/style/cursorSlice";
+import { resourceActions } from "@/redux/resource/resourceSlice";
+// import axios from "axios";
+export interface CurrentAppResp {
+  cloneData: any;
+  appInfo: any;
+  components: ComponentsState;
+  // getResource: () => Promise<RestApiResource<RestApiAuth>>;
+
+  action: ActionItem<ActionContent>[];
+  style: StyleState;
+  dependenciesState: DependenciesState;
+  executionState: Record<string, any>;
+  impaktData: any;
+}
+export const updateCurrentAppInfo = (
+  cloneData: any,
+  data: CurrentAppResp,
+  mode: ImpaktMode,
+  appId: string,
+  teamID: string,
+  uid: string,
+  impaktData: any,
+  store: any
+) => {
+  // if (data.components.templatName) {
+  if (data.style) {
+    store.dispatch(styleActions.initStyleListReducer(data.style));
+  }
+  store.dispatch(
+    configActions.resetLayoutSection({
+      body: "active",
+      other: "active",
+    })
+  );
+  // }
+  if (mode !== "preview" && mode !== "production") {
+    store.dispatch(
+      ControllerActions.updateControllerListReducer(impaktData)
+    );
+  }
+  store.dispatch(configActions.updateImpaktAppsMode(mode));
+  // store.dispatch(appInfoActions.updateAppInfoReducer(data.appInfo))
+  const fixedComponents = fixedComponentsToNewComponents(cloneData);
+  store.dispatch(
+    componentsActions.initComponentReducer(flatTreeToMap(fixedComponents))
+  );
+  const fixedActions: any = fixedActionToNewAction(data.action);
+  if (fixedActions.length > 0) {
+    store.dispatch(actionActions.initActionListReducer(fixedActions));
+  }
+  // data.getResource().then((response) => {
+  //   if (mode !== "preview") {
+  //     store.dispatch(
+  //       resourceActions.updateResourceListReducer( [
+  //         {
+  //           resourceName: "ImapktApps",
+  //           resourceType: "restapi",
+  //           resourceID: "restapi-o1",
+  //           content: response,
+  //         },
+  //       ])
+  //     );
+  //   }
+  // });
+
+  DisplayNameGenerator.initApp(appId, teamID, uid, data.components.namePrefix);
+  DisplayNameGenerator.updateDisplayNameList(cloneData, fixedActions);
+  store.dispatch(executionActions.startExecutionReducer());
+  if (mode === "edit" && fixedActions.length > 0) {
+    store.dispatch(configActions.changeSelectedAction(fixedActions[0]));
+  }
+};
+
+export const useInitBuilderApp = (
+  mode: ImpaktMode,
+  impaktData: ImpaktProps
+) => {
+  // const { appId = "" } = useParams();
+  const  appId = "" 
+  let model: any = {};
+  if (mode !== "preview") {
+    model = impaktData.model;
+  } else {
+    model = impaktData;
+  }
+  const dispatch = useDispatch();
+  const isOnline = useSelector(getIsOnline);
+  const [loadingState, setLoadingState] = useState(true);
+  const [errorState, setErrorState] = useState(false);
+  const { uid, teamID } = {
+    uid: "",
+    teamID: "",
+  };
+  useDestroyApp();
+
+  const handleCurrentApp = useCallback(
+    (cloneData, data: CurrentAppResp, impaktData: any, store: any) => {
+      updateCurrentAppInfo(
+        cloneData,
+        data,
+        mode,
+        appId,
+        teamID,
+        uid,
+        impaktData,
+        store
+      );
+    },
+    [mode, appId, teamID, uid]
+  );
+
+  const store = useStore();
+  useEffect(() => {
+    const controller = new AbortController();
+    if (isOnline && model) {
+      setErrorState(false);
+      setLoadingState(true);
+      if (model?.components?.root) {
+        const actualComponents = _.cloneDeep(model.components);
+        const cloneModel = buildTree(actualComponents);
+        cloneModel.components = actualComponents;
+        handleCurrentApp(cloneModel, model, impaktData, store);
+        impaktData.getResource().then((response) => {
+          if (mode !== "preview") {
+            dispatch(
+              resourceActions.updateResourceListReducer([
+                {
+                  resourceName: "ImapktApps",
+                  resourceType: "impaktapps",
+                  resourceID: "restapi-o1",
+                  content: response,
+                },
+              ])
+            );
+          }
+        });
+        impaktData.getPages().then((response) => {
+          if (mode !== "preview") {
+            dispatch(ControllerActions.setResourcePagesReducer(response));
+          }
+        });
+        impaktData.getRules().then((response) => {
+          if (mode !== "preview") {
+            dispatch(ControllerActions.setResourceRulesReducer(response));
+          }
+        });
+        impaktData.getStyles().then((response) => {
+          if (mode !== "preview") {
+            dispatch(styleActions.initStyleListReducer(response));
+          }
+        });
+      }
+      setLoadingState(false);
+    }
+
+    return () => {
+      controller.abort();
+    };
+  }, [dispatch, handleCurrentApp, impaktData, isOnline, model]);
+
+  return { loadingState, errorState };
+};
+export function buildTree(input) {
+  if (!input.root) {
+    return input;
+  }
+  function buildNode(nodeKey, parentNodeKey) {
+    const node = input[nodeKey];
+    const children = node.childrenNode
+      ? node.childrenNode.map((childKey) => buildNode(childKey, nodeKey))
+      : null;
+
+    return {
+      ...node,
+      parentNode: parentNodeKey,
+      childrenNode: children,
+    };
+  }
+
+  const rootNodeKey = "root";
+  return buildNode(rootNodeKey, "");
+}
+
+// const [count, setCount] = useState(0);
+// useEffect(() => {
+//   const controller = new AbortController();
+//   if (isOnline && count < 1) {
+//     setCount(2);
+//     setErrorState(false);
+//     setLoadingState(true);
+//     const res = _.cloneDeep( impaktData||JSON.parse(localStorage.getItem("pageConfig")));
+//     if (res) {
+//       console.log("res >>", res.components);
+//       const actualComponents = buildTree(res.components);
+//       res.components =
+//       //  impaktData?impaktData.components:
+//        actualComponents;
+//       console.log("res >>", res.components)
+//       handleCurrentApp(res,impaktData);
+//     }
+//     setLoadingState(false);
+//   }
+
+//   return () => {
+//     controller.abort();
+//   };
+// }, [appId, count, dispatch, handleCurrentApp, impaktData, isOnline, teamID, version]);

package/hooks/useThemeColor.ts

@@ -0,0 +1,21 @@
+/**
+ * Learn more about light and dark modes:
+ * https://docs.expo.dev/guides/color-schemes/
+ */
+
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+export function useThemeColor(
+  props: { light?: string; dark?: string },
+  colorName: keyof typeof Colors.light & keyof typeof Colors.dark
+) {
+  const theme = useColorScheme() ?? 'light';
+  const colorFromProps = props[theme];
+
+  if (colorFromProps) {
+    return colorFromProps;
+  } else {
+    return Colors[theme][colorName];
+  }
+}

package/i18n/config.ts

@@ -0,0 +1,57 @@
+import i18n from "i18next"
+// import LanguageDetector from "i18next-browser-languagedetector"
+ import { initReactI18next } from "react-i18next"
+import enUS from "./locale/en-US.json"
+import esES from "./locale/es-ES.json"
+
+
+export const resources = {
+  "en-US": {
+     translation: enUS,
+  },
+  "ess-ES": {
+    translation: esES,
+ }
+} as const
+
+export const languageKeys = Object.keys(resources)
+
+export const formatLanguage = (code: string) => {
+  if (code) {
+    if (languageKeys.includes(code)) {
+      return code
+    }
+    const mainLanguage = code.slice(0, 2)
+    for (let i = 0; i < languageKeys.length; i++) {
+      if (languageKeys[i].slice(0, 2) === mainLanguage) {
+        return languageKeys[i]
+      }
+    }
+  }
+  return "en-US"
+}
+
+i18n
+  .use(initReactI18next)
+  .init({
+    fallbackLng: (code) => {
+      const language = formatLanguage(code)
+      return [language, "en-US"]
+    },
+    debug: false,
+    interpolation: {
+      escapeValue: false, //  not needed for react as it escapes by default
+    },
+    resources,
+    returnNull: false,
+    detection: {},
+  })
+
+export const LANG_OPTIONS = Object.keys(resources).map((key) => {
+  return {
+    label: i18n.t(`language.${key}`),
+    value: key,
+  }
+})
+
+export default i18n

package/i18n/i18next.d.ts

@@ -0,0 +1,8 @@
+import "i18next"
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    // resources: typeof resources["en-US"]
+    returnNull: false
+  }
+}