next-recomponents 2.0.1 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-recomponents",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "description nueva",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/alert/index.tsx

@@ -1,27 +1,149 @@
-import { catColor } from "../button/colors";
-
-interface Props extends React.HTMLAttributes<HTMLDivElement> {
-  color?:
-    | "white"
-    | "primary"
-    | "secondary"
-    | "info"
-    | "danger"
-    | "warning"
-    | "success";
-  children: React.ReactNode;
-}
-export default function Alert({
-  color = "primary",
-  children,
-  ...props
-}: Props) {
-  return (
+"use client";
+import { useState } from "react";
+
+function usePopup() {
+  const [popup, setPopup] = useState<{
+    type: "alert" | "confirm" | "prompt";
+    message: string;
+    visible: boolean;
+    inputValue: string;
+    onConfirm?: (value?: string) => void;
+    onCancel?: () => void;
+  }>({ type: "alert", message: "", visible: false, inputValue: "" });
+
+  function alert(message: string): Promise<void> {
+    return new Promise((resolve) => {
+      setPopup({
+        type: "alert",
+        message,
+        visible: true,
+        inputValue: "",
+        onConfirm: () => resolve(),
+      });
+    });
+  }
+
+  function confirm(message: string): Promise<boolean> {
+    return new Promise((resolve) => {
+      setPopup({
+        type: "confirm",
+        message,
+        visible: true,
+        inputValue: "",
+        onConfirm: () => resolve(true),
+        onCancel: () => resolve(false),
+      });
+    });
+  }
+
+  function prompt(message: string): Promise<string | null> {
+    return new Promise((resolve) => {
+      setPopup({
+        type: "prompt",
+        message,
+        visible: true,
+        inputValue: "",
+        onConfirm: (value) => resolve(value ?? ""),
+        onCancel: () => resolve(null),
+      });
+    });
+  }
+
+  function close(confirmed: boolean, value?: string) {
+    setPopup((prev) => {
+      if (confirmed) prev.onConfirm?.(value);
+      else prev.onCancel?.();
+      return { ...prev, visible: false, inputValue: "" };
+    });
+  }
+
+  const PopupComponent = popup.visible ? (
     <div
-      className={[catColor[color], "p-2 rounded shadow border"].join(" ")}
-      {...props}
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        background: "rgba(0,0,0,0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1000,
+      }}
     >
-      {children}
+      <div
+        style={{
+          background: "#fff",
+          padding: "24px 32px",
+          borderRadius: "8px",
+          minWidth: "300px",
+          textAlign: "center",
+          boxShadow: "0 4px 20px rgba(0,0,0,0.2)",
+        }}
+      >
+        <p style={{ margin: "0 0 16px", fontSize: "16px" }}>{popup.message}</p>
+
+        {popup.type === "prompt" && (
+          <input
+            autoFocus
+            type="text"
+            value={popup.inputValue}
+            onChange={(e) =>
+              setPopup((prev) => ({ ...prev, inputValue: e.target.value }))
+            }
+            onKeyDown={(e) =>
+              e.key === "Enter" && close(true, popup.inputValue)
+            }
+            style={{
+              width: "100%",
+              padding: "8px 12px",
+              marginBottom: "16px",
+              border: "1px solid #d1d5db",
+              borderRadius: "6px",
+              fontSize: "14px",
+              boxSizing: "border-box",
+            }}
+          />
+        )}
+
+        <div style={{ display: "flex", gap: "8px", justifyContent: "center" }}>
+          {(popup.type === "confirm" || popup.type === "prompt") && (
+            <button
+              onClick={() => close(false)}
+              style={{
+                padding: "8px 24px",
+                background: "#e5e7eb",
+                color: "#374151",
+                border: "none",
+                borderRadius: "6px",
+                cursor: "pointer",
+                fontSize: "14px",
+              }}
+            >
+              Cancelar
+            </button>
+          )}
+          <button
+            onClick={() => close(true, popup.inputValue)}
+            style={{
+              padding: "8px 24px",
+              background: "#3b82f6",
+              color: "#fff",
+              border: "none",
+              borderRadius: "6px",
+              cursor: "pointer",
+              fontSize: "14px",
+            }}
+          >
+            OK
+          </button>
+        </div>
+      </div>
     </div>
-  );
+  ) : null;
+
+  return { alert, confirm, prompt, PopupComponent };
 }
+
+export default usePopup;

package/src/index.tsx

@@ -1,4 +1,3 @@
-export { default as Alert } from "./alert";
 export { default as Button } from "./button";
 export { default as Container } from "./container";
 export { default as Form } from "./form";
@@ -18,3 +17,4 @@ export { default as MyCalendar } from "./calendar";
 export { useFormValues } from "./form";
 export { default as DocumentViewer } from "./doc-viewer";
 export { default as Table3 } from "./table3";
+export { default as usePopup } from "./alert";

package/src/table/index.tsx

