@axzydev/axzy_ui_system 1.4.7 → 1.5.0

package/src/components/organisms/data-table/ITDataTable.stories.tsx

@@ -1,353 +0,0 @@
-import React, { useState, useCallback, useMemo } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { startOfDay, endOfDay } from 'date-fns';
-import ITDataTable from './dataTable';
-import { ITDataTableFetchParams, ITDataTableResponse } from './dataTable.props';
-import ITCard from '@/components/molecules/card/card';
-import ITBadget from '@/components/atoms/badget/badget';
-import ITDatePicker from '@/components/molecules/date-picker/datePicker';
-
-const meta: Meta<typeof ITDataTable> = {
-  title: 'Data Display/ITDataTable',
-  component: ITDataTable,
-  decorators: [
-    (Story) => (
-      <div className="p-8 bg-gray-50 min-h-screen">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof ITDataTable>;
-
-// --- MOCK CONSTANTS ---
-const ROLES = ['ADMIN', 'CAJERO', 'TECNICO', 'SUPERVISOR'];
-const MOCK_DATA = Array.from({ length: 100 }).map((_, i) => ({
-  id: i + 1,
-  username: `user_${i + 1}`,
-  name: `Nombre ${i + 1}`,
-  role: ROLES[i % ROLES.length],
-  active: i % 3 !== 0,
-  createdAt: new Date(Date.now() - i * 86400000).toISOString(),
-}));
-
-// --- MOCK FETCH FUNCTION ---
-const mockFetchItems = async (
-  params: ITDataTableFetchParams
-): Promise<ITDataTableResponse<any>> => {
-  console.log('Fetching with params:', params);
-  
-  // Simulate network delay
-  await new Promise((resolve) => setTimeout(resolve, 800));
-
-  let filtered = [...MOCK_DATA];
-
-  // Apply filters
-  Object.entries(params.filters).forEach(([key, value]) => {
-    if (value === undefined || value === '') return;
-    
-    if (key === 'username') {
-      filtered = filtered.filter(item => 
-        item.username.toLowerCase().includes(String(value).toLowerCase())
-      );
-    } else if (key === 'role') {
-      filtered = filtered.filter(item => item.role === value);
-    } else if (key === 'active') {
-      filtered = filtered.filter(item => item.active === value);
-    }
-  });
-
-  // Apply sorting
-  if (params.sort) {
-    const { key, direction } = params.sort;
-    filtered.sort((a: any, b: any) => {
-      if (a[key] < b[key]) return direction === 'asc' ? -1 : 1;
-      if (a[key] > b[key]) return direction === 'asc' ? 1 : -1;
-      return 0;
-    });
-  }
-
-  // Apply pagination
-  const start = (params.page - 1) * params.limit;
-  const end = start + params.limit;
-  const data = filtered.slice(start, end);
-
-  return {
-    data,
-    total: filtered.length,
-  };
-};
-
-const columns = [
-  {
-    key: 'id',
-    label: 'ID',
-    type: 'number' as const,
-    sortable: true,
-  },
-  {
-    key: 'username',
-    label: 'Usuario',
-    type: 'string' as const,
-    filter: true,
-    sortable: true,
-  },
-  {
-    key: 'name',
-    label: 'Nombre Completo',
-    type: 'string' as const,
-    filter: true,
-  },
-  {
-    key: 'role',
-    label: 'Rol',
-    type: 'string' as const,
-    filter: 'catalog' as const,
-    catalogOptions: {
-      loading: false,
-      data: [
-        { id: 'ADMIN', name: 'Administrador' },
-        { id: 'CAJERO', name: 'Cajero' },
-        { id: 'TECNICO', name: 'Técnico' },
-        { id: 'SUPERVISOR', name: 'Supervisor' },
-      ],
-    },
-    render: (row: any) => (
-      <ITBadget 
-        label={row.role} 
-        color={
-          row.role === 'ADMIN' ? 'primary' : 
-          row.role === 'CAJERO' ? 'success' : 
-          row.role === 'TECNICO' ? 'warning' : 'secondary'
-        } 
-      />
-    )
-  },
-  {
-    key: 'active',
-    label: 'Estado',
-    type: 'boolean' as const,
-    filter: true,
-    sortable: true,
-  },
-];
-
-export const Default: Story = {
-  args: {
-    title: 'Gestión de Usuarios',
-    columns,
-    fetchData: mockFetchItems,
-    defaultItemsPerPage: 10,
-  },
-};
-
-// Column widths keep the fixed layout from forcing horizontal scroll.
-const fixedColumns = columns.map((col, i) => ({
-  ...col,
-  width: [64, '28%', '34%', '22%', '16%'][i],
-  truncate: col.type === 'string' || col.type === 'catalog',
-})) as any;
-
-export const FixedLayoutCompact: Story = {
-  args: {
-    title: 'Compact fixed layout',
-    columns: fixedColumns,
-    fetchData: mockFetchItems,
-    defaultItemsPerPage: 10,
-    layout: 'fixed',
-    density: 'compact',
-  },
-};
-
-// Pixel widths push the total past the 520px wrapper: the first column stays
-// frozen left and the last one frozen right while the middle scrolls sideways.
-const pinnedColumns = columns.map((col, i) => ({
-  ...col,
-  width: [72, 240, 280, 160, 120][i],
-  pinned: i === 0 ? 'left' : i === columns.length - 1 ? 'right' : undefined,
-  truncate: col.type === 'string' || col.type === 'catalog',
-})) as any;
-
-export const PinnedColumns: Story = {
-  render: (args) => (
-    <div style={{ width: 520 }}>
-      <ITDataTable {...args} />
-    </div>
-  ),
-  args: {
-    title: 'Pinned left & right columns',
-    columns: pinnedColumns,
-    fetchData: mockFetchItems,
-    defaultItemsPerPage: 10,
-    layout: 'fixed',
-    density: 'compact',
-  },
-};
-
-export const VirtualizedLargeDataset: Story = {
-  args: {
-    title: 'Virtualized · 100 rows',
-    columns: fixedColumns,
-    fetchData: mockFetchItems,
-    defaultItemsPerPage: 100,
-    itemsPerPageOptions: [10, 50, 100],
-    virtualized: true,
-    stickyHeader: true,
-    layout: 'fixed',
-    density: 'compact',
-    virtualizedMaxHeight: 360,
-  },
-};
-
-export const RemoteWithExternalFilters: Story = {
-  render: () => {
-    const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
-    const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([null, null]);
-
-    // Stable references for ITDataTable
-    const memoizedFetch = useCallback(mockFetchItems, []);
-    const memoizedColumns = useMemo(() => columns, []);
-    const externalFilters = useMemo(() => ({
-      date: selectedDate,
-      startDate: dateRange[0],
-      endDate: dateRange[1]
-    }), [selectedDate, dateRange]);
-
-    return (
-      <div className="space-y-6">
-        <ITCard title="Filtros Globales de Negocio" className="bg-white">
-          <div className="flex flex-wrap gap-4 items-end">
-            <div className="w-64">
-              <ITDatePicker
-                name="single"
-                label="Fecha Específica"
-                value={selectedDate}
-                onChange={(e: any) => setSelectedDate(e.target.value)}
-                placeholder="Seleccionar..."
-              />
-            </div>
-            <div className="w-80">
-              <ITDatePicker
-                range
-                name="range"
-                label="Rango de Auditoría"
-                value={dateRange}
-                onChange={(e: any) => setDateRange(e.target.value)}
-                placeholder="Seleccionar rango..."
-              />
-            </div>
-            <button 
-              onClick={() => { setSelectedDate(undefined); setDateRange([null, null]); }}
-              className="px-4 py-2 text-sm text-primary-600 hover:text-primary-700 font-medium"
-            >
-              Resetear Filtros
-            </button>
-          </div>
-        </ITCard>
-
-        <ITDataTable
-          title="Resultados Filtrados"
-          columns={memoizedColumns}
-          fetchData={memoizedFetch}
-          externalFilters={externalFilters}
-          defaultItemsPerPage={5}
-        />
-      </div>
-    );
-  }
-};
-
-export const WithRowClick: Story = {
-  args: {
-    title: 'Filas clickeables',
-    columns,
-    fetchData: mockFetchItems,
-    defaultItemsPerPage: 10,
-    onRowClick: (row: any) => console.log('Row clicked:', row),
-  },
-};
-
-export const WithSearchAndDateFilters: Story = {
-  render: () => {
-    const searchDateFetch = useCallback(
-      async (params: ITDataTableFetchParams): Promise<ITDataTableResponse<any>> => {
-        await new Promise((r) => setTimeout(r, 400));
-        let filtered = [...MOCK_DATA];
-
-        Object.entries(params.filters).forEach(([key, value]) => {
-          if (value === undefined || value === '') return;
-
-          if (key === 'role') {
-            filtered = filtered.filter((item) => item.role === value);
-          } else if (key === 'createdAt') {
-            if (Array.isArray(value)) {
-              const [rangeStart, rangeEnd] = value as [Date | null, Date | null];
-              if (!rangeStart && !rangeEnd) return;
-              filtered = filtered.filter((item) => {
-                const time = new Date(item.createdAt).getTime();
-                if (rangeStart && time < startOfDay(rangeStart).getTime()) return false;
-                if (rangeEnd && time > endOfDay(rangeEnd).getTime()) return false;
-                return true;
-              });
-            } else if (value instanceof Date) {
-              filtered = filtered.filter(
-                (item) => new Date(item.createdAt).toDateString() === value.toDateString()
-              );
-            }
-          }
-        });
-
-        const start = (params.page - 1) * params.limit;
-        return { data: filtered.slice(start, start + params.limit), total: filtered.length };
-      },
-      []
-    );
-
-    const filterColumns = useMemo(
-      () => [
-        { key: 'username', label: 'Usuario', type: 'string' as const, filter: true, sortable: true },
-        {
-          key: 'role',
-          label: 'Rol (ITSearchSelect)',
-          type: 'string' as const,
-          filter: 'search' as const,
-          sortable: true,
-          catalogOptions: { data: ROLES.map((role) => ({ id: role, name: role })) },
-          render: (row: any) => <ITBadget label={row.role} />,
-        },
-        {
-          key: 'createdAt',
-          label: 'Alta (ITDatePicker range)',
-          type: 'date' as const,
-          filter: 'date-range' as const,
-          sortable: true,
-          dateFilterOptions: { maxDate: new Date() },
-          render: (row: any) => new Date(row.createdAt).toLocaleDateString('es-MX'),
-        },
-      ],
-      []
-    );
-
-    return (
-      <ITDataTable
-        title="Filtros: ITSearchSelect + ITDatePicker (rango)"
-        columns={filterColumns as any}
-        fetchData={searchDateFetch}
-        defaultItemsPerPage={8}
-      />
-    );
-  },
-};
-
-export const SkeletonLoading: Story = {
-  args: {
-    title: 'Cargando Datos...',
-    columns,
-    fetchData: async () => {
-        await new Promise(r => setTimeout(r, 10000));
-        return { data: [], total: 0 };
-    },
-  },
-};

package/src/components/organisms/dialog/dialog.doc.mdx

@@ -1,54 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './dialog.stories';
-
-<Meta of={StoriesData} />
-
-# ITDialog
-
-Modal dialog rendered via a React portal with a semi-transparent overlay backdrop. Supports optional title bar (plain or ITFormHeader), Escape-key dismissal, and a full-screen variant.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `isOpen` | `boolean` | — | Controls dialog visibility. |
-| `onClose` | `() => void` | — | Called on overlay click, close button, or Escape key. |
-| `children` | `ReactNode` | — | Content rendered in the dialog body. |
-| `className` | `string` | — | CSS classes for the dialog panel (e.g., `"w-96"` for width). |
-| `title` | `string` | — | Optional heading at the top of the dialog. |
-| `useFormHeader` | `boolean` | `false` | When true and `title` is set, renders an ITFormHeader with colored styling. |
-| `fullScreen` | `boolean` | `false` | Makes the dialog fill the entire viewport. |
-
-## Usage
-
-```tsx
-import { ITDialog } from '@axzydev/axzy_ui_system';
-
-<ITDialog
-  isOpen={open}
-  onClose={() => setOpen(false)}
-  title="User Details"
-  useFormHeader
-  className="w-[500px]"
->
-  <UserForm />
-</ITDialog>
-
-<ITDialog isOpen={open} onClose={close} fullScreen>
-  <FullPageEditor />
-</ITDialog>
-```
-
-## Notes
-
-- Content is portaled to `document.body` via `createPortal`, ensuring it renders above all page layers.
-- Click outside the dialog panel or pressing Escape dismisses it.
-- When `useFormHeader` is true, the header uses the ITFormHeader design pattern with brand coloring.
-- Control the dialog width via the `className` prop (e.g., `"w-96"`, `"w-[600px]"`).
-- The overlay uses `bg-black/50` for a darkened backdrop effect.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/organisms/dialog/dialog.stories.tsx

@@ -1,126 +0,0 @@
-import type { Meta } from '@storybook/react';
-import ITDialog from '@/components/organisms/dialog/dialog';
-import ITSearchSelect from '@/components/molecules/search-select/search-select';
-import { useState } from 'react';
-import { expect, userEvent, within } from 'storybook/test';
-import ITButton from '@/components/atoms/button/button';
-
-const meta = {
-  title: 'Components/Feedback/ITDialog',
-  component: ITDialog,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    isOpen: { control: 'boolean' },
-    onClose: { action: 'closed' },
-    title: { control: 'text' },
-    useFormHeader: { control: 'boolean' },
-  },
-} satisfies Meta<typeof ITDialog>;
-
-export default meta;
-
-// Wrapper to handle open/close state
-const DialogWrapper = (args: any) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <div>
-       <ITButton onClick={() => setIsOpen(true)}>Open Dialog</ITButton>
-       <ITDialog {...args} isOpen={isOpen} onClose={() => setIsOpen(false)}>
-         {args.children}
-       </ITDialog>
-    </div>
-  );
-};
-
-export const Default: any = {
-  render: (args) => <DialogWrapper {...args} />,
-  args: {
-    title: 'Basic Dialog',
-    children: <p className="text-gray-600">This is a simple dialog usage standard headers.</p>,
-    useFormHeader: false,
-    className: 'w-96',
-  } as any,
-};
-
-export const WithFormHeader: any = {
-  render: (args) => <DialogWrapper {...args} />,
-  args: {
-    title: 'Form Header Dialog',
-    children: (
-        <div className="space-y-4">
-            <p className="text-gray-600">This dialog uses the standard form header styling.</p>
-            <div className="flex justify-end">
-                <ITButton variant="primary">Confirm</ITButton>
-            </div>
-        </div>
-    ),
-    useFormHeader: true,
-    className: 'w-[500px]',
-  } as any,
-};
-
-export const LongContent: any = {
-  render: (args) => <DialogWrapper {...args} />,
-  args: {
-    title: 'Terms of Service',
-    children: (
-        <div className="h-64 overflow-y-auto text-sm text-gray-600">
-            <p className="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-            <p className="mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-            <p className="mb-4">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
-            <p className="mb-4">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
-        </div>
-    ),
-    useFormHeader: true,
-    className: 'w-[600px]',
-  } as any,
-};
-
-// Dialog opened on mount but controlled, so an unexpected close is observable.
-const DialogWithSearchSelect = () => {
-  const [fruit, setFruit] = useState('');
-  const [isOpen, setIsOpen] = useState(true);
-
-  return (
-    <ITDialog isOpen={isOpen} onClose={() => setIsOpen(false)} title="Fruta favorita">
-      <ITSearchSelect
-        label="Fruta"
-        placeholder="Busca una fruta..."
-        options={[
-          { value: 'apple', label: 'Apple' },
-          { value: 'banana', label: 'Banana' },
-        ]}
-        value={fruit}
-        onChange={(next) => setFruit(String(next))}
-      />
-    </ITDialog>
-  );
-};
-
-/**
- * Regression test: floating panels (selects, pickers, menus) are portaled to
- * `<body>`, so they live outside the dialog DOM. Picking an option there must
- * not count as a click outside the dialog.
- *
- * Note the whole dialog and its dropdown are portaled, so they are queried
- * from `document.body` instead of the story canvas.
- */
-export const FloatingPanelInsideDialog: any = {
-  render: () => <DialogWithSearchSelect />,
-  play: async () => {
-    const view = within(document.body);
-
-    const input = await view.findByPlaceholderText('Busca una fruta...');
-    await userEvent.click(input);
-
-    await userEvent.click(await view.findByText('Banana'));
-
-    // The dialog must still be mounted after picking an option.
-    await expect(view.getByText('Fruta favorita')).toBeVisible();
-    await expect((input as HTMLInputElement).value).toBe('Banana');
-  },
-};
-

