next-recomponents 1.0.0

package/src/select/index.tsx

@@ -0,0 +1,212 @@
+import React, {
+  ReactElement,
+  ReactNode,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import SelectIcon from "./icon";
+import CloseIcon from "./close";
+
+interface CustomSelectProps
+  extends React.DetailedHTMLProps<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > {
+  label?: string;
+  placeholder?: string;
+  children: ReactNode;
+  name: string;
+  value?: string;
+  onChange?: any;
+  className?: string;
+  strictMode?: boolean;
+}
+export default function Select({
+  label,
+  placeholder = "Selecciona...",
+  children,
+  strictMode = true,
+  ...props
+}: CustomSelectProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState(props?.value || "");
+  const [options, setOptions] = useState<{ value: string; label: string }[]>(
+    []
+  );
+  const [filtered, setFiltered] = useState<{ value: string; label: string }[]>(
+    []
+  );
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const validOption = (value: string) => {
+    return options.find((opt) => opt.label == value);
+  };
+  useEffect(() => {
+    const parsedOptions = React.Children.toArray(children)
+      .filter((child): child is ReactElement => {
+        return (child as ReactElement).type === "option";
+      })
+      .map((child) => {
+        const el = child as ReactElement;
+        return {
+          value: el.props.value,
+          label: el.props.children,
+        };
+      });
+    setOptions(parsedOptions);
+    setFiltered(parsedOptions);
+  }, [children]);
+
+  useEffect(() => {
+    setFiltered(
+      options.filter((opt) =>
+        opt?.label?.toLowerCase()?.includes(inputValue?.toLowerCase())
+      )
+    );
+    setHighlightedIndex(-1);
+  }, [inputValue, options]);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlightedIndex((prev) => Math.min(prev + 1, filtered.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlightedIndex((prev) => Math.max(prev - 1, 0));
+    } else if (e.key === "Enter" && highlightedIndex >= 0) {
+      e.preventDefault();
+      selectOption(filtered[highlightedIndex]);
+    } else if (e.key === "Escape") {
+      setIsOpen(false);
+    }
+  };
+
+  const selectOption = (opt: { value: string; label: string }) => {
+    setInputValue(opt.label);
+    setIsOpen(false);
+  };
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [openUpwards, setOpenUpwards] = useState(false);
+  useEffect(() => {
+    if (isOpen && containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const spaceAbove = rect.top;
+
+      // Si hay menos de 200px abajo y más espacio arriba, abrir hacia arriba
+      if (spaceBelow < 200 && spaceAbove > spaceBelow) {
+        setOpenUpwards(true);
+      } else {
+        setOpenUpwards(false);
+      }
+    }
+  }, [isOpen]);
+  return (
+    <div ref={containerRef} className="w-full">
+      {label && <label className="font-bold mb-1 block">{label}</label>}
+      <div className="relative">
+        <input
+          autoComplete="off"
+          ref={inputRef}
+          {...props}
+          className={[
+            "p-2 w-full rounded border shadow",
+            props?.className,
+          ].join(" ")}
+          value={inputValue}
+          onBlur={(e) => {
+            const item = validOption(e.target.value);
+
+            if (!item) {
+              if (strictMode) {
+                e.target.value = "";
+                setInputValue("");
+                e.currentTarget.classList.remove("bg-green-200");
+                e.currentTarget.classList.add("bg-red-200");
+                return;
+              }
+            } else {
+              e.target.value = item?.value || item.label;
+              e.currentTarget.classList.add("bg-green-200");
+              e.currentTarget.classList.remove("bg-red-200");
+            }
+
+            props.onChange(e);
+          }}
+          onChange={(e) => {
+            setInputValue(e.target.value);
+            props.onChange?.(e);
+          }}
+          placeholder={placeholder}
+          onFocus={() => setIsOpen(true)}
+          onKeyDown={handleKeyDown}
+        />
+        {!isOpen && (
+          <div className="absolute top-0 right-0 flex flex-col justify-center items-center px-2 py-2 font-bold">
+            <SelectIcon />
+          </div>
+        )}
+        {isOpen && inputValue != "" && (
+          <button
+            onClick={(e) => {
+              setIsOpen(true);
+              setInputValue("");
+              if (inputRef?.current && strictMode) {
+                inputRef.current.classList.remove("bg-green-200");
+                inputRef.current.classList.add("bg-red-200");
+              }
+            }}
+            className="absolute top-0 right-0 flex flex-col justify-center items-center px-2 py-2 font-bold text-red-500"
+          >
+            <CloseIcon />
+          </button>
+        )}
+        {isOpen && filtered.length > 0 && (
+          <div
+            className={`absolute w-full border rounded shadow bg-white z-10 max-h-60 overflow-y-auto ${
+              openUpwards ? "bottom-full mb-1" : "mt-1"
+            }`}
+          >
+            {filtered.map((opt, index) => (
+              <div
+                key={index}
+                className={`p-2 cursor-pointer ${
+                  index === highlightedIndex
+                    ? "bg-blue-100"
+                    : "hover:bg-gray-100"
+                }`}
+                onMouseDown={() => {
+                  props.onChange({
+                    target: { value: opt?.value || opt.label },
+                  });
+
+                  const item = validOption(opt.label);
+                  if (inputRef?.current) {
+                    if (!item) {
+                      if (strictMode) {
+                        inputRef.current.value = "";
+                        inputRef.current.classList.remove("bg-green-200");
+                        inputRef.current.classList.add("bg-red-200");
+                        return;
+                      }
+                    } else {
+                      inputRef.current.classList.add("bg-green-200");
+                      inputRef.current.classList.remove("bg-red-200");
+                    }
+                  }
+
+                  selectOption(opt);
+                }}
+              >
+                {opt.label}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/table/export.tsx

@@ -0,0 +1,29 @@
+import * as XLSX from "xlsx";
+import { saveAs } from "file-saver";
+export default function useExportdata() {
+  return {
+    export: (data: any[], fileName: string = "archivo") => {
+      // utils/exportToExcel.ts
+
+      // Convertir el array a una hoja de cálculo
+      const worksheet = XLSX.utils.json_to_sheet(data);
+
+      // Crear un libro de trabajo (workbook)
+      const workbook = XLSX.utils.book_new();
+      XLSX.utils.book_append_sheet(workbook, worksheet, "Datos");
+
+      // Escribir el archivo en formato binario
+      const excelBuffer = XLSX.write(workbook, {
+        bookType: "xlsx",
+        type: "array",
+      });
+
+      // Crear un Blob y descargar el archivo
+      const blob = new Blob([excelBuffer], {
+        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      });
+
+      saveAs(blob, `${fileName}.xlsx`);
+    },
+  };
+}

package/src/table/filter.menu.tsx

@@ -0,0 +1,188 @@
+import { Dispatch, useEffect, useState } from "react";
+import Input from "../input";
+import { FilterOffIcon } from "./filters";
+
+export default function FilterMenu({
+  h,
+  mapedData,
+  selectedFilter,
+  index,
+  filters,
+  setFilters,
+  setSelectedFilter,
+  items,
+}: {
+  h: string;
+  mapedData: any[];
+  selectedFilter: number | null;
+  index: number;
+  filters: any;
+  setFilters: Dispatch<any>;
+  setSelectedFilter: Dispatch<any>;
+  items: any[];
+}) {
+  const [visibleFloat, setVisibleFloat] = useState(false);
+  const [text, setText] = useState("");
+  const [newMapedData, setNewMapedData] = useState<Array<any>>([]);
+
+  useEffect(() => {
+    setNewMapedData(
+      [...new Set<string>(mapedData.map((md: any) => md[h].content))].filter(
+        (item) => {
+          return item && `${item}`.toLowerCase().includes(text.toLowerCase());
+        }
+      )
+    );
+  }, [mapedData, text]);
+  useEffect(() => {
+    setText("");
+  }, [selectedFilter]);
+
+  return (
+    selectedFilter == index && (
+      <>
+        <div
+          className="absolute bg-white border rounded min-w-[200px] "
+          style={{ zIndex: 9999999 }}
+        >
+          <div className="flex flex-col items-start text-black">
+            {filters[h].length != items.length && (
+              <div
+                className="flex gap-1 w-full hover:bg-gray-100 p-3 cursor-pointer"
+                onClick={(e) => {
+                  const newFilters = { ...filters };
+                  newFilters[h] = [...items];
+                  setFilters(newFilters);
+                }}
+              >
+                <div className="text-red-500">
+                  <FilterOffIcon />
+                </div>{" "}
+                Limpiar filtro de "{h}"
+              </div>
+            )}
+            {/* <div
+              className="flex w-full items-center flex-row justify-between hover:bg-gray-100 p-3 cursor-pointer"
+              onPointerEnter={() => {
+                setVisibleFloat(true);
+              }}
+              onPointerLeave={(e) => {
+                setVisibleFloat(false);
+              }}
+            >
+              Filtros de Texto <ArrowIcon />
+              {visibleFloat && (
+                <div className="absolute -right-[200px] border shadow w-[200px] bg-white flex flex-col items-start">
+                  <div className="hover:bg-gray-100 w-full text-left p-2">
+                    Es igual
+                  </div>
+                  <div className="hover:bg-gray-100 w-full text-left p-2">
+                    No es igual
+                  </div>
+                  <hr />
+                  <div className="hover:bg-gray-100 w-full text-left p-2">
+                    Empieza con
+                  </div>
+                  <div className="hover:bg-gray-100 w-full text-left p-2">
+                    Termina con
+                  </div>
+                  <hr />
+                  <div className="hover:bg-gray-100 w-full text-left p-2">
+                    Contiene
+                  </div>
+                  <div className="hover:bg-gray-100 w-full text-left p-2">
+                    No contiene
+                  </div>
+                </div>
+              )}
+            </div> */}
+            <div className="flex w-full items-center flex-row justify-between hover:bg-gray-100 p-3 cursor-pointer">
+              <Input
+                label={null}
+                type="search"
+                placeholder="Buscar..."
+                value={text}
+                onChange={(e) => {
+                  setFilters({ ...filters, [h]: [] });
+                  setText(e.target.value);
+                }}
+              />
+            </div>
+            <div className="px-2   w-full  h-[150px]">
+              <div
+                style={{ overflow: "auto" }}
+                className="border h-full flex gap-2 flex-col  p-1"
+              >
+                <div className="flex gap-2 items-center justify-start ">
+                  <label>
+                    <input
+                      type="checkbox"
+                      checked={filters[h].length == items.length}
+                      onChange={(e) => {
+                        const newFilters = { ...filters };
+                        if (filters[h].length == items.length) {
+                          newFilters[h] = [];
+                        } else {
+                          newFilters[h] = [...items];
+                        }
+                        setFilters(newFilters);
+                      }}
+                    />{" "}
+                    (Seleccionar todo)
+                  </label>
+                </div>
+                {newMapedData.map((item: string, key: number) => {
+                  const checked = filters[h]?.find((i: any) => i == item);
+                  return (
+                    <div
+                      className="flex gap-2 items-center justify-start"
+                      key={item}
+                    >
+                      <label>
+                        <input
+                          type="checkbox"
+                          checked={!!checked}
+                          onChange={(e) => {
+                            const newFilters = { ...filters };
+                            newFilters[h] = newFilters[h] || [];
+                            const index = newFilters[h].findIndex(
+                              (nf: any) => nf == item
+                            );
+                            if (index >= 0) {
+                              newFilters[h].splice(index, 1);
+                            } else {
+                              newFilters[h].push(item);
+                            }
+                            setFilters(newFilters);
+                          }}
+                        />{" "}
+                        {item}
+                      </label>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            <div className="w-full p-1">
+              <div className="flex flex-row  gap-2 justify-end w-full ">
+                <button
+                  onClick={(e) => setSelectedFilter(null)}
+                  className="p-1 border rounded shadow hover:bg-gray-100"
+                >
+                  Aceptar
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>{" "}
+        <div
+          className="w-full h-screen fixed top-0 left-0"
+          style={{ zIndex: 9999997 }}
+          onClick={(e) => {
+            setSelectedFilter(null);
+          }}
+        ></div>
+      </>
+    )
+  );
+}

package/src/table/filters.tsx

@@ -0,0 +1,77 @@
+export function FilterOffIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 24 24"
+      height="20px"
+      width="20px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M6.92893 0.514648L21.0711 14.6568L19.6569 16.071L15.834 12.2486L14 14.9999V21.9999H10V14.9999L4 5.99993H3V3.99993L7.585 3.99965L5.51472 1.92886L6.92893 0.514648ZM21 3.99993V5.99993H20L18.085 8.87193L13.213 3.99993H21Z"></path>
+    </svg>
+  );
+}
+
+export function ExcelIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 24 24"
+      height="20px"
+      width="20px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M2.85858 2.87732L15.4293 1.0815C15.7027 1.04245 15.9559 1.2324 15.995 1.50577C15.9983 1.52919 16 1.55282 16 1.57648V22.4235C16 22.6996 15.7761 22.9235 15.5 22.9235C15.4763 22.9235 15.4527 22.9218 15.4293 22.9184L2.85858 21.1226C2.36593 21.0522 2 20.6303 2 20.1327V3.86727C2 3.36962 2.36593 2.9477 2.85858 2.87732ZM17 2.99997H21C21.5523 2.99997 22 3.44769 22 3.99997V20C22 20.5523 21.5523 21 21 21H17V2.99997ZM10.2 12L13 7.99997H10.6L9 10.2857L7.39999 7.99997H5L7.8 12L5 16H7.39999L9 13.7143L10.6 16H13L10.2 12Z"></path>
+    </svg>
+  );
+}
+export function EditIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 576 512"
+      height="20px"
+      width="20px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"></path>
+    </svg>
+  );
+}
+export function ArrowIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 512 512"
+      height="20px"
+      width="20px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z"></path>
+    </svg>
+  );
+}
+
+export function FilterIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 24 24"
+      height="20px"
+      width="20px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M21 4V6H20L15 13.5V22H9V13.5L4 6H3V4H21ZM6.4037 6L11 12.8944V20H13V12.8944L17.5963 6H6.4037Z"></path>
+    </svg>
+  );
+}

package/src/table/h.tsx

@@ -0,0 +1,185 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { TableProps } from ".";
+import TD from "./td";
+import { FilterOffIcon } from "./filters";
+import FilterMenu from "./filter.menu";
+
+export default function HTable({
+  data,
+  mapedData,
+  setMapedData,
+  symbols,
+  totals,
+  exportName,
+  ...props
+}: TableProps) {
+  const [selected, setSelected] = useState<number | null>(null);
+  const [selectedFilter, setSelectedFilter] = useState<number | null>(null);
+  const modalRef = useRef<HTMLDialogElement>(null);
+  const [filters, setFilters] = useState<any>({});
+  const head = useMemo(() => {
+    return [...new Set<string>(data.map((d: any) => Object.keys(d)).flat())];
+  }, [data]);
+
+  const mapedTotals = useMemo(() => {
+    return mapedData.reduce((acc: any, md: any) => {
+      head.forEach((h) => {
+        const value = isNaN(+md[h].content) ? 0 : +md[h].content;
+        if (acc[h]) {
+          acc[h] += value;
+        } else {
+          acc[h] = value;
+        }
+      });
+      return acc;
+    }, {});
+  }, [mapedData]);
+
+  useEffect(() => {
+    setFilters({
+      ...head.reduce((acc, hh) => {
+        const newAcc: any = { ...acc };
+        newAcc[hh] = [
+          ...new Set<string>(mapedData.map((md: any) => md[hh].content)),
+        ];
+        return newAcc;
+      }, {}),
+    });
+  }, [mapedData, head]);
+
+  useEffect(() => {
+    const newData = data.map((d: any, trkey: number) => {
+      const obj: any = {};
+      for (let key in d) {
+        const typeOf = typeof d[key];
+        const isObject = typeOf == "object";
+        const isDate = typeOf == "string" && d[key].includes("T");
+        const cellTypeOf = isDate ? "date" : isObject ? "object" : typeOf;
+        const content =
+          cellTypeOf == "date"
+            ? d[key].split("T").join(" ").split(".")[0]
+            : cellTypeOf == "object"
+            ? JSON.stringify(d[key])
+            : d[key];
+        obj[key] = {
+          originalData: content,
+          cellTypeOf: cellTypeOf,
+          title: content,
+          content,
+          name: key,
+        };
+      }
+      return obj;
+    });
+
+    setMapedData(newData);
+  }, [data]);
+  return (
+    <table {...props} className="w-full border-collapse table-auto">
+      <thead className="bg-gray-800 text-white">
+        <tr>
+          {head.map((h, key) => {
+            const items = [
+              ...new Set<string>(mapedData.map((item: any) => item[h].content)),
+            ];
+            return (
+              <th
+                key={key}
+                className="whitespace-nowrap overflow-hidden text-ellipsis max-w-[200px] border-b p-5"
+              >
+                <div
+                  className="cursor-pointer flex "
+                  onClick={(e) => {
+                    setSelectedFilter(key == selectedFilter ? null : key);
+                  }}
+                >
+                  <div className="text-white w-full bg-black rounded p-1 flex justify-center">
+                    {h}{" "}
+                    {filters[h]?.length != items.length && (
+                      <div className="text-red-300">
+                        <FilterOffIcon />
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                <FilterMenu
+                  filters={filters}
+                  setFilters={setFilters}
+                  items={items}
+                  h={h}
+                  mapedData={mapedData}
+                  index={key}
+                  selectedFilter={selectedFilter}
+                  setSelectedFilter={setSelectedFilter}
+                />
+              </th>
+            );
+          })}
+        </tr>
+      </thead>
+      <tbody className="divide-y divide-gray-200">
+        {mapedData
+          .filter((md: any) => {
+            for (let datum of Object.keys(md)) {
+              if (
+                !filters[datum]
+                  .map((d: any) => `${d}`.toLowerCase())
+                  .includes(`${md[datum].content}`.toLowerCase())
+              ) {
+                return false;
+              }
+            }
+            return true;
+          })
+          .map((md: any, trKey: number) => {
+            const color = trKey % 2 == 0 ? "bg-white" : "bg-gray-100";
+            return (
+              <tr
+                onDoubleClick={(e) => {
+                  modalRef.current?.showModal();
+                }}
+                key={trKey}
+                onClick={(e) => setSelected(trKey)}
+                className={[
+                  "hover:bg-green-100 ",
+                  color,
+                  selected == trKey && "bg-green-200 hover:bg-green-300",
+                ].join(" ")}
+              >
+                {head.map((h, tdKey: number) => {
+                  return (
+                    <TD
+                      key={tdKey}
+                      index={trKey}
+                      symbols={symbols}
+                      item={md[h]}
+                      color={color}
+                    />
+                  );
+                })}
+              </tr>
+            );
+          })}
+      </tbody>
+      <tfoot className="bg-gray-800 text-white">
+        <tr>
+          {head.map((h, fkey) => {
+            return (
+              <th key={fkey} className="text-right border-b max-w-[200px] p-5 ">
+                {totals && totals.includes(h) && (
+                  <div className="flex justify-between text-white w-full bg-black rounded p-1">
+                    <div className="p-1">
+                      {symbols && symbols[h] && symbols[h]}
+                    </div>
+                    <div className="p-1">{mapedTotals[h]}</div>
+                  </div>
+                )}
+              </th>
+            );
+          })}
+        </tr>
+      </tfoot>
+    </table>
+  );
+}