@axzydev/axzy_ui_system 1.2.0 → 1.2.2

package/src/components/card/card.tsx

@@ -0,0 +1,79 @@
+import clsx from "clsx";
+import { ITCardProps } from "./card.props";
+import { useState } from "react";
+import ITText from "@/components/text/text";
+
+export default function ITCard({
+  title,
+  image,
+  alt = "Card Image",
+  children,
+  actions,
+  className,
+  imageClassName,
+  titleClassName,
+  contentClassName,
+  actionClassName,
+  onClick,
+}: ITCardProps) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const containerStyle: React.CSSProperties = {
+    backgroundColor: "var(--card-bg, #ffffff)",
+    borderColor: "var(--card-border, #e2e8f0)",
+    borderWidth: "1px",
+    borderRadius: "var(--card-radius, 0.75rem)",
+    boxShadow: onClick
+      ? isHovered
+        ? "0 8px 25px -5px rgba(0, 0, 0, 0.1)"
+        : "0 1px 3px 0 rgba(0, 0, 0, 0.05)"
+      : "none",
+    transition: onClick ? "all 0.2s ease-in-out" : "none",
+    cursor: onClick ? "pointer" : "default",
+  };
+
+  const bodyStyle: React.CSSProperties = {
+    padding: "1.25rem",
+  };
+
+  return (
+    <div
+      onClick={onClick}
+      onMouseEnter={() => onClick && setIsHovered(true)}
+      onMouseLeave={() => onClick && setIsHovered(false)}
+      className={clsx("overflow-hidden flex flex-col", className)}
+      style={containerStyle}
+    >
+      {image && (
+        <img
+          src={image}
+          alt={alt}
+          className={clsx("w-full h-48 object-cover", imageClassName)}
+        />
+      )}
+
+      <div className={clsx(contentClassName)} style={bodyStyle}>
+        {title && (
+          <ITText
+            as="h3"
+            className={clsx("text-xl font-semibold mb-2", titleClassName)}
+          >
+            {title}
+          </ITText>
+        )}
+        <ITText as="div" className="text-gray-600">{children}</ITText>
+      </div>
+      {actions && (
+        <div
+          className={clsx(
+            "p-4 border-t border-gray-100 mt-auto",
+            actionClassName,
+          )}
+        >
+          {actions}
+        </div>
+      )}
+    </div>
+  );
+}
+

package/src/components/checkbox/checkbox.props.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+export interface ITCheckboxProps {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  label?: ReactNode;
+  disabled?: boolean;
+  indeterminate?: boolean;
+  className?: string;
+  name?: string;
+}

