@zauru-sdk/components 1.0.54 → 1.0.60

package/src/Form/TimePicker/index.tsx

@@ -1,127 +1,127 @@
-import { ClockIconSVG, CloseSvgIcon, IdeaIconSVG } from "@zauru-sdk/icons";
-import { useAppSelector } from "@zauru-sdk/redux";
-import React, { useEffect, useState } from "react";
-
-type Props = {
-  id?: string;
-  name: string;
-  formName?: string;
-  title?: string;
-  hint?: string;
-  helpText?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  tabIndex?: number;
-  error?: string;
-  disabled?: boolean;
-};
-
-export const FormTimePickerWithoutValidation = (props: Props) => {
-  const {
-    id,
-    name,
-    title,
-    defaultValue = "",
-    hint,
-    helpText,
-    onChange,
-    tabIndex,
-    error,
-    disabled = false,
-  } = props;
-
-  const [value, setValue] = useState<string>(defaultValue);
-  const [showTooltip, setShowTooltip] = useState<boolean>(false);
-
-  const color = error ? "red" : "gray";
-
-  const isReadOnly = disabled;
-  const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
-  const textColor = isReadOnly ? "text-gray-500" : `text-${color}-500`;
-  const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
-
-  useEffect(() => {
-    setValue(defaultValue);
-  }, [defaultValue]);
-
-  const clearValue = () => {
-    setValue("");
-    onChange && onChange("");
-  };
-
-  return (
-    <>
-      {title && (
-        <label
-          htmlFor={error ? `${name}-error` : `${name}-success`}
-          className={`block text-sm font-medium ${textColor}`}
-        >
-          {title}
-        </label>
-      )}
-      <div className="flex relative items-center">
-        <div className="absolute left-0 flex items-center pl-3 pointer-events-none">
-          <ClockIconSVG />
-        </div>
-        <input
-          id={id}
-          name={name}
-          tabIndex={tabIndex}
-          type="time"
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            setValue(e.target.value);
-            onChange && onChange(e.target.value);
-          }}
-          value={value}
-          pattern="\d{2}:\d{2}"
-          className={`${bgColor} ${borderColor} ${textColor} text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5`}
-        />
-        {value && (
-          <button
-            type="button"
-            onClick={clearValue}
-            className="absolute right-0 mr-10"
-          >
-            <CloseSvgIcon />
-          </button>
-        )}
-        {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">
-                  {helpText}
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-      {error && (
-        <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>
-          <span className="font-medium">Oops!</span> {error}
-        </p>
-      )}
-      {!error && hint && (
-        <p
-          className={`mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`}
-        >
-          {hint}
-        </p>
-      )}
-    </>
-  );
-};
-
-export const FormTimePicker = (props: Props) => {
-  const { formValidations } = useAppSelector((state) => state.formValidation);
-  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
-  props = { ...props, error };
-
-  return <FormTimePickerWithoutValidation {...props} />;
-};
+import { ClockIconSVG, CloseSvgIcon, IdeaIconSVG } from "@zauru-sdk/icons";
+import { useAppSelector } from "@zauru-sdk/redux";
+import React, { useEffect, useState } from "react";
+
+type Props = {
+  id?: string;
+  name: string;
+  formName?: string;
+  title?: string;
+  hint?: string;
+  helpText?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  tabIndex?: number;
+  error?: string;
+  disabled?: boolean;
+};
+
+export const FormTimePickerWithoutValidation = (props: Props) => {
+  const {
+    id,
+    name,
+    title,
+    defaultValue = "",
+    hint,
+    helpText,
+    onChange,
+    tabIndex,
+    error,
+    disabled = false,
+  } = props;
+
+  const [value, setValue] = useState<string>(defaultValue);
+  const [showTooltip, setShowTooltip] = useState<boolean>(false);
+
+  const color = error ? "red" : "gray";
+
+  const isReadOnly = disabled;
+  const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
+  const textColor = isReadOnly ? "text-gray-500" : `text-${color}-500`;
+  const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
+
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  const clearValue = () => {
+    setValue("");
+    onChange && onChange("");
+  };
+
+  return (
+    <>
+      {title && (
+        <label
+          htmlFor={error ? `${name}-error` : `${name}-success`}
+          className={`block text-sm font-medium ${textColor}`}
+        >
+          {title}
+        </label>
+      )}
+      <div className="flex relative items-center">
+        <div className="absolute left-0 flex items-center pl-3 pointer-events-none">
+          <ClockIconSVG />
+        </div>
+        <input
+          id={id}
+          name={name}
+          tabIndex={tabIndex}
+          type="time"
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setValue(e.target.value);
+            onChange && onChange(e.target.value);
+          }}
+          value={value}
+          pattern="\d{2}:\d{2}"
+          className={`${bgColor} ${borderColor} ${textColor} text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5`}
+        />
+        {value && (
+          <button
+            type="button"
+            onClick={clearValue}
+            className="absolute right-0 mr-10"
+          >
+            <CloseSvgIcon />
+          </button>
+        )}
+        {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">
+                  {helpText}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+      {error && (
+        <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>
+          <span className="font-medium">Oops!</span> {error}
+        </p>
+      )}
+      {!error && hint && (
+        <p
+          className={`mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`}
+        >
+          {hint}
+        </p>
+      )}
+    </>
+  );
+};
+
+export const FormTimePicker = (props: Props) => {
+  const { formValidations } = useAppSelector((state) => state.formValidation);
+  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+  props = { ...props, error };
+
+  return <FormTimePickerWithoutValidation {...props} />;
+};

