unifyedx-storybook-new 0.1.40 → 0.1.42

package/dist/unifyedx-storybook-new.css

@@ -72,7 +72,6 @@
     --color-teal-700: oklch(51.1% .096 186.391);
     --color-blue-50: oklch(97% .014 254.604);
     --color-blue-100: oklch(93.2% .032 255.585);
-    --color-blue-200: oklch(88.2% .059 254.128);
     --color-blue-300: oklch(80.9% .105 251.813);
     --color-blue-400: oklch(70.7% .165 254.624);
     --color-blue-500: oklch(62.3% .214 259.815);
@@ -80,8 +79,6 @@
     --color-blue-700: oklch(48.8% .243 264.376);
     --color-blue-800: oklch(42.4% .199 265.638);
     --color-blue-900: oklch(37.9% .146 265.522);
-    --color-indigo-600: oklch(51.1% .262 276.966);
-    --color-indigo-800: oklch(39.8% .195 277.366);
     --color-purple-500: oklch(62.7% .265 303.9);
     --color-gray-50: oklch(98.5% .002 247.839);
     --color-gray-100: oklch(96.7% .003 264.542);
@@ -567,10 +564,6 @@
     margin-left: calc(var(--spacing) * -4);
   }
 
-  .ml-2 {
-    margin-left: calc(var(--spacing) * 2);
-  }
-
   .block {
     display: block;
   }
@@ -1040,10 +1033,6 @@
     border-color: var(--color-black);
   }
 
-  .border-blue-200 {
-    border-color: var(--color-blue-200);
-  }
-
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
@@ -1086,10 +1075,6 @@
     background-color: #fff;
   }
 
-  .bg-black {
-    background-color: var(--color-black);
-  }
-
   .bg-black\/30 {
     background-color: #0000004d;
   }
@@ -1100,10 +1085,6 @@
     }
   }
 
-  .bg-blue-50 {
-    background-color: var(--color-blue-50);
-  }
-
   .bg-blue-100 {
     background-color: var(--color-blue-100);
   }
@@ -1313,6 +1294,10 @@
     font-size: 18px;
   }
 
+  .text-\[24px\] {
+    font-size: 24px;
+  }
+
   .leading-5 {
     --tw-leading: calc(var(--spacing) * 5);
     line-height: calc(var(--spacing) * 5);
@@ -1366,12 +1351,8 @@
     color: #1c274c;
   }
 
-  .text-\[\#6b7280\] {
-    color: #6b7280;
-  }
-
-  .text-\[\#252525\] {
-    color: #252525;
+  .text-\[\#101112\] {
+    color: #101112;
   }
 
   .text-\[\#767676\] {
@@ -1426,10 +1407,6 @@
     color: var(--color-green-500);
   }
 
-  .text-indigo-600 {
-    color: var(--color-indigo-600);
-  }
-
   .text-purple-500 {
     color: var(--color-purple-500);
   }
@@ -1466,10 +1443,6 @@
     opacity: .7;
   }
 
-  .opacity-90 {
-    opacity: .9;
-  }
-
   .opacity-100 {
     opacity: 1;
   }
@@ -1643,10 +1616,6 @@
       }
     }
 
-    .hover\:text-\[\#1f6ed4\]:hover {
-      color: #1f6ed4;
-    }
-
     .hover\:text-blue-800:hover {
       color: var(--color-blue-800);
     }
@@ -1667,10 +1636,6 @@
       color: var(--color-gray-900);
     }
 
-    .hover\:text-indigo-800:hover {
-      color: var(--color-indigo-800);
-    }
-
     .hover\:text-red-500:hover {
       color: var(--color-red-500);
     }
@@ -4517,7 +4482,6 @@ body {
   z-index: 0;
   box-sizing: border-box;
   width: 100%;
-  padding: 1.25rem;
   position: relative;
 }
 
@@ -8559,7 +8523,6 @@ body.toast-backdrop #ui-toast-backdrop {
 .page-layout {
   position: relative;
   width: 100%;
-  padding: 1.25rem; /* py-5 */
   z-index: 0;
   box-sizing: border-box;
 }
