@widergy/energy-ui 3.172.2 → 3.172.3

package/dist/esm/components/UTDataElement/UTDataElement.stories.js

@@ -1,593 +0,0 @@
-/* eslint-disable no-alert */
-import React from 'react';
-import { joinArgTypes } from 'stories/utils';
-import UTLabel from '../UTLabel';
-import { ORIENTATION, PADDING, SPACING, ACTION_TYPE } from './constants';
-import UTDataElement from '.';
-
-// Mock data for examples
-const mockDataContent = /*#__PURE__*/React.createElement(UTLabel, {
-  variant: "body1",
-  weight: "medium",
-  colorTheme: "primary"
-}, "$1,234.56");
-const mockComplexData = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UTLabel, {
-  variant: "body1",
-  weight: "medium",
-  style: {
-    marginBottom: '4px'
-  }
-}, "Informaci\xF3n Principal"), /*#__PURE__*/React.createElement(UTLabel, {
-  variant: "body2",
-  colorTheme: "gray"
-}, "Informaci\xF3n secundaria adicional"));
-const mockChildren = /*#__PURE__*/React.createElement("div", {
-  style: {
-    padding: '12px 0'
-  }
-}, /*#__PURE__*/React.createElement(UTLabel, {
-  variant: "body2",
-  colorTheme: "gray",
-  style: {
-    marginBottom: '8px'
-  }
-}, "Contenido expandible del elemento de datos."), /*#__PURE__*/React.createElement(UTLabel, {
-  variant: "body2",
-  colorTheme: "gray"
-}, "Aqu\xED puedes agregar informaci\xF3n adicional que se muestra cuando el elemento se expande."));
-export default {
-  args: {
-    title: 'Título del Elemento',
-    Data: mockDataContent,
-    orientation: ORIENTATION.HORIZONTAL,
-    paddingVertical: PADDING.MEDIUM,
-    spacing: SPACING.MEDIUM,
-    forceShowBadge: false
-  },
-  argTypes: {
-    title: {
-      control: 'text',
-      description: 'Título que se muestra en el elemento.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    prefix: {
-      control: 'text',
-      description: 'Texto que se muestra antes del título.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    Data: {
-      control: false,
-      description: 'Contenido principal del elemento. Puede ser un string, elemento React o componente UTLabel.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string | element'
-        }
-      }
-    },
-    Icon: {
-      control: 'text',
-      description: 'Icono que se muestra al inicio del elemento. Puede ser un nombre de icono o componente.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string | element'
-        }
-      }
-    },
-    badge: {
-      control: 'text',
-      description: 'Texto o número que se muestra como badge.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    forceShowBadge: {
-      control: 'boolean',
-      description: 'Fuerza mostrar el badge incluso si está vacío.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    orientation: {
-      control: 'select',
-      description: 'Orientación del elemento.',
-      options: Object.values(ORIENTATION),
-      table: {
-        defaultValue: {
-          summary: ORIENTATION.HORIZONTAL
-        },
-        type: {
-          summary: joinArgTypes(Object.values(ORIENTATION))
-        }
-      }
-    },
-    paddingVertical: {
-      control: 'select',
-      description: 'Padding vertical del elemento.',
-      options: Object.values(PADDING),
-      table: {
-        defaultValue: {
-          summary: PADDING.MEDIUM
-        },
-        type: {
-          summary: joinArgTypes(Object.values(PADDING))
-        }
-      }
-    },
-    spacing: {
-      control: 'select',
-      description: 'Espaciado entre elementos internos.',
-      options: Object.values(SPACING),
-      table: {
-        defaultValue: {
-          summary: SPACING.MEDIUM
-        },
-        type: {
-          summary: joinArgTypes(Object.values(SPACING))
-        }
-      }
-    },
-    area: {
-      control: 'boolean',
-      description: 'Determina si el elemento ocupa toda el área disponible.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    action: {
-      control: false,
-      description: 'Configuración de la acción principal del elemento.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'object'
-        }
-      }
-    },
-    children: {
-      control: false,
-      description: 'Contenido expandible que se muestra al hacer clic en el botón de colapsar.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'ReactNode'
-        }
-      }
-    },
-    dataTestId: {
-      control: 'text',
-      description: 'ID de test para pruebas automatizadas.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    iconProps: {
-      control: false,
-      description: 'Props adicionales para el componente de icono.',
-      table: {
-        defaultValue: {
-          summary: '{}'
-        },
-        type: {
-          summary: 'object'
-        }
-      }
-    },
-    dataProps: {
-      control: false,
-      description: 'Props adicionales para el componente de datos.',
-      table: {
-        defaultValue: {
-          summary: '{}'
-        },
-        type: {
-          summary: 'object'
-        }
-      }
-    },
-    titleProps: {
-      control: false,
-      description: 'Props adicionales para el título, incluyendo tooltip.',
-      table: {
-        defaultValue: {
-          summary: '{}'
-        },
-        type: {
-          summary: 'object'
-        }
-      }
-    },
-    prefixProps: {
-      control: false,
-      description: 'Props adicionales para el prefijo.',
-      table: {
-        defaultValue: {
-          summary: '{}'
-        },
-        type: {
-          summary: 'object'
-        }
-      }
-    },
-    badgeProps: {
-      control: false,
-      description: 'Props adicionales para el badge.',
-      table: {
-        defaultValue: {
-          summary: '{}'
-        },
-        type: {
-          summary: 'object'
-        }
-      }
-    },
-    classes: {
-      control: false,
-      description: 'Clases CSS personalizadas para diferentes elementos.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'object'
-        }
-      }
-    },
-    classNames: {
-      control: false,
-      description: 'Clases CSS personalizadas para diferentes elementos.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'object'
-        }
-      }
-    }
-  },
-  component: UTDataElement,
-  parameters: {
-    controls: {
-      exclude: []
-    },
-    docs: {
-      description: {
-        component: 'Componente para mostrar elementos de datos de forma estructurada. Permite mostrar título, prefijo, datos, iconos, badges y contenido expandible. Ideal para mostrar información clave de manera organizada.'
-      }
-    }
-  },
-  title: 'Energy-UI/UTDataElement'
-};
-
-// Basic Stories
-export const Default = {
-  args: {
-    title: 'Monto Total',
-    Data: mockDataContent,
-    orientation: ORIENTATION.HORIZONTAL,
-    paddingVertical: PADDING.MEDIUM,
-    spacing: SPACING.MEDIUM
-  },
-  name: 'Básico'
-};
-export const WithIcon = {
-  args: {
-    title: 'Balance Actual',
-    Data: mockDataContent,
-    Icon: 'IconWallet',
-    orientation: ORIENTATION.HORIZONTAL,
-    paddingVertical: PADDING.MEDIUM,
-    spacing: SPACING.MEDIUM
-  },
-  name: 'Con Icono'
-};
-export const WithPrefix = {
-  args: {
-    title: 'Facturación',
-    prefix: 'Mes Actual',
-    Data: mockDataContent,
-    Icon: 'IconCreditCard',
-    orientation: ORIENTATION.HORIZONTAL,
-    paddingVertical: PADDING.MEDIUM,
-    spacing: SPACING.MEDIUM
-  },
-  name: 'Con Prefijo'
-};
-export const WithBadge = {
-  args: {
-    title: 'Transacciones',
-    Data: mockDataContent,
-    badge: 'Nuevo',
-    Icon: 'IconReceipt',
-    orientation: ORIENTATION.HORIZONTAL,
-    paddingVertical: PADDING.MEDIUM,
-    spacing: SPACING.MEDIUM
-  },
-  name: 'Con Badge'
-};
-export const WithNumericBadge = {
-  args: {
-    title: 'Notificaciones',
-    Data: 'Sin leer',
-    badge: '5',
-    Icon: 'IconBell',
-    orientation: ORIENTATION.HORIZONTAL,
-    paddingVertical: PADDING.MEDIUM,
-    spacing: SPACING.MEDIUM
-  },
-  name: 'Con Badge Numérico'
-};
-export const WithTooltip = {
-  args: {
-    title: 'Información Detallada',
-    titleProps: {
-      tooltip: 'Este es un tooltip con información adicional sobre el elemento'
-    },
-    Data: mockDataContent,
-    Icon: 'IconInfoCircle',
-    orientation: ORIENTATION.HORIZONTAL,
-    paddingVertical: PADDING.MEDIUM,
-    spacing: SPACING.MEDIUM
-  },
-  name: 'Con Tooltip'
-};
-export const VerticalOrientation = {
-  args: {
-    title: 'Elemento Vertical',
-    Data: mockDataContent,
-    Icon: 'IconTrendingUp',
-    orientation: ORIENTATION.VERTICAL,
-    paddingVertical: PADDING.MEDIUM,
-    spacing: SPACING.MEDIUM
-  },
-  name: 'Orientación Vertical'
-};
-export const WithSwitchAction = {
-  args: {
-    title: 'Notificaciones Email',
-    Data: 'Activado',
-    Icon: 'IconMail',
-    action: {
-      type: ACTION_TYPE.SWITCH,
-      checked: true,
-      onChange: checked => alert("Switch ".concat(checked ? 'activado' : 'desactivado'))
-    },
-    orientation: ORIENTATION.HORIZONTAL,
-    paddingVertical: PADDING.MEDIUM,
-    spacing: SPACING.MEDIUM
-  },
-  name: 'Con Acción Switch'
-};
-export const WithButtonAction = {
-  args: {
-    title: 'Configuración Avanzada',
-    Data: 'Personalizar opciones',
-    Icon: 'IconSettings',
-    action: {
-      type: ACTION_TYPE.BUTTON,
-      text: 'Editar',
-      colorTheme: 'primary',
-      onClick: () => alert('Botón de acción presionado')
-    },
-    orientation: ORIENTATION.HORIZONTAL,
-    paddingVertical: PADDING.MEDIUM,
-    spacing: SPACING.MEDIUM
-  },
-  name: 'Con Acción Botón'
-};
-export const WithExpandableContent = {
-  args: {
-    title: 'Detalles de Transacción',
-    Data: mockDataContent,
-    Icon: 'IconReceipt',
-    children: mockChildren,
-    orientation: ORIENTATION.HORIZONTAL,
-    paddingVertical: PADDING.MEDIUM,
-    spacing: SPACING.MEDIUM
-  },
-  name: 'Con Contenido Expandible'
-};
-export const ComplexExample = {
-  args: {
-    title: 'Información Completa',
-    prefix: 'Estado',
-    Data: mockComplexData,
-    Icon: 'IconUser',
-    badge: 'Premium',
-    children: mockChildren,
-    action: {
-      type: ACTION_TYPE.BUTTON,
-      text: 'Ver Más',
-      variant: 'outlined',
-      size: 'small',
-      onClick: () => alert('Ver más información')
-    },
-    orientation: ORIENTATION.HORIZONTAL,
-    paddingVertical: PADDING.MEDIUM,
-    spacing: SPACING.MEDIUM
-  },
-  name: 'Ejemplo Complejo'
-};
-export const NestedExample = {
-  args: {
-    title: 'Prueba anidamiento',
-    prefix: 'Nivel 1',
-    Data: /*#__PURE__*/React.createElement(UTLabel, {
-      variant: "h6",
-      weight: "bold",
-      colorTheme: "primary"
-    }, "$10,000.00"),
-    Icon: 'IconBuildingBank',
-    badge: 'Master',
-    children: /*#__PURE__*/React.createElement("div", {
-      style: {
-        padding: '16px 0'
-      }
-    }, /*#__PURE__*/React.createElement(UTDataElement, {
-      title: "Este elemento es hijo del primero",
-      prefix: "Nivel 2",
-      Data: /*#__PURE__*/React.createElement(UTLabel, {
-        variant: "body1",
-        weight: "medium",
-        colorTheme: "secondary"
-      }, "$7,500.00"),
-      Icon: "IconPigMoney",
-      badge: "Active",
-      orientation: ORIENTATION.HORIZONTAL,
-      paddingVertical: PADDING.SMALL,
-      spacing: SPACING.SMALL
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        padding: '12px 0'
-      }
-    }, /*#__PURE__*/React.createElement(UTDataElement, {
-      title: "Este elemento es hijo del segundo",
-      prefix: "Nivel 3",
-      Data: /*#__PURE__*/React.createElement(UTLabel, {
-        variant: "body2",
-        weight: "regular",
-        colorTheme: "success"
-      }, "$2,500.00"),
-      Icon: "IconShield",
-      badge: "3",
-      orientation: ORIENTATION.HORIZONTAL,
-      paddingVertical: PADDING.SMALL,
-      spacing: SPACING.SMALL
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        padding: '8px 0'
-      }
-    }, /*#__PURE__*/React.createElement(UTLabel, {
-      variant: "caption",
-      colorTheme: "gray"
-    }, "\xDAltimo dep\xF3sito: $500.00 - 15 Ene 2024"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(UTLabel, {
-      variant: "caption",
-      colorTheme: "gray"
-    }, "Meta: $5,000.00 (50% completado)")))))),
-    orientation: ORIENTATION.HORIZONTAL,
-    paddingVertical: PADDING.MEDIUM,
-    spacing: SPACING.MEDIUM
-  },
-  name: 'Ejemplo de Anidamiento y contenido dinámico'
-};
-export const AreaMode = {
-  args: {
-    title: 'Elemento con Área Completa',
-    Data: mockDataContent,
-    Icon: 'IconHome',
-    area: true,
-    orientation: ORIENTATION.HORIZONTAL,
-    paddingVertical: PADDING.MEDIUM,
-    spacing: SPACING.MEDIUM
-  },
-  name: 'Modo Área'
-};
-export const SmallPadding = {
-  args: {
-    title: 'Padding Pequeño',
-    Data: mockDataContent,
-    Icon: 'IconStar',
-    orientation: ORIENTATION.HORIZONTAL,
-    paddingVertical: PADDING.SMALL,
-    spacing: SPACING.SMALL
-  },
-  name: 'Padding Pequeño'
-};
-export const SmallSpacing = {
-  args: {
-    title: 'Espaciado Pequeño',
-    prefix: 'Tipo',
-    Data: mockDataContent,
-    Icon: 'IconTag',
-    badge: '1',
-    orientation: ORIENTATION.HORIZONTAL,
-    paddingVertical: PADDING.MEDIUM,
-    spacing: SPACING.SMALL
-  },
-  name: 'Espaciado Pequeño'
-};
-export const ForcedBadge = {
-  args: {
-    title: 'Badge Forzado',
-    Data: mockDataContent,
-    Icon: 'IconFlag',
-    badge: '',
-    forceShowBadge: true,
-    orientation: ORIENTATION.HORIZONTAL,
-    paddingVertical: PADDING.MEDIUM,
-    spacing: SPACING.MEDIUM
-  },
-  name: 'Badge Forzado (Vacío)'
-};
-export const CustomDataTestId = {
-  args: {
-    title: 'Con Test ID',
-    Data: mockDataContent,
-    Icon: 'IconCode',
-    dataTestId: 'custom-data-element',
-    orientation: ORIENTATION.HORIZONTAL,
-    paddingVertical: PADDING.MEDIUM,
-    spacing: SPACING.MEDIUM
-  },
-  name: 'Con Test ID Personalizado'
-};
-export const Playground = {
-  args: {
-    title: 'Elemento de Datos',
-    prefix: '',
-    Data: mockDataContent,
-    Icon: 'IconHome',
-    badge: '',
-    forceShowBadge: false,
-    orientation: ORIENTATION.HORIZONTAL,
-    paddingVertical: PADDING.MEDIUM,
-    spacing: SPACING.MEDIUM,
-    area: false,
-    dataTestId: 'playground-data-element'
-  },
-  name: 'Playground'
-};

