@axzydev/axzy_ui_system 1.4.7 → 1.5.0

package/src/components/molecules/time-picker/timePicker.stories.tsx

@@ -1,130 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ITTimePicker from "./timePicker";
-import { useState } from "react";
-
-const meta: Meta<typeof ITTimePicker> = {
-  title: "Components/Form Elements/ITTimePicker",
-  component: ITTimePicker,
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-    color: {
-      control: "select",
-      options: ["primary", "secondary", "success", "danger", "warning", "info", "purple"],
-    },
-    size: {
-      control: "select",
-      options: ["small", "medium", "large"],
-    },
-    variant: {
-      control: "select",
-      options: ["primary", "secondary"],
-    },
-    disabled: {
-      control: "boolean",
-    },
-    required: {
-      control: "boolean",
-    },
-    error: {
-      control: "text",
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div className="w-[300px]">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof ITTimePicker>;
-
-// Helper to wrap uncontrolled behavior
-const TimePickerWrapper = (args: any) => {
-  const [value, setValue] = useState(args.value || "");
-  const [touched, setTouched] = useState(false);
-
-  return (
-    <ITTimePicker
-      {...args}
-      value={value}
-      touched={touched}
-      onChange={(e) => {
-        setValue(e.target.value);
-        if (args.onChange) args.onChange(e);
-      }}
-      onBlur={(e) => {
-        setTouched(true);
-        if (args.onBlur) args.onBlur(e);
-      }}
-    />
-  );
-};
-
-export const Default: Story = {
-  render: (args) => <TimePickerWrapper {...args} />,
-  args: {
-    name: "default_time",
-    label: "Select Time",
-    placeholder: "HH:MM",
-    color: "primary",
-  },
-};
-
-export const WithPredefinedValue: Story = {
-  render: (args) => <TimePickerWrapper {...args} />,
-  args: {
-    name: "predefined_time",
-    label: "Meeting Time",
-    value: "14:30",
-    color: "success",
-  },
-};
-
-export const Disabled: Story = {
-  render: (args) => <TimePickerWrapper {...args} />,
-  args: {
-    name: "disabled_time",
-    label: "Unavailable Time",
-    value: "09:00",
-    disabled: true,
-  },
-};
-
-export const Validation: Story = {
-  render: (args) => <TimePickerWrapper {...args} />,
-  args: {
-    name: "validation_time",
-    label: "End Time",
-    value: "25:99", // Invalid time string to trigger intrinsic validation
-    touched: true, // Force validation display
-    error: "Custom error message if passed explicitly",
-  },
-};
-
-export const Sizes: Story = {
-  render: (args) => (
-    <div className="flex flex-col gap-6">
-      <TimePickerWrapper {...args} size="sm" label="Small TimePicker" name="sm" />
-      <TimePickerWrapper {...args} size="md" label="Medium TimePicker" name="md" />
-      <TimePickerWrapper {...args} size="lg" label="Large TimePicker" name="lg" />
-    </div>
-  ),
-  args: {
-    value: "10:15",
-  },
-};
-
-export const Colors: Story = {
-  render: (args) => (
-    <div className="flex flex-col gap-6">
-      <TimePickerWrapper {...args} color="primary" label="Primary Theme Highlight" name="c1" value="12:00" />
-      <TimePickerWrapper {...args} color="danger" label="Danger Theme Highlight" name="c2" value="13:15" />
-      <TimePickerWrapper {...args} color="purple" label="Purple Theme Highlight" name="c3" value="14:45" />
-    </div>
-  ),
-};

package/src/components/molecules/wysiwyg/wysiwyg.stories.tsx

@@ -1,95 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import ITWysiwyg from '@/components/molecules/wysiwyg/wysiwyg';
-
-const meta = {
-  title: 'Components/Form/ITWysiwyg',
-  component: ITWysiwyg,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-    },
-    toolbar: {
-      control: 'select',
-      options: [
-        ['bold', 'italic', 'underline', 'highlight', 'ul', 'ol', 'clear'],
-        ['bold', 'italic', 'underline'],
-        ['ul', 'ol'],
-      ],
-    },
-  },
-} satisfies Meta<typeof ITWysiwyg>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    placeholder: 'Escribe algo...',
-    minHeight: 140,
-  },
-};
-
-export const WithLabel: Story = {
-  args: {
-    label: 'Descripción',
-    placeholder: 'Texto libre...',
-  },
-};
-
-export const WithValue: Story = {
-  args: {
-    value: '<div>Texto con <strong>negrita</strong>, <em>itálica</em> y <u>subrayado</u>.</div><div><mark style="background-color:#fde68a">Con marcador</mark> y:</div><ul><li>Elemento uno</li><li>Elemento dos</li></ul>',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    value: '<div>Contenido bloqueado para edición.</div>',
-  },
-};
-
-export const ReadOnly: Story = {
-  args: {
-    readOnly: true,
-    label: 'Vista previa',
-    value: '<div>Solo lectura, sin toolbar activo.</div>',
-  },
-};
-
-export const WithError: Story = {
-  args: {
-    label: 'Descripción',
-    error: 'Este campo es obligatorio.',
-    value: '',
-  },
-};
-
-export const CustomHighlight: Story = {
-  args: {
-    highlightColor: '#a7f3d0',
-    label: 'Marcador verde',
-  },
-};
-
-export const LiveValue: Story = {
-  render: (args) => {
-    const [html, setHtml] = useState<string>(
-      '<div>Edita aquí y mira el HTML generado abajo.</div>'
-    );
-    return (
-      <div className="w-96 space-y-4">
-        <ITWysiwyg {...args} value={html} onChange={setHtml} />
-        <pre className="max-h-40 overflow-auto rounded-lg bg-slate-950 p-3 text-[10px] text-emerald-300">
-          <code>{html}</code>
-        </pre>
-      </div>
-    );
-  },
-  args: {},
-};

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