package/src/components/checkbox/checkbox.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import ITCheckbox from "./checkbox";
+import ITStack from "../stack/stack";
+
+const meta: Meta<typeof ITCheckbox> = {
+  title: "Components/Inputs/ITCheckbox",
+  component: ITCheckbox,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITCheckbox>;
+
+export const Default: Story = {
+  render: () => {
+    const [val, setVal] = useState(false);
+    return <ITCheckbox checked={val} onChange={setVal} label="Acepto términos" />;
+  },
+};
+
+export const Indeterminate: Story = {
+  args: { indeterminate: true, label: "Selección parcial" },
+};
+
+export const Disabled: Story = {
+  args: { checked: true, disabled: true, label: "Opción bloqueada" },
+};
+
+export const Group: Story = {
+  render: () => {
+    const [vals, setVals] = useState<Record<string, boolean>>({ a: true, b: false, c: false });
+    const all = Object.values(vals).every(Boolean);
+    const some = Object.values(vals).some(Boolean) && !all;
+    return (
+      <ITStack spacing={2}>
+        <ITCheckbox
+          checked={all}
+          indeterminate={some}
+          onChange={(v) => setVals({ a: v, b: v, c: v })}
+          label="Seleccionar todo"
+        />
+        {Object.entries(vals).map(([k, v]) => (
+          <ITCheckbox
+            key={k}
+            checked={v}
+            onChange={(val) => setVals(p => ({ ...p, [k]: val }))}
+            label={`Opción ${k.toUpperCase()}`}
+          />
+        ))}
+      </ITStack>
+    );
+  },
+};

package/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,52 @@
+import clsx from "clsx";
+import { ITCheckboxProps } from "./checkbox.props";
+import ITText from "@/components/text/text";
+
+export default function ITCheckbox({
+  checked = false,
+  onChange,
+  label,
+  disabled = false,
+  indeterminate = false,
+  className,
+  name,
+}: ITCheckboxProps) {
+  return (
+    <label
+      className={clsx(
+        "inline-flex items-center gap-2 cursor-pointer select-none",
+        disabled && "opacity-50 cursor-not-allowed",
+        className
+      )}
+    >
+      <input
+        type="checkbox"
+        name={name}
+        checked={checked}
+        onChange={(e) => onChange?.(e.target.checked)}
+        disabled={disabled}
+        ref={(el) => { if (el) el.indeterminate = indeterminate; }}
+        className="peer sr-only"
+      />
+      <div
+        className={clsx(
+          "w-4 h-4 rounded border-2 flex items-center justify-center transition-all",
+          checked
+            ? "bg-primary-500 border-primary-500"
+            : "border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800",
+          !disabled && "peer-focus:ring-2 peer-focus:ring-primary-200",
+        )}
+      >
+        {checked && (
+          <svg className="w-2.5 h-2.5 text-white" viewBox="0 0 12 12" fill="none">
+            <path d="M2 6L5 9L10 3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        )}
+        {indeterminate && !checked && (
+          <div className="w-2 h-0.5 bg-slate-500 rounded" />
+        )}
+      </div>
+      {label && <ITText as="span" className="text-sm text-slate-700 dark:text-slate-300">{label}</ITText>}
+    </label>
+  );
+}

package/src/components/confirm-dialog/confirm-dialog.props.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import { ColorsTypes } from "@/types/colors.types";
+
+export interface ITConfirmDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title?: string;
+  message?: ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  variant?: ColorsTypes;
+  loading?: boolean;
+}

package/src/components/confirm-dialog/confirm-dialog.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import ITConfirmDialog from "./confirm-dialog";
+import ITButton from "../button/button";
+
+const meta: Meta<typeof ITConfirmDialog> = {
+  title: "Components/Overlay/ITConfirmDialog",
+  component: ITConfirmDialog,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITConfirmDialog>;
+
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <ITButton label="Eliminar" color="danger" onClick={() => setOpen(true)} />
+        <ITConfirmDialog
+          isOpen={open}
+          onClose={() => setOpen(false)}
+          onConfirm={() => { alert("Confirmado"); setOpen(false); }}
+          title="Eliminar usuario"
+          message="Esta acción no se puede deshacer. ¿Deseas eliminar este usuario?"
+          confirmLabel="Eliminar"
+          variant="danger"
+        />
+      </>
+    );
+  },
+};

package/src/components/confirm-dialog/confirm-dialog.tsx

@@ -0,0 +1,45 @@
+import clsx from "clsx";
+import { ITConfirmDialogProps } from "./confirm-dialog.props";
+import ITButton from "../button/button";
+import { FaExclamationTriangle } from "react-icons/fa";
+import ITText from "@/components/text/text";
+
+export default function ITConfirmDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+  title = "Confirmar acción",
+  message = "¿Estás seguro de que deseas continuar?",
+  confirmLabel = "Confirmar",
+  cancelLabel = "Cancelar",
+  variant = "primary",
+  loading = false,
+}: ITConfirmDialogProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[300] flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose} />
+      <div
+        className={clsx(
+          "relative z-10 bg-white dark:bg-slate-900 rounded-2xl shadow-2xl max-w-md w-full p-6",
+          "border border-slate-200 dark:border-slate-700"
+        )}
+      >
+        <div className="flex items-start gap-4">
+          <div className="w-10 h-10 rounded-full bg-amber-100 dark:bg-amber-950/30 flex items-center justify-center flex-shrink-0">
+            <FaExclamationTriangle className="text-amber-600" size={18} />
+          </div>
+          <div className="flex-1">
+            <ITText as="h3" className="text-lg font-bold text-slate-800 dark:text-white">{title}</ITText>
+            <ITText as="p" className="text-sm text-slate-500 dark:text-slate-400 mt-1">{message}</ITText>
+          </div>
+        </div>
+        <div className="flex justify-end gap-3 mt-6">
+          <ITButton label={cancelLabel} variant="outlined" size="small" onClick={onClose} disabled={loading} />
+          <ITButton label={confirmLabel} color={variant} size="small" onClick={onConfirm} disabled={loading} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/data-table/ITDataTable.stories.tsx

