next-recomponents 1.0.0

package/src/table/index.tsx

@@ -0,0 +1,55 @@
+import { ReactNode, useState } from "react";
+import HTable from "./h";
+import useExport from "./export";
+import { ExcelIcon } from "./filters";
+
+export interface TableProps
+  extends React.DetailedHTMLProps<
+    React.TableHTMLAttributes<HTMLTableElement>,
+    HTMLTableElement
+  > {
+  data: Record<string, any> | Array<Record<string, any>>;
+  dataTypes?: Record<string, any>;
+  mapedData?: any;
+  setMapedData?: any;
+  totals?: Array<string>;
+  symbols?: Record<string, ReactNode>;
+  exportName?: string;
+}
+
+export default function Table(props: TableProps) {
+  const [mapedData, setMapedData] = useState([]);
+  const isArray = Array.isArray(props.data);
+  const exported = useExport();
+  return (
+    <div className="bg-gray-200 border rounded shadow p-1">
+      {props?.exportName && (
+        <button
+          className="p-2 border rounded shadow bg-green-800 text-white flex gap-1"
+          onClick={(e) =>
+            exported.export(
+              mapedData.map((md: any) => {
+                for (let i of Object.keys(md)) {
+                  md[i] = md[i].content;
+                }
+                return md;
+              }),
+              props.exportName
+            )
+          }
+        >
+          <ExcelIcon /> Exportar
+        </button>
+      )}
+      {isArray && (
+        <HTable
+          {...{
+            ...props,
+            mapedData,
+            setMapedData,
+          }}
+        />
+      )}
+    </div>
+  );
+}

package/src/table/td.tsx

@@ -0,0 +1,75 @@
+import React, { useMemo, useState } from "react";
+import { EditIcon } from "./filters";
+
+interface TDProps
+  extends React.DetailedHTMLProps<
+    React.TdHTMLAttributes<HTMLTableCellElement>,
+    HTMLTableCellElement
+  > {
+  index: number;
+  item: { cellTypeOf: string; content: string; title: string; name: string };
+  color: string;
+  symbols: Record<string, any> | undefined;
+}
+export default function TD({
+  className,
+  item,
+  index,
+  color,
+  symbols,
+
+  ...props
+}: TDProps) {
+  const [isHidded, setIsHidded] = useState(false);
+  const isNode = useMemo(() => {
+    return (
+      symbols &&
+      typeof symbols[item.name] == "object" &&
+      symbols[item.name]?.props
+    );
+  }, [symbols]);
+  const newProps =
+    symbols &&
+    isNode &&
+    Object.keys(symbols[item.name].props).reduce(
+      (acc: any, i) => {
+        try {
+          const newAcc = { ...acc };
+          const hasEvent = `${i}`.startsWith("on");
+          if (hasEvent) {
+            newAcc[i] = (e: any) => {
+              e.item = item;
+              symbols[item.name].props[i]?.(e);
+            };
+          }
+          return newAcc;
+        } catch (error) {}
+      },
+      { defaultValue: item.content }
+    );
+  return (
+    <td
+      onDoubleClick={(e) => setIsHidded(!isHidded)}
+      title={item.title}
+      className={[
+        isHidded && color,
+        !isHidded && "whitespace-nowrap overflow-hidden text-ellipsis   ",
+        "border-b max-w-[200px] p-5 ",
+        ["number", "money"].includes(item.cellTypeOf) && "text-right",
+      ].join(" ")}
+    >
+      <div className={symbols && symbols[item.name] && "flex justify-between"}>
+        <div>
+          {symbols &&
+            symbols[item.name] &&
+            (isNode
+              ? React.cloneElement(symbols[item.name], {
+                  ...newProps,
+                })
+              : symbols[item.name])}
+        </div>
+        <div>{item.content}</div>
+      </div>
+    </td>
+  );
+}

package/src/text-area/index.tsx

