@axzydev/axzy_ui_system 1.6.0 → 1.7.0

package/src/components/molecules/json-editor/useJsonEditorKeyboard.ts

@@ -0,0 +1,256 @@
+import { useCallback, type KeyboardEvent, type RefObject } from "react";
+
+/** Resultado de una operación de edición sobre el textarea. */
+interface EditResult {
+  /** Texto completo resultante. */
+  value: string;
+  /** Inicio de la selección final. */
+  selectionStart: number;
+  /** Fin de la selección final. */
+  selectionEnd: number;
+  /** Si el manejador consumió el evento (hay que hacer `preventDefault`). */
+  handled: boolean;
+}
+
+/**
+ * Ajustes del hook de edición.
+ *
+ * No recibe el `value` por props a propósito: lee el documento del propio
+ * `<textarea>` en cada pulsación. Entre dos teclas rápidas React todavía puede
+ * no haber re-renderizado, y calcular la edición sobre el valor de props pierde
+ * o duplica caracteres. `applyEdit` se encarga de notificar y de reponer el
+ * cursor tras el commit.
+ */
+export interface UseJsonEditorKeyboardOptions {
+  /** Referencia al textarea real. */
+  textareaRef: RefObject<HTMLTextAreaElement | null>;
+  /** Espacios por nivel de indentación. */
+  indentSize: number;
+  /** `true` cuando el editor es de solo lectura (no se intercepta nada). */
+  readOnly?: boolean;
+  /** Aplica una edición al textarea conservando el deshacer nativo. */
+  applyEdit: (result: EditResult) => void;
+}
+
+/** Caracteres que abren bloque y su pareja de cierre. */
+const PAIRS: Record<string, string> = { "{": "}", "[": "]", '"': '"' };
+
+/** Caracteres de cierre que se "saltan" al teclear si ya están delante. */
+const CLOSERS = new Set(["}", "]", '"']);
+
+/**
+ * Comportamiento de editor de código sobre un `<textarea>` nativo: indentación
+ * con Tab, continuación de indentación al pulsar Enter, cierre automático de
+ * llaves/corchetes/comillas y borrado por parejas.
+ *
+ * Se implementa como hook para que `ITJSONEditor` siga siendo un componente de
+ * presentación y el textarea conserve el deshacer del navegador.
+ *
+ * @example
+ * ```tsx
+ * const textareaRef = useRef<HTMLTextAreaElement>(null);
+ * const handleKeyDown = useJsonEditorKeyboard({ textareaRef, indentSize: 2, applyEdit });
+ * <textarea ref={textareaRef} onKeyDown={handleKeyDown} />
+ * ```
+ */
+export function useJsonEditorKeyboard({
+  textareaRef,
+  indentSize,
+  readOnly = false,
+  applyEdit,
+}: UseJsonEditorKeyboardOptions) {
+  return useCallback(
+    (event: KeyboardEvent<HTMLTextAreaElement>) => {
+      const textarea = textareaRef.current;
+      if (!textarea || readOnly) return;
+
+      const current = textarea.value;
+      const { selectionStart, selectionEnd } = textarea;
+      const indent = " ".repeat(indentSize);
+      const before = current.slice(0, selectionStart);
+      const after = current.slice(selectionEnd);
+
+      /** Sustituye la selección por `text` y deja el cursor al final. */
+      const replace = (text: string, caretOffset = text.length): EditResult => {
+        const next = current.slice(0, selectionStart) + text + after;
+        const caret = selectionStart + caretOffset;
+        return { value: next, selectionStart: caret, selectionEnd: caret, handled: true };
+      };
+
+      /* ------------------------------------------------------------ Tab */
+      if (event.key === "Tab") {
+        event.preventDefault();
+        const lineStart = current.lastIndexOf("\n", selectionStart - 1) + 1;
+        const lineEndRaw = current.indexOf("\n", selectionEnd);
+        const lineEnd = lineEndRaw === -1 ? current.length : lineEndRaw;
+        const multiline = current.slice(lineStart, lineEnd).includes("\n");
+
+        if (!multiline && !event.shiftKey && selectionStart === selectionEnd) {
+          // Sangrado simple en el cursor.
+          applyEdit(replace(indent));
+          return;
+        }
+
+        // Sangrado/desangrado por bloques: afecta a todas las líneas tocadas.
+        const block = current.slice(lineStart, lineEnd);
+        const lines = block.split("\n");
+        /** Cuánto se ha desplazado cada línea (positivo al indentar). */
+        const shifts: number[] = [];
+        const shifted = lines
+          .map((line) => {
+            if (event.shiftKey) {
+              if (line.startsWith(indent)) {
+                shifts.push(-indent.length);
+                return line.slice(indent.length);
+              }
+              const match = line.match(/^[ \t]/);
+              shifts.push(match ? -1 : 0);
+              return match ? line.slice(1) : line;
+            }
+            shifts.push(indent.length);
+            return indent + line;
+          })
+          .join("\n");
+
+        const next = current.slice(0, lineStart) + shifted + current.slice(lineEnd);
+        /**
+         * Lleva una posición del bloque original a su nueva posición: suma los
+         * desplazamientos de las líneas anteriores y recorta el de la propia
+         * línea para no dejar el cursor antes de su inicio.
+         */
+        const remap = (position: number): number => {
+          const relative = Math.max(0, position - lineStart);
+          let offset = 0;
+          let lineIndex = lines.length - 1;
+          for (let i = 0; i < lines.length; i++) {
+            const lineLength = lines[i].length + (i < lines.length - 1 ? 1 : 0);
+            if (relative <= offset + lineLength) {
+              lineIndex = i;
+              break;
+            }
+            offset += lineLength;
+          }
+          const accumulated = shifts.slice(0, lineIndex).reduce((total, n) => total + n, 0);
+          const inLine = relative - offset;
+          const shift = shifts[lineIndex] ?? 0;
+          return lineStart + accumulated + Math.max(0, inLine + Math.min(shift, inLine));
+        };
+
+        const startNext = remap(selectionStart);
+        const endNext = Math.max(startNext, remap(selectionEnd));
+        applyEdit({
+          value: next,
+          selectionStart: Math.min(startNext, next.length),
+          selectionEnd: Math.min(endNext, next.length),
+          handled: true,
+        });
+        return;
+      }
+
+      /* ---------------------------------------------------------- Enter */
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        const currentLine = before.slice(before.lastIndexOf("\n") + 1);
+        const leading = currentLine.match(/^[ \t]*/)?.[0] ?? "";
+        /** `true` cuando el cursor está al final de su línea (nada detrás salvo el cierre). */
+        const atLineEnd = /^[ \t]*[}\]]?[ \t]*$/.test(after);
+        const nextChar = after[0] ?? "";
+        const prevChar = before[before.length - 1] ?? "";
+        const opensBlock = prevChar === "{" || prevChar === "[";
+        const closesBlock = nextChar === "}" || nextChar === "]";
+
+        // Entre llaves vacías: se abre un bloque y se deja el cursor centrado.
+        if (opensBlock && closesBlock) {
+          const inner = `\n${leading}${indent}\n${leading}`;
+          applyEdit(replace(inner, 1 + leading.length + indent.length));
+          return;
+        }
+        if (opensBlock) {
+          applyEdit(replace(`\n${leading}${indent}`));
+          return;
+        }
+        if (!atLineEnd) {
+          // A mitad de línea solo se parte la línea: no se toca el resto, pero la
+          // línea nueva sí hereda la sangría del bloque en el que se está.
+          applyEdit(replace(`\n${leading}${closesBlock ? indent : ""}`, 1 + leading.length + (closesBlock ? indent.length : 0)));
+          return;
+        }
+        if (closesBlock) {
+          applyEdit(replace(`\n${leading}`, 1 + leading.length));
+          return;
+        }
+        applyEdit(replace(`\n${leading}`));
+        return;
+      }
+
+      /* --------------------------------------------- Cierre automático */
+      if (PAIRS[event.key]) {
+        const closing = PAIRS[event.key];
+        const selected = current.slice(selectionStart, selectionEnd);
+        // Teclear la comilla de cierre sobre una ya existente solo avanza el
+        // cursor. La comprobación es contra el MISMO carácter: delante de un `}`
+        // o un `]` lo que toca es abrir una cadena, no saltar nada.
+        if (event.key === '"' && nextCharOf(after) === '"' && !selected) {
+          event.preventDefault();
+          applyEdit({ value: current, selectionStart: selectionEnd + 1, selectionEnd: selectionEnd + 1, handled: true });
+          return;
+        }
+        event.preventDefault();
+        applyEdit(replace(`${event.key}${selected}${closing}`, 1));
+        return;
+      }
+
+      /* ------------------------------------------------ Salto de cierre */
+      if (CLOSERS.has(event.key) && selectionStart === selectionEnd && after[0] === event.key) {
+        event.preventDefault();
+        applyEdit({ value: current, selectionStart: selectionStart + 1, selectionEnd: selectionStart + 1, handled: true });
+        return;
+      }
+
+      /* ----------------------------------------------- Borrado de pareja */
+      if (event.key === "Backspace" && selectionStart === selectionEnd && selectionStart > 0) {
+        const prev = before[before.length - 1];
+        const next = after[0];
+        const isPair =
+          (prev === "{" && next === "}") || (prev === "[" && next === "]") || (prev === '"' && next === '"');
+        if (isPair) {
+          event.preventDefault();
+          const nextValue = current.slice(0, selectionStart - 1) + current.slice(selectionStart + 1);
+          applyEdit({
+            value: nextValue,
+            selectionStart: selectionStart - 1,
+            selectionEnd: selectionStart - 1,
+            handled: true,
+          });
+          return;
+        }
+      }
+
+      /* ------------------------------------------------------ Atajos */
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "a") {
+        // Seleccionar todo dentro del editor (no toda la página).
+        event.preventDefault();
+        textarea.select();
+        return;
+      }
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "d") {
+        // Duplicar la línea actual.
+        event.preventDefault();
+        const lineStart = before.lastIndexOf("\n") + 1;
+        const lineEndRaw = current.indexOf("\n", selectionStart);
+        const lineEnd = lineEndRaw === -1 ? current.length : lineEndRaw;
+        const line = current.slice(lineStart, lineEnd);
+        const next = current.slice(0, lineEnd) + "\n" + line + current.slice(lineEnd);
+        const caret = selectionStart + line.length + 1;
+        applyEdit({ value: next, selectionStart: caret, selectionEnd: caret, handled: true });
+        return;
+      }
+    },
+    [applyEdit, indentSize, readOnly, textareaRef]
+  );
+}
+
+/** Carácter vigente en una cadena, o `""`. */
+function nextCharOf(text: string): string {
+  return text[0] ?? "";
+}

