@axzydev/axzy_ui_system 1.2.1 → 1.2.2

package/src/components/stepper/stepper.tsx

@@ -0,0 +1,227 @@
+import clsx from "clsx";
+import React, { useEffect, useRef, useState } from "react";
+import { ITStepperProps, Step } from "./stepper.props";
+import { theme } from "@/theme/theme";
+import ITButton from "../button/button";
+import { FaChevronLeft, FaChevronRight, FaCheck } from "react-icons/fa";
+import ITText from "@/components/text/text";
+
+export default function ITStepper({
+  steps,
+  currentStep,
+  onFinish,
+  onStepChange,
+  allowClickToJump = true,
+  useIcons = false,
+  disableNext = false,
+  containerClassName,
+  stepClassName,
+  scrollableContent = false,
+  maxContentHeight = "400px",
+  color = "primary",
+}: ITStepperProps) {
+  const [direction, setDirection] = useState<"next" | "prev">("next");
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const progressRef = useRef<HTMLDivElement | null>(null);
+
+  // Resolve theme color
+  const isThemeColor = color in theme.colors;
+  const resolvedColor = isThemeColor
+    ? theme.colors[color as keyof typeof theme.colors][500]
+    : color;
+
+  // Effect for notifying parent of step change
+  useEffect(() => {
+    onStepChange?.(currentStep);
+  }, [currentStep, onStepChange]);
+
+  // Effect for animation and focus management
+  useEffect(() => {
+    const pct = (currentStep / Math.max(1, steps.length - 1)) * 100;
+
+    if (progressRef.current) {
+      progressRef.current.style.width = `${pct}%`;
+      progressRef.current.style.backgroundColor = resolvedColor;
+    }
+
+    if (contentRef.current) {
+      contentRef.current.classList.remove(
+        "animate-slide-in-left",
+        "animate-slide-in-right"
+      );
+      requestAnimationFrame(() => {
+        contentRef.current?.classList.add(
+          direction === "next"
+            ? "animate-slide-in-right"
+            : "animate-slide-in-left"
+        );
+      });
+    }
+
+    contentRef.current?.focus();
+  }, [currentStep, direction, steps.length, resolvedColor]);
+
+
+  const nextStep = () => {
+    if (disableNext) return;
+    if (currentStep < steps.length - 1) {
+      setDirection("next");
+      onStepChange?.(currentStep + 1);
+    } else {
+      onFinish?.();
+    }
+  };
+
+  const prevStep = () => {
+    if (currentStep > 0) {
+      setDirection("prev");
+      onStepChange?.(currentStep - 1);
+    }
+  };
+
+  const jumpTo = (index: number) => {
+    if (!allowClickToJump) return;
+    if (index <= currentStep) {
+      setDirection(index > currentStep ? "next" : "prev");
+      onStepChange?.(index);
+    }
+  };
+
+  const renderStepContent = (
+    index: number,
+    isCompleted: boolean,
+    isActive: boolean
+  ) => {
+    const step = steps[index];
+
+    if (isCompleted) {
+      return <FaCheck className="w-4 h-4" />;
+    }
+
+    if (step.icon && useIcons) {
+      return (
+        <div className="flex items-center justify-center w-5 h-5">
+          {step.icon}
+        </div>
+      );
+    }
+
+    return <ITText as="span" className="text-sm font-semibold">{index + 1}</ITText>;
+  };
+
+  return (
+    <div className={clsx("w-full max-w-5xl mx-auto px-4", containerClassName)}>
+      <div className="relative mb-8">
+        <div
+          className="absolute left-6 right-6 top-5 h-1 bg-gray-200 rounded-full z-0"
+          aria-hidden
+        />
+        <div
+          ref={progressRef}
+          className="absolute left-6 top-5 h-1 rounded-full z-10 transition-all duration-500 ease-in-out"
+          aria-hidden
+        />
+
+        <div className="flex items-start justify-between space-x-2 relative z-20">
+          {steps.map((step, idx) => {
+            const isActive = idx === currentStep;
+            const isCompleted = idx < currentStep;
+            const hasIcon = step.icon && useIcons;
+
+            return (
+              <button
+                type="button"
+                key={idx}
+                onClick={() => jumpTo(idx)}
+                disabled={!allowClickToJump && idx !== currentStep}
+                aria-current={isActive ? "step" : undefined}
+                aria-label={`Paso ${idx + 1} ${step.label}`}
+                className="flex-1 group"
+                title={step.label}
+              >
+                <div className="flex flex-col items-center">
+                  <div
+                    className={clsx(
+                      "flex items-center justify-center w-11 h-11 rounded-full border-2 transition-all duration-300 transform",
+                      hasIcon && "p-2",
+                      isCompleted && "bg-slate-400 border-slate-400 text-white scale-100 shadow",
+                      isActive && "text-white scale-110 shadow-lg",
+                      !isActive && !isCompleted && "bg-white border-gray-300 text-gray-400"
+                    )}
+                    style={isActive ? { backgroundColor: resolvedColor, borderColor: resolvedColor } : undefined}
+                  >
+                    {renderStepContent(idx, isCompleted, isActive)}
+                  </div>
+
+                  <ITText
+                    as="span"
+                    className={clsx(
+                      "mt-2 text-xs sm:text-sm font-medium transition-colors text-center",
+                      isCompleted ? "text-slate-400" : !isActive && "text-gray-400"
+                    )}
+                    style={isActive ? { color: resolvedColor } : undefined}
+                  >
+                    {step.label}
+                  </ITText>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* --- CONTENIDO DEL STEP --- */}
+      <div
+        ref={contentRef}
+        tabIndex={-1}
+        role="region"
+        aria-labelledby={`step-${currentStep}`}
+        className={clsx(
+          stepClassName,
+          "bg-white border border-gray-100 rounded-2xl shadow-lg min-h-[280px] transition-transform duration-400 no-scrollbar p-6",
+          scrollableContent && "overflow-y-auto hide-scrollbar"
+        )}
+        style={
+          scrollableContent && maxContentHeight
+            ? { maxHeight: maxContentHeight }
+            : undefined
+        }
+      >
+        {steps[currentStep].content}
+      </div>
+
+      {/* --- BOTONES DE CONTROL --- */}
+      <div className="flex justify-between items-center mt-6">
+        <ITButton
+          variant="outlined"
+          color="secondary"
+          disabled={currentStep === 0}
+          onClick={prevStep}
+        >
+          <div className="flex items-center gap-2">
+            <FaChevronLeft />
+            <ITText as="span">Atrás</ITText>
+          </div>
+        </ITButton>
+
+        <div className="flex items-center gap-3">
+          <ITText as="div" className="text-sm text-gray-500 mr-2 hidden sm:block">
+            Paso {currentStep + 1} de {steps.length}
+          </ITText>
+          
+          <ITButton
+            variant="solid"
+            color={color as any}
+            disabled={disableNext}
+            onClick={nextStep}
+          >
+            <div className="flex items-center gap-2">
+              <ITText as="span">{currentStep === steps.length - 1 ? "Finalizar" : "Siguiente"}</ITText>
+              {currentStep === steps.length - 1 ? <FaCheck /> : <FaChevronRight />}
+            </div>
+          </ITButton>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/table/table.props.ts

@@ -0,0 +1,43 @@
+import { TableSize, TableVariants } from "@/types/table.types";
+
+export type ColumnType = "string" | "date" | "number" | "boolean" | "actions" | "catalog";
+
+export interface CatalogOption {
+  id: string | number;
+  name: string;
+}
+
+export interface Column<T = any> {
+  key: string;
+  label: string;
+  className?: string;
+  currencyMX?: boolean; 
+  actions?: (row: T) => React.ReactNode;
+  filter?: boolean | "catalog";
+  type: ColumnType;
+  sortable?: boolean;
+  render?: (row: T) => React.ReactNode;
+  editComponent?: (props: {
+    value: any;
+    onChange: (value: any) => void;
+    rowData: T;
+  }) => React.ReactNode;
+  // Nuevas propiedades para catálogo
+  catalogOptions?: {
+    data: CatalogOption[];
+    loading?: boolean;
+    error?: boolean;
+  };
+}
+
+export interface ITTableProps<T> {
+  columns: Column<T>[];
+  containerClassName?: string;
+  data: T[];
+  variant?: TableVariants;
+  className?: string;
+  size?: TableSize;
+  itemsPerPageOptions?: Array<number>;
+  defaultItemsPerPage?: number;
+  title?: string;
+}

package/src/components/table/table.stories.tsx

@@ -0,0 +1,189 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ITTable from "./table";
+import { Column } from "./table.props";
+import ITBadget from "../badget/badget";
+import ITButton from "../button/button";
+import { FaEdit, FaTrash } from "react-icons/fa";
+import { useState } from "react";
+
+const meta: Meta<typeof ITTable> = {
+  title: "Components/Data Display/ITTable",
+  component: ITTable,
+  parameters: {
+    layout: "padded", // Tables need more space
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "striped", "bordered"],
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ITTable>;
+
+// --- MOCK DATA & COLUMNS ---
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  roleId: number;
+  balance: number;
+  isActive: boolean;
+  lastLogin: string;
+}
+
+const mockRoles = [
+  { id: 1, name: "Administrator" },
+  { id: 2, name: "Editor" },
+  { id: 3, name: "Viewer" },
+];
+
+const generateMockData = (count: number): User[] => {
+  return Array.from({ length: count }, (_, i) => ({
+    id: i + 1,
+    name: `User ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    roleId: (i % 3) + 1,
+    balance: Math.random() * 10000,
+    isActive: i % 4 !== 0,
+    lastLogin: new Date(Date.now() - Math.random() * 10000000000).toISOString(),
+  }));
+};
+
+const mockData = generateMockData(25);
+
+const basicColumns: Column<User>[] = [
+  { key: "id", label: "ID", type: "number" },
+  { key: "name", label: "Name", type: "string" },
+  { key: "email", label: "Email", type: "string" },
+];
+
+const advancedColumns: Column<User>[] = [
+  { key: "id", label: "ID", type: "number", sortable: true, filter: true },
+  { key: "name", label: "Name", type: "string", sortable: true, filter: true },
+  { key: "email", label: "Email", type: "string", sortable: true, filter: true },
+  { 
+    key: "roleId", 
+    label: "Role", 
+    type: "catalog", 
+    sortable: true, 
+    filter: "catalog",
+    catalogOptions: { data: mockRoles } 
+  },
+  { 
+    key: "balance", 
+    label: "Balance", 
+    type: "number", 
+    sortable: true, 
+    currencyMX: true 
+  },
+  { 
+    key: "isActive", 
+    label: "Status", 
+    type: "boolean", 
+    sortable: true, 
+    filter: true,
+    render: (row) => (
+      <ITBadget 
+        label={row.isActive ? "Active" : "Inactive"} 
+        color={row.isActive ? "success" : "danger"} 
+      />
+    )
+  },
+];
+
+const actionsColumn: Column<User> = {
+  key: "actions",
+  label: "Actions",
+  type: "actions",
+  actions: (row) => (
+    <>
+      <ITButton size="small" variant="text" color="info" ariaLabel="Edit" onClick={() => alert(`Edit ${row.name}`)}>
+        <FaEdit />
+      </ITButton>
+      <ITButton size="small" variant="text" color="danger" ariaLabel="Delete" onClick={() => alert(`Delete ${row.name}`)}>
+        <FaTrash />
+      </ITButton>
+    </>
+  ),
+};
+
+
+// --- STORIES ---
+
+export const Default: Story = {
+  args: {
+    columns: basicColumns,
+    data: mockData.slice(0, 5), // Just a few
+    title: "Basic Users Table",
+  } as any,
+};
+
+export const WithPagination: Story = {
+  args: {
+    columns: basicColumns,
+    data: mockData,
+    title: "Paginated Table",
+    defaultItemsPerPage: 5,
+    itemsPerPageOptions: [5, 10, 20],
+  } as any,
+};
+
+export const WithSortingAndFiltering: Story = {
+    args: {
+      columns: advancedColumns.map(col => ({ ...col, render: undefined })), // Remove custom render to show raw formatting
+      data: mockData,
+      title: "Data Management (Sort & Filter)",
+    } as any,
+};
+
+export const CustomRendering: Story = {
+    args: {
+      columns: advancedColumns,
+      data: mockData,
+      title: "Custom Rendering (Badges & Catalogs)",
+    } as any,
+};
+
+// Wrapper for interactive actions
+const ActionsTableWrapper = (args: any) => {
+    const [data, setData] = useState(mockData.slice(0, 5));
+    
+    const actions: Column<User> = {
+        key: "actions",
+        label: "Actions",
+        type: "actions",
+        actions: (row) => (
+          <>
+            <ITButton size="small" variant="text" color="danger" ariaLabel="Delete" onClick={() => setData(d => d.filter(item => item.id !== row.id))}>
+              <FaTrash />
+            </ITButton>
+          </>
+        ),
+      };
+
+    return <ITTable {...args} data={data} columns={[...basicColumns, actions]} />;
+};
+
+export const WithActions: Story = {
+    render: (args) => <ActionsTableWrapper {...args} />,
+    args: {
+      title: "Table with Actions",
+    } as any,
+};
+
+export const EmptyState: Story = {
+    args: {
+      columns: basicColumns,
+      data: [],
+      title: "No Data Available",
+    } as any,
+};