@axzydev/axzy_ui_system 1.2.1 → 1.2.2

package/src/showcases/StructureShowcases.tsx

@@ -0,0 +1,152 @@
+import React, { useState } from "react";
+import { FaCheckCircle } from "react-icons/fa";
+import { ITCard, ITButton, ITInput, ITSlideToggle, ITText, ITNavbar } from "../index";
+import { ShowcaseLayout, CodeViewer } from "./ShowcaseLayout";
+
+// 1. ITCard Showcase
+export const CardShowcase = () => {
+  const [title, setTitle] = useState("Registro de Logs del Sistema");
+  const [showActions, setShowActions] = useState(true);
+
+  const code = `<ITCard\n  title="${title}"\n  actions={${showActions ? "<ITButton label='Exportar' />" : "undefined"}}\n>\n  <p>Contenido interno de la tarjeta.</p>\n</ITCard>`;
+
+  return (
+    <ShowcaseLayout
+      title="ITCard"
+      description="Tarjetas de contenedor multipropósito con cabecera y espacio para acciones."
+      code={code}
+      demo={
+        <div className="w-full max-w-md">
+          <ITCard
+            title={title}
+            actions={showActions ? <ITButton label="Exportar" color="primary" size="small" variant="outlined" /> : undefined}
+          >
+            <div className="space-y-3">
+              <p className="text-sm text-slate-600 dark:text-slate-300">
+                Esta es una tarjeta administrativa estándar AXZY. Es ideal para agrupar paneles de control, tablas y formularios.
+              </p>
+              <div className="p-3 bg-emerald-50 dark:bg-emerald-950/20 border border-emerald-100 dark:border-emerald-900 rounded-xl flex items-center gap-2">
+                <FaCheckCircle className="text-emerald-500" />
+                <span className="text-xs font-medium text-emerald-800 dark:text-emerald-300">Estado de servidor: Conectado</span>
+              </div>
+            </div>
+          </ITCard>
+        </div>
+      }
+      controls={
+        <>
+          <ITInput name="title_ctrl" label="Título de Tarjeta" value={title} onChange={(e: any) => setTitle(e.target.value)} onBlur={() => { }} />
+          <div className="flex items-center justify-between pt-2">
+            <span className="text-sm font-semibold text-gray-700">Mostrar Botón de Acción</span>
+            <ITSlideToggle isOn={showActions} onToggle={setShowActions} size="sm" />
+          </div>
+        </>
+      }
+    />
+  );
+};
+
+// 2. ITText Showcase
+export const TextShowcase = () => {
+  const [bold, setBold] = useState(false);
+  const [size, setSize] = useState("text-base");
+
+  const code = `<ITText className="${bold ? "font-bold" : ""} ${size}">\n  Texto tipográfico estándar AXZY\n</ITText>`;
+
+  return (
+    <ShowcaseLayout
+      title="ITText"
+      description="Contenedor tipográfico básico alineado con las tipografías globales del tema."
+      code={code}
+      demo={
+        <ITText className={`${bold ? "font-bold" : ""} ${size} text-slate-800 dark:text-white`}>
+          Diseñado para inyectar consistencia tipográfica sobre las variables globales de Outfit/Inter.
+        </ITText>
+      }
+      controls={
+        <>
+          <ITSelectStub
+            name="sz_ctrl"
+            label="Tamaño de Fuente"
+            value={size}
+            onChange={(e: any) => setSize(e.target.value)}
+            options={[
+              { label: "Chico (text-xs)", value: "text-xs" },
+              { label: "Estándar (text-base)", value: "text-base" },
+              { label: "Grande (text-xl)", value: "text-xl" },
+              { label: "Título (text-3xl)", value: "text-3xl" }
+            ]}
+          />
+          <div className="flex items-center justify-between pt-2">
+            <span className="text-sm font-semibold text-gray-700">Negrita (Bold)</span>
+            <ITSlideToggle isOn={bold} onToggle={setBold} size="sm" />
+          </div>
+        </>
+      }
+    />
+  );
+};
+
+// Temporary helper helper to render ITSelect inside showcases
+const ITSelectStub = ({ name, label, value, onChange, options }: any) => {
+  return (
+    <div className="flex flex-col gap-1">
+      <label className="text-xs font-semibold text-slate-600 dark:text-slate-400">{label}</label>
+      <select
+        name={name}
+        value={value}
+        onChange={onChange}
+        className="w-full bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg p-2 text-xs text-slate-800 dark:text-slate-100 outline-none"
+      >
+        {options.map((opt: any) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+// 3. ITLayout & ITNavbar Showcase
+export const LayoutShowcase = () => {
+  const code = `<ITLayout\n  topBar={topBarProps}\n  sidebar={sidebarProps}\n>\n  {/* Tu Contenido aquí */}\n</ITLayout>`;
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-extrabold text-slate-800 dark:text-white">ITLayout & ITNavbar</h1>
+        <p className="text-slate-500 mt-1.5 text-sm md:text-base">El chasis estructural del portal administrativo con control responsivo y colapso de sidebar.</p>
+      </div>
+
+      <ITCard title="Layout Estructural">
+        <div className="space-y-4">
+          <p className="text-sm text-slate-600 dark:text-slate-300">
+            Este componente es el contenedor raíz de toda la suite que estás navegando en este momento. Proporciona:
+          </p>
+          <ul className="list-disc pl-5 space-y-2 text-sm text-slate-600 dark:text-slate-300">
+            <li>Menú superior (Navbar) con avatar del usuario, correo y menú desplegable.</li>
+            <li>Barra de navegación lateral interactiva (Sidebar) colapsable con sub-ítems y badges.</li>
+            <li>Fondo dinámico adaptado a presets claros y oscuros.</li>
+          </ul>
+          <div className="mt-4 p-4 bg-slate-50 dark:bg-slate-900 border rounded-xl">
+            <h5 className="font-bold text-xs uppercase text-slate-400 mb-2">Simulación de Barra de Navegación Horizontal (ITNavbar)</h5>
+            <ITNavbar
+              logoText="PREVIEW NAVBAR"
+              navigationItems={[
+                { id: "1", label: "Inicio", isActive: true },
+                { id: "2", label: "Auditoría" }
+              ]}
+              userMenu={{
+                userName: "Auditor AXZY",
+                userEmail: "auditor@axzy.dev",
+                menuItems: [{ label: "Ajustes", onClick: () => { } }]
+              }}
+            />
+          </div>
+          <CodeViewer code={code} />
+        </div>
+      </ITCard>
+    </div>
+  );
+};

package/src/types/badget.types.ts

@@ -0,0 +1,37 @@
+import { ColorsTypes } from "./colors.types";
+
+export const badgeVariants = {
+  filled: "filled",
+  outlined: "outlined",
+} as const;
+
+export const badgeColors = {
+  primary: "bg-primary-500 text-white",
+  secondary: "bg-secondary-500 text-white",
+  success: "bg-success-500 text-white",
+  danger: "bg-danger-500 text-white",
+  warning: "bg-warning-500 text-black",
+  purple: "bg-purple-500 text-white",
+} as const;
+
+export const outlinedBadgeColors = {
+  primary: "bg-primary-200 border border-primary-500 text-primary-700",
+  secondary: "bg-secondary-200 border border-secondary-500 text-secondary-700",
+  success: "bg-success-200 border border-success-500 text-success-700",
+  danger: "bg-danger-200 border border-danger-500 text-danger-700",
+  warning: "bg-warning-200 border border-warning-500 text-warning-700",
+  purple: "bg-purple-200 border border-purple-500 text-purple-700",
+} as const;
+
+export const badgeSizes = {
+  small: "text-xs px-2 py-1",
+  medium: "text-sm px-3 py-1.5",
+  large: "text-base px-4 py-2",
+} as const;
+
+export const getBadgeColorClasses = (color: ColorsTypes, variant: keyof typeof badgeVariants) => {
+  if (variant === "outlined") {
+    return outlinedBadgeColors[color];
+  }
+  return badgeColors[color];
+};

package/src/types/button.types.ts

@@ -0,0 +1,16 @@
+export const buttonVariants: Record<string, string> = {
+  filled: "border-transparent shadow-sm",
+  outlined: "bg-transparent border-2",
+  raised: "border-transparent shadow-md",
+  rounded: "border-transparent shadow-sm rounded-full",
+  text: "bg-transparent border-transparent shadow-none hover:bg-black/5 dark:hover:bg-white/10",
+  "raised-text": "bg-white border border-gray-200 shadow-sm hover:shadow-md",
+  "icon-only": "p-2 aspect-square flex items-center justify-center border-transparent shadow-sm",
+  link: "bg-transparent border-transparent shadow-none hover:underline px-0",
+};
+
+export const buttonSizes: Record<string, string> = {
+  small: "text-xs px-3 py-1.5",
+  medium: "text-sm px-5 py-2.5",
+  large: "text-lg px-6 py-3",
+};

package/src/types/colors.types.ts

@@ -0,0 +1,3 @@
+import { semanticColors } from "@/theme/theme";
+
+export type ColorsTypes = keyof typeof semanticColors;

package/src/types/field.types.ts

@@ -0,0 +1,103 @@
+import React from "react";
+import * as Yup from "yup";
+
+// Legacy FieldConfig (kept for backward compatibility during migration)
+export interface FieldConfig {
+  name: string;
+  label: string;
+  type?: "text" | "select" | "date" | "password" | "number";
+  currencyFormat?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  validation?: Yup.AnySchema;
+  column?: number | number[];
+  options?: { value: string; label: string }[];
+  rightIcon?: React.ReactNode;
+  leftIcon?: React.ReactNode;
+  valueField?: string;
+  showHintLength?: boolean;
+  labelField?: string;
+  maxLength?: number;
+  minLength?: number;
+  rows?: number;
+  formatNumber?: boolean;
+  onChangeAction?: (value: any, setFieldValue: any) => void;
+}
+
+// -------------------------------------------------------------
+// V2: ENTERPRISE FORM BUILDER ARCHITECTURE
+// -------------------------------------------------------------
+
+export type FieldTypeV2 = 
+  | "text" 
+  | "number" 
+  | "password" 
+  | "email" 
+  | "select" 
+  | "date" 
+  | "time"
+  | "checkbox" 
+  | "radio"
+  | "array"     // For dynamic lists
+  | "section"   // For grouping fields or wizard steps
+  | "custom";   // For inversion of control (injecting external components)
+
+export interface FieldContextV2 {
+  values: Record<string, any>;
+  setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void;
+  setFieldError: (field: string, error: string) => void;
+  setFieldTouched: (field: string, touched?: boolean, shouldValidate?: boolean) => void;
+}
+
+export interface FieldConfigV2 {
+  name: string;
+  label?: string;
+  type: FieldTypeV2;
+  
+  // 1. Layout & Structure
+  column?: number | { sm?: number; md?: number; lg?: number; xl?: number };
+  fields?: FieldConfigV2[]; // REQUIRED if type is "array" or "section"
+  collapsible?: boolean;    // Optional for "section", default false
+  defaultCollapsed?: boolean;
+  
+  // 2. Rules Engine & Dynamic Behavior
+  dependsOn?: string[]; // Array of sibling field names to listen to for re-evaluation
+  renderWhen?: (values: Record<string, any>) => boolean; // If false, field isn't rendered or submitted
+  dynamicProps?: (values: Record<string, any>) => Partial<FieldConfigV2>; // E.g: if A > 100, make this required
+  
+  // 3. Advanced Validations
+  validation?: Yup.AnySchema; 
+  asyncValidation?: (value: any, values: Record<string, any>) => Promise<string | null | undefined>; // Returns error string if invalid
+  
+  // 4. Base Props
+  defaultValue?: any;
+  placeholder?: string;
+  disabled?: boolean | ((values: Record<string, any>) => boolean);
+  readOnly?: boolean;
+  required?: boolean | ((values: Record<string, any>) => boolean);
+  
+  // 5. Data Support (Sync & Async)
+  options?: 
+    | { value: string | number; label: string }[] 
+    | (() => Promise<{ value: string | number; label: string }[]>);
+  valueField?: string;
+  labelField?: string;
+  
+  // 6. Extensibility & UI
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  component?: React.ComponentType<any>; // Custom component for type === "custom"
+  className?: string; // Custom container class
+  
+  // Legacy specific overrides
+  currencyFormat?: boolean;
+  showHintLength?: boolean;
+  maxLength?: number;
+  minLength?: number;
+  rows?: number;
+  formatNumber?: boolean;
+
+  // Lifecycle hook
+  onChangeAction?: (val: any, context: FieldContextV2) => void | Promise<void>;
+}

package/src/types/formik.types.ts

@@ -0,0 +1,15 @@
+export type HandleChange = {
+  (e: React.ChangeEvent<unknown>): void;
+  <T = string | React.ChangeEvent<unknown>>(
+    field: T
+  ): T extends React.ChangeEvent<unknown>
+    ? void
+    : (e: string | React.ChangeEvent<unknown>) => void;
+};
+
+export type HandleBlur = {
+  (e: React.FocusEvent<unknown, Element>): void;
+  <T = unknown>(fieldOrEvent: T): T extends string
+    ? (e: unknown) => void
+    : void;
+};

package/src/types/input.types.ts

@@ -0,0 +1,14 @@
+export const inputVariants: Record<string, string> = {
+  primary: "border-slate-500 focus:border-slate-500",
+  secondary: "border-gray-400 focus:border-gray-500",
+  success: "border-green-500 focus:border-green-500",
+  danger: "border-red-500 focus:border-red-500",
+  warning: "border-yellow-500 focus:border-yellow-500",
+  info: "border-slate-300 focus:border-slate-300",
+};
+
+export const inputSizes: Record<string, string> = {
+  small: "text-sm py-1 px-2",
+  medium: "text-base py-2 px-3",
+  large: "text-lg py-3 px-4",
+};

package/src/types/loader.types.ts

@@ -0,0 +1,9 @@
+export type LoaderSize = "sm" | "md" | "lg" | "xl";
+export type LoaderVariant = "spinner" | "dots" | "bar" | "pulse";
+
+export const sizeClasses: Record<LoaderSize, string> = {
+  sm: "h-4 w-4",
+  md: "h-8 w-8",
+  lg: "h-12 w-12",
+  xl: "h-16 w-16",
+};

package/src/types/sizes.types.ts

@@ -0,0 +1 @@
+export type SizesTypes = "small" | "medium" | "large";

package/src/types/table.types.ts

@@ -0,0 +1,15 @@
+export type TableVariants = "default" | "striped" | "bordered";
+
+export type TableSize = "sm" | "md" | "lg";
+
+export const variantStyles: Record<TableVariants, string> = {
+  default: "",
+  striped: "divide-y divide-gray-200",
+  bordered: "border border-gray-200",
+};
+
+export const sizeStyles: Record<TableSize, string> = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-lg",
+};

package/src/types/toast.types.ts

@@ -0,0 +1,8 @@
+export const positionStyles = {
+  "top-right": "top-4 right-4",
+  "top-center": "top-4 left-1/2 transform -translate-x-1/2",
+  "top-left": "top-4 left-4",
+  "bottom-right": "bottom-4 right-4",
+  "bottom-center": "bottom-4 left-1/2 transform -translate-x-1/2",
+  "bottom-left": "bottom-4 left-4",
+};

package/src/types/yup.types.ts

@@ -0,0 +1,11 @@
+import * as Yup from "yup";
+import { FieldConfig } from "./field.types";
+export const createValidationSchema = (fields: FieldConfig[]) =>
+  Yup.object().shape(
+    fields.reduce((acc, field) => {
+      if (field.validation) {
+        acc[field.name] = field.validation;
+      }
+      return acc;
+    }, {} as Record<string, Yup.AnySchema>)
+  );

package/src/utils/color.utils.ts

@@ -0,0 +1,99 @@
+import { ITThemePalette } from "@/components/theme-provider/themeProvider.props";
+
+/**
+ * Determina si un color hexadecimal es claro.
+ */
+export const isLightColor = (hex: string): boolean => {
+  if (!hex || typeof hex !== "string") return false;
+  const color = hex.replace("#", "");
+  let r = 0, g = 0, b = 0;
+  if (color.length === 3) {
+    r = parseInt(color[0] + color[0], 16);
+    g = parseInt(color[1] + color[1], 16);
+    b = parseInt(color[2] + color[2], 16);
+  } else if (color.length === 6) {
+    r = parseInt(color.substring(0, 2), 16);
+    g = parseInt(color.substring(2, 4), 16);
+    b = parseInt(color.substring(4, 6), 16);
+  } else {
+    return false;
+  }
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+  return brightness > 140;
+};
+
+/**
+ * Traduce un valor de color de CSS (hexadecimal o variable var(--...)) a hexadecimal absoluto.
+ */
+export const resolveCssColor = (
+  colorStr: string,
+  palette?: ITThemePalette,
+  isDarkMode?: boolean
+): string => {
+  if (!colorStr) return "#ffffff";
+  const cleanColor = colorStr.trim();
+  if (cleanColor.startsWith("#")) return cleanColor;
+
+  if (cleanColor.includes("var(")) {
+    const match = cleanColor.match(/var\(([^,)]+)(?:,\s*([^)]+))?\)/);
+    if (match) {
+      const varName = match[1].trim();
+      const fallback = match[2]?.trim();
+
+      if (varName === "--color-primary" || varName.includes("primary-500")) {
+        return palette?.primary || "#06b6d4";
+      }
+      if (varName.includes("primary")) {
+        return palette?.primary || "#06b6d4";
+      }
+      if (varName === "--color-secondary" || varName.includes("secondary-500")) {
+        return palette?.secondary || "#6b7280";
+      }
+      if (varName.includes("secondary")) {
+        return palette?.secondary || "#6b7280";
+      }
+      if (varName.includes("ternary")) {
+        return palette?.ternary || "#8b5cf6";
+      }
+      if (varName.includes("danger")) {
+        return palette?.danger || "#ef4444";
+      }
+      if (varName.includes("success")) {
+        return palette?.success || "#22c55e";
+      }
+      if (varName.includes("info")) {
+        return palette?.info || "#3b82f6";
+      }
+      if (varName.includes("warning")) {
+        return palette?.warning || "#eab308";
+      }
+      if (varName.includes("alert")) {
+        return palette?.alert || "#f97316";
+      }
+      if (varName.includes("card-bg")) {
+        return isDarkMode ? "#111827" : "#ffffff";
+      }
+      if (varName.includes("modal-bg")) {
+        return isDarkMode ? "#111827" : "#ffffff";
+      }
+
+      if (fallback) {
+        return resolveCssColor(fallback, palette, isDarkMode);
+      }
+    }
+  }
+
+  return "#ffffff";
+};
+
+/**
+ * Obtiene la clase de color de texto óptima (blanca o gris oscuro) basado en el fondo.
+ */
+export const getContrastTextColor = (
+  bgColor: string,
+  palette?: ITThemePalette,
+  isDarkMode?: boolean
+): "text-white" | "text-slate-800" => {
+  const resolvedColor = resolveCssColor(bgColor, palette, isDarkMode);
+  return isLightColor(resolvedColor) ? "text-slate-800" : "text-white";
+};

