@zauru-sdk/components 1.0.54 → 1.0.61

package/src/Chat/ChatMessageHistory.tsx

@@ -1,142 +1,142 @@
-import { CheckIconSVG, PencilSvg } from "@zauru-sdk/icons";
-import { useState, useEffect, useRef } from "react";
-
-type Props = {
-  author: string;
-  content: string;
-  date?: string;
-  onLike?: (like: boolean) => void;
-  onUpdateComment?: (text: string, itsNew?: boolean) => void;
-  id: string;
-  commentOwner?: boolean;
-  imageLink?: string;
-};
-
-export const ChatMessageHistory = (props: Props) => {
-  const {
-    author,
-    content,
-    onLike,
-    onUpdateComment,
-    id,
-    commentOwner = false,
-    date,
-    imageLink,
-  } = props;
-
-  const initials = author ? author[0].toUpperCase() : "A";
-  const [isUpdating, setIsUpdating] = useState(false);
-  const [updatedContent, setUpdatedContent] = useState(content);
-  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
-  const [shouldPulse, setShouldPulse] = useState(false);
-
-  useEffect(() => {
-    if (isUpdating && textAreaRef.current) {
-      textAreaRef.current.style.height = "auto";
-      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
-      textAreaRef.current.focus();
-    }
-  }, [isUpdating]);
-
-  // Efecto secundario que se ejecuta cada vez que 'isUpdating' cambia
-  useEffect(() => {
-    // Activar la animación
-    setShouldPulse(true);
-
-    // Establecer un temporizador para eliminar la clase después de que la animación se haya completado
-    const timer = setTimeout(() => {
-      setShouldPulse(false);
-    }, 15000); // Tiempo total de la animación
-
-    // Limpiar el temporizador si el componente se desmonta o si 'isUpdating' cambia de nuevo antes de que la animación se complete
-    return () => clearTimeout(timer);
-  }, [isUpdating]);
-
-  const handleUpdate = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    if (e.target.value.length <= 254) {
-      setUpdatedContent(e.target.value);
-    }
-  };
-
-  const handleUpdateClick = () => {
-    if (isUpdating) {
-      if (textAreaRef.current) {
-        textAreaRef.current.blur();
-      }
-      //onUpdateComment && onUpdateComment(updatedContent, itsNew);
-    }
-    setIsUpdating(!isUpdating);
-  };
-
-  return (
-    <div className="p-1 rounded-xl flex items-center space-x-4 relative">
-      {commentOwner && (
-        <div className="absolute top-2 right-2">
-          <button
-            onClick={handleUpdateClick}
-            className={`${shouldPulse ? "animate-custom-pulse" : ""}`}
-          >
-            {isUpdating ? <CheckIconSVG /> : <PencilSvg />}
-          </button>
-        </div>
-      )}
-      <div
-        className={`w-[0%] lg:w-[8%] h-16 bg-purple-300 rounded-full flex items-center justify-center overflow-hidden text-white text-xl font-bold`}
-      >
-        {initials}
-      </div>
-      <div className="flex flex-col justify-between h-full w-[92%]">
-        <div>
-          <div className="flex flex-row space-x-2">
-            <div className="text-xl font-medium text-black">{author}</div>
-            <div className="text-xl font-medium text-gray-500">
-              {date && <> - {date}</>}
-            </div>
-          </div>
-          {isUpdating ? (
-            <textarea
-              ref={textAreaRef}
-              className="bg-gray-100 rounded p-2 w-full resize-none"
-              value={updatedContent}
-              onChange={handleUpdate}
-              maxLength={254}
-              placeholder="Deja tus buenos deseos..."
-            />
-          ) : (
-            <p className="text-gray-500">{updatedContent}</p>
-          )}
-        </div>
-        <div className="flex justify-end items-center">
-          <button onClick={() => {}}>
-            <></>
-          </button>
-        </div>
-      </div>
-      {imageLink && (
-        <div
-          className={`w-[25%] flex items-center justify-center overflow-hidden text-white text-xl font-bold`}
-        >
-          <div
-            onClick={() => {
-              return window.open(imageLink, "_blank");
-            }}
-          >
-            <img
-              src={imageLink}
-              alt={"IMG_CHAT"}
-              className={`h-48 w-48 inline mr-1 pb-1`}
-              style={{
-                stroke: "currentColor",
-                strokeWidth: 2,
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                fill: "none",
-                backgroundColor: "transparent",
-              }}
-            />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
+import { CheckIconSVG, PencilSvg } from "@zauru-sdk/icons";
+import { useState, useEffect, useRef } from "react";
+
+type Props = {
+  author: string;
+  content: string;
+  date?: string;
+  onLike?: (like: boolean) => void;
+  onUpdateComment?: (text: string, itsNew?: boolean) => void;
+  id: string;
+  commentOwner?: boolean;
+  imageLink?: string;
+};
+
+export const ChatMessageHistory = (props: Props) => {
+  const {
+    author,
+    content,
+    onLike,
+    onUpdateComment,
+    id,
+    commentOwner = false,
+    date,
+    imageLink,
+  } = props;
+
+  const initials = author ? author[0].toUpperCase() : "A";
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [updatedContent, setUpdatedContent] = useState(content);
+  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
+  const [shouldPulse, setShouldPulse] = useState(false);
+
+  useEffect(() => {
+    if (isUpdating && textAreaRef.current) {
+      textAreaRef.current.style.height = "auto";
+      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
+      textAreaRef.current.focus();
+    }
+  }, [isUpdating]);
+
+  // Efecto secundario que se ejecuta cada vez que 'isUpdating' cambia
+  useEffect(() => {
+    // Activar la animación
+    setShouldPulse(true);
+
+    // Establecer un temporizador para eliminar la clase después de que la animación se haya completado
+    const timer = setTimeout(() => {
+      setShouldPulse(false);
+    }, 15000); // Tiempo total de la animación
+
+    // Limpiar el temporizador si el componente se desmonta o si 'isUpdating' cambia de nuevo antes de que la animación se complete
+    return () => clearTimeout(timer);
+  }, [isUpdating]);
+
+  const handleUpdate = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (e.target.value.length <= 254) {
+      setUpdatedContent(e.target.value);
+    }
+  };
+
+  const handleUpdateClick = () => {
+    if (isUpdating) {
+      if (textAreaRef.current) {
+        textAreaRef.current.blur();
+      }
+      //onUpdateComment && onUpdateComment(updatedContent, itsNew);
+    }
+    setIsUpdating(!isUpdating);
+  };
+
+  return (
+    <div className="p-1 rounded-xl flex items-center space-x-4 relative">
+      {commentOwner && (
+        <div className="absolute top-2 right-2">
+          <button
+            onClick={handleUpdateClick}
+            className={`${shouldPulse ? "animate-custom-pulse" : ""}`}
+          >
+            {isUpdating ? <CheckIconSVG /> : <PencilSvg />}
+          </button>
+        </div>
+      )}
+      <div
+        className={`w-[0%] lg:w-[8%] h-16 bg-purple-300 rounded-full flex items-center justify-center overflow-hidden text-white text-xl font-bold`}
+      >
+        {initials}
+      </div>
+      <div className="flex flex-col justify-between h-full w-[92%]">
+        <div>
+          <div className="flex flex-row space-x-2">
+            <div className="text-xl font-medium text-black">{author}</div>
+            <div className="text-xl font-medium text-gray-500">
+              {date && <> - {date}</>}
+            </div>
+          </div>
+          {isUpdating ? (
+            <textarea
+              ref={textAreaRef}
+              className="bg-gray-100 rounded p-2 w-full resize-none"
+              value={updatedContent}
+              onChange={handleUpdate}
+              maxLength={254}
+              placeholder="Deja tus buenos deseos..."
+            />
+          ) : (
+            <p className="text-gray-500">{updatedContent}</p>
+          )}
+        </div>
+        <div className="flex justify-end items-center">
+          <button onClick={() => {}}>
+            <></>
+          </button>
+        </div>
+      </div>
+      {imageLink && (
+        <div
+          className={`w-[25%] flex items-center justify-center overflow-hidden text-white text-xl font-bold`}
+        >
+          <div
+            onClick={() => {
+              return window.open(imageLink, "_blank");
+            }}
+          >
+            <img
+              src={imageLink}
+              alt={"IMG_CHAT"}
+              className={`h-48 w-48 inline mr-1 pb-1`}
+              style={{
+                stroke: "currentColor",
+                strokeWidth: 2,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                fill: "none",
+                backgroundColor: "transparent",
+              }}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/Chat/index.ts

@@ -1,2 +1,2 @@
-export * from "./ChatLayout.js";
-export * from "./ChatMessageHistory.js";
+export * from "./ChatLayout.js";
+export * from "./ChatMessageHistory.js";

package/src/ConnectionState/ConnectionState.tsx

@@ -1,27 +1,27 @@
-import { useIsOnline } from "@zauru-sdk/hooks";
-
-export const ConnectionState = () => {
-  const isOnline = useIsOnline();
-
-  // Definir estilos
-  const styles = {
-    container: {
-      padding: "10px",
-      borderRadius: "5px",
-      backgroundColor: isOnline ? "#d4edda" : "#f8d7da",
-      color: isOnline ? "#155724" : "#721c24",
-      fontWeight: "bold",
-    },
-    text: {
-      fontSize: "16px",
-      margin: 0,
-    },
-  };
-
-  // Renderizar el estado de conexión
-  return (
-    <div style={styles.container}>
-      <p style={styles.text}>{isOnline ? "ONLINE ✅🌐" : "OFFLINE ❌🌐"}</p>
-    </div>
-  );
-};
+import { useIsOnline } from "@zauru-sdk/hooks";
+
+export const ConnectionState = () => {
+  const isOnline = useIsOnline();
+
+  // Definir estilos
+  const styles = {
+    container: {
+      padding: "10px",
+      borderRadius: "5px",
+      backgroundColor: isOnline ? "#d4edda" : "#f8d7da",
+      color: isOnline ? "#155724" : "#721c24",
+      fontWeight: "bold",
+    },
+    text: {
+      fontSize: "16px",
+      margin: 0,
+    },
+  };
+
+  // Renderizar el estado de conexión
+  return (
+    <div style={styles.container}>
+      <p style={styles.text}>{isOnline ? "ONLINE ✅🌐" : "OFFLINE ❌🌐"}</p>
+    </div>
+  );
+};

package/src/ConnectionState/index.tsx

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

package/src/Containers/BodyContainer.tsx

@@ -1,14 +1,14 @@
-import React from "react";
-
-type Props = {
-  children: React.ReactNode;
-};
-
-export const BodyContainer = (props: Props) => {
-  const { children } = props;
-  return (
-    <>
-      <body className="flex flex-col min-h-screen m-0">{children}</body>
-    </>
-  );
-};
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const BodyContainer = (props: Props) => {
+  const { children } = props;
+  return (
+    <>
+      <body className="flex flex-col min-h-screen m-0">{children}</body>
+    </>
+  );
+};

package/src/Containers/ButtonSectionContainer.tsx

@@ -1,21 +1,21 @@
-import React from "react";
-
-type Props = {
-  children: React.ReactNode;
-  className?: string;
-  whitBg?: boolean;
-};
-
-export const ButtonSectionContainer = (props: Props) => {
-  const { children, className, whitBg = true } = props;
-
-  return (
-    <div
-      className={`${
-        whitBg ? "bg-gray-50" : ""
-      } px-4 py-3 text-right sm:px-6 ${className}`}
-    >
-      {children}
-    </div>
-  );
-};
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+  whitBg?: boolean;
+};
+
+export const ButtonSectionContainer = (props: Props) => {
+  const { children, className, whitBg = true } = props;
+
+  return (
+    <div
+      className={`${
+        whitBg ? "bg-gray-50" : ""
+      } px-4 py-3 text-right sm:px-6 ${className}`}
+    >
+      {children}
+    </div>
+  );
+};

package/src/Containers/Container.tsx

@@ -1,39 +1,39 @@
-import React from "react";
-
-type Props = {
-  title?: string;
-  description?: string;
-  children: React.ReactNode;
-  className?: string;
-  rightContent?: React.ReactNode;
-};
-
-export const Container = (props: Props) => {
-  const { title, description, children, className = "", rightContent } = props;
-
-  const titleInfo = (
-    <>
-      {title && (
-        <h3 className="text-3xl font-bold leading-8 text-gray-900">{title}</h3>
-      )}
-      {description && (
-        <p className="mt-1 text-md text-gray-600">{description}</p>
-      )}
-    </>
-  );
-
-  return (
-    <>
-      <div className={`mx-2 ${className}`}>
-        {rightContent && (
-          <div className="flex justify-between items-center">
-            <div>{titleInfo}</div>
-            <div>{rightContent}</div>
-          </div>
-        )}
-        {!rightContent && titleInfo}
-        <div className="mt-5 space-y-5">{children}</div>
-      </div>
-    </>
-  );
-};
+import React from "react";
+
+type Props = {
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+  className?: string;
+  rightContent?: React.ReactNode;
+};
+
+export const Container = (props: Props) => {
+  const { title, description, children, className = "", rightContent } = props;
+
+  const titleInfo = (
+    <>
+      {title && (
+        <h3 className="text-3xl font-bold leading-8 text-gray-900">{title}</h3>
+      )}
+      {description && (
+        <p className="mt-1 text-md text-gray-600">{description}</p>
+      )}
+    </>
+  );
+
+  return (
+    <>
+      <div className={`mx-2 ${className}`}>
+        {rightContent && (
+          <div className="flex justify-between items-center">
+            <div>{titleInfo}</div>
+            <div>{rightContent}</div>
+          </div>
+        )}
+        {!rightContent && titleInfo}
+        <div className="mt-5 space-y-5">{children}</div>
+      </div>
+    </>
+  );
+};

package/src/Containers/DoubleContainer.tsx

@@ -1,48 +1,48 @@
-import React from "react";
-
-type Props = {
-  title?: string;
-  description?: string;
-  className?: string;
-  children: React.ReactNode;
-};
-
-export const DoubleContainer = (props: Props) => {
-  const { title, description, className = "", children } = props;
-
-  const getChildren = (index: number) => {
-    if (children && Array.isArray(children) && children[index]) {
-      return children[index];
-    }
-
-    if (children && index === 0) {
-      return children;
-    }
-
-    return <></>;
-  };
-
-  return (
-    <>
-      <div className={`mx-2 ${className}`}>
-        {/* Font sizes https://tailwindcss.com/docs/font-size */}
-        {title && (
-          <h3 className="text-3xl font-bold leading-8 text-gray-900">
-            {title}
-          </h3>
-        )}
-        {description && (
-          <p className="mt-1 text-md text-gray-600">{description}</p>
-        )}
-        <div className="grid xl:grid-cols-3 md:grid-cols-1 gap-4">
-          <div className="xl:col-span-2 md:col-span-1 mt-5">
-            {getChildren(0)}
-          </div>
-          <div className="xl:col-span-1 md:col-span-1 mt-5">
-            {getChildren(1)}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
+import React from "react";
+
+type Props = {
+  title?: string;
+  description?: string;
+  className?: string;
+  children: React.ReactNode;
+};
+
+export const DoubleContainer = (props: Props) => {
+  const { title, description, className = "", children } = props;
+
+  const getChildren = (index: number) => {
+    if (children && Array.isArray(children) && children[index]) {
+      return children[index];
+    }
+
+    if (children && index === 0) {
+      return children;
+    }
+
+    return <></>;
+  };
+
+  return (
+    <>
+      <div className={`mx-2 ${className}`}>
+        {/* Font sizes https://tailwindcss.com/docs/font-size */}
+        {title && (
+          <h3 className="text-3xl font-bold leading-8 text-gray-900">
+            {title}
+          </h3>
+        )}
+        {description && (
+          <p className="mt-1 text-md text-gray-600">{description}</p>
+        )}
+        <div className="grid xl:grid-cols-3 md:grid-cols-1 gap-4">
+          <div className="xl:col-span-2 md:col-span-1 mt-5">
+            {getChildren(0)}
+          </div>
+          <div className="xl:col-span-1 md:col-span-1 mt-5">
+            {getChildren(1)}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

package/src/Containers/MainContainer.tsx

@@ -1,17 +1,17 @@
-import React from "react";
-
-type Props = {
-  children: React.ReactNode;
-};
-
-export const MainContainer = (props: Props) => {
-  const { children } = props;
-
-  return (
-    <>
-      <div className="md:p-10 p-0 mt-10 ml-2 mr-2 mb-10 md:mt-0 md:ml-0 md:mr-0 md:mb-0">
-        {children}
-      </div>
-    </>
-  );
-};
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const MainContainer = (props: Props) => {
+  const { children } = props;
+
+  return (
+    <>
+      <div className="md:p-10 p-0 mt-10 ml-2 mr-2 mb-10 md:mt-0 md:ml-0 md:mr-0 md:mb-0">
+        {children}
+      </div>
+    </>
+  );
+};

package/src/Containers/OutletContainer.tsx

@@ -1,14 +1,14 @@
-import React from "react";
-
-type Props = {
-  children: React.ReactNode;
-};
-
-export const OutletContainer = (props: Props) => {
-  const { children } = props;
-  return (
-    <>
-      <div className="flex-1 overflow-x-auto">{children}</div>
-    </>
-  );
-};
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const OutletContainer = (props: Props) => {
+  const { children } = props;
+  return (
+    <>
+      <div className="flex-1 overflow-x-auto">{children}</div>
+    </>
+  );
+};