@axzydev/axzy_ui_system 1.2.1 → 1.2.3

package/src/showcases/NavigationShowcases.tsx

@@ -0,0 +1,193 @@
+import React, { useState } from "react";
+import { FaInfoCircle, FaSlidersH, FaRegBell, FaSync } from "react-icons/fa";
+import {
+  ITTabs,
+  ITStepper,
+  ITPagination,
+  ITTripleFilter,
+  ITSelect,
+  ITSlideToggle
+} from "../index";
+import { ShowcaseLayout } from "./ShowcaseLayout";
+
+// 1. ITTabs Showcase
+export const TabsShowcase = () => {
+  const [variant, setVariant] = useState<any>("line");
+
+  const tabItems = [
+    {
+      id: "tab1",
+      label: "General",
+      icon: <FaInfoCircle />,
+      content: <div className="p-4 text-sm text-slate-600 dark:text-slate-300">Configuración global y perfil general de la cuenta.</div>
+    },
+    {
+      id: "tab2",
+      label: "Seguridad",
+      icon: <FaSlidersH />,
+      content: <div className="p-4 text-sm text-slate-600 dark:text-slate-300">Ajustes de credenciales, MFA y logs de accesos.</div>
+    },
+    {
+      id: "tab3",
+      label: "Notificaciones",
+      icon: <FaRegBell />,
+      content: <div className="p-4 text-sm text-slate-600 dark:text-slate-300">Preferencias de alertas vía email, SMS y notificaciones PUSH.</div>
+    }
+  ];
+
+  const code = `<ITTabs\n  variant="${variant}"\n  items={[\n    { id: 'tab1', label: 'General', content: <General /> }\n  ]}\n/>`;
+
+  return (
+    <ShowcaseLayout
+      title="ITTabs"
+      description="Separadores de contenido en pestañas integrables con íconos y transiciones."
+      code={code}
+      demo={
+        <div className="w-full bg-white dark:bg-slate-900 border rounded-2xl p-6 shadow-sm min-h-[160px]">
+          <ITTabs items={tabItems} defaultActiveId="tab1" variant={variant} />
+        </div>
+      }
+      controls={
+        <>
+          <ITSelect
+            name="var_ctrl"
+            label="Variante Estética"
+            value={variant}
+            onChange={(e: any) => setVariant(e.target.value)}
+            options={[
+              { label: "Línea (Line)", value: "line" },
+              { label: "Pastilla (Pill)", value: "pill" }
+            ]}
+          />
+        </>
+      }
+    />
+  );
+};
+
+// 2. ITStepper Showcase
+export const StepperShowcase = () => {
+  const [step, setStep] = useState(0);
+  const [useIcons, setUseIcons] = useState(true);
+
+  const steps = [
+    { label: "Validar Identidad", content: <div className="p-6">Paso 1: Sube tu documento de identidad oficial.</div> },
+    { label: "Cargar KYC", content: <div className="p-6">Paso 2: Rellena tus datos fiscales y origen de fondos.</div> },
+    { label: "Completar Firma", content: <div className="p-6">Paso 3: Realiza la firma biométrica digital.</div> }
+  ];
+
+  const code = `<ITStepper\n  steps={steps}\n  currentStep={${step}}\n  useIcons={${useIcons}}\n  onStepChange={(idx) => setStep(idx)}\n/>`;
+
+  return (
+    <ShowcaseLayout
+      title="ITStepper"
+      description="Barra e indicador secuencial de pasos para completar procesos guiados complejos."
+      code={code}
+      demo={
+        <div className="w-full">
+          <ITStepper
+            steps={steps}
+            currentStep={step}
+            useIcons={useIcons}
+            onStepChange={setStep}
+            onFinish={() => alert("Proceso completado exitosamente!")}
+          />
+        </div>
+      }
+      controls={
+        <>
+          <div className="flex items-center justify-between pt-2">
+            <span className="text-sm font-semibold text-gray-700">Usar íconos</span>
+            <ITSlideToggle isOn={useIcons} onToggle={setUseIcons} size="sm" />
+          </div>
+          <div className="flex justify-between items-center pt-2">
+            <span className="text-sm font-semibold text-gray-700">Reiniciar Paso</span>
+            <button onClick={() => setStep(0)} className="p-2 bg-slate-100 rounded-lg hover:bg-slate-200 text-slate-800">
+              <FaSync size={12} />
+            </button>
+          </div>
+        </>
+      }
+    />
+  );
+};
+
+// 3. ITPagination Showcase
+export const PaginationShowcase = () => {
+  const [page, setPage] = useState(1);
+  const [color, setColor] = useState<any>("primary");
+
+  const code = `<ITPagination\n  currentPage={${page}}\n  totalPages={10}\n  onPageChange={(p) => setPage(p)}\n  color="${color}"\n/>`;
+
+  return (
+    <ShowcaseLayout
+      title="ITPagination"
+      description="Controlador de navegación de páginas numeradas con botones de dirección rápida."
+      code={code}
+      demo={
+        <div className="flex flex-col items-center gap-3">
+          <ITPagination
+            currentPage={page}
+            totalPages={10}
+            onPageChange={setPage}
+            color={color}
+          />
+          <span className="text-xs font-mono text-slate-500">Página actual activa: {page} de 10</span>
+        </div>
+      }
+      controls={
+        <>
+          <ITSelect
+            name="col_ctrl"
+            label="Color del Botón Activo"
+            value={color}
+            onChange={(e: any) => setColor(e.target.value)}
+            options={[
+              { label: "Primary", value: "primary" },
+              { label: "Secondary", value: "secondary" },
+              { label: "Success", value: "success" },
+              { label: "Danger", value: "danger" },
+              { label: "Warning", value: "warning" },
+              { label: "Info", value: "info" },
+              { label: "Purple", value: "purple" }
+            ]}
+          />
+        </>
+      }
+    />
+  );
+};
+
+// 4. ITTripleFilter Showcase
+export const TripleFilterShowcase = () => {
+  const [filter, setFilter] = useState("all");
+
+  const code = `<ITTripleFilter\n  value="${filter}"\n  onChange={(val) => setFilter(String(val))}\n  options={[\n    { label: 'Todos', value: 'all' },\n    { label: 'Activos', value: 'active' },\n    { label: 'Inactivos', value: 'inactive' }\n  ]}\n/>`;
+
+  return (
+    <ShowcaseLayout
+      title="ITTripleFilter"
+      description="Selector segmentado rápido diseñado típicamente para filtros rápidos de 3 estados."
+      code={code}
+      demo={
+        <div className="flex flex-col items-center gap-4">
+          <ITTripleFilter
+            value={filter}
+            onChange={(val) => setFilter(String(val))}
+            options={[
+              { label: "Todos", value: "all" },
+              { label: "Activos", value: "active" },
+              { label: "Inactivos", value: "inactive" }
+            ]}
+          />
+          <p className="text-xs text-slate-500 font-mono">Filtro activo: "{filter}"</p>
+        </div>
+      }
+      controls={
+        <div className="p-2 bg-slate-50 dark:bg-slate-900 rounded-lg text-xs">
+          <p className="text-slate-500">Proporciona un layout de tipo segmentado con animación al cambiar entre las opciones disponibles.</p>
+        </div>
+      }
+    />
+  );
+};

