@zauru-sdk/components 1.0.54 → 1.0.61

package/src/Buttons/Button.tsx

@@ -1,90 +1,90 @@
-import type { ColorInterface } from "../NavBar/NavBar.types.js";
-
-type Props = {
-  type?: "reset" | "button" | "submit" | undefined;
-  title?: string;
-  name?: string;
-  onClickSave?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  //Cargando...
-  loading?: boolean;
-  loadingText?: string;
-  selectedColor?: "indigo" | "green" | "red" | "yellow";
-  children?: React.ReactNode;
-  className?: string;
-  disabled?: boolean;
-};
-
-export const Button = (props: Props) => {
-  const {
-    type = "submit",
-    loading = false,
-    loadingText = "Guardando...",
-    title = "Guardar",
-    name = "save",
-    onClickSave,
-    selectedColor = "indigo",
-    children,
-    className = "",
-    disabled = false,
-  } = props;
-
-  const COLORS = {
-    green: {
-      bg900: "bg-green-900",
-      bg700: "bg-green-700",
-      bg600: "bg-green-600",
-      bg500: "bg-green-500",
-      ring600: "ring-green-600",
-      ring500: "ring-green-500",
-    },
-    indigo: {
-      bg900: "bg-indigo-900",
-      bg700: "bg-indigo-700",
-      bg600: "bg-indigo-600",
-      bg500: "bg-indigo-500",
-      ring600: "ring-indigo-600",
-      ring500: "ring-indigo-500",
-    },
-    red: {
-      bg900: "bg-red-900",
-      bg700: "bg-red-700",
-      bg600: "bg-red-600",
-      bg500: "bg-red-500",
-      ring600: "ring-red-600",
-      ring500: "ring-red-500",
-    },
-    yellow: {
-      bg900: "bg-yellow-900",
-      bg700: "bg-yellow-700",
-      bg600: "bg-yellow-600",
-      bg500: "bg-yellow-500",
-      ring600: "ring-yellow-600",
-      ring500: "ring-yellow-500",
-    },
-  };
-
-  const color: ColorInterface = COLORS[selectedColor];
-
-  const inside = children ?? title;
-
-  return (
-    <button
-      type={type}
-      name="action"
-      disabled={loading || disabled}
-      value={name}
-      onClick={onClickSave}
-      className={`ml-2 ${loading || disabled ? " bg-opacity-25 " : ""} ${
-        loading
-          ? " cursor-progress"
-          : `${disabled ? "" : `hover:${color.bg700}`}`
-      } inline-flex justify-center rounded-md border border-transparent ${
-        color.bg600
-      } py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${
-        color.ring500
-      } focus:ring-offset-2 ${className}`}
-    >
-      {loading ? loadingText : inside}
-    </button>
-  );
-};
+import type { ColorInterface } from "../NavBar/NavBar.types.js";
+
+type Props = {
+  type?: "reset" | "button" | "submit" | undefined;
+  title?: string;
+  name?: string;
+  onClickSave?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  //Cargando...
+  loading?: boolean;
+  loadingText?: string;
+  selectedColor?: "indigo" | "green" | "red" | "yellow";
+  children?: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+};
+
+export const Button = (props: Props) => {
+  const {
+    type = "submit",
+    loading = false,
+    loadingText = "Guardando...",
+    title = "Guardar",
+    name = "save",
+    onClickSave,
+    selectedColor = "indigo",
+    children,
+    className = "",
+    disabled = false,
+  } = props;
+
+  const COLORS = {
+    green: {
+      bg900: "bg-green-900",
+      bg700: "bg-green-700",
+      bg600: "bg-green-600",
+      bg500: "bg-green-500",
+      ring600: "ring-green-600",
+      ring500: "ring-green-500",
+    },
+    indigo: {
+      bg900: "bg-indigo-900",
+      bg700: "bg-indigo-700",
+      bg600: "bg-indigo-600",
+      bg500: "bg-indigo-500",
+      ring600: "ring-indigo-600",
+      ring500: "ring-indigo-500",
+    },
+    red: {
+      bg900: "bg-red-900",
+      bg700: "bg-red-700",
+      bg600: "bg-red-600",
+      bg500: "bg-red-500",
+      ring600: "ring-red-600",
+      ring500: "ring-red-500",
+    },
+    yellow: {
+      bg900: "bg-yellow-900",
+      bg700: "bg-yellow-700",
+      bg600: "bg-yellow-600",
+      bg500: "bg-yellow-500",
+      ring600: "ring-yellow-600",
+      ring500: "ring-yellow-500",
+    },
+  };
+
+  const color: ColorInterface = COLORS[selectedColor];
+
+  const inside = children ?? title;
+
+  return (
+    <button
+      type={type}
+      name="action"
+      disabled={loading || disabled}
+      value={name}
+      onClick={onClickSave}
+      className={`ml-2 ${loading || disabled ? " bg-opacity-25 " : ""} ${
+        loading
+          ? " cursor-progress"
+          : `${disabled ? "" : `hover:${color.bg700}`}`
+      } inline-flex justify-center rounded-md border border-transparent ${
+        color.bg600
+      } py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${
+        color.ring500
+      } focus:ring-offset-2 ${className}`}
+    >
+      {loading ? loadingText : inside}
+    </button>
+  );
+};

