@asaleh37/ui-base 1.2.15 → 1.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asaleh37/ui-base",
-  "version": "1.2.15",
+  "version": "1.2.16",
   "description": "",
   "license": "ISC",
   "author": "Ahmed Saleh Mohamed",
@@ -37,14 +37,11 @@
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@types/react": "^19.1.6",
+    "@types/react": "^19.1.8",
     "@types/react-dom": "^19.0.3",
     "@types/react-i18next": "^7.8.3",
     "@vitejs/plugin-react": "^4.3.4",
-    "axios": "^1.8.1",
-    "draft-js": "^0.11.7",
-    "draft-js-import-html": "^1.4.1",
-    "draftjs-to-html": "^0.9.1",
+    "axios": "^1.8.1",    
     "eslint": "^9.19.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.18",
@@ -56,8 +53,7 @@
     "moment": "^2.30.1",
     "oidc-client-ts": "^3.1.0",
     "react": "^19.1.0",
-    "react-dom": "^19.0.0",
-    "react-draft-wysiwyg": "^1.15.0",
+    "react-dom": "^19.0.0",    
     "react-hook-form": "^7.54.2",
     "react-i18next": "^15.4.0",
     "react-redux": "^9.2.0",
@@ -96,10 +92,7 @@
     "@mui/x-tree-view": "^7.26.0",
     "@react-spring/web": "^9.7.5",
     "@reduxjs/toolkit": "^2.5.1",
-    "axios": "^1.8.1",
-    "draft-js": "^0.11.7",
-    "draft-js-import-html": "^1.4.1",
-    "draftjs-to-html": "^0.9.1",
+    "axios": "^1.8.1",    
     "global": "^4.4.0",
     "i18next": "^24.2.2",
     "i18next-browser-languagedetector": "^8.0.3",
@@ -107,8 +100,7 @@
     "moment": "^2.30.1",
     "oidc-client-ts": "^3.1.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-draft-wysiwyg": "^1.15.0",
+    "react-dom": "^19.0.0",    
     "react-hook-form": "^7.54.2",
     "react-i18next": "^15.4.0",
     "react-redux": "^9.2.0",
@@ -121,8 +113,7 @@
     "stylis-plugin-rtl": "^2.1.1",
     "zod": "^3.24.2"
   },
-  "dependencies": {
-    "@rollup/plugin-json": "^6.1.0",
-    "vite-tsconfig-paths": "^5.1.4"
+  "dependencies": {    
+    "@rollup/plugin-json": "^6.1.0"    
   }
 }

package/public/icons/LICENSE.md

@@ -0,0 +1,5 @@
+Bootstrap Icons
+https://icons.getbootstrap.com
+
+Licensed under MIT license
+https://github.com/twbs/icons/blob/main/LICENSE.md

package/public/icons/arrow-clockwise.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
+  <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+</svg>

package/public/icons/arrow-counterclockwise.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
+  <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
+</svg>

package/public/icons/journal-text.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-text" viewBox="0 0 16 16">
+  <path d="M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
+  <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
+  <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
+</svg>

package/public/icons/justify.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-justify" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+</svg>

package/public/icons/text-center.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-center" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M4 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+</svg>

package/public/icons/text-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-left" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+</svg>

package/public/icons/text-paragraph.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-paragraph" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5z"/>
+</svg>

package/public/icons/text-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-right" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+</svg>

package/public/icons/type-bold.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-bold" viewBox="0 0 16 16">
+  <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
+</svg>

package/public/icons/type-italic.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-italic" viewBox="0 0 16 16">
+  <path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>
+</svg>

package/public/icons/type-strikethrough.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-strikethrough" viewBox="0 0 16 16">
+  <path d="M6.333 5.686c0 .31.083.581.27.814H5.166a2.776 2.776 0 0 1-.099-.76c0-1.627 1.436-2.768 3.48-2.768 1.969 0 3.39 1.175 3.445 2.85h-1.23c-.11-1.08-.964-1.743-2.25-1.743-1.23 0-2.18.602-2.18 1.607zm2.194 7.478c-2.153 0-3.589-1.107-3.705-2.81h1.23c.144 1.06 1.129 1.703 2.544 1.703 1.34 0 2.31-.705 2.31-1.675 0-.827-.547-1.374-1.914-1.675L8.046 8.5H1v-1h14v1h-3.504c.468.437.675.994.675 1.697 0 1.826-1.436 2.967-3.644 2.967z"/>
+</svg>

package/public/icons/type-underline.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-underline" viewBox="0 0 16 16">
+  <path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136zM12.5 15h-9v-1h9v1z"/>
+</svg>

package/src/components/administration/dev/MailBodyGrid.tsx

@@ -90,7 +90,7 @@ const MailBodyGrid: React.FC<MailBodyGridProps> = (props) => {
         },
       },
     },
