@axzydev/axzy_ui_system 1.2.1 → 1.2.2

package/src/components/layout/layout.stories.tsx

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ITLayout from './layout';
+import { FaHome, FaUsers, FaChartBar, FaCog, FaShieldAlt } from 'react-icons/fa';
+
+const meta: Meta<typeof ITLayout> = {
+  title: 'Components/Layout & Navigation/ITLayout',
+  component: ITLayout,
+  parameters: {
+    layout: 'fullscreen', // Ver en fullscreen por defecto
+    docs: {
+      story: {
+        inline: false, // Forzar iframe para ver responsividad
+        iframeHeight: 700,
+      },
+      description: {
+        component: 'El contenedor principal ("Shell") de la interfaz. El Topbar abarca el ancho completo en la parte superior. El Sidebar está debajo del Topbar a la izquierda, y flota sobre el contenido cuando se expande (por hover) para no desplazar el diseño principal.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITLayout>;
+
+const mockUserMenu = {
+  userName: 'Alejandro G.',
+  userEmail: 'alejandro@axzy.io',
+  userImage: 'https://i.pravatar.cc/150?u=a042581f4e29026024d',
+  menuItems: [
+    { label: 'Mi Perfil', onClick: () => console.log('Perfil clicked') },
+    { label: 'Cerrar Sesión', onClick: () => console.log('Logout clicked') },
+  ],
+};
+
+const mockNavigationItems = [
+  { id: 'dashboard', label: 'Dashboard', icon: <FaHome />, action: () => {}, isActive: true },
+  { 
+    id: 'users', 
+    label: 'Usuarios', 
+    icon: <FaUsers />,
+    subitems: [
+      { id: 'list', label: 'Listado', action: () => {} },
+      { id: 'roles', label: 'Roles', action: () => {} }
+    ]
+  },
+  { id: 'analytics', label: 'Reportes', icon: <FaChartBar />, action: () => {} },
+  { id: 'settings', label: 'Ajustes', icon: <FaCog />, action: () => {} },
+];
+
+export const DefaultShell: Story = {
+  args: {
+    sidebar: {
+      navigationItems: mockNavigationItems,
+    },
+    topBar: {
+      logoText: 'AXZY SYSTEM',
+      userMenu: mockUserMenu,
+      navItems: [
+        { id: 'sec', label: 'Seguridad', icon: <FaShieldAlt />, action: () => {} }
+      ]
+    },
+  },
+  render: (args) => (
+    <div className="h-[700px] w-full border border-gray-200 overflow-hidden rounded-xl shadow-lg my-8 mx-auto xl:max-w-6xl">
+       <ITLayout {...args}>
+          {/* Mocked Page Content */}
+          <div className="max-w-4xl mx-auto space-y-6 pb-20">
+             <header className="mb-8">
+                <h1 className="text-3xl font-bold tracking-tight text-slate-900">Bienvenido de vuelta, Alejandro</h1>
+                <p className="mt-2 text-slate-500 text-sm">A continuación un resumen de la actividad de tu plataforma.</p>
+             </header>
+
+             {/* Metric Cards Mock */}
+             <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                 {[
+                   { title: 'Usuarios Activos', value: '1,245', trend: '+12% este mes' },
+                   { title: 'Reportes Hoy', value: '45', trend: '-2% este mes' },
+                   { title: 'Ventas USD', value: '$12,400', trend: '+5.4% este mes' }
+                 ].map((stat, i) => (
+                    <div key={i} className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex flex-col hover:shadow-md transition-shadow">
+                        <span className="text-sm font-medium text-slate-500">{stat.title}</span>
+                        <span className="text-3xl font-bold text-slate-800 mt-2">{stat.value}</span>
+                        <span className="text-xs font-semibold text-emerald-500 mt-4 bg-emerald-50 w-fit px-2 py-1 rounded-md">{stat.trend}</span>
+                    </div>
+                 ))}
+             </div>
+
+             {/* Table Mock */}
+             <div className="bg-white rounded-2xl border border-slate-200 shadow-sm mt-8 overflow-hidden hover:shadow-md transition-shadow">
+                 <div className="p-6 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
+                    <h3 className="text-base font-semibold text-slate-800">Actividad Reciente</h3>
+                    <button className="text-sm font-medium text-emerald-600 hover:text-emerald-700">Ver todo →</button>
+                 </div>
+                 <div className="p-6">
+                    <div className="animate-pulse space-y-4">
+                       {[1,2,3,4].map(i => (
+                          <div key={i} className="flex gap-4 items-center">
+                             <div className="w-10 h-10 rounded-full bg-slate-100"></div>
+                             <div className="flex-1 space-y-2">
+                                <div className="h-3 bg-slate-100 rounded-full w-1/4"></div>
+                                <div className="h-2 bg-slate-50 rounded-full w-1/3"></div>
+                             </div>
+                             <div className="w-20 h-6 bg-slate-100 rounded-full"></div>
+                          </div>
+                       ))}
+                    </div>
+                 </div>
+             </div>
+          </div>
+       </ITLayout>
+    </div>
+  )
+};

package/src/components/layout/layout.tsx

@@ -0,0 +1,80 @@
+import { useState } from "react";
+import ITTopBar from "../topbar/topbar";
+import ITSidebar from "../sidebar/sidebar";
+import { ITLayoutProps } from "./layout.props";
+export default function ITLayout({
+  topBar,
+  sidebar,
+  children,
+  className = "",
+  contentClassName = "",
+}: ITLayoutProps) {
+
+  // Desktop states
+  const [desktopCollapsed, setDesktopCollapsed] = useState(true); // Default to collapsed
+
+  // Mobile drawer state
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+
+  return (
+    <div className={`flex flex-col h-screen overflow-hidden w-full ${className}`}>
+      
+      {/* TOPBAR - Full Width at Top */}
+      <ITTopBar
+        {...topBar}
+        showMobileMenuButton
+        onToggleMobileMenu={() => setMobileSidebarOpen(v => !v)}
+      />
+
+      <div className="flex flex-1 overflow-hidden relative" style={{ backgroundColor: "var(--layout-bg, #f8fafc)" }}>
+        
+        {/* DESKTOP SIDEBAR - Floating over content when expanded */}
+        <div className="hidden lg:block relative z-40 h-full">
+          {/* Spacer to keep main content from shifting. Width matches collapsed sidebar. */}
+          <div className="w-[88px] h-full flex-shrink-0" />
+          
+          <div className="absolute top-0 left-0 h-full">
+            <ITSidebar
+              {...sidebar}
+              isCollapsed={desktopCollapsed}
+              onToggleCollapse={() => setDesktopCollapsed(v => !v)}
+              visibleOnMobile={false}
+              className={`h-full drop-shadow-2xl transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] flex-shrink-0`}
+            />
+          </div>
+        </div>
+
+        {/* MOBILE SIDEBAR PANE */}
+        {mobileSidebarOpen && (
+          <div
+            className="lg:hidden fixed inset-0 z-50 transition-opacity duration-300 backdrop-blur-sm bg-black/40"
+            onClick={() => setMobileSidebarOpen(false)}
+          >
+            <div 
+              className="h-full w-fit flex transform transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)]"
+              onClick={(e) => e.stopPropagation()} 
+            >
+               <ITSidebar
+                {...sidebar}
+                isCollapsed={false}
+                visibleOnMobile={true}
+                className="h-full shadow-2xl relative z-[60]"
+                onToggleCollapse={() => setMobileSidebarOpen(false)}
+                onItemClick={() => setMobileSidebarOpen(false)}
+                onSubItemClick={() => setMobileSidebarOpen(false)}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* MAIN CONTENT AREA */}
+        <main className="flex-1 overflow-y-auto w-full custom-scrollbar relative z-0">
+          <div className={`mx-auto w-full h-full ${contentClassName}`}>
+            {children}
+          </div>
+        </main>
+
+      </div>
+    </div>
+  );
+}

package/src/components/loader/loader.props.ts

@@ -0,0 +1,8 @@
+import { LoaderSize, LoaderVariant } from "@/types/loader.types";
+
+export interface LoaderProps {
+  size?: LoaderSize;
+  variant?: LoaderVariant;
+  color?: string;
+  className?: string;
+}

package/src/components/loader/loader.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ITLoader from "./loader";
+
+const meta: Meta<typeof ITLoader> = {
+  title: "Components/Feedback/ITLoader",
+  component: ITLoader,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg", "xl"],
+      description: "Size of the loader",
+    },
+    variant: {
+      control: "select",
+      options: ["spinner", "dots", "bar", "pulse"],
+      description: "Visual style of the loader",
+    },
+    color: {
+      control: "select",
+      options: ["primary", "secondary", "success", "danger", "warning", "info", "purple"],
+      description: "Semantic color from theme",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ITLoader>;
+
+export const Spinner: Story = {
+  args: {
+    variant: "spinner",
+    color: "primary",
+    size: "md",
+  },
+};
+
+export const Dots: Story = {
+  args: {
+    variant: "dots",
+    color: "secondary",
+    size: "md",
+  },
+};
+
+export const Pulse: Story = {
+  args: {
+    variant: "pulse",
+    color: "danger",
+    size: "lg",
+  },
+};
+
+export const Bar: Story = {
+  render: (args) => (
+    <div className="w-[300px]">
+      <ITLoader {...args} />
+    </div>
+  ),
+  args: {
+    variant: "bar",
+    color: "success",
+    size: "md",
+  },
+};
+
+export const AllColors: Story = {
+  render: (args) => (
+    <div className="flex gap-4 items-center">
+      {(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'purple'] as const).map((color) => (
+        <ITLoader key={color} {...args} color={color} />
+      ))}
+    </div>
+  ),
+  args: {
+    variant: "spinner",
+    size: "md",
+  },
+};
+
+export const AllVariants: Story = {
+    render: (args) => (
+      <div className="flex flex-col gap-8 items-center">
+        <div className="flex gap-4 items-center">
+             <span className="w-20 text-sm font-bold text-gray-500">Spinner</span>
+             <ITLoader variant="spinner" color="primary" />
+        </div>
+        <div className="flex gap-4 items-center">
+             <span className="w-20 text-sm font-bold text-gray-500">Dots</span>
+             <ITLoader variant="dots" color="primary" />
+        </div>
+        <div className="flex gap-4 items-center">
+             <span className="w-20 text-sm font-bold text-gray-500">Pulse</span>
+             <ITLoader variant="pulse" color="primary" />
+        </div>
+         <div className="flex gap-4 items-center w-[300px]">
+             <span className="w-20 text-sm font-bold text-gray-500">Bar</span>
+             <ITLoader variant="bar" color="primary" />
+        </div>
+      </div>
+    ),
+  };

package/src/components/loader/loader.tsx

@@ -0,0 +1,108 @@
+import { theme } from "@/theme/theme";
+import { LoaderSize, sizeClasses } from "@/types/loader.types";
+import { LoaderProps } from "./loader.props";
+import ITText from "@/components/text/text";
+
+export default function ITLoader({
+  size = "md",
+  variant = "spinner",
+  color = "primary", // Default to semantic primary
+  className = "",
+}: LoaderProps) {
+  
+  // Resolve color: Check if it's a semantic color in theme, otherwise use as-is
+  const isSemantic = color in theme.colors;
+  const resolvedColor = isSemantic 
+    ? theme.colors[color as keyof typeof theme.colors][500] 
+    : color;
+
+  // Helper for conditional styles
+  const isCssValue = isSemantic || color.startsWith("#") || color.startsWith("rgb");
+  
+  // Base style object
+  const style = isCssValue ? { color: resolvedColor } : {};
+  const bgStyle = isCssValue ? { backgroundColor: resolvedColor } : {};
+
+  // Legacy class handling: if it's not a CSS value, inject it as a class
+  const colorClass = !isCssValue ? color : "";
+
+  if (variant === "spinner") {
+    return (
+      <div
+        className={`inline-block ${sizeClasses[size]} animate-spin rounded-full border-2 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] ${colorClass} ${className}`}
+        role="status"
+        style={style}
+      >
+        <ITText as="span" className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">
+          Loading...
+        </ITText>
+      </div>
+    );
+  }
+
+  // Dots loader
+  if (variant === "dots") {
+    return (
+      <div
+        className={`flex items-center justify-center space-x-2 ${className}`}
+      >
+        {[...Array(3)].map((_, i) => (
+          <div
+            key={i}
+            className={`${
+              sizeClasses[size.replace(/l|g/, "") as LoaderSize]
+            } animate-bounce rounded-full ${colorClass}`}
+            style={{ 
+                ...bgStyle,
+                animationDelay: `${i * 0.1}s` 
+            }}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  // Bar loader
+  if (variant === "bar") {
+    // For bar, we need a lighter shade for the background 'track' if possible, 
+    // or just use gray-200.
+    // And the progress bar uses the resolved color.
+    return (
+      <div
+        className={`w-full ${
+          size === "sm"
+            ? "h-1"
+            : size === "md"
+            ? "h-1.5"
+            : size === "lg"
+            ? "h-2"
+            : "h-2.5"
+        } bg-gray-200 rounded-full overflow-hidden ${className}`}
+      >
+        <div
+          className={`h-full animate-progress ${colorClass}`}
+          style={{
+            backgroundColor: resolvedColor, 
+            // Simplified gradient for modern look, or keep it solid
+             backgroundImage: isCssValue 
+                ? `linear-gradient(to right, ${resolvedColor}DD, ${resolvedColor})` 
+                : undefined,
+            animation: "progress 1.5s ease-in-out infinite",
+          }}
+        />
+      </div>
+    );
+  }
+
+  // Pulse loader
+  if (variant === "pulse") {
+    return (
+      <div
+        className={`rounded-full ${sizeClasses[size]} animate-pulse ${colorClass} ${className}`}
+        style={bgStyle}
+      />
+    );
+  }
+
+  return null;
+}

package/src/components/navbar/navbar.props.ts

@@ -0,0 +1,37 @@
+// navbar.props.ts
+export interface ITNavigationItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  action?: () => void;
+  isActive?: boolean;
+  subitems?: ITNavigationSubItem[];
+}
+
+export interface ITNavigationSubItem {
+  id: string;
+  label: string;
+  action: () => void;
+  isActive?: boolean;
+}
+
+export interface ITNavbarProps {
+  logo?: React.ReactNode;
+  logoText?: string;
+  navigationItems?: ITNavigationItem[];
+  userMenu?: {
+    userImage?: string;
+    userName: string;
+    userEmail: string;
+    menuItems: Array<{
+      label: string;
+      onClick: () => void;
+    }>;
+  };
+  children?: React.ReactNode;
+  // Legacy props for backward compatibility
+  navItems?: React.ReactNode;
+  showSidebar?: boolean;
+  showSidebarOnMobile?: boolean;
+  sidebarItems?: React.ReactNode;
+}