@zauru-sdk/components 1.0.12 → 1.0.14

package/src/Form/FormButtons/index.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+
+type Props = {
+  //Guardar
+  saveTitle?: string;
+  saveName?: string;
+  onClickSave?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  //Cancelar
+  showCancel?: boolean;
+  cancelTitle?: string;
+  cancelName?: string;
+  //Limpiar
+  showClear?: boolean;
+  clearTitle?: string;
+  clearName?: string;
+  //Cargando...
+  loading?: boolean;
+  loadingSaveText?: string;
+};
+
+export const FormButtons = (props: Props) => {
+  const {
+    saveTitle = "Guardar",
+    saveName = "save",
+    cancelTitle = "Cancelar",
+    cancelName = "cancel",
+    showCancel = true,
+    showClear = false,
+    clearName = "clear",
+    clearTitle = "Limpiar",
+    loading = false,
+    onClickSave,
+    loadingSaveText = "Guardando...",
+  } = props;
+
+  return (
+    <>
+      {showClear && (
+        <button
+          type="reset"
+          name="action"
+          disabled={loading}
+          value={clearName}
+          className={`ml-5 ${
+            loading ? " bg-opacity-25 cursor-progress" : ""
+          } rounded-md border border-gray-300 bg-white py-2 px-3 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`}
+        >
+          {clearTitle}
+        </button>
+      )}
+      {showCancel && (
+        <button
+          type="button"
+          name="action"
+          disabled={loading}
+          value={cancelName}
+          className={`${showClear ? "ml-2" : "ml-5"} ${
+            loading ? " bg-opacity-25 cursor-progress" : ""
+          } rounded-md border border-gray-300 bg-white py-2 px-3 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`}
+        >
+          {cancelTitle}
+        </button>
+      )}
+      <button
+        type="submit"
+        name="action"
+        disabled={loading}
+        value={saveName}
+        onClick={onClickSave}
+        className={`ml-2 ${
+          loading ? " bg-opacity-25 cursor-progress" : "hover:bg-indigo-700"
+        } inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`}
+      >
+        {loading ? loadingSaveText : saveTitle}
+      </button>
+    </>
+  );
+};

package/src/Form/FormLayout/index.tsx

@@ -0,0 +1,37 @@
+import { Form, type FormMethod } from "@remix-run/react";
+import { type ReactNode } from "react";
+import { ButtonSectionContainer } from "src";
+
+type Props = {
+  formId: string;
+  title?: string;
+  children: ReactNode;
+  buttons?: ReactNode;
+  method?: FormMethod;
+};
+
+export const FormLayout = (props: Props) => {
+  const { title, children, buttons, method, formId } = props;
+
+  return (
+    <Form id={formId} name={formId} method={method ?? "post"} key={formId}>
+      {title && (
+        <label className="block text-sm font-medium text-gray-700 mb-3">
+          {title}
+        </label>
+      )}
+      <div className="shadow sm:overflow-hidden sm:rounded-md">
+        <div className="space-y-6 bg-white px-4 py-5 sm:p-6">
+          {/* AQUÍ VAN EL CONTENIDO DEL FORM */}
+          {children}
+        </div>
+        {buttons && (
+          <ButtonSectionContainer>
+            {/* AQUÍ VAN LOS BOTONES */}
+            {buttons}
+          </ButtonSectionContainer>
+        )}
+      </div>
+    </Form>
+  );
+};

package/src/Form/SelectField/index.tsx