package/src/showcases/PageShowcases.tsx

@@ -0,0 +1,207 @@
+import { useState } from "react";
+import ITPage from "../components/page/page";
+import ITPageHeader from "../components/page-header/page-header";
+import ITButton from "../components/button/button";
+import ITCard from "../components/card/card";
+import ITStack from "../components/stack/stack";
+import ITGrid from "../components/grid/grid";
+import ITStatCard from "../components/stat-card/stat-card";
+import ITFlex from "../components/flex/flex";
+import ITAvatar from "../components/avatar/avatar";
+import ITSlideToggle from "../components/slide/slide";
+import { ShowcaseLayout } from "./ShowcaseLayout";
+
+export const PageHeaderShowcase = () => {
+  const [showBack, setShowBack] = useState(true);
+  const [showBreadcrumbs, setShowBreadcrumbs] = useState(true);
+  const [showDescription, setShowDescription] = useState(true);
+  const [showActions, setShowActions] = useState(true);
+
+  const code = `<ITPageHeader
+  title="Usuarios"
+  description="Gestiona los usuarios del sistema"
+  breadcrumbs={[
+    { label: "Inicio", href: "#" },
+    { label: "Usuarios" },
+  ]}
+  actions={<ITButton label="Nuevo" size="small" />}
+/>`;
+
+  return (
+    <ShowcaseLayout
+      title="ITPageHeader"
+      description="Encabezado estandarizado para pantallas. Incluye título, descripción, breadcrumbs, botón de volver y área de acciones."
+      code={code}
+      demo={
+        <div className="w-full border border-slate-200 dark:border-slate-700 rounded-xl p-6 bg-white dark:bg-slate-900/50">
+          <ITPageHeader
+            title="Usuarios"
+            description={showDescription ? "Gestiona los usuarios del sistema" : undefined}
+            breadcrumbs={showBreadcrumbs ? [
+              { label: "Inicio", href: "#" },
+              { label: "Usuarios" },
+            ] : undefined}
+            backAction={showBack ? () => {} : undefined}
+            actions={showActions ? <ITButton label="Nuevo Usuario" size="small" /> : undefined}
+          />
+        </div>
+      }
+      controls={
+        <ITStack spacing={4}>
+          <ITFlex justify="between" align="center">
+            <span className="text-sm font-semibold text-slate-700 dark:text-slate-300">Volver</span>
+            <ITSlideToggle isOn={showBack} onToggle={setShowBack} size="sm" />
+          </ITFlex>
+          <ITFlex justify="between" align="center">
+            <span className="text-sm font-semibold text-slate-700 dark:text-slate-300">Breadcrumbs</span>
+            <ITSlideToggle isOn={showBreadcrumbs} onToggle={setShowBreadcrumbs} size="sm" />
+          </ITFlex>
+          <ITFlex justify="between" align="center">
+            <span className="text-sm font-semibold text-slate-700 dark:text-slate-300">Descripción</span>
+            <ITSlideToggle isOn={showDescription} onToggle={setShowDescription} size="sm" />
+          </ITFlex>
+          <ITFlex justify="between" align="center">
+            <span className="text-sm font-semibold text-slate-700 dark:text-slate-300">Acciones</span>
+            <ITSlideToggle isOn={showActions} onToggle={setShowActions} size="sm" />
+          </ITFlex>
+        </ITStack>
+      }
+      gallery={
+        <ITStack spacing={4}>
+          <div className="border border-slate-200 dark:border-slate-700 rounded-xl p-4 bg-white dark:bg-slate-900/50">
+            <ITPageHeader title="Solo título" />
+          </div>
+          <div className="border border-slate-200 dark:border-slate-700 rounded-xl p-4 bg-white dark:bg-slate-900/50">
+            <ITPageHeader
+              title="Dashboard"
+              description="Resumen de métricas del sistema"
+            />
+          </div>
+          <div className="border border-slate-200 dark:border-slate-700 rounded-xl p-4 bg-white dark:bg-slate-900/50">
+            <ITPageHeader
+              title="Órdenes"
+              description="Listado de órdenes activas"
+              breadcrumbs={[
+                { label: "Dashboard", href: "#" },
+                { label: "Órdenes" },
+              ]}
+              actions={
+                <>
+                  <ITButton label="Exportar" variant="outlined" size="small" />
+                  <ITButton label="Nueva" size="small" />
+                </>
+              }
+            />
+          </div>
+          <div className="border border-slate-200 dark:border-slate-700 rounded-xl p-4 bg-white dark:bg-slate-900/50">
+            <ITPageHeader
+              title="Editar Producto"
+              description="Modifica los datos del producto"
+              breadcrumbs={[
+                { label: "Productos", href: "#" },
+                { label: "Editar" },
+              ]}
+              backAction={() => {}}
+              actions={
+                <>
+                  <ITButton label="Cancelar" variant="outlined" size="small" />
+                  <ITButton label="Guardar" size="small" />
+                </>
+              }
+            />
+          </div>
+        </ITStack>
+      }
+    />
+  );
+};
+
+export const PageShowcase = () => {
+  const [state, setState] = useState<"normal" | "loading" | "error" | "empty">("normal");
+
+  const code = `<ITPage
+  title="Dashboard"
+  description="Resumen de actividad"
+  breadcrumbs={[{ label: "Dashboard" }]}
+  loading={isLoading}
+  error={error}
+  onRetry={refetch}
+>
+  <ITGrid container spacing={3}>
+    <ITGrid item xs={12} sm={6} lg={3}>
+      <ITStatCard label="Usuarios" value="1,245" />
+    </ITGrid>
+  </ITGrid>
+</ITPage>`;
+
+  return (
+    <ShowcaseLayout
+      title="ITPage"
+      description="Template completo de página con estados: carga, error, vacío y contenido normal."
+      code={code}
+      demo={
+        <div className="w-full">
+          <ITPage
+            title="Dashboard"
+            description="Resumen de actividad del sistema"
+            breadcrumbs={[
+              { label: "Dashboard" },
+            ]}
+            loading={state === "loading"}
+            error={state === "error" ? "Error al cargar los datos. Verifica tu conexión." : null}
+            onRetry={() => setState("normal")}
+            empty={state === "empty"}
+            emptyTitle="Sin datos disponibles"
+            emptyDescription="No hay actividad reciente para mostrar."
+          >
+            <ITGrid container spacing={3}>
+              <ITGrid item xs={12} sm={6} lg={3}>
+                <ITStatCard label="Usuarios Activos" value="1,245" trend="+12%" trendDirection="up" />
+              </ITGrid>
+              <ITGrid item xs={12} sm={6} lg={3}>
+                <ITStatCard label="Ventas Hoy" value="$4,320" trend="+5.4%" trendDirection="up" color="bg-blue-50 dark:bg-blue-950/20" />
+              </ITGrid>
+              <ITGrid item xs={12} sm={6} lg={3}>
+                <ITStatCard label="Órdenes" value="89" trend="-2.1%" trendDirection="down" color="bg-amber-50 dark:bg-amber-950/20" />
+              </ITGrid>
+              <ITGrid item xs={12} sm={6} lg={3}>
+                <ITStatCard label="Tickets" value="12" trend="-8%" trendDirection="down" color="bg-rose-50 dark:bg-rose-950/20" />
+              </ITGrid>
+            </ITGrid>
+
+            <ITCard title="Actividad Reciente">
+              <ITStack spacing={3}>
+                {[
+                  { user: "Ana López", action: "creó un reporte" },
+                  { user: "Carlos Ruiz", action: "aprobó orden #1234" },
+                  { user: "María García", action: "actualizó perfil" },
+                ].map((item, i) => (
+                  <ITFlex key={i} gap={3} align="center">
+                    <ITAvatar initials={item.user.split(" ").map(w => w[0]).join("")} size="sm" color="bg-primary-500" />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-xs font-semibold text-slate-700 dark:text-slate-200">{item.user}</p>
+                      <p className="text-[10px] text-slate-400">{item.action}</p>
+                    </div>
+                  </ITFlex>
+                ))}
+              </ITStack>
+            </ITCard>
+          </ITPage>
+        </div>
+      }
+      controls={
+        <ITFlex gap={2} wrap="wrap">
+          {(["normal", "loading", "error", "empty"] as const).map((s) => (
+            <ITButton
+              key={s}
+              label={s.charAt(0).toUpperCase() + s.slice(1)}
+              variant={state === s ? "filled" : "outlined"}
+              size="small"
+              onClick={() => setState(s)}
+            />
+          ))}
+        </ITFlex>
+      }
+    />
+  );
+};