@@ -1,60 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './confirm-dialog.stories';
-
-<Meta of={StoriesData} />
-
-# ITConfirmDialog
-
-Confirmation modal dialog for destructive or critical actions. Renders a centered overlay with a warning icon, title, message body, and confirm/cancel buttons. Supports loading state and configurable button colors.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `isOpen` | `boolean` | — | Controls whether the confirmation dialog is visible. |
-| `onClose` | `() => void` | — | Callback fired when the user cancels or closes the dialog (overlay click or cancel button). |
-| `onConfirm` | `() => void` | — | Callback fired when the user confirms the action. |
-| `title` | `string` | `"Confirmar acción"` | Heading text displayed at the top of the dialog. |
-| `message` | `ReactNode` | `"¿Estás seguro de que deseas continuar?"` | Body content — accepts plain strings or React nodes. |
-| `confirmLabel` | `string` | `"Confirmar"` | Label for the confirm button. |
-| `cancelLabel` | `string` | `"Cancelar"` | Label for the cancel button. |
-| `variant` | `ColorsTypes` | `"primary"` | Color variant applied to the confirm button. Accepts `primary`, `danger`, `warning`, `info`, etc. |
-| `loading` | `boolean` | `false` | Disables all buttons and signals a loading state. |
-
-## Usage
-
-```tsx
-import { ITConfirmDialog } from '@axzydev/axzy_ui_system';
-import { useState } from 'react';
-
-const [open, setOpen] = useState(false);
-
-<ITButton label="Eliminar" color="danger" onClick={() => setOpen(true)} />
-
-<ITConfirmDialog
-  isOpen={open}
-  onClose={() => setOpen(false)}
-  onConfirm={() => { handleDelete(); setOpen(false); }}
-  title="Eliminar usuario"
-  message="Esta acción no se puede deshacer. ¿Deseas eliminar este usuario?"
-  confirmLabel="Eliminar"
-  variant="danger"
-  loading={isDeleting}
-/>
-```
-
-## Notes
-
-- The dialog renders `null` when `isOpen` is `false`, so it does not remain in the DOM.
-- A semi-transparent **backdrop** (`bg-black/40 backdrop-blur-sm`) covers the screen; clicking it triggers `onClose`.
-- The dialog card has rounded corners (`rounded-2xl`), a light border, and a subtle shadow.
-- A warning icon (`FaExclamationTriangle` in amber) is always displayed alongside the title and message.
-- **variant** controls the confirm button color via the `color` prop on `ITButton`; the cancel button always uses the `outlined` variant.
-- **loading** disables both buttons to prevent double-submission during async operations.
-- By default, spans and text use dark mode–aware colors (`dark:text-white`, `dark:text-slate-400`).
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

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

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import ITConfirmDialog from "@/components/organisms/confirm-dialog/confirm-dialog";
-import ITButton from "@/components/atoms/button/button";
-
-const meta: Meta<typeof ITConfirmDialog> = {
-  title: "Components/Overlay/ITConfirmDialog",
-  component: ITConfirmDialog,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITConfirmDialog>;
-
-export const Default: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-    return (
-      <>
-        <ITButton label="Eliminar" color="danger" onClick={() => setOpen(true)} />
-        <ITConfirmDialog
-          isOpen={open}
-          onClose={() => setOpen(false)}
-          onConfirm={() => { alert("Confirmado"); setOpen(false); }}
-          title="Eliminar usuario"
-          message="Esta acción no se puede deshacer. ¿Deseas eliminar este usuario?"
-          confirmLabel="Eliminar"
-          variant="danger"
-        />
-      </>
-    );
-  },
-};