@@ -0,0 +1,213 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import ITDataTable from './dataTable';
+import { ITDataTableFetchParams, ITDataTableResponse } from './dataTable.props';
+import ITCard from '../card/card';
+import ITBadget from '../badget/badget';
+import ITDatePicker from '../date-picker/datePicker';
+
+const meta: Meta<typeof ITDataTable> = {
+  title: 'Data Display/ITDataTable',
+  component: ITDataTable,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="p-8 bg-gray-50 min-h-screen">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITDataTable>;
+
+// --- MOCK CONSTANTS ---
+const ROLES = ['ADMIN', 'CAJERO', 'TECNICO', 'SUPERVISOR'];
+const MOCK_DATA = Array.from({ length: 100 }).map((_, i) => ({
+  id: i + 1,
+  username: `user_${i + 1}`,
+  name: `Nombre ${i + 1}`,
+  role: ROLES[i % ROLES.length],
+  active: i % 3 !== 0,
+  createdAt: new Date(Date.now() - i * 86400000).toISOString(),
+}));
+
+// --- MOCK FETCH FUNCTION ---
+const mockFetchItems = async (
+  params: ITDataTableFetchParams
+): Promise<ITDataTableResponse<any>> => {
+  console.log('Fetching with params:', params);
+  
+  // Simulate network delay
+  await new Promise((resolve) => setTimeout(resolve, 800));
+
+  let filtered = [...MOCK_DATA];
+
+  // Apply filters
+  Object.entries(params.filters).forEach(([key, value]) => {
+    if (value === undefined || value === '') return;
+    
+    if (key === 'username') {
+      filtered = filtered.filter(item => 
+        item.username.toLowerCase().includes(String(value).toLowerCase())
+      );
+    } else if (key === 'role') {
+      filtered = filtered.filter(item => item.role === value);
+    } else if (key === 'active') {
+      filtered = filtered.filter(item => item.active === value);
+    }
+  });
+
+  // Apply sorting
+  if (params.sort) {
+    const { key, direction } = params.sort;
+    filtered.sort((a: any, b: any) => {
+      if (a[key] < b[key]) return direction === 'asc' ? -1 : 1;
+      if (a[key] > b[key]) return direction === 'asc' ? 1 : -1;
+      return 0;
+    });
+  }
+
+  // Apply pagination
+  const start = (params.page - 1) * params.limit;
+  const end = start + params.limit;
+  const data = filtered.slice(start, end);
+
+  return {
+    data,
+    total: filtered.length,
+  };
+};
+
+const columns = [
+  {
+    key: 'id',
+    label: 'ID',
+    type: 'number' as const,
+    sortable: true,
+  },
+  {
+    key: 'username',
+    label: 'Usuario',
+    type: 'string' as const,
+    filter: true,
+    sortable: true,
+  },
+  {
+    key: 'name',
+    label: 'Nombre Completo',
+    type: 'string' as const,
+    filter: true,
+  },
+  {
+    key: 'role',
+    label: 'Rol',
+    type: 'string' as const,
+    filter: 'catalog' as const,
+    catalogOptions: {
+      loading: false,
+      data: [
+        { id: 'ADMIN', name: 'Administrador' },
+        { id: 'CAJERO', name: 'Cajero' },
+        { id: 'TECNICO', name: 'Técnico' },
+        { id: 'SUPERVISOR', name: 'Supervisor' },
+      ],
+    },
+    render: (row: any) => (
+      <ITBadget 
+        label={row.role} 
+        color={
+          row.role === 'ADMIN' ? 'primary' : 
+          row.role === 'CAJERO' ? 'success' : 
+          row.role === 'TECNICO' ? 'warning' : 'secondary'
+        } 
+      />
+    )
+  },
+  {
+    key: 'active',
+    label: 'Estado',
+    type: 'boolean' as const,
+    filter: true,
+    sortable: true,
+  },
+];
+
+export const Default: Story = {
+  args: {
+    title: 'Gestión de Usuarios',
+    columns,
+    fetchData: mockFetchItems,
+    defaultItemsPerPage: 10,
+  },
+};
+
+export const RemoteWithExternalFilters: Story = {
+  render: () => {
+    const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
+    const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([null, null]);
+
+    // Stable references for ITDataTable
+    const memoizedFetch = useCallback(mockFetchItems, []);
+    const memoizedColumns = useMemo(() => columns, []);
+    const externalFilters = useMemo(() => ({
+      date: selectedDate,
+      startDate: dateRange[0],
+      endDate: dateRange[1]
+    }), [selectedDate, dateRange]);
+
+    return (
+      <div className="space-y-6">
+        <ITCard title="Filtros Globales de Negocio" className="bg-white">
+          <div className="flex flex-wrap gap-4 items-end">
+            <div className="w-64">
+              <ITDatePicker
+                name="single"
+                label="Fecha Específica"
+                value={selectedDate}
+                onChange={(e: any) => setSelectedDate(e.target.value)}
+                placeholder="Seleccionar..."
+              />
+            </div>
+            <div className="w-80">
+              <ITDatePicker
+                range
+                name="range"
+                label="Rango de Auditoría"
+                value={dateRange}
+                onChange={(e: any) => setDateRange(e.target.value)}
+                placeholder="Seleccionar rango..."
+              />
+            </div>
+            <button 
+              onClick={() => { setSelectedDate(undefined); setDateRange([null, null]); }}
+              className="px-4 py-2 text-sm text-primary-600 hover:text-primary-700 font-medium"
+            >
+              Resetear Filtros
+            </button>
+          </div>
+        </ITCard>
+
+        <ITDataTable
+          title="Resultados Filtrados"
+          columns={memoizedColumns}
+          fetchData={memoizedFetch}
+          externalFilters={externalFilters}
+          defaultItemsPerPage={5}
+        />
+      </div>
+    );
+  }
+};
+
+export const SkeletonLoading: Story = {
+  args: {
+    title: 'Cargando Datos...',
+    columns,
+    fetchData: async () => {
+        await new Promise(r => setTimeout(r, 10000));
+        return { data: [], total: 0 };
+    },
+  },
+};

package/src/components/data-table/dataTable.props.ts

@@ -0,0 +1,69 @@
+import { ReactNode } from "react";
+import { Column } from "../table/table.props";
+
+export interface ITDataTableFetchParams {
+  page: number;
+  limit: number;
+  filters: Record<string, string | number | boolean | Date>;
+  sort?: {
+    key: string;
+    direction: "asc" | "desc";
+  };
+}
+
+export interface ITDataTableResponse<T> {
+  data: T[];
+  total: number;
+}
+
+export interface ITDataTableProps<T extends Record<string, unknown>> {
+  /**
+   * The column configuration array matching ITTable but adapted for Server-Side processing
+   */
+  columns: Column<T>[];
+
+  /**
+   * Async callback that the component will trigger whenever pagination, filtering or sorting changes.
+   * It must return a Promise with `data` array and the `total` items matching the query.
+   */
+  fetchData: (params: ITDataTableFetchParams) => Promise<ITDataTableResponse<T>>;
+
+  /**
+   * The amount of milliseconds to wait after internal `filters` state changes
+   * before triggering `fetchData`. Helpful to avoid spamming the backend while typing.
+   * @default 400
+   */
+  debounceMs?: number;
+
+  /**
+   * Filters managed outside of the ITDataTable (e.g. a date range picker).
+   * These will be merged with the internal column filters before calling fetchData.
+   */
+  externalFilters?: Record<string, string | number | boolean | Date>;
+
+  /**
+   * Custom element to display instead of the default spinner while `isLoading` is true.
+   */
+  loadingIndicator?: ReactNode;
+
+  /**
+   * Re-fetches the table automatically upon mounting.
+   * @default true
+   */
+  fetchOnMount?: boolean;
+
+  /**
+   * External hook to force the component to re-fetch the current page.
+   * Example: trigger after a successful modal form submission.
+   */
+  reloadTrigger?: number | string | boolean;
+
+  // Visual Inherited Props from ITTable
+  containerClassName?: string;
+  className?: string;
+  variant?: "default" | "striped" | "bordered" | "minimal";
+  size?: "sm" | "md" | "lg";
+  itemsPerPageOptions?: number[];
+  defaultItemsPerPage?: number;
+  title?: string | ReactNode;
+}