@axzydev/axzy_ui_system 1.2.0 → 1.2.2

package/src/showcases/DataShowcases.tsx

@@ -0,0 +1,260 @@
+import React, { useState, useMemo, useCallback } from "react";
+import {
+  ITTable,
+  ITDataTable,
+  ITBadget,
+  ITImage,
+  ITInput,
+  ITSelect,
+  ITSlideToggle,
+  ITDataTableFetchParams,
+  ITDataTableResponse
+} from "../index";
+import { ShowcaseLayout } from "./ShowcaseLayout";
+
+// 1. ITTable Showcase
+export const TableShowcase = () => {
+  const [variant, setVariant] = useState<any>("default");
+  const [size, setSize] = useState<any>("md");
+
+  const columns: any = [
+    { key: "id", label: "ID", type: "number" },
+    { key: "name", label: "Nombre", type: "string" },
+    { key: "role", label: "Rol", type: "string" },
+    {
+      key: "status",
+      label: "Estado",
+      type: "actions",
+      render: (row: any) => (
+        <ITBadget
+          label={row.status ? "Conectado" : "Inactivo"}
+          color={row.status ? "success" : "danger"}
+          size="small"
+        />
+      )
+    }
+  ];
+
+  const data = [
+    { id: 101, name: "Esteban Dido", role: "Auditor", status: true },
+    { id: 102, name: "Elsa Pato", role: "Administrador", status: true },
+    { id: 103, name: "Aquiles Baeza", role: "Operador", status: false }
+  ];
+
+  const code = `<ITTable\n  columns={columns}\n  data={data}\n  variant="${variant}"\n  size="${size}"\n/>`;
+
+  return (
+    <ShowcaseLayout
+      title="ITTable"
+      description="Base de renderizado de tablas estructuradas con soporte de alineamiento y tipado estricto."
+      code={code}
+      demo={
+        <div className="w-full bg-white dark:bg-slate-900 border rounded-xl overflow-hidden shadow-sm">
+          <ITTable
+            columns={columns}
+            data={data}
+            variant={variant}
+            size={size}
+          />
+        </div>
+      }
+      controls={
+        <>
+          <ITSelect
+            name="var_ctrl"
+            label="Variante Estilo"
+            value={variant}
+            onChange={(e: any) => setVariant(e.target.value)}
+            options={[
+              { label: "Default", value: "default" },
+              { label: "Striped (Cebra)", value: "striped" },
+              { label: "Bordered (Bordes)", value: "bordered" },
+              { label: "Clean (Limpio)", value: "clean" }
+            ]}
+          />
+          <ITSelect
+            name="sz_ctrl"
+            label="Tamaño Filas"
+            value={size}
+            onChange={(e: any) => setSize(e.target.value)}
+            options={[
+              { label: "Small (sm)", value: "sm" },
+              { label: "Medium (md)", value: "md" },
+              { label: "Large (lg)", value: "lg" }
+            ]}
+          />
+        </>
+      }
+    />
+  );
+};
+
+// 2. ITDataTable Showcase
+export const DataTableShowcase = () => {
+  const userColumns = useMemo(() => [
+    { key: "id", label: "ID", type: "number" as const },
+    { key: "name", label: "Nombre", type: "string" as const, filter: true },
+    { key: "role", label: "Rol", type: "string" as const, filter: true },
+    { key: "active", label: "Activo", type: "boolean" as const, filter: true }
+  ], []);
+
+  const fetchData = useCallback(async (params: ITDataTableFetchParams): Promise<ITDataTableResponse<any>> => {
+    await new Promise(resolve => setTimeout(resolve, 600));
+    let mockData = [
+      { id: 1, name: "Juan Pérez", role: "Administrador", active: true },
+      { id: 2, name: "María García", role: "Usuario", active: true },
+      { id: 3, name: "Pedro López", role: "Usuario", active: false },
+      { id: 4, name: "Ana Torres", role: "Editor", active: true },
+      { id: 5, name: "Luis Gómez", role: "Administrador", active: false }
+    ];
+
+    if (params.filters) {
+      Object.keys(params.filters).forEach(key => {
+        const filterVal = params.filters[key];
+        if (filterVal) {
+          mockData = mockData.filter(item =>
+            String((item as any)[key]).toLowerCase().includes(String(filterVal).toLowerCase())
+          );
+        }
+      });
+    }
+
+    return {
+      data: mockData,
+      total: mockData.length
+    };
+  }, []);
+
+  const code = `<ITDataTable\n  columns={[\n    { key: 'id', label: 'ID', type: 'number' },\n    { key: 'name', label: 'Nombre', type: 'string', filter: true }\n  ]}\n  fetchData={api.fetchUsers}\n/>`;
+
+  return (
+    <ShowcaseLayout
+      title="ITDataTable"
+      description="Tabla de datos auto-suficiente con carga dinámica, paginación integrada y filtros avanzados."
+      code={code}
+      demo={
+        <div className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl overflow-hidden shadow-md">
+          <ITDataTable
+            columns={userColumns}
+            fetchData={fetchData}
+          />
+        </div>
+      }
+      controls={
+        <div className="p-2 bg-slate-50 dark:bg-slate-900 rounded-lg text-xs space-y-2">
+          <p className="text-slate-500">Esta tabla consume una función de carga de datos que se autogestiona en ordenamiento, paginado y filtros.</p>
+          <div className="p-2 bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-900 rounded text-amber-800 dark:text-amber-300">
+            Prueba a escribir en los inputs de filtro de la tabla!
+          </div>
+        </div>
+      }
+    />
+  );
+};
+
+// 3. ITBadget Showcase
+export const BadgetShowcase = () => {
+  const [color, setColor] = useState<any>("success");
+  const [size, setSize] = useState<any>("medium");
+  const [labelText, setLabelText] = useState("Activo");
+
+  const code = `<ITBadget\n  label="${labelText}"\n  color="${color}"\n  size="${size}"\n/>`;
+
+  return (
+    <ShowcaseLayout
+      title="ITBadget"
+      description="Badges (etiquetas) estilizados para representar estados o categorías de items."
+      code={code}
+      demo={
+        <ITBadget label={labelText} color={color} size={size} />
+      }
+      controls={
+        <>
+          <ITInput
+            name="label"
+            label="Texto"
+            value={labelText}
+            onChange={(e: any) => setLabelText(e.target.value)}
+            onBlur={() => { }}
+          />
+          <ITSelect
+            name="color"
+            label="Color"
+            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" }
+            ]}
+          />
+          <ITSelect
+            name="size"
+            label="Tamaño"
+            value={size}
+            onChange={(e: any) => setSize(e.target.value)}
+            options={[
+              { label: "Small", value: "small" },
+              { label: "Medium", value: "medium" },
+              { label: "Large", value: "large" }
+            ]}
+          />
+        </>
+      }
+      gallery={
+        <div className="flex flex-wrap items-center gap-4">
+          <ITBadget label="Primary" color="primary" />
+          <ITBadget label="Secondary" color="secondary" />
+          <ITBadget label="Success" color="success" />
+          <ITBadget label="Danger" color="danger" />
+          <ITBadget label="Warning" color="warning" />
+          <ITBadget label="Info" color="info" />
+          <span className="mx-4 text-slate-300">|</span>
+          <ITBadget label="Small" color="primary" size="small" />
+          <ITBadget label="Medium" color="primary" size="medium" />
+          <ITBadget label="Large" color="primary" size="large" />
+        </div>
+      }
+    />
+  );
+};
+
+// 4. ITImage Showcase
+export const ImageShowcase = () => {
+  const [broken, setBroken] = useState(false);
+  const src = broken ? "https://nonexistent.image.site/broken.jpg" : "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&q=80";
+
+  const code = `<ITImage\n  src="${src}"\n  alt="Imagen Abstracta"\n  fallback="https://placehold.co/400x200?text=No+Preview"\n  className="rounded-xl object-cover h-40"\n/>`;
+
+  return (
+    <ShowcaseLayout
+      title="ITImage"
+      description="Componente de renderizado de imágenes inteligente con cargador interno y fallback automático ante fallas de red."
+      code={code}
+      demo={
+        <div className="w-full max-w-sm flex flex-col items-center gap-3">
+          <ITImage
+            src={src}
+            alt="Demo abstracta"
+            fallback="https://placehold.co/400x200?text=Error+Carga+Imagen"
+            className="rounded-xl object-cover h-40 w-full shadow-md"
+          />
+          <span className="text-xs text-slate-500 font-mono">
+            {broken ? "Cargando URL Rota (Fallback Activo)" : "Cargando URL Correcta"}
+          </span>
+        </div>
+      }
+      controls={
+        <>
+          <div className="flex items-center justify-between pt-2">
+            <span className="text-sm font-semibold text-gray-700">Forzar Error de Carga (URL rota)</span>
+            <ITSlideToggle isOn={broken} onToggle={setBroken} activeColor="danger" size="sm" />
+          </div>
+        </>
+      }
+    />
+  );
+};

package/src/showcases/FeedbackShowcases.tsx

@@ -0,0 +1,268 @@
+import React, { useState } from "react";
+import {
+  ITDialog,
+  ITButton,
+  ITSlideToggle,
+  ITToast,
+  ITInput,
+  ITSelect,
+  ITLoader,
+  ITGrid,
+  ITStack,
+  useITTheme
+} from "../index";
+import { PRESETS } from "../components/theme-provider/themeProvider";
+import { ShowcaseLayout } from "./ShowcaseLayout";
+
+// 1. ITDialog Showcase
+export const DialogShowcase = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [useFormHeader, setUseFormHeader] = useState(true);
+
+  const code = `<ITDialog\n  isOpen={${isOpen}}\n  onClose={() => setIsOpen(false)}\n  title="Confirmación de Auditoría"\n  useFormHeader={${useFormHeader}}\n>\n  <p>¿Estás seguro de registrar esta auditoría?</p>\n</ITDialog>`;
+
+  return (
+    <ShowcaseLayout
+      title="ITDialog"
+      description="Cajas de diálogo modales con overlay oscuro y soporte de cabeceras de formulario."
+      code={code}
+      demo={
+        <div>
+          <ITButton label="Abrir Ventana Modal" color="primary" onClick={() => setIsOpen(true)} />
+          <ITDialog
+            isOpen={isOpen}
+            onClose={() => setIsOpen(false)}
+            title="Confirmación de Auditoría"
+            useFormHeader={useFormHeader}
+          >
+            <div className="p-6 space-y-4">
+              <p className="text-sm text-slate-600 dark:text-slate-300">
+                Se guardará un registro inmutable en los logs de la blockchain corporativa. Esta acción es irreversible.
+              </p>
+              <div className="flex justify-end gap-3 pt-4 border-t">
+                <ITButton label="Cancelar" variant="ghost" onClick={() => setIsOpen(false)} />
+                <ITButton label="Autorizar" color="success" onClick={() => { alert("Transacción firmada!"); setIsOpen(false); }} />
+              </div>
+            </div>
+          </ITDialog>
+        </div>
+      }
+      controls={
+        <>
+          <div className="flex items-center justify-between pt-2">
+            <span className="text-sm font-semibold text-gray-700">Usar Cabecera de Formulario</span>
+            <ITSlideToggle isOn={useFormHeader} onToggle={setUseFormHeader} size="sm" />
+          </div>
+        </>
+      }
+    />
+  );
+};
+
+// 2. ITToast Showcase
+export const ToastShowcase = () => {
+  const [visible, setVisible] = useState(false);
+  const [type, setType] = useState<any>("success");
+  const [msg, setMsg] = useState("¡La operación se procesó con éxito!");
+
+  const code = `<ITToast\n  message="${msg}"\n  type="${type}"\n  duration={3000}\n  onClose={() => setVisible(false)}\n/>`;
+
+  return (
+    <ShowcaseLayout
+      title="ITToast"
+      description="Alertas efímeras del sistema flotantes para notificar eventos inmediatos al usuario."
+      code={code}
+      demo={
+        <div>
+          <ITButton label="Lanzar Notificación" color="purple" onClick={() => setVisible(true)} />
+          {visible && (
+            <ITToast
+              message={msg}
+              type={type}
+              duration={3000}
+              onClose={() => setVisible(false)}
+            />
+          )}
+        </div>
+      }
+      controls={
+        <>
+          <ITInput name="msg_ctrl" label="Mensaje" value={msg} onChange={(e: any) => setMsg(e.target.value)} onBlur={() => { }} />
+          <ITSelect
+            name="type_ctrl"
+            label="Tipo de Notificación"
+            value={type}
+            onChange={(e: any) => setType(e.target.value)}
+            options={[
+              { label: "Success (Éxito)", value: "success" },
+              { label: "Error (Peligro)", value: "error" },
+              { label: "Warning (Advertencia)", value: "warning" },
+              { label: "Info (Información)", value: "info" }
+            ]}
+          />
+        </>
+      }
+      gallery={
+        <div className="flex flex-wrap gap-3">
+          <ITButton label="Toast Exito" color="success" size="small" onClick={() => { setMsg("Operación exitosa!"); setType("success"); setVisible(true); }} />
+          <ITButton label="Toast Error" color="danger" size="small" onClick={() => { setMsg("Ocurrió un fallo de red."); setType("error"); setVisible(true); }} />
+          <ITButton label="Toast Warning" color="warning" size="small" onClick={() => { setMsg("Licencia por expirar."); setType("warning"); setVisible(true); }} />
+          <ITButton label="Toast Info" color="info" size="small" onClick={() => { setMsg("Actualización disponible."); setType("info"); setVisible(true); }} />
+        </div>
+      }
+    />
+  );
+};
+
+// 3. ITLoader Showcase
+export const LoaderShowcase = () => {
+  const [variant, setVariant] = useState<any>("spinner");
+  const [size, setSize] = useState<any>("md");
+  const [color, setColor] = useState("primary");
+
+  const code = `<ITLoader\n  variant="${variant}"\n  size="${size}"\n  color="${color}"\n/>`;
+
+  return (
+    <ShowcaseLayout
+      title="ITLoader"
+      description="Indicadores de carga animados con soporte para múltiples estilos visuales."
+      code={code}
+      demo={
+        <div className="w-full max-w-xs flex items-center justify-center min-h-[80px]">
+          <ITLoader variant={variant} size={size} color={color} />
+        </div>
+      }
+      controls={
+        <>
+          <ITSelect
+            name="var_ctrl"
+            label="Tipo de Cargador"
+            value={variant}
+            onChange={(e: any) => setVariant(e.target.value)}
+            options={[
+              { label: "Spinner (Círculo)", value: "spinner" },
+              { label: "Dots (Puntos)", value: "dots" },
+              { label: "Bar (Barra)", value: "bar" },
+              { label: "Pulse (Pulso)", value: "pulse" }
+            ]}
+          />
+          <ITSelect
+            name="sz_ctrl"
+            label="Tamaño"
+            value={size}
+            onChange={(e: any) => setSize(e.target.value)}
+            options={[
+              { label: "Extra Small (xs)", value: "xs" },
+              { label: "Small (sm)", value: "sm" },
+              { label: "Medium (md)", value: "md" },
+              { label: "Large (lg)", value: "lg" },
+              { label: "Extra Large (xl)", value: "xl" }
+            ]}
+          />
+          <ITSelect
+            name="col_ctrl"
+            label="Color"
+            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" }
+            ]}
+          />
+        </>
+      }
+      gallery={
+        <div className="flex flex-wrap items-center gap-6">
+          <ITLoader variant="spinner" size="md" color="primary" />
+          <ITLoader variant="dots" size="md" color="success" />
+          <div className="w-32"><ITLoader variant="bar" size="md" color="danger" /></div>
+          <ITLoader variant="pulse" size="md" color="purple" />
+        </div>
+      }
+    />
+  );
+};
+
+// 4. ITThemeProvider Showcase
+export const ThemeProviderShowcase = () => {
+  const { applyPreset, resolvedTheme, darkModeMode, setDarkModeMode } = useITTheme();
+
+  const code = `// En index.tsx o App.tsx\n<ITThemeProvider>\n  <App />\n</ITThemeProvider>\n\n// En tu componente:\nconst { palette, resolvedTheme, darkModeMode, setDarkModeMode, applyPreset } = useITTheme();`;
+
+  return (
+    <ShowcaseLayout
+      title="ITThemeProvider"
+      description="Inyector dinámico de tokens CSS que gestiona el modo oscuro/claro y las paletas de colores unificadas."
+      code={code}
+      demo={
+        <ITStack spacing={5} className="w-full max-w-md">
+          <div>
+            <span className="text-xs font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-3 block">
+              Modo de Apariencia
+            </span>
+            <div className="flex flex-wrap gap-2">
+              {(["light", "dark", "system"] as const).map((mode) => (
+                <ITButton
+                  key={mode}
+                  label={mode === "light" ? "☀️ Claro" : mode === "dark" ? "🌙 Oscuro" : "💻 Sistema"}
+                  color={darkModeMode === mode ? "primary" : "secondary"}
+                  onClick={() => setDarkModeMode(mode)}
+                  size="small"
+                />
+              ))}
+            </div>
+            <p className="text-xs text-slate-500 mt-2">
+              Tema actual: <strong>{resolvedTheme === "dark" ? "Oscuro" : "Claro"}</strong>
+            </p>
+          </div>
+
+          <div>
+            <span className="text-xs font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-3 block">
+              Presets Rápidos
+            </span>
+            <ITGrid container spacing={2}>
+              {PRESETS.map((preset) => {
+                const dotColors = [preset.colors.primary, preset.colors.secondary, preset.colors.ternary, preset.colors.success];
+                return (
+                  <ITGrid key={preset.name} item xs={6}>
+                    <button
+                      onClick={() => applyPreset(preset.colors)}
+                      className="w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900/50 hover:border-slate-300 dark:hover:border-slate-600 transition-colors text-left"
+                    >
+                      <div className="flex -space-x-1">
+                        {dotColors.map((c, i) => (
+                          <span
+                            key={i}
+                            className="w-3.5 h-3.5 rounded-full border border-white dark:border-slate-800"
+                            style={{ backgroundColor: c }}
+                          />
+                        ))}
+                      </div>
+                      <span className="text-xs font-semibold text-slate-700 dark:text-slate-300 truncate">
+                        {preset.name.replace(/ [\w]+$/, "")}
+                      </span>
+                    </button>
+                  </ITGrid>
+                );
+              })}
+            </ITGrid>
+          </div>
+        </ITStack>
+      }
+      controls={
+        <ITStack spacing={3}>
+          <p className="text-xs text-slate-500">
+            Haz clic en el botón flotante de paleta 🎨 en la esquina inferior derecha para abrir el diseñador completo.
+          </p>
+          <p className="text-xs text-slate-500">
+            Allí puedes ajustar cada color, guardar temas personalizados y alternar entre modo claro/oscuro.
+          </p>
+        </ITStack>
+      }
+    />
+  );
+};