@zauru-sdk/components 1.0.54 → 1.0.60

package/src/DynamicTable/index.tsx

@@ -1,4 +1,4 @@
-export * from "./BasicPrintDynamicTable.js";
-export * from "./DynamicPrintTable.js";
-export * from "./DynamicTable.js";
-export * from "./GenericDynamicTable.js";
+export * from "./BasicPrintDynamicTable.js";
+export * from "./DynamicPrintTable.js";
+export * from "./DynamicTable.js";
+export * from "./GenericDynamicTable.js";

package/src/Footer/Footer.tsx

@@ -1,50 +1,50 @@
-import { ConnectionState } from "./../ConnectionState/index.js";
-
-type FooterProps = {
-  href: string;
-  showConnection?: boolean;
-  selectedColor:
-    | "purple"
-    | "pink"
-    | "indigo"
-    | "cyan"
-    | "slate"
-    | "green"
-    | "red"
-    | "sky";
-};
-
-const COLORS = {
-  purple: "bg-purple-500",
-  pink: "bg-pink-500",
-  indigo: "bg-indigo-500",
-  cyan: "bg-cyan-500",
-  slate: "bg-slate-500",
-  green: "bg-green-500",
-  red: "bg-red-500",
-  sky: "bg-sky-500",
-};
-
-export const Footer = ({
-  href,
-  selectedColor,
-  showConnection = false,
-}: FooterProps) => {
-  const color = COLORS[selectedColor];
-
-  return (
-    <footer className={`inset-x-0 bottom-0 px-2 py-[20px] ${color}`}>
-      <div className="px-4 mx-auto flex flex-wrap items-center justify-center">
-        <p className="text-white text-[1.2rem]">
-          {`Creado en `} <a href={href}>Zauru</a>{" "}
-          {`con ❤️ ${new Date().getFullYear()} v.3.2`}
-        </p>
-        {showConnection && (
-          <div className="ml-5">
-            <ConnectionState />
-          </div>
-        )}
-      </div>
-    </footer>
-  );
-};
+import { ConnectionState } from "./../ConnectionState/index.js";
+
+type FooterProps = {
+  href: string;
+  showConnection?: boolean;
+  selectedColor:
+    | "purple"
+    | "pink"
+    | "indigo"
+    | "cyan"
+    | "slate"
+    | "green"
+    | "red"
+    | "sky";
+};
+
+const COLORS = {
+  purple: "bg-purple-500",
+  pink: "bg-pink-500",
+  indigo: "bg-indigo-500",
+  cyan: "bg-cyan-500",
+  slate: "bg-slate-500",
+  green: "bg-green-500",
+  red: "bg-red-500",
+  sky: "bg-sky-500",
+};
+
+export const Footer = ({
+  href,
+  selectedColor,
+  showConnection = false,
+}: FooterProps) => {
+  const color = COLORS[selectedColor];
+
+  return (
+    <footer className={`inset-x-0 bottom-0 px-2 py-[20px] ${color}`}>
+      <div className="px-4 mx-auto flex flex-wrap items-center justify-center">
+        <p className="text-white text-[1.2rem]">
+          {`Creado en `} <a href={href}>Zauru</a>{" "}
+          {`con ❤️ ${new Date().getFullYear()} v.3.2`}
+        </p>
+        {showConnection && (
+          <div className="ml-5">
+            <ConnectionState />
+          </div>
+        )}
+      </div>
+    </footer>
+  );
+};

package/src/Footer/index.tsx

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

package/src/Form/Checkbox/index.tsx

