@asaleh37/ui-base 1.2.30 → 25.1.9

package/.github/workflows/publish-npm.yml

@@ -0,0 +1,49 @@
+name: Publish to npm
+
+on:
+  push:
+    branches:
+      - prod
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: "https://registry.npmjs.org/"
+
+      - name: Install dependencies
+        run: npm install --force
+
+      - name: Run build (optional)
+        run: npm run build
+
+      - name: Publish to npm
+        run: npm publish --tag latest
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+  notify:
+    needs: publish
+    runs-on: ubuntu-latest
+    if: always() # ensures this step runs regardless of success or failure
+    steps:
+      - name: Send email notification
+        uses: dawidd6/action-send-mail@v3
+        with:
+          server_address: smtp.gmail.com
+          server_port: 587
+          username: ${{ secrets.SMTP_USERNAME }}
+          password: ${{ secrets.SMTP_PASSWORD }}
+          subject: ui-base package publish  job is finished
+          to: ahmed.saleh.mohamed.92@gmail.com
+          from: ${{ secrets.SMTP_USERNAME }}
+          body: |
+            The GitHub Actions workflow has finished.
+            Status: ${{ needs.publish.result }}

package/README.md

@@ -1,52 +1,52 @@
-**UI Base** is a React JS template designed for quickly scaffolding robust, production-ready Enterprise Applications Interface. It incorporates enterprise-grade architectural patterns and integrates a suite of essential features to accelerate development, including:
-
-- A modular, layered architecture with a clean separation of concerns and industry-standard project structure.
-
-- [ ] Create new react project using vite.
-
-```javascript
-npm create vite@latest YOUR_APP_NAME    //choose typescript as template
-cd YOUR_APP_NAME
-npm install
-```
-
-- [ ] Install the UI Base Dependency.
-
-```javascript
-npm install @asaleh37/ui-base --force
-```
-
-- [ ] replace the content of the file src/main.tsx
-
-```javascript
-import { BaseApp } from "@asaleh37/ui-base";
-import { createRoot } from "react-dom/client";
-
-createRoot(document.getElementById("root")!).render(
-  <BaseApp
-    apiBaseUrl="YOUR_API_URL"
-    appLogo={"YOUR_APP_LOGO_PATH"}
-    appName="YOUR_APP_NAME"
-    appVersion="YOUR_APP_VERSION"
-    businessCommonStoresMetaData={{}}
-    businessNavigationItems={[]}
-    businessReduxReducers={{}}
-    businessRoutes={[]}
-    documentTitle="YOUR_HTML_DOCUMENT_TITLE"
-    enableAdministrationModule={true}  // to enable administration module or not
-		/* // To Change APP Coloring Theme modify the following colors
-    appTheme={{
-      dark: { primaryColor: "#b3a10c", secondaryColor: "#2b3c46" },
-      light: { primaryColor: "#2b3c46", secondaryColor: "#b3a10c" },
-    }}
-		*/
-   muiPremiumKey="YOUR_MUI_PREMIUM_KEY"
-  />
-);
-```
-
-- [ ] then go to the root of your project and then run the following command	
-
-```javascript
-npm run dev
+**UI Base** is a React JS template designed for quickly scaffolding robust, production-ready Enterprise Applications Interface. It incorporates enterprise-grade architectural patterns and integrates a suite of essential features to accelerate development, including:
+
+- A modular, layered architecture with a clean separation of concerns and industry-standard project structure.
+
+- [ ] Create new react project using vite.
+
+```javascript
+npm create vite@latest YOUR_APP_NAME    //choose typescript as template
+cd YOUR_APP_NAME
+npm install
+```
+
+- [ ] Install the UI Base Dependency.
+
+```javascript
+npm install @asaleh37/ui-base --force
+```
+
+- [ ] replace the content of the file src/main.tsx
+
+```javascript
+import { BaseApp } from "@asaleh37/ui-base";
+import { createRoot } from "react-dom/client";
+
+createRoot(document.getElementById("root")!).render(
+  <BaseApp
+    apiBaseUrl="YOUR_API_URL"
+    appLogo={"YOUR_APP_LOGO_PATH"}
+    appName="YOUR_APP_NAME"
+    appVersion="YOUR_APP_VERSION"
+    businessCommonStoresMetaData={{}}
+    businessNavigationItems={[]}
+    businessReduxReducers={{}}
+    businessRoutes={[]}
+    documentTitle="YOUR_HTML_DOCUMENT_TITLE"
+    enableAdministrationModule={true}  // to enable administration module or not
+		/* // To Change APP Coloring Theme modify the following colors
+    appTheme={{
+      dark: { primaryColor: "#b3a10c", secondaryColor: "#2b3c46" },
+      light: { primaryColor: "#2b3c46", secondaryColor: "#b3a10c" },
+    }}
+		*/
+   muiPremiumKey="YOUR_MUI_PREMIUM_KEY"
+  />
+);
+```
+
+- [ ] then go to the root of your project and then run the following command	
+
+```javascript
+npm run dev
 ```

package/__ODockerfile

@@ -0,0 +1,14 @@
+# STEP 1 — Build static files
+FROM node:18 AS build
+WORKDIR /app
+
+COPY package.json ./
+RUN npm install --force
+
+COPY . .
+RUN npm run build
+
+# STEP 2 — Nginx to serve static build
+FROM nginx:1.25
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 80

package/dist/index.d.ts

@@ -1,22 +1,32 @@
+import { GridColDef, GridRowSelectionModel, DataGridPremiumProps, GridToolbarProps, ToolbarPropsOverrides } from '@mui/x-data-grid-premium';
+export { DataGridPremium } from '@mui/x-data-grid-premium';
 import { Reducer } from '@reduxjs/toolkit';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { TextFieldProps, SxProps } from '@mui/material';
 export * from '@mui/material';
-export * from 'zod';
 export * from '@mui/lab';
 export { toast } from 'react-toastify';
 export { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
 import * as react from 'react';
 import react__default from 'react';
-import { GridColDef, GridRowSelectionModel, DataGridPremiumProps, GridToolbarProps, ToolbarPropsOverrides } from '@mui/x-data-grid-premium';
 import { UseFormReturn } from 'react-hook-form';
+export { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import * as zod from 'zod';
+export { zod as z };
 import { TFunction } from 'i18next';
 export * from '@mui/x-tree-view/models';
+export { useTranslation } from 'react-i18next';
+export { useNavigate, useParams } from 'react-router-dom';
+export { zodResolver } from '@hookform/resolvers/zod';
+export { useDispatch, useSelector } from 'react-redux';
 import { ResponseType } from 'axios';
+export { default as axios } from 'axios';
 
 interface SystemRoute {
     path: string;
     component: React.FC;
+    applicationModule?: string;
     authority?: string;
 }
 
@@ -26,6 +36,7 @@ type ExtendedTreeItemProps = {
     label: string;
     action?: "NAVIGATION";
     authority?: string;
+    applicationModule?: string;
     actionPayload?: {
         path?: string;
         parameters?: object;
@@ -42,12 +53,12 @@ type CommonStoresInterface = {
     };
     storeKeys: Array<String>;
 };
-interface StoreMetaData {
+type StoreMetaData = {
     url: string;
     data: Array<any>;
     autoLoad: boolean;
     authority?: string;
-}
+};
 
 type AppInfo = {
     documentTitle: string | null;
@@ -55,6 +66,8 @@ type AppInfo = {
     appName: string | null;
     appVersion: string | null;
     appLogo: any | null;
+    isUserProfileManaged?: boolean;
+    isLocalizationEnabled?: boolean;
     businessLocals?: {
         ar: {
             [key: string]: string;
@@ -63,6 +76,20 @@ type AppInfo = {
             [key: string]: string;
         };
     };
+    appThemeMode: "dark" | "light";
+    allowThemeChange?: boolean;
+    loginScreenStyle?: {
+        themeMode: "dark" | "light";
+        backgroundImageNameInPublicFolder?: string;
+        backgroundColor?: string;
+    };
+    authenticationMethod: "AZURE" | "APP";
+    azureConfiguration?: {
+        frontEndClientId: string;
+        tenantId: string;
+        redirectURL: string;
+        scopes: Array<string>;
+    };
     businessRoutes?: Array<SystemRoute>;
     businessNavigationItems?: Array<ExtendedTreeItemProps>;
     businessReduxReducers?: {
@@ -73,6 +100,7 @@ type AppInfo = {
     };
     muiPremiumKey: string;
     enableAdministrationModule: boolean;
+    enableUINotifications: Boolean;
     appTheme?: {
         light: {
             primaryColor: string;
@@ -83,6 +111,10 @@ type AppInfo = {
             secondaryColor: string;
         };
     };
+    checkLicense?: {
+        endpoint: string;
+        interval: number;
+    };
 };
 
 declare const BaseApp: React.FC<AppInfo>;
@@ -100,6 +132,7 @@ interface CheckBoxProps {
     value: any;
     disabled?: boolean;
     required?: boolean;
+    hidden?: boolean;
     label: string;
     checkedValue?: any;
     unCheckedValue?: any;
@@ -114,8 +147,14 @@ interface ComboBoxProps {
     label: string;
     disabled?: boolean;
     required?: boolean;
-    options: Array<any>;
+    groupField?: string;
+    commonStoreKey?: string;
+    dataQueryId?: number;
+    storeUrl?: string;
+    storeLoadParam?: any;
+    options?: Array<any>;
     errorMessage?: any;
+    hidden?: boolean;
     displayField: string;
     valueField: string;
     sx?: any;
@@ -127,6 +166,7 @@ interface DatefieldProps {
     label: string;
     disabled?: boolean;
     required?: boolean;
+    hidden?: boolean;
     sx?: any;
     format?: string;
     errorMessage?: any;
@@ -140,6 +180,7 @@ interface DatetimeFieldProps {
     label: string;
     disabled?: boolean;
     required?: boolean;
+    hidden?: boolean;
     format?: string;
     sx?: any;
     errorMessage?: any;
@@ -157,6 +198,7 @@ type SystemLookupListProps = {
     label: string;
     disabled?: boolean;
     required?: boolean;
+    hidden?: boolean;
     errorMessage?: any;
     sx?: any;
 };
@@ -185,6 +227,7 @@ type RecordAction = {
     label?: string;
     icon: IconProp;
     isConfirmationRequired?: boolean;
+    isIdRequired?: Boolean;
     confirmationMessage?: string;
     authority?: string;
     getActionIconStyleForRecord?: (record: any) => object;
@@ -240,6 +283,11 @@ type TemplateGridColDef = GridColDef & {
     options?: Array<object>;
     displayField?: string;
     valueField?: string;
+    commonStoreKey?: string;
+    dataQueryId?: number;
+    storeUrl?: string;
+    storeLoadParam?: any;
+    comboboxGroupField?: string;
 };
 type TemplateGridAttachmentProps = {
     attachmentCode: string;
@@ -270,13 +318,21 @@ type TemplateGridProps = {
     enableExport?: boolean;
     enableDensitySelector?: boolean;
     hideInfoBar?: boolean;
+    hideCreateBtn?: boolean;
     hideBackButton?: boolean;
     apiActions: ApiActions;
     rowSelectionModel?: GridRowSelectionModel;
     setRowSelectionModel?: any;
     setSelectedRecord?: any;
     setSelectedRecordIds?: any;
-    formLoadCallBk?: (formActions: FormActionProps, formManager: UseFormReturn, record: any) => void;
+    formProps?: {
+        formValuesChangeCallBk?: FormValueChangeCallBk;
+    };
+    validationSchema?: z.ZodObject<any, "strip", z.ZodTypeAny, {
+        [x: string]: any;
+    }, {
+        [x: string]: any;
+    }>;
     editMode: {
         editMode: "none";
     } | {
@@ -315,6 +371,12 @@ type RecordFieldProps = {
     fieldLabel: string;
     fieldType: "text" | "number" | "date" | "datetime" | "combobox" | "checkbox" | "html" | "lookup" | "custom";
     lookupType?: string;
+    comboboxValueDataType?: "number" | "string";
+    comboboxGroupField?: string;
+    commonStoreKey?: string;
+    dataQueryId?: number;
+    storeUrl?: string;
+    storeLoadParam?: any;
     required?: boolean;
     disabled?: boolean;
     hidden?: boolean;
@@ -329,9 +391,9 @@ type RecordFieldProps = {
     gridProps?: TemplateGridColumnProps;
     formProps?: {
         fieldSize?: FormElementSize;
+        fieldLabelFn?: (record: any) => string;
         fieldHeight?: number;
         style?: SxProps;
-        onValueChangeCallBack?: (value: any, formManager: UseFormReturn, formActions?: FormActionProps, selectedRecord?: any) => void;
     };
 };
 type FormElementGroupProps = {
@@ -345,7 +407,9 @@ type FormElementGroupProps = {
     formActions?: any;
     hiddenFields?: string[];
     disabledFields?: string[];
+    formValuesChangeCallBk?: FormValueChangeCallBk;
 };
+type FormValueChangeCallBk = (formValues: any, formActions: FormActionProps, formManager: UseFormReturn, fieldName?: string, newValue?: any, selectedRecord?: any) => void;
 type FormElementFieldProps = {
     fieldInfo: RecordFieldProps;
     formManager?: UseFormReturn;
@@ -353,6 +417,7 @@ type FormElementFieldProps = {
     formActions?: any;
     hiddenFields?: string[];
     disabledFields?: string[];
+    formValuesChangeCallBk?: FormValueChangeCallBk;
 };
 type FormElementNodeProps = {
     formManager?: UseFormReturn;
@@ -392,7 +457,7 @@ type TemplateFormProps = {
     apiActions: ApiActions;
     preSaveValidation?: (record: any) => boolean | Promise<boolean>;
     formSavedSuccessfullyCallBk?: (response: any) => void;
-    formLoadCallBk?: (formActions: FormActionProps, formManager: UseFormReturn, record: any) => void;
+    formValuesChangeCallBk?: FormValueChangeCallBk;
     formCloseCallBk?: () => void;
     saveButtonSpecs?: {
         label?: string;
@@ -408,6 +473,11 @@ type TemplateFormProps = {
         actionButtonVariant?: "text" | "outlined" | "contained";
         actionButtonColor?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
     };
+    validationSchema?: z.ZodObject<any, "strip", z.ZodTypeAny, {
+        [x: string]: any;
+    }, {
+        [x: string]: any;
+    }>;
 };
 type TemplateGridTopBarProps = GridToolbarProps & ToolbarPropsOverrides & {
     templateProps: TemplateGridProps;
@@ -451,6 +521,7 @@ type AttachmentImageViewerProps = {
     refKey?: string;
     category?: string;
     showAsAvatar?: boolean;
+    onErrorImage?: string;
     style?: SxProps;
 };
 declare const AttachmentImageViewer: React.FC<AttachmentImageViewerProps>;
@@ -548,6 +619,8 @@ declare const TemplatePieChart: React.FC<WidgetProps>;
 
 declare const DashboardRouteView: React.FC;
 
+declare const FormElementField: React.FC<FormElementFieldProps>;
+
 interface APIRequest {
     endPointURI: string;
     parameters?: any;
@@ -597,6 +670,7 @@ declare const useIsMobile: (breakpoint?: number) => boolean;
 declare const useSession: () => {
     UserSession: any;
     isUserAuthorized: (authorityCode: string) => boolean;
+    isCurrentOrganizationAuthorizedToModule: (moduleCode: string) => Boolean;
     UserInfo: any;
 };
 
@@ -618,12 +692,20 @@ declare const useWindow: (props: TemplateWindowProp) => {
     Window: react.FC<WindowProps>;
 };
 
+declare const useCommonStore: (storeKey: string) => {
+    reload: () => Promise<void>;
+    data: any[];
+    store: StoreMetaData;
+};
+
 declare function hasDigitsOnly(str: string): boolean;
 declare function isNumber(value: any): boolean;
 declare function isNumeric(value: string): boolean;
 declare function capitalizeFirstLetter(str: string): string;
 declare function isValidEmail(email: any): boolean;
 declare function timeAgo(dateInput: any, appDirection: "ltr" | "rtl"): string;
+declare const formatDate: (date: any, format: any) => string;
+declare const parseStringToDate: (dateString: any, format: any) => Date;
 
 declare const DATE_FORMAT = "YYYY-MM-DD";
 declare const DATE_TIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
@@ -632,5 +714,5 @@ declare const LIGHT_THEME_INITIAL_SECANDARY_COLOR = "#ff6d00";
 declare const DARK_THEME_INITIAL_MAIN_COLOR = "#ea690e";
 declare const DARK_THEME_INITIAL_SECANDARY_COLOR = "#74776B";
 
-export { AttachmentCard, AttachmentImageViewer, AttachmentPanel, BaseApp, CheckBox, ComboBox, DARK_THEME_INITIAL_MAIN_COLOR, DARK_THEME_INITIAL_SECANDARY_COLOR, DATE_FORMAT, DATE_TIME_FORMAT, DashboardRouteView, DashboardViewer, Datefield, DatetimeField, ExcelReportViewer, LIGHT_THEME_INITIAL_MAIN_COLOR, LIGHT_THEME_INITIAL_SECANDARY_COLOR, ReportViewer, SystemLookupCombobox, TemplateBarChart, TemplateDataCard, TemplateForm, TemplateGauge, TemplateGrid, TemplateLineChart, TemplateLineProgress, TemplatePieChart, TemplateTextField, TransferList, WorkflowDocumentPanel, WorkflowDocumentTimeLine, WorkflowRouteComponent, capitalizeFirstLetter, constructGridColumnsFromFields, constructValidationSchema, getAllFields, getElementFields, getGridSelection, hasDigitsOnly, isNumber, isNumeric, isValidEmail, timeAgo, useApiActions, useAxios, useConfirmationWindow, useIsMobile, useLoadingMask, useSession, useWindow };
-export type { CommonStores, CommonStoresInterface, EditDeleteAction, ExtendedTreeItemProps, FormActionProps, FormElementFieldProps, FormElementGroupProps, FormElementNodeProps, FormElementProps, FormElementSize, GridSelection, MakeOptional, ModalFormProps, RecordAction, RecordFieldProps, SystemRoute, TemplateFormProps, TemplateGridAttachmentProps, TemplateGridColDef, TemplateGridColumnProps, TemplateGridProps, TemplateGridTopBarProps, TransferListProps };
+export { AttachmentCard, AttachmentImageViewer, AttachmentPanel, BaseApp, CheckBox, ComboBox, DARK_THEME_INITIAL_MAIN_COLOR, DARK_THEME_INITIAL_SECANDARY_COLOR, DATE_FORMAT, DATE_TIME_FORMAT, DashboardRouteView, DashboardViewer, Datefield, DatetimeField, ExcelReportViewer, FormElementField as FormElement, LIGHT_THEME_INITIAL_MAIN_COLOR, LIGHT_THEME_INITIAL_SECANDARY_COLOR, ReportViewer, SystemLookupCombobox, TemplateBarChart, TemplateDataCard, TemplateForm, TemplateGauge, TemplateGrid, TemplateLineChart, TemplateLineProgress, TemplatePieChart, TemplateTextField, TransferList, WorkflowDocumentPanel, WorkflowDocumentTimeLine, WorkflowRouteComponent, capitalizeFirstLetter, constructGridColumnsFromFields, constructValidationSchema, formatDate, getAllFields, getElementFields, getGridSelection, hasDigitsOnly, isNumber, isNumeric, isValidEmail, parseStringToDate, timeAgo, useApiActions, useAxios, useCommonStore, useConfirmationWindow, useIsMobile, useLoadingMask, useSession, useWindow };
+export type { CommonStores, CommonStoresInterface, EditDeleteAction, ExtendedTreeItemProps, FormActionProps, FormElementFieldProps, FormElementGroupProps, FormElementNodeProps, FormElementProps, FormElementSize, FormValueChangeCallBk, GridSelection, MakeOptional, ModalFormProps, RecordAction, RecordFieldProps, StoreMetaData, SystemRoute, TemplateFormProps, TemplateGridAttachmentProps, TemplateGridColDef, TemplateGridColumnProps, TemplateGridProps, TemplateGridTopBarProps, TransferListProps };