package/src/components/molecules/json-renderer/json-renderer.index.ts

@@ -0,0 +1,2 @@
+export { default as ITJsonRenderer } from "./json-renderer";
+export type { ITJsonRendererProps, JsonComponentNode, JsonComponentType } from "./json-renderer.props";

package/src/components/molecules/json-renderer/json-renderer.props.ts

@@ -0,0 +1,31 @@
+export type JsonComponentType =
+  | "button"
+  | "text"
+  | "card"
+  | "flex"
+  | "stack"
+  | "grid"
+  | "alert"
+  | "div";
+
+export interface JsonProps {
+  [key: string]: any;
+}
+
+export interface JsonComponentNode {
+  /** Component type to render */
+  type: JsonComponentType;
+  /** Props to pass to the component */
+  props?: JsonProps;
+  /** Children nodes */
+  children?: JsonComponentNode[] | React.ReactNode;
+  /** Text content (shorthand for text children) */
+  text?: string;
+}
+
+export interface ITJsonRendererProps {
+  /** JSON structure to render */
+  json: JsonComponentNode | JsonComponentNode[];
+  /** Additional CSS class names */
+  className?: string;
+}

package/src/components/molecules/json-renderer/json-renderer.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { ITJsonRendererProps, JsonComponentNode } from "./json-renderer.props";
+import ITButton from "@/components/atoms/button/button";
+import ITText from "@/components/atoms/text/text";
+import ITCard from "@/components/molecules/card/card";
+import ITFlex from "@/components/atoms/flex/flex";
+import ITStack from "@/components/atoms/stack/stack";
+import ITGrid from "@/components/atoms/grid/grid";
+import ITAlert from "@/components/molecules/alert/alert";
+import clsx from "clsx";
+
+/**
+ * Render UI from JSON schema using AXZY UI System components.
+ *
+ * @example
+ * <ITJsonRenderer json={{ type: "button", props: { label: "Click me" } }} />
+ *
+ * @example
+ * <ITJsonRenderer json={[
+ *   { type: "alert", props: { variant: "info", title: "Info" }, children: "Hello" },
+ *   { type: "card", props: { title: "Card" }, children: { type: "text", text: "Content" } }
+ * ]} />
+ */
+export default function ITJsonRenderer({
+  json,
+  className,
+}: ITJsonRendererProps) {
+  const renderNode = (node: JsonComponentNode | React.ReactNode): React.ReactNode => {
+    if (node == null || typeof node === "boolean") {
+      return null;
+    }
+
+    if (typeof node === "string" || typeof node === "number") {
+      return node;
+    }
+
+    if (React.isValidElement(node)) {
+      return node;
+    }
+
+    if (Array.isArray(node)) {
+      return node.map((child, idx) => (
+        <React.Fragment key={idx}>{renderNode(child as any)}</React.Fragment>
+      ));
+    }
+
+    // node is JsonComponentNode
+    const { type, props = {}, children, text } = node as JsonComponentNode;
+
+    const childContent = children !== undefined ? renderNode(children as any) : text;
+
+    switch (type) {
+      case "button":
+        return <ITButton {...props}>{childContent}</ITButton>;
+      case "text":
+        return <ITText {...props}>{childContent}</ITText>;
+      case "card":
+        return <ITCard {...props}>{childContent}</ITCard>;
+      case "flex":
+        return <ITFlex {...props}>{childContent}</ITFlex>;
+      case "stack":
+        return <ITStack {...props}>{childContent}</ITStack>;
+      case "grid":
+        // ITGrid can be container or item; by default treat as container if has children layout
+        return <ITGrid container {...props}>{childContent}</ITGrid>;
+      case "alert":
+        return <ITAlert {...props}>{childContent}</ITAlert>;
+      case "div":
+      default:
+        return <div {...props}>{childContent}</div>;
+    }
+  };
+
+  if (Array.isArray(json)) {
+    return <div className={clsx(className)}>{json.map((n, idx) => <React.Fragment key={idx}>{renderNode(n)}</React.Fragment>)}</div>;
+  }
+
+  return <div className={clsx(className)}>{renderNode(json)}</div>;
+}