package/src/utils/styles.ts

@@ -0,0 +1,120 @@
+import clsx from "clsx";
+
+// ──────────────────────────────────────────────
+//   INPUT-LIKE COMPONENTS
+// ──────────────────────────────────────────────
+
+export function inputContainer(hasError?: boolean, disabled?: boolean) {
+  return clsx(
+    "w-full border border-solid transition-all duration-200 rounded-lg px-3 py-2 text-sm",
+    "focus:outline-none focus:ring-2",
+    hasError
+      ? "border-red-500 ring-red-100"
+      : "border-gray-300 focus:border-primary-500 focus:ring-primary-100",
+    disabled && "opacity-50 cursor-not-allowed bg-gray-100"
+  );
+}
+
+export function inputLabel(error?: boolean) {
+  return clsx(
+    "text-sm font-medium",
+    error ? "text-red-500" : "text-gray-700 dark:text-slate-300"
+  );
+}
+
+export const inputError = "text-red-500 text-xs mt-1";
+
+export function inputWrapper(className?: string) {
+  return clsx("flex flex-col gap-1.5", className);
+}
+
+export const iconAbsoluteLeft = "absolute inset-y-0 left-0 flex items-center pl-3 z-10";
+export const iconAbsoluteRight = "absolute inset-y-0 right-0 flex items-center pr-3 z-10";
+
+// ──────────────────────────────────────────────
+//   TABLE COMPONENTS
+// ──────────────────────────────────────────────
+
+export const tableContainer = "rounded-xl shadow-sm border border-secondary-200 overflow-hidden";
+
+export const tableHeaderRow = "bg-secondary-50 border-b border-secondary-200 text-xs uppercase tracking-wider font-semibold text-secondary-500";
+
+export function tableHeaderCell(className?: string) {
+  return clsx("px-4 py-4 align-top", className);
+}
+
+export const tableSortButtonActive = "bg-secondary-200 text-secondary-900";
+export const tableSortButtonInactive = "hover:bg-secondary-200 text-secondary-400 hover:text-secondary-700";
+
+export const tableBody = "divide-y divide-secondary-100";
+
+export const tableRow = "hover:bg-secondary-50/50 transition-colors duration-150 group";
+
+export function tableCell(className?: string) {
+  return clsx("px-4 py-3 align-middle", className);
+}
+
+export const tableActionsCell = "flex items-center justify-center gap-2";
+export const tableCellText = "text-secondary-700 font-medium";
+
+export function tableEmptyState(colSpan: number) {
+  return { colSpan, className: "px-6 py-20 text-center" };
+}
+
+export const tableEmptyContent = "flex flex-col items-center justify-center text-secondary-400";
+
+// ──────────────────────────────────────────────
+//   CARD / CONTAINER
+// ──────────────────────────────────────────────
+
+export const cardContainer = "overflow-hidden";
+
+// ──────────────────────────────────────────────
+//   FORM GRID
+// ──────────────────────────────────────────────
+
+export const gridColsClasses: Record<number, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  6: "grid-cols-6",
+  8: "grid-cols-8",
+  12: "grid-cols-12",
+};
+
+export function getGridColsClass(columns: number) {
+  return gridColsClasses[columns] || "grid-cols-12";
+}
+
+export function getColSpanClass(
+  span: number | number[] | { sm?: number; md?: number; lg?: number; xl?: number },
+  maxCols: number
+) {
+  if (typeof span === "number") {
+    return `col-span-${Math.min(span, maxCols)}`;
+  }
+  if (Array.isArray(span)) {
+    const [sm, md, lg] = span;
+    return clsx(
+      `col-span-${Math.min(sm, maxCols)}`,
+      md !== undefined && `md:col-span-${Math.min(md, maxCols)}`,
+      lg !== undefined && `lg:col-span-${Math.min(lg, maxCols)}`
+    );
+  }
+  const classes: string[] = [];
+  if (span.sm) classes.push(`col-span-${Math.min(span.sm, maxCols)}`);
+  if (span.md) classes.push(`md:col-span-${Math.min(span.md, maxCols)}`);
+  if (span.lg) classes.push(`lg:col-span-${Math.min(span.lg, maxCols)}`);
+  if (span.xl) classes.push(`xl:col-span-${Math.min(span.xl, maxCols)}`);
+  return classes.length ? clsx(classes) : `col-span-${maxCols}`;
+}
+
+export const formGrid = (columns: number) =>
+  clsx("grid gap-y-6 gap-x-5", getGridColsClass(columns));
+
+// ──────────────────────────────────────────────
+//   DISABLED OVERLAY
+// ──────────────────────────────────────────────
+
+export const disabledOverlay = "opacity-50 cursor-not-allowed";

package/src/utils/table.utils.ts

@@ -0,0 +1,10 @@
+export const formatCurrencyMX = (value: number) => {
+  return value.toLocaleString("es-MX", {
+    style: "currency",
+    currency: "MXN",
+  });
+};
+
+export const getNestedValue = (obj: any, path: string) => {
+    return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+};