@@ -34,6 +34,7 @@ interface TableProps {
   hideColumns?: string[];
   footer?: FooterType;
   symbols?: any;
+
   [key: string]: any;
 }
 export default function Table(props: TableProps) {
@@ -88,7 +89,7 @@ function IHTable({
   buttons,
   exportName,
   modal,
-  height = 370,
+  height = 600,
   width = "100%",
   header,
   hideColumns = [],
@@ -118,7 +119,7 @@ function IHTable({
     if (!rows.length) return [];
 
     const arr = Object.keys(rows[0])
-      .filter((key) => !key.startsWith("_") && !hideColumns.includes(key)) // 👈 omitimos campos privados
+      .filter((key) => !key.startsWith("_") && !hideColumns.includes(key))
       .map((key, i) => ({
         field: key,
         headerName: key,
@@ -128,6 +129,7 @@ function IHTable({
         renderCell: buttons?.[key]
           ? (params: any) =>
               React.cloneElement(buttons[key], {
+                className: (params?.className ?? "") + " m-auto text-xs ",
                 children: params?.row?.[key],
                 onClick: (e: any) => {
                   e.row = params?.row;
@@ -164,6 +166,7 @@ function IHTable({
 
     return arr;
   }, [rows]);
+
   const handleRowUpdate = (newRow: GridRowModel) => {
     if (!newRow.id) throw new Error("Fila sin id");
     newRow._edited = true;
@@ -171,15 +174,6 @@ function IHTable({
     return newRow;
   };
 
-  // useEffect(() => {
-  //   if (modal) {
-  //     const ids = Array.from(selectedRows?.ids || []);
-  //     if (ids.length == 1) {
-  //       // ref.current?.showModal();
-  //       handleOpen();
-  //     }
-  //   }
-  // }, [selectedRows]);
   const ref = useRef<HTMLDialogElement>(null);
   const cat1: any = {
     1: 110,
@@ -203,6 +197,7 @@ function IHTable({
     }
     return filtered;
   }, [selectedRows]);
+
   return (
     rows.length > 0 && (
       <Box
@@ -215,13 +210,7 @@ function IHTable({
         }}
       >
         {modal && (
-          <Dialog
-            open={open}
-            onClose={handleClose}
-            maxWidth="xl"
-            fullWidth
-            // className="w-lg h-screen rounded-lg p-6 shadow-lg border border-gray-300 bg-white"
-          >
+          <Dialog open={open} onClose={handleClose} maxWidth="xl" fullWidth>
             <div className="flex justify-end">
               <button
                 onClick={() => {
@@ -293,7 +282,6 @@ function IHTable({
           checkboxSelection={Boolean(onSelect)}
           rowSelectionModel={selectedRows}
           onRowSelectionModelChange={(newSelection) => {
-            console.log(newSelection);
             setSelectedRows(newSelection);
           }}
           sx={{
@@ -305,8 +293,6 @@ function IHTable({
           editMode="row"
           processRowUpdate={handleRowUpdate}
           pageSizeOptions={[5, 10]}
-          // pagination={true}
-          // hideFooter={hideFooter}
         />
         <CustomFooter footer={footer || {}} rows={rows} />
       </Box>
@@ -314,17 +300,48 @@ function IHTable({
   );
 }
 
-function CustomFooter(props: any) {
-  const { rows, footer } = props; // si necesitas filas, pásalas externamente
+function CustomFooter({
+  rows,
+  footer,
+}: {
+  rows: GridValidRowModel[];
+  footer: FooterType;
+}) {
+  const entries = Object.entries(footer);
+  if (!entries.length) return null;
+
+  const compute = (key: string, type: "sum" | "avg" | "count") => {
+    const values = rows
+      .map((r) => Number(r[key] ?? 0))
+      .filter((v) => !isNaN(v));
+    if (type === "sum") return values.reduce((acc, v) => acc + v, 0);
+    if (type === "avg")
+      return values.length
+        ? values.reduce((acc, v) => acc + v, 0) / values.length
+        : 0;
+    if (type === "count") return values.length;
+    return 0;
+  };
+
+  const label: Record<string, string> = {
+    sum: "Suma",
+    avg: "Promedio",
+    count: "Conteo",
+  };
 
   return (
-    <div>
-      {Object.keys(footer).map((k) => {
-        const total = rows.reduce((acc: number, r: any) => acc + r[k], 0);
+    <div className="flex justify-end gap-6 px-4 py-2 bg-gray-100 border-t border-gray-300 text-sm font-semibold text-gray-700">
+      {entries.map(([key, type]) => {
+        const value = compute(key, type);
+        const formatted =
+          type === "avg"
+            ? value.toLocaleString(undefined, { maximumFractionDigits: 2 })
+            : value.toLocaleString();
         return (
-          <div className="flex justify-end w-full pr-4 font-bold" key={k}>
-            Suma de {k}: {total}
-          </div>
+          <span key={key}>
+            {label[type]} de <span className="text-gray-900">{key}</span>:{" "}
+            <span className="text-blue-700">{formatted}</span>
+          </span>
         );
       })}
     </div>

package/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2017",
+    "target": "ES2019",
     "module": "ESNext",
     "jsx": "react-jsx",
     "declaration": true,