package/src/showcases/ShowcaseLayout.tsx

@@ -0,0 +1,139 @@
+import React, { useState } from "react";
+import { FaCheck, FaCopy } from "react-icons/fa";
+import ITCard from "../components/card/card";
+import { useITTheme } from "../components/theme-provider/themeProvider";
+
+export const CodeViewer: React.FC<{ code: string }> = ({ code }) => {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+  return (
+    <div className="relative mt-4 rounded-xl overflow-hidden bg-slate-950 text-slate-200 border border-slate-800 shadow-inner">
+      <div className="flex justify-between items-center px-4 py-2 bg-slate-900 border-b border-slate-800">
+        <span className="text-[10px] uppercase font-bold tracking-wider text-slate-400 font-mono">JSX Code</span>
+        <button
+          onClick={handleCopy}
+          className="text-slate-400 hover:text-white transition-colors flex items-center gap-1.5 text-xs py-1 px-2 rounded hover:bg-slate-800"
+        >
+          {copied ? <FaCheck size={11} className="text-emerald-500" /> : <FaCopy size={11} />}
+          <span>{copied ? "Copiado!" : "Copiar"}</span>
+        </button>
+      </div>
+      <pre className="p-4 text-xs font-mono overflow-x-auto leading-relaxed whitespace-pre-wrap">
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+};
+
+export interface ShowcaseLayoutProps {
+  title: string;
+  description: string;
+  demo: React.ReactNode;
+  controls: React.ReactNode;
+  code: string;
+  gallery?: React.ReactNode;
+}
+
+export const ShowcaseLayout: React.FC<ShowcaseLayoutProps> = ({
+  title,
+  description,
+  demo,
+  controls,
+  code,
+  gallery
+}) => {
+  const { resolvedTheme } = useITTheme();
+  const [localTheme, setLocalTheme] = useState<"light" | "dark" | "default">("default");
+  const activeTheme = localTheme === "default" ? resolvedTheme : localTheme;
+
+  return (
+    <div className="space-y-8 animate-fadeIn">
+      {/* Title block */}
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-3xl font-extrabold text-slate-800 dark:text-white tracking-tight flex items-center gap-3">
+            {title}
+            <span className={`text-[10px] px-2 py-0.5 rounded-full font-semibold border ${activeTheme === "dark"
+              ? "bg-slate-800 text-slate-200 border-slate-700"
+              : "bg-slate-100 text-slate-700 border-slate-200"
+              }`}>
+              {activeTheme === "dark" ? "Sandbox Oscuro 🌙" : "Sandbox Claro ☀️"}
+            </span>
+          </h1>
+          <p className="text-slate-500 dark:text-slate-400 mt-1.5 text-sm md:text-base">{description}</p>
+        </div>
+
+        {/* Local Sandbox Theme Switcher */}
+        <div className="flex items-center gap-1 bg-slate-100 dark:bg-slate-800 p-1 rounded-xl border border-slate-200 dark:border-slate-700">
+          <button
+            onClick={() => setLocalTheme("default")}
+            className={`px-3 py-1 text-xs font-medium rounded-lg transition-all ${localTheme === "default"
+              ? "bg-white dark:bg-slate-700 text-slate-800 dark:text-white shadow-sm border border-slate-200 dark:border-slate-600"
+              : "text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 border border-transparent"
+              }`}
+          >
+            Auto
+          </button>
+          <button
+            onClick={() => setLocalTheme("light")}
+            className={`px-3 py-1 text-xs font-medium rounded-lg transition-all ${localTheme === "light"
+              ? "bg-white dark:bg-slate-700 text-slate-800 dark:text-white shadow-sm border border-slate-200 dark:border-slate-600"
+              : "text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 border border-transparent"
+              }`}
+          >
+            Claro
+          </button>
+          <button
+            onClick={() => setLocalTheme("dark")}
+            className={`px-3 py-1 text-xs font-medium rounded-lg transition-all ${localTheme === "dark"
+              ? "bg-white dark:bg-slate-700 text-slate-800 dark:text-white shadow-sm border border-slate-200 dark:border-slate-600"
+              : "text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 border border-transparent"
+              }`}
+          >
+            Oscuro
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* Interactive Sandbox & Code */}
+        <div className="lg:col-span-2 space-y-6">
+          <ITCard title="Sandbox Interactivo" className="shadow-lg border-slate-100 dark:border-slate-800">
+            <div
+              data-theme={activeTheme}
+              className={`p-6 min-h-[180px] rounded-2xl border border-dashed transition-all duration-300 flex items-center justify-center ${activeTheme === "dark"
+                ? "dark bg-slate-950 border-slate-800 text-slate-200"
+                : "light bg-white border-slate-200 text-slate-800"
+                }`}
+            >
+              <div className="w-full flex justify-center">{demo}</div>
+            </div>
+          </ITCard>
+
+          <CodeViewer code={code} />
+        </div>
+
+        {/* Controls */}
+        <div className="space-y-6">
+          <ITCard title="Propiedades / Controles" className="shadow-lg border-slate-100 dark:border-slate-800">
+            <div className="space-y-4">
+              {controls}
+            </div>
+          </ITCard>
+        </div>
+      </div>
+
+      {gallery && (
+        <ITCard title="Variaciones y Estados (Galería)" className="shadow-lg border-slate-100 dark:border-slate-800">
+          <div className="p-4">
+            {gallery}
+          </div>
+        </ITCard>
+      )}
+    </div>
+  );
+};