package/src/dev.css

@@ -112,7 +112,30 @@ html {
 @media (prefers-reduced-motion: reduce) {
   .it-landing-rise,
   .it-landing-float,
-  .it-reveal {
+  .it-reveal,
+  .it-logo-latido {
     animation: none;
   }
 }
+
+/* ──────────────────────────────────────────────
+   MARCA AXZYDEV (dev.css)
+   El loader del kit es una animación Lottie; en el sitio se usa la versión
+   estática del ícono con un latido suave. Solo dev: nunca llega a dist.
+   ────────────────────────────────────────────── */
+@keyframes it-logo-latido {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.72;
+    transform: scale(0.94);
+  }
+}
+
+.it-logo-latido {
+  animation: it-logo-latido 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  transform-origin: center;
+}

package/src/hooks/useJsonRender.tsx

@@ -0,0 +1,9 @@
+import { useMemo } from "react";
+import ITJsonRenderer from "@/components/molecules/json-renderer/json-renderer";
+import { JsonComponentNode } from "@/components/molecules/json-renderer/json-renderer.props";
+
+export function useJsonRender(json: JsonComponentNode | JsonComponentNode[]) {
+  return useMemo(() => <ITJsonRenderer json={json} />, [json]);
+}
+
+export default useJsonRender;

package/src/i18n/locales/en.ts

@@ -158,6 +158,60 @@ const en: ITMessages = {
   "themeProvider.presets.oceanicTeal": "Oceanic Teal 🌊",
   "themeProvider.presets.goldenHour": "Golden Hour ☀️",
   "themeProvider.presets.deepForest": "Deep Forest 🌲",
+
+  // -------------------------------------------------------- ITJSONEditor
+  "jsonEditor.ariaLabel": "JSON editor",
+  "jsonEditor.placeholder": '{\n  "type": "button",\n  "props": { "label": "Confirm" }\n}',
+  "jsonEditor.valid": "Valid JSON",
+  "jsonEditor.invalid": "Invalid JSON",
+  "jsonEditor.invalidAt": "Error on line {line}, column {column}",
+  "jsonEditor.format": "Format",
+  "jsonEditor.formatHint": "Reindents the document (Shift+Alt+F)",
+  "jsonEditor.minify": "Minify",
+  "jsonEditor.sortAsc": "A-Z",
+  "jsonEditor.sortDesc": "Z-A",
+  "jsonEditor.escape": "Escape",
+  "jsonEditor.unescape": "Unescape",
+  "jsonEditor.copy": "Copy",
+  "jsonEditor.copied": "Copied",
+  "jsonEditor.copyFailed": "Could not copy to the clipboard",
+  "jsonEditor.importFile": "Open",
+  "jsonEditor.download": "Download",
+  "jsonEditor.fileLoaded": "File loaded",
+  "jsonEditor.fileError": "The file could not be read",
+  "jsonEditor.applied": "Action applied",
+  "jsonEditor.actionFailed": "The action could not be applied",
+  "jsonEditor.viewMode": "View mode",
+  "jsonEditor.modeText": "Text",
+  "jsonEditor.modeTree": "Tree",
+  "jsonEditor.viewSettings": "View",
+  "jsonEditor.wrap": "Wrap",
+  "jsonEditor.lineNumbers": "Numbers",
+  "jsonEditor.folding": "Folding",
+  "jsonEditor.indent": "Indent",
+  "jsonEditor.indentNone": "No indent",
+  "jsonEditor.collapseAll": "Collapse all",
+  "jsonEditor.expandAll": "Expand all",
+  "jsonEditor.collapseBlock": "Collapse the block on line {line}",
+  "jsonEditor.expandBlock": "Expand the block on line {line}",
+  "jsonEditor.foldMore": "… {count} folded lines",
+  "jsonEditor.expandNode": "Expand node",
+  "jsonEditor.collapseNode": "Collapse node",
+  "jsonEditor.jumpToLine": "Go to line {line}",
+  "jsonEditor.childCount": "{count} children",
+  "jsonEditor.treeNeedsValid": "Fix the JSON to see the tree",
+  "jsonEditor.treeTruncated": "Tree truncated: too many nodes, use the text view",
+  "jsonEditor.statLines": "{count} lines",
+  "jsonEditor.statNodes": "{count} nodes",
+  "jsonEditor.statDepth": "depth {count}",
+  "jsonEditor.statRoot": "root: {kind}",
+  "jsonEditor.statSize": "size: {size}",
+  "jsonEditor.kindObject": "object",
+  "jsonEditor.kindArray": "array",
+  "jsonEditor.kindString": "string",
+  "jsonEditor.kindNumber": "number",
+  "jsonEditor.kindBoolean": "boolean",
+  "jsonEditor.kindNull": "null",
 };
 
 export default en;

package/src/i18n/locales/es.ts

@@ -160,6 +160,60 @@ const es: ITMessages = {
   "themeProvider.presets.oceanicTeal": "Oceanic Teal 🌊",
   "themeProvider.presets.goldenHour": "Golden Hour ☀️",
   "themeProvider.presets.deepForest": "Deep Forest 🌲",
+
+  // -------------------------------------------------------- ITJSONEditor
+  "jsonEditor.ariaLabel": "Editor de JSON",
+  "jsonEditor.placeholder": '{\n  "type": "button",\n  "props": { "label": "Aceptar" }\n}',
+  "jsonEditor.valid": "JSON válido",
+  "jsonEditor.invalid": "JSON no válido",
+  "jsonEditor.invalidAt": "Error en línea {line}, columna {column}",
+  "jsonEditor.format": "Formatear",
+  "jsonEditor.formatHint": "Reindenta el documento (Mayús+Alt+F)",
+  "jsonEditor.minify": "Minificar",
+  "jsonEditor.sortAsc": "A-Z",
+  "jsonEditor.sortDesc": "Z-A",
+  "jsonEditor.escape": "Escapar",
+  "jsonEditor.unescape": "Desescapar",
+  "jsonEditor.copy": "Copiar",
+  "jsonEditor.copied": "Copiado",
+  "jsonEditor.copyFailed": "No se pudo copiar al portapapeles",
+  "jsonEditor.importFile": "Abrir",
+  "jsonEditor.download": "Descargar",
+  "jsonEditor.fileLoaded": "Archivo cargado",
+  "jsonEditor.fileError": "No se pudo leer el archivo",
+  "jsonEditor.applied": "Acción aplicada",
+  "jsonEditor.actionFailed": "La acción no se pudo aplicar",
+  "jsonEditor.viewMode": "Modo de vista",
+  "jsonEditor.modeText": "Texto",
+  "jsonEditor.modeTree": "Árbol",
+  "jsonEditor.viewSettings": "Vista",
+  "jsonEditor.wrap": "Ajuste",
+  "jsonEditor.lineNumbers": "Números",
+  "jsonEditor.folding": "Plegado",
+  "jsonEditor.indent": "Indentación",
+  "jsonEditor.indentNone": "Sin sangrar",
+  "jsonEditor.collapseAll": "Plegar todo",
+  "jsonEditor.expandAll": "Desplegar todo",
+  "jsonEditor.collapseBlock": "Plegar el bloque de la línea {line}",
+  "jsonEditor.expandBlock": "Desplegar el bloque de la línea {line}",
+  "jsonEditor.foldMore": "… {count} líneas plegadas",
+  "jsonEditor.expandNode": "Desplegar nodo",
+  "jsonEditor.collapseNode": "Plegar nodo",
+  "jsonEditor.jumpToLine": "Ir a la línea {line}",
+  "jsonEditor.childCount": "{count} hijos",
+  "jsonEditor.treeNeedsValid": "Corrige el JSON para ver el árbol",
+  "jsonEditor.treeTruncated": "Árbol recortado: demasiados nodos, usa la vista de texto",
+  "jsonEditor.statLines": "{count} líneas",
+  "jsonEditor.statNodes": "{count} nodos",
+  "jsonEditor.statDepth": "prof. {count}",
+  "jsonEditor.statRoot": "raíz: {kind}",
+  "jsonEditor.statSize": "tamaño: {size}",
+  "jsonEditor.kindObject": "objeto",
+  "jsonEditor.kindArray": "array",
+  "jsonEditor.kindString": "texto",
+  "jsonEditor.kindNumber": "número",
+  "jsonEditor.kindBoolean": "booleano",
+  "jsonEditor.kindNull": "nulo",
 };
 
 export default es;