@axzydev/axzy_ui_system 1.2.1 → 1.2.2

package/src/components/table/table.tsx

@@ -0,0 +1,376 @@
+import { useTableState } from "@/hooks/useTableState";
+import { sizeStyles, variantStyles } from "@/types/table.types";
+import clsx from "clsx";
+import React from "react";
+import {
+  FaCheck,
+  FaSpinner,
+  FaTimes
+} from "react-icons/fa";
+import { MdOutlineSwapVert } from "react-icons/md";
+import ITInput from "../input/input";
+import ITPagination from "../pagination/pagination";
+import ITSelect from "../select/select";
+import { Column, ITTableProps } from "./table.props";
+import ITText from "@/components/text/text";
+
+const getNestedValue = (obj: unknown, path: string) => {
+  return path.split(".").reduce((acc, part) => acc && acc[part], obj);
+};
+export const formatCurrencyMX = (value: number) => {
+  return value.toLocaleString("es-MX", {
+    style: "currency",
+    currency: "MXN",
+  });
+};
+export default function ITTable<T extends Record<string, unknown>>({
+  columns,
+  data = [],
+  containerClassName,
+  className,
+  variant = "default",
+  size = "md",
+  itemsPerPageOptions = [5, 10, 20],
+  defaultItemsPerPage = 10,
+  title,
+}: ITTableProps<T>) {
+  const {
+    currentPage,
+    itemsPerPage,
+    filters,
+    sortConfig,
+    goToPage,
+    handleFilterChange,
+    handleSort,
+    handleItemsPerPageChange,
+  } = useTableState({ defaultItemsPerPage });
+
+  const sortedData = React.useMemo(() => {
+    const safeData = Array.isArray(data) ? data : [];
+    if (!sortConfig) return safeData;
+
+    return [...safeData].sort((a, b) => {
+      const aValue = getNestedValue(a, sortConfig.key);
+      const bValue = getNestedValue(b, sortConfig.key);
+
+      if (aValue == null || bValue == null) return 0;
+
+      let comparison = 0;
+
+      const column = columns.find((col) => col.key === sortConfig.key);
+      if (!column || !column.sortable) return 0;
+
+      switch (column.type) {
+        case "number":
+          comparison = (aValue as number) - (bValue as number);
+          break;
+        case "date":
+          comparison =
+            new Date(aValue as string).getTime() -
+            new Date(bValue as string).getTime();
+          break; 
+        case "boolean":
+          comparison = aValue === bValue ? 0 : aValue ? 1 : -1;
+          break;
+        case "catalog": {
+          const catalogItemA = column.catalogOptions?.data.find(
+            (item) => item.id === aValue
+          );
+          const catalogItemB = column.catalogOptions?.data.find(
+            (item) => item.id === bValue
+          );
+          comparison = String(catalogItemA?.name || aValue).localeCompare(
+            String(catalogItemB?.name || bValue)
+          );
+          break;
+        }
+        case "string":
+        default:
+          comparison = (aValue as string).localeCompare(bValue as string);
+          break;
+      }
+
+      return sortConfig.direction === "asc" ? comparison : -comparison;
+    });
+  }, [data, sortConfig, columns]);
+
+  const filteredData = sortedData.filter((row) =>
+    columns.every((col) => {
+      if (
+        !col.filter ||
+        filters[col.key] === undefined ||
+        filters[col.key] === ""
+      )
+        return true;
+
+      const value = getNestedValue(row, col.key);
+      const filterValue = String(filters[col.key]).toLowerCase();
+
+      switch (col.type) {
+        case "number":
+          return String(value).includes(filterValue);
+        case "boolean":
+          return value === filters[col.key];
+        case "catalog": {
+          if (!col.catalogOptions) return true;
+          const catalogItem = col.catalogOptions.data.find(
+            (item) =>
+              String(item.id).toLowerCase().includes(filterValue) ||
+              item.name.toLowerCase().includes(filterValue)
+          );
+          return catalogItem ? value === catalogItem.id : false;
+        }
+        case "string":
+        default:
+          return String(value).toLowerCase().includes(filterValue);
+      }
+    })
+  );
+
+  const computedTotalPages = Math.ceil(filteredData.length / itemsPerPage) || 1;
+  const currentData = filteredData.slice(
+    (currentPage - 1) * itemsPerPage,
+    currentPage * itemsPerPage
+  );
+
+  const renderFilterInput = (col: Column<T>) => {
+    if (!col.filter) return null;
+
+    if (col.type === "boolean") {
+      const currentValue = filters[col.key];
+      const nextValue =
+        currentValue === undefined
+          ? true
+          : currentValue === true
+          ? false
+          : undefined;
+
+             const getToggleLabel = () => {
+         if (currentValue === undefined) return "Mostrar todos";
+         if (currentValue === true) return "Filtrar solo verdaderos";
+         return "Filtrar solo falsos";
+       };
+
+       return (
+         <button
+           className="flex items-center justify-center cursor-pointer focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 rounded-full p-1 transition-all duration-200"
+           onClick={() => handleFilterChange(col.key, nextValue)}
+           aria-label={`${getToggleLabel()} para ${col.label}`}
+           title={`${getToggleLabel()} para ${col.label}`}
+         >
+           <div className="relative w-10 h-5 bg-gray-300 rounded-full">
+             <div
+               className={clsx(
+                 "absolute top-0.5 w-4 h-4 rounded-full transition-all duration-300 shadow-sm",
+                 {
+                   "left-0.5 bg-gray-400": currentValue === undefined,
+                   "left-5 bg-slate-500": currentValue === true,
+                   "left-0.5 bg-gray-500": currentValue === false,
+                 }
+               )}
+             />
+           </div>
+         </button>
+       );
+    }
+
+         if (col.filter === "catalog" && col.catalogOptions) {
+       if (col.catalogOptions.loading) {
+         return (
+           <FaSpinner 
+             className="animate-spin" 
+             aria-label="Cargando opciones"
+             title="Cargando opciones"
+           />
+         );
+       }
+
+      if (col.catalogOptions.error) {
+        return <ITText as="span" className="text-red-500 text-xs">Error cargando</ITText>;
+      }
+
+      return (
+        <ITSelect
+          name={`filter-${col.key}`}
+          options={[
+            { value: "", label: "Todos" },
+            ...col.catalogOptions.data.map((item) => ({
+              value: String(item.id),
+              label: item.name,
+            })),
+          ]}
+          value={String(filters[col.key] || "")}
+          onChange={(e) => {
+            const value = e.target.value === "" ? undefined : e.target.value;
+            handleFilterChange(col.key, value);
+          }}
+          onBlur={() => {}}
+          className="w-full text-xs"
+        />
+      );
+    }
+
+    return (
+      <ITInput
+        name={`filter-${col.key}`}
+        className="w-full text-xs"
+        placeholder="Buscar..."
+        value={String(filters[col.key] || "")}
+        onChange={(e) => handleFilterChange(col.key, e.target.value)}
+        onBlur={() => {}}
+      />
+    );
+  };
+
+  const renderCellContent = (col: Column<T>, row: T) => {
+    const value = getNestedValue(row, col.key);
+
+    if (col.render) {
+      return col.render(row);
+    }
+
+    switch (col.type) {
+      case "number": 
+        return (typeof value === "number") && col.currencyMX ?formatCurrencyMX(value)  : value;
+             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":
+        return col.actions ? col.actions(row) : null;
+      case "catalog":
+        if (col.catalogOptions) {
+          const catalogItem = col.catalogOptions.data.find(
+            (item) => item.id === value
+          );
+          return catalogItem?.name || value;
+        }
+        return value as React.ReactNode;
+      default:
+        return value as React.ReactNode;
+    }
+  };
+
+     return (
+<div className={clsx("space-y-4 w-full", containerClassName)}>
+  <div className="rounded-xl shadow-sm border border-secondary-200 overflow-hidden" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
+    {/* Header outside overflow */}
+    {title && (
+      <div className="px-6 py-5 border-b border-secondary-100" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
+        <ITText as="h2" className="text-xl font-bold text-secondary-900 leading-tight">{title}</ITText>
+      </div>
+    )}
+
+    {/* Scrollable Table */}
+    <div className="overflow-x-auto">
+      <table
+        className={clsx(
+          "min-w-max w-full text-sm text-left text-secondary-600",
+          variantStyles[variant],
+          sizeStyles[size]
+        )}
+      >
+
+           <thead>
+             <tr className="bg-secondary-50 border-b border-secondary-200 text-xs uppercase tracking-wider font-semibold text-secondary-500">
+               {columns.map((col) => (
+                 <th
+                   key={col.key}
+                   scope="col"
+                   className={clsx("px-4 py-4 align-top", col.className)}
+                 >
+                   <div className="flex flex-col gap-3 min-w-[150px]">
+                     {/* Column header */}
+                     <div className="flex items-center justify-between gap-2">
+                        <ITText as="span" className="text-secondary-700 font-bold">{col.label}</ITText>
+                       {col.sortable && col.type !== "actions" && (
+                         <button
+                           onClick={() => handleSort(col.key)}
+                           className={`p-1 rounded-md transition-colors ${
+                             sortConfig?.key === col.key
+                               ? "bg-secondary-200 text-secondary-900" 
+                               : "hover:bg-secondary-200 text-secondary-400 hover:text-secondary-700"
+                           }`}
+                           title={`Ordenar por ${col.label}`}
+                         >
+                           <MdOutlineSwapVert className="w-4 h-4" aria-hidden="true" />
+                         </button>
+                       )}
+                     </div>
+                     
+                     {/* Filter section */}
+                     <div className="w-full">
+                       {col.filter ? renderFilterInput(col) : null}
+                     </div>
+                   </div>
+                 </th>
+               ))}
+             </tr>
+           </thead>
+          <tbody className="divide-y divide-secondary-100">
+            {currentData.length > 0 ? (
+                             currentData.map((row, rowIndex) => (
+                 <tr
+                   key={rowIndex}
+                   className="hover:bg-secondary-50/50 transition-colors duration-150 group"
+                 >
+                                     {columns.map((col) => (
+                     <td
+                       key={`${rowIndex}-${col.key}`}
+                       className={clsx("px-4 py-3 align-middle", col.className)}
+                     >
+                       {col.type === "actions" ? (
+                         <div className="flex items-center justify-center gap-2">
+                           {renderCellContent(col, row) as React.ReactNode}
+                         </div>
+                       ) : (
+                         <div className="text-secondary-700 font-medium">
+                            {renderCellContent(col, row) as React.ReactNode}
+                         </div>
+                       )}
+                     </td>
+                   ))}
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={columns.length} className="px-6 py-12 text-center">
+                  <div className="flex flex-col items-center justify-center text-secondary-400">
+                    <ITText as="span" className="text-lg">No se encontraron resultados</ITText>
+                    <ITText as="span" className="text-sm mt-1">Intenta ajustar los filtros</ITText>
+                  </div>
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+
+      {/* Pagination */}
+      <div className="rounded-b-xl border-t border-secondary-200 px-6 py-4" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
+        <ITPagination
+          currentPage={currentPage}
+          totalPages={computedTotalPages}
+          onPageChange={goToPage}
+          color="primary"
+          itemsPerPageOptions={itemsPerPageOptions}
+          itemsPerPage={itemsPerPage}
+          onItemsPerPageChange={handleItemsPerPageChange}
+          totalItems={filteredData.length}
+        />
+      </div>
+    </div>
+</div>
+  );
+}

package/src/components/tabs/tabs.props.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+
+export interface ITTabItem {
+  id: string;
+  label: string;
+  content: ReactNode;
+  icon?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface ITTabsProps {
+  items: ITTabItem[];
+  defaultActiveId?: string;
+  onChange?: (id: string) => void;
+  variant?: 'line' | 'pill';
+  className?: string;
+  containerClassName?: string;
+}

package/src/components/tabs/tabs.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ITTabs from './tabs';
+
+const meta: Meta<typeof ITTabs> = {
+  title: 'Components/ITTabs',
+  component: ITTabs,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITTabs>;
+
+export const Line: Story = {
+  args: {
+    variant: 'line',
+    items: [
+      { id: '1', label: 'Tab 1', content: <div className="p-4">Content 1</div> },
+      { id: '2', label: 'Tab 2', content: <div className="p-4">Content 2</div> },
+      { id: '3', label: 'Disabled', content: <div>X</div>, disabled: true },
+    ],
+  },
+};
+
+export const Pill: Story = {
+  args: {
+    variant: 'pill',
+    items: [
+      { id: '1', label: 'Overview', content: <div className="p-4">Dashboard Overview</div> },
+      { id: '2', label: 'Settings', content: <div className="p-4">Account Settings</div> },
+    ],
+  },
+};

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { ITTabsProps } from './tabs.props';
+import { clsx } from 'clsx';
+import ITText from "@/components/text/text";
+
+const ITTabs: React.FC<ITTabsProps> = ({
+  items,
+  defaultActiveId,
+  onChange,
+  variant = 'line',
+  className = '',
+  containerClassName = ''
+}) => {
+  const [activeId, setActiveId] = useState(defaultActiveId || items[0]?.id);
+
+  const handleTabClick = (id: string, disabled?: boolean) => {
+    if (disabled) return;
+    setActiveId(id);
+    if (onChange) onChange(id);
+  };
+
+  const activeContent = items.find(item => item.id === activeId)?.content;
+
+  return (
+    <div className={clsx("w-full", containerClassName)}>
+      {/* HEADER */}
+      <div className={clsx(
+        "flex border-gray-200 mb-4",
+        variant === 'line' ? "border-b" : "gap-2 p-1 bg-gray-100 rounded-lg w-fit",
+        className
+      )}>
+        {items.map((item) => {
+          const isActive = item.id === activeId;
+          
+          return (
+            <button
+              key={item.id}
+              onClick={() => handleTabClick(item.id, item.disabled)}
+              disabled={item.disabled}
+              className={clsx(
+                "flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all duration-200 outline-none",
+                // LINE VARIANT
+                variant === 'line' && [
+                  "border-b-2 -mb-[2px]",
+                  isActive 
+                    ? "border-primary-500 text-primary-600" 
+                    : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
+                ],
+                // PILL VARIANT
+                variant === 'pill' && [
+                  "rounded-md",
+                  isActive 
+                    ? "bg-white text-primary-600 shadow-sm" 
+                    : "text-gray-500 hover:text-gray-700",
+                ],
+                item.disabled && "opacity-50 cursor-not-allowed"
+              )}
+            >
+              {item.icon && <span className="w-4 h-4">{item.icon}</span>}
+              <ITText as="span">{item.label}</ITText>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* CONTENT */}
+      <div className="tab-content animate-fadeIn">
+        {activeContent}
+      </div>
+    </div>
+  );
+};
+
+export default ITTabs;

package/src/components/text/text.props.ts

@@ -0,0 +1,9 @@
+import { ReactNode, ElementType, HTMLAttributes } from "react";
+
+export interface ITTextProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  className?: string;
+  as?: ElementType;
+  muted?: boolean;
+  htmlFor?: string;
+}

package/src/components/text/text.tsx

@@ -0,0 +1,20 @@
+import { ITTextProps } from "./text.props";
+
+export default function ITText({
+  children,
+  as: Tag = "p",
+  className = "",
+  muted = false,
+  style,
+  ...rest
+}: ITTextProps & { style?: React.CSSProperties }) {
+  return (
+    <Tag
+      className={className}
+      style={muted ? { color: "var(--color-text-muted)", ...style } : { color: "var(--color-text-default)", ...style }}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+}

package/src/components/textarea/textarea.props.ts

@@ -0,0 +1,15 @@
+import { InputHTMLAttributes } from "react";
+
+export interface ITTextareaProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  label?: string;
+  placeholder?: string;
+  rows?: number;
+  disabled?: boolean;
+  error?: string;
+  className?: string;
+  name?: string;
+  maxLength?: number;
+  resize?: "none" | "vertical" | "horizontal" | "both";
+}

package/src/components/textarea/textarea.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import ITTextarea from "./textarea";
+
+const meta: Meta<typeof ITTextarea> = {
+  title: "Components/Inputs/ITTextarea",
+  component: ITTextarea,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITTextarea>;
+
+export const Default: Story = {
+  render: () => {
+    const [val, setVal] = useState("");
+    return <ITTextarea value={val} onChange={setVal} label="Descripción" placeholder="Escribe aquí..." />;
+  },
+};
+
+export const WithError: Story = {
+  args: { label: "Comentarios", value: "Mal", error: "Debe tener al menos 10 caracteres" },
+};
+
+export const Disabled: Story = {
+  args: { label: "Bloqueado", value: "No editable", disabled: true },
+};

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,55 @@
+import clsx from "clsx";
+import { ITTextareaProps } from "./textarea.props";
+import { inputLabel, inputError } from "@/utils/styles";
+import ITText from "@/components/text/text";
+
+const resizeMap = {
+  none: "resize-none",
+  vertical: "resize-y",
+  horizontal: "resize-x",
+  both: "resize",
+};
+
+export default function ITTextarea({
+  value,
+  onChange,
+  label,
+  placeholder,
+  rows = 4,
+  disabled = false,
+  error,
+  className,
+  name,
+  maxLength,
+  resize = "vertical",
+}: ITTextareaProps) {
+  return (
+    <div className={clsx("flex flex-col gap-1.5", className)}>
+      {label && (
+        <ITText as="label" className={inputLabel(!!error)} htmlFor={name}>
+          {label}
+        </ITText>
+      )}
+      <textarea
+        id={name}
+        name={name}
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
+        placeholder={placeholder}
+        rows={rows}
+        disabled={disabled}
+        maxLength={maxLength}
+        className={clsx(
+          "w-full border border-solid transition-all duration-200 rounded-lg px-3 py-2 text-sm outline-none",
+          "focus:ring-2",
+          resizeMap[resize],
+          error
+            ? "border-red-500 ring-red-100 focus:border-red-500 focus:ring-red-100"
+            : "border-gray-300 focus:border-primary-500 focus:ring-primary-100",
+          disabled && "opacity-50 cursor-not-allowed bg-gray-100 dark:bg-slate-800"
+        )}
+      />
+      {error && <ITText as="span" className={inputError}>{error}</ITText>}
+    </div>
+  );
+}

package/src/components/theme-provider/themeProvider.props.ts

@@ -0,0 +1,28 @@
+export interface ITThemePalette {
+  primary: string;
+  secondary: string;
+  ternary: string;
+  danger: string;
+  success: string;
+  info: string;
+  alert: string;
+  warning: string;
+  layout: {
+    sidebarBg: string;
+    sidebarText: string;
+    navbarBg: string;
+    navbarText: string;
+  };
+  table: {
+    headerBg: string;
+    headerText: string;
+    rowBg: string;
+    rowText: string;
+  };
+}
+
+export interface ITThemeProviderProps {
+  theme?: Partial<ITThemePalette>;
+  children: React.ReactNode;
+  showFab?: boolean;
+}