@widergy/energy-ui 3.173.2 → 3.173.4

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

@@ -1,400 +0,0 @@
-/* eslint-disable no-alert */
-import { ACTION_TYPE } from './constants';
-import UTDataCategory from '.';
-
-// Mock data for examples
-const mockElements = [{
-  title: 'Plan Mensual',
-  Data: '$4.999',
-  Icon: 'IconCreditCard',
-  badge: 'Activo'
-}, {
-  title: 'Almacenamiento',
-  Data: '50GB disponibles',
-  Icon: 'IconCloud'
-}, {
-  title: 'Soporte Prioritario',
-  Data: 'Atención 24/7',
-  Icon: 'IconHeadset'
-}];
-const mockElementsWithActions = [{
-  title: 'Streaming Plus',
-  Data: 'Plan mensual',
-  Icon: 'IconDeviceTv',
-  badge: 'Activo',
-  action: {
-    type: ACTION_TYPE.SWITCH,
-    checked: true,
-    onChange: checked => alert("Streaming Plus ".concat(checked ? 'activado' : 'desactivado'))
-  }
-}, {
-  title: 'Almacenamiento en la Nube',
-  Data: '50GB disponibles',
-  Icon: 'IconCloud',
-  action: {
-    type: ACTION_TYPE.BUTTON,
-    text: 'Editar',
-    variant: 'text',
-    onClick: () => alert('Editar plan de almacenamiento')
-  }
-}, {
-  title: 'Soporte Premium',
-  Data: 'Atención prioritaria 24/7',
-  Icon: 'IconHeadset',
-  action: {
-    type: ACTION_TYPE.SWITCH,
-    checked: false,
-    onChange: checked => alert("Soporte Premium ".concat(checked ? 'activado' : 'desactivado'))
-  }
-}];
-export default {
-  args: {
-    title: 'Categoría de Datos',
-    elements: mockElements,
-    collapsable: true,
-    expanded: false
-  },
-  argTypes: {
-    title: {
-      control: 'text',
-      description: 'Título que se muestra en el encabezado de la categoría.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    description: {
-      control: 'text',
-      description: 'Descripción que se muestra debajo del título.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    descriptionProps: {
-      control: false,
-      description: 'Props adicionales para el UTLabel de la descripción.',
-      table: {
-        defaultValue: {
-          summary: '{}'
-        },
-        type: {
-          summary: 'object'
-        }
-      }
-    },
-    Icon: {
-      control: 'text',
-      description: 'Icono que se muestra al inicio del título. Nombre de icono de UTIcon.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    iconProps: {
-      control: false,
-      description: 'Props adicionales para el icono del título.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'object'
-        }
-      }
-    },
-    collapsable: {
-      control: 'boolean',
-      description: 'Determina si la categoría es colapsable. Al hacer clic en el encabezado (título, descripción) se expande/colapsa; el chevron junto al título es solo un indicador visual.',
-      table: {
-        defaultValue: {
-          summary: 'true'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    expanded: {
-      control: 'boolean',
-      description: 'Controla el estado inicial expandido del componente.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    action: {
-      control: false,
-      description: 'Configuración de la acción principal del encabezado (botón o switch). No dispara el colapso al hacer clic.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'object'
-        }
-      }
-    },
-    elements: {
-      control: false,
-      description: 'Array de objetos que se renderizan como componentes UTDataElement.',
-      table: {
-        defaultValue: {
-          summary: '[]'
-        },
-        type: {
-          summary: 'array'
-        }
-      }
-    },
-    elementsProps: {
-      control: false,
-      description: 'Props adicionales aplicadas a todos los UTDataElement renderizados.',
-      table: {
-        defaultValue: {
-          summary: '{}'
-        },
-        type: {
-          summary: 'object'
-        }
-      }
-    },
-    area: {
-      control: 'boolean',
-      description: 'Cuando es true, aplica color de fondo y padding para dar apariencia de área.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    areaProps: {
-      control: false,
-      description: "Personaliza el fondo del área. Acepta `colorTheme` (cualquier valor de COLOR_THEMES) y `shade` ('01'–'05'). Solo aplica cuando `area` es `true`.",
-      table: {
-        defaultValue: {
-          summary: '{}'
-        },
-        type: {
-          summary: 'object'
-        }
-      }
-    },
-    dataTestId: {
-      control: 'text',
-      description: 'ID de test para pruebas automatizadas.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    titleProps: {
-      control: false,
-      description: 'Props adicionales para el UTLabel del título.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'object'
-        }
-      }
-    },
-    classes: {
-      control: false,
-      description: 'Clases de tema para estilos.',
-      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: UTDataCategory,
-  parameters: {
-    controls: {
-      exclude: []
-    },
-    docs: {
-      description: {
-        component: 'Contenedor colapsable que agrupa una lista de UTDataElement bajo un título y descripción opcionales.'
-      }
-    }
-  },
-  title: 'Energy-UI/UTDataCategory'
-};
-
-// Basic Stories
-export const Default = {
-  args: {
-    title: 'Información de la Cuenta',
-    elements: mockElements
-  },
-  name: 'Básico'
-};
-export const WithDescription = {
-  args: {
-    title: 'Información de la Cuenta',
-    description: 'Datos generales asociados a tu cuenta actual.',
-    Icon: 'IconUser',
-    elements: mockElements
-  },
-  name: 'Con Descripción'
-};
-export const NonCollapsable = {
-  args: {
-    title: 'Resumen Fijo',
-    description: 'Esta categoría siempre está expandida.',
-    collapsable: false,
-    elements: mockElements
-  },
-  name: 'No Colapsable'
-};
-export const ExpandedByDefault = {
-  args: {
-    title: 'Categoría Expandida',
-    elements: mockElements,
-    expanded: true
-  },
-  name: 'Expandida por Defecto'
-};
-export const WithHeaderAction = {
-  args: {
-    title: 'Métodos de Pago',
-    description: 'Administrá los métodos de pago asociados a tu cuenta.',
-    Icon: 'IconWallet',
-    action: {
-      type: ACTION_TYPE.BUTTON,
-      text: 'Agregar',
-      variant: 'text',
-      onClick: () => alert('Agregar nuevo método de pago')
-    },
-    elements: mockElements
-  },
-  name: 'Con Acción en el Encabezado'
-};
-export const WithButtonAction = {
-  args: {
-    title: 'Datos de Facturación',
-    description: 'Información asociada a tu método de pago activo.',
-    Icon: 'IconCreditCard',
-    action: {
-      type: ACTION_TYPE.BUTTON,
-      text: 'Editar',
-      variant: 'text',
-      onClick: () => alert('Editar datos de facturación')
-    },
-    elements: mockElements
-  },
-  name: 'Con Acción Botón'
-};
-export const WithSwitchAction = {
-  args: {
-    title: 'Notificaciones Push',
-    description: 'Activá o desactivá las notificaciones de tu cuenta.',
-    Icon: 'IconBell',
-    action: {
-      type: ACTION_TYPE.SWITCH,
-      checked: true,
-      onChange: checked => alert("Switch ".concat(checked ? 'activado' : 'desactivado'))
-    },
-    elements: mockElements
-  },
-  name: 'Con Acción Switch'
-};
-export const CollapsableWithActions = {
-  args: {
-    title: 'Suscripciones Activas',
-    description: 'Gestioná los servicios a los que estás suscripto.',
-    Icon: 'IconApps',
-    collapsable: true,
-    action: {
-      type: ACTION_TYPE.BUTTON,
-      text: 'Agregar',
-      variant: 'text',
-      onClick: () => alert('Agregar nueva suscripción')
-    },
-    elements: mockElementsWithActions
-  },
-  name: 'Colapsable con Acciones (Encabezado y Elementos)'
-};
-export const AreaMode = {
-  args: {
-    title: 'Categoría con Área',
-    description: 'Esta categoría tiene un fondo destacado.',
-    area: true,
-    elements: mockElements
-  },
-  name: 'Modo Área'
-};
-export const AreaModeCustomProps = {
-  args: {
-    title: 'Área con Color Personalizado',
-    area: true,
-    areaProps: {
-      colorTheme: 'accent',
-      shade: '01'
-    },
-    elements: mockElements
-  },
-  name: 'Modo Área — Color Personalizado'
-};
-export const CustomDataTestId = {
-  args: {
-    title: 'Con Test ID',
-    elements: mockElements,
-    dataTestId: 'custom-data-category'
-  },
-  name: 'Con Test ID Personalizado'
-};
-export const Playground = {
-  args: {
-    title: 'Categoría de Datos',
-    description: '',
-    Icon: 'IconFolder',
-    collapsable: true,
-    expanded: false,
-    area: false,
-    elements: mockElementsWithActions,
-    dataTestId: 'playground-data-category'
-  },
-  name: 'Playground'
-};