package/src/Form/YesNo/index.tsx

@@ -1,77 +1,77 @@
-import { useAppSelector } from "@zauru-sdk/redux";
-import { useState } from "react";
-
-type Props = {
-  id?: string;
-  name: string;
-  formName?: string;
-  title?: string;
-  defaultValue?: boolean;
-  helpText?: string;
-  onChange?: (value: boolean) => void;
-  disabled?: boolean;
-};
-
-export const YesNo = (props: Props) => {
-  const {
-    id,
-    name,
-    title,
-    defaultValue = false,
-    helpText,
-    onChange,
-    disabled,
-  } = props;
-
-  const { formValidations } = useAppSelector((state) => state.formValidation);
-  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
-
-  const [value, setValue] = useState(defaultValue);
-
-  const color = error ? "red" : "gray";
-
-  const handleOnChange = () => {
-    if (disabled) return; // No hacer nada si está deshabilitado
-    const newValue = !value;
-    setValue(newValue);
-    onChange && onChange(newValue);
-  };
-
-  return (
-    <>
-      <label
-        className={`relative inline-flex items-center cursor-pointer ${
-          disabled ? "opacity-50" : ""
-        }`}
-      >
-        <input
-          type="checkbox"
-          id={id ?? name}
-          name={name}
-          checked={value}
-          value={value.toString()}
-          className="sr-only peer"
-          onChange={handleOnChange}
-          disabled={disabled}
-        />
-        {value.toString() === "false" && (
-          <input type="hidden" name={name} value="false" />
-        )}
-        <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
-        <span className="ml-3 text-sm font-medium text-gray-900">{title}</span>
-      </label>
-      {error && (
-        <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>
-          <span className="font-medium">Oops!</span> {error}
-        </p>
-      )}
-      {!error && helpText && (
-        <p
-          className={`mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`}
-        >
-          {helpText}
-        </p>
-      )}
-    </>
-  );
-};
+import { useAppSelector } from "@zauru-sdk/redux";
+import { useState } from "react";
+
+type Props = {
+  id?: string;
+  name: string;
+  formName?: string;
+  title?: string;
+  defaultValue?: boolean;
+  helpText?: string;
+  onChange?: (value: boolean) => void;
+  disabled?: boolean;
+};
+
+export const YesNo = (props: Props) => {
+  const {
+    id,
+    name,
+    title,
+    defaultValue = false,
+    helpText,
+    onChange,
+    disabled,
+  } = props;
+
+  const { formValidations } = useAppSelector((state) => state.formValidation);
+  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+
+  const [value, setValue] = useState(defaultValue);
+
+  const color = error ? "red" : "gray";
+
+  const handleOnChange = () => {
+    if (disabled) return; // No hacer nada si está deshabilitado
+    const newValue = !value;
+    setValue(newValue);
+    onChange && onChange(newValue);
+  };
+
+  return (
+    <>
+      <label
+        className={`relative inline-flex items-center cursor-pointer ${
+          disabled ? "opacity-50" : ""
+        }`}
+      >
+        <input
+          type="checkbox"
+          id={id ?? name}
+          name={name}
+          checked={value}
+          value={value.toString()}
+          className="sr-only peer"
+          onChange={handleOnChange}
+          disabled={disabled}
+        />
+        {value.toString() === "false" && (
+          <input type="hidden" name={name} value="false" />
+        )}
+        <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+        <span className="ml-3 text-sm font-medium text-gray-900">{title}</span>
+      </label>
+      {error && (
+        <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>
+          <span className="font-medium">Oops!</span> {error}
+        </p>
+      )}
+      {!error && helpText && (
+        <p
+          className={`mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`}
+        >
+          {helpText}
+        </p>
+      )}
+    </>
+  );
+};

package/src/Form/index.ts