package/dist/esm/components/UTDatePicker/versions/V1/README.md

@@ -1,89 +0,0 @@
-# UTDatePicker V1
-
-Selector de fecha con input custom y calendario popup. Implementa los 5 estados visuales del design system mediante dos variantes de apariencia (`select` y `picker`).
-
----
-
-## Diferencias con V0
-
-| Aspecto | V0 | V1 |
-|---------|----|----|
-| Input | `KeyboardDatePicker` de MUI Pickers | Input custom con estados visuales |
-| Calendario | MUI Pickers (popup nativo) | Grid custom con `dayjs` |
-| Estilos | `materialTheme` overrides | CSS Modules + design tokens |
-| Estado visual | Sin distinción de estados | 5 estados: default, selected, focus, error, readOnly |
-| Prop nueva | — | `readOnly`, `variant` |
-
----
-
-## Props
-
-| Prop | Tipo | Default | Descripción |
-|------|------|---------|-------------|
-| `classNames` | `object` | — | Clases CSS para sobreescribir estilos internos |
-| `CustomIcon` | `elementType` | — | Reemplaza el ícono de calendario |
-| `disabled` | `bool` | — | Deshabilita toda interacción |
-| `error` | `string` | `''` | Mensaje de error externo |
-| `helpText` | `string` | — | Texto de ayuda debajo del input |
-| `onChange` | `func` | `() => {}` | Callback al confirmar fecha. Recibe string `'DD/MM/YYYY'` |
-| `placeholder` | `string` | `'DD/MM/AAAA'` | Texto cuando no hay fecha seleccionada |
-| `popoverProps` | `object` | — | Props adicionales para el `Popover` de MUI Core |
-| `range` | `{ minDate: string, maxDate: string }` | — | Limita el rango de fechas seleccionables. Formato `'DD/MM/YYYY'` |
-| `readOnly` | `bool` | `false` | Muestra solo texto sin chrome ni interacción |
-| `required` | `bool` | — | Marca el título como requerido |
-| `size` | `'sm' \| 'md'` | `'sm'` | Tamaño del input |
-| `title` | `string` | — | Etiqueta superior del campo |
-| `value` | `string` | `''` | Fecha seleccionada en formato `'DD/MM/YYYY'` |
-| `variant` | `'select' \| 'picker'` | `'select'` | Apariencia del campo. `select` muestra borde estándar con mensaje de error debajo; `picker` usa fondos de color por estado sin borde ni mensaje |
-
----
-
-## Estados visuales
-
-### `variant='select'` (default)
-
-| Estado | Condición | Fondo | Borde | Íconos |
-|--------|-----------|-------|-------|--------|
-| **default** | Sin valor, sin foco, sin error | blanco | `1px` gris | calendario (derecha) |
-| **selected** | Tiene fecha seleccionada | blanco | `1px` gris | X/clear (derecha) |
-| **focus** | Calendario abierto | blanco | `2px` azul | X (si hay valor) + calendario (derecha) |
-| **error** | `error` prop o fecha inválida | rojo claro | `1px` rojo | alerta (izquierda) + calendario rojo + mensaje debajo |
-| **readOnly/disabled** | `readOnly` o `disabled` | — | ninguno | sin íconos |
-
-### `variant='picker'`
-
-| Estado | Condición | Fondo | Borde | Íconos |
-|--------|-----------|-------|-------|--------|
-| **default** | Sin valor, sin foco, sin error | transparente | ninguno | calendario (derecha) |
-| **selected** | Tiene fecha seleccionada, sin foco | azul claro | ninguno | X/clear (derecha) |
-| **focus** | Calendario abierto, sin error | blanco | `2px` azul | X (si hay valor) + calendario (derecha) |
-| **error** | `error` prop o fecha inválida | rojo claro | ninguno | alerta (izquierda) + calendario rojo |
-| **readOnly/disabled** | `readOnly` o `disabled` | transparente | ninguno | sin íconos |
-
-Prioridad cuando hay múltiples condiciones activas: `readOnly → disabled → error → focus → selected → default`
-
----
-
-## Ejemplos de uso
-
-```jsx
-// Básico
-<UTDatePicker version="V1" onChange={setValue} value={value} />
-
-// Variante picker
-<UTDatePicker version="V1" onChange={setValue} value={value} variant="picker" />
-
-// Con rango de fechas
-<UTDatePicker
-  version="V1"
-  onChange={setValue}
-  value={value}
-  range={{ minDate: '01/01/2024', maxDate: '31/12/2024' }}
-/>
-
-// Solo lectura con valor
-<UTDatePicker version="V1" onChange={() => {}} value="15/06/2024" readOnly />
-
-// Con error externo
-<UTDatePicker version="V1" onChange={setValue} value={value} error="La fecha ingresada no es válida." />
-```