@axzydev/axzy_ui_system 1.2.1 → 1.2.3

package/src/components/searchTable/components/PaginationInfo.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import ITText from "@/components/text/text";
+
+interface PaginationInfoProps {
+  currentCount: number;
+  totalCount: number;
+  className?: string;
+}
+
+export default function PaginationInfo({
+  currentCount,
+  totalCount,
+  className = "",
+}: PaginationInfoProps) {
+  return (
+    <ITText as="span" className={`text-sm text-gray-700 ${className}`}>
+      Mostrando {currentCount} de {totalCount} resultados
+    </ITText>
+  );
+}

package/src/components/searchTable/components/SearchAndSortBar.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import SearchInput from "./SearchInput";
+import SortButton from "./SortButton";
+import ITButton from "@/components/button/button";
+import ITText from "@/components/text/text";
+
+interface SearchAndSortBarProps {
+  searchTerm: string;
+  onSearchChange: (value: string) => void;
+  onClearSearch: () => void;
+  onGlobalSort: () => void;
+  sortConfig?: {
+    key: string;
+    direction: "asc" | "desc";
+  };
+  searchInputPlaceholder?: string;
+}
+
+export default function SearchAndSortBar({
+  searchTerm,
+  onSearchChange,
+  onClearSearch,
+  onGlobalSort,
+  sortConfig,
+  searchInputPlaceholder = "Buscar en todos los campos...",
+}: SearchAndSortBarProps) {
+  return (
+    <div className="bg-gray-50 px-6 py-4 border-b border-gray-200">
+      <div className="flex items-center gap-4">
+        <SearchInput
+          placeholder={searchInputPlaceholder}
+          value={searchTerm}
+          onChange={onSearchChange}
+        />
+
+        <SortButton sortConfig={sortConfig} onClick={onGlobalSort} />
+
+        {searchTerm && (
+          <ITButton
+            size="small"
+            variant="outlined"
+            color="danger"
+            onClick={onClearSearch}
+            ariaLabel="Limpiar búsqueda"
+            title="Limpiar búsqueda"
+          >
+            <ITText as="span">Limpiar</ITText>
+          </ITButton>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/searchTable/components/SearchInput.tsx

@@ -0,0 +1,33 @@
+import ITInput from "@/components/input/input";
+import React from "react";
+import { FaSearch } from "react-icons/fa";
+
+interface SearchInputProps {
+  placeholder?: string;
+  value: string;
+  onChange: (value: string) => void;
+  className?: string;
+}
+
+export default function SearchInput({
+  placeholder = "Buscar en todos los campos...",
+  value,
+  onChange,
+  className = "",
+}: SearchInputProps) {
+  return (
+    <div className={`relative flex-1 ${className}`}>
+      <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+        <FaSearch className="h-5 w-5 text-gray-400" />
+      </div>
+      <ITInput
+        name="global-search"
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onBlur={() => {}}
+        className="pl-10 w-full"
+      />
+    </div>
+  );
+}

package/src/components/searchTable/components/SortButton.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";
+import ITText from "@/components/text/text";
+
+interface SortButtonProps {
+  sortConfig?: {
+    key: string;
+    direction: "asc" | "desc";
+  };
+  onClick: () => void;
+  className?: string;
+}
+
+export default function SortButton({
+  sortConfig,
+  onClick,
+  className = "",
+}: SortButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={`p-3 rounded-lg bg-white border border-gray-300 hover:bg-gray-50 transition-colors duration-200 flex items-center gap-2 min-w-[120px] ${className}`}
+      aria-label={`Ordenar tabla ${
+        sortConfig
+          ? sortConfig.direction === "asc"
+            ? "descendente"
+            : "ascendente"
+          : "ascendente"
+      }`}
+      title="Ordenar tabla"
+    >
+      {sortConfig ? (
+        sortConfig.direction === "asc" ? (
+          <FaSortUp className="w-4 h-4 text-slate-500" />
+        ) : (
+          <FaSortDown className="w-4 h-4 text-slate-500" />
+        )
+      ) : (
+        <FaSort className="w-4 h-4 text-gray-500" />
+      )}
+      <ITText as="span" className="text-sm font-medium text-gray-700">
+        {sortConfig
+          ? sortConfig.direction === "asc"
+            ? "Asc ↑"
+            : "Desc ↓"
+          : "Ordenar"}
+      </ITText>
+    </button>
+  );
+}

package/src/components/searchTable/components/TableEmptyState.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import ITText from "@/components/text/text";
+
+interface TableEmptyStateProps {
+  colSpan: number;
+  searchTerm: string;
+}
+
+export default function TableEmptyState({
+  colSpan,
+  searchTerm,
+}: TableEmptyStateProps) {
+  return (
+    <tr>
+      <td colSpan={colSpan} className="px-6 py-4 text-center">
+        {searchTerm
+          ? <ITText as="span">No se encontraron resultados para tu búsqueda</ITText>
+          : <ITText as="span">No se encontraron resultados</ITText>}
+      </td>
+    </tr>
+  );
+}

package/src/components/searchTable/components/TableHeader.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import TableHeaderCell from "./TableHeaderCell";
+import { SearchColumn } from "../searchTable.props";
+
+interface TableHeaderProps<T> {
+  columns: SearchColumn<T>[];
+  onSort: (key: string) => void;
+  sortConfig?: {
+    key: string;
+    direction: "asc" | "desc";
+  };
+}
+
+export default function TableHeader<T>({
+  columns,
+  onSort,
+  sortConfig,
+}: TableHeaderProps<T>) {
+  return (
+    <thead>
+      <tr className="bg-white border-b border-gray-200">
+        {columns.map((col) => (
+          <TableHeaderCell
+            key={col.key}
+            label={col.label}
+            sortable={col.sortable && col.type !== "actions"}
+            onSort={() => onSort(col.key)}
+            sortConfig={sortConfig?.key === col.key ? sortConfig : undefined}
+            className="px-3 py-3 text-center align-middle"
+          />
+        ))}
+      </tr>
+    </thead>
+  );
+}

package/src/components/searchTable/components/TableHeaderCell.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import SortButton from "./SortButton";
+import ITText from "@/components/text/text";
+
+interface TableHeaderCellProps {
+  label: string;
+  sortable?: boolean;
+  onSort: () => void;
+  sortConfig?: {
+    key: string;
+    direction: "asc" | "desc";
+  };
+  className?: string;
+}
+
+export default function TableHeaderCell({
+  label,
+  sortable = false,
+  onSort,
+  sortConfig,
+  className = "",
+}: TableHeaderCellProps) {
+  return (
+    <th className={className}>
+      <div className="flex flex-col items-center gap-2 w-full">
+        <div className="flex items-center justify-center gap-2 w-full">
+     <ITText as="span"
+   className="inline-block w-[96%] text-sm font-medium text-white bg-slate-400 px-3 py-1.5 pb-2 rounded-lg text-center leading-tight"
+   style={{
+     display: "-webkit-box",
+     WebkitBoxOrient: "vertical",
+     WebkitLineClamp:4,
+     overflow: "hidden",
+   }}
+>
+   {label}
+</ITText>
+          {sortable && <SortButton sortConfig={sortConfig} onClick={onSort} />}
+        </div>
+      </div>
+    </th>
+  );
+}

package/src/components/searchTable/components/TableRow.tsx

@@ -0,0 +1,144 @@
+import { useEditableRow } from "@/hooks/useEditableRow";
+import { formatCurrencyMX } from "@/utils/table.utils";
+import clsx from "clsx";
+import React from "react";
+import { FaCheck, FaTimes } from "react-icons/fa";
+import { SearchColumn } from "../searchTable.props";
+import EditableCell from "./EditableCell";
+import * as yup from "yup";
+
+interface TableRowProps<T> {
+  row: T;
+  rowIndex: number;
+  columns: SearchColumn<T>[];
+  getNestedValue: (obj: unknown, path: string) => unknown;
+  onSave?: (row: T) => void;
+  onCancel?: () => void;
+  validationSchema?: yup.ObjectSchema<any>;
+  isEditing?: boolean;
+  onEdit?: (row: T) => void;
+  onDelete?: (row: T) => void;
+}
+
+export default function TableRow<T>({
+  row,
+  rowIndex,
+  columns,
+  getNestedValue,
+  onSave,
+  onCancel,
+  validationSchema,
+  isEditing = false,
+  onEdit,
+}: TableRowProps<T>) {
+  const {
+    editedRow,
+    errors,
+    isHovered,
+    setIsHovered,
+    hasErrors,
+    handleEdit,
+    handleSave,
+    handleCancel,
+    handleChange,
+  } = useEditableRow({ row, columns, getNestedValue, validationSchema });
+
+  const onEditAction = () => handleEdit(onEdit);
+  const onSaveAction = () => handleSave(onSave);
+  const onCancelAction = () => handleCancel(onCancel);
+
+  const renderCellContent = (col: SearchColumn<T>, rowData: T) => {
+    const value = getNestedValue(rowData, col.key);
+
+    if (col.render) return col.render(rowData);
+
+    switch (col.type) {
+      case "number":
+        return typeof value === "number" && col.currencyMX
+          ? formatCurrencyMX(value)
+          : (value as React.ReactNode);
+
+      case "boolean":
+        return value ? (
+          <FaCheck
+            className="text-green-500"
+            aria-label="Verdadero"
+            title="Verdadero"
+          />
+        ) : (
+          <FaTimes className="text-red-500" aria-label="Falso" title="Falso" />
+        );
+
+      case "actions":
+        if (isEditing && col.saveActions) {
+          return col.saveActions(rowData, {
+            onSave: onSaveAction,
+            onCancel: onCancelAction,
+            hasErrors,
+          });
+        } else if (col.actions) {
+          return col.actions(rowData, { onEdit: onEditAction });
+        }
+        return null;
+
+      case "catalog":
+        if (col.catalogOptions) {
+          const catalogItem = col.catalogOptions.data.find(
+            (item) => item.id === value
+          );
+          return catalogItem?.name || (value as React.ReactNode);
+        }
+        return value as React.ReactNode;
+
+      default:
+        return value as React.ReactNode;
+    }
+  };
+
+  return (
+    <tr
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      className={`border-b border-gray-200 transition-colors duration-150 ${
+        isEditing
+          ? "bg-slate-50"
+          : rowIndex % 2 === 0
+          ? "bg-white"
+          : "bg-gray-50"
+      } ${isHovered && !isEditing ? "bg-gray-100" : ""}`}
+    >
+      {columns.map((col) => (
+        <td
+          key={`${rowIndex}-${col.key}`}
+          className={clsx("pl-5 py-2", col.className, {
+            "text-center": col.type === "actions" || col.type === "boolean",
+          })}
+        >
+          {isEditing && col.editable ? (
+            <EditableCell
+              column={col}
+              value={getNestedValue(editedRow, col.key)}
+              onChange={(value) => handleChange(col.key, value)}
+              error={errors[col.key]}
+              row={editedRow}
+            />
+          ) : (
+            <div
+              className={clsx({
+                "flex flex-col items-center justify-center gap-1 ":
+                  col.type === "actions",
+              })}
+            >
+              {
+                renderCellContent(
+                  col,
+                  isEditing ? editedRow : row
+                ) as React.ReactNode
+              }
+            </div>
+          )}
+        </td>
+      ))}
+    </tr>
+  );
+}

package/src/components/searchTable/searchTable.props.ts

@@ -0,0 +1,56 @@
+import { TableSize, TableVariants } from "@/types/table.types";
+import * as yup from "yup";
+
+export type ColumnType = "string" | "date" | "number" | "boolean" | "actions" | "catalog";
+
+export interface CatalogOption {
+  id: string | number;
+  name: string;
+}
+
+export interface SearchColumn<T = any> {
+  key: string;
+  label: string;
+  type: "string" | "number" | "boolean" | "date" | "actions" | "catalog";
+  filter?: boolean | 'catalog'; 
+  sortable?: boolean;
+  editable?: boolean;
+  inputType?: "text" | "number" | "select" | "checkbox" | "date";
+  // OK: text number
+  // PENDING: select checkbox date
+  options?: { value: string | number; label: string }[];
+  validation?: (value: any, row?:any) => string | undefined;
+  className?: string;
+  currencyMX?: boolean; 
+  catalogOptions?: {
+    data: Array<{ id: string | number; name: string }> | any[];
+    key?: string;
+    label?: string;
+  };
+  render?: (row: T) => React.ReactNode;
+  actions?: (row: T, helpers: { onEdit: (row: T) => void }) => React.ReactNode;
+  saveActions?: (row: T, helpers: { onSave: (row: T) => void, onCancel: () => void, hasErrors: any}) => React.ReactNode;
+}
+
+export interface ITSearchTableProps<T> {
+  columns: SearchColumn<T>[];
+  containerClassName?: string;
+  searchInputPlaceholder?: string;
+  data: T[];
+  variant?: TableVariants;
+  className?: string;
+  size?: TableSize;
+  itemsPerPageOptions?: Array<number>;
+  defaultItemsPerPage?: number;
+  validationSchema?:  yup.ObjectSchema<any>
+  title?: string;
+  pageIndex: number;
+  totalCount: number;
+  totalPages: number;
+  hasPreviousPage: boolean;
+  hasNextPage: boolean;
+  onPageChange?: (page: number) => void;
+  onItemsPerPageChange?: (itemsPerPage: number) => void;
+  onSortChange?: (sortConfig: { key: string, direction: "asc" | "desc" }) => void; // Se actualizó para incluir `key`
+  onFilterChange?: (filters: Record<string, string | boolean | number>) => void;
+}

package/src/components/searchTable/searchTable.tsx

@@ -0,0 +1,187 @@
+import { useDebouncedSearch } from "@/hooks/useDebouncedSearch";
+import clsx from "clsx";
+import React, { useState } from "react";
+
+import { sizeStyles, variantStyles } from "@/types/table.types";
+import { ITSearchTableProps } from "./searchTable.props";
+import SearchAndSortBar from "./components/SearchAndSortBar";
+import TableHeader from "./components/TableHeader";
+import TableRow from "./components/TableRow";
+import { getNestedValue } from "@/utils/table.utils";
+import TableEmptyState from "./components/TableEmptyState";
+import PaginationControls from "./components/PaginationControls";
+import ITText from "@/components/text/text";
+
+interface CustomITSearchTableProps<T> extends ITSearchTableProps<T> {
+  editingRow?: number | null;
+  searchTermInitial?: string;
+  onClearSearch?: () => void;
+  onEdit?: (row: T, index: number) => void;
+  onSave?: (row: T, index: number) => void;
+  onCancel?: () => void;
+  sortConfig?: {
+    key: string;
+    direction: "asc" | "desc";
+  };
+}
+
+export default function ITSearchTable<T extends Record<string, unknown>>({
+  columns,
+  data,
+  containerClassName,
+  searchTermInitial = "",
+  searchInputPlaceholder = "Buscar en todos los campos...",
+  className,
+  variant = "default",
+  size = "md",
+  itemsPerPageOptions = [10, 20, 50, 100],
+  defaultItemsPerPage = 10,
+  title,
+  pageIndex,
+  totalCount,
+  totalPages,
+  hasPreviousPage,
+  hasNextPage,
+  onPageChange,
+  onItemsPerPageChange,
+  onSortChange,
+  onFilterChange,
+  sortConfig,
+  editingRow = null,
+  validationSchema,
+  onClearSearch,
+  onEdit,
+  onSave,
+  onCancel,
+}: CustomITSearchTableProps<T>) {
+  const [itemsPerPage, setItemsPerPage] = useState(defaultItemsPerPage);
+
+  const { searchTerm, handleSearchChange, handleClearSearch } = useDebouncedSearch({
+    initialValue: searchTermInitial,
+    onSearch: (value) => {
+      if (onFilterChange) {
+        onFilterChange(value ? { query: value } : {});
+      }
+    },
+  });
+
+  const handleItemsPerPageChange = (value: number) => {
+    setItemsPerPage(value);
+    onItemsPerPageChange?.(value);
+  };
+
+  const goToPage = (page: number) => {
+    onPageChange?.(page);
+  };
+
+  const handleGlobalSort = () => {
+    const newDirection = sortConfig?.direction === "asc" ? "desc" : "asc";
+    onSortChange?.({ key: "id", direction: newDirection });
+  };
+
+  const handleSort = (key: string) => {
+    const column = columns.find((col) => col.key === key);
+    if (!column || !column.sortable) return;
+
+    let newDirection: "asc" | "desc" = "asc";
+    if (sortConfig && sortConfig.key === key) {
+      newDirection = sortConfig.direction === "asc" ? "desc" : "asc";
+    }
+
+    onSortChange?.({ key, direction: newDirection });
+  };
+
+  const handleEdit = (row: T, index: number) => onEdit?.(row, index);
+  const handleSave = (updatedRow: T, index: number) => onSave?.(updatedRow, index);
+  const handleCancelEdit = () => onCancel?.();
+
+  const handleClearSearchWithClear = () => {
+    handleClearSearch();
+    onClearSearch?.();
+  };
+
+return (
+  <div className={clsx("space-y-4 w-full", containerClassName)}>
+    {/* Card principal con sombra */}
+    <div className="shadow-md sm:rounded-lg overflow-hidden">
+      {/* Header fijo */}
+      {title && (
+        <div className="bg-teal-500 text-white px-6 py-4">
+          <ITText as="h2" className="text-xl font-bold text-center whitespace-nowrap">
+            {title}
+          </ITText>
+        </div>
+      )}
+
+      {/* Contenido con scroll */}
+      <div className="bg-white">
+        {/* Barra de búsqueda y ordenamiento */}
+        <div className="p-4 border-b border-gray-200">
+          <SearchAndSortBar
+            searchTerm={searchTerm}
+            onSearchChange={handleSearchChange}
+             onClearSearch={handleClearSearchWithClear}
+            onGlobalSort={handleGlobalSort}
+            sortConfig={sortConfig}
+            searchInputPlaceholder={searchInputPlaceholder}
+          />
+        </div>
+
+        {/* Tabla con scroll horizontal */}
+        <div className="overflow-x-auto">
+          <table
+            className={clsx(
+              "min-w-full text-sm text-left bg-white text-gray-900 table-auto",
+              variantStyles[variant],
+              sizeStyles[size]
+            )}
+          >
+            <TableHeader
+              columns={columns}
+              onSort={handleSort}
+              sortConfig={sortConfig}
+            />
+            <tbody>
+              {data.length > 0 ? (
+                data.map((row, rowIndex) => (
+                  <TableRow
+                    key={rowIndex}
+                    row={row}
+                    rowIndex={rowIndex}
+                    columns={columns}
+                    validationSchema={validationSchema}
+                    getNestedValue={getNestedValue}
+                    isEditing={editingRow === rowIndex}
+                    onEdit={() => handleEdit(row, rowIndex)}
+                    onSave={(updatedRow) => handleSave(updatedRow, rowIndex)}
+                    onCancel={handleCancelEdit}
+                  />
+                ))
+              ) : (
+                <TableEmptyState
+                  colSpan={columns.length + 1}
+                  searchTerm={searchTerm}
+                />
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    {/* Paginación */}
+    <PaginationControls
+      pageIndex={pageIndex}
+      totalPages={totalPages}
+      hasPreviousPage={hasPreviousPage}
+      hasNextPage={hasNextPage}
+      onPageChange={goToPage}
+      itemsPerPage={itemsPerPage}
+      itemsPerPageOptions={itemsPerPageOptions}
+      onItemsPerPageChange={handleItemsPerPageChange}
+      currentCount={data.length}
+      totalCount={totalCount}
+    />
+  </div>
+);
+}

package/src/components/segmented-control/segmented-control.props.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+
+export type SegmentedControlSize = "sm" | "md";
+
+export interface ISegmentedOption {
+  value: string;
+  label: string;
+  icon?: ReactNode;
+}
+
+export interface ITSegmentedControlProps {
+  options: ISegmentedOption[];
+  value: string;
+  onChange: (value: string) => void;
+  size?: SegmentedControlSize;
+  className?: string;
+  disabled?: boolean;
+}