@axzydev/axzy_ui_system 1.5.3 → 1.7.0

package/src/showcases/FeedbackShowcases.tsx

@@ -15,6 +15,7 @@ import {
 import { PRESETS } from "../components/theme-provider/themePresets";
 import { ShowcaseLayout } from "./ShowcaseLayout";
 import { useITTranslation } from "@/i18n";
+import { AxzyLoader, AxzyLogo } from "@/sandbox/AxzyLogo";
 
 // 1. ITDialog Showcase
 export const DialogShowcase = () => {
@@ -237,11 +238,21 @@ export const LoaderShowcase = () => {
         </>
       }
       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 className="space-y-6">
+          <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>
+
+          {/* Loader de marca: el ícono axzydev con un latido suave. En el kit la
+              versión animada es Lottie; aquí se usa el SVG estático. */}
+          <div className="flex flex-wrap items-center gap-8 border-t border-slate-200 pt-6 dark:border-slate-800">
+            <AxzyLoader etiqueta={t("sandbox.loading")} />
+            <AxzyLoader etiqueta={t("sandbox.loading")} tamano={24} />
+            <AxzyLogo variante="loader" tamano={56} etiqueta="axzydev" />
+          </div>
         </div>
       }
       doc={{

package/src/showcases/HomeShowcase.tsx

@@ -27,6 +27,7 @@ import {
   VolverArriba,
 } from "./portfolioUi";
 import { useITTranslation } from "@/i18n";
+import { AxzyLogo } from "@/sandbox/AxzyLogo";
 
 const CV_URL = "/Martin_Amaro_CV_ES_2026.pdf";
 const GITHUB_URL = "https://github.com/maag070208";
@@ -125,9 +126,7 @@ const PortfolioNav = () => {
       <nav aria-label={t("showcase.home.sectionNav")} className={HOJA}>
         <div className="flex h-14 items-center gap-4">
           <a href="#sobre-mi" className="flex items-center gap-2.5">
-            <span className="grid h-6 w-6 place-items-center rounded-[6px] bg-primary-700 font-mono !text-[10px] !font-bold text-white">
-              AA
-            </span>
+            <AxzyLogo variante="icono" tamano={24} />
             <ITText
               as="span"
               className="hidden font-display !text-[13px] !font-bold -tracking-[0.01em] text-slate-900 dark:text-white sm:block"
@@ -441,6 +440,10 @@ export const HomeShowcase = () => {
               </a>
             </ITFlex>
 
+            <ITFlex align="center" className="it-reveal !mt-8">
+              <AxzyLogo variante="wordmark" tamano={300} />
+            </ITFlex>
+
             <div className="mt-10 grid gap-10 lg:grid-cols-[minmax(0,1fr)_auto] lg:gap-14">
               <div className="min-w-0">
                 <ITText
@@ -783,12 +786,16 @@ export const HomeShowcase = () => {
         <div
           className={`${HOJA} flex flex-col items-start justify-between gap-3 py-7 sm:flex-row sm:items-center`}
         >
-          <ITText
-            as="p"
-            className="font-mono !text-[11px] uppercase !tracking-[0.14em] text-slate-500 dark:text-slate-400"
-          >
-            {`Asael Amaro · ${t("showcase.home.role")}`}
-          </ITText>
+          <div className="flex items-center gap-4">
+            <AxzyLogo variante="wordmark" tamano={190} />
+            <span aria-hidden="true" className="h-8 w-px bg-slate-200 dark:bg-slate-800" />
+            <ITText
+              as="p"
+              className="font-mono !text-[11px] uppercase !tracking-[0.14em] text-slate-500 dark:text-slate-400"
+            >
+              {`Asael Amaro · ${t("showcase.home.role")}`}
+            </ITText>
+          </div>
           <div className="flex flex-wrap items-center gap-x-5 gap-y-2">
             <ITText
               as="span"

package/src/showcases/JsonEditorShowcase.tsx

@@ -0,0 +1,150 @@
+import React, { useMemo, useState } from "react";
+import { ITCard, ITJSONEditor, ITFlex } from "../index";
+import { ShowcaseLayout } from "./ShowcaseLayout";
+
+/** Documento de arranque de la demo. */
+const initial = `[
+  {
+    "type": "card",
+    "props": { "title": "Demo JSON Editor" },
+    "children": [
+      { "type": "text", "text": "Edita este JSON y mira el preview" },
+      { "type": "button", "props": { "label": "Aceptar" } }
+    ]
+  }
+]`;
+
+export const JsonEditorShowcase: React.FC = () => {
+  const [value, setValue] = useState(initial);
+
+  /** Un documento más grande para que luzcan el plegado y el árbol. */
+  const bigDocument = useMemo(
+    () =>
+      JSON.stringify(
+        {
+          app: "axzy-ui-system",
+          version: "1.6.0",
+          layers: {
+            atoms: ["button", "input", "text", "flex", "grid", "stack"],
+            molecules: ["card", "alert", "table", "json-editor"],
+            organisms: ["data-table", "dialog", "sidebar", "navbar"],
+          },
+          flags: { darkMode: true, i18n: true, a11y: true, treeView: true },
+          limits: { maxDepth: 12, maxNodes: 5000, timeout: null },
+        },
+        null,
+        2
+      ),
+    []
+  );
+
+  const code = `<ITJSONEditor
+  value={json}
+  onChange={setJson}
+  onParse={handleParse}
+  mode="text"          // "text" | "tree"
+  indentSize={2}       // 0 | 2 | 4 | 8
+  height={420}
+  showToolbar
+  showViewSettings
+  showValidation
+  showStatusBar
+  showFoldGutter
+  showLineNumbers
+/>`;
+
+  return (
+    <ShowcaseLayout
+      title="ITJSONEditor"
+      description="Editor JSON con resaltado, gutter plegable, errores por línea/columna y árbol navegable. Sin dependencias nuevas."
+      demo={
+        <ITFlex direction="column" gap={4} className="w-full">
+          <ITJSONEditor id="json-editor-demo" value={value} onChange={setValue} height={420} indentSize={2} />
+        </ITFlex>
+      }
+      gallery={
+        <ITFlex direction="column" gap={4} className="w-full">
+          <ITCard title="Vista de árbol (mode=&quot;tree&quot;)">
+            <ITJSONEditor
+              value={bigDocument}
+              readOnly
+              mode="tree"
+              treeShowLines
+              height={320}
+              showToolbar={false}
+              showViewSettings={false}
+            />
+          </ITCard>
+          <ITCard title="Documento grande con plegado">
+            <ITJSONEditor value={bigDocument} onChange={() => undefined} height={320} />
+          </ITCard>
+          <ITCard title="Lienzo claro y ajuste de línea (canvasTheme=&quot;light&quot;, wrapLines)">
+            <ITJSONEditor
+              value={bigDocument}
+              readOnly
+              canvasTheme="light"
+              wrapLines
+              height={260}
+              showTransformActions={false}
+              showImportButton={false}
+            />
+          </ITCard>
+          <ITCard title="Estado de error: línea y columna señaladas">
+            <ITJSONEditor
+              value={'{\n  "a": 1,\n  "b": ,\n  "c": 3\n}'}
+              height={220}
+              showStatusBar
+            />
+          </ITCard>
+        </ITFlex>
+      }
+      code={code}
+      doc={{
+        summary: "Editor JSON para prototipar con ITJsonRenderer",
+        description:
+          "El resaltado se pinta en una capa bajo un textarea nativo, así que conserva el deshacer del navegador y no añade dependencias. Valida con JSON.parse y traduce el error a línea y columna.",
+        examples: [
+          '<ITJSONEditor value={json} onChange={setJson} />',
+          '<ITJSONEditor value={json} mode="tree" treeShowLines />',
+          '<ITJSONEditor value={json} indentSize={4} wrapLines canvasTheme="light" />',
+          '<ITJSONEditor value={json} readOnly showToolbar={false} height="100%" />',
+        ],
+        props: [
+          { name: "value", type: "string", default: '""', description: "Documento JSON como cadena." },
+          { name: "onChange", type: "(v: string) => void", default: "—", description: "Se dispara con el texto completo en cada cambio." },
+          { name: "onParse", type: "(parsed, isValid, error?) => void", default: "—", description: "Valor parseado y estado tras cada validación." },
+          { name: "mode", type: '"text" | "tree"', default: '"text"', description: "Modo inicial del lienzo." },
+          { name: "showModeSwitch", type: "boolean", default: "true", description: "Conmutador texto/árbol en la barra." },
+          { name: "showToolbar", type: "boolean", default: "true", description: "Barra superior de acciones." },
+          { name: "showViewSettings", type: "boolean", default: "true", description: "Fila de ajustes de vista." },
+          { name: "showValidation", type: "boolean", default: "true", description: "Indicador válido/ inválido con L:C." },
+          { name: "showStatusBar", type: "boolean", default: "true", description: "Pie con líneas, nodos, profundidad y tamaño." },
+          { name: "showLineNumbers", type: "boolean", default: "true", description: "Números de línea en el gutter." },
+          { name: "showFoldGutter", type: "boolean", default: "true", description: "Gutter de plegado de bloques." },
+          { name: "showTransformActions", type: "boolean", default: "true", description: "Formatear, minificar, ordenar, escapar." },
+          { name: "showCopyButton", type: "boolean", default: "true", description: "Botón de copiar el documento." },
+          { name: "showImportButton", type: "boolean", default: "true", description: "Carga de un archivo .json." },
+          { name: "showDownloadButton", type: "boolean", default: "true", description: "Descarga del documento." },
+          { name: "indentSize", type: "number", default: "2", description: "Espacios por nivel (0, 2, 4 u 8)." },
+          { name: "wrapLines", type: "boolean", default: "false", description: "Ajuste de línea dentro del ancho." },
+          { name: "treeShowLines", type: "boolean", default: "false", description: "Muestra la línea de cada nodo y permite saltar." },
+          { name: "canvasTheme", type: '"ink" | "light"', default: '"ink"', description: "Paleta del lienzo de código." },
+          { name: "height", type: "number | string", default: "340", description: "Alto del área de edición." },
+          { name: "readOnly", type: "boolean", default: "false", description: "Solo lectura, sin acciones de edición." },
+          { name: "actions", type: "ReactNode", default: "—", description: "Acciones propias al final de la barra." },
+          { name: "className", type: "string", default: "—", description: "Clases del contenedor raíz." },
+          { name: "textareaClassName", type: "string", default: "—", description: "Clases extra del textarea." },
+          { name: "errorLine", type: "number", default: "—", description: "Línea a marcar como errónea desde fuera." },
+        ],
+        notes: [
+          "Atajos: Tab indenta el bloque, Mayús+Tab lo desangra, Mayús+Alt+F formatea, +M minifica y +S ordena.",
+          "Las llaves, corchetes y comillas se cierran solos y se borran por parejas.",
+          "Con wrapLines activo el resaltado de línea vigente se desactiva: la posición dependería de las vueltas de cada línea.",
+          "Es totalmente independiente de ITJsonRenderer: los une solo el JSON que tú les pases.",
+        ],
+      }}
+    />
+  );
+};
+
+export default JsonEditorShowcase;

package/src/showcases/JsonRendererShowcase.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import { ITCard, ITJsonRenderer } from "../index";
+import { ShowcaseLayout } from "./ShowcaseLayout";
+
+const exampleWithChildren = [
+  {
+    type: "alert" as const,
+    props: { variant: "info" as const, title: "Información" },
+    text: "Esto se renderiza desde JSON",
+  },
+  {
+    type: "card" as const,
+    props: { title: "Tarjeta desde JSON" },
+    children: [
+      { type: "text" as const, text: "Contenido dentro de la tarjeta" },
+      {
+        type: "flex" as const,
+        props: { gap: 2, justify: "end" as const },
+        children: [
+          { type: "button" as const, props: { label: "Cancelar", color: "gray" as const, variant: "outlined" as const } },
+          { type: "button" as const, props: { label: "Aceptar", color: "primary" as const } },
+        ],
+      },
+    ],
+  },
+];
+
+export const JsonRendererShowcase: React.FC = () => {
+  const [jsonText, setJsonText] = useState(JSON.stringify(exampleWithChildren, null, 2));
+
+  let parsed: any = exampleWithChildren;
+  try {
+    parsed = JSON.parse(jsonText);
+  } catch {
+    parsed = exampleWithChildren;
+  }
+
+  return (
+    <ShowcaseLayout
+      title="ITJsonRenderer"
+      description="Renderiza componentes del UI System a partir de un JSON."
+      doc={{
+        summary: "PoC: Builder JSON para AXZY UI System",
+        description:
+          "Permite construir interfaces pasándole un árbol JSON con type, props, children/text.",
+        examples: [
+          '<ITJsonRenderer json={{ type: "button", props: { label: "Click" } }} />',
+        ],
+        props: [],
+      }}
+      demo={
+        <ITCard title="Preview">
+          <ITJsonRenderer json={parsed} />
+        </ITCard>
+      }
+      code={jsonText}
+      controls={
+        <ITCard title="JSON Editor (editable)">
+          <textarea
+            value={jsonText}
+            onChange={(e) => setJsonText(e.target.value)}
+            className="w-full h-64 font-mono text-sm border rounded p-3"
+          />
+        </ITCard>
+      }
+    />
+  );
+};
+
+export default JsonRendererShowcase;

package/src/showcases/StructureShowcases.tsx

@@ -37,6 +37,7 @@ import type { ITSidebarProps } from "../index";
 import { ShowcaseLayout, CodeViewer } from "./ShowcaseLayout";
 import { EjemploContenedor } from "@/sandbox/ui";
 import { useITTranslation } from "@/i18n";
+import { AxzyLogo } from "@/sandbox/AxzyLogo";
 
 // ─────────────────────────────────────────
 // 1. ITCard Showcase
@@ -972,7 +973,7 @@ export const LayoutShowcase = () => {
   const [navActiveId, setNavActiveId] = useState<string | null>("1");
 
   const topBar = {
-    logo: <div className="w-9 h-9 rounded-lg bg-primary-500 flex items-center justify-center text-white font-bold">A</div>,
+    logo: <AxzyLogo variante="icono" tamano={36} etiqueta="" />,
     logoText: "AXZY Console",
     centerContent: (
       <input
@@ -1155,6 +1156,7 @@ export const LayoutShowcase = () => {
             numero="02"
             titulo={t("showcase.structure.galleryNavbarStandalone")}
             codigo={`<ITNavbar
+  logo={<AxzyLogo variante="icono" tamano={28} etiqueta="" />}
   logoText="AXZY"
   navigationItems={[
     { id: "1", label: "Inicio", icon: <FaHome />, isActive: true },
@@ -1169,6 +1171,7 @@ export const LayoutShowcase = () => {
           >
             <div className="h-[380px] overflow-hidden [&>div]:!h-full">
               <ITNavbar
+                logo={<AxzyLogo variante="icono" tamano={28} etiqueta="" />}
                 logoText="AXZY"
                 navigationItems={navbarItems}
                 userMenu={{
@@ -1197,6 +1200,7 @@ export const LayoutShowcase = () => {
             numero="03"
             titulo={t("showcase.structure.galleryNavbarSubmenus")}
             codigo={`<ITNavbar
+  logo={<AxzyLogo variante="icono" tamano={28} etiqueta="" />}
   logoText="Admin"
   navigationItems={[
     { id: "u", label: "Usuarios", icon: <FaUsers /> },
@@ -1215,6 +1219,7 @@ export const LayoutShowcase = () => {
           >
             <div className="h-[380px] overflow-hidden [&>div]:!h-full">
               <ITNavbar
+                logo={<AxzyLogo variante="icono" tamano={28} etiqueta="" />}
                 logoText="Admin"
                 navigationItems={[
                   { id: "u", label: t("showcase.structure.navUsers"), icon: <FaUsers /> },
@@ -1304,7 +1309,7 @@ export const LayoutShowcase = () => {
           { name: "children", type: "React.ReactNode", required: true, description: "Contenido principal." },
           { name: "className", type: "string", description: "Clases del wrapper externo." },
           { name: "contentClassName", type: "string", description: "Clases del contenedor de contenido." },
-          { name: "sidebar.header", type: "React.ReactNode", description: "Slot opcional sobre la navegación (ej. wordmark o filtro). Oculto al colapsar." },
+          { name: "sidebar.header", type: "React.ReactNode", description: "Slot opcional sobre la navegación (ej. wordmark o filtro). Oculto al colapsar, pero reserva su altura." },
           { name: "sidebar.notification", type: "ITSidebarNotification", description: "Fila de notificación (icono + label + ITBadget) sobre la navegación: { count, icon?, label?, onClick?, badgeProps? }. Visible también al colapsar." },
           { name: "sidebar.navigationItems[].badge", type: "number | string", description: "Contador que se renderiza con ITBadget en el ítem." },
           { name: "sidebar.navigationItems[].badgeProps", type: "ITBadgetProps", description: "Estilo del badge del ítem (color, size, variant, className para padding)." },
@@ -1312,9 +1317,10 @@ export const LayoutShowcase = () => {
         notes: [
           "`subitems` acepta entradas planas o grupos con `label`+`items`; el título del grupo no es foco ni un tercer nivel y cada grupo se nombra por `aria-labelledby`. En el riel colapsado el flyout aplana los grupos (sin títulos).",
           "El sidebar hereda aria-current/aria-expanded y acepta un slot header opcional.",
-          "Los badges por ítem (`badge` + `badgeProps`) y la fila `notification` se dibujan con el átomo `ITBadget`; el padding se ajusta con `badgeProps.className`.",
+          "Los badges por ítem (`badge` + `badgeProps`) y la fila `notification` se dibujan con el átomo `ITBadget`; el padding se ajusta con `badgeProps.className`. `badge` es un contador: en el riel colapsado solo caben ≤3 caracteres y un texto largo se degrada a un punto.",
           "Con `sidebar.isCollapsed` omitido el contenido reserva 88px (hover expande sobre el contenido). Si lo controlas a `false`, reserva 280px y no tapa el contenido.",
           "El riel colapsado se expande automáticamente al pasar el cursor por encima; no hay botón de colapso.",
+          "Riel y panel comparten columna de iconos y alto de fila: los iconos no se mueven al expandir/colapsar. El slot `header` reserva su altura (invisible) en el riel por el mismo motivo.",
         ],
       }}
     />