@zauru-sdk/components 1.0.11 → 1.0.13

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 "@zauru-sdk/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>
+  );
+};

package/src/Titles/TitleH1.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+//H1 Title Component
+export const TitleH1 = ({ texto }: any) => {
+  return (
+    <div className="mb-1">
+      <h1 className="text-4xl font-bold leading-normal mt-0 mb-2 text-zinc-800">
+        {texto}
+      </h1>
+    </div>
+  );
+};

package/src/Titles/TitleH2.tsx

@@ -0,0 +1,10 @@
+//H2 Title Component
+export const TitleH2 = ({ texto }: any) => {
+  return (
+    <div className="py-1 ">
+      <h2 className="text-2xl font-bold leading-normal mt-0 mb-2 text-zinc-800">
+        {texto}
+      </h2>
+    </div>
+  );
+};

package/src/Titles/TitleH3.tsx

@@ -0,0 +1,10 @@
+//H3 Title Component
+export const TitleH3 = ({ texto }: any) => {
+  return (
+    <div className="py-1 ">
+      <h3 className="text-xl leading-normal mt-0 mb-2 text-zinc-800">
+        {texto}
+      </h3>
+    </div>
+  );
+};

package/src/Titles/index.ts

@@ -0,0 +1,5 @@
+export * from "./LabelArray";
+export * from "./TableColumnTitle";
+export * from "./TitleH1";
+export * from "./TitleH2";
+export * from "./TitleH3";

package/src/Tooltip/Tooltip.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import React, { useState } from "react";
+
+type Props = {
+  children: React.ReactNode;
+  text: string;
+};
+
+export const Tooltip = ({ children, text }: Props) => {
+  const [show, setShow] = useState(false);
+
+  return (
+    <div className="relative inline-block">
+      <div
+        onMouseEnter={() => setShow(true)}
+        onMouseLeave={() => setShow(false)}
+      >
+        {children}
+      </div>
+      {show && (
+        <div
+          className="absolute z-10 bg-gray-700 text-white px-2 py-1 rounded-md bottom-full left-1/2 transform -translate-x-1/2"
+          style={{ whiteSpace: "nowrap", height: "2rem" }}
+        >
+          {text}
+          <div
+            className="absolute top-full left-1/2 transform -translate-x-1/2"
+            style={{
+              width: "0",
+              height: "0",
+              borderTop: "6px solid transparent",
+              borderLeft: "6px solid transparent",
+              borderRight: "6px solid transparent",
+              borderBottom: "6px solid gray",
+            }}
+          ></div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/Tooltip/index.ts

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

package/src/WithTooltip/WithTooltip.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  text: string;
+};
+
+export const WithTooltip = (props: Props) => {
+  const { children, text } = props;
+
+  return (
+    <>
+      <span className="group relative">
+        {children}
+        <span className="pointer-events-none absolute -top-10 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-black px-2 py-1 text-white opacity-0 transition z-50 before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-black before:content-[''] group-hover:opacity-100 before:z-50">
+          {text}
+        </span>
+      </span>
+    </>
+  );
+};

package/src/WithTooltip/index.tsx

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

package/src/Wizards/StepWizard.tsx

@@ -0,0 +1,88 @@
+import type { ReactNode } from "react";
+import React, { useState } from "react";
+import { LoadingInputSkeleton } from "src";
+
+export type StepWizard = {
+  index: number;
+  stepName: string;
+  component: ReactNode;
+};
+
+interface StepWizardProps {
+  steps: StepWizard[];
+  showStepName?: boolean;
+  loading?: boolean;
+}
+
+export const StepWizardComponent: React.FC<StepWizardProps> = ({
+  steps,
+  showStepName = false,
+  loading = false,
+}) => {
+  const [currentStep, setCurrentStep] = useState(0);
+
+  if (loading) {
+    return (
+      <div className="lg:grid lg:grid-cols-10 gap-4">
+        <div className="lg:col-span-2">
+          <select className="lg:hidden mb-5 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
+            <option></option>
+          </select>
+          <div className="hidden lg:block">
+            <LoadingInputSkeleton />
+          </div>
+        </div>
+        <div className="lg:col-span-8">
+          <LoadingInputSkeleton />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="lg:grid lg:grid-cols-10 gap-4">
+      <div className="lg:col-span-2">
+        <select
+          className="lg:hidden mb-5 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+          onChange={(e) => setCurrentStep(parseInt(e.target.value))}
+          value={currentStep}
+        >
+          {steps.map((step, index) => (
+            <option key={index} value={index}>
+              {showStepName ? step.stepName : `Step ${index + 1}`}
+            </option>
+          ))}
+        </select>
+        <div className="scroll-hidden hidden lg:block">
+          {steps.map((step, index) => (
+            <div
+              key={index}
+              onClick={() => setCurrentStep(index)}
+              className={`py-2 px-4 mt-5 cursor-pointer rounded ${
+                currentStep === index
+                  ? "bg-blue-500 text-white"
+                  : "text-blue-500 hover:bg-gray-100 border border-gray-300"
+              } ${
+                showStepName
+                  ? "text-wrap break-words"
+                  : "rounded-full w-8 h-8 flex items-center justify-center"
+              }`}
+            >
+              {showStepName ? step.stepName : index + 1}
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="lg:col-span-8">
+        {steps.map((step, index) => (
+          <div
+            key={index}
+            className={currentStep === index ? "block" : "hidden"}
+          >
+            {step.component}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/Wizards/index.ts

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

package/src/index.ts

@@ -0,0 +1,21 @@
+export * from "./Alerts";
+export * from "./BlockUI";
+export * from "./Buttons";
+export * from "./Card";
+//export * from "./Chat";
+export * from "./Containers";
+export * from "./Footer";
+export * from "./Labels";
+export * from "./Layouts";
+export * from "./LineSeparator";
+export * from "./Modal";
+export * from "./NavBar";
+export * from "./Skeletons";
+export * from "./Tab";
+export * from "./Table";
+export * from "./TaskList";
+export * from "./Titles";
+export * from "./Tooltip";
+export * from "./WithTooltip";
+export * from "./Wizards";
+//export * from "./Zendesk";

package/dist/Alerts/Alert.d.ts

@@ -1,9 +0,0 @@
-type AlertType = "success" | "error" | "info" | "warning";
-export type AlertProps = {
-    type: AlertType;
-    title: string;
-    description: string;
-    onClose?: () => void;
-};
-export declare const showAlert: (alertProps: AlertProps) => void;
-export {};