@@ -0,0 +1,52 @@
+import React, {
+  DetailedHTMLProps,
+  TextareaHTMLAttributes,
+  useState,
+} from "react";
+
+interface Props
+  extends DetailedHTMLProps<
+    TextareaHTMLAttributes<HTMLTextAreaElement>,
+    HTMLTextAreaElement
+  > {
+  label?: React.ReactNode;
+  maxLength?: number;
+}
+export default function TextArea({
+  label,
+  className,
+  maxLength,
+  onChange,
+  children = "",
+  ...props
+}: Props) {
+  const [value, setValue] = useState<string>(children as string);
+  return (
+    <div className="w-full">
+      <label className="flex flex-col gap-1">
+        <div className="font-bold ">{label}</div>
+        <div>
+          <textarea
+            {...props}
+            className={["p-1 w-full rounded border shadow", className].join(
+              " "
+            )}
+            onChange={(e) => {
+              if (maxLength) {
+                e.target.value = e.target.value.slice(0, maxLength);
+              }
+              setValue(e.target.value);
+              onChange?.(e);
+            }}
+            value={value}
+          ></textarea>
+          {maxLength && (
+            <div className=" text-xs text-gray text-right">
+              {value.length} / {maxLength}
+            </div>
+          )}
+        </div>
+      </label>
+    </div>
+  );
+}

package/src/use-resources/encode.decode.tsx

@@ -0,0 +1,25 @@
+"use client";
+import CryptoJS from "crypto-js";
+import useToken from "./get.token";
+// import { config } from "dotenv";
+// config();
+
+export const encryptData = (data: object, secretKey: string): string => {
+  const stringData = JSON.stringify(data);
+  const encriptedText = CryptoJS.AES.encrypt(stringData, secretKey).toString();
+  window.localStorage.setItem("resources", encriptedText);
+  return encriptedText;
+};
+
+export const decryptData = (secretKey: string): any => {
+  const ciphertext = window.localStorage.getItem("resources");
+  if (!ciphertext) return null;
+
+  try {
+    const bytes = CryptoJS.AES.decrypt(ciphertext, secretKey);
+    const decrypted = bytes.toString(CryptoJS.enc.Utf8);
+    return JSON.parse(decrypted);
+  } catch (error) {
+    return null;
+  }
+};

package/src/use-resources/get.token.tsx

@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+
+export default function useToken(): string {
+  const token = useMemo(() => {
+    if (typeof window != "undefined") {
+      const t = window.localStorage.getItem("token");
+      if (!t) throw Error("Token undefined");
+
+      return t;
+    }
+    return "";
+  }, [typeof window]);
+
+  return token;
+}

package/src/use-resources/http.codes.ts

@@ -0,0 +1,77 @@
+const httpStatusCodes = [
+  {
+    code: 100,
+    meaning:
+      "Continue: El servidor ha recibido los encabezados y el cliente debe continuar con la solicitud.",
+  },
+  {
+    code: 101,
+    meaning: "Switching Protocols: El servidor acepta cambiar de protocolo.",
+  },
+  { code: 200, meaning: "OK: La solicitud fue exitosa." },
+  { code: 201, meaning: "Created: Recurso creado exitosamente." },
+  {
+    code: 202,
+    meaning: "Accepted: La solicitud ha sido aceptada pero aún no procesada.",
+  },
+  {
+    code: 204,
+    meaning: "No Content: Éxito, pero sin contenido para devolver.",
+  },
+  {
+    code: 301,
+    meaning: "Moved Permanently: El recurso se ha movido de forma permanente.",
+  },
+  { code: 302, meaning: "Found: El recurso se ha movido temporalmente." },
+  {
+    code: 304,
+    meaning:
+      "Not Modified: El recurso no ha cambiado desde la última solicitud.",
+  },
+  { code: 400, meaning: "Bad Request: La solicitud es inválida." },
+  {
+    code: 401,
+    meaning: "Unauthorized: No autorizado. Puede requerir autenticación.",
+  },
+  {
+    code: 403,
+    meaning: "Forbidden: Acceso denegado, aunque estés autenticado.",
+  },
+  { code: 404, meaning: "Not Found: Recurso no encontrado." },
+  {
+    code: 405,
+    meaning: "Method Not Allowed: Método HTTP no permitido para este recurso.",
+  },
+  {
+    code: 409,
+    meaning: "Conflict: Conflicto con el estado actual del recurso.",
+  },
+  {
+    code: 422,
+    meaning:
+      "Unprocessable Entity: La solicitud está bien formada pero tiene errores semánticos.",
+  },
+  { code: 429, meaning: "Too Many Requests: Límite de peticiones excedido." },
+  { code: 500, meaning: "Internal Server Error: Error en el servidor." },
+  {
+    code: 501,
+    meaning: "Not Implemented: El servidor no reconoce el método solicitado.",
+  },
+  {
+    code: 502,
+    meaning:
+      "Bad Gateway: El servidor recibió una respuesta inválida del servidor upstream.",
+  },
+  {
+    code: 503,
+    meaning:
+      "Service Unavailable: El servidor no está disponible temporalmente.",
+  },
+  {
+    code: 504,
+    meaning:
+      "Gateway Timeout: Tiempo de espera agotado desde el servidor upstream.",
+  },
+];
+
+export default httpStatusCodes;

