@juv/codego-react-ui 3.3.1 → 3.3.5

package/dist/index.js

@@ -822,7 +822,7 @@ var Input = React3.forwardRef(
             id: inputId,
             placeholder: placeholder ?? (inputType === "date" ? "MM/DD/YYYY" : inputType === "dateTime" ? "MM/DD/YYYY HH:mm" : inputType === "time" ? "HH:mm" : void 0),
             className: cn(
-              "flex h-10 w-full rounded-xl border border-slate-900/30 bg-background/50 backdrop-blur-sm px-3 py-5 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-colors hover:bg-background/80  dark:border-white/30 dark:bg-gray-400/5 dark:hover:bg-gray-400/50 dark:focus:bg-gray-400/20",
+              "flex h-10 w-full rounded-xl border bg-background/50 backdrop-blur-sm px-3 py-5 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-colors hover:bg-background/80  dark:bg-gray-400/5 dark:hover:bg-gray-400/25 dark:focus:bg-gray-400/20",
               hasLeftAddon && "pl-10",
               (hasRightAddon || hasReveal) && "pr-10",
               (readOnly || isDateType) && "bg-muted cursor-pointer",
@@ -3065,7 +3065,7 @@ function Combobox({
         "aria-required": required,
         "aria-invalid": !!error,
         className: cn(
-          "flex w-full items-center justify-between gap-2 rounded-xl border border-border bg-background px-3 py-2 text-sm transition-colors   dark:border-white/30 dark:bg-gray-400/5 dark:hover:bg-gray-400/50 dark:focus:bg-gray-400/20",
+          "flex w-full items-center justify-between gap-2 rounded-xl border-2 border-border bg-background px-3 py-2 text-sm transition-colors dark:bg-gray-400/5 dark:hover:bg-gray-400/25 dark:focus:bg-gray-400/20",
           "hover:border-primary/40 focus:outline-none focus:ring-2 focus:ring-ring",
           open && "border-primary ring-2 ring-ring",
           disabled && "opacity-50 cursor-not-allowed pointer-events-none",
@@ -4608,7 +4608,7 @@ function TagInput({
       "div",
       {
         className: cn(
-          "flex flex-wrap gap-1.5 min-h-10 w-full rounded-xl border border-border bg-background px-3 py-2 text-sm transition-colors   dark:border-white/30 dark:bg-gray-400/5 dark:focus:bg-gray-100/10",
+          "flex flex-wrap gap-1.5 min-h-10 w-full rounded-xl border-2 border-border bg-background px-3 py-2 text-sm transition-colors dark:bg-gray-400/5 dark:focus:bg-gray-100/40",
           "focus-within:ring-2 focus-within:ring-ring focus-within:border-primary",
           disabled && "opacity-50 cursor-not-allowed pointer-events-none",
           error && "border-destructive focus-within:ring-destructive",
@@ -4714,7 +4714,7 @@ function OtpInput({
           "aria-required": required,
           "aria-invalid": !!(error || invalid),
           className: cn(
-            "h-12 w-10 rounded-xl border text-center text-lg font-semibold bg-background transition-all outline-none   dark:border-white/30 dark:bg-gray-400/5 dark:hover:bg-gray-400/50 dark:focus:bg-gray-400/20",
+            "h-12 w-10 rounded-xl border-2 border-border text-center text-lg font-semibold bg-background transition-all outline-none dark:bg-gray-400/5 dark:hover:bg-gray-400/25 dark:focus:bg-gray-400/20",
             "focus:ring-2 focus:ring-ring focus:border-primary",
             invalid ? "border-danger focus:ring-danger" : "border-border",
             disabled && "opacity-50 cursor-not-allowed",
@@ -4832,9 +4832,9 @@ function DateRangePicker({
         disabled,
         onClick: () => open ? setOpen(false) : openPicker(),
         className: cn(
-          "flex w-full items-center gap-2 rounded-xl border border-border bg-background px-3 py-2 text-sm transition-colors",
+          "flex w-full items-center gap-2 rounded-xl border-2 border-border bg-background px-3 py-2 text-sm transition-colors",
           "hover:border-primary/40 focus:outline-none focus:ring-2 focus:ring-ring",
-          "dark:border-white/30 dark:bg-gray-400/5",
+          "dark:bg-gray-400/5",
           open && "border-primary ring-2 ring-ring",
           disabled && "opacity-50 cursor-not-allowed pointer-events-none",
           !range2.from && "text-muted-foreground"
@@ -5895,7 +5895,7 @@ var Textarea = React26.forwardRef(
       onBlur?.(e);
     };
     const grammarly = disableGrammarly ? { "data-gramm": "false", "data-gramm_editor": "false", "data-enable-grammarly": "false" } : {};
-    return /* @__PURE__ */ jsxs28("div", { className: "relative w-full", children: [
+    return /* @__PURE__ */ jsxs28("div", { className: "relative  w-full", children: [
       label && /* @__PURE__ */ jsxs28("label", { className: "block text-sm font-medium text-foreground mb-2", children: [
         label,
         required && /* @__PURE__ */ jsx30("span", { className: "text-destructive ml-1", children: "*" })
@@ -5917,7 +5917,7 @@ var Textarea = React26.forwardRef(
           "aria-required": required,
           "aria-invalid": !!error,
           className: cn(
-            "w-full rounded-xl border border-slate-900/30 bg-background/50 backdrop-blur-sm px-4 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-colors hover:bg-background/80   dark:border-white/30 dark:bg-gray-400/5 dark:hover:bg-gray-400/50 dark:focus:bg-gray-400/20",
+            "w-full rounded-xl border-2 border-border bg-background/50 backdrop-blur-sm px-4 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-colors hover:bg-background/80   dark:bg-gray-400/5 dark:hover:bg-gray-400/25 dark:focus:bg-gray-400/20",
             readOnly && "cursor-default bg-muted/40 focus-visible:ring-0",
             autosize && "resize-none overflow-hidden",
             error && "border-destructive focus-visible:ring-destructive",
@@ -6285,7 +6285,7 @@ import { createPortal as createPortal3 } from "react-dom";
 import axios3 from "axios";
 import { ChevronLeft as ChevronLeft6, ChevronRight as ChevronRight8, Search as Search5, Trash2 as Trash22, ChevronsUpDown, ChevronUp, ChevronDown as ChevronDown4, X as X9, Eye as Eye2, Pencil as Pencil2, Trash as Trash3, Loader2 as Loader22 } from "lucide-react";
 import { Fragment as Fragment11, jsx as jsx32, jsxs as jsxs30 } from "react/jsx-runtime";
-function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOverrides }) {
+function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce = 300, transform, manual = false, onSuccess, onError }) {
   const [data, setData] = React28.useState([]);
   const [columns, setColumns] = React28.useState([]);
   const [currentPage, setCurrentPage] = React28.useState(1);
@@ -6293,17 +6293,22 @@ function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOv
   const [loading, setLoading] = React28.useState(false);
   const [error, setError] = React28.useState(null);
   const [tick, setTick] = React28.useState(0);
+  const [searchValue, setSearchValue] = React28.useState("");
+  const debounceTimer = React28.useRef(void 0);
   React28.useEffect(() => {
+    if (manual && tick === 0) return;
     let cancelled = false;
     setLoading(true);
     setError(null);
     axios3.get(url, {
-      params: { ...params, page: currentPage }
+      params: { ...params, page: currentPage, search: searchValue }
     }).then(({ data: res }) => {
       if (cancelled) return;
       const payload = encrypt ? decryptLaravelPayload(res, key) : res;
       if (encrypt && decryptPayloadLog) console.log("[useServerTable] decrypted payload:", payload);
-      setData(payload.data);
+      const transformed = transform ? transform(payload) : payload.data;
+      setData(transformed);
+      onSuccess?.(transformed);
       const rawTotal = payload.total;
       const rawPerPage = payload.per_page;
       const rawLastPage = payload.last_page;
@@ -6319,9 +6324,9 @@ function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOv
         links: payload.links ?? []
       };
       setPagination(pg);
-      if (payload.data.length > 0) {
+      if (transformed.length > 0) {
         setColumns(
-          Object.keys(payload.data[0]).map((k) => {
+          Object.keys(transformed[0]).map((k) => {
             const columnKey = k;
             return {
               key: columnKey,
@@ -6333,14 +6338,24 @@ function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOv
       }
     }).catch((err) => {
       if (cancelled) return;
-      setError(err?.response?.data?.message ?? err.message ?? "Request failed");
+      const errorMsg = err?.response?.data?.message ?? err.message ?? "Request failed";
+      setError(errorMsg);
+      onError?.(new Error(errorMsg));
     }).finally(() => {
       if (!cancelled) setLoading(false);
     });
     return () => {
       cancelled = true;
     };
-  }, [url, currentPage, tick, JSON.stringify(params), encrypt, decryptPayloadLog, JSON.stringify(columnOverrides)]);
+  }, [url, currentPage, tick, JSON.stringify(params), encrypt, decryptPayloadLog, JSON.stringify(columnOverrides), searchValue]);
+  const handleSearchChange = (value) => {
+    setSearchValue(value);
+    setCurrentPage(1);
+    if (debounceTimer.current) clearTimeout(debounceTimer.current);
+    debounceTimer.current = setTimeout(() => {
+      setTick((t) => t + 1);
+    }, debounce);
+  };
   return {
     data,
     columns,
@@ -6350,7 +6365,9 @@ function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOv
     loading,
     error,
     goToPage: (page) => setCurrentPage(page),
-    reload: () => setTick((t) => t + 1)
+    reload: () => setTick((t) => t + 1),
+    searchValue,
+    onSearchChange: handleSearchChange
   };
 }
 var MODAL_WIDTH = {
@@ -10120,7 +10137,7 @@ function GroupNavigation({
             group.collapsible && "cursor-pointer hover:text-foreground"
           ),
           children: [
-            /* @__PURE__ */ jsx43("span", { className: "flex-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: group.label }),
+            /* @__PURE__ */ jsx43("span", { className: "flex-1 text-xs font-semibold uppercase tracking-wider text-primary/50 text-left", children: group.label }),
             group.collapsible && (isOpen ? /* @__PURE__ */ jsx43(ChevronDown6, { className: "h-3 w-3 text-muted-foreground" }) : /* @__PURE__ */ jsx43(ChevronRight10, { className: "h-3 w-3 text-muted-foreground" }))
           ]
         }
@@ -10948,7 +10965,7 @@ function Panel({
           }
         ),
         /* @__PURE__ */ jsxs41("div", { className: "relative z-10 flex flex-1 min-w-0 flex-col", children: [
-          /* @__PURE__ */ jsxs41("header", { className: "flex h-14 shrink-0 items-center justify-between border-b glass px-4 gap-2", children: [
+          /* @__PURE__ */ jsxs41("header", { className: "flex h-14 shrink-0 items-center justify-between border-b border-b-slate-300/50 px-4 gap-2", children: [
             /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2", children: [
               collapsible && sidebar && /* @__PURE__ */ jsx46(
                 Tooltip,
@@ -10981,7 +10998,7 @@ function Panel({
             ] })
           ] }),
           /* @__PURE__ */ jsxs41("main", { className: "flex-1 overflow-y-auto p-4", children: [
-            error && /* @__PURE__ */ jsx46("div", { className: "mb-4 p-3 rounded-md bg-destructive/10 text-destructive text-sm", children: error }),
+            error && /* @__PURE__ */ jsx46("div", { className: "mb-4 p-3 rounded-md bg-destructive/50 text-destructive text-sm", children: error }),
             loading && /* @__PURE__ */ jsx46("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx46(Loader24, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }),
             showEmpty && /* @__PURE__ */ jsx46("div", { className: "flex items-center justify-center h-full text-muted-foreground", children: emptyState }),
             !loading && !showEmpty && children
@@ -12682,6 +12699,94 @@ function Wizard({
     className
   ), children: panel });
 }
+
+// src/lib/codego/axiosInstance.ts
+import axios5 from "axios";
+var axiosInstance = axios5.create({
+  baseURL: "/",
+  timeout: 1e4,
+  headers: {
+    "Content-Type": "application/json",
+    Accept: "application/json"
+  }
+});
+
+// src/lib/codego/request.ts
+var request = async (config) => {
+  try {
+    const response = await axiosInstance(config);
+    return response.data;
+  } catch (error) {
+    throw error.response?.data || error;
+  }
+};
+
+// src/lib/codego/interceptors.ts
+var setupInterceptors = () => {
+  axiosInstance.interceptors.request.use(
+    (config) => {
+      const token = localStorage.getItem("token");
+      if (token && !config.skipAuth) {
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+      return config;
+    },
+    (error) => Promise.reject(error)
+  );
+  axiosInstance.interceptors.response.use(
+    (response) => response,
+    (error) => {
+      if (error.response?.status === 401) {
+        console.warn("Unauthorized - redirect login");
+      }
+      return Promise.reject(error);
+    }
+  );
+};
+
+// src/lib/codego/index.ts
+setupInterceptors();
+var api = {
+  get: (url, config) => request({ method: "GET", url, ...config }),
+  post: (url, data, config) => request({ method: "POST", url, data, ...config }),
+  put: (url, data, config) => request({ method: "PUT", url, data, ...config }),
+  patch: (url, data, config) => request({ method: "PATCH", url, data, ...config }),
+  delete: (url, config) => request({ method: "DELETE", url, ...config })
+};
+
+// src/core/storage/store.ts
+import { create } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
+function createStore(initialValue, sessionName, expireInterval) {
+  if (expireInterval) {
+    const expireKey = `${sessionName}_expires`;
+    const now = Date.now();
+    const storedExpire = localStorage.getItem(expireKey);
+    if (storedExpire && now > parseInt(storedExpire)) {
+      localStorage.removeItem(sessionName);
+      localStorage.removeItem(expireKey);
+    }
+    localStorage.setItem(expireKey, (now + expireInterval).toString());
+  }
+  const store = create()(
+    persist(
+      (set) => ({
+        ...initialValue,
+        set: (val) => set((prev) => ({ ...prev, ...val }))
+      }),
+      {
+        name: sessionName,
+        storage: createJSONStorage(() => localStorage)
+      }
+    )
+  );
+  const getStore = () => {
+    const state = store.getState();
+    const { set, ...rest } = state;
+    return JSON.stringify(rest);
+  };
+  return { store, getStore };
+}
 export {
   Accordion,
   Authentication,
@@ -12778,6 +12883,8 @@ export {
   TreeView,
   Widget,
   Wizard,
+  api,
+  createStore,
   useServerBulletin,
   useServerDataGrid,
   useServerTable,

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "3.3.1",
+  "version": "3.3.5",
   "description": "Reusable React UI components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -45,7 +45,8 @@
     "react-dom": ">=18",
     "react-leaflet": "^5.0.0",
     "react-router-dom": "^7.13.1",
-    "tailwind-merge": "^3.5.0"
+    "tailwind-merge": "^3.5.0",
+    "zustand": "^5.0.12"
   },
   "devDependencies": {
     "@types/express": "^4.17.21",