@@ -1,96 +1,96 @@
-import { useAppSelector } from "@zauru-sdk/redux";
-import React, { useEffect, useState } from "react";
-
-type Props = {
-  id?: string;
-  name?: string;
-  formName?: string;
-  label?: string;
-  defaultValue?: boolean;
-  onChange?: (
-    value: boolean,
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => { stopUIChange: boolean } | void;
-  disabled?: boolean;
-  error?: string | undefined;
-  borderColor?: string;
-};
-
-export const CheckboxWithoutValidation = (props: Props) => {
-  const {
-    id,
-    name,
-    defaultValue = false,
-    onChange,
-    disabled = false,
-    error,
-    label,
-  } = props;
-
-  const [checked, setChecked] = useState(defaultValue);
-
-  useEffect(() => {
-    setChecked(defaultValue);
-  }, [defaultValue]);
-
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const isChecked = event.target.checked;
-    if (onChange) {
-      const result = onChange(isChecked, event);
-      if (result?.stopUIChange) {
-        return;
-      }
-    }
-    setChecked(isChecked);
-  };
-
-  const color = error ? "red" : "gray";
-  const borderColor = disabled ? "border-gray-300" : `border-${color}-500`;
-
-  const inputComponent = (
-    <input
-      type="checkbox"
-      id={id ?? name}
-      name={name}
-      checked={checked}
-      onChange={handleInputChange}
-      className={`form-checkbox h-4 w-4 text-indigo-600 ${borderColor} focus:border-indigo-500 focus:ring-indigo-500`}
-      disabled={disabled}
-    />
-  );
-
-  if (!error && !label) {
-    return inputComponent;
-  }
-
-  return (
-    <div className="col-span-6 sm:col-span-3">
-      <div className={`flex items-center ${borderColor}`}>
-        {inputComponent}
-        {label && (
-          <label
-            htmlFor={id ?? name}
-            className={`ml-2 block text-sm font-medium text-${color}-700 dark:text-${color}-500`}
-          >
-            {label}
-          </label>
-        )}
-      </div>
-      {error && (
-        <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>
-          <span className="font-medium">Oops!</span> {error}
-        </p>
-      )}
-    </div>
-  );
-};
-
-//<reference> https://tailwindui.com/components/application-ui/forms/form-layouts
-export const CheckBox = (props: Props) => {
-  const { formValidations } = useAppSelector((state) => state.formValidation);
-  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
-
-  props = { ...props, error };
-
-  return <CheckboxWithoutValidation {...props} />;
-};
+import { useAppSelector } from "@zauru-sdk/redux";
+import React, { useEffect, useState } from "react";
+
+type Props = {
+  id?: string;
+  name?: string;
+  formName?: string;
+  label?: string;
+  defaultValue?: boolean;
+  onChange?: (
+    value: boolean,
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => { stopUIChange: boolean } | void;
+  disabled?: boolean;
+  error?: string | undefined;
+  borderColor?: string;
+};
+
+export const CheckboxWithoutValidation = (props: Props) => {
+  const {
+    id,
+    name,
+    defaultValue = false,
+    onChange,
+    disabled = false,
+    error,
+    label,
+  } = props;
+
+  const [checked, setChecked] = useState(defaultValue);
+
+  useEffect(() => {
+    setChecked(defaultValue);
+  }, [defaultValue]);
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const isChecked = event.target.checked;
+    if (onChange) {
+      const result = onChange(isChecked, event);
+      if (result?.stopUIChange) {
+        return;
+      }
+    }
+    setChecked(isChecked);
+  };
+
+  const color = error ? "red" : "gray";
+  const borderColor = disabled ? "border-gray-300" : `border-${color}-500`;
+
+  const inputComponent = (
+    <input
+      type="checkbox"
+      id={id ?? name}
+      name={name}
+      checked={checked}
+      onChange={handleInputChange}
+      className={`form-checkbox h-4 w-4 text-indigo-600 ${borderColor} focus:border-indigo-500 focus:ring-indigo-500`}
+      disabled={disabled}
+    />
+  );
+
+  if (!error && !label) {
+    return inputComponent;
+  }
+
+  return (
+    <div className="col-span-6 sm:col-span-3">
+      <div className={`flex items-center ${borderColor}`}>
+        {inputComponent}
+        {label && (
+          <label
+            htmlFor={id ?? name}
+            className={`ml-2 block text-sm font-medium text-${color}-700 dark:text-${color}-500`}
+          >
+            {label}
+          </label>
+        )}
+      </div>
+      {error && (
+        <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>
+          <span className="font-medium">Oops!</span> {error}
+        </p>
+      )}
+    </div>
+  );
+};
+
+//<reference> https://tailwindui.com/components/application-ui/forms/form-layouts
+export const CheckBox = (props: Props) => {
+  const { formValidations } = useAppSelector((state) => state.formValidation);
+  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+
+  props = { ...props, error };
+
+  return <CheckboxWithoutValidation {...props} />;
+};

package/src/Form/Checklist/index.tsx