@@ -0,0 +1,237 @@
+import { IdeaIconSVG } from "@zauru-sdk/icons";
+import { useAppSelector } from "@zauru-sdk/redux";
+import { SelectFieldOption } from "@zauru-sdk/types";
+import { useEffect, useState } from "react";
+import type { SingleValue, InputActionMeta } from "react-select";
+import Select, { components } from "react-select";
+import { LoadingInputSkeleton } from "src";
+
+type Props = {
+  id?: string;
+  formName?: string;
+  name?: string;
+  title?: string;
+  defaultValue?: SingleValue<SelectFieldOption>;
+  defaultValueMulti?: SingleValue<SelectFieldOption>[];
+  helpText?: string;
+  options: Array<SelectFieldOption>;
+  onChange?: (value: SingleValue<SelectFieldOption>) => void;
+  onChangeMulti?: (value: Array<SingleValue<SelectFieldOption>>) => void;
+  onInputChange?: (newValue: string, actionMeta: InputActionMeta) => void;
+  isClearable?: boolean;
+  error?: string | undefined;
+  disabled?: boolean;
+  menuIsOpen?: boolean;
+  readOnly?: boolean;
+  isMulti?: boolean;
+  loading?: boolean;
+  hint?: string;
+  className?: string;
+};
+
+const Input = (props: any) => (
+  <components.Input {...props} readOnly={props.selectProps.isReadOnly} />
+);
+
+export const SelectFieldWithoutValidation = (props: Props) => {
+  const {
+    id,
+    name,
+    title,
+    defaultValue,
+    defaultValueMulti = [],
+    helpText,
+    hint,
+    options,
+    onChange,
+    onChangeMulti,
+    isClearable = false,
+    error = false,
+    disabled = false,
+    readOnly = false,
+    isMulti = false,
+    loading = false,
+    className = "",
+    onInputChange,
+  } = props;
+
+  const [value, setValue] = useState<SingleValue<SelectFieldOption>>(
+    defaultValue || null
+  );
+  const [valueMulti, setValueMulti] =
+    useState<SingleValue<SelectFieldOption>[]>(defaultValueMulti);
+  const [inputValue, setInputValue] = useState("");
+  const [showTooltip, setShowTooltip] = useState<boolean>(false);
+  const [isClient, setIsClient] = useState(typeof window !== "undefined");
+
+  const menuIsOpen = readOnly ? false : props?.menuIsOpen;
+  const color = error ? "red" : "gray";
+  let documentRef = null;
+
+  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`;
+
+  if (typeof window !== "undefined") {
+    documentRef = document;
+  }
+
+  useEffect(() => {
+    setValue(defaultValue || null);
+  }, [defaultValue]);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient || loading || !documentRef) {
+    return (
+      <>
+        {title && (
+          <label
+            htmlFor={error ? `${name}-error` : `${name}-success`}
+            className={`block text-sm font-medium text-${color}-700 dark:text-${color}-500`}
+          >
+            {title}
+          </label>
+        )}
+        <LoadingInputSkeleton />
+        {helpText && (
+          <p
+            className={`mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`}
+          >
+            {helpText}
+          </p>
+        )}
+      </>
+    );
+  }
+
+  const handleOnChange = (
+    selection: SingleValue<SelectFieldOption> | unknown
+  ) => {
+    // Verificar si el valor de selección es un objeto con propiedades 'value' y 'label'
+    if (
+      typeof selection === "object" &&
+      selection !== null &&
+      "value" in selection &&
+      "label" in selection
+    ) {
+      setValue(selection as SingleValue<SelectFieldOption>);
+      onChange && onChange(selection as SingleValue<SelectFieldOption>);
+    } else {
+      setValue(null);
+      onChange && onChange(null);
+    }
+  };
+
+  const handleOnChangeMulti = (
+    selection: SingleValue<SelectFieldOption>[] | unknown
+  ) => {
+    if (Array.isArray(selection)) {
+      setValueMulti(selection as SingleValue<SelectFieldOption>[]);
+      onChangeMulti &&
+        onChangeMulti(selection as SingleValue<SelectFieldOption>[]);
+    } else {
+      setValueMulti([]);
+      onChangeMulti && onChangeMulti([]);
+    }
+  };
+
+  const selectComponent = (
+    <>
+      <Select
+        className={`block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`}
+        id={isMulti ? undefined : id}
+        instanceId={isMulti ? undefined : id}
+        isDisabled={disabled}
+        name={isMulti ? undefined : name}
+        options={options}
+        onChange={isMulti ? handleOnChangeMulti : handleOnChange}
+        defaultValue={isMulti ? valueMulti : value}
+        onInputChange={(newValue: string, actionMeta: InputActionMeta) => {
+          setInputValue(newValue);
+          onInputChange && onInputChange(newValue, actionMeta);
+        }}
+        inputValue={inputValue}
+        onMenuOpen={() => {}}
+        onMenuClose={() => {}}
+        menuPortalTarget={documentRef?.body}
+        styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }}
+        isClearable={isClearable}
+        isSearchable={true}
+        components={{ Input }}
+        menuIsOpen={menuIsOpen}
+        //windowThreshold={50}
+        isMulti={isMulti}
+      />
+      {isMulti && (
+        <input
+          hidden
+          readOnly
+          name={name}
+          value={valueMulti.map((x) => x?.value).join(",")}
+          id={id}
+        />
+      )}
+    </>
+  );
+
+  return (
+    <div className={`col-span-6 sm:col-span-3 ${className}`}>
+      {title && (
+        <label
+          htmlFor={error ? `${name}-error` : `${name}-success`}
+          className={`block text-sm font-medium ${
+            color === "red"
+              ? "text-red-700 dark:text-red-500"
+              : "text-gray-700 dark:text-gray-500"
+          }`}
+        >
+          {title}
+        </label>
+      )}
+      <div className="flex relative items-center">
+        {selectComponent}
+        {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 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>
+      )}
+    </div>
+  );
+};
+
+export const SelectField = (props: Props) => {
+  const { formValidations } = useAppSelector((state) => state.formValidation);
+  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+
+  props = { ...props, error };
+
+  return <SelectFieldWithoutValidation {...props} />;
+};

package/src/Form/TextArea/index.tsx

@@ -0,0 +1,125 @@
+import { useAppSelector } from "@zauru-sdk/redux";
+import React, { useEffect, useState } from "react";
+
+type Props = {
+  id?: string;
+  name: string;
+  formName?: string;
+  title?: string;
+  defaultValue?: string | number;
+  hidden?: boolean;
+  hint?: string;
+  helpText?: string;
+  onChange?: (value: string) => void;
+  onKeyDown?: (event: React.KeyboardEvent) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  error?: string | undefined;
+  rows?: number;
+  cols?: number;
+  stopChangeEvents?: boolean;
+  className?: string;
+};
+
+export const TextAreaWithoutValidation = (props: Props) => {
+  const {
+    id,
+    name,
+    title,
+    defaultValue = "",
+    hidden,
+    hint,
+    onChange,
+    onKeyDown,
+    disabled = false,
+    error = false,
+    readOnly = false,
+    rows,
+    cols,
+    stopChangeEvents,
+    className = "",
+  } = props;
+
+  const [value, setValue] = useState(defaultValue);
+
+  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`;
+
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  if (hidden) {
+    return (
+      <textarea
+        id={id ?? name}
+        name={name}
+        value={defaultValue}
+        readOnly={true}
+        hidden={true}
+      />
+    );
+  }
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (stopChangeEvents) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+    setValue(event.target.value);
+    onChange && onChange(event.target.value);
+  };
+
+  return (
+    <div className={`col-span-6 sm:col-span-3 ${className}`}>
+      {title && (
+        <label
+          htmlFor={error ? `${name}-error` : `${name}-success`}
+          className={`block text-sm font-medium text-${color}-700 dark:text-${color}-500`}
+        >
+          {title}
+        </label>
+      )}
+      <textarea
+        name={name}
+        readOnly={readOnly}
+        disabled={disabled}
+        id={id ?? name}
+        autoComplete="given-name"
+        value={value}
+        rows={rows}
+        cols={cols}
+        onChange={handleInputChange}
+        onKeyDown={(event: React.KeyboardEvent) => {
+          onKeyDown && onKeyDown(event);
+        }}
+        className={`mt-1 block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`}
+      />
+      {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>
+      )}
+    </div>
+  );
+};
+
+//<reference> https://tailwindui.com/components/application-ui/forms/form-layouts
+export const TextArea = (props: Props) => {
+  const { formValidations } = useAppSelector((state) => state.formValidation);
+  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+
+  props = { ...props, error };
+
+  return <TextAreaWithoutValidation {...props} />;
+};