package/src/use-resources/index.ts

@@ -0,0 +1,189 @@
+import { useEffect, useMemo, useState } from "react";
+import { EnhancedEndpoints, ItemsRecord, Props, ShowOptions } from "./types";
+import useToken from "./get.token";
+import axios from "axios";
+import httpStatusCodes from "./http.codes";
+import { useRouter } from "next/navigation";
+
+export default function useResources<T extends Record<string, ItemsRecord>>({
+  baseURI,
+  authURI = "/auth/login",
+  endpoints,
+}: Props) {
+  const token = useToken();
+  const router = useRouter();
+  const [info, setInfo] = useState<Record<string, any>>({});
+
+  const result = useMemo(() => {
+    const r = {} as EnhancedEndpoints<T>;
+
+    for (const key in endpoints) {
+      const endpoint = endpoints[key];
+      const showFunc = async ({
+        limit = 10,
+        page = 1,
+        merge = true,
+        ...query
+      }: ShowOptions) => {
+        const options = {
+          method: "GET",
+          url: `${baseURI}/${key}`,
+          params: { limit, page, ...query },
+          headers: { Authorization: token },
+        };
+
+        const newInfo = { ...info };
+        newInfo[key] = newInfo[key] || {};
+        newInfo[key].state = "loading";
+        newInfo[key].errorMessage = "";
+        newInfo[key].params = query;
+
+        setInfo(newInfo);
+
+        try {
+          const consulta = await axios.request(options);
+          const d = consulta.data;
+          newInfo[key].state = "success";
+          newInfo[key].errorMessage = "";
+          newInfo[key].data = merge
+            ? page == 1
+              ? d.data
+              : [...d.data, ...(newInfo[key].data || [])]
+            : d.data;
+          newInfo[key].totalItems = d.totalItems;
+          newInfo[key].totalPages = d.totalPages;
+          newInfo[key].currentPage = d.currentPage;
+          setInfo({ ...newInfo });
+          return d.data;
+        } catch (error: any) {
+          const item = httpStatusCodes.find((s) => s.code == error.status);
+
+          newInfo[key].state = "error";
+          newInfo[key].errorMessage = item?.meaning;
+          if (error.status == 403) {
+            router.push(authURI);
+          }
+          setInfo({ ...newInfo });
+          return error;
+        }
+      };
+      (r as any)[key] = {
+        ...endpoint,
+        show: showFunc,
+        find: async (id: number, query: any) => {
+          const options = {
+            method: "GET",
+            url: `${baseURI}/${key}/${id}`,
+            params: { ...query },
+            headers: { Authorization: token },
+          };
+          const newInfo = { ...info };
+          newInfo[key] = newInfo[key] || {};
+          newInfo[key].state = "loading";
+          newInfo[key].errorMessage = "";
+          newInfo[key].params = query;
+
+          setInfo(newInfo);
+
+          try {
+            const consulta = await axios.request(options);
+            const d = consulta.data;
+            newInfo[key].state = "success";
+            newInfo[key].errorMessage = "";
+            newInfo[key].selectedItem = d;
+            const index = newInfo[key]?.data?.findIndex(
+              (d: any) => d?.id == d?.id
+            );
+            if (index >= 0) {
+              newInfo[key].data[index] = d;
+            } else {
+              if (newInfo[key]?.data) {
+                newInfo[key].data.unshift(d);
+              } else {
+                newInfo[key].data = [d];
+              }
+            }
+            setInfo({ ...newInfo });
+            return d.data;
+          } catch (error: any) {
+            const item = httpStatusCodes.find((s) => s.code == error.status);
+
+            newInfo[key].state = "error";
+            newInfo[key].errorMessage = item?.meaning || error.message;
+            if (error.status == 403) {
+              router.push(authURI);
+            }
+            setInfo({ ...newInfo });
+            return error;
+          }
+        },
+        create: async (data: any) => {
+          const options = {
+            method: "POST",
+            url: `${baseURI}/${key}`,
+            data: { ...data },
+            headers: { Authorization: token },
+          };
+          const newInfo = { ...info };
+          newInfo[key] = newInfo[key] || {};
+          newInfo[key].state = "loading";
+          newInfo[key].errorMessage = "";
+
+          setInfo(newInfo);
+
+          try {
+            const consulta = await axios.request(options);
+            const d = consulta.data;
+            newInfo[key].state = "success";
+            newInfo[key].errorMessage = "";
+            newInfo[key].selectedItem = d;
+            const index = newInfo[key]?.data?.findIndex(
+              (d: any) => d?.id == d?.id
+            );
+            if (index >= 0) {
+              newInfo[key].data[index] = d;
+            } else {
+              if (newInfo[key]?.data) {
+                newInfo[key].data.unshift(d);
+              } else {
+                newInfo[key].data = [d];
+              }
+            }
+            setInfo({ ...newInfo });
+            return d.data;
+          } catch (error: any) {
+            const item = httpStatusCodes.find((s) => s.code == error.status);
+
+            newInfo[key].state = "error";
+            newInfo[key].errorMessage = item?.meaning || error.message;
+            if (error.status == 403) {
+              router.push(authURI);
+            }
+            setInfo({ ...newInfo });
+            return error;
+          }
+        },
+        update: async (id: number, data: any) => {
+          console.log("update", id, data);
+        },
+        remove: async (id: number) => {
+          console.log("remove", id);
+        },
+        totalPages: info[key]?.totalPages,
+        currentPage: info[key]?.currentPage,
+        state: info[key]?.state || "success",
+        errorMessage: info[key]?.errorMessage,
+        params: info[key]?.params,
+        getAllPages: async (limit = 10) => {
+          console.log("Not aviable");
+        },
+        data: info[key]?.data || [],
+        selectedItem: info[key]?.selectedItem || {},
+      };
+    }
+
+    return r;
+  }, [info, token, endpoints]);
+
+  return result;
+}

package/src/use-resources/types.ts

@@ -0,0 +1,41 @@
+export interface ItemsRecord {
+  typeof: Object;
+}
+
+export interface Props {
+  baseURI: string;
+  authURI?: string;
+  endpoints: Record<string, Partial<ItemsRecord>>;
+}
+
+export interface ShowOptions {
+  limit?: number;
+  merge?: boolean;
+  page?: number;
+  [key: string | number]: string | number | undefined | null | boolean;
+}
+export type EnhancedEndpoints<T extends Record<string, ItemsRecord>> = {
+  [K in keyof T]: {
+    typeof: T[K]["typeof"];
+    state: "success" | "loading" | "error";
+    show: (props: ShowOptions) => Promise<Array<T[K]["typeof"]>>;
+    create: (data: Partial<T[K]["typeof"]>) => Promise<T[K]["typeof"]>;
+    update: (
+      id: number | string,
+      data: Partial<T[K]["typeof"]>
+    ) => Promise<T[K]["typeof"]>;
+    remove: (id: number | string) => Promise<T[K]["typeof"]>;
+    find: (
+      id: number | string,
+      props?: Record<string, string>
+    ) => Promise<T[K]["typeof"]>;
+    getAllPages: (limit: number) => Promise<Array<T[K]["typeof"]>>;
+    data: T[K]["typeof"][];
+    selectedItem: T[K]["typeof"];
+    params: Record<string, any>;
+    currentPage: number;
+    totalItems: number;
+    totalPages: number;
+    errorMessage: string;
+  };
+};

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "declaration": true,
+    "outDir": "dist",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "strict": true,
+    "baseUrl": "."
+  },
+  "include": ["src"]
+}