@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTCuit/versions/V1/index.js

@@ -1 +1,155 @@
-import React,{useState,useEffect,useRef,useCallback}from"react";import{shouldShowErrors}from"@widergy/web-utils/lib/form";import{string,bool}from"prop-types";import UTLabel from"../../../UTLabel";import UTTextInput from"../../../UTTextInput";import WithTheme from"../../../WithTheme";import{inputPropTypes,metaPropTypes,fieldType}from"../../../../types/formTypes";import styles from"./styles.module.scss";const UTCuit=_ref=>{var _field$configuration;let{documentDataTestId:documentDataTestId,field:field,input:input,meta:meta,prefixDataTestId:prefixDataTestId,verificationCodeDataTestId:verificationCodeDataTestId,dni:dni,disableDocument:disableDocument=!1}=_ref;const[prefix,setPrefix]=useState(""),[verificationCode,setVerificationCode]=useState(""),[document,setDocument]=useState(""),verificationCodeRef=useRef(null),documentRef=useRef(null),getDocumentValue=useCallback(()=>{const rawDocumentValue=disableDocument&&dni?dni:document;return rawDocumentValue?rawDocumentValue.padStart(8,"0"):""},[disableDocument,dni,document]),handleChangeCuit=useCallback(()=>{const documentValue=getDocumentValue(),fullCuit=prefix.concat(documentValue,verificationCode);input.onChange(fullCuit)},[prefix,document,verificationCode,input,disableDocument,dni]);useEffect(()=>{disableDocument&&dni&&!document&&setDocument(dni.padStart(8,"0"))},[disableDocument,dni,document]);const handleOnChangePrefix=useCallback(event=>{const numericValue=(event&&event.target?event.target.value:event).replace(/[^0-9]/g,"");0===numericValue.length?setPrefix(""):"2"===numericValue[0]?setPrefix(numericValue):setPrefix("")},[]),handleOnChangeDocument=useCallback(event=>{const numericValue=(event&&event.target?event.target.value:event).replace(/[^0-9]/g,"");setDocument(numericValue)},[]),handleOnChangeVerificationCode=useCallback(event=>{const numericValue=(event&&event.target?event.target.value:event).replace(/[^0-9]/g,"");setVerificationCode(numericValue)},[]),handleFocus=useCallback(()=>{const documentValue=getDocumentValue();var _verificationCodeRef$;if(2===prefix.length&&8===documentValue.length)null===(_verificationCodeRef$=verificationCodeRef.current)||void 0===_verificationCodeRef$||_verificationCodeRef$.focus();else if(2===prefix.length&&!disableDocument){var _documentRef$current;null===(_documentRef$current=documentRef.current)||void 0===_documentRef$current||_documentRef$current.focus()}},[prefix,document,disableDocument,dni]);return useEffect(()=>{handleChangeCuit()},[handleChangeCuit]),useEffect(()=>{handleFocus()},[handleFocus]),React.createElement("div",{className:styles.container},(null==field?void 0:field.label)&&React.createElement(UTLabel,{className:styles.label,variant:"medium"},null==field?void 0:field.label),React.createElement("div",{className:styles.fieldContainer},React.createElement("div",{className:styles.fieldCuit},React.createElement(UTTextInput,{version:"V1",autoComplete:"off",autofocus:(null===(_field$configuration=field.configuration)||void 0===_field$configuration?void 0:_field$configuration.auto_focus)||!1,dataTestId:prefixDataTestId,alwaysShowPlaceholder:!0,field:field,input:{name:"prefix"},maxLength:2,meta:meta,onChange:handleOnChangePrefix,placeholder:"XX",type:"text",value:prefix||""})),React.createElement("div",{className:styles.fieldDocument},React.createElement(UTTextInput,{version:"V1",autoComplete:"off",dataTestId:documentDataTestId,alwaysShowPlaceholder:!dni,disabled:disableDocument&&dni,field:field,value:dni,input:{value:disableDocument&&dni?dni:document,onChange:disableDocument&&dni?()=>{}:handleOnChangeDocument,name:"document"},maxLength:8,inputRef:disableDocument?null:documentRef,meta:meta,placeholder:"XXXXXXXX",type:"numeric"})),React.createElement("div",{className:styles.fieldCuit},React.createElement(UTTextInput,{version:"V1",autoComplete:"off",dataTestId:verificationCodeDataTestId,alwaysShowPlaceholder:!0,field:field,input:{value:verificationCode||"",name:"verificationCode"},onChange:handleOnChangeVerificationCode,maxLength:1,inputRef:verificationCodeRef,meta:meta,placeholder:"X",type:"text"}))),React.createElement(UTLabel,{variant:"small",colorTheme:"error"},shouldShowErrors(meta)?meta.error:""))};UTCuit.propTypes={documentDataTestId:string,field:fieldType,input:inputPropTypes,meta:metaPropTypes,prefixDataTestId:string,verificationCodeDataTestId:string,dni:string,disableDocument:bool};export default WithTheme(null,null)(UTCuit);
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { shouldShowErrors } from '@widergy/web-utils/lib/form';
+import { string, bool } from 'prop-types';
+import UTLabel from '../../../UTLabel';
+import UTTextInput from '../../../UTTextInput';
+import WithTheme from '../../../WithTheme';
+import { inputPropTypes, metaPropTypes, fieldType } from '../../../../types/formTypes';
+import styles from './styles.module.scss';
+const UTCuit = _ref => {
+  var _field$configuration;
+  let {
+    documentDataTestId,
+    field,
+    input,
+    meta,
+    prefixDataTestId,
+    verificationCodeDataTestId,
+    dni,
+    disableDocument = false
+  } = _ref;
+  const [prefix, setPrefix] = useState('');
+  const [verificationCode, setVerificationCode] = useState('');
+  const [document, setDocument] = useState('');
+  const verificationCodeRef = useRef(null);
+  const documentRef = useRef(null);
+  const getDocumentValue = useCallback(() => {
+    const rawDocumentValue = disableDocument && dni ? dni : document;
+    return rawDocumentValue ? rawDocumentValue.padStart(8, '0') : '';
+  }, [disableDocument, dni, document]);
+  const handleChangeCuit = useCallback(() => {
+    const documentValue = getDocumentValue();
+    const fullCuit = prefix.concat(documentValue, verificationCode);
+    input.onChange(fullCuit);
+  }, [prefix, document, verificationCode, input, disableDocument, dni]);
+  useEffect(() => {
+    if (disableDocument && dni && !document) {
+      setDocument(dni.padStart(8, '0'));
+    }
+  }, [disableDocument, dni, document]);
+  const handleOnChangePrefix = useCallback(event => {
+    const value = event && event.target ? event.target.value : event;
+    const numericValue = value.replace(/[^0-9]/g, '');
+    if (numericValue.length === 0) {
+      setPrefix('');
+    } else if (numericValue[0] === '2') {
+      setPrefix(numericValue);
+    } else {
+      setPrefix('');
+    }
+  }, []);
+  const handleOnChangeDocument = useCallback(event => {
+    const value = event && event.target ? event.target.value : event;
+    const numericValue = value.replace(/[^0-9]/g, '');
+    setDocument(numericValue);
+  }, []);
+  const handleOnChangeVerificationCode = useCallback(event => {
+    const value = event && event.target ? event.target.value : event;
+    const numericValue = value.replace(/[^0-9]/g, '');
+    setVerificationCode(numericValue);
+  }, []);
+  const handleFocus = useCallback(() => {
+    const documentValue = getDocumentValue();
+    if (prefix.length === 2 && documentValue.length === 8) {
+      var _verificationCodeRef$;
+      (_verificationCodeRef$ = verificationCodeRef.current) === null || _verificationCodeRef$ === void 0 || _verificationCodeRef$.focus();
+    } else if (prefix.length === 2 && !disableDocument) {
+      var _documentRef$current;
+      (_documentRef$current = documentRef.current) === null || _documentRef$current === void 0 || _documentRef$current.focus();
+    }
+  }, [prefix, document, disableDocument, dni]);
+  useEffect(() => {
+    handleChangeCuit();
+  }, [handleChangeCuit]);
+  useEffect(() => {
+    handleFocus();
+  }, [handleFocus]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, (field === null || field === void 0 ? void 0 : field.label) && /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.label,
+    variant: "medium"
+  }, field === null || field === void 0 ? void 0 : field.label), /*#__PURE__*/React.createElement("div", {
+    className: styles.fieldContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.fieldCuit
+  }, /*#__PURE__*/React.createElement(UTTextInput, {
+    version: "V1",
+    autoComplete: "off",
+    autofocus: ((_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.auto_focus) || false,
+    dataTestId: prefixDataTestId,
+    alwaysShowPlaceholder: true,
+    field: field,
+    input: {
+      name: 'prefix'
+    },
+    maxLength: 2,
+    meta: meta,
+    onChange: handleOnChangePrefix,
+    placeholder: "XX",
+    type: "text",
+    value: prefix || ''
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.fieldDocument
+  }, /*#__PURE__*/React.createElement(UTTextInput, {
+    version: "V1",
+    autoComplete: "off",
+    dataTestId: documentDataTestId,
+    alwaysShowPlaceholder: !dni,
+    disabled: disableDocument && dni,
+    field: field,
+    value: dni,
+    input: {
+      value: disableDocument && dni ? dni : document,
+      onChange: disableDocument && dni ? () => {} : handleOnChangeDocument,
+      name: 'document'
+    },
+    maxLength: 8,
+    inputRef: !disableDocument ? documentRef : null,
+    meta: meta,
+    placeholder: "XXXXXXXX",
+    type: "numeric"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.fieldCuit
+  }, /*#__PURE__*/React.createElement(UTTextInput, {
+    version: "V1",
+    autoComplete: "off",
+    dataTestId: verificationCodeDataTestId,
+    alwaysShowPlaceholder: true,
+    field: field,
+    input: {
+      value: verificationCode || '',
+      name: 'verificationCode'
+    },
+    onChange: handleOnChangeVerificationCode,
+    maxLength: 1,
+    inputRef: verificationCodeRef,
+    meta: meta,
+    placeholder: "X",
+    type: "text"
+  }))), /*#__PURE__*/React.createElement(UTLabel, {
+    variant: "small",
+    colorTheme: "error"
+  }, shouldShowErrors(meta) ? meta.error : ''));
+};
+UTCuit.propTypes = {
+  documentDataTestId: string,
+  field: fieldType,
+  input: inputPropTypes,
+  meta: metaPropTypes,
+  prefixDataTestId: string,
+  verificationCodeDataTestId: string,
+  dni: string,
+  disableDocument: bool
+};
+export default WithTheme(null, null)(UTCuit);

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

@@ -0,0 +1,109 @@
+# UTDataCategory
+
+A collapsible container component that displays a list of data elements with an optional title and collapse functionality.
+
+## Props
+
+| Name          | Type   | Default | Description                                                                        |
+| ------------- | ------ | ------- | ---------------------------------------------------------------------------------- |
+| area          | bool   | `false` | When true, applies background color and padding to create an area-like appearance. |
+| areaProps     | object |         | Additional props for customizing the area styling (colorTheme, shade).             |
+| classes       | object |         | Theme-based styling classes.                                                       |
+| classNames    | object |         | Custom CSS class names for styling the component.                                  |
+| collapsable   | bool   | `true`  | Specifies if the data list is collapsible.                                         |
+| dataTestId    | string |         | Test ID for testing purposes.                                                      |
+| description   | string |         | Description text displayed below the title.                                        |
+| descriptionProps | object |      | Additional props for customizing the description UTLabel component.               |
+| elements      | array  | `[]`    | Array of objects to be rendered as UTDataElement components.                       |
+| elementsProps | object | `{}`    | Additional props that apply to all UTDataElement components.                       |
+| expanded      | bool   | `false` | Controls the initial expanded state of the component.                              |
+| style         | object |         | Inline styles for the component.                                                   |
+| title         | string |         | Title text displayed in the component header.                                      |
+| titleProps    | object |         | Additional props for customizing the title UTLabel component.                      |
+
+## Behavior
+
+- **Collapsible**: The component is only collapsible if it has a `title` and `collapsable` is `true`. Clicking anywhere on the header (title, description) toggles it; the chevron next to the title is only a visual indicator. Clicks on `action` don't affect the toggle.
+- **Initial State**: The component starts collapsed by default unless `expanded` is `true`
+- **Area Styling**: When `area` is `true`, the component gets background color and padding
+- **Smooth Transitions**: Collapse/expand animations use CSS transitions for smooth UX
+
+## Elements Array
+
+Each element in the `elements` array should be an object that will be passed as props to a `UTDataElement` component. Common props include:
+
+- `title`: The main text label
+- `Data`: The data content (can be string, component, or JSX)
+- `Icon`: Icon name or component
+- `badge`: Badge content
+- `action`: Action button configuration
+- `children`: Collapsible children content
+- `orientation`: 'horizontal' or 'vertical' layout
+- `paddingVertical`: 'small' or 'medium' padding
+- `spacing`: 'small' or 'medium' spacing
+
+## Examples
+
+### Basic Usage
+
+```jsx
+import UTDataCategory from '@energy/ui/UTDataCategory';
+
+const dataElements = [
+  {
+    title: 'Name',
+    Data: 'John Doe',
+    Icon: 'IconUser'
+  },
+  {
+    title: 'Email',
+    Data: 'john.doe@example.com',
+    Icon: 'IconMail'
+  }
+];
+
+<UTDataCategory title="User Information" elements={dataElements} />;
+```
+
+### With Area Styling
+
+```jsx
+<UTDataCategory
+  title="Account Details"
+  elements={dataElements}
+  area={true}
+  areaProps={{
+    colorTheme: 'light',
+    shade: '03'
+  }}
+/>
+```
+
+### Custom Styling
+
+```jsx
+<UTDataCategory
+  title="Custom Styled"
+  elements={dataElements}
+  classNames={{
+    container: 'custom-container',
+    element: 'custom-element'
+  }}
+  titleProps={{
+    weight: 'bold',
+    colorTheme: 'primary'
+  }}
+/>
+```
+
+### Non-collapsible
+
+```jsx
+<UTDataCategory title="Always Visible" elements={dataElements} collapsable={false} />
+```
+
+### Initially Expanded
+
+```jsx
+<UTDataCategory title="Pre-expanded" elements={dataElements} expanded={true} />
+```

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

@@ -0,0 +1,400 @@
+/* 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'
+};