package/src/Form/TextField/index.tsx

@@ -0,0 +1,194 @@
+import { 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;
+  defaultValue?: string | number;
+  hidden?: boolean;
+  type?: React.HTMLInputTypeAttribute;
+  helpText?: string;
+  hint?: string;
+  onChange?: (
+    value: string,
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => void;
+  onKeyDown?: (event: React.KeyboardEvent) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  error?: string;
+  min?: string | number;
+  integer?: boolean;
+  stopChangeEvents?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+};
+
+export const TextFieldWithoutValidation = (props: Props) => {
+  const {
+    id,
+    name,
+    defaultValue = "",
+    hidden,
+    type = "text",
+    onChange,
+    onKeyDown,
+    disabled = false,
+    readOnly = false,
+    min,
+    integer = false,
+    stopChangeEvents,
+    style,
+    error,
+    title,
+    helpText,
+    className,
+    hint,
+  } = props;
+
+  const [showTooltip, setShowTooltip] = useState<boolean>(false);
+  const [value, setValue] = useState(defaultValue);
+
+  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`;
+
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  if (hidden) {
+    return (
+      <input
+        type={type}
+        id={id ?? name}
+        name={name}
+        value={defaultValue}
+        readOnly={true}
+        hidden={true}
+      />
+    );
+  }
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (stopChangeEvents) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+    if (integer && type === "number") {
+      const value = event.target.value;
+      const isInteger = /^[0-9]*$/.test(value);
+      if (isInteger || value === "") {
+        setValue(value);
+        onChange && onChange(value, event);
+      }
+    } else {
+      setValue(event.target.value);
+      onChange && onChange(event.target.value, event);
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (integer && type === "number") {
+      // Permitir solo números y teclas de control
+      const allowedKeys = [
+        "Backspace",
+        "ArrowLeft",
+        "ArrowRight",
+        "Delete",
+        "Enter",
+        "Tab",
+      ];
+      if (!allowedKeys.includes(event.key) && !/^[0-9]$/.test(event.key)) {
+        event.preventDefault();
+      }
+    }
+  };
+
+  const inputComponent = (
+    <input
+      type={type}
+      name={name}
+      readOnly={readOnly}
+      disabled={disabled}
+      id={id ?? name}
+      autoComplete="given-name"
+      value={value}
+      onWheel={(e: React.WheelEvent<HTMLInputElement>) => {
+        e.currentTarget.blur();
+      }}
+      step={type === "number" ? 0.01 : undefined} //para aceptar decimales
+      onChange={handleInputChange}
+      onKeyDown={(event: React.KeyboardEvent) => {
+        handleKeyDown(event);
+        onKeyDown && onKeyDown(event);
+      }}
+      min={min}
+      style={style}
+      className={`block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`}
+    />
+  );
+
+  if (!error && !title) {
+    return <div className={`${className}`}>{inputComponent}</div>;
+  }
+
+  return (
+    <div className={`col-span-6 sm:col-span-3 ${className}`}>
+      {title && (
+        <label
+          htmlFor={error ? `${name}-error` : `${name}-success`}
+          className={`block mb-1 text-sm font-medium text-${color}-700 dark:text-${color}-500`}
+        >
+          {title}
+        </label>
+      )}
+      <div className="flex relative items-center">
+        {inputComponent}
+        {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 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>
+      )}
+    </div>
+  );
+};
+
+export const TextField = (props: Props) => {
+  const { formValidations } = useAppSelector((state) => state.formValidation);
+  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+
+  props = { ...props, error };
+
+  return <TextFieldWithoutValidation {...props} />;
+};