@@ -1,13 +1,13 @@
-export * from "./Checkbox/index.js";
-export * from "./Checklist/index.js";
-export * from "./DatePicker/index.js";
-export * from "./DynamicBaculoForm/index.js";
-export * from "./FieldContainer/index.js";
-export * from "./FileUpload/index.js";
-export * from "./FormButtons/index.js";
-export * from "./FormLayout/index.js";
-export * from "./SelectField/index.js";
-export * from "./TextArea/index.js";
-export * from "./TextField/index.js";
-export * from "./TimePicker/index.js";
-export * from "./YesNo/index.js";
+export * from "./Checkbox/index.js";
+export * from "./Checklist/index.js";
+export * from "./DatePicker/index.js";
+export * from "./DynamicBaculoForm/index.js";
+export * from "./FieldContainer/index.js";
+export * from "./FileUpload/index.js";
+export * from "./FormButtons/index.js";
+export * from "./FormLayout/index.js";
+export * from "./SelectField/index.js";
+export * from "./TextArea/index.js";
+export * from "./TextField/index.js";
+export * from "./TimePicker/index.js";
+export * from "./YesNo/index.js";

package/src/Labels/InfoLabel/index.tsx

@@ -1,21 +1,21 @@
-import React from "react";
-
-type Props = {
-  description: string;
-  title: string;
-  className?: string;
-};
-
-export const InfoLabel = (props: Props) => {
-  const { description, title, className } = props;
-  return (
-    <div className={`block ${className}`}>
-      <label className="inline text-sm font-medium text-gray-700">
-        {`${title.toUpperCase()} `}
-      </label>
-      <label className="inline text-sm font-medium text-gray-500">
-        {description}
-      </label>
-    </div>
-  );
-};
+import React from "react";
+
+type Props = {
+  description: string;
+  title: string;
+  className?: string;
+};
+
+export const InfoLabel = (props: Props) => {
+  const { description, title, className } = props;
+  return (
+    <div className={`block ${className}`}>
+      <label className="inline text-sm font-medium text-gray-700">
+        {`${title.toUpperCase()} `}
+      </label>
+      <label className="inline text-sm font-medium text-gray-500">
+        {description}
+      </label>
+    </div>
+  );
+};

package/src/Labels/index.tsx

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

package/src/Layouts/homeLayout/index.tsx

@@ -1,34 +1,34 @@
-type Props = {
-  title?: string;
-  description?: string;
-};
-
-export const HomeLayout = ({ title, description }: Props) => {
-  return (
-    <div
-      className="bg-cover bg-center h-screen"
-      style={{ backgroundImage: 'url("/wallpaper.webp")' }}
-    >
-      <div className="flex flex-col h-screen justify-center items-center">
-        <h1
-          className="text-6xl md:text-7xl lg:text-8xl text-white font-bold mb-6 text-center"
-          style={{
-            textShadow: "0.5px 0.5px 1px #000000",
-            WebkitTextStroke: "2px #000000",
-          }}
-        >
-          {title ?? <>Bienvenido, inicie sesión para continuar.</>}
-        </h1>
-        <p
-          className="text-xl md:text-2xl lg:text-3xl text-white text-center max-w-md mb-12"
-          style={{
-            textShadow: "0.5px 0.5px 1px #000000",
-            WebkitTextStroke: "1px #000000",
-          }}
-        >
-          {description ?? <>Web app, realizada en Zauru.</>}
-        </p>
-      </div>
-    </div>
-  );
-};
+type Props = {
+  title?: string;
+  description?: string;
+};
+
+export const HomeLayout = ({ title, description }: Props) => {
+  return (
+    <div
+      className="bg-cover bg-center h-screen"
+      style={{ backgroundImage: 'url("/wallpaper.webp")' }}
+    >
+      <div className="flex flex-col h-screen justify-center items-center">
+        <h1
+          className="text-6xl md:text-7xl lg:text-8xl text-white font-bold mb-6 text-center"
+          style={{
+            textShadow: "0.5px 0.5px 1px #000000",
+            WebkitTextStroke: "2px #000000",
+          }}
+        >
+          {title ?? <>Bienvenido, inicie sesión para continuar.</>}
+        </h1>
+        <p
+          className="text-xl md:text-2xl lg:text-3xl text-white text-center max-w-md mb-12"
+          style={{
+            textShadow: "0.5px 0.5px 1px #000000",
+            WebkitTextStroke: "1px #000000",
+          }}
+        >
+          {description ?? <>Web app, realizada en Zauru.</>}
+        </p>
+      </div>
+    </div>
+  );
+};

package/src/Layouts/index.ts

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

package/src/LineSeparator/LineSeparator.tsx

@@ -1,3 +1,3 @@
-export const LineSeparator = () => {
-  return <hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-400"></hr>;
-};
+export const LineSeparator = () => {
+  return <hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-400"></hr>;
+};

package/src/LineSeparator/index.tsx

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