@@ -9967,7 +9930,6 @@ body.toast-backdrop #ui-toast-backdrop {
 }
 /* FullConfigPage Styles */
 .full-config-page {
-  margin: 28px auto;
   padding: 18px;
   background: #f5f6f8;
   min-height: 100vh;

package/dist/unifyedx-storybook-new.es.js

@@ -75156,7 +75156,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
     }
   }, [section.key, data, updateHandler]);
   return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "h2",
       {
         style: {
@@ -75164,11 +75164,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
           fontWeight: "bold",
           marginBottom: "10px"
         },
-        children: [
-          section.title,
-          " - ",
-          section.type
-        ]
+        children: section.title
       }
     ),
     /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", marginBottom: "10px" }, children: section.description }),
@@ -75205,6 +75201,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
               }
             },
             required: field.required,
+            disabled: field.disabled ? field.disabled : false,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
           }
         ),
@@ -75227,6 +75224,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             },
             rows: 3,
             required: field.required,
+            disabled: field.disabled ? field.disabled : false,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
           }
         ),
@@ -75249,6 +75247,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
               }
             },
             required: field.required,
+            disabled: field.disabled ? field.disabled : false,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
           }
         ),
@@ -75268,6 +75267,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
               }
             },
             label: field.placeholder || field.label,
+            disabled: field.disabled ? field.disabled : false,
             className: "w-full"
           }
         ),
@@ -75290,6 +75290,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             options: field.options || [],
             placeholder: field.placeholder || `Select ${field.label}`,
             required: field.required,
+            disabled: field.disabled ? field.disabled : false,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
           }
         ),
@@ -75312,6 +75313,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
               }
             },
             required: field.required,
+            disabled: field.disabled ? field.disabled : false,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
           }
         ),
@@ -75334,6 +75336,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
               }
             },
             required: field.required,
+            disabled: field.disabled ? field.disabled : false,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
           }
         ),
@@ -75356,6 +75359,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
               }
             },
             required: field.required,
+            disabled: field.disabled ? field.disabled : false,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
           }
         ),
@@ -75375,6 +75379,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             },
             options: field.options || [],
             placeholder: field.placeholder || `Select ${field.label}`,
+            disabled: field.disabled ? field.disabled : false,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
           }
         ),
@@ -75393,7 +75398,8 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
                 updateHandler(section.key, newData);
               }
             },
-            label: field.placeholder || field.label
+            label: field.placeholder || field.label,
+            disabled: field.disabled ? field.disabled : false
           }
         ),
         validationErrors[section.key]?.[field.key] && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: validationErrors[section.key][field.key] })
@@ -75411,6 +75417,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             }
           },
           placeholder: field.placeholder || "Select date",
+          disabled: field.disabled ? field.disabled : false,
           error: validationErrors[section.key]?.[field.key],
           className: "w-full"
         }
@@ -75428,6 +75435,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             }
           },
           placeholder: field.placeholder || "Select date range",
+          disabled: field.disabled ? field.disabled : false,
           error: validationErrors[section.key]?.[field.key],
           className: "w-full"
         }
@@ -75445,6 +75453,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
               }
             },
             options: field.options || [],
+            disabled: field.disabled ? field.disabled : false,
             className: "w-full"
           }
         ),
