@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -0,0 +1,621 @@
+/* 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'
+        }
+      }
+    },
+    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'
+        }
+      }
+    },
+    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 AreaModeCustomProps = {
+  args: {
+    title: 'Área con Color Personalizado',
+    Data: mockDataContent,
+    Icon: 'IconPalette',
+    area: true,
+    areaProps: {
+      colorTheme: 'accent',
+      shade: '01'
+    },
+    orientation: ORIENTATION.HORIZONTAL,
+    paddingVertical: PADDING.MEDIUM,
+    spacing: SPACING.MEDIUM
+  },
+  name: 'Modo Área — Color Personalizado'
+};
+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/UTDataElement/components/MainAction/index.js

@@ -1 +1,40 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}import React from"react";import{bool,oneOf,func,string,number,oneOfType}from"prop-types";import{TEST_IDS}from"../../../../constants/testIds";import UTSwitch from"../../../UTSwitch";import UTButton from"../../../UTButton";import{ACTION_TYPE}from"../../constants";const{dataElement:dataElement}=TEST_IDS,MainAction=_ref=>{let{type:type=ACTION_TYPE.BUTTON,onChange:onChange,value:value,onClick:onClick,dataTestId:dataTestId,...props}=_ref;return type===ACTION_TYPE.SWITCH&&onChange?React.createElement(UTSwitch,_extends({onChange:onChange,value:value},props,{dataTestId:dataTestId?"".concat(dataTestId,".").concat(dataElement.switchAction):void 0,version:"V1"})):type===ACTION_TYPE.BUTTON&&onClick?React.createElement(UTButton,_extends({dataTestId:dataTestId?"".concat(dataTestId,".").concat(dataElement.buttonAction):void 0,variant:"text",onClick:onClick},props)):null};MainAction.propTypes={dataTestId:string,id:oneOfType([string,number]),onChange:func,onClick:func,type:oneOf(Object.values(ACTION_TYPE)),value:bool};export default MainAction;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { bool, oneOf, func, string, number, oneOfType } from 'prop-types';
+import { TEST_IDS } from '../../../../constants/testIds';
+import UTSwitch from '../../../UTSwitch';
+import UTButton from '../../../UTButton';
+import { ACTION_TYPE } from '../../constants';
+const {
+  dataElement
+} = TEST_IDS;
+const MainAction = _ref => {
+  let {
+    type = ACTION_TYPE.BUTTON,
+    onChange,
+    value,
+    onClick,
+    dataTestId,
+    ...props
+  } = _ref;
+  return type === ACTION_TYPE.SWITCH && onChange ? /*#__PURE__*/React.createElement(UTSwitch, _extends({
+    onChange: onChange,
+    value: value
+  }, props, {
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataElement.switchAction) : undefined,
+    version: "V1"
+  })) : type === ACTION_TYPE.BUTTON && onClick ? /*#__PURE__*/React.createElement(UTButton, _extends({
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataElement.buttonAction) : undefined,
+    variant: "text",
+    onClick: onClick
+  }, props)) : null;
+};
+MainAction.propTypes = {
+  dataTestId: string,
+  id: oneOfType([string, number]),
+  onChange: func,
+  onClick: func,
+  type: oneOf(Object.values(ACTION_TYPE)),
+  value: bool
+};
+export default MainAction;

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

@@ -1 +1,24 @@
-export const ORIENTATION={HORIZONTAL:"horizontal",VERTICAL:"vertical"};export const PADDING={SMALL:"small",MEDIUM:"medium"};export const SPACING={XS:"xs",SMALL:"small",MEDIUM:"medium"};export const ACTION_TYPE={SWITCH:"switch",BUTTON:"button"};export const TOOLTIP_PROPS={appendTo:()=>document.body,interactive:!1};export const ANIMATION={TRANSITION_DURATION:300};
+export const ORIENTATION = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical'
+};
+export const PADDING = {
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};
+export const SPACING = {
+  XS: 'xs',
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};
+export const ACTION_TYPE = {
+  SWITCH: 'switch',
+  BUTTON: 'button'
+};
+export const TOOLTIP_PROPS = {
+  appendTo: () => document.body,
+  interactive: false
+};
+export const ANIMATION = {
+  TRANSITION_DURATION: 300
+};