@widergy/energy-ui 3.172.1 → 3.172.3

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

@@ -1,208 +0,0 @@
-# UTChip Component
-
-## Overview
-
-`UTChip` is a compact, interactive component used to display information or actions in a condensed format. Chips are commonly used for tags, filters, selections, or quick actions. They can be interactive (clickable) or static, and support various visual states including active, disabled, and different variants.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `active` | `bool` | `false` | Indicates whether the chip is in an active state. Affects styling and colors. |
-| `adornment` | `shape` | `undefined` | Optional decorative element displayed before the text. See [Adornments](#adornments) section. |
-| `children` | `string` | Required | The text content displayed inside the chip. |
-| `dataTestId` | `string` | `undefined` | Test ID for testing purposes. |
-| `disabled` | `bool` | `false` | Disables the chip, preventing interactions and changing its appearance. |
-| `isDragging` | `bool` | `false` | Indicates whether the chip is being dragged or moved. Useful for drag and drop interactions. |
-| `onClick` | `func` | `undefined` | Callback function triggered when the chip is clicked. If provided, the chip becomes interactive and displays a close button. |
-| `onClose` | `func` | `undefined` | Callback function triggered when the close button (X) is clicked. Only displayed if `onClick` is provided. |
-| `size` | `oneOf(['medium', 'small'])` | `'medium'` | The size of the chip. Affects padding and text size. |
-| `variant` | `oneOf(['default', 'outline'])` | `'default'` | Visual style variant. `default` uses filled background, `outline` uses border-only style. |
-
-## Adornments
-
-Chips can display optional decorative elements before the text. The `adornment` prop accepts an object with the following structure:
-
-```javascript
-{
-  type: 'icon' | 'avatar' | 'image',
-  props: { /* component-specific props */ }
-}
-```
-
-### Adornment Types
-
-| Type | Component | Description | Example Props |
-|------|-----------|-------------|----------------|
-| `icon` | `UTIcon` | Displays an icon from the icon library. | `{ name: 'IconCheck', size: 20 }` |
-| `avatar` | `UTAvatar` | Displays a user avatar. | `{ src: 'url', alt: 'User Name' }` |
-| `image` | `img` | Displays a custom image. | `{ src: 'url', alt: 'Image' }` |
-
-## Variants
-
-### Default Variant
-Filled background with solid colors. Best for primary actions or selections.
-
-### Outline Variant
-Border-only style with transparent background. Best for secondary actions or filters.
-
-## Sizes
-
-### Medium (default)
-Standard size suitable for most use cases.
-
-### Small
-Compact size for space-constrained layouts.
-
-## Color Themes
-
-The chip's colors change based on its state:
-
-- **Active + Default variant**: Light background with negative (red) close button
-- **Active + Outline variant**: Accent-colored border with primary (blue) close button
-- **Inactive**: Gray text and close button
-- **Disabled**: Gray appearance, no interactions
-
-## Usage Examples
-
-### Basic Chip
-```jsx
-<UTChip>Basic Chip</UTChip>
-```
-
-### Interactive Chip with Close Button
-```jsx
-<UTChip 
-  onClick={() => console.log('Chip clicked')}
-  onClose={() => console.log('Chip closed')}
->
-  Closeable Chip
-</UTChip>
-```
-
-### Active Chip
-```jsx
-<UTChip active>
-  Active Chip
-</UTChip>
-```
-
-### Chip with Icon Adornment
-```jsx
-<UTChip 
-  adornment={{
-    type: 'icon',
-    props: { name: 'IconCheck' }
-  }}
->
-  Chip with Icon
-</UTChip>
-```
-
-### Chip with Avatar Adornment
-```jsx
-<UTChip 
-  adornment={{
-    type: 'avatar',
-    props: { src: 'avatar-url', alt: 'User' }
-  }}
->
-  User Chip
-</UTChip>
-```
-
-### Chip with Image Adornment
-```jsx
-<UTChip 
-  adornment={{
-    type: 'image',
-    props: { src: 'image-url', alt: 'Image' }
-  }}
->
-  Image Chip
-</UTChip>
-```
-
-### Small Outline Variant
-```jsx
-<UTChip 
-  size="small"
-  variant="outline"
-  onClick={() => {}}
-  onClose={() => {}}
->
-  Filter Tag
-</UTChip>
-```
-
-### Disabled Chip
-```jsx
-<UTChip disabled>
-  Disabled Chip
-</UTChip>
-```
-
-### Dragging Chip
-```jsx
-<UTChip 
-  isDragging={true}
-  onClick={() => console.log('Chip clicked')}
-  onClose={() => console.log('Chip closed')}
->
-  Draggable Chip
-</UTChip>
-```
-
-### Multiple Chips (Tag List)
-```jsx
-const tags = ['React', 'JavaScript', 'UI'];
-
-{tags.map(tag => (
-  <UTChip 
-    key={tag}
-    onClick={() => selectTag(tag)}
-    onClose={() => removeTag(tag)}
-  >
-    {tag}
-  </UTChip>
-))}
-```
-
-## Behavior
-
-### Interactive Behavior
-- When `onClick` is provided, the chip becomes interactive and displays a close button (X)
-- The close button triggers the `onClose` callback
-- The chip's appearance changes based on the `active` state
-
-### Text Sizing
-- Text size automatically adjusts based on the `size` prop:
-  - `medium`: Uses `body` text variant
-  - `small`: Uses `small` text variant
-
-### Styling
-- The component uses CSS modules for styling
-- Classes are applied dynamically based on props: `size`, `variant`, `active`, and `disabled`
-- Adornments are styled to fit within the chip's layout
-
-## Accessibility
-
-- Use `dataTestId` for testing and accessibility testing
-- Ensure the chip text is descriptive and meaningful
-- When used as a filter or selection, provide clear visual feedback with the `active` state
-- Disabled chips should have appropriate visual indication
-
-## Related Components
-
-- **UTLabel**: Used internally for text rendering
-- **UTButton**: Used internally for the close button
-- **UTIcon**: Used for icon adornments
-- **UTAvatar**: Used for avatar adornments
-- **UTTouchableWithoutFeedback**: Used for interactive container when `onClick` is provided
-
-## Notes
-
-- The component is memoized for performance optimization
-- Adornment props are merged with default props specific to each adornment type
-- The close button only appears when `onClick` is provided
-- Color themes are automatically managed based on the `active` and `variant` states

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

@@ -1,378 +0,0 @@
-import React from 'react';
-import { CHIP_SIZES, CHIP_VARIANT, ADORNMENT_TYPES } from './constants';
-import UTChip from '.';
-export default {
-  args: {
-    children: 'Chip Label'
-  },
-  argTypes: {
-    active: {
-      control: 'boolean',
-      description: 'Indica si el chip está en estado activo.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'bool'
-        }
-      }
-    },
-    adornment: {
-      control: 'object',
-      description: 'Elemento decorativo opcional que se muestra antes del texto. Puede ser un icono, avatar o imagen.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'object'
-        }
-      }
-    },
-    children: {
-      control: 'text',
-      description: 'Contenido de texto que se muestra dentro del chip.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    dataTestId: {
-      control: 'text',
-      description: 'ID para testing y propósitos de accesibilidad.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Desactiva el chip, previniendo interacciones y cambiando su apariencia.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'bool'
-        }
-      }
-    },
-    isDragging: {
-      control: 'boolean',
-      description: 'Indica si el chip está siendo arrastrado o movido. Útil para interacciones de drag and drop.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'bool'
-        }
-      }
-    },
-    onClick: {
-      control: {
-        type: 'inline-radio'
-      },
-      options: ['undefined', 'function'],
-      mapping: {
-        undefined,
-        function: () => alert('Chip clicked')
-      },
-      description: 'Función callback que se ejecuta cuando se hace clic en el chip. Si se proporciona, el chip se vuelve interactivo y muestra un botón de cerrar.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'func'
-        }
-      }
-    },
-    onClose: {
-      control: {
-        type: 'inline-radio'
-      },
-      options: ['undefined', 'function'],
-      mapping: {
-        undefined,
-        function: () => alert('Chip closed')
-      },
-      description: 'Función callback que se ejecuta cuando se hace clic en el botón de cerrar (X). Solo se muestra si onClick está definido.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'func'
-        }
-      }
-    },
-    size: {
-      control: 'select',
-      description: 'Tamaño del chip. Afecta el padding y el tamaño del texto.',
-      options: Object.values(CHIP_SIZES),
-      table: {
-        defaultValue: {
-          summary: CHIP_SIZES.MEDIUM
-        },
-        type: {
-          summary: "'".concat(CHIP_SIZES.MEDIUM, "' | '").concat(CHIP_SIZES.SMALL, "'")
-        }
-      }
-    },
-    variant: {
-      control: 'select',
-      description: 'Variante visual del chip. "default" usa fondo relleno, "outline" usa solo borde.',
-      options: Object.values(CHIP_VARIANT),
-      table: {
-        defaultValue: {
-          summary: CHIP_VARIANT.DEFAULT
-        },
-        type: {
-          summary: "'".concat(CHIP_VARIANT.DEFAULT, "' | '").concat(CHIP_VARIANT.OUTLINE, "'")
-        }
-      }
-    }
-  },
-  component: UTChip,
-  parameters: {
-    docs: {
-      description: {
-        component: 'UTChip es un componente compacto e interactivo usado para mostrar información o acciones en un formato condensado. Se usa comúnmente para tags, filtros, selecciones o acciones rápidas.'
-      }
-    }
-  },
-  title: 'Energy-UI/UTChip'
-};
-export const Default = {
-  args: {
-    active: false,
-    adornment: {
-      type: ADORNMENT_TYPES.ICON,
-      props: {
-        name: 'IconCircleCheck'
-      }
-    },
-    disabled: false,
-    isDragging: false,
-    onClick: undefined,
-    onClose: undefined,
-    size: CHIP_SIZES.MEDIUM,
-    variant: CHIP_VARIANT.DEFAULT
-  },
-  name: 'Playground'
-};
-export const Active = {
-  args: {
-    active: true,
-    disabled: false,
-    size: CHIP_SIZES.MEDIUM,
-    variant: CHIP_VARIANT.DEFAULT,
-    isDragging: false
-  }
-};
-export const Disabled = {
-  args: {
-    active: false,
-    disabled: true,
-    size: CHIP_SIZES.MEDIUM,
-    variant: CHIP_VARIANT.DEFAULT,
-    isDragging: false
-  }
-};
-export const Small = {
-  args: {
-    active: false,
-    disabled: false,
-    size: CHIP_SIZES.SMALL,
-    variant: CHIP_VARIANT.DEFAULT,
-    isDragging: false
-  }
-};
-export const Outline = {
-  args: {
-    active: false,
-    disabled: false,
-    size: CHIP_SIZES.MEDIUM,
-    variant: CHIP_VARIANT.OUTLINE,
-    isDragging: false
-  }
-};
-export const OutlineActive = {
-  args: {
-    active: true,
-    disabled: false,
-    size: CHIP_SIZES.MEDIUM,
-    variant: CHIP_VARIANT.OUTLINE,
-    isDragging: false
-  }
-};
-export const Interactive = {
-  args: {
-    active: false,
-    disabled: false,
-    onClick: () => alert('Chip clicked'),
-    onClose: () => alert('Chip closed'),
-    size: CHIP_SIZES.MEDIUM,
-    variant: CHIP_VARIANT.DEFAULT,
-    isDragging: false
-  }
-};
-export const InteractiveActive = {
-  args: {
-    active: true,
-    disabled: false,
-    onClick: () => alert('Chip clicked'),
-    onClose: () => alert('Chip closed'),
-    size: CHIP_SIZES.MEDIUM,
-    variant: CHIP_VARIANT.DEFAULT,
-    isDragging: false
-  }
-};
-export const WithIconAdornment = {
-  args: {
-    active: false,
-    adornment: {
-      type: ADORNMENT_TYPES.ICON,
-      props: {
-        name: 'IconCircleCheck'
-      }
-    },
-    disabled: false,
-    size: CHIP_SIZES.MEDIUM,
-    variant: CHIP_VARIANT.DEFAULT,
-    isDragging: false
-  }
-};
-export const WithAvatarAdornment = {
-  args: {
-    active: false,
-    adornment: {
-      type: ADORNMENT_TYPES.AVATAR,
-      props: {
-        initials: 'JD'
-      }
-    },
-    children: 'John Doe',
-    disabled: false,
-    size: CHIP_SIZES.MEDIUM,
-    variant: CHIP_VARIANT.DEFAULT,
-    isDragging: false
-  }
-};
-export const WithImageAdornment = {
-  args: {
-    active: false,
-    adornment: {
-      type: ADORNMENT_TYPES.IMAGE,
-      props: {
-        src: 'https://widergy.com/wp-content/uploads/2021/12/cropped-favicon-32x32.png'
-      }
-    },
-    disabled: false,
-    size: CHIP_SIZES.MEDIUM,
-    variant: CHIP_VARIANT.DEFAULT,
-    isDragging: false
-  }
-};
-export const SmallOutlineInteractive = {
-  args: {
-    active: false,
-    disabled: false,
-    onClick: () => alert('Filter clicked'),
-    onClose: () => alert('Filter removed'),
-    size: CHIP_SIZES.SMALL,
-    variant: CHIP_VARIANT.OUTLINE,
-    isDragging: false
-  },
-  name: 'Small Outline Interactive'
-};
-export const Dragging = {
-  args: {
-    active: false,
-    disabled: false,
-    isDragging: true,
-    onClick: () => alert('Chip clicked'),
-    onClose: () => alert('Chip closed'),
-    size: CHIP_SIZES.MEDIUM,
-    variant: CHIP_VARIANT.DEFAULT
-  }
-};
-export const AllVariants = {
-  render: () => /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      gap: '8px',
-      flexWrap: 'wrap'
-    }
-  }, /*#__PURE__*/React.createElement(UTChip, {
-    variant: CHIP_VARIANT.DEFAULT,
-    size: CHIP_SIZES.MEDIUM
-  }, "Default Medium"), /*#__PURE__*/React.createElement(UTChip, {
-    variant: CHIP_VARIANT.DEFAULT,
-    size: CHIP_SIZES.SMALL
-  }, "Default Small"), /*#__PURE__*/React.createElement(UTChip, {
-    variant: CHIP_VARIANT.OUTLINE,
-    size: CHIP_SIZES.MEDIUM
-  }, "Outline Medium"), /*#__PURE__*/React.createElement(UTChip, {
-    variant: CHIP_VARIANT.OUTLINE,
-    size: CHIP_SIZES.SMALL
-  }, "Outline Small"), /*#__PURE__*/React.createElement(UTChip, {
-    active: true,
-    variant: CHIP_VARIANT.DEFAULT,
-    size: CHIP_SIZES.MEDIUM
-  }, "Active Default"), /*#__PURE__*/React.createElement(UTChip, {
-    active: true,
-    variant: CHIP_VARIANT.OUTLINE,
-    size: CHIP_SIZES.MEDIUM
-  }, "Active Outline"), /*#__PURE__*/React.createElement(UTChip, {
-    disabled: true,
-    variant: CHIP_VARIANT.DEFAULT,
-    size: CHIP_SIZES.MEDIUM
-  }, "Disabled"))
-};
-export const TagList = {
-  render: () => {
-    const tags = ['React', 'JavaScript', 'UI Components'];
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex',
-        gap: '8px',
-        flexWrap: 'wrap'
-      }
-    }, tags.map(tag => /*#__PURE__*/React.createElement(UTChip, {
-      key: tag,
-      onClick: () => alert("Selected: ".concat(tag)),
-      onClose: () => alert("Removed: ".concat(tag)),
-      size: CHIP_SIZES.SMALL,
-      variant: CHIP_VARIANT.OUTLINE
-    }, tag)));
-  }
-};
-export const FilterChips = {
-  render: () => {
-    const filters = ['Active', 'Pending', 'Completed'];
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex',
-        gap: '8px',
-        flexWrap: 'wrap'
-      }
-    }, filters.map((filter, index) => /*#__PURE__*/React.createElement(UTChip, {
-      key: filter,
-      active: index === 0,
-      onClick: () => alert("Filter: ".concat(filter)),
-      size: CHIP_SIZES.MEDIUM,
-      variant: CHIP_VARIANT.DEFAULT
-    }, filter)));
-  }
-};

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

@@ -1,107 +0,0 @@
-# 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.                                                      |
-| 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`
-- **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} />
-```