@@ -75877,7 +75886,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
             /* @__PURE__ */ jsx(
               "button",
               {
-                className: "text-indigo-600 font-semibold hover:text-indigo-800",
+                className: "text-blue-600 font-semibold hover:text-blue-800",
                 onClick: () => {
                   setAudienceFieldName(field.key);
                   setAudienceRowId(rowIndex);
@@ -76036,7 +76045,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
         /* @__PURE__ */ jsx(
           "button",
           {
-            className: "bg-black text-white px-6 py-2 rounded-2xl cursor-pointer hover:bg-gray-800",
+            className: "btn btn-primary text-white px-6 py-2 rounded-2xl cursor-pointer hover:bg-gray-800",
             onClick: addBlankRow,
             children: "Add"
           }
@@ -76151,7 +76160,8 @@ function Mt(t){if(typeof document=="undefined")return;let o=document.head||docum
 function DynamicConfig({
   appid,
   configdata = null,
-  disableApi = false
+  disableApi = false,
+  onCancel
 }) {
   const [config, setConfig] = React__default.useState(configdata);
   const [data, setData] = React__default.useState(null);
@@ -76474,6 +76484,10 @@ function DynamicConfig({
     saveData();
   };
   const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+      return;
+    }
     const hasUnsavedChanges = validationErrors && Object.keys(validationErrors).length > 0;
     if (hasUnsavedChanges) {
       const confirmed = window.confirm(
@@ -76527,13 +76541,10 @@ function DynamicConfig({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "dynamic-config bg-white border rounded-t-2xl border-gray-300 w-full h-[calc(100vh-350px)] overflow-y-auto",
-        style: { padding: "20px", fontFamily: "Arial, sans-serif" },
+        className: "dynamic-config bg-white w-full h-[calc(100vh-350px)] overflow-y-auto",
+        style: { padding: "0px 20px 0px 0px" },
         children: [
-          loading && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center mb-4 p-4 bg-blue-50 border border-blue-200 rounded", children: [
-            /* @__PURE__ */ jsx(Spinner, { size: "small" }),
-            /* @__PURE__ */ jsx("span", { className: "ml-2 text-blue-700", children: "Loading configuration..." })
-          ] }),
+          loading && /* @__PURE__ */ jsx(Spinner, { size: "small" }),
           configurationSections?.map((section, index) => {
             const C = getComponentForType(section.type);
             if (C && C !== "UnknownType") {
@@ -76552,7 +76563,7 @@ function DynamicConfig({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "w-full gap-5 bg-white flex justify-end py-3 px-7 rounded-t-md rounded-b-2xl border border-gray-300", children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-full gap-5 bg-white flex justify-end py-3 px-7 rounded-t-md rounded-b-2xl border border-gray-300", style: { boxShadow: "0 -2px 10px 0 rgba(0, 0, 0, 0.20)", marginTop: "20px" }, children: [
       /* @__PURE__ */ jsx(
         UnifyedCoreButton,
         {
@@ -76610,6 +76621,7 @@ const FullConfigPage = ({
   disableApi = false
 }) => {
   const [activeTab, setActiveTab] = useState(0);
+  const [showCancelModal, setShowCancelModal] = useState(false);
   const {
     pageHeader = {},
     appletHeader = {},
@@ -76621,8 +76633,22 @@ const FullConfigPage = ({
     heading: "App Details",
     subHeading: "View app details and customize configurations to align with institutional requirements.",
     isLeftArrow: true,
+    onBackClick: () => window.history.back(),
     ...pageHeader
   };
+  const breadcrumbItems = breadcrumb.map((item) => ({
+    label: item.text,
+    href: item.href || "#"
+  }));
+  const handleCancelRequest = () => {
+    setShowCancelModal(true);
+  };
+  const handleCancelConfirm = (result) => {
+    setShowCancelModal(false);
+    if (result.primary) {
+      window.history.back();
+    }
+  };
   const defaultAppletHeader = {
     heading: "Application",
     subHeading: "Application configuration and details",
@@ -76650,7 +76676,7 @@ const FullConfigPage = ({
   };
   const tabs = [
     { label: "Overview", content: renderOverview(defaultOverview) },
-    { label: "Configuration", content: /* @__PURE__ */ jsx(DynamicConfig, { appid, configdata: { configuration }, disableApi }) }
+    { label: "Configuration", content: /* @__PURE__ */ jsx(DynamicConfig, { appid, configdata: { configuration }, disableApi, onCancel: handleCancelRequest }) }
   ];
   function renderIcon(icon) {
     if (!icon) {
@@ -76704,30 +76730,21 @@ const FullConfigPage = ({
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { className: "full-config-page", children: [
-    /* @__PURE__ */ jsxs("div", { className: "py-3 flex items-center gap-4", children: [
-      defaultPageHeader.isLeftArrow && /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "cursor-pointer flex-shrink-0 mt-1",
-          "aria-label": "Go back",
-          onClick: () => window.history.back(),
-          children: /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M19 12H5M12 19l-7-7 7-7", stroke: "#6b7280", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
-        /* @__PURE__ */ jsx("h1", { className: "text-[18px] font-semibold leading-tight truncate m-0", children: defaultPageHeader.heading }),
-        /* @__PURE__ */ jsx("p", { className: "text-[13px] font-normal text-[#6b7280] opacity-90 mt-1 truncate mb-0", children: defaultPageHeader.subHeading })
-      ] })
-    ] }),
-    breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx("nav", { className: "flex gap-2 items-center text-[13px] text-[#6b7280] mb-4", "aria-label": "Breadcrumb", children: breadcrumb.map((item, index) => /* @__PURE__ */ jsxs("span", { className: "flex items-center", children: [
-      index > 0 && /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", style: { margin: "0 2px" }, children: /* @__PURE__ */ jsx("path", { d: "M9 18L15 12L9 6", stroke: "#6b7280", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
-      item.isCurrent ? /* @__PURE__ */ jsx("span", { className: "font-semibold text-[#252525]", children: item.text }) : /* @__PURE__ */ jsx("a", { href: item.href, className: "hover:text-[#1f6ed4] cursor-pointer", style: { textDecoration: "none" }, children: item.text })
-    ] }, index)) }),
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        heading: defaultPageHeader.heading,
+        subHeading: breadcrumbItems.length > 0 ? void 0 : defaultPageHeader.subHeading,
+        breadcrumbItems,
+        isLeftArrow: defaultPageHeader.isLeftArrow,
+        onBackClick: defaultPageHeader.onBackClick
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: "bg-[#ffffff] border border-[#eef2f6] rounded-[12px] px-6 py-5 flex gap-4 items-start mb-4 shadow-sm", children: [
       /* @__PURE__ */ jsx("div", { className: "icon w-[72px] h-[72px] rounded-full flex items-center justify-center bg-[#F5F5F6] text-[#1C274C] font-bold text-[18px]", children: renderIcon(defaultAppletHeader.icon) }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-[18px] font-semibold m-0 leading-tight truncate", children: defaultAppletHeader.heading }),
-        /* @__PURE__ */ jsx("p", { className: "text-[13px] text-[#767676] mt-1 mb-0 max-w-[800px] leading-normal", children: defaultAppletHeader.subHeading }),
+        /* @__PURE__ */ jsx("h2", { className: "text-[24px] font-semibold m-0 leading-tight truncate", children: defaultAppletHeader.heading }),
+        /* @__PURE__ */ jsx("p", { className: "text-[13px] text-[#101112] mt-1 mb-0 max-w-[800px] leading-normal", children: defaultAppletHeader.subHeading }),
         /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: defaultAppletHeader.tags && defaultAppletHeader.tags.map((tag, index) => /* @__PURE__ */ jsx(
           "span",
           {
@@ -76748,8 +76765,20 @@ const FullConfigPage = ({
         },
         index
       )) }) }),
-      /* @__PURE__ */ jsx("div", { className: "p-6 h-full overflow-y-auto", children: tabs[activeTab].content })
-    ] })
+      /* @__PURE__ */ jsx("div", { className: "p-8 h-full overflow-y-auto", children: tabs[activeTab].content })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        isOpen: showCancelModal,
+        onClose: handleCancelConfirm,
+        variant: "warning",
+        title: "Are you sure you want to cancel?",
+        primaryButtonText: "Proceed",
+        secondaryButtonText: "Cancel",
+        children: "Your unsaved changes will be lost if you proceed."
+      }
+    )
   ] });
 };