@axzydev/axzy_ui_system 1.4.8 → 1.5.0

package/src/components/templates/layout/layout.doc.mdx

@@ -1,53 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './layout.stories';
-
-<Meta of={StoriesData} />
-
-# ITLayout
-
-The application shell layout component that combines a topbar, sidebar, and main content area into a full-page interface. The sidebar supports collapse/expand via hover, and all visual styles are driven by ITThemeProvider CSS variables.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `topBar` | `ITTopBarProps` | required | Top bar configuration including logo, nav items, and user menu. |
-| `sidebar` | `ITSidebarProps` | required | Sidebar configuration including navigation items. |
-| `children` | `ReactNode` | required | Main content rendered in the center area. |
-| `className` | `string` | `undefined` | Additional CSS classes for the outermost wrapper. |
-| `contentClassName` | `string` | `undefined` | Additional CSS classes for the content container. |
-
-## Usage
-
-```tsx
-import { ITLayout } from '@axzydev/axzy_ui_system';
-
-<ITLayout
-  topBar={{
-    logoText: 'AXZY',
-    userMenu: { userName: 'Jane', userEmail: 'jane@axzy.io', menuItems: [...] },
-    navItems: [...]
-  }}
-  sidebar={{
-    navigationItems: [...]
-  }}
->
-  <div>Your page content here</div>
-</ITLayout>
-```
-
-## Notes
-
-- The topbar spans the full viewport width at the top of the page.
-- The sidebar sits under the topbar on the left and floats over content when expanded via hover.
-- Reserved desktop width follows `sidebar.isCollapsed`: omitted/uncontrolled or `true` reserves the 88px rail (hover expands over content); controlled-expanded (`sidebar.isCollapsed={false}`) reserves the full 280px so it never overlays content.
-- Sidebar in collapsed state shows only icons; expanding reveals labels.
-- The collapsed rail expands automatically on hover. Keep global search in `topBar.centerContent` (always visible, `lg` and up) rather than `sidebar.header`, which is expanded-only and disappears in the 88px rail.
-- Themed entirely through CSS custom properties from ITThemeProvider.
-- Includes mobile responsive behavior with a hamburger-style toggle.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

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

@@ -1,113 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ITLayout from '@/components/templates/layout/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.',
-      },
-    },
-  },
-};
-
-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/templates/page/page.doc.mdx

