@zauru-sdk/components 1.0.11 → 1.0.12

package/src/Modal/Modal.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+
+export type ModalOption = "OK" | "CANCEL" | null;
+
+type ModalParams = {
+  title: string;
+  description: React.ReactNode;
+  okButtonText?: string;
+  showOptions?: boolean;
+};
+
+export const createModal = ({
+  title,
+  description,
+  okButtonText,
+  showOptions = true,
+}: ModalParams): Promise<ModalOption> => {
+  return new Promise((resolve) => {
+    const handleClose = () => {
+      resolve(null);
+      removeModal();
+    };
+
+    const handleOk = () => {
+      resolve("OK");
+      removeModal();
+    };
+
+    const handleCancel = () => {
+      resolve("CANCEL");
+      removeModal();
+    };
+
+    const removeModal = () => {
+      document.body.removeChild(modalWrapper);
+      document.body.removeChild(modalOverlay);
+    };
+
+    const modalWrapper = document.createElement("div");
+    modalWrapper.classList.add(
+      "justify-center",
+      "items-center",
+      "flex",
+      "overflow-x-hidden",
+      "overflow-y-auto",
+      "fixed",
+      "inset-0",
+      "z-50",
+      "outline-none",
+      "focus:outline-none"
+    );
+
+    // Crear capa de fondo detrás del modal
+    const modalOverlay = document.createElement("div");
+    modalOverlay.classList.add(
+      "fixed",
+      "inset-0",
+      "bg-black",
+      "opacity-50",
+      "z-40"
+    );
+
+    document.body.appendChild(modalOverlay);
+    document.body.appendChild(modalWrapper);
+
+    const ModalContent = () => (
+      <div className="relative w-auto my-6 mx-auto max-w-3xl">
+        <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+          <div className="flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t">
+            <h3 className="text-3xl font-semibold">{title}</h3>
+            <button className="p-1 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none">
+              <span className="close-button" onClick={handleClose}>
+                &times;
+              </span>
+            </button>
+          </div>
+          <div className="relative p-6 flex-auto">{description}</div>
+          {showOptions && (
+            <div className="flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b">
+              <button
+                className="cancel-button text-red-700 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                type="button"
+                onClick={handleCancel}
+              >
+                Cancelar
+              </button>
+              <button
+                className="ok-button bg-emerald-700 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                type="button"
+                onClick={handleOk}
+              >
+                {okButtonText ?? "Aceptar"}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+
+    const root = createRoot(modalWrapper);
+    root.render(<ModalContent />);
+  });
+};

package/src/Modal/index.tsx

@@ -0,0 +1 @@
+export * from "./Modal";

package/src/NavBar/index.tsx

@@ -0,0 +1,5 @@
+export * from "./NavBar";
+
+export * from "./NavBar.types";
+
+export * from "./NavBar.utils";

package/src/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+type Props = {
+  title?: string;
+  percent?: string;
+};
+
+export const ProgressBar = (props: Props) => {
+  const { title, percent } = props;
+  return (
+    <>
+      {percent && (
+        <>
+          {title && <div className="mb-1 text-lg font-medium">{title}</div>}
+          <div className="w-full h-6 bg-gray-200 rounded-full">
+            <div
+              className="h-6 bg-blue-600 rounded-full"
+              style={{ width: `${percent}%` }}
+            ></div>
+          </div>
+        </>
+      )}
+    </>
+  );
+};

package/src/ProgressBar/ProgressCircle.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from "react";
+
+export const ProgressCircle = ({
+  total,
+  completed,
+  description,
+  title,
+}: {
+  total: number;
+  completed: number;
+  description: string;
+  title?: string;
+}) => {
+  const [percentage, setPercentage] = useState(0);
+  const strokeDasharray = 2 * Math.PI * 42; // radio del circulo
+  const progressColor = `rgba(${255 - 2.55 * percentage}, ${
+    2.55 * percentage
+  }, 0)`;
+
+  useEffect(() => {
+    if (total > 0) {
+      setPercentage((completed / total) * 100);
+    } else {
+      setPercentage(100);
+    }
+  }, [total, completed]);
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      {title && (
+        <h2 className="mb-4 text-xl text-center text-gray-700">{title}</h2>
+      )}
+      <svg width="100" height="100" className="relative">
+        <circle
+          r="42"
+          cx="50"
+          cy="50"
+          fill="transparent"
+          stroke="#eee"
+          strokeWidth="8"
+        />
+        <circle
+          r="42"
+          cx="50"
+          cy="50"
+          fill="transparent"
+          stroke={progressColor}
+          strokeWidth="8"
+          strokeDasharray={strokeDasharray}
+          strokeDashoffset={
+            strokeDasharray - strokeDasharray * (percentage / 100)
+          }
+          strokeLinecap="round"
+          style={{
+            transform: "rotate(-90deg)",
+            transformOrigin: "50% 50%",
+          }}
+        />
+        <text
+          x="50"
+          y="55"
+          textAnchor="middle"
+          fill={progressColor}
+          style={{
+            fontSize: "16px",
+            fontWeight: "bold",
+          }}
+        >
+          {`${Math.round(percentage)}%`}
+        </text>
+      </svg>
+      <p className="mt-2 text-center text-gray-500">{description}</p>
+    </div>
+  );
+};

package/src/ProgressBar/index.tsx

@@ -0,0 +1,2 @@
+export * from "./ProgressBar";
+export * from "./ProgressCircle";

package/src/Skeletons/LoadingInputSkeleton.tsx

@@ -0,0 +1,12 @@
+export const LoadingInputSkeleton = () => {
+  return (
+    <div
+      className="w-full h-full bg-gray-300 animate-pulse rounded"
+      style={{
+        maxWidth: "100%",
+        height: "40px",
+        boxShadow: "0px 0px 0px 1px rgba(0, 0, 0, 0.1)",
+      }}
+    />
+  );
+};

package/src/Skeletons/index.ts

@@ -0,0 +1 @@
+export * from "./LoadingInputSkeleton";

package/src/Tab/Tab.tsx

@@ -0,0 +1,63 @@
+import { redirect } from "@remix-run/node";
+import { Outlet } from "@remix-run/react";
+import React from "react";
+
+export type TabItem = { title: string; link: string };
+
+type Props = {
+  items: Array<TabItem>;
+};
+
+//<reference> https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/react/tabs/text
+export const Tabs = (props: Props) => {
+  const { items } = props;
+  const [openTab, setOpenTab] = React.useState(1);
+  return (
+    <>
+      <div className="flex flex-wrap">
+        <div className="w-full">
+          <ul
+            className="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row"
+            role="tablist"
+          >
+            {items?.map((item: TabItem, index: number) => {
+              return (
+                <li
+                  key={index}
+                  className="mb-px mr-2 last:mr-0 flex-auto text-center"
+                >
+                  <a
+                    key={index}
+                    className={
+                      "text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal " +
+                      (openTab === index
+                        ? "text-white bg-red-600"
+                        : "text-red-600 bg-white")
+                    }
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setOpenTab(index);
+                      redirect(item.link);
+                    }}
+                    data-toggle="tab"
+                    href={item.link}
+                    role="tablist"
+                  >
+                    {item.title}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+          <div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
+            <div className="px-4 py-5 flex-auto">
+              <div className="tab-content tab-space">
+                <Outlet />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

package/src/Tab/index.ts

@@ -0,0 +1 @@
+export * from "./Tab";

package/src/Table/ZauruTable.tsx

@@ -0,0 +1,263 @@
+import { useSearchParams } from "@remix-run/react";
+import { useEffect, useState } from "react";
+import type {
+  PaginationOptions,
+  TableProps,
+  TableStyles,
+} from "react-data-table-component";
+import DataTable, { createTheme } from "react-data-table-component";
+import { SearchSVG } from "../Icons/Icons";
+import { ExpandableRowsComponent } from "react-data-table-component/dist/DataTable/types";
+
+const customStyles: TableStyles = {
+  headCells: {
+    style: {
+      color: "#202124",
+      fontSize: "14px",
+      justifyContent: "left", // Alinea el texto a la izquierda
+      whiteSpace: "normal", // Permite el ajuste de texto
+      wordBreak: "break-word", // Asegura que las palabras se rompan correctamente para evitar desbordamientos
+      maxWidth: "150px", // Establece un ancho máximo para las celdas del encabezado
+    },
+  },
+  rows: {
+    highlightOnHoverStyle: {
+      backgroundColor: "rgb(230, 244, 244)",
+      borderBottomColor: "#FFFFFF",
+      borderRadius: "25px",
+      outline: "1px solid #FFFFFF",
+    },
+  },
+  pagination: {
+    style: {
+      border: "none",
+    },
+  },
+};
+
+createTheme("solarized", {
+  text: {
+    primary: "#002b36",
+    secondary: "#002b36",
+  },
+  background: {
+    default: "#f9f9f9",
+  },
+  context: {
+    background: "#cb4b16",
+    text: "#555555",
+  },
+  divider: {
+    default: "#e2e4ff",
+  },
+  action: {
+    button: "rgba(0,0,0,.54)",
+    hover: "rgba(0,0,0,.08)",
+    disabled: "rgba(0,0,0,.12)",
+  },
+  headRow: {
+    background: "black",
+  },
+});
+
+createTheme("subTable", {
+  text: {
+    primary: "#002b36",
+    secondary: "#002b36",
+  },
+  background: {
+    default: "#e9e9e9",
+  },
+  context: {
+    background: "#cb4b16",
+    text: "#555555",
+  },
+  divider: {
+    default: "#e2e4ff",
+  },
+  action: {
+    button: "rgba(0,0,0,.54)",
+    hover: "rgba(0,0,0,.08)",
+    disabled: "rgba(0,0,0,.12)",
+  },
+  headRow: {
+    background: "black",
+  },
+});
+
+type Props = TableProps<any> & {
+  columns: any;
+  conditionalRowStyles?: any;
+  data: any[];
+  loading?: boolean;
+  pagination?: {
+    totalRows: number;
+    rowsPerPageOptions: number[];
+  };
+  whitOutPagination?: boolean;
+  offlineSearch?: string[];
+  search?: {
+    placeholderSearch?: string;
+  };
+  expandable?: {
+    expandableRowExpanded?: (row: any) => boolean;
+    expandableRowsComponent?: ExpandableRowsComponent<any>;
+  };
+  theme?: "solarized" | "subTable";
+  className?: string;
+};
+
+//Documentación de la tabla https://react-data-table-component.netlify.app/?path=/docs/getting-started-intro--docs
+export const ZauruTable = (props: Props) => {
+  const {
+    columns,
+    conditionalRowStyles,
+    data,
+    loading = false,
+    pagination,
+    search,
+    expandable,
+    theme,
+    className,
+    offlineSearch = [],
+    whitOutPagination = false,
+    ...others
+  } = props;
+
+  const [, setSearchParams] = useSearchParams({
+    page: "1",
+    perPage: "10",
+    search: "",
+  });
+  const [filteredData, setFilteredData] = useState(data);
+
+  const [showTable, setShowTable] = useState<boolean>(false);
+
+  useEffect(() => {
+    setShowTable(true);
+  }, []);
+
+  useEffect(() => {
+    setFilteredData(data);
+  }, [data]);
+
+  const subHeaderComponentMemo = (
+    <>
+      <input
+        name="search"
+        type="text"
+        placeholder={search?.placeholderSearch ?? "Filtrar"}
+        aria-label="Search Input"
+        className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg px-2"
+        onChange={(event) => {
+          const searchTerm = event.target.value;
+          if (offlineSearch.length > 0) {
+            filterData(searchTerm);
+          }
+        }}
+        onBlur={(event) => {
+          const searchTerm = event.target.value;
+          if (offlineSearch.length <= 0 && search) {
+            setSearchParams((prevState: URLSearchParams) => ({
+              ...Object.fromEntries(prevState),
+              search: searchTerm,
+            }));
+          }
+        }}
+      />
+      <button type="button" name="search" className="px-2 font-bold">
+        <SearchSVG />
+      </button>
+    </>
+  );
+
+  const filterData = (searchTerm: string) => {
+    if (!searchTerm || !offlineSearch || offlineSearch.length === 0) {
+      setFilteredData(data);
+      return;
+    }
+
+    const filtered = data.filter((item) =>
+      offlineSearch.some(
+        (field) =>
+          item[field] &&
+          item[field]
+            .toString()
+            .toLowerCase()
+            .includes(searchTerm.toLowerCase())
+      )
+    );
+
+    setFilteredData(filtered);
+  };
+
+  const handlePageChange = (page: number) => {
+    //hacer el fetch de más datos
+    setSearchParams((prevState: URLSearchParams) => ({
+      ...Object.fromEntries(prevState),
+      page: page.toString(),
+    }));
+  };
+
+  const handlePerRowsChange = async (newPerPage: number, page: number) => {
+    //hacer el fetch de más datos
+    setSearchParams((prevState: URLSearchParams) => ({
+      ...Object.fromEntries(prevState),
+      perPage: newPerPage.toString(),
+    }));
+  };
+
+  if (!showTable) {
+    return <>Loading...</>;
+  }
+
+  //Textos en español de la tabla
+  const paginationComponentOptions = {
+    rowsPerPageText: "Filas por página",
+    rangeSeparatorText: "de",
+    selectAllRowsItem: true,
+    selectAllRowsItemText: "Todos",
+  } as PaginationOptions;
+
+  const loadSubHeader = !!(search || offlineSearch.length > 0);
+  const subHeaderComponent = loadSubHeader ? subHeaderComponentMemo : undefined;
+
+  return (
+    <DataTable
+      className={className}
+      subHeaderWrap
+      theme={theme ?? "solarized"}
+      columns={columns}
+      conditionalRowStyles={conditionalRowStyles}
+      data={filteredData}
+      customStyles={customStyles}
+      progressPending={loading}
+      highlightOnHover
+      pointerOnHover
+      dense
+      striped
+      pagination={!whitOutPagination}
+      persistTableHead
+      responsive
+      noHeader
+      expandableRows={!!expandable}
+      expandableRowExpanded={
+        expandable ? expandable.expandableRowExpanded : undefined
+      }
+      expandableRowsComponent={
+        expandable ? expandable.expandableRowsComponent : undefined
+      }
+      subHeader={loadSubHeader}
+      subHeaderComponent={subHeaderComponent}
+      paginationServer={!!pagination}
+      paginationTotalRows={pagination ? pagination.totalRows : undefined}
+      onChangeRowsPerPage={pagination ? handlePerRowsChange : undefined}
+      onChangePage={pagination ? handlePageChange : undefined}
+      paginationComponentOptions={paginationComponentOptions}
+      paginationRowsPerPageOptions={
+        pagination?.rowsPerPageOptions ? pagination.rowsPerPageOptions : [10]
+      }
+      {...others}
+    />
+  );
+};

package/src/Table/index.tsx

@@ -0,0 +1 @@
+export * from "./ZauruTable";

package/src/TaskList/TaskList.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from "react";
+
+export type TaskType = {
+  title: string;
+  description?: string;
+  status: "waiting" | "processing" | "done" | "error";
+};
+
+type TaskProps = {
+  task: TaskType;
+};
+
+export const Task = ({ task }: TaskProps) => {
+  const [isDescriptionOpen, setIsDescriptionOpen] = useState(false);
+  let statusIcon;
+  let taskStyle = {};
+  let bgColor;
+
+  switch (task.status) {
+    case "waiting":
+      statusIcon = "🕗"; // Icono de reloj (como un ejemplo, puedes reemplazarlo con un ícono o SVG real)
+      taskStyle = { opacity: 0.5 }; // estilo disabled
+      bgColor = "bg-gray-200"; // Color de fondo gris
+      break;
+    case "processing":
+      statusIcon = "⏳"; // Icono de reloj de arena
+      taskStyle = { fontWeight: "bold" }; // estilo negrita
+      bgColor = "bg-blue-200"; // Color de fondo azul
+      break;
+    case "done":
+      statusIcon = "✅"; // Icono de check
+      bgColor = "bg-green-200"; // Color de fondo verde
+      break;
+    case "error":
+      statusIcon = "❌"; // Icono de cruz
+      taskStyle = { color: "red" }; // estilo color rojo
+      bgColor = "bg-red-200"; // Color de fondo rojo
+      break;
+  }
+
+  return (
+    <div
+      style={taskStyle}
+      className={`${bgColor} rounded-lg p-3 mb-3 ${
+        task.description ? "cursor-pointer" : ""
+      }`}
+      onClick={() =>
+        task.description && setIsDescriptionOpen(!isDescriptionOpen)
+      }
+    >
+      <div className="flex justify-between">
+        <div>
+          {statusIcon} {task.title}{" "}
+          {`${task.status === "processing" ? "..." : ""}`}
+        </div>
+        {task.description && <div>▼</div>}
+      </div>
+      {task.description && isDescriptionOpen && (
+        <div className="mt-2">{task.description}</div>
+      )}
+    </div>
+  );
+};
+
+type TaskModalProps = {
+  tasks: TaskType[];
+};
+
+export const TaskList = ({ tasks }: TaskModalProps) => {
+  const completedTasks = tasks.filter(
+    (task) => task.status === "done" || task.status === "error"
+  ).length;
+  const progressPercentage = (completedTasks / tasks.length) * 100;
+
+  return (
+    <div>
+      {tasks.map((task, index) => (
+        <Task key={index} task={task} />
+      ))}
+      <div className="h-2 bg-gray-200 rounded-lg mt-3">
+        <div
+          className="bg-green-500 h-full rounded-lg"
+          style={{ width: `${progressPercentage}%`, transition: "width 0.5s" }}
+        ></div>
+      </div>
+    </div>
+  );
+};

package/src/TaskList/index.ts

@@ -0,0 +1 @@
+export * from "./TaskList";

package/src/Titles/LabelArray.tsx

@@ -0,0 +1,17 @@
+import { SelectFieldOption } from "@zauru-sdk/types";
+
+//Component to show all information in an array
+export const LabelArray = ({ info }: { info: SelectFieldOption[] }) => {
+  return (
+    <div className="divide-y divide-gray-100">
+      {info?.map((x: any) => {
+        return (
+          <div key={x?.label} className="my-1 pt-2">
+            <p className="inline font-bold text-lg">{x?.label}: </p>
+            <p className="inline text-lg">{x?.value}</p>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/Titles/TableColumnTitle.tsx

@@ -0,0 +1,9 @@
+export type tableColumnTitleProps = {
+  textContent: String;
+};
+//column title for datatables
+export const TableColumnTitle = ({ textContent }: tableColumnTitleProps) => {
+  return (
+    <p className="font-bold text-sm line-clamp-3 text-center">{textContent}</p>
+  );
+};