-	{
+    {
       type: "field",
       mode: "props",
       props: {
@@ -117,7 +117,8 @@ const MailBodyGrid: React.FC<MailBodyGridProps> = (props) => {
         fieldLabel: "MAIL_BODY_BODY_CONTENT",
         fieldName: "bodyContent",
         required: true,
-        fieldType: "html",
+        fieldType: "text",
+        muiTextFieldProps: { multiline: true, rows: 6 },
       },
     },
 

package/src/components/common/Home.tsx

@@ -3,34 +3,33 @@ import { Box } from "@mui/material";
 import { TemplateForm } from "../templates";
 import ReportViewer from "../templates/report/ReportViewer";
 import WorkflowDocumentPanel from "../templates/workflow/WorkflowDocumentPanel";
-import ExampleDashboard from "../templates/visuals/ExampleDashboard";
 import DashboardViewer from "../templates/visuals/DashboardViewer";
 
 const Home: React.FC = () => {
   return (
-    <DashboardViewer dashboardCode="XX_TEMPLATE_DASHBOARD" />
-    // <Box
-    //   sx={{
-    //     display: "flex",
-    //     flexDirection: "column",
-    //     alignItems: "center",
-    //     justifyContent: "center",
-    //     flex: 1,
-    //     fontSize: 24,
-    //     fontWeight: "bold",
-    //   }}
-    // >
-    //  <img src="logo.png" style={{ margin: 5 }} />
-    // <div>Welcome to Ezzsteel Flat Product Management System</div>
-    // <div style={{ fontSize: 16 }}>
-    //   Use side menu [
-    //   <FontAwesomeIcon
-    //     icon="bars"
-    //     style={{ marginLeft: 10, marginRight: 10 }}
-    //   />
-    //   ] to navigate to your authorized system modules
-    // </div>
-    // </Box>
+    // <DashboardViewer dashboardCode="XX_TEMPLATE_DASHBOARD" />
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        flex: 1,
+        fontSize: 24,
+        fontWeight: "bold",
+      }}
+    >
+      <img src="logo.png" style={{ margin: 5 }} />
+      <div>Welcome to Ezzsteel Flat Product Management System</div>
+      <div style={{ fontSize: 16 }}>
+        Use side menu [
+        <FontAwesomeIcon
+          icon="bars"
+          style={{ marginLeft: 10, marginRight: 10 }}
+        />
+        ] to navigate to your authorized system modules
+      </div>
+    </Box>
   );
 };
 

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormElementField.tsx

@@ -7,7 +7,6 @@ import CheckBox from "./FormFields/CheckBox";
 import { DATE_FORMAT, DATE_TIME_FORMAT } from "../../../../util/constants";
 import { isNumeric } from "../../../../util/AppUtils";
 import { FormElementFieldProps } from "../DataEntryTypes";
-import HtmlEditor from "./FormFields/HtmlEditor";
 import SystemLookupCombobox from "./FormFields/SystemLookupCombobox";
 
 const FormElementField: React.FC<FormElementFieldProps> = (
@@ -219,25 +218,6 @@ const FormElementField: React.FC<FormElementFieldProps> = (
               fieldName
             ]?.message?.toString()}
           />
-        ) : props?.fieldType === "html" ? (
-          <HtmlEditor
-            label={props.fieldLabel}
-            value={formValues[fieldName] || ""}
-            errorMessage={formManager?.formState?.errors[
-              fieldName
-            ]?.message?.toString()}
-            setValue={(v) => {
-              formManager.setValue(fieldName, v);
-              if (props?.formProps?.onValueChangeCallBack) {
-                props?.formProps?.onValueChangeCallBack(
-                  v,
-                  formManager,
-                  formActions
-                );
-              }
-            }}
-            maxLength={4000}
-          />
         ) : (
           <>Unknown field type</>
         )}

package/src/components/templates/index.ts

@@ -12,7 +12,6 @@ export { default as DatetimeField } from "./DataEntryTemplates/TemplateDataForm/
 export { default as TemplateTextField } from "./DataEntryTemplates/TemplateDataForm/FormFields/TemplateTextField";
 export { default as TemplateForm } from "./DataEntryTemplates/TemplateDataForm/TemplateForm";
 export { default as TemplateGrid } from "./DataEntryTemplates/TemplateDataGrid/TemplateGrid";
-export { default as HtmlEditor } from "./DataEntryTemplates/TemplateDataForm/FormFields/HtmlEditor";
 
 export type * from "./DataEntryTemplates/DataEntryTypes";
 export type { TransferListProps } from "./TransferList";

package/src/index.ts

@@ -1,7 +1,3 @@
-// Ensure global is defined before anything else loads draft-js
-if (typeof global === 'undefined') {
-  (global as any) = globalThis;
-}
 export * from "./components";
 export * from "./hooks";
 export * from "./util";

package/src/redux/features/common/SideBarSlice.ts