@@ -1,35 +1,35 @@
-import React from "react";
-import { CheckboxWithoutValidation } from "../Checkbox/index.js";
-
-export type ChecklistItem = {
-  id: string;
-  name: string;
-  label: string;
-  defaultValue?: boolean;
-  disabled?: boolean;
-};
-
-type ChecklistProps = {
-  items: ChecklistItem[];
-  onChange?: (name: string, value: boolean) => void;
-};
-
-export const Checklist: React.FC<ChecklistProps> = ({ items, onChange }) => {
-  const handleCheckboxChange = (name: string, value: boolean) => {
-    if (onChange) {
-      onChange(name, value);
-    }
-  };
-
-  return (
-    <div>
-      {items.map((item) => (
-        <CheckboxWithoutValidation
-          key={item.id}
-          {...item}
-          onChange={(value) => handleCheckboxChange(item.name, value)}
-        />
-      ))}
-    </div>
-  );
-};
+import React from "react";
+import { CheckboxWithoutValidation } from "../Checkbox/index.js";
+
+export type ChecklistItem = {
+  id: string;
+  name: string;
+  label: string;
+  defaultValue?: boolean;
+  disabled?: boolean;
+};
+
+type ChecklistProps = {
+  items: ChecklistItem[];
+  onChange?: (name: string, value: boolean) => void;
+};
+
+export const Checklist: React.FC<ChecklistProps> = ({ items, onChange }) => {
+  const handleCheckboxChange = (name: string, value: boolean) => {
+    if (onChange) {
+      onChange(name, value);
+    }
+  };
+
+  return (
+    <div>
+      {items.map((item) => (
+        <CheckboxWithoutValidation
+          key={item.id}
+          {...item}
+          onChange={(value) => handleCheckboxChange(item.name, value)}
+        />
+      ))}
+    </div>
+  );
+};

package/src/Form/DatePicker/index.tsx

@@ -1,132 +1,132 @@
-import React, { useEffect, useState } from "react";
-import { CalendarIconSVG, CloseSvgIcon, IdeaIconSVG } from "@zauru-sdk/icons";
-import { useAppSelector } from "@zauru-sdk/redux";
-
-type Props = {
-  id?: string;
-  name: string;
-  formName?: string;
-  title?: string;
-  hint?: string;
-  helpText?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  isClearable?: boolean;
-  tabIndex?: number;
-  error?: string;
-  disabled?: boolean;
-  className?: string;
-};
-
-export const FormDatePickerWithoutValidation = (props: Props) => {
-  const {
-    id,
-    name,
-    title,
-    defaultValue = "",
-    hint,
-    helpText,
-    onChange,
-    tabIndex,
-    error,
-    disabled = false,
-    className = "",
-    isClearable = false,
-  } = props;
-
-  const [value, setValue] = useState<string | null>(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} ${className}`}
-        >
-          {title}
-        </label>
-      )}
-      <div className="flex relative items-center">
-        <div className="absolute left-0 flex items-center pl-3 pointer-events-none">
-          <CalendarIconSVG />
-        </div>
-        <input
-          id={id}
-          name={name}
-          tabIndex={tabIndex}
-          type="date"
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            setValue(e.target.value);
-            onChange && onChange(e.target.value);
-          }}
-          value={value ?? ""}
-          pattern="\d{4}-\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`}
-        ></input>
-        {value && isClearable && (
-          <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 FormDatePicker = (props: Props) => {
-  const { formValidations } = useAppSelector((state) => state.formValidation);
-  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
-
-  props = { ...props, error };
-
-  return <FormDatePickerWithoutValidation {...props} />;
-};
+import React, { useEffect, useState } from "react";
+import { CalendarIconSVG, CloseSvgIcon, IdeaIconSVG } from "@zauru-sdk/icons";
+import { useAppSelector } from "@zauru-sdk/redux";
+
+type Props = {
+  id?: string;
+  name: string;
+  formName?: string;
+  title?: string;
+  hint?: string;
+  helpText?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  isClearable?: boolean;
+  tabIndex?: number;
+  error?: string;
+  disabled?: boolean;
+  className?: string;
+};
+
+export const FormDatePickerWithoutValidation = (props: Props) => {
+  const {
+    id,
+    name,
+    title,
+    defaultValue = "",
+    hint,
+    helpText,
+    onChange,
+    tabIndex,
+    error,
+    disabled = false,
+    className = "",
+    isClearable = false,
+  } = props;
+
+  const [value, setValue] = useState<string | null>(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} ${className}`}
+        >
+          {title}
+        </label>
+      )}
+      <div className="flex relative items-center">
+        <div className="absolute left-0 flex items-center pl-3 pointer-events-none">
+          <CalendarIconSVG />
+        </div>
+        <input
+          id={id}
+          name={name}
+          tabIndex={tabIndex}
+          type="date"
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setValue(e.target.value);
+            onChange && onChange(e.target.value);
+          }}
+          value={value ?? ""}
+          pattern="\d{4}-\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`}
+        ></input>
+        {value && isClearable && (
+          <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 FormDatePicker = (props: Props) => {
+  const { formValidations } = useAppSelector((state) => state.formValidation);
+  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+
+  props = { ...props, error };
+
+  return <FormDatePickerWithoutValidation {...props} />;
+};