package/src/components/organisms/data-table/ITDataTable.doc.mdx

@@ -1,115 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './ITDataTable.stories';
-
-<Meta of={StoriesData} />
-
-# ITDataTable
-
-Advanced server-side data table with automatic pagination, column sorting, and filtering. Communicates via a `fetchData` callback that receives page, limit, filters, and sort parameters, and returns paginated data with a total count. Built on top of the internal table hooks for cohesive state management.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `columns` | `Column<T>[]` | — | Column definitions with key, label, type, sortable, filter, render, plus layout fields: `width` (`number` px or CSS `string`), `minWidth` (px), `align` (`"left" \| "center" \| "right"`), `truncate` (ellipsis + native `title`), and `pinned` (`"left" \| "right"`). |
-| `fetchData` | `(params: ITDataTableFetchParams) => Promise<ITDataTableResponse<T>>` | — | Async callback triggered on pagination, filter, or sort change. Must return `{ data, total }`. |
-| `debounceMs` | `number` | `500` | Delay in ms before firing fetch after filter state changes. |
-| `externalFilters` | `ColumnFilters` | `{}` | Filters managed outside the table (e.g., date pickers) merged with internal column filters. Values may be scalars, a `Date`, or a `[start, end]` tuple. |
-| `loadingIndicator` | `ReactNode` | `<FaSpinner />` | Custom element shown while loading. |
-| `fetchOnMount` | `boolean` | `true` | Whether to fetch data on initial mount. |
-| `reloadTrigger` | `number \| string \| boolean` | — | Changing this value forces a re-fetch. Use after mutations. |
-| `containerClassName` | `string` | — | CSS classes for the outer wrapper. |
-| `className` | `string` | — | CSS classes applied to the `<table>` element. |
-| `variant` | `"default" \| "striped" \| "bordered" \| "minimal"` | `"default"` | Visual style variant. `"minimal"` is accepted by the type but has no styles (renders like `"default"`). |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Font-size preset (does not change padding; use `density` for that). |
-| `itemsPerPageOptions` | `number[]` | `[5, 10, 20]` | Selectable page-size options. |
-| `defaultItemsPerPage` | `number` | `10` | Initial rows per page. |
-| `title` | `string \| ReactNode` | — | Heading displayed above the table. |
-| `renderCard` | `(row: T) => ReactNode` | — | Custom card renderer for the cards view. |
-| `defaultView` | `"table" \| "cards"` | `"table"` | Initial view mode. |
-| `showVerticalBorder` | `boolean` | `true` | Show vertical borders between columns. |
-| `verticalBorderClassname` | `string` | — | Custom class for the vertical borders. |
-| `onRowClick` | `(row: T, event: MouseEvent<HTMLElement> \| KeyboardEvent<HTMLElement>) => void` | — | Row/card activation. `MouseEvent` for pointer, `KeyboardEvent` for Enter/Space. Skipped when the interaction starts inside an interactive child. |
-| `layout` | `"auto" \| "fixed"` | `"auto"` | Table layout algorithm. `"fixed"` honors column `width` values and drops the `min-w-max` / `min-w-[150px]` floors so content no longer forces horizontal scrolling. |
-| `density` | `"compact" \| "normal" \| "comfortable"` | `"normal"` | Cell padding / row-height preset. Independent of `size`, which only controls font-size. |
-| `autoCardBreakpoint` | `number` | `0` | Container width (px) below which the table automatically falls back to the cards view. `0` disables the fallback. |
-| `virtualized` | `boolean` | `false` | Renders only the visible row window with spacer rows preserving scroll height. Table view only; cards view is never virtualized. |
-| `virtualizedMaxHeight` | `number` | `400` | Max height (px) of the virtualized scroll container. Only used when `virtualized` is true. |
-| `rowHeight` | `number` | `getRowHeight(size, density)` | Assumed uniform row height (px). Size-aware: `size="md"` baseline is 33 / 45 / 53 for compact / normal / comfortable; `size` shifts it by the font-size line box (sm 16px / md 20px / lg 28px). |
-| `overscan` | `number` | `5` | Extra rows rendered above and below the viewport to avoid blank gaps. |
-| `stickyHeader` | `boolean` | `false` | Keeps header cells sticky while the virtualized body scrolls. Only effective when `virtualized` is true. |
-
-## Usage
-
-```tsx
-import { ITDataTable } from '@axzydev/axzy_ui_system';
-
-<ITDataTable
-  title="Users"
-  columns={[
-    { key: 'id', label: 'ID', type: 'number', sortable: true },
-    { key: 'name', label: 'Name', type: 'string', sortable: true, filter: true },
-    { key: 'role', label: 'Role', type: 'string', filter: 'catalog', catalogOptions: { data: roles } },
-    { key: 'active', label: 'Status', type: 'boolean', filter: true, sortable: true },
-  ]}
-  fetchData={async (params) => api.fetchItems(params)}
-  variant="bordered"
-/>
-
-// Search + date filters (values arrive in params.filters)
-<ITDataTable
-  columns={[
-    { key: 'role', label: 'Role', type: 'string', filter: 'search', catalogOptions: { data: roles, onSearch: (q) => api.searchRoles(q) } },
-    { key: 'hiredAt', label: 'Hired', type: 'date', filter: 'date-range', dateFilterOptions: { maxDate: new Date() } },
-  ]}
-  fetchData={async (params) => api.fetchItems(params)}
-/>
-
-// No horizontal scroll: fixed layout + per-column widths + truncation
-<ITDataTable
-  columns={[
-    { key: 'name',  label: 'Name',  type: 'string', width: '30%', truncate: true },
-    { key: 'email', label: 'Email', type: 'string', width: 220,    truncate: true },
-    { key: 'role',  label: 'Role',  type: 'string', width: 140,    align: 'center' },
-  ]}
-  fetchData={async (params) => api.fetchItems(params)}
-  layout="fixed"
-  density="compact"
-/>
-
-// Pinned columns: freeze ID left and the last column right during horizontal scroll
-<ITDataTable
-  columns={[
-    { key: 'id',     label: 'ID',     type: 'number',  width: 72,  pinned: 'left' },
-    { key: 'name',   label: 'Name',   type: 'string',  width: 240, truncate: true },
-    { key: 'active', label: 'Active', type: 'boolean', width: 120, pinned: 'right' },
-  ]}
-  fetchData={async (params) => api.fetchItems(params)}
-  layout="fixed"
-  density="compact"
-/>
-```
-
-## Notes
-
-- Column filters support `true` (text/number input, or boolean tri-state toggle for `type: "boolean"`), `"catalog"` (`ITSelect`), `"search"` (`ITSearchSelect` typeahead; add `catalogOptions.onSearch` for server-side search), and `"date"` / `"date-range"` (`ITDatePicker`, bounded by `dateFilterOptions`). In `fetchData(params)`, `params.filters[key]` is a `Date` for `"date"`, a `[start, end]` tuple for `"date-range"`, and the scalar/id otherwise.
-- The `externalFilters` prop allows integrating external filter controls like date pickers without building filter UI into the table itself.
-- Debounce prevents excessive API calls while the user types in filter inputs.
-- A loading skeleton overlay covers the table body while fetching, keeping the header visible.
-- Empty state is shown automatically when no results match the current filters.
-- `onRowClick` fires in **both** the table and cards views. The event is a `MouseEvent` for pointer interaction and a `KeyboardEvent` for Enter/Space activation. It is not fired while `isLoading`, and interactions that start inside an interactive child (button, link, input, or `[data-row-click-ignore]`) are ignored.
-- `density` controls padding/row height (`compact` 33px / `normal` 45px / `comfortable` 53px at `size="md"`); `size` changes font-size and shifts the row height by the line box (sm 16px / md 20px / lg 28px).
-- **Anti horizontal scroll recipe:** `layout="fixed"` + a `width` on every column + `truncate` on long text + `density="compact"`. `width` accepts a `number` (px) or any CSS length string (`"20%"`, `"12rem"`). A `<colgroup>` is only emitted when at least one column defines a `width`.
-- **Pinned columns:** set `columns[].pinned: "left" | "right"` to freeze a column to that edge during horizontal scroll (`position: sticky`; the wrapper needs no `relative`). Omitting `pinned` renders exactly as before. Sticky offsets accumulate from each preceding pinned column's pixel `width` / `minWidth`; a non-px width contributes `minWidth ?? 0`, so give every pinned column of a side a pixel `width`. The pinned cell gets an opaque background (`--color-table-rowBg`, row hover `--color-table-rowHover`) and a 1px separator shadow on its frozen edge. Z-layering: pinned body cell `z-[1]` < sticky header `z-10` < pinned header `z-[15]` < the loading overlay `z-20`; it composes with `stickyHeader` and `virtualized`. One pinned column per side is the supported contract. Known limitation: with `variant="striped"` the opaque pinned background covers that column's stripe tint.
-- With the default `layout="auto"`, `min-w-max` stays active so column widths can still reflow as different cell content enters the window during vertical scroll. Use `layout="fixed"` + column `width` for stable widths.
-- `autoCardBreakpoint` swaps to the cards view when the container (not the viewport) is narrower than the given px value; the Table toggle is disabled while forced, the Cards toggle stays enabled.
-- **Virtualization** applies to the **table view only** — the cards view is never virtualized. It only pays off with a large page size: raise `defaultItemsPerPage` and `itemsPerPageOptions` (defaults are `10` and `[5, 10, 20]`). Rows are assumed to have a uniform `rowHeight`; use `truncate` + `layout="fixed"` for predictable heights.
-- Scroll resets to the top on page or items-per-page change, but **not** on filter change (known limitation). `aria-rowcount` reflects the current page (+1), not the whole dataset, because pagination is independent.
-- `virtualizedMaxHeight`, `rowHeight`, `overscan`, and `stickyHeader` only take effect when `virtualized` is true. `stickyHeader` makes each `<th>` sticky using the `--color-table-headerBg` token (fallback `#f8fafc`).
-- `TableDensity` is exported from the package. `ITSearchTable` does **not** support `layout`, `density`, `autoCardBreakpoint`, `virtualized`, or per-column `width` — do not assume parity.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />