@axzydev/axzy_ui_system 1.3.6 → 1.4.0

package/src/showcases/ProductoDetalle.tsx

@@ -0,0 +1,181 @@
+import { useState } from "react";
+import { FaCheck, FaExternalLinkAlt } from "react-icons/fa";
+import ITBadget from "../components/atoms/badget/badget";
+import ITDivider from "../components/atoms/divider/divider";
+import ITFlex from "../components/atoms/flex/flex";
+import ITGrid from "../components/atoms/grid/grid";
+import ITStack from "../components/atoms/stack/stack";
+import ITText from "../components/atoms/text/text";
+import ITDialog from "../components/organisms/dialog/dialog";
+import ProductoIcono from "./ProductoIcono";
+import type { Producto } from "./productos";
+
+interface Props {
+  /** Producto que se muestra. */
+  producto: Producto;
+  /** Cierra la pantalla de detalle. */
+  onClose: () => void;
+}
+
+/**
+ * Pantalla de detalle de un producto del portafolio.
+ *
+ * Se abre a pantalla completa sobre la home: a la izquierda la galería de
+ * capturas reales (con miniaturas y pie), a la derecha la ficha del producto
+ * (qué resuelve, stack y datos técnicos).
+ *
+ * @example
+ * ```tsx
+ * {detalle && <ProductoDetalle producto={detalle} onClose={() => setDetalle(null)} />}
+ * ```
+ */
+export default function ProductoDetalle({ producto, onClose }: Props) {
+  const capturas = producto.capturas ?? [];
+  const [activa, setActiva] = useState(capturas[0]);
+  const hayGaleria = capturas.length > 0;
+
+  return (
+    <ITDialog isOpen onClose={onClose} title={producto.nombre} useFormHeader fullScreen>
+      <div className="mx-auto w-full max-w-6xl">
+        <ITGrid container spacing={8}>
+          {/* ─── Galería ─── */}
+          {hayGaleria && activa && (
+            <ITGrid item xs={12} lg={7}>
+              <ITStack spacing={3}>
+                <div className="overflow-hidden rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950/60">
+                  <img
+                    src={activa.src}
+                    alt={`${producto.nombre}: ${activa.titulo}`}
+                    className="block w-full"
+                  />
+                </div>
+
+                <ITFlex gap={2} wrap="wrap">
+                  {capturas.map((captura) => (
+                    <button
+                      key={captura.src}
+                      type="button"
+                      title={captura.titulo}
+                      aria-label={captura.titulo}
+                      onClick={() => setActiva(captura)}
+                      className={`h-14 w-20 shrink-0 overflow-hidden rounded-lg border-2 bg-slate-100 dark:bg-slate-950 transition-all ${
+                        activa.src === captura.src
+                          ? "border-primary-500 opacity-100"
+                          : "border-transparent opacity-55 hover:opacity-100"
+                      }`}
+                    >
+                      <img src={captura.src} alt="" className="h-full w-full object-cover object-top" />
+                    </button>
+                  ))}
+                </ITFlex>
+
+                <ITText as="p" muted className="!text-xs">
+                  {activa.titulo}
+                </ITText>
+              </ITStack>
+            </ITGrid>
+          )}
+
+          {/* ─── Ficha ─── */}
+          <ITGrid item xs={12} lg={hayGaleria ? 5 : 12}>
+            <ITStack spacing={5}>
+              <ITFlex align="center" justify="between" gap={3}>
+                <ITFlex align="center" gap={3}>
+                  <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${producto.gradiente} text-white flex items-center justify-center shadow-md shrink-0`}>
+                    <ProductoIcono icono={producto.icono} size={20} />
+                  </div>
+                  <ITText as="h2" className="!text-xl !font-bold">
+                    {producto.nombre}
+                  </ITText>
+                </ITFlex>
+                <ITBadget label={producto.tipo} color="primary" variant="outlined" />
+              </ITFlex>
+
+              {producto.detalle && (
+                <ITText as="p" muted className="!text-sm !leading-relaxed">
+                  {producto.detalle}
+                </ITText>
+              )}
+
+              {!!producto.caracteristicas?.length && (
+                <div>
+                  <ITText as="h3" className="!text-sm !font-bold !mb-2.5">
+                    Qué resuelve
+                  </ITText>
+                  <ITStack spacing={2}>
+                    {producto.caracteristicas.map((caracteristica) => (
+                      <ITFlex key={caracteristica} align="start" gap={2}>
+                        <FaCheck size={11} className="mt-1 shrink-0 text-emerald-500" />
+                        <ITText as="span" muted className="!text-xs !leading-relaxed">
+                          {caracteristica}
+                        </ITText>
+                      </ITFlex>
+                    ))}
+                  </ITStack>
+                </div>
+              )}
+
+              <div>
+                <ITText as="h3" className="!text-sm !font-bold !mb-2.5">
+                  Stack
+                </ITText>
+                <ITFlex gap={2} wrap="wrap">
+                  {producto.stack.map((tecnologia) => (
+                    <ITBadget key={tecnologia} label={tecnologia} color="gray" variant="outlined" />
+                  ))}
+                </ITFlex>
+              </div>
+
+              {!!producto.ficha?.length && (
+                <>
+                  <ITDivider />
+
+                  <div>
+                    <ITText as="h3" className="!text-sm !font-bold !mb-2.5">
+                      Ficha técnica
+                    </ITText>
+                    <ITStack spacing={2.5}>
+                      {producto.ficha.map((dato) => (
+                        <ITGrid container spacing={2} key={dato.etiqueta}>
+                          <ITGrid item xs={4}>
+                            <ITText as="span" muted className="!text-xs !font-semibold">
+                              {dato.etiqueta}
+                            </ITText>
+                          </ITGrid>
+                          <ITGrid item xs={8}>
+                            <ITText as="span" className="!text-xs !leading-relaxed">
+                              {dato.valor}
+                            </ITText>
+                          </ITGrid>
+                        </ITGrid>
+                      ))}
+                    </ITStack>
+                  </div>
+                </>
+              )}
+
+              {producto.enlace && (
+                <a
+                  href={producto.enlace}
+                  {...(producto.enlace.startsWith("#")
+                    ? {}
+                    : { target: "_blank", rel: "noopener noreferrer" })}
+                  className="!text-xs !font-semibold !text-primary-600 dark:!text-primary-400 inline-flex items-center gap-1.5"
+                >
+                  {!producto.enlace.startsWith("#") && <FaExternalLinkAlt size={11} />}
+                  {producto.enlaceTexto ?? "Ver el repositorio"}
+                </a>
+              )}
+
+              {producto.nota && (
+                <ITText as="p" muted className="!text-[11px] !leading-relaxed">
+                  {producto.nota}
+                </ITText>
+              )}
+            </ITStack>
+          </ITGrid>
+        </ITGrid>
+      </div>
+    </ITDialog>
+  );
+}

package/src/showcases/ProductoIcono.tsx

@@ -0,0 +1,25 @@
+import { FaCheck, FaDesktop, FaLayerGroup, FaTerminal } from "react-icons/fa";
+import type { Producto } from "./productos";
+
+/**
+ * Ícono de un producto del portafolio.
+ *
+ * @example
+ * ```tsx
+ * <ProductoIcono icono="terminal" size={16} />
+ * ```
+ */
+export default function ProductoIcono({
+  icono,
+  size = 18,
+}: {
+  /** Ícono declarado en los datos del producto. */
+  icono: Producto["icono"];
+  /** Tamaño en px. @default 18 */
+  size?: number;
+}) {
+  if (icono === "terminal") return <FaTerminal size={size} />;
+  if (icono === "layers") return <FaLayerGroup size={size} />;
+  if (icono === "check") return <FaCheck size={size} />;
+  return <FaDesktop size={size} />;
+}

package/src/showcases/productos.ts

@@ -0,0 +1,179 @@
+/**
+ * Productos propios que se muestran en «Mis Productos» del portafolio
+ * (`HomeShowcase`), con su pantalla de detalle (`ProductoDetalle`).
+ *
+ * La tarjeta muestra solo lo esencial (portada, nombre, una descripción corta y
+ * el stack); lo demás vive en el detalle. Los productos con `capturas` abren
+ * esa pantalla y las imágenes salen de `public/productos/`, tomadas de las apps
+ * reales (ver `scripts/capturas/README.md`).
+ */
+
+/** Una pantalla del producto, con el texto que la describe. */
+export interface CapturaProducto {
+  /** Ruta pública de la imagen. */
+  src: string;
+  /** Qué muestra esa pantalla (se usa como pie en la pantalla de detalle). */
+  titulo: string;
+}
+
+/** Fila de la ficha técnica: etiqueta y valor. */
+export interface DatoTecnico {
+  /** Nombre del dato (p. ej. «Plataformas»). */
+  etiqueta: string;
+  /** Valor del dato. */
+  valor: string;
+}
+
+/** Producto del portafolio. */
+export interface Producto {
+  /** Identificador estable (clave de React y ancla). */
+  id: string;
+  /** Nombre del producto. */
+  nombre: string;
+  /** Etiqueta corta: tipo de producto. */
+  tipo: string;
+  /** Descripción corta, para la tarjeta. */
+  descripcion: string;
+  /** Descripción larga, para la pantalla de detalle. */
+  detalle?: string;
+  /** Qué resuelve, en puntos (solo en el detalle). */
+  caracteristicas?: string[];
+  /** Tecnologías principales (se muestran en la tarjeta). */
+  stack: string[];
+  /** Datos técnicos, solo en el detalle. */
+  ficha?: DatoTecnico[];
+  /** Enlace público. Se omite en productos cuyo repositorio no es público. */
+  enlace?: string;
+  /** Texto del enlace. */
+  enlaceTexto?: string;
+  /** Nota al pie del detalle (p. ej. de dónde salen las capturas). */
+  nota?: string;
+  /** Clases Tailwind del degradado (literales, para que Tailwind las vea). */
+  gradiente: string;
+  /** Ícono del producto. */
+  icono: "desktop" | "terminal" | "layers" | "check";
+  /** Capturas de la app real. Sin capturas no hay pantalla de detalle. */
+  capturas?: CapturaProducto[];
+}
+
+export const PRODUCTOS: Producto[] = [
+  {
+    id: "axzy-ui-system",
+    nombre: "AXZY UI System",
+    tipo: "Librería",
+    descripcion:
+      "Librería de componentes React con Tailwind CSS v4. Más de 50 componentes enterprise con theming en runtime, TypeScript nativo y accesibilidad.",
+    stack: ["React", "TypeScript", "Tailwind CSS v4", "npm"],
+    enlace: "#ui-system",
+    enlaceTexto: "Ver proyecto",
+    gradiente: "from-primary-500 to-purple-500",
+    icono: "layers",
+  },
+  {
+    id: "checkapp",
+    nombre: "CheckApp",
+    tipo: "App web",
+    descripcion:
+      "Panel administrativo para la operación de seguridad: clientes, guardias, puntos de control con QR, rondas, incidencias y mantenimiento, con analítica de desempeño.",
+    detalle:
+      "Cubre la operación diaria de una empresa de seguridad: alta de clientes con sus ubicaciones, puntos de control con QR —se imprimen en lote por cliente y zona—, asignación de guardias, rutas programadas y supervisión de las rondas. Cada recorrido queda registrado con su cronología, y sobre esos datos se calcula la analítica de desempeño por rango de fechas: eventos e incidencias, puntos escaneados, rondas incompletas y puntos omitidos. Suma kardex, mantenimiento, incidencias y la configuración del sistema.",
+    caracteristicas: [
+      "Directorio de clientes con sus ubicaciones, contactos y estados (activos e inactivos).",
+      "Puntos de control con QR: impresión masiva filtrando por cliente y zona.",
+      "Supervisión de rondas: filtros por cliente, guardia y fecha, con la cronología de cada recorrido y su estado.",
+      "Analítica de seguridad: eventos/incidencias, puntos escaneados, rondas incompletas y puntos omitidos.",
+      "Módulos de guardias, rutas programadas, incidencias, kardex, mantenimiento, usuarios y configuración.",
+    ],
+    stack: ["Node.js", "React", "Deploy"],
+    ficha: [
+      { etiqueta: "Módulos", valor: "Inicio, clientes, guardias, ubicaciones, rutas, rondas, incidencias, kardex, mantenimiento, programación, usuarios y sistema" },
+      { etiqueta: "Puntos de control", valor: "Cada ubicación tiene su QR, con impresión masiva por cliente y zona" },
+      { etiqueta: "Supervisión", valor: "Historial de rondas con cronología por guardia y estado (activas / historial)" },
+      { etiqueta: "Analítica", valor: "Eventos, puntos escaneados, rondas incompletas y puntos omitidos por rango de fechas" },
+      { etiqueta: "Acceso", valor: "Login con sesión y usuario administrador" },
+      { etiqueta: "Estado", valor: "En línea en checkapp.axzy.dev" },
+    ],
+    nota: "Capturas del panel en línea: analítica de seguridad, historial de rondas e impresión de QRs.",
+    enlace: "https://checkapp.axzy.dev/",
+    enlaceTexto: "Abrir CheckApp",
+    gradiente: "from-emerald-500 to-cyan-500",
+    icono: "check",
+    capturas: [
+      { src: "/productos/checkapp-analitica.webp", titulo: "Analítica de seguridad: indicadores y gráficas por rango de fechas" },
+      { src: "/productos/checkapp-rondas.webp", titulo: "Historial de rondas: cronología, estado y control por guardia" },
+      { src: "/productos/checkapp-qrs.webp", titulo: "Impresión masiva de QRs de los puntos de control" },
+    ],
+  },
+  {
+    id: "agente-puerto-nuevo",
+    nombre: "Agente Puerto Nuevo",
+    tipo: "App de escritorio",
+    descripcion:
+      "App de escritorio que instala, actualiza y respalda Puerto Nuevo con clics: revisa Git y Docker, arma el .env y vigila el sistema desde la bandeja.",
+    detalle:
+      "Acompaña al sistema Puerto Nuevo en la computadora del cliente. En la primera ejecución revisa que estén Git, Docker, Docker Compose y curl (y WSL en Windows), avisa qué descargar si falta algo, baja el repositorio, genera el .env con las claves y corre la instalación mostrando el avance paso a paso. Después queda en la bandeja del sistema: si el API deja de responder avisa, y si el equipo arrancó con la sesión lo reinicia solo. Está pensada para gente que no usa la terminal.",
+    caracteristicas: [
+      "Asistente de 4 pasos: herramientas, descarga, configuración e instalación.",
+      "Panel con actualizar, abrir la web, direcciones de red con QR y espacio en disco.",
+      "Bandeja del sistema con el estado en vivo (/api/v1/health cada 15 s) y arranque con la sesión.",
+      "Respaldos de la base de datos y paquete de soporte en un .zip.",
+      "Instaladores .exe, .dmg y .AppImage; los pasos viven en los scripts del repo, así que un git pull los actualiza sin reinstalar la app.",
+    ],
+    stack: ["Electron", "React", "TypeScript", "Tailwind CSS v4", "AXZY UI System"],
+    ficha: [
+      { etiqueta: "Plataformas", valor: "Windows, macOS y Linux" },
+      { etiqueta: "Instaladores", valor: ".exe (NSIS x64), .dmg (arm64 y x64) y .AppImage (x64)" },
+      { etiqueta: "Versión", valor: "1.1.0" },
+      { etiqueta: "Base", valor: "Electron + React 19 + Tailwind CSS v4" },
+      { etiqueta: "Interfaz", valor: "Componentes de AXZY UI System" },
+      { etiqueta: "Monitoreo", valor: "Consulta /api/v1/health cada 15 s desde la bandeja" },
+      { etiqueta: "Lógica", valor: "Scripts del repo (actualizar.sh, respaldar.sh, operar.sh): un git pull actualiza los pasos" },
+      { etiqueta: "Alcance", valor: "Instalación, actualización, respaldos, relojes checadores y soporte" },
+    ],
+    nota: "Capturas de la aplicación en ejecución: el asistente de instalación, el panel de inicio y los ajustes.",
+    gradiente: "from-primary-500 to-cyan-500",
+    icono: "desktop",
+    capturas: [
+      { src: "/productos/agente-asistente.webp", titulo: "Asistente: revisa las herramientas y dice qué falta" },
+      { src: "/productos/agente-inicio.webp", titulo: "Inicio: actualizar, abrir la web y direcciones de red" },
+      { src: "/productos/agente-ajustes.webp", titulo: "Ajustes: herramientas, configuración y soporte" },
+    ],
+  },
+  {
+    id: "axzy-http-cli",
+    nombre: "axzy",
+    tipo: "CLI + TUI",
+    descripcion:
+      "Cliente HTTP para la terminal: una alternativa a Postman que guarda los requests como YAML versionable. Un binario en Rust con TUI y comandos para CI.",
+    detalle:
+      "Pensado para vivir en la terminal, al lado del código. Cada request es un archivo YAML dentro de .http/, así que se versiona en git y se revisa como cualquier otro archivo; la TUI de tres paneles sirve para explorar, editar y ejecutar, y los mismos comandos funcionan en CI: si un assert falla, el proceso termina con exit code 1. Es un único binario en Rust, sin runtime ni dependencias extra.",
+    caracteristicas: [
+      "Requests en YAML dentro de .http/, uno por archivo y organizados en carpetas: se revisan en git como cualquier código.",
+      "Ambientes con variables {{var}} y secretos guardados en el keychain del sistema.",
+      "Asserts, capturas con JSONPath y runner de carpetas; exit code 1 si algo falla, ideal para CI.",
+      "Import desde Swagger/OpenAPI (incluso desde la página de Swagger UI), Postman, Insomnia y curl.",
+      "TUI de tres paneles (Collections · Request · Response) con navegación estilo vim y 9 temas.",
+    ],
+    stack: ["Rust", "ratatui", "crossterm", "reqwest", "GitHub Actions"],
+    ficha: [
+      { etiqueta: "Binario", valor: "Único, en Rust (rust-version 1.88)" },
+      { etiqueta: "Instalación", valor: "curl | sh, PowerShell o cargo install" },
+      { etiqueta: "Requests", valor: "YAML en .http/, uno por archivo" },
+      { etiqueta: "Ambientes", valor: "Variables {{var}} y secretos en el keychain del sistema" },
+      { etiqueta: "TUI", valor: "ratatui + crossterm: 3 paneles, comandos estilo vim y 9 temas" },
+      { etiqueta: "CI", valor: "Runner de carpetas con exit code 1 si un assert falla" },
+      { etiqueta: "Import", valor: "Swagger/OpenAPI, Postman, Insomnia y curl" },
+      { etiqueta: "Licencia", valor: "MIT" },
+    ],
+    nota: "Capturas de la TUI y la CLI reales, ejecutando un request contra una API local.",
+    enlace: "https://github.com/maag070208/AXZY_HTTP_CLIENT_TERMINAL",
+    enlaceTexto: "Ver el repositorio",
+    gradiente: "from-purple-500 to-fuchsia-500",
+    icono: "terminal",
+    capturas: [
+      { src: "/productos/axzy-tui.webp", titulo: "TUI: colección, request y respuesta JSON en tres paneles" },
+      { src: "/productos/axzy-auth.webp", titulo: "Auth y respuesta en la misma pantalla" },
+      { src: "/productos/axzy-cli.webp", titulo: "CLI: corre el request y reporta cada assert" },
+    ],
+  },
+];

package/src/showcases/techIcons.ts

@@ -0,0 +1,67 @@
+/**
+ * Local SVG icons for the portfolio tech grids.
+ *
+ * Every icon lives in `public/tech-icons/` (fetched from the Devicon set) so
+ * the page never depends on third-party CDNs at runtime. Reference icons
+ * through {@link techIcon} instead of hardcoding URLs, so a missing asset is a
+ * type error rather than a broken image.
+ *
+ * @example
+ * ```tsx
+ * const icon = techIcon("typescript");
+ * <img src={icon.src} alt="TypeScript" className={icon.mono ? "dark:invert" : ""} />
+ * ```
+ */
+
+/** A tech icon: its public URL plus presentation hints. */
+export interface TechIconEntry {
+  /** Public path of the SVG asset. */
+  src: string;
+  /**
+   * True for monochrome marks (GitHub, Express). The showcase inverts them in
+   * dark mode, where a black glyph would disappear on the dark card.
+   */
+  mono?: boolean;
+}
+
+const ICONS = {
+  // Languages
+  typescript: { src: "/tech-icons/typescript.svg" },
+  javascript: { src: "/tech-icons/javascript.svg" },
+  csharp: { src: "/tech-icons/csharp.svg" },
+  python: { src: "/tech-icons/python.svg" },
+  kotlin: { src: "/tech-icons/kotlin.svg" },
+  dart: { src: "/tech-icons/dart.svg" },
+  // Frameworks & runtimes
+  angular: { src: "/tech-icons/angular.svg" },
+  react: { src: "/tech-icons/react.svg" },
+  ionic: { src: "/tech-icons/ionic.svg" },
+  dotnet: { src: "/tech-icons/dotnet.svg" },
+  nodejs: { src: "/tech-icons/nodejs.svg" },
+  flutter: { src: "/tech-icons/flutter.svg" },
+  express: { src: "/tech-icons/express.svg", mono: true },
+  electron: { src: "/tech-icons/electron.svg" },
+  redux: { src: "/tech-icons/redux.svg" },
+  // Markup, styles & data
+  html5: { src: "/tech-icons/html5.svg" },
+  css3: { src: "/tech-icons/css3.svg" },
+  sass: { src: "/tech-icons/sass.svg" },
+  mongodb: { src: "/tech-icons/mongodb.svg" },
+  mysql: { src: "/tech-icons/mysql.svg" },
+  // Mobile & platform
+  android: { src: "/tech-icons/android.svg" },
+  // Tooling & DevOps
+  docker: { src: "/tech-icons/docker.svg" },
+  git: { src: "/tech-icons/git.svg" },
+  github: { src: "/tech-icons/github.svg", mono: true },
+  gitlab: { src: "/tech-icons/gitlab.svg" },
+  npm: { src: "/tech-icons/npm.svg" },
+  visualstudio: { src: "/tech-icons/visualstudio.svg" },
+  jest: { src: "/tech-icons/jest.svg" },
+} as const satisfies Record<string, TechIconEntry>;
+
+/** Name of an available local tech icon. */
+export type TechIconName = keyof typeof ICONS;
+
+/** Resolves a tech icon name to its local asset descriptor. */
+export const techIcon = (name: TechIconName): TechIconEntry => ICONS[name];