@@ -15,11 +15,9 @@ const SideBarSlice = createSlice({
   initialState,
   reducers: {
     toggleSideBarState: (state) => {
-      debugger;
       state.isOpened = !state.isOpened;
     },
     setSideBarState: (state, action) => {
-      debugger;
       state.isOpened = action.payload;
     },
   },

package/vite.config.ts

@@ -14,12 +14,7 @@ export default defineConfig({
   },
   build: {
     rollupOptions: {
-      plugins: [
-        rollupNodePolyFill(),
-        inject({
-          global: [require.resolve("./src/global-shim"), "global"], // Inject our shim
-        }),
-      ],
+      plugins: [rollupNodePolyFill()],
     },
   },
   server: {

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/HtmlEditor.tsx

@@ -1,144 +0,0 @@
-import { EditorState, convertToRaw } from "draft-js";
-import { Editor } from "react-draft-wysiwyg";
-import draftToHtml from "draftjs-to-html";
-import { stateFromHTML } from "draft-js-import-html";
-import { useState } from "react";
-import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
-import { useEffect } from "react";
-import { Box, Paper } from "@mui/material";
-import { useTranslation } from "react-i18next";
-
-type HtmlEditorProps = {
-  label?: string;
-  value: string;
-  setValue: (v: any) => void;
-  maxLength: number;
-  errorMessage?: string;
-};
-
-const HtmlEditor: React.FC<HtmlEditorProps> = ({
-  label,
-  errorMessage,
-  value,
-  setValue,
-  maxLength,
-}) => {
-  const { t } = useTranslation();
-  const options = {
-    customInlineFn: (element, { Style }) => {
-      if (element.style.color) {
-        return Style("color-" + element.style.color);
-      }
-    },
-  };
-
-  let contentState = stateFromHTML(value, options);
-
-  const [editorState, setEditorState] = useState(
-    EditorState.createWithContent(contentState)
-  );
-  let onEditorStateChange = (editorState) => {
-    let newData = draftToHtml(convertToRaw(editorState.getCurrentContent()));
-    console.log("Text Length " + newData.length);
-    if (newData.length > maxLength) {
-      let contentState = stateFromHTML(
-        newData.substring(0, maxLength),
-        options
-      );
-      setEditorState(EditorState.createWithContent(contentState));
-      return;
-    } else {
-      setEditorState(editorState);
-    }
-    setValue(draftToHtml(convertToRaw(editorState.getCurrentContent())));
-  };
-  useEffect(() => {
-    if (value != draftToHtml(convertToRaw(editorState.getCurrentContent()))) {
-      setEditorState(
-        EditorState.createWithContent(stateFromHTML(value, options))
-      );
-    }
-  }, [value]);
-  const _getLengthOfSelectedText = () => {
-    const currentSelection = editorState.getSelection();
-    const isCollapsed = currentSelection.isCollapsed();
-
-    let length = 0;
-
-    if (!isCollapsed) {
-      const currentContent = editorState.getCurrentContent();
-      const startKey = currentSelection.getStartKey();
-      const endKey = currentSelection.getEndKey();
-      const startBlock = currentContent.getBlockForKey(startKey);
-      const isStartAndEndBlockAreTheSame = startKey === endKey;
-      const startBlockTextLength = startBlock.getLength();
-      const startSelectedTextLength =
-        startBlockTextLength - currentSelection.getStartOffset();
-      const endSelectedTextLength = currentSelection.getEndOffset();
-      const keyAfterEnd = currentContent.getKeyAfter(endKey);
-      if (isStartAndEndBlockAreTheSame) {
-        length +=
-          currentSelection.getEndOffset() - currentSelection.getStartOffset();
-      } else {
-        let currentKey = startKey;
-
-        while (currentKey && currentKey !== keyAfterEnd) {
-          if (currentKey === startKey) {
-            length += startSelectedTextLength + 1;
-          } else if (currentKey === endKey) {
-            length += endSelectedTextLength;
-          } else {
-            length += currentContent.getBlockForKey(currentKey).getLength() + 1;
-          }
-
-          currentKey = currentContent.getKeyAfter(currentKey);
-        }
-      }
-    }
-
-    return length;
-  };
-  return (
-    <Paper
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        padding: 1,
-      }}
-    >
-      {label ? <Box>{t(label)}</Box> : <></>}
-      <Editor
-        editorState={editorState}
-        onEditorStateChange={onEditorStateChange}
-        handlePastedText={(pastedText) => {
-          const currentContent = editorState.getCurrentContent();
-          const currentContentLength = currentContent.getPlainText("").length;
-          const selectedTextLength = _getLengthOfSelectedText();
-
-          if (
-            currentContentLength + pastedText.length - selectedTextLength >
-            maxLength
-          ) {
-            alert("max text length is " + maxLength);
-            return "handled";
-          }
-        }}
-        editorStyle={{
-          height: "200px", // 👈 set height of content area
-          border: "1px solid #F1F1F1",
-          padding: "10px",
-          overflow: "auto", // scroll if needed
-        }}
-        wrapperStyle={{ marginBottom: "1rem" }}
-        toolbarStyle={{ border: "1px solid #ccc" }}
-      />
-      {errorMessage ? (
-        <Box sx={{ color: "red" }}>{t(errorMessage)}</Box>
-      ) : (
-        <></>
-      )}
-    </Paper>
-  );
-};
-
-export default HtmlEditor;

package/src/global-shim.ts

@@ -1,4 +0,0 @@
-// src/global-shim.ts
-if (typeof global === 'undefined') {
-  (globalThis as any).global = globalThis;
-}