@zauru-sdk/components 1.0.54 → 1.0.60

package/src/Form/FieldContainer/DoubleFieldContainer.tsx

@@ -1,35 +1,35 @@
-import React from "react";
-
-type Props = {
-  children: React.ReactNode;
-  className?: string;
-  alignCenter?: boolean;
-};
-
-export const DoubleFieldContainer = (props: Props) => {
-  const { children, className, alignCenter = true } = 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={`grid md:grid-cols-2 sm:grid-cols-1 gap-4 ${className}`}
-        style={alignCenter ? { alignItems: "center" } : {}}
-      >
-        <div className="col-span-1">{getChildren(0)}</div>
-        <div className="col-span-1">{getChildren(1)}</div>
-      </div>
-    </>
-  );
-};
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+  alignCenter?: boolean;
+};
+
+export const DoubleFieldContainer = (props: Props) => {
+  const { children, className, alignCenter = true } = 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={`grid md:grid-cols-2 sm:grid-cols-1 gap-4 ${className}`}
+        style={alignCenter ? { alignItems: "center" } : {}}
+      >
+        <div className="col-span-1">{getChildren(0)}</div>
+        <div className="col-span-1">{getChildren(1)}</div>
+      </div>
+    </>
+  );
+};

package/src/Form/FieldContainer/QuadrupleFieldContainer.tsx

@@ -1,36 +1,36 @@
-import React from "react";
-
-type Props = {
-  children: React.ReactNode;
-  className?: string;
-};
-
-export const QuadrupleFieldContainer = (props: Props) => {
-  const { children, className } = 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={`grid lg:grid-cols-4 sm:grid-cols-2 xs:grid-cols-1 gap-4 ${className}`}
-        style={{ alignItems: "center" }}
-      >
-        <div className="col-span-1">{getChildren(0)}</div>
-        <div className="col-span-1">{getChildren(1)}</div>
-        <div className="col-span-1">{getChildren(2)}</div>
-        <div className="col-span-1">{getChildren(3)}</div>
-      </div>
-    </>
-  );
-};
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export const QuadrupleFieldContainer = (props: Props) => {
+  const { children, className } = 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={`grid lg:grid-cols-4 sm:grid-cols-2 xs:grid-cols-1 gap-4 ${className}`}
+        style={{ alignItems: "center" }}
+      >
+        <div className="col-span-1">{getChildren(0)}</div>
+        <div className="col-span-1">{getChildren(1)}</div>
+        <div className="col-span-1">{getChildren(2)}</div>
+        <div className="col-span-1">{getChildren(3)}</div>
+      </div>
+    </>
+  );
+};

package/src/Form/FieldContainer/TripleFieldContainer.tsx

@@ -1,35 +1,35 @@
-import React from "react";
-
-type Props = {
-  children: React.ReactNode;
-  className?: string;
-};
-
-export const TripleFieldContainer = (props: Props) => {
-  const { children, className } = 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={`grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ${className}`}
-        style={{ alignItems: "center" }}
-      >
-        <div className="col-span-1">{getChildren(0)}</div>
-        <div className="col-span-1">{getChildren(1)}</div>
-        <div className="col-span-1">{getChildren(2)}</div>
-      </div>
-    </>
-  );
-};
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export const TripleFieldContainer = (props: Props) => {
+  const { children, className } = 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={`grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ${className}`}
+        style={{ alignItems: "center" }}
+      >
+        <div className="col-span-1">{getChildren(0)}</div>
+        <div className="col-span-1">{getChildren(1)}</div>
+        <div className="col-span-1">{getChildren(2)}</div>
+      </div>
+    </>
+  );
+};

package/src/Form/FieldContainer/index.ts

@@ -1,3 +1,3 @@
-export * from "./DoubleFieldContainer.js";
-export * from "./QuadrupleFieldContainer.js";
-export * from "./TripleFieldContainer.js";
+export * from "./DoubleFieldContainer.js";
+export * from "./QuadrupleFieldContainer.js";
+export * from "./TripleFieldContainer.js";

package/src/Form/FileUpload/index.tsx