package/dist/esm/components/UTDataElement/README.md

@@ -1,150 +0,0 @@
-# UTDataElement
-
-A versatile data component that can be customized with various themes, sizes, icons, data elements, and actions. It supports both horizontal and vertical layouts, collapsible content, and different types of actions including buttons and switches.
-
-## Props
-
-| Name               | Type              | Default      | Description                                                        |
-| ------------------ | ----------------- | ------------ | ------------------------------------------------------------------ |
-| action             | object            |              | Action configuration for button or switch. See Action Types below. |
-| area               | bool              | `false`      | Specifies whether the component has a background area.             |
-| areaProps          | object            | `{}`         | Customizes the area background. Supports `colorTheme` (any `COLOR_THEMES` value) and `shade` (`'01'`–`'05'`). Only applies when `area` is `true`. |
-| badge              | string \| number  |              | Displays a badge with text or number.                              |
-| badgeProps         | object            | `{}`         | Additional props for customizing the badge.                        |
-| children           | element           |              | Collapsible content displayed below the main component.            |
-| classes            | objectOf(string)  |              | Theme classes for styling.                                         |
-| classNames         | objectOf(string)  |              | Additional class names for custom styling.                         |
-| Data               | element \| string |              | Data content to display (can be a React element or string).        |
-| dataProps          | object            | `{}`         | Additional props for configuring the data element.                 |
-| forceShowBadge     | bool              | `false`      | Forces the badge to be displayed even when empty.                  |
-| Icon               | element \| string |              | Icon to display (can be a UTIcon name or custom React element).    |
-| iconProps          | object            | `{}`         | Additional props for the icon element.                             |
-| orientation        | string            | `horizontal` | Defines the layout orientation.                                    |
-| paddingVertical    | string            | `medium`     | Vertical padding applied to the component.                         |
-| prefix             | string            |              | Text or symbol displayed before the title.                         |
-| prefixProps        | object            | `{}`         | Additional props for customizing the prefix.                       |
-| spacing            | string            | `medium`     | Defines the spacing between elements.                              |
-| title              | string            |              | Title text displayed in the component.                             |
-| titleProps         | object            | `{}`         | Additional props for customizing the title.                        |
-| transitionDuration | number            | `300`        | Duration of the transition animation in milliseconds.              |
-
-## Action Types
-
-The `action` prop supports two types of actions:
-
-### Button Action
-
-```javascript
-{
-  type: 'button',
-  onClick: () => console.log('Button clicked'),
-  Icon: 'IconEdit',
-  // ... other UTButton props
-}
-```
-
-### Switch Action
-
-```javascript
-{
-  type: 'switch',
-  onChange: (value) => console.log('Switch toggled:', value),
-  value: true,
-  // ... other UTSwitch props
-}
-```
-
-## Orientation
-
-The value of `orientation` must be one of the following:
-
-- `horizontal` - Elements are arranged in a row
-- `vertical` - Elements are arranged in a column
-
-## Padding & Spacing
-
-The values of `paddingVertical` and `spacing` must be one of the following:
-
-- `small` - 8px spacing/padding
-- `medium` - 16px spacing/padding
-
-## Collapsible Content
-
-If the component has any `children`, it will automatically become collapsible. Clicking anywhere on the title/data area expands/collapses the content; the chevron next to the title is only a visual indicator of the current state. Clicks on `action` (button or switch) don't affect the toggle since it sits outside that clickable area.
-
-## Examples
-
-### Basic Usage
-
-```javascript
-<UTDataElement title="User Information" Data="John Doe" Icon="IconUser" />
-```
-
-### With Action and Badge
-
-```javascript
-<UTDataElement
-  title="Status"
-  Data="Active"
-  badge="New"
-  action={{
-    type: 'button',
-    onClick: () => console.log('Edit clicked'),
-    Icon: 'IconEdit'
-  }}
-/>
-```
-
-### With Switch Action
-
-```javascript
-<UTDataElement
-  title="Notifications"
-  Data="Email notifications enabled"
-  action={{
-    type: 'switch',
-    onChange: value => setNotifications(value),
-    value: notificationsEnabled
-  }}
-/>
-```
-
-### With Collapsible Content
-
-```javascript
-<UTDataElement title="Details" Data="Click to expand" Icon="IconInfo">
-  <UTLabel>Additional information here</UTLabel>
-  <UTIcon name="IconBeach" colorTheme="success" />
-</UTDataElement>
-```
-
-### With Custom Data Component
-
-```javascript
-<UTDataElement
-  title="Status"
-  Data={
-    <UTStatus variant="information" Icon="IconPlanet">
-      Online
-    </UTStatus>
-  }
-/>
-```
-
-### With Area Background
-
-```javascript
-<UTDataElement area title="Highlighted Item" Data="Important information" Icon="IconStar" />
-```
-
-### With Custom Area Style
-
-```javascript
-<UTDataElement
-  area
-  areaProps={{ colorTheme: 'accent', shade: '01' }}
-  title="Custom Area"
-  Data="Custom background color and shade"
-  Icon="IconStar"
-/>
-```

package/dist/esm/components/UTDataElement/UTDataElement.mdx

@@ -1,11 +0,0 @@
-import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/blocks';
-
-import * as UTDataElementStories from './UTDataElement.stories';
-
-<Meta of={UTDataElementStories} />
-
-<Title>UTDataElement</Title>
-
-<Description of={UTDataElementStories} />
-
-<ArgTypes />