@axzydev/axzy_ui_system 1.2.1 → 1.2.3

package/src/components/radio/radio.tsx

@@ -0,0 +1,58 @@
+import clsx from "clsx";
+import { ITRadioGroupProps } from "./radio.props";
+import ITText from "@/components/text/text";
+
+export default function ITRadioGroup({
+  name,
+  value,
+  onChange,
+  options,
+  disabled = false,
+  direction = "column",
+  className,
+}: ITRadioGroupProps) {
+  return (
+    <div
+      className={clsx(
+        "flex gap-3",
+        direction === "row" ? "flex-row flex-wrap" : "flex-col",
+        className
+      )}
+    >
+      {options.map((opt) => {
+        const isSelected = opt.value === value;
+        return (
+          <label
+            key={opt.value}
+            className={clsx(
+              "inline-flex items-center gap-2 cursor-pointer select-none",
+              disabled && "opacity-50 cursor-not-allowed"
+            )}
+          >
+            <input
+              type="radio"
+              name={name}
+              value={opt.value}
+              checked={isSelected}
+              onChange={() => onChange(opt.value)}
+              disabled={disabled}
+              className="peer sr-only"
+            />
+            <div
+              className={clsx(
+                "w-4 h-4 rounded-full border-2 flex items-center justify-center transition-all",
+                isSelected
+                  ? "border-primary-500"
+                  : "border-slate-300 dark:border-slate-600",
+                !disabled && "peer-focus:ring-2 peer-focus:ring-primary-200",
+              )}
+            >
+              {isSelected && <div className="w-2 h-2 rounded-full bg-primary-500" />}
+            </div>
+            <ITText as="span" className="text-sm text-slate-700 dark:text-slate-300">{opt.label}</ITText>
+          </label>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/search-select/index.ts

@@ -0,0 +1,2 @@
+export { default as ITSearchSelect } from "./search-select";
+export * from "./search-select.props";

package/src/components/search-select/search-select.props.ts

@@ -0,0 +1,46 @@
+import { FocusEvent } from "react";
+
+export interface ITSearchSelectOption {
+  label: string;
+  value: string | number;
+  [key: string]: any;
+}
+
+export interface ITSearchSelectProps {
+  /** Nombre del campo para integraciones con formularios */
+  name?: string;
+  /** Etiqueta que se muestra arriba del select */
+  label?: string;
+  /** Texto que se muestra cuando no hay nada seleccionado */
+  placeholder?: string;
+  /** Valor seleccionado */
+  value?: string | number;
+  /** Arreglo de opciones (Modo 1: Lista estática) */
+  options?: ITSearchSelectOption[];
+  /** Campo que se usará como valor (por defecto "value") */
+  valueField?: string;
+  /** Campo que se usará como etiqueta (por defecto "label") */
+  labelField?: string;
+  /** Callback cuando cambia el valor */
+  onChange?: (value: string | number, option?: ITSearchSelectOption) => void;
+  /** Callback cuando pierde el foco */
+  onBlur?: (e: FocusEvent<any>) => void;
+  /** Indica si el componente está deshabilitado */
+  disabled?: boolean;
+  /** Clase CSS adicional para el contenedor */
+  className?: string;
+  /** Indica si el campo ha sido tocado (para validaciones) */
+  touched?: boolean;
+  /** Indica si el campo es requerido */
+  required?: boolean;
+  /** Mensaje de error */
+  error?: string | boolean;
+  /** Indica si el campo es de solo lectura */
+  readOnly?: boolean;
+  /** Callback para búsqueda en servidor (Modo 2: Conexión con API) */
+  onSearch?: (query: string) => void;
+  /** Indica si se está cargando información desde la API */
+  isLoading?: boolean;
+  /** Mensaje cuando no hay resultados */
+  noResultsMessage?: string;
+}

package/src/components/search-select/search-select.stories.tsx

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ITSearchSelect from "./search-select";
+import { useState } from "react";
+import { ITSearchSelectOption } from "./search-select.props";
+
+const meta: Meta<typeof ITSearchSelect> = {
+  title: "Components/Form Elements/ITSearchSelect",
+  component: ITSearchSelect,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: { control: "boolean" },
+    required: { control: "boolean" },
+    error: { control: "text" },
+    isLoading: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ITSearchSelect>;
+
+const options: ITSearchSelectOption[] = [
+  { value: 1, label: "Juan Pérez" },
+  { value: 2, label: "María García" },
+  { value: 3, label: "Carlos Rodríguez" },
+  { value: 4, label: "Ana Martínez" },
+  { value: 5, label: "Luis López" },
+  { value: 6, label: "Elena Sánchez" },
+  { value: 7, label: "Roberto Díaz" },
+  { value: 8, label: "Marta Castro" },
+];
+
+const SearchSelectWrapper = (args: any) => {
+  const [value, setValue] = useState(args.value || "");
+  const [touched, setTouched] = useState(false);
+
+  return (
+    <div className="w-[400px]">
+      <ITSearchSelect
+        {...args}
+        value={value}
+        onChange={(val) => setValue(val)}
+        onBlur={() => setTouched(true)}
+        touched={touched}
+      />
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: (args) => <SearchSelectWrapper {...args} />,
+  args: {
+    name: "search-select",
+    options: options,
+    placeholder: "Busca un usuario...",
+  },
+};
+
+export const WithLabel: Story = {
+  render: (args) => <SearchSelectWrapper {...args} />,
+  args: {
+    name: "search-select",
+    label: "Seleccionar Usuario",
+    options: options,
+    placeholder: "Busca un usuario...",
+    required: true,
+  },
+};
+
+export const RemoteAPI: Story = {
+  render: (args) => {
+    const [remoteOptions, setRemoteOptions] = useState<ITSearchSelectOption[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [val, setVal] = useState<string | number>("");
+
+    const handleSearch = (query: string) => {
+      setLoading(true);
+      // Simular llamada a API
+      setTimeout(() => {
+        const results = options.filter(o => 
+          o.label.toLowerCase().includes(query.toLowerCase())
+        );
+        setRemoteOptions(results);
+        setLoading(false);
+      }, 1000);
+    };
+
+    return (
+      <div className="w-[400px]">
+        <ITSearchSelect
+          {...args}
+          value={val}
+          options={remoteOptions}
+          isLoading={loading}
+          onSearch={handleSearch}
+          onChange={(v) => setVal(v)}
+        />
+      </div>
+    );
+  },
+  args: {
+    name: "remote-search",
+    label: "Búsqueda en API (Simulada)",
+    placeholder: "Escribe para buscar...",
+  },
+};
+
+export const WithError: Story = {
+  render: (args) => <SearchSelectWrapper {...args} />,
+  args: {
+    name: "search-select",
+    label: "Campo con Error",
+    options: options,
+    error: "Este campo es obligatorio",
+    touched: true,
+  },
+};
+
+export const Disabled: Story = {
+  render: (args) => <SearchSelectWrapper {...args} />,
+  args: {
+    name: "search-select",
+    label: "Campo Deshabilitado",
+    options: options,
+    disabled: true,
+  },
+};

package/src/components/search-select/search-select.tsx

@@ -0,0 +1,229 @@
+import React, { useState, useEffect, useRef, useMemo } from "react";
+import clsx from "clsx";
+import { FaAngleDown, FaSearch, FaTimes } from "react-icons/fa";
+import { ITSearchSelectProps, ITSearchSelectOption } from "./search-select.props";
+import { theme } from "@/theme/theme";
+import ITText from "@/components/text/text";
+
+/**
+ * ITSearchSelect - Un componente de selección con buscador integrado.
+ * Soporta filtrado local y búsqueda remota via API.
+ */
+export default function ITSearchSelect({
+  name,
+  options = [],
+  label,
+  placeholder = "Selecciona una opción",
+  valueField = "value",
+  labelField = "label",
+  value,
+  onChange,
+  onBlur,
+  disabled = false,
+  className,
+  touched,
+  required,
+  error,
+  readOnly = false,
+  onSearch,
+  isLoading = false,
+  noResultsMessage = "No se encontraron resultados",
+}: ITSearchSelectProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+  const [localTouched, setLocalTouched] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Encontrar la opción seleccionada inicialmente
+  const selectedOption = useMemo(() => {
+    return options.find((opt) => opt[valueField] === value);
+  }, [options, value, valueField]);
+
+  // Sincronizar el searchTerm con el label de la opción seleccionada si no se está editando
+  useEffect(() => {
+    if (!isFocused) {
+      setSearchTerm(selectedOption ? String(selectedOption[labelField]) : "");
+    }
+  }, [selectedOption, isFocused, labelField]);
+
+  // Cerrar el dropdown al hacer click afuera
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  // Filtrado local de opciones (Modo 1)
+  const filteredOptions = useMemo(() => {
+    if (onSearch) return options; // Modo API
+    if (!searchTerm || !isFocused) return options;
+    return options.filter((opt) =>
+      String(opt[labelField]).toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  }, [options, searchTerm, onSearch, labelField, isFocused]);
+
+  // Manejar cambio en el input
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const query = e.target.value;
+    setSearchTerm(query);
+    setIsOpen(true);
+
+    if (onSearch) {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        onSearch(query);
+      }, 500);
+    }
+  };
+
+  const handleSelect = (option: ITSearchSelectOption) => {
+    if (onChange) {
+      onChange(option[valueField], option);
+    }
+    setSearchTerm(String(option[labelField]));
+    setIsOpen(false);
+  };
+
+  const handleFocus = () => {
+    if (disabled || readOnly) return;
+    setIsFocused(true);
+    setIsOpen(true);
+    // Opcional: borrar el texto al entrar para facilitar la búsqueda
+    // setSearchTerm(""); 
+  };
+
+  const handleInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    // Retrasar el cierre para permitir el click en la opción
+    setTimeout(() => {
+      setIsFocused(false);
+      setLocalTouched(true);
+      onBlur?.(e);
+    }, 200);
+  };
+
+  // Theme logic
+  const inputTheme = (theme as any).input || {};
+
+  const isTouched = touched !== undefined ? touched : localTouched;
+  const isEmpty = value === undefined || value === null || String(value).trim() === "";
+
+  const effectiveError = error !== undefined && error !== false
+    ? (error === true ? "Este campo es requerido" : error)
+    : (required && isEmpty ? "Este campo es requerido" : undefined);
+
+  const hasError = isTouched && !!effectiveError;
+  const errorMessage = typeof effectiveError === "string" ? effectiveError : "Este campo es requerido";
+  
+  const getInputStyle = () => {
+    const style: React.CSSProperties = {
+      backgroundColor: inputTheme.backgroundColor || "#ffffff",
+      borderColor: inputTheme.borderColor || "#e2e8f0",
+      borderRadius: inputTheme.borderRadius || "0.5rem",
+      padding: inputTheme.padding || "0.5rem 0.75rem",
+      fontSize: inputTheme.fontSize || "0.875rem",
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      transition: 'all 0.2s',
+      color: 'var(--input-text-color, var(--color-secondary-900))',
+      width: '100%',
+    };
+
+    if (disabled) {
+      style.backgroundColor = inputTheme.disabled?.backgroundColor || "#f1f5f9";
+      style.borderColor = inputTheme.disabled?.borderColor || "#e2e8f0";
+      style.opacity = 0.7;
+      style.cursor = "not-allowed";
+    }
+
+    if (hasError) {
+      style.borderColor = inputTheme.error?.borderColor || 'red';
+      if (isFocused) {
+        style.boxShadow = inputTheme.error?.ring;
+      }
+    } else if (isFocused && !readOnly) {
+      style.boxShadow = inputTheme.focus?.ring;
+      style.borderColor = inputTheme.focus?.borderColor;
+    }
+
+    return style;
+  };
+
+  return (
+    <div className={clsx("w-full flex flex-col gap-1.5", className, isOpen && "relative z-30")} ref={containerRef}>
+      {label && (
+        <ITText
+          as="label"
+          className={clsx("text-sm font-medium text-gray-700 dark:text-slate-300", {
+            "text-red-500": hasError,
+          })}
+        >
+          <ITText as="span">{label}</ITText>
+          {required && <ITText as="span" className="text-red-500 ml-1">*</ITText>}
+        </ITText>
+      )}
+
+      <div className="relative">
+        <div className="relative flex items-center">
+          <input
+            type="text"
+            name={name}
+            value={searchTerm}
+            onChange={handleInputChange}
+            onFocus={handleFocus}
+            onBlur={handleInputBlur}
+            disabled={disabled}
+            readOnly={readOnly}
+            placeholder={placeholder}
+            className="outline-none pr-10"
+            style={getInputStyle()}
+            autoComplete="off"
+          />
+          <div className="absolute right-3 flex items-center gap-2 text-gray-400 pointer-events-none">
+             {isLoading && <div className="animate-spin h-4 w-4 border-2 border-primary-500 border-t-transparent rounded-full" />}
+             {!isLoading && <FaSearch size={14} className={clsx({ "text-primary-500": isFocused })} />}
+          </div>
+        </div>
+
+        {/* Dropdown Panel */}
+        {isOpen && (
+          <div className="absolute z-50 w-full mt-1 bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top">
+            <div className="max-h-60 overflow-y-auto">
+              {filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <ITText
+                    as="div"
+                    key={option[valueField]}
+                    onClick={() => handleSelect(option)}
+                    className={clsx(
+                      "px-4 py-2 text-sm cursor-pointer transition-colors",
+                      value === option[valueField]
+                        ? "bg-primary-50 dark:bg-primary-950/40 text-primary-700 dark:text-primary-300 font-medium"
+                        : "hover:bg-gray-50 dark:hover:bg-slate-800 text-gray-700 dark:text-slate-300"
+                    )}
+                  >
+                    <ITText as="span">{option[labelField]}</ITText>
+                  </ITText>
+                ))
+              ) : (
+                <ITText as="div" className="px-4 py-6 text-sm text-center text-gray-500 italic">
+                  {isLoading ? "Cargando..." : noResultsMessage}
+                </ITText>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Error Message */}
+      {hasError && (
+        <ITText as="p" className="text-red-500 text-xs mt-1">{errorMessage}</ITText>
+      )}
+    </div>
+  );
+}

package/src/components/searchTable/components/EditableCell.tsx

@@ -0,0 +1,149 @@
+import React from "react";
+import { SearchColumn } from "../searchTable.props";
+import ITInput from "@/components/input/input";
+import ITSelect from "@/components/select/select";
+import ITDatePicker from "@/components/date-picker/datePicker";
+import ITText from "@/components/text/text";
+
+interface EditableCellProps<T> {
+  column: SearchColumn<T>;
+  value: any;
+  onChange: (value: any, error?: string) => void;
+  error?: string;
+  row: T;
+}
+
+export default function EditableCell<T>({
+  column,
+  value,
+  onChange,
+  error,
+  row,
+}: EditableCellProps<T>) {
+  const validate = (val: any) => {
+    if (column.validation) return column.validation(val);
+    return undefined;
+  };
+
+  const normalizeAndNotify = (input: any) => {
+    let newValue = input;
+
+    if (input && typeof input === "object" && "target" in input) {
+      const t = input.target as HTMLInputElement;
+      if (column.inputType === "checkbox") newValue = t.checked;
+      else newValue = t.value;
+    }
+
+    if (column.inputType === "number") {
+      newValue = newValue === "" || newValue === null ? "" : Number(newValue);
+    }
+
+    const errorMsg = validate(newValue);
+    onChange(newValue, errorMsg);
+  };
+
+  const handleBlur = () => {
+    const errorMsg = validate(value);
+    onChange(value, errorMsg);
+  };
+
+  // Funciones de renderizado centralizadas
+  const renderITInput = (type: "text" | "number") => {
+    return (
+      <ITInput
+        type={type}
+        name={column.key}
+        value={type === "number" ? value ?? "" : value || ""}
+        onChange={normalizeAndNotify}
+        onBlur={handleBlur}
+        className="w-full"
+        error={error}
+      />
+    );
+  };
+
+  const renderITDatePicker = () => {
+    return (
+      <ITDatePicker
+        name={column.key}
+        value={value || null}
+        onChange={normalizeAndNotify}
+        onBlur={handleBlur}
+        className="w-full"
+        error={error}
+      />
+    );
+  };
+
+  const renderITSelect = (
+    options: { value: any; label: string | number }[]
+  ) => {
+    return (
+      <ITSelect
+        name={column.key}
+        options={options as any}
+        value={value}
+        onChange={normalizeAndNotify}
+        onBlur={handleBlur as any}
+        className="w-full"
+        error={error}
+      />
+    );
+  };
+
+  const renderBooleanInput = () => {
+    return (
+      <ITInput
+        type="checkbox"
+        name={column.key}
+        checked={!!value}
+        onChange={(e) => {
+          normalizeAndNotify(e.target.checked);
+        }}
+        onBlur={handleBlur}
+        className="w-full"
+        error={error}
+      />
+    );
+  };
+
+  // Función principal que decide qué componente renderizar
+  const renderInput = () => {
+    const inputType = column.inputType || column.type;
+
+    switch (inputType) {
+      case "number":
+        return renderITInput("number");
+
+      case "select":
+        return renderITSelect(column.options || []);
+
+      case "checkbox":
+      case "boolean":
+        return renderBooleanInput();
+
+      case "date":
+        return renderITDatePicker();
+
+      case "catalog":
+        if (column.catalogOptions) {
+          const options = column.catalogOptions.data.map((item) => ({
+            value: item[column.catalogOptions.key || "id"],
+            label: item[column.catalogOptions.label || "name"],
+          }));
+          return renderITSelect(options);
+        }
+        return renderITInput("text"); // fallback si no hay catalogOptions
+
+      default:
+        return renderITInput("text");
+    }
+  };
+
+  return (
+    <div className="w-full">
+      {renderInput()}
+      {error && <div className="text-red-500 text-xs mt-1"><ITText as="span">{error}</ITText></div>}
+    </div>
+  );
+}

package/src/components/searchTable/components/PaginationControls.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
+import PaginationInfo from "./PaginationInfo";
+import ITSelect from "@/components/select/select";
+import ITButton from "@/components/button/button";
+import ITText from "@/components/text/text";
+
+interface PaginationControlsProps {
+  pageIndex: number;
+  totalPages: number;
+  hasPreviousPage: boolean;
+  hasNextPage: boolean;
+  onPageChange: (page: number) => void;
+  itemsPerPage: number;
+  itemsPerPageOptions: number[];
+  onItemsPerPageChange: (value: number) => void;
+  currentCount: number;
+  totalCount: number;
+}
+
+export default function PaginationControls({
+  pageIndex,
+  totalPages,
+  hasPreviousPage,
+  hasNextPage,
+  onPageChange,
+  itemsPerPage,
+  itemsPerPageOptions,
+  onItemsPerPageChange,
+  currentCount,
+  totalCount,
+}: PaginationControlsProps) {
+  return (
+    <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
+      <div className="flex items-center space-x-4">
+        <PaginationInfo currentCount={currentCount} totalCount={totalCount} />
+
+        <div className="flex items-center space-x-2">
+          <ITText as="span" className="text-sm text-gray-700">Mostrar:</ITText>
+          <ITSelect
+            name="itemsPerPage"
+            options={itemsPerPageOptions.map((option) => ({
+              value: String(option),
+              label: String(option),
+            }))}
+            value={String(itemsPerPage)}
+            onChange={(e) => onItemsPerPageChange(Number(e.target.value))}
+            onBlur={() => {}}
+            size="small"
+            className="w-20"
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center space-x-2">
+        <ITButton
+          color="secondary"
+          size="small"
+          onClick={() => onPageChange(pageIndex - 1)}
+          disabled={!hasPreviousPage}
+          className="min-w-[32px]"
+          ariaLabel="Página anterior"
+          title="Ir a la página anterior"
+        >
+          <FaArrowLeft aria-hidden="true" />
+        </ITButton>
+
+        <ITText as="span" className="px-4 py-2 text-sm text-gray-700" aria-live="polite">
+          Página {pageIndex} de {totalPages}
+        </ITText>
+
+        <ITButton
+          size="small"
+          color="secondary"
+          onClick={() => onPageChange(pageIndex + 1)}
+          disabled={!hasNextPage}
+          className="min-w-[32px]"
+          ariaLabel="Página siguiente"
+          title="Ir a la página siguiente"
+        >
+          <FaArrowRight aria-hidden="true" />
+        </ITButton>
+      </div>
+    </div>
+  );
+}