@@ -1,86 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './page.stories';
-
-<Meta of={StoriesData} />
-
-# ITPage
-
-A page template component that wraps an ITPageHeader with content area and built-in state handling for loading, error, and empty states. Provides automatic skeleton placeholders during loading, an error boundary with retry action, and a customizable empty state with action.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `string` | `undefined` | Page title passed to the header. |
-| `description` | `string` | `undefined` | Description text shown below the title. |
-| `breadcrumbs` | `ITBreadcrumbItem[]` | `undefined` | Breadcrumb navigation items. |
-| `actions` | `ReactNode` | `undefined` | Action buttons rendered in the header. |
-| `backAction` | `() => void` | `undefined` | Callback for the back button. |
-| `icon` | `ReactNode` | `undefined` | Icon displayed next to the title. |
-| `iconColor` | `string` | `undefined` | Custom color for the icon. |
-| `loading` | `boolean` | `false` | When true, shows skeleton placeholders instead of content. |
-| `error` | `string \| null` | `null` | Error message. When provided, shows an error state with retry button. |
-| `errorTitle` | `string` | `'Error'` | Custom title for the error state. |
-| `errorActionLabel` | `string` | `'Reintentar'` | Label for the retry button in the error state. |
-| `onRetry` | `() => void` | `undefined` | Callback when the retry button is clicked. |
-| `empty` | `boolean` | `false` | When true, shows an empty state placeholder. |
-| `emptyTitle` | `string` | `'Sin datos'` | Custom title for the empty state. |
-| `emptyDescription` | `string` | `undefined` | Custom description for the empty state. |
-| `emptyAction` | `ReactNode` | `undefined` | Custom action element for the empty state. |
-| `children` | `ReactNode` | required | Content rendered when no special state (loading/error/empty) is active. |
-| `maxWidth` | `'2xl' \| '3xl' \| '4xl' \| '5xl' \| '6xl' \| '7xl'` | `'7xl'` | Maximum width of the page content container. |
-| `noPadding` | `boolean` | `false` | When true, removes default padding from the page wrapper. Overrides `horizontalPadding`. |
-| `horizontalPadding` | `string` | `'px-4 sm:px-6 lg:px-8'` | Tailwind classes for the wrapper's horizontal padding. Use `'px-0'` for edge-to-edge content. Must be a literal — Tailwind scans source, so runtime-assembled values are not generated. |
-| `className` | `string` | `undefined` | Additional CSS classes for the page wrapper. |
-
-## Usage
-
-```tsx
-import { ITPage } from '@axzydev/axzy_ui_system';
-
-<ITPage title="Users" description="Manage system users" actions={<ITButton label="Add" />}>
-  <p>Your page content</p>
-</ITPage>
-
-<ITPage title="Dashboard" loading>
-  <p>Content not shown while loading</p>
-</ITPage>
-
-<ITPage
-  title="Orders"
-  error="Failed to load orders"
-  onRetry={() => refetch()}
->
-  <p>Content not shown while error</p>
-</ITPage>
-
-<ITPage
-  title="Notifications"
-  empty
-  emptyTitle="No notifications"
-  emptyAction={<ITButton label="Refresh" />}
->
-  <p>Content not shown while empty</p>
-</ITPage>
-```
-
-## Notes
-
-- State priority: `error` > `loading` > `empty` > `children`.
-- The loading state renders animated skeleton blocks matching common page patterns.
-- The error state renders a centered error icon, message, and a retry button.
-- The empty state renders a centered placeholder with optional title, description, and action.
-- All header props (`title`, `description`, `breadcrumbs`, `actions`, `backAction`, `icon`) are forwarded to ITPageHeader.
-- Content maximum width is controlled by Tailwind max-width classes via `maxWidth`.
-- `noPadding` is useful for full-bleed layouts like dashboards. It removes both axes and wins over `horizontalPadding`.
-- `horizontalPadding` tunes only the horizontal gutter, so you can keep the vertical rhythm while going edge-to-edge:
-  ```tsx
-  <ITPage title="Reportes" horizontalPadding="px-0">...</ITPage>
-  ```
-  Because Tailwind scans your source files, write the value as a literal. A value built at runtime (`"px-" + n`) will silently produce no padding.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/templates/page/page.stories.tsx

@@ -1,97 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import ITPage from "@/components/templates/page/page";
-import ITButton from "@/components/atoms/button/button";
-import ITCard from "@/components/molecules/card/card";
-
-const meta: Meta<typeof ITPage> = {
-  title: "Components/Layout/ITPage",
-  component: ITPage,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITPage>;
-
-export const Default: Story = {
-  args: {
-    title: "Usuarios",
-    description: "Gestión de usuarios del sistema",
-    children: (
-      <ITCard title="Contenido">
-        <p className="text-sm text-slate-600 dark:text-slate-400">
-          Aquí va el contenido de la página.
-        </p>
-      </ITCard>
-    ),
-  },
-};
-
-export const WithBreadcrumbsAndActions: Story = {
-  args: {
-    title: "Editar Producto",
-    description: "Modifica los datos del producto",
-    breadcrumbs: [
-      { label: "Productos", href: "#" },
-      { label: "Editar Producto" },
-    ],
-    actions: (
-      <>
-        <ITButton label="Cancelar" variant="outlined" size="sm" />
-        <ITButton label="Guardar" size="sm" />
-      </>
-    ),
-    children: (
-      <ITCard title="Información General">
-        <p className="text-sm text-slate-600 dark:text-slate-400">
-          Contenido del formulario aquí.
-        </p>
-      </ITCard>
-    ),
-  },
-};
-
-export const Loading: Story = {
-  args: {
-    title: "Dashboard",
-    loading: true,
-    children: null,
-  },
-};
-
-export const WithError: Story = {
-  args: {
-    title: "Órdenes",
-    error: "No se pudieron cargar las órdenes. Verifica tu conexión.",
-    onRetry: () => alert("Retry clicked"),
-    children: null,
-  },
-};
-
-export const Empty: Story = {
-  args: {
-    title: "Notificaciones",
-    empty: true,
-    emptyTitle: "Sin notificaciones",
-    emptyDescription: "No tienes notificaciones pendientes.",
-    emptyAction: <ITButton label="Recargar" size="sm" onClick={() => alert("Refresh")} />,
-    children: null,
-  },
-};
-
-export const WithBackAction: Story = {
-  args: {
-    title: "Detalle del Usuario",
-    description: "Información completa del usuario",
-    backAction: () => alert("Back"),
-    breadcrumbs: [
-      { label: "Usuarios", href: "#" },
-      { label: "Detalle" },
-    ],
-    children: (
-      <ITCard title="Perfil">
-        <p className="text-sm text-slate-600 dark:text-slate-400">
-          Contenido del detalle aquí.
-        </p>
-      </ITCard>
-    ),
-  },
-};

package/src/components/theme-provider/themeProvider.doc.mdx

@@ -1,85 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './themeProvider.stories';
-
-<Meta of={StoriesData} />
-
-# ITThemeProvider
-
-Root theme context that injects CSS custom properties into the entire component tree. Provides a centralized color palette with semantic tokens (primary, secondary, ternary, danger, success, info, alert, warning) plus overridable layout and table sections. Includes a floating action button that opens an in-app real-time theme designer drawer for live palette editing, dark/light/system mode switching, and preset themes.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `theme` | `Partial<ITThemePalette>` | — | Partial palette overrides merged with the default theme. Supports primary, secondary, ternary, danger, success, info, alert, warning, layout, and table colors. |
-| `children` | `React.ReactNode` | — | The subtree that receives the theme context and CSS variables. |
-| `showFab` | `boolean` | `false` | Whether to show the floating action button for opening the theme designer drawer. |
-| `density` | `number` | `1` | Global density/compactness factor: values below `1` shrink base sizes (fonts, paddings, gaps), above `1` grow them. Applies by scaling the root font-size so every `rem`-based token compacts together while the layout stays fluid. Clamped to `0.5`–`1.5`. |
-| `radius` | `number` | — | Global border radius in **px** applied to the whole rounding scale. `2` ⇒ 2px corners (near-square), `8` ⇒ 8px, `0` ⇒ square. No override when omitted (Tailwind defaults). |
-| `shadow` | `number` | `2` | Global shadow strength level: `0` ⇒ none, `1` ⇒ subtle, `2` ⇒ default current look, `3` ⇒ pronounced. No override when omitted (keeps defaults). |
-| `appearance` | `"soft" \| "flat"` | `"soft"` | Visual language. `"flat"` switches `ITCard`, `ITSidebar`, `ITTopBar` and `ITPageHeader` to flat surfaces (hairline borders, no shadows, no header icon tile) and sets `data-it-appearance` on `<html>`. Read it in your own components with `useITFlatAppearance()`. |
-
-### ITThemePalette Shape
-
-| Key | Type | Description |
-|-----|------|-------------|
-| `primary` | `string` | Primary color for buttons, links, active states. |
-| `secondary` | `string` | Secondary/muted color. |
-| `ternary` | `string` | Tertiary accent color. |
-| `danger` | `string` | Destructive action color. |
-| `success` | `string` | Positive/success color. |
-| `info` | `string` | Informational color. |
-| `alert` | `string` | Alert/warning highlight color. |
-| `warning` | `string` | Cautionary yellow color. |
-| `layout.sidebarBg` | `string` | Sidebar background color. |
-| `layout.sidebarText` | `string` | Sidebar text color. |
-| `layout.navbarBg` | `string` | Navbar background color. |
-| `layout.navbarText` | `string` | Navbar text color. |
-| `table.headerBg` | `string` | Table header background color. |
-| `table.headerText` | `string` | Table header text color. |
-| `table.rowBg` | `string` | Table row background color. |
-| `table.rowText` | `string` | Table row text color. |
-| `table.rowHover` | `string` | Table row background color while hovering a row. |
-
-## Usage
-
-```tsx
-import { ITThemeProvider } from '@axzydev/axzy_ui_system';
-
-<ITThemeProvider
-  theme={{
-    primary: '#8b5cf6',
-    success: '#22c55e',
-    layout: {
-      sidebarBg: '#0b1120',
-      sidebarText: '#94a3b8',
-    },
-  }}
->
-  <App />
-</ITThemeProvider>
-
-<ITThemeProvider showFab>
-  <App />
-</ITThemeProvider>
-
-{/* Cuadrado en todos lados y sombras nivel 2 */}
-<ITThemeProvider radius={2} shadow={2}>
-  <App />
-</ITThemeProvider>
-```
-
-## Notes
-
-- Wrap your entire application in `ITThemeProvider` once at the root level.
-- The default palette uses cyan (`#06b6d4`) as primary and supports all semantic color tokens.
-- **showFab** renders a floating palette icon. Clicking it opens a drawer with color pickers for each token, dark/light/system mode toggle, preset theme cards, live preview, and persistent localStorage save.
-- Theme preferences are persisted to localStorage under the `it-theme-palette` key.
-- All child components consume theme colors via CSS custom properties (e.g., `var(--it-primary)`) injected by the provider.
-- Custom palettes can override any subset of tokens; unset keys fall back to the default palette.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/theme-provider/themeProvider.stories.tsx

@@ -1,58 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ITThemeProvider from './themeProvider';
-import ITCard from '@/components/molecules/card/card';
-import ITButton from '@/components/atoms/button/button';
-import ITText from '@/components/atoms/text/text';
-
-const meta = {
-  title: 'Components/System/ITThemeProvider',
-  component: ITThemeProvider,
-  parameters: { layout: 'centered' },
-  argTypes: {
-    theme: { control: false, description: 'Custom theme palette to override defaults' },
-    children: { control: false, description: 'App content wrapped by the theme context' },
-    showFab: { control: 'boolean', description: 'Show the floating action button to open the theme designer' },
-  },
-} satisfies Meta<typeof ITThemeProvider>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const ThemedContent = () => (
-  <div className="p-8 space-y-4">
-    <ITCard title="Theme Demo" className="max-w-sm">
-      <div className="space-y-3">
-        <ITText as="p" className="text-sm text-slate-600 dark:text-slate-300">
-          This content is wrapped in ITThemeProvider and uses the current theme.
-        </ITText>
-        <div className="flex gap-2">
-          <ITButton label="Primary" color="primary" />
-          <ITButton label="Success" color="success" />
-          <ITButton label="Danger" color="danger" />
-        </div>
-      </div>
-    </ITCard>
-  </div>
-);
-
-export const Default: Story = {
-  args: {
-    children: <ThemedContent />,
-    showFab: false,
-  },
-};
-
-export const CustomPrimaryColor: Story = {
-  args: {
-    theme: { primary: '#8b5cf6', success: '#22c55e' },
-    children: <ThemedContent />,
-    showFab: false,
-  },
-};
-
-export const WithThemeFab: Story = {
-  args: {
-    children: <ThemedContent />,
-    showFab: true,
-  },
-};