package/src/Buttons/index.ts

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

package/src/Card/Card.tsx

@@ -1,24 +1,24 @@
-import React from "react";
-
-type Props = {
-  children: React.ReactNode;
-  title?: string;
-  className?: string;
-};
-
-export const Card = (props: Props) => {
-  const { children, title, className } = props;
-
-  return (
-    <div
-      className={`p-4 space-y-3 shadow sm:overflow-hidden sm:rounded-md ${className}`}
-    >
-      {title && (
-        <label className="inline text-lg font-medium text-gray-700">
-          {`${title.toUpperCase()}`}
-        </label>
-      )}
-      {children}
-    </div>
-  );
-};
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  title?: string;
+  className?: string;
+};
+
+export const Card = (props: Props) => {
+  const { children, title, className } = props;
+
+  return (
+    <div
+      className={`p-4 space-y-3 shadow sm:overflow-hidden sm:rounded-md ${className}`}
+    >
+      {title && (
+        <label className="inline text-lg font-medium text-gray-700">
+          {`${title.toUpperCase()}`}
+        </label>
+      )}
+      {children}
+    </div>
+  );
+};

package/src/Card/index.ts

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

package/src/Chat/ChatLayout.tsx

@@ -1,131 +1,131 @@
-import React, { useRef, useState } from "react";
-import { TextField } from "../Form/TextField/index.js";
-import { Form } from "@remix-run/react";
-import { FormDocumentType } from "@zauru-sdk/types";
-import { LoadingInputSkeleton } from "../Skeletons/LoadingInputSkeleton.js";
-import {
-  AttachmentIconSVG,
-  SendMessageIcon,
-  SpinnerSvg,
-} from "@zauru-sdk/icons";
-
-interface ChatLayoutProps {
-  children?: React.ReactNode;
-  sendingMessage?: boolean;
-  formConfig?: {
-    document_type: FormDocumentType;
-    form_id: number;
-    document_id: number;
-    id_number?: string;
-    reference?: string;
-    attachmentFieldId: number;
-    messageFieldId: number;
-  };
-}
-
-export const ChatLayout: React.FC<ChatLayoutProps> = ({
-  children,
-  sendingMessage = false,
-  formConfig = undefined,
-}) => {
-  const refAttachment = useRef<HTMLInputElement>(null);
-  const [formValues, setFormValues] = useState<{ image: any }>({ image: null });
-
-  const handleAttachmentClick = () => {
-    if (refAttachment.current) {
-      refAttachment.current.click();
-    }
-  };
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="flex flex-col-reverse overflow-y-auto p-4 bg-gray-100 border border-gray-200 rounded-lg grow max-h-[65vh]">
-        {children}
-      </div>
-      <Form id="formRef" encType="multipart/form-data" method="post">
-        {formConfig ? (
-          <>
-            <TextField
-              hidden
-              name="reference"
-              defaultValue={formConfig.reference ?? ""}
-            />
-            <TextField
-              hidden
-              name="form_id"
-              defaultValue={formConfig.form_id}
-            />
-            <TextField
-              hidden
-              name="document_id"
-              defaultValue={formConfig.document_id}
-            />
-            <TextField
-              hidden
-              name="document_type"
-              defaultValue={formConfig.document_type}
-            />
-            <TextField
-              hidden
-              name="id_number"
-              defaultValue={formConfig?.id_number ?? ""}
-            />
-          </>
-        ) : (
-          <></>
-        )}
-        <div className="mt-4 flex">
-          {sendingMessage ? (
-            <LoadingInputSkeleton />
-          ) : (
-            <input
-              name={`message${
-                formConfig?.messageFieldId
-                  ? `_${formConfig?.messageFieldId}`
-                  : ""
-              }`}
-              type="text"
-              placeholder="Escribe un mensaje..."
-              className="form-input px-4 py-2 border border-gray-300 rounded-l-lg grow"
-            />
-          )}
-          <button
-            onClick={handleAttachmentClick}
-            className={`${
-              formValues?.image ? "bg-blue-500" : ""
-            } hover:bg-blue-700 text-white font-bold py-2 px-4`}
-            type="button"
-          >
-            <AttachmentIconSVG />
-          </button>
-          <button
-            className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-r-lg"
-            type="submit"
-            name="action"
-            value="sendMessage"
-          >
-            {sendingMessage ? <SpinnerSvg /> : <SendMessageIcon />}
-          </button>
-        </div>
-        <input
-          ref={refAttachment}
-          hidden
-          name={`attachment${
-            formConfig?.attachmentFieldId
-              ? `_${formConfig?.attachmentFieldId}`
-              : ""
-          }`}
-          type="file"
-          accept=".jpg, .png, .jpeg, .png"
-          onChange={(e) => {
-            if (e.target.value && e.target.value !== "") {
-              setFormValues({ ...formValues, image: e.target.value });
-            } else {
-              setFormValues({ ...formValues, image: null });
-            }
-          }}
-        />
-      </Form>
-    </div>
-  );
-};
+import React, { useRef, useState } from "react";
+import { TextField } from "../Form/TextField/index.js";
+import { Form } from "@remix-run/react";
+import { FormDocumentType } from "@zauru-sdk/types";
+import { LoadingInputSkeleton } from "../Skeletons/LoadingInputSkeleton.js";
+import {
+  AttachmentIconSVG,
+  SendMessageIcon,
+  SpinnerSvg,
+} from "@zauru-sdk/icons";
+
+interface ChatLayoutProps {
+  children?: React.ReactNode;
+  sendingMessage?: boolean;
+  formConfig?: {
+    document_type: FormDocumentType;
+    form_id: number;
+    document_id: number;
+    id_number?: string;
+    reference?: string;
+    attachmentFieldId: number;
+    messageFieldId: number;
+  };
+}
+
+export const ChatLayout: React.FC<ChatLayoutProps> = ({
+  children,
+  sendingMessage = false,
+  formConfig = undefined,
+}) => {
+  const refAttachment = useRef<HTMLInputElement>(null);
+  const [formValues, setFormValues] = useState<{ image: any }>({ image: null });
+
+  const handleAttachmentClick = () => {
+    if (refAttachment.current) {
+      refAttachment.current.click();
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex flex-col-reverse overflow-y-auto p-4 bg-gray-100 border border-gray-200 rounded-lg grow max-h-[65vh]">
+        {children}
+      </div>
+      <Form id="formRef" encType="multipart/form-data" method="post">
+        {formConfig ? (
+          <>
+            <TextField
+              hidden
+              name="reference"
+              defaultValue={formConfig.reference ?? ""}
+            />
+            <TextField
+              hidden
+              name="form_id"
+              defaultValue={formConfig.form_id}
+            />
+            <TextField
+              hidden
+              name="document_id"
+              defaultValue={formConfig.document_id}
+            />
+            <TextField
+              hidden
+              name="document_type"
+              defaultValue={formConfig.document_type}
+            />
+            <TextField
+              hidden
+              name="id_number"
+              defaultValue={formConfig?.id_number ?? ""}
+            />
+          </>
+        ) : (
+          <></>
+        )}
+        <div className="mt-4 flex">
+          {sendingMessage ? (
+            <LoadingInputSkeleton />
+          ) : (
+            <input
+              name={`message${
+                formConfig?.messageFieldId
+                  ? `_${formConfig?.messageFieldId}`
+                  : ""
+              }`}
+              type="text"
+              placeholder="Escribe un mensaje..."
+              className="form-input px-4 py-2 border border-gray-300 rounded-l-lg grow"
+            />
+          )}
+          <button
+            onClick={handleAttachmentClick}
+            className={`${
+              formValues?.image ? "bg-blue-500" : ""
+            } hover:bg-blue-700 text-white font-bold py-2 px-4`}
+            type="button"
+          >
+            <AttachmentIconSVG />
+          </button>
+          <button
+            className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-r-lg"
+            type="submit"
+            name="action"
+            value="sendMessage"
+          >
+            {sendingMessage ? <SpinnerSvg /> : <SendMessageIcon />}
+          </button>
+        </div>
+        <input
+          ref={refAttachment}
+          hidden
+          name={`attachment${
+            formConfig?.attachmentFieldId
+              ? `_${formConfig?.attachmentFieldId}`
+              : ""
+          }`}
+          type="file"
+          accept=".jpg, .png, .jpeg, .png"
+          onChange={(e) => {
+            if (e.target.value && e.target.value !== "") {
+              setFormValues({ ...formValues, image: e.target.value });
+            } else {
+              setFormValues({ ...formValues, image: null });
+            }
+          }}
+        />
+      </Form>
+    </div>
+  );
+};