package/src/components/organisms/drawer/drawer.doc.mdx

@@ -1,59 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './drawer.stories';
-
-<Meta of={StoriesData} />
-
-# ITDrawer
-
-A sliding panel that emerges from the left or right edge with a backdrop overlay. Includes an optional title bar with close button and a scrollable body. Ideal for side panels, navigation menus, filters, and detail views.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `isOpen` | `boolean` | — | Controls drawer visibility. |
-| `onClose` | `() => void` | — | Called on overlay click or close button press. |
-| `position` | `"left" \| "right"` | `"right"` | Screen edge the drawer attaches to. |
-| `size` | `string` | `"w-80"` | Tailwind width class (e.g., `"w-72"`, `"w-96"`). |
-| `title` | `ReactNode` | — | Optional heading in the drawer header. |
-| `children` | `ReactNode` | — | Content displayed in the drawer body. |
-| `className` | `string` | — | Additional CSS classes for the drawer panel. |
-| `style` | `CSSProperties` | — | Inline styles for the drawer panel. |
-
-## Usage
-
-```tsx
-import { ITDrawer } from '@axzydev/axzy_ui_system';
-
-<ITDrawer
-  isOpen={menuOpen}
-  onClose={() => setMenuOpen(false)}
-  title="Navigation"
-  position="left"
-  size="w-72"
->
-  <NavMenu />
-</ITDrawer>
-
-<ITDrawer
-  isOpen={filterOpen}
-  onClose={() => setFilterOpen(false)}
-  title="Filters"
->
-  <FilterPanel />
-</ITDrawer>
-```
-
-## Notes
-
-- The overlay uses `bg-black/40 backdrop-blur-sm` for a blurred background effect.
-- Overlay click outside the panel dismisses the drawer via `useClickOutside`.
-- The body area scrolls independently (`overflow-y-auto`), keeping the header fixed.
-- Default size `w-80` (320px); adjust with any Tailwind width class like `w-96` (384px) or `w-[400px]`.
-- No built-in footer slot — add buttons or actions directly in the children content.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/organisms/drawer/drawer.stories.tsx

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import ITDrawer from "@/components/organisms/drawer/drawer";
-import ITButton from "@/components/atoms/button/button";
-
-const meta: Meta<typeof ITDrawer> = {
-  title: "Components/Overlay/ITDrawer",
-  component: ITDrawer,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITDrawer>;
-
-export const Default: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-    return (
-      <>
-        <ITButton label="Abrir Drawer" onClick={() => setOpen(true)} />
-        <ITDrawer isOpen={open} onClose={() => setOpen(false)} title="Panel Lateral">
-          <p className="text-sm text-slate-600 dark:text-slate-300">Contenido del drawer.</p>
-        </ITDrawer>
-      </>
-    );
-  },
-};
-
-export const PositionLeft: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-    return (
-      <>
-        <ITButton label="Abrir Izquierda" onClick={() => setOpen(true)} />
-        <ITDrawer isOpen={open} onClose={() => setOpen(false)} position="left" title="Menú">
-          <p className="text-sm text-slate-600">Drawer desde la izquierda.</p>
-        </ITDrawer>
-      </>
-    );
-  },
-};