@@ -1,184 +1,184 @@
-import { DownloadIconSVG, IdeaIconSVG } from "@zauru-sdk/icons";
-import { useAppSelector } from "@zauru-sdk/redux";
-import React, { useState } from "react";
-
-type Props = {
-  id?: string;
-  name: string;
-  formName?: string;
-  title?: string;
-  helpText?: string;
-  hint?: string;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  disabled?: boolean;
-  readOnly?: boolean;
-  error?: string | undefined;
-  fileTypes?: string[];
-  showAvailableTypes?: boolean;
-  className?: string;
-  defaultValue?: string | File;
-  download?: boolean;
-};
-
-export const FileUploadFieldWithoutValidation = (props: Props) => {
-  const {
-    id,
-    name,
-    title,
-    helpText,
-    hint,
-    onChange,
-    disabled = false,
-    readOnly = false,
-    error,
-    fileTypes = [],
-    showAvailableTypes = false,
-    className,
-    defaultValue = undefined,
-    download = false,
-  } = props;
-
-  const [showTooltip, setShowTooltip] = useState<boolean>(false);
-
-  if (typeof defaultValue == "string") {
-    if (download) {
-      return (
-        <div
-          role="button"
-          tabIndex={0}
-          onClick={() => {
-            window.open(defaultValue, "_blank");
-          }}
-          onKeyDown={(event) => {
-            // Permite que el evento se active con la tecla Enter
-            if (event.key === "Enter") {
-              window.open(defaultValue, "_blank");
-            }
-          }}
-        >
-          {title && (
-            <label
-              htmlFor={name}
-              className="block mb-1 text-sm font-medium text-gray-700"
-            >
-              {title}
-            </label>
-          )}{" "}
-          <DownloadIconSVG />
-        </div>
-      );
-    }
-    return (
-      <div className={`col-span-6 sm:col-span-3 ${className}`}>
-        {title && (
-          <label
-            htmlFor={name}
-            className={`block mb-1 text-sm font-medium text-gray-700`}
-          >
-            {title}
-          </label>
-        )}{" "}
-        <div
-          role="button"
-          tabIndex={0}
-          onClick={() => {
-            window.open(defaultValue, "_blank");
-          }}
-          onKeyDown={(event) => {
-            // Permite que el evento se active con la tecla Enter
-            if (event.key === "Enter") {
-              window.open(defaultValue, "_blank");
-            }
-          }}
-        >
-          <img
-            src={defaultValue}
-            alt={name}
-            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>
-    );
-  }
-
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    onChange && onChange(event);
-  };
-
-  let hintMessage = hint;
-  if (showAvailableTypes && fileTypes.length > 0) {
-    hintMessage = `${hint} Archivos permitidos: ${fileTypes.join(", ")}`;
-  }
-
-  const color = error ? "red" : "gray";
-  const isReadOnly = disabled || readOnly;
-  const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
-  const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
-  const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-500`;
-
-  return (
-    <div className={`col-span-6 sm:col-span-3 ${className}`}>
-      {title && (
-        <label
-          htmlFor={name}
-          className={`block mb-1 text-sm font-medium text-${color}-700`}
-        >
-          {title}
-        </label>
-      )}
-      <div className="flex relative items-center">
-        <input
-          type="file"
-          name={name}
-          id={id ?? name}
-          disabled={disabled}
-          readOnly={readOnly}
-          accept={fileTypes.map((ft) => `.${ft}`).join(", ")}
-          onChange={handleInputChange}
-          className={`block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`}
-        />
-        {helpText && (
-          <div className="flex items-center relative ml-3">
-            <div
-              className="relative cursor-pointer"
-              onMouseEnter={() => setShowTooltip(true)}
-              onMouseLeave={() => setShowTooltip(false)}
-            >
-              <IdeaIconSVG />
-              {showTooltip && (
-                <div className="absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50">
-                  {helpText}
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-      {error && (
-        <p className={`mt-2 text-sm text-${color}-600`}>
-          <span className="font-medium">Oops!</span> {error}
-        </p>
-      )}
-      {!error && hintMessage && (
-        <p className={`mt-2 italic text-sm text-${color}-500`}>{hintMessage}</p>
-      )}
-    </div>
-  );
-};
-
-export const FileUploadField = (props: Props) => {
-  const { formValidations } = useAppSelector((state) => state.formValidation);
-  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
-
-  props = { ...props, error };
-
-  return <FileUploadFieldWithoutValidation {...props} />;
-};
+import { DownloadIconSVG, IdeaIconSVG } from "@zauru-sdk/icons";
+import { useAppSelector } from "@zauru-sdk/redux";
+import React, { useState } from "react";
+
+type Props = {
+  id?: string;
+  name: string;
+  formName?: string;
+  title?: string;
+  helpText?: string;
+  hint?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  error?: string | undefined;
+  fileTypes?: string[];
+  showAvailableTypes?: boolean;
+  className?: string;
+  defaultValue?: string | File;
+  download?: boolean;
+};
+
+export const FileUploadFieldWithoutValidation = (props: Props) => {
+  const {
+    id,
+    name,
+    title,
+    helpText,
+    hint,
+    onChange,
+    disabled = false,
+    readOnly = false,
+    error,
+    fileTypes = [],
+    showAvailableTypes = false,
+    className,
+    defaultValue = undefined,
+    download = false,
+  } = props;
+
+  const [showTooltip, setShowTooltip] = useState<boolean>(false);
+
+  if (typeof defaultValue == "string") {
+    if (download) {
+      return (
+        <div
+          role="button"
+          tabIndex={0}
+          onClick={() => {
+            window.open(defaultValue, "_blank");
+          }}
+          onKeyDown={(event) => {
+            // Permite que el evento se active con la tecla Enter
+            if (event.key === "Enter") {
+              window.open(defaultValue, "_blank");
+            }
+          }}
+        >
+          {title && (
+            <label
+              htmlFor={name}
+              className="block mb-1 text-sm font-medium text-gray-700"
+            >
+              {title}
+            </label>
+          )}{" "}
+          <DownloadIconSVG />
+        </div>
+      );
+    }
+    return (
+      <div className={`col-span-6 sm:col-span-3 ${className}`}>
+        {title && (
+          <label
+            htmlFor={name}
+            className={`block mb-1 text-sm font-medium text-gray-700`}
+          >
+            {title}
+          </label>
+        )}{" "}
+        <div
+          role="button"
+          tabIndex={0}
+          onClick={() => {
+            window.open(defaultValue, "_blank");
+          }}
+          onKeyDown={(event) => {
+            // Permite que el evento se active con la tecla Enter
+            if (event.key === "Enter") {
+              window.open(defaultValue, "_blank");
+            }
+          }}
+        >
+          <img
+            src={defaultValue}
+            alt={name}
+            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>
+    );
+  }
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange && onChange(event);
+  };
+
+  let hintMessage = hint;
+  if (showAvailableTypes && fileTypes.length > 0) {
+    hintMessage = `${hint} Archivos permitidos: ${fileTypes.join(", ")}`;
+  }
+
+  const color = error ? "red" : "gray";
+  const isReadOnly = disabled || readOnly;
+  const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
+  const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
+  const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-500`;
+
+  return (
+    <div className={`col-span-6 sm:col-span-3 ${className}`}>
+      {title && (
+        <label
+          htmlFor={name}
+          className={`block mb-1 text-sm font-medium text-${color}-700`}
+        >
+          {title}
+        </label>
+      )}
+      <div className="flex relative items-center">
+        <input
+          type="file"
+          name={name}
+          id={id ?? name}
+          disabled={disabled}
+          readOnly={readOnly}
+          accept={fileTypes.map((ft) => `.${ft}`).join(", ")}
+          onChange={handleInputChange}
+          className={`block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`}
+        />
+        {helpText && (
+          <div className="flex items-center relative ml-3">
+            <div
+              className="relative cursor-pointer"
+              onMouseEnter={() => setShowTooltip(true)}
+              onMouseLeave={() => setShowTooltip(false)}
+            >
+              <IdeaIconSVG />
+              {showTooltip && (
+                <div className="absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50">
+                  {helpText}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+      {error && (
+        <p className={`mt-2 text-sm text-${color}-600`}>
+          <span className="font-medium">Oops!</span> {error}
+        </p>
+      )}
+      {!error && hintMessage && (
+        <p className={`mt-2 italic text-sm text-${color}-500`}>{hintMessage}</p>
+      )}
+    </div>
+  );
+};
+
+export const FileUploadField = (props: Props) => {
+  const { formValidations } = useAppSelector((state) => state.formValidation);
+  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+
+  props = { ...props, error };
+
+  return <FileUploadFieldWithoutValidation {...props} />;
+};