@zauru-sdk/components 1.0.54 → 1.0.61

package/src/TaskList/TaskList.tsx

@@ -1,88 +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>
-  );
-};
+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

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

package/src/Titles/LabelArray.tsx

@@ -1,17 +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>
-  );
-};
+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

@@ -1,9 +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>
-  );
-};
+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

@@ -1,10 +1,10 @@
-//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>
-  );
-};
+//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

@@ -1,10 +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>
-  );
-};
+//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

@@ -1,10 +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>
-  );
-};
+//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

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

package/src/Tooltip/Tooltip.tsx

@@ -1,42 +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>
-  );
-};
+"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

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

package/src/WithTooltip/WithTooltip.tsx

@@ -1,21 +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>
-    </>
-  );
-};
+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

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

package/src/Wizards/StepWizard.tsx

@@ -1,88 +1,88 @@
-import type { ReactNode } from "react";
-import React, { useState } from "react";
-import { LoadingInputSkeleton } from "../Skeletons/index.js";
-
-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>
-  );
-};
+import type { ReactNode } from "react";
+import React, { useState } from "react";
+import { LoadingInputSkeleton } from "../